零基础入门前端CSS知识整理

成	语言	描述
结构	HTML	网页元素和内容
表现	CSS	网页元素页面样式）
行为	JavaScript	网页交互

CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式

1 CSS样式引入方式

1.1 外部样式

CSS写在一个单独的.css文件中，通过link标签在网页中引入

<link rel="stylesheet" href="文件路径">

1.2 内部样式

CSS写在网页的head标签中，用style标签包裹

<style>
    /* 写在style标签中的样式 */
</style>

1.3 行内样式

CSS写在标签的style属性中

<标签名 style="行内样式写在这"></标签名>

三种CSS样式引入方式的区别

引入方式	书写位置	作用范围	使用场景
外部样式	CSS写在单独的css文件中，通过link标签引入	多个页面	项目中
内部样式	CSS写在head头部style标签中	当前页面	案例演示中
行内样式	CSS写在标签的style属性中	当前标签	配合js使用

2 基础选择器

选择器，就是选取（查找）需要设置样式元素的方式

选择器 {
    属性名: 属性值;
}

属性名和属性值合称为css属性

2.1 元素选择器

通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <p>我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>

小结：

1、无论嵌套多少层，只要元素名称相同都会被找到

2.2 类选择器

通过类名称，找到页面中所有带这个类名称的元素，然后对其设置CSS样式

类选择器，也有人叫class选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .color-style {
            color: red;
        }
    </style>
</head>
<body>
    <p class="color-style">我爱中国</p>
    <p>我爱人民</p>
    <div class="color-style">我爱家乡</div>
</body>
</html>

小结：

1、所有元素都有class属性，class属性的属性值叫类名

2、类名由数字、字母、下划线、中划线组成，不能以数字、中划线开头

3、一个元素可以有多个类名，类名之间用空格隔开

2.3 id选择器

通过元素id属性的属性值，找到页面中带这个id属性值的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我爱中国</p>
    <p id="two">我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>

小结：

1、所有元素都有id属性

2、id属性值在一个页面中是唯一的

3、一个元素只能有一个id属性值

2.4 通配符选择器

查找页面中所有的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我爱中国</p>
    <p id="two">我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>

小结：

1、通常用于网页重置样式，不常用

2.5 后代选择器

根据选择器查找符合条件的元素，再根据后代选择器查找符合条件的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one p {
            color: red;
        }
    </style>
</head>
<body>
    <div id="one">
        <p>我爱中国</p>
        <p>我爱人民</p>
        <div>我爱家乡</div>
        <div>
            <p>我爱中国</p>
            <p>我爱人民</p>
        </div>
    </div>
    <div id="two">
        <p>我爱中国</p>
        <p>我爱人民</p>
        <div>我爱家乡</div>
        <div>
            <p>我爱中国</p>
            <p>我爱人民</p>
        </div>
    </div>
</body>
</html>

2.6 群组选择器

根据多个选择器各自查找符合条件的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p,h3 {
            color: red;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <h3>我爱人民</h3>
    <div>我爱家乡</div>
</body>
</html>

3 字体样式

字体样式，针对文字本身样式

字体相关的CSS属性

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体风格
color	字体颜色

3.1 字体类型

语法：

font-family: 字体1,字体2,字体3...;

说明：

1、font-family属性可是设置多个属性值，用英文逗号隔开，生效顺序是从左到右。浏览器默认字体类型一般是"宋体"

2、字体类型只有一个英文单词，则不需要加上引号；字体类型是多个英文单词或中文的，则需要加上双引号

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-family: Arial;
        }
        h3 {
            font-family: monospace;
        }
        div {
            font-family: "新宋体";
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <h3>我爱人民</h3>
    <div>我爱家乡</div>
</body>
</html>

3.2 字体大小

语法：

font-size: 数字 + px

说明：

1、px是像素单位，单位需要设置，否则无效

2、谷歌浏览器默认文字大小是16px

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-size: 18px;
        }
        div {
            font-size: 36px;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <div>我爱家乡</div>
</body>
</html>

3.3 字体粗细

语法：

font-weight: normal/bold/100~900

说明：

属性值	说明
normal	正常（默认值）
bold	较粗
100~900	取100~900九种数值

实际开发一般会设置bold，不设置默认是normal

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-weight: normal;
        }
        div {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <div>我爱家乡</div>
</body>
</html>

3.4 字体风格

语法：

font-style: 取值

说明：

属性值	说明
normal	正常（默认值）
italic	斜体
oblique	斜体

不是所有字体都有italic属性值，如果没有italic的，则用oblique

font连写

语法：

font: style weight size family;

说明：

1、可以省略前两项，省略了相当于设置了默认值

不常用，作为了解

3.5 字体颜色

语法：

color: 颜色值

说明：

color属性取值常用有两种，一种是关键字（比如red、green、blue），另外一种是16进制RGB值（#000000，#FFFFFF）

问题一：给同一个元素设置了相同的属性样式，哪个生效？

答：样式会层叠（覆盖），写在最后面的会生效。

问题二：html里面有注释，css有没有注释，如何写？

<style>
    /* 采用元素选择器给p元素设置css样式 */
    p {
        color: #000000;  /* p元素字体颜色为黑色 */
    }
</style>

4 文本样式

文本样式，针对段落的排版效果

文本相关CSS属性

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修缮
text-transform	大小写转换
line-height	行高
letter-spacing	字母间距
word-spacing	词间距

4.1 首行缩进

语法：

text-indent: 像素值

说明：

缩进大小和字体大小是有关的，缩进1个字的空间等同于1个字的字体大小。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    p {
        font-size: 14px;
        text-indent: 28px;
    }
</style>
</head>
<body>
    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>

4.2 水平对齐

语法：

text-align: 取值

说明：

text-align属性取值

属性值	说明
left	左对齐（默认值）
center	居中对齐
right	右对齐

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-align: left;
    }
    .two {
        text-align: center;
    }
    .three {
        text-align: right;
    }
</style>
</head>
<body>
    <p class="one">生于忧患死于安乐</p>
    <p class="two">生于忧患死于安乐</p>
    <p class="three">生于忧患死于安乐</p>
</body>
</html>

4.3 文本修饰

语法：

text-decoration: 取值

说明：

text-decoration属性值

属性值	说明
none	去除所有的划线效果（默认值）
underline	下划线
line-throught	中划线
overline	顶划线

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-decoration: none;
    }
    .two {
        text-decoration: underline;
    }
    .three {
        text-decoration: line-through;
    }
    .four {
        text-decoration: overline;
    }
</style>
</head>
<body>
    <p class="one">生于忧患死于安乐</p>
    <p class="two">生于忧患死于安乐</p>
    <p class="three">生于忧患死于安乐</p>
    <p class="four">生于忧患死于安乐</p>
</body>
</html>

4.4 大小写转换

语法：

text-transform: 取值

说明：

text-transform属性取值

属性值	说明
none	无转换（默认值）
uppercase	转换为大写
lowercase	转换为小写
capitalize	单词首字母大写

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-transform: none;
    }
    .two {
        text-transform: uppercase;
    }
    .three {
        text-transform: lowercase;
    }
    .four {
        text-transform: capitalize;
    }
</style>
</head>
<body>
    <p class="one">Hello World</p>
    <p class="two">Hello World</p>
    <p class="three">Hello World</p>
    <p class="four">hello world</p>
</body>
</html>

4.5 行高

语法：

line-height: 取值;

说明：

1、取值可以是一个固定的数值（比如24px），也可以是一个百分数（比如150%）

line-height: 150%;

2、使用font-size属性和line-height属性的组合，可以让行高与字体大小之间保持一定的比例

font-size: 16px;
line-height: 1.5

3、使用line-height属性的继承值。如果父元素的line-height属性有值，那么子元素及后代元素会继承父元素的行高

body {
    line-height: 1.5;
}
p {
    font-size: 16px;
}

行高的设置要大于字体大小的设置，才会显得好看

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            font-size: 16px;
            line-height: 24px;
        }
    </style>
</head>
<body>
    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能</p>
</body>
</html>

4.6 间距

字间距

语法：

letter-spacing: 像素值

说明：

letter-spacing属性用来设置两个字之间的距离，一个英文字母或汉字都是当做一个字来处理

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            letter-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好吗？</p>
<body>
</body>
</html>

词间距

语法：

word-spacing: 像素值;

说明：

word-spacing属性用来设置英文单词之间的距离

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            word-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好吗？</p>
<body>
</body>
</html>

5 边框样式

元素基本可以定义边框，边框样式由边框宽度、边框外观和边框颜色三个属性组成。

属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

5.1 边框的宽度

语法：

border-width: 像素值;

说明：

边框border-width属性值是一个像素值

5.2 边框的外观

语法：

border-style: 取值;

说明：

border-style取值有三个

属性值	说明
none	无样式
dashed	虚线
solid	实线

5.3 边框的颜色

语法：

border-color: 颜色关键字/16进制RGB值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            border-width: 1px;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
    <div>hello,world</div>
<body>
</body>
</html>

5.4 边框样式简写

语法：

border: border-width border-style border-color;

案例：

div {
    border: 1px solid red;
}

5.5 边框局部样式

元素都是盒子模型，都是有四条边的，分别是上、下、左、右。所以又可以为元素某一边边设置边框样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 300px;
            height: 200px;
            border-top: 1px dashed darkred;
            border-bottom: 2px solid green;
            border-left: 3px solid grey;
            border-right: 4px dashed lightseagreen;
        }
    </style>
</head>
    <div></div>
<body>
</body>
</html>

6 列表样式

6.1 列表项符号

定义列表项符号

在HTML中，无序列表和有序列表是通过标签ul、ol的type属性来定义的

<ol type="a">
    <li>my</li>
    <li>your</li>
</ol>
<ul type="disc">
    <li>my</li>
    <li>your</li>
</ul>

接触了css后，得改成list-style-type属性来定义。HTML专心负责结构，CSS专心负责样式。

语法：

list-style-type: 取值;

说明：

ol元素的list-style-type属性值

属性值	说明
decimal	阿拉伯数字：1、2、3…（默认值）
lower-roman	小写罗马数字：i、ii、iii…
upper-roman	大写罗马数字：I、II、III…
lower-alpha	小写英文字母：a、b、c…
upper-alpha	大写英文字母：A、B、C…

ul元素的list-style-type属性值

属性值	说明
disc	实心圆●（默认值）
circle	空心圆○
square	正方形■

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol {
            list-style-type: lower-alpha;
        }
        ul {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

去除列表项符号

随着技术和审美不断的提高，实际开发中都是直接去除列表项符号

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol,ul {
            list-style-type: none;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

有序列表或无序列表设置了list-style-type: none后，样式都一样了。

6.2 列表项图片

语法：

list-style-image: url(图片路径);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ul {
            list-style-image: url("small.png");
        }
    </style>
</head>
<body>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

list-style-image不能控制图片大小，实际开发中用background来替代

7 表格样式

7.1 表格标题位置

语法：

caption-side: 取值;

说明：

caption-side属性取值

属性值	说明
top	标题在顶部（默认值）
bottom	标题在底部

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

7.2 表格边框合并

语法：

border-collapse: 取值;

说明：

border-collapse属性取值

属性值	说明
separate	边框分开，有空隙（默认值）
collapse	边框合并，无空隙

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

7.3 表格边框间距

语法：

border-spacing: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-spacing: 10px;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

8 图片样式

8.1 图片大小

语法：

width: 像素值;
height: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
</body>
</html>

8.2 图片边框

语法:

border: 1px solid red;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
</body>
</html>

8.3 图片对齐

水平对齐

语法：

text-align: 取值;

说明：

text-align属性取值

属性值	说明
left	左对齐（默认值）
center	居中对齐
right	右对齐

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            text-align: left;
        }
        .i2 {
            text-align: center;
        }
        .i3 {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="i1">
        <img src="small.png" alt="">
    </div>
    <div class="i2">
        <img src="small.png" alt="">
    </div>
    <div class="i3">
        <img src="small.png" alt="">
    </div>
</body>
</html>

图片的水平对齐属性设置是在图片标签的父标签上实现的

垂直对齐

语法：

vertical-align: 取值;

说明：

vertical-align属性取值

属性值	说明
top	顶部对齐
middle	中部对齐
baseline	基线对齐
bottom	底部对齐

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            vertical-align: top;
        }
        .i2 {
            vertical-align: middle;
        }
        .i3 {
            vertical-align: baseline;
        }
        .i4 {
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div>
        <span>hello,world</span>
        <img class="i1" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i2" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i3" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i4" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
</body>
</html>

8.4 文字环绕

语法：

float: 取值;

说明：

float属性取值

属性值	说明
left	元素向左浮动
right	元素向右浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>

9 背景样式

9.1 背景颜色

语法：

background-color: 颜色值;

说明：

颜色值有两种表示方式，一种是颜色关键字，另外一种是16进制RGB值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 200px;
            height: 100px;
            /* 背景颜色 */
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div>hello,world</div>
</body>
</html>

9.2 背景图片

引入背景图片

语法:

background-image: url(图片路径)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景图片重复

语法：

background-repeat: 取值;

说明：

background-repeat属性取值

属性值	说明
repeat	在水平方向和垂直方向上同时平铺（默认值）
repeat-x	只在水平方向（x轴）上平铺
repeat-y	只在垂直方向（y轴）上平铺
no-repeat	不平铺

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景图片位置

语法：

background-position: 水平距离 垂直距离

通过像素值定图片位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: 10px 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

通过关键字定位图片位置

水平方向左left、中center、右right

垂直方向上top、中center、下bottom

通过水平方向、垂直方向组合出9种方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景图片固定

语法：

background-attachment: 取值;

说明：

background-attachment属性取值

属性值	说明
scroll	随元素一起滚动（默认值）
fixed	固定不动

10 超链接样式

语法：

a {}
a:link {}
a:visited {}
a:hover{}
a:active{}

说明：

伪类	说明
a:link	a元素未访问时的样式
a:visited	a元素访问后的样式
a:hover	鼠标经过a元素时的样式
a:active	鼠标点击时的样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        a {
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>

实际开发，一般设置a、a:hover样式就可以了

11 盒子模型

每一个元素都是由内容区、内边距、边框、外边距组成

属性	说明
content	内容区，可以是文本或图片
padding	内边距，用于定义内容与边框之间的距离
border	边框，用于定义元素的边框
margin	外边距，用于定义当前元素与其他元素之间的距离

11.1 内容区

语法：

width: 像素值;
height: 像素值;
overflow: 取值;

说明：

overflow属性值

属性值	说明
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        img {
            width: 30px;
            height: 30px;
        }
        p {
            width: 50px;
            height: 50px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<img src="small.png" alt="">
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>

如果要给行内元素设置宽高，则需要给元素设置display: inline-block属性

11.2 内边距

语法：

padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;

padding: 上下左右像素值;
padding: 上下像素值 左右像素值;
padding: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>

11.3 边框

边框知识参考2.6

11.4 外边距

语法：

margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;

margin: 上下左右像素值;
margin: 上下像素值 左右像素值;
margin: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>

12 浮动布局

正常文档流就是我们没有使用浮动或者定位去改变的默认情况，按照从上到下，从左到右顺序的元素布局情况。

12.1 定义浮动

语法：

float: 取值

说明：

属性值	说明
left	元素向左浮动
right	元素向右浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
    </div>
</body>
</html>

12.2 清除浮动

语法：

clear: 取值;

说明：

clear属性值

属性值	说明
left	清除左浮动
right	清除右浮动
both	同时清除左浮动和右浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
        <div class="clear"></div>
    </div>
</body>
</html>

13 定位布局

13.1 固定定位

语法：

position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #s1 {
            position: fixed;
            top: 20px;
            left: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">回到顶部</div>
        <div id="s2">
            <p>内容区</p>
            ......
        </div>
    </div>
</body>
</html>

13.2 相对定位

相对定位，指的是该元素的位置是相对于它的原始位置计算而来的

语法：

position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: relative;
            top: 5px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>

13.3 绝对定位

把元素定位到任意你想要的位置，完全脱离文档流

语法：

position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: absolute;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>

13.4 静态定位

用法：

position: static;

说明：

元素position属性的默认值是static

、CSS简介

1.CSS是什么

CSS，指的是Cascading Style Sheet（层叠样式表），它是用来控制网页外观的一门技术。“HTML控制网页的结构，CSS控制网页的外观，JavaScript控制网页的行为”

2.CSS引入方式

外部样式表

内部样式表

行内样式表

3.外部样式表——指的是把CSS代码和HTML代码单独放在不同的文件中，然后在HTML文档中使用link标签来引用CSS样式表。

语法< link rel="stylesheet" type="text/css" href="文件路径" />

说明：rel的取值是固定的，即"stylesheet"，表示引入的是一个样式表文件（即CSS文件），type属性的取值也是固定的，即“text/css”，表示这是标准的CSS，href属性表示CSS文件的路径

注意：link标签是放在head标签内的

4.内部样式表——指的是把HTML代码和CSS代码放到同一个HTML文件中，其中，CSS代码放在style标签内，并且style标签是放在head标签内部的

语法

type=“text/css” 是必须添加的，表示这是标准的CSS

5.行内样式表——与内部样式表类似，也是把HTML代码和CSS代码放到同一个HTML文件中。不同的是内部样式表的CSS是在“style标签”内定义的，而行内样式表的CSS是在“标签的style属性”中定义的

两段代码的实现效果是一样的，都是定义三个div元素的颜色为红色。

如果使用内部样式表，样式只需要写一遍；但是如果使用行内样式表，每个元素则必须单独写一遍

行内样式表的缺点：代码冗余

二、CSS选择器

1.选择器是什么——用一种方式把你想要的那个元素选中

只有把它选中了，你才可以为这个元素添加CSS样式

2.最实用的五种选择器

元素选择器
id选择器
class选择器
后代选择器
群组选择器

CSS选择器的格式：

3.元素选择器——选择指定的相同的元素，而不会选择其他元素，然后给相同的元素定义同一个CSS样式

语法div { width:100px; height:100px; }

上面例子中的p元素和span元素没有被选中

4.id选择器——为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式。注意：在同一个页面中，不允许出现两个相同的id。

说明：对于id选择器，id名前面必须要加上前缀#，否则该选择器无法生效

5.class选择器——也就是“类选择器”，可以对相同或者不同的元素定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作

语法.box { width:100px; height:100px; }

class名前面必须要加上前缀.（英文点号），否则该选择器无法生效

上面的例子是为不同的元素定义相同的class，从而可以同时操作它们的CSS样式

6.后代选择器——选择元素内部中所有的某一元素，包括子元素和其他后代元素（如孙元素）

语法h3 p {width:100px; height:100px;}

说明：父元素和后代元素必须要用空格隔开，从而表示选中某个元素内部的后代元素

7.群组选择器——同时对几个选择器进行相同的操作（效率高）

语法h3,p {width:100px; height:100px;

说明：对于群组选择器，两个选择器之间必须要用英文逗号（,）隔开，不然群组选择器就无法生效

三、字体样式

1.字体样式

类似于Word软件中对于字体样式的设置，我们可以知道CSS字体样式的属性有以下五种：

font-family——字体类型

font-size——字体大小

font-weight——字体粗细

font-style——字体风格

color——字体颜色

2.字体类型（font-family）

语法：font-family：字体1，字体2，...，字体N；

说明：font-family可以指定多种字体。使用多种字体时，将按从左到右的顺序排列，并且以英文逗号（,）隔开。浏览器默认的字体类型一般是“宋体”

举例：设置一种字体

举例：设置多种字体

为元素设置多种字体的原因是：在有些字体没有安装的情况下，可以使用下一个字体，优先使用左边的字体。

3.字体大小（font-size）——采用px为单位

语法font-size：像素值；

说明：实际上，font-size属性取值有两种，一种是“关键字”，如small，medium，large等。另外一种是“像素值”，如10px、16px、21px等。不过在实际开发中，关键字这种方式基本不会用

4.字体粗细（font-weight）

语法font-weight：取值;

font-weight属性取值有两种：一种是100~900的“数值”；另外一种是“关键字”。

其中关键字取值有：normal（正常）、lighter（较细）、bold（较粗）、bolder（很粗）。对于实际开发来说，一般我们只会用到bold这一个属性值，其他的几乎用不上。

在实际开发中，不建议使用数值作为font-weight的属性取值，一般使用关键字的bold属性值

5.字体风格（font-style）

语法font-style：取值；

font-style属性取值有：normal（正常）、italic（斜体）、oblique（斜体）

从预览效果可以看出，font-style属性值为italic或oblique时，页面效果是一样的

但其实它们的区别在于：italic是字体的一个属性，但并非所有的字体都有这个属性。因此对于有italic属性的字体，我们使用font-style：italic来实现斜体效果；对于没有italic属性的字体，我们使用font-style：oblique来实现。

6.字体颜色（color）

语法color：颜色值;

color属性取值有两种：关键字 & 16进制RGB值

关键字如red、green、blue等

16进制RGB值——类似于#FBF9D0形式的值

单纯靠“关键字”，满足不了实际开发的需求。因此引入了“16进制RGB值”

记：#000000是黑色，#FFFFFF是白色

7.CSS注释

语法/* 注释的内容*/

注意：

小技巧：浏览器解析CSS是有一定顺序的，后面样式的会覆盖前面的样式。

四、文本样式

文本样式和字体样式的区别：字体样式针对的是“文字本身”的型体效果，而文本样式针对的是“整个段落”的排版效果。字体样式注重个体，文本样式注重整体。

文本样式属性

text-indent ——首行缩进

text-align ——水平对齐

text-decoration ——文本修饰

text-transform ——大小写

line-height ——行高

letter-spacing、word-spacing ——字母间距、词间距

1.首行缩进（text-indent）

p元素的首行是不会自动缩进的，在HTML中我们常常使用空格代码&nbsp来实现首行缩进，但是这种方式冗余代码很多；在CSS中，我们可以使用text-indent属性来定义p元素的首行缩进。

语法text-indent：像素值；

说明：初学CSS，建议使用像素（px）作为单位。

中文段落首行一般需要缩进两个字符，设置首行缩进的像素值是字体大小的两倍即可

2.水平对齐（text-align）——控制文本在水平方向上的对齐方式

语法 text-align：取值；

text-align属性取值有：

left——左对齐（默认值）

center——居中对齐

right——右对齐。

在实际开发中，我们只会用到center这一个，其他两个几乎用不上。另外，text-align属性不仅对文本有效，对图片（img元素）也有效

3.文本修饰（text-decoration）——定义文本的修饰效果（下划线、中划线、顶划线）

语法text-decoration：取值；

text-decoration属性取值：

none——去除所有的划线效果（默认值）

underline——下划线（一般用于强调文章中的重点）

line-through——中划线（一般用于促销）

overline——顶划线（极少用）

超链接（a元素）默认样式有下划线，可以使用text-decoration:none去除a元素的下划线

4.大小写（text-transform）——针对英文而言，中文不存在大小写之分

语法 text-transform：取值；

text-transform属性取值

none——无转换（默认值）

uppercase——转换为大写

lowercase——转换为小写

capitalize——将每个英文单词首字母转换为大写

5.行高（line-height）——控制每行文本的高度，与“行间距”是完全不一样的概念

语法line-height：像素值；

6.间距（letter-spacing & word-spacing）

字间距（letter-spacing）——调整两个字之间的距离

语法letter-spacing：像素值；

注意：每个中文汉字都被当成一个“字”，而每个英文字母也当做一个“字”

词间距（word-spacing）——定义两个单词之间的距离（只针对英文单词而言）

语法word-spacing：像素值；

在实际开发中，我们很少去定义中文网页中的字间距以及词间距，letter-spacing和word-spacing只会用于英文网页。这两个我们平时几乎用不上

五、边框样式

1.边框样式属性

边框宽度（border-width）：取值是一个像素值

边框外观（border-style）：none（无样式）、dashed（虚线）、solid（实线）

边框颜色（border-color）：关键字、16进制RGB值

想要为一个元素定义边框样式，必须要同时设置这三个属性才会有效果

简写形式：border：2px solid red；

2.局部样式

一个边框元素其实有四条边（上、下、左、右）前面我们学习的是四条边的整体样式，现在来学习对某一条边进行单独设置。

上边框（border-top）

border-top-width: 2px;

border-top-style: solid;

border-top-color: red;

下边框（border-bottom）

border-bottom-width: 2px;

border-buttomstyle: solid;

border-buttom-color: red;

左边框（border-left）

border-left-width: 2px;

border-left-style: solid;

border-left-color: red;

右边框（border-right）

border-right-width: 2px;

border-right-style: solid;

border-right-color: red;

简写形式：border-right：2px solid red;

去除下边框：（以下三个是等价的）

六、列表样式

1.列表项符号（list-style-type）

在HTML中，我们使用type属性来定义有序列表和无序列表的列表项符号，但是我们说过，结构和样式应该是分离的，所以在CSS中，我们将使用list-style-type属性来定义列表项符号

语法list-style-type：取值；

说明：list-style-type属性是针对ol或者ul元素的，而不是li元素。

list-style-type属性取值（有序列表）

decimal——阿拉伯数字：1，2，3…（默认值）

lower-roman——小写罗马数字：i、ii、iii…

upper-roman——大写罗马数字：I、II、III…

lower-alpha——小写英文字母：a、b、c…

upper-alpha——大写英文字母：A、B、C…

list-style-type属性取值（无序列表）

disc——实心圆●（默认值）

circle——空心圆○

square——正方形■

去除列表项符号

语法list-style-type：none；

2.列表项图片（list-style-image）——使用图片来代替列表项符号

语法list-style-image：url（图片路径）；

在实际开发中，我们会使用更为高级的字体图标（iconfont）技术来实现列表项图片

七、表格样式

1.表格标题位置（caption-side）

语法caption-side：取值；

caption-side属性取值：

top——标题在顶部（默认）

bottom——标题在底部

如果想要定义表格标题的位置，在table或caption这两个元素的CSS中定义caption-side属性

2.表格边框合并（border-collapse）——去除表格加入边框后单元格之间的空隙

语法border-collapse：取值；

border-collapse属性取值：

separate——边框分开，有空隙（默认值）

collapse——边框合并，无空隙

border-collapse属性也是在table元素中定义的table{border-collapse: collapse;}

3.表格边框间距（border-spacing）

语法border-spacing：像素值；

border-spacing属性也是在table元素中定义的table{border-spacing：8px;}

八、图片样式

1.图片大小——使用width和height这两个属性来定义图片的大小

语法

在实际开发中，需要使用多大的图片，就用Photoshop制作多大的图片。不建议使用一张大图片，然后再借助width和weight来改变大小。

2.图片边框

语法border：1px solid red；

在“边框样式”中我们已经详细介绍了border属性

3.图片对齐

水平对齐

语法text-align：取值（left、center、right）；

注意：图片的水平对齐不是在img元素中定义的，是在父元素中进行水平对齐的

text-align属性一般只用于两个地方：文本水平对齐和图片水平对齐

垂直对齐

语法vertical-align：取值；

vertical-align属性取值

top（顶部对齐）

middle（中部对齐）

baseline（基线对齐）

bottom（底部对齐）

4.文字环绕——初识float

图文混排，指的是文字环绕着图片进行布局

语法img{float：取值；}

float属性取值

left——元素向左浮动

right——元素向右浮动

九、背景样式

1.背景颜色（background-color）

语法background-color：颜色值（关键字、16进制RGB值）；

两种颜色取值

color&background-color的区别：

color属性用于定义“文本颜色”，而background-color属性用于定义“背景颜色”

2.背景图片（background-image）

语法background-image：url（图片路径）；

说明：跟引入图片（即image标签）一样，引入背景图片也需要给出图片路径才可以显示

注意：我们需要为div元素添加width和height，背景图片才会显示出来

3.背景图片重复（background-repeat）

语法background-repeat：取值；

background-repeat属性取值：

repeat——在水平方向和垂直方向同时平铺（默认值）

repeat-x——只在水平方向（x轴）上平铺

repeat-y——只在垂直方向（y轴）上平铺

no-repeat——不平铺

注意：元素的宽度和高度必须大于背景图片的宽度和高度，才会有重复效果

4.背景图片的位置（background-position）

语法background-position：像素值/关键字；

像素值——要设置水平方向和垂直方向的值（像素值）

例如background-position：12px 24px;表示背景图片与该元素左上角的水平方向距离为12px，垂直方向距离为24px。水平距离和垂直距离这两个数值之间要用空格隔开

关键字——也要同时设置水平方向和垂直方向的值（关键字）

语法background-position：水平距离垂直距离；

关键字取值

top left——左上

top center——靠上居中

top right——右上

left center——靠左居中

center center——正中

right center——靠右居中

bottom left——左下

bottom center——靠下居中

bottom right——右下

5.背景图片固定（background-attachment）——定义背景图片是随元素一起滚动还是固定不动

语法background-attachment：取值；

scroll——随元素一起滚动（默认值）

fixed——固定不动

十、超链接样式

1.超链接伪类

默认情况下：字体为蓝色，带有下划线。

鼠标点击时：字体为红色，带有下划线。

鼠标点击后：字体为紫色，带有下划线。

在CSS中，我们可以使用“超链接伪类”来定义超链接在鼠标点击的不同时期的样式。

语法

注意：定义这四个伪类，必须按上面的顺序进行，否则浏览器无法正常显示这四种样式

link样式表示的是a元素从未被访问过。

2.深入了解超链接伪类

我们没有必要定义四种状态下的样式，在实际开发中，我们只会用到两种状态：未访问时状态和鼠标经过状态。而对于未访问状态，我们可以直接对a元素定义，没必要使用a:link。

语法

事实上，对于超链接伪类来说，我们只需要记住a:hover这一个就够了，因为在实际开发中也只会用到这一个。

3.深入了解：hover

hover伪类不只限用于a元素，hover伪类可以定义任何一个元素在鼠标经过时的样式！

语法元素：hover{...}

4.鼠标样式

浏览器鼠标样式——cursor（11种）

语法cursor：取值；

cursor属性取值（常用的三种）

default（默认值）——鼠标默认样式

pointer——鼠标手状样式

text——鼠标文本样式

自定义鼠标样式

语法cursor：url（图片地址），属性值；

说明：这个“图片里地址”是鼠标图片地址，其中鼠标图片后缀名一般都是.cur，可以使用Photoshop来制作。

十一、盒子模型

页面中，所有的元素都可以看成一个盒子

1.盒子模型的组成部分

内容区——CSS盒子模型的中心

内边距——内容区和边框之间的距离

外边距——两个盒子之间的距离

边框

2.宽和高（width和height）

元素的宽度和高度是针对内容区而言的。

只有块元素才可以设置width和height，行内元素是无法设置width和height的

3.边框（border）

简写形式（宽度、外观，颜色）

border：1px solid red；

4.内边距（padding）

内边距分为四个方向：上、右、下、左（顺时针方向）

padding-top：像素值；

padding-right：像素值；

padding-bottom：像素值；

padding-left：像素值；

padding简写形式

padding：像素值；表示四个方向的内边距

padding：像素值1 像素值2；表示上下、左右边距

padding：像素值1 像素值2 像素值3 像素值4；上、右、下、左（顺时针）

5.外边距（margin）

外边距分为四个方向：上、右、下、左（顺时针方向）

margin-top：像素值；

margin-right：像素值；

margin-bottom：像素值；

margin-left：像素值；

外边距指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。只有当我们加入其它元素当参考对象时，才能看到效果。

当既有父元素，也有兄弟元素时，则这个方向的margin就是相对于兄弟元素而言，如果没有兄弟元素，则相对于父元素而言

margin简写形式与padding一样

二十二、浮动布局

1.正常文档流&脱离文档流

正常文档流——默认情况下的HTML文档结构

脱离文档流——脱离正常文档流，使用浮动和定位去改变

2.浮动——float

float属性取值

left——元素向左浮动

right——元素向右浮动

3.清除浮动——clear

clear属性取值

left——清除左浮动

right——清除右浮动

both——同时清除左浮动和有浮动（常用）

二十三、定位布局

浮动布局比较灵活，但是不容易控制

定位布局精准定位页面中的元素，但是缺乏灵活性

布局定位的四种方式：

固定定位（fixed）

相对定位（relative）

绝对定位（absolute）

静态定位（static）——默认情况下

这四种方式都是通过position属性来实现的

1.固定定位：fixed——指的是被固定的元素不会随着滚动条的拖动而改变位置

语法：

position：fixed；

top：像素值；

bottom：像素值；

left：像素值；

right：像素值；

这四个属性不一定全部都用到，一般只会用到其中两个，参考对象是浏览器的四条边

2.相对定位：relative——指的是该元素的位置是相对于它的原始位置计算而来的

语法：

position：relative；

top：像素值；

bottom：像素值；

left：像素值；

right：像素值；

这四个属性不一定全部都用到，一般只会用到其中两个，参考对象是该元素的原始位置

3.绝对定位：absolute（使用最广泛）

语法：

position：absolute；

top：像素值；

bottom：像素值；

left：像素值；

right：像素值；

这四个属性不一定全部都用到，一般只会用到其中两个，参考对象是浏览器的四条边；

一个元素变成了绝对定位元素，这个元素就完全脱离文档流了，即这个元素浮于其他元素上面，独立出来

总结：默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。

————————————————

过CSS文本装饰可以为文本添加装饰线、为装饰线设置颜色、为装饰线指定风格、为装饰线设置厚度等效果。

为文本添加装饰线通过 text-decoration-line 属性实现，可以结合一个以上的值，如上划线和下划线，来显示文本上方和下方的线条。具体的值有三个：

overline，在文本上方添加线条修饰。

line-through，在文本中间添加线条修饰，实现了删除线的效果。

underline，在文本下方添加线条修饰，实现了下划线的效果。

我们来做个例子。

打开编辑器，在 005 文件夹下创建 decoration.html 文件，构建好基本代码。

添加 h1，h2，h3，p 四个元素。分别填入一些文本。

在 005 文件夹下再创建一个 mystyle-3.css 文件，

定义 h1 选择器，声明样式属性 text-decoration-line，值为 overline。

定义 h2 选择器，也声明样式属性 text-decoration-line，值为 line-through。

定义 h3 选择器，再声明样式属性 text-decoration-line，值为 underline。

回到页面，通过 link 元素引入 mystyle-3.css 这个外部样式。

在浏览器上预览效果，我们看：上边线、删除线和下划线就做好了！

实际上，可以同时给文本添加多个线条，实现方法是给 text-decoration-line

[ˌdekəˈreɪʃn】属性设置多个值，每个值通过空格分开。

在 mystyle-3.css 再定义一个 p 选择器，声明样式属性 text-decoration-line，值写为 overline underline （读作overline 空格 underline ）。

看一下效果，段落被添加了两条装饰线。

有的小伙伴还记得，给文本添加链接后，浏览器会默认给这个文本添加一个下划线。所以，添加了链接的文本就不要使用 underline 下划线装饰了。

为文本设置装饰线的颜色通过 text-decoration-color 属性实现，属性值为任意合法的颜色值。

给 h1 元素设置 text-decoration-color 属性，颜色值设置为 red。再快速的给 h2，h3，p 元素设置 text-decoration-color 属性，值分别为 blue，green，purple。

我们看，线条都有了颜色。

为装饰线指定风格通过 text-decoration-style 属性实现，属性值有五个：

solid，实线。

double，双实线。

dotted，圆点线。

dashed[dæʃt]，虚线。

wavy[ˈweɪvi]，波浪线。

为了演示方便，在 html 中再添加一个标题 h4，填入一些文本，在 css 中将全部元素的 text-decoration-line 样式属性都设置为 underline。再定义一个 h4 选择器，声明样式 text-decoration-line: underline。

给 h1， h2，h3，h4，p 全部添加 text-decoration-style 属性，值分别为 solid，double，dotted，dashed[dæʃt]，wavy。

这样，各种线条的风格就设置好了！

通过 text-decoration-thickness 属性为线条设置厚度，也就是线条的粗细。属性值有三种设置方法：

auto，默认值，这个值是不确定的，和所修饰的文字大小有关系。

px，像素大小，是一个绝对值。比如 5px。

%，是一个相对值，根据修饰文字的高度计算出来。比如 25%。

在 h1 元素上声明样式属性 text-decoration-thickness，值为 auto。在 h2，h3 上也声明这个样式属性，值分别为 5px，50%。

在浏览器里仔细观察，h1 上的下划线厚度是浏览器给的默认值。h2 上的下划线厚度是 5px。h3 上的下划线厚度为文字高度的一半。

回到样式表代码，我们分析一下：每个文本修饰的属性名，均为三个单词连接起来的，这样写起来比较啰嗦，能不能简化一下呢？可以的！

h1 {

/* text-decoration-line: overline; */

text-decoration-line: underline;

text-decoration-color: red;

text-decoration-style: solid;

text-decoration-thickness: auto;

}

在线咨询

上一篇：如何一次开发生成android,ios（可无开发者账号）,Html5 web app
下一篇：为什么要学习HTML？HTML会过时吗？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

零基础入门前端CSS知识整理

1 CSS样式引入方式

1.1 外部样式

1.2 内部样式

1.3 行内样式

2 基础选择器

2.1 元素选择器

2.2 类选择器

2.3 id选择器

2.4 通配符选择器

2.5 后代选择器

2.6 群组选择器

3 字体样式

3.1 字体类型

3.2 字体大小

3.3 字体粗细

3.4 字体风格

3.5 字体颜色

4 文本样式

4.1 首行缩进

4.2 水平对齐

4.3 文本修饰

4.4 大小写转换

4.5 行高

4.6 间距

5 边框样式

5.1 边框的宽度

5.2 边框的外观

5.3 边框的颜色

5.4 边框样式简写

5.5 边框局部样式

6 列表样式

6.1 列表项符号

6.2 列表项图片

7 表格样式

7.1 表格标题位置

7.2 表格边框合并

7.3 表格边框间距

8 图片样式

8.1 图片大小

8.2 图片边框

8.3 图片对齐

8.4 文字环绕

9 背景样式

9.1 背景颜色

9.2 背景图片

10 超链接样式

11 盒子模型

11.1 内容区

11.2 内边距

11.3 边框

11.4 外边距

12 浮动布局

12.1 定义浮动

12.2 清除浮动

13 定位布局

13.1 固定定位

13.2 相对定位

13.3 绝对定位

13.4 静态定位

您的项目需求