CSS

作者: 叫我老村长 | 来源:发表于2018-07-08 13:42 被阅读6次

文本标签

和

em标签用于表示一段内容中的着重点。（语气强调）

strong标签用于表示一个内容的重要性。（内容强调）

通常em显示为斜体，而strong显示为粗体。

和

i标签会使文字变成斜体。京东用 ico 展现小图片，小图标，这和em显示斜体的区别

b标签会使文字变成粗体。
二者存表现的，不同于和，没语意。只是加粗和斜体

small

表示细则，变成小字，比如版权。

big
变成大字。现在不用。都是表现的，都用css样式变。

cite

<cite>《七龙珠》</cite> 变斜

q

孔子曾经说过：<q>学而时习之不亦说乎</q>
----->出现" " css加的. before . 后期就不需要把带的去掉,因为ie7就不支持"".样式不统一.

blockquote
<blockquote>天将降大任于是人也...</blockquote>
独占一行了所以不能用包含了。

知乎，用的比较多，比如知乎上引用别人的话（回复）就需要这个。

sup和sub

sup（包起来想要表线的元素）：上标常用：百度百科后面的小链接。

sub : ：下标

<ins>和<del>

ins表示插入的内容，显示时通常会加上下划线。

del表示删除的内容，显示时通常会加上删除线。常用：京东淘宝价格知道语意就可以，CSS做样式。

<code>和<pre>

pre 预格式保存代码格式。结果：默认等宽字体了，每个字符宽度一样了，保存原来格式了。

code 表示代码的（语意）

一般他俩一起用。 -->爬到code标签就知道抓到了代码。

学文本就是学语意，样式CSS写。

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>

</head>
<body>
    <p>
        测<em>试</em>！<br>
        测<strong>试</strong><br>
        测<i>试</i>！<br>
        测<b>试</b>！<br>
        测<small>试</small>！<br>
        测<big>试</big>！<br>
        <cite>《测试》</cite> <br>
        测试<q>测试</q>测试<br>
        <blockquote>测试1</blockquote><br>
        lao<sup><a href="#">[1]</a></sup><br>
        lao<sub><a href="#">[1]</a></sub><br>
        老王真<ins>有钱</ins><br>
        有<del>100000w</del><br>
        不，有100000000w<br>
        
    </p>
    <pre><code>
while True:
    </code></pre>

</body>
</html>

执行结果：

效果图1.png

列表（三者可以互相嵌套）

1. 有序列表（序号）

输出结果：显示1、2、3、（可以更改样式 type=‘1’ type=‘a’ type=‘i’）

demo

<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>

2. 无序列表（用的最多）

输出结果：前面带项目符号（点，不用原点可以换详见手册）一般不用默认，因为不同浏览器，显示不同。如果必须有用背景图片。

常用：新闻列表，下方123导航。

！！！去除项目符号：

<ul>
        list-type:none；
</ul>

demo

<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>

！li是块元素，ul就是块元素所以能嵌套。

3. 定义列表

（给一个东西下定义）
使用dl、dd（对定义的描述）、dt（被定义内容）来创建一个定义列表。
demo

<dl>
  <dt>定义项1</dt>
  <dd>定义描述1</dd>
  <dt>定义项2</dt>
  <dd>定义描述2</dd>
  <dt>定义项3</dt>
  <dd>定义描述3</dd>
</dl>

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <style type="text/css">
        /*去除项目符号：*/
        ul{
            list-style:none; 
        }
        
    </style>
        
    
</head>
<body>
    <ul>
        <li>
            测试
        </li>
    </ul>
    <ol>
        <li>
            test<br>
            test1<br>
        </li>
        <li>
            test<br>
        </li>
        <li>
            test<br>
        </li>
    </ol>
    <dl>
        <dt>武松</dt>
        <dd>虎打</dd>
    </dl>

</body>
</html>

执行结果：

效果图2.png

为内容设置不同的样式

文本格式化

w200=with200 快捷

px

百分比（子元素随着父元素一起变，自适应界面）
也可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是16px，则100%就是16px，200%就是32px。

em（手机端移动端用，根据字号调整）
em和百分比类似，是相对于font-size说的
1em = 1font-size

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单位</title>
    <style type="text/css">
    .flage1{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .flage2{
        font-size: 20px;
        width: 2em;
        height:50%;      
        background-color: yellow;
    }   
    </style>
</head>
<body>
    <div class="flage1">
        <div class="flage2"> </div>
    </div>
</body>
</html>

执行效果图：

效果图3.png

颜色

RGB

也可以使用计算机中常用的RGB值来表示颜色。可以使用0~255的数值，也可以使用0%~100%的百分比数。
– RGB(100%,0%,0%)
– RGB(0,255,0)
第一个数表示红色的浓度，第二个数表示绿色浓度，第三个数表示蓝色的浓度。

十六进制颜色

6600FF实际上包含了三组十六进制的数字。
上边的例子中66代表红色的浓度，00代表绿色的浓度，FF代表了蓝色的浓度。
如果每一组数中的两个数字都相同（6600FF缩短为#60F。）

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色的单位</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: rgb(161,187,215);
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>
</html>

字体样式

通过font-family可以指定标签中文字使用的字体。
例如：
p{font-family:Arial} Arial只是英文，汉语不变。为了解这个问题。
可以同时指定多个字体。
例如：
！p{font-family:Arial , Helvetica , 微软雅黑} 只能先支持第一个，后面不支持。！中间有空格的字体，一定要引上
避免使用花花的字体，必须适用，可用截图。

字体分类

（大的分类。是一类字体）
放在浏览器里面，会根据浏览器显示不同的字体。
serif（衬线字体）（横平竖直）
sans-serif（非衬线字体）（不一样的字体一后面代沟）
monospace （等宽字体）编程时用等宽
cursive （草书字体）
fantasy （虚幻字体）

字体其他样式

font-style
用来指定文本的斜体。
指定斜体：font-style:italic 斜体 i标签
font-style:oblict倾斜

font-weight
用来指定文本的粗体。
指定粗体：font-weight:bold
font-weight:100指定数值（400细，600正常，900加粗）

小型大写字母
– font-variant:small-caps
在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。
ABCD 小的ABCD

字体属性的简写（设置多个样式用它）
font可以一次性同时设置多个字体的样式。
语法：
– font:加粗斜体小型大写大小/行高字体
.P3{
font: italic ‘微软雅黑’；
}

！字号字体必须写。字体最后一个样式，字号放在字体前面，他俩不能乱，乱了没效果

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体其他样式</title>
    <style>
        .flag{
            /*设置文字大小*/
            font-size: 50px;
            /*设置字体*/
            font-family: 华文彩云;
            /*设置文字斜体*/
            font-style: italic;
            /*设置文字加粗*/
            font-weight: bold;
            /*设置小型大写*/
            font-variant: small-caps;
        }
        .flag1{
            font: bold italic small-caps 60px "微软雅黑";
        }

    </style>
</head>
<body>
    <p class="flag">一段汉字，ABCDEFGabcdefg</p>
    <p class="flag1">一段汉字，ABCDEFGabcdefg</p>
</body>
</html>

执行结果：

效果图4.png

行间距

原理：

   设置行高，间接设置间距。

例子：

默认设置字号16
间距=行高-16（默认）
公式：
行间距 = line-height – font-size
%100 = 1 相对于 size20（也就是说%50==10px
%100==20px）

font ： 30px/50px 行高
不写50PX就是默认值。

.p2{
            line-height: 50px;
            font: 30px "微软雅黑";
        }
必须放在后面不然被覆盖。

大写化

text-transform样式用于将元素中的字母全都变成大写。
大写：text-transform:uppercase
小写：text-tansform:lowercase
首字母大写：text-transform:capitalize
正常：text-transform:none

demo

        .p1{
            text-transform: lowercase;
        }

文本的修饰

text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。
可选值：
underline 下划线
overline 上划线
line-through 中划线

！！！none 默认正常显示去除超链接的下滑线

字母间距和单词间距

letter-spacing用来设置字符之间的间距。（字母中文都可以）
.P3{
letter-spacing：10xp；
}
word-spacing用来设置单词之间的间距。（中文无意义）
这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。

对齐文本

text-align用于设置文本的对齐方式。
可选值：
left：左对齐
.P3{
text-align：left；
}
right：右对齐
justify：两边对齐
center：居中对齐

首行缩进

text-indent用来设置首行缩进。
该样式需要指定一个长度，并且只对第一行生效。
32px相当于二个字。但是不随着字号变化而变化。

.P3{
         flont.size=20px
        text-indent：2em；
}

可以通过搜索引擎搜索到，但是不让用户看。 text-indent：-2222em；

在网页中“一切皆是盒子”

！！！盒子模型

每个元素都是盒子。（都是矩形）

一个盒子我们会分成几个部分：
举例：箱子放电视。
单词记下。
内容区(content) （放电视的地方）
内边距(padding) （电视和箱子的距离）都适用单独设置
边框(border) （箱子四个边）都适用单独设置
外边距(margin) （盒子和盒子之间的距离）都适用单独设置
盒子套盒子（可以兼容），放在内容区。
模型图片：

image.png

w h 设置内容区
border-width:1px 2px 3px 4px;上又下左 -->都适用单独设置

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 500px;
            background: #afa;
            border-width:10px 20px 30px 40px;
                /*如果在border-width指定了四个值*/
                /*则四个值会分别设置给上、右、下、左，按照顺时针的方向设置的*/
            /*如果指定三个值*/
                /*则三个值会分别设置给上、左右、下*/
            /*如果指定两个值*/
                /*则两个值会分别设置给上下、左右*/
            /*如果指定一个值，则四边全都是该值*/
            border-color: red yellow orange blue;
            /*同理*/
            border-style: solid dotted dashed double;
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

盒子大小由以下共同决定：

内容区(content) （放电视的地方）
内边距(padding) （电视和箱子的距离）
边框(border) （箱子四个边）

边框的样式

边框可以设置多种样式：

none（没有边框）
dotted（点线）
dashed（虚线）
solid（实线）
double（双线）

边框

border-top border-right border-bottom border-left

demo

        .box{       
            可以单独设置四个边的样式，
           规则和border一样，
           只不过它只对一个边生效
            */
            /*border: red solid 10px;*/
            /*border-left: red solid 10px;*/
            /* border-top: red solid 10px;
            border-bottom: red solid 10px;
            border-left: red solid 10px; */
            border: red solid 10px;
            border-right: none;
        }

CSS

文本标签

<em>和<strong>

<i>和<b>

small

cite

q

sup和sub

<ins>和<del>

<code>和<pre>

列表（三者可以互相嵌套）

1. 有序列表（序号）

2. 无序列表 （用的最多）

！！！去除项目符号：

！li是块元素，ul就是块元素所以能嵌套。

3. 定义列表

为内容设置不同的样式

文本格式化

颜色

RGB

十六进制颜色

字体样式

字体分类

字体其他样式

！字号字体必须写。字体最后一个样式，字号放在字体前面，他俩不能乱，乱了没效果

行间距

原理：

大写化

文本的修饰

！！！none 默认正常显示 去除超链接的下滑线

字母间距和单词间距

对齐文本

首行缩进

在网页中“一切皆是盒子”

！！！盒子模型

边框的样式

边框

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Python

程序员

2. 无序列表（用的最多）

！！！none 默认正常显示去除超链接的下滑线