了解CSS

CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等。

简单理解： CSS 可以美化 HTML , 让 HTML 更漂亮。

核心思想： HTML 搭建结构， CSS 添加样式，实现了：结构与样式的分离。

CSS层叠样式表 cascading style sheet
作用：用于==增强控制网页样式==并且允许==样式信息与内容分离==的一种标记性语言
CSS不需要编译，可由浏览器直接解析
CSS3是目前被使用最广泛的版本，但是部分特性尚不能得到支持
CSS的基本语法

1.CSS定义分别由：选择符、属性、属性取值组成

2.格式：

p{
  color:yellowgreen;
}

3.CSS大小写不敏感，推荐使用小写。

4.属性和值之间用冒号(:)分开，多个属性之间用分号(;)隔开

CSS中的注释

/*书写注释的内容*/

补充说明：

1.块级元素（可以通过CSS来随意修改宽、高）

2.行内元素

无法通过CSS来随意修改宽、高，它的宽高只与内容有关。

但是可以用CSS给它添加linline或者lnline-block类来修改宽、高。

display：block（块级元素）\inline（行内元素）lnline-block

放置CSS的几种方式

内联样式表(行内引用)（常用）

<p style=""></p>

内联的样式比其它方式更加灵活，但是需要和展示的内容混在一起，内联样式会失去样式表的优点。

内嵌样式表(内部引用)（必须写在head标签内）（常用）

<!DOCTYPE html>
<html>
  <head>
    <style></style>
  </head>
</html>

适用于一个HTML文档具有独一无二的样式时。

外联样式表(外部引用)（常用）

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="文件地址" />
  </head>
</html>

<!--了解-->
<style>
      @import "CSS文件地址"
</style>

外部样式引用了外接的CSS文件。一般浏览器有缓存的功能所以用户不用每次都下载此CSS文件，并且外部引用相对于内部和内联来说高效的是节省带宽，外部引用是W3C推荐使用的标准。

多重样式表的叠加

依照后定义的优先，所以优先级最高的是内联样式。连入的外部样式和内部样式表之间是最后定义的优先级高。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>放置CSS的几种方式</title>
        <link rel="stylesheet" href="./style.css" />

        <style>
            /*@import "./style.css";*/
            #one{
                background-color:tomato;
                color:#fff;
                font-size:50px;
            }
        </style>
        <style>
            /*@import "style.css";*/
        </style>
    </head>
    <body>
        <p>女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <p>女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <p>女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <p style="background-color:blue;color:white">女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <div>唐僧喜欢哪个女孩子只有白龙马知道</div>
        <div id="one" style="font-size:100px">唐僧喜欢哪个女孩子只有白龙马知道</div>
        <div id="two">唐僧喜欢哪个女孩子只有白龙马知道</div>
        <div>唐僧喜欢哪个女孩子只有白龙马知道</div>
    </body>
</html>

案例
- style.css文件

#two{
    background-color:yellow;
    color:pink;
}
#one{
    font-size:200px;
    color:#000;
}

优先级

内嵌>外部|内部（按照内容的距离远近来判断优先级）

平时推荐使用内部优点：批量修改方便调试；当项目完全做好后，最后再进行外部分离（将html和css分离）

CSS代码风格

展开风格 —— 开发时推荐，便于维护和调试。

h1 {
    color: red;
    font-size: 40px; 
}

紧凑风格 —— 项目上线时推荐，可减小文件体积。

h1{color:red;font-size:40px;}

备注：

项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文

件体积，节约网络流量，同时也能让用户打开网页时速度更快。

CSS选择器

CSS基本选择器

通配符选择器(*)

作用：可以选中所有的 HTML 元素,一般用于网页的基础设置

语法：

* { 
   属性名: 属性值; 
}

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本选择器-通配符选择器</title>
        <style>
            /*CSS区间 写CSS代码*/
            /*通配符选择器*/
            *{
                font-size:30px;
            }

        </style>
    </head>
    <body>
        <div class="one">我是第一个div元素</div>
        <div class="one two">我是第二个div元素</div>
        <div id="one">我是第三个元素 我设置的属性是id属性</div>
        <div id="one_two">我是第四个元素 我设置的属性是id属性</div>
        <p>我是p标签</p>
        <a href="">我是a标签</a>
        <ul>
            <li>我是无序列表</li>
        </ul>
        <ol>
            <li>我是有序列表</li>
        </ol>
    </body>
</html>

备注：目前来看通配选择器貌似有点鸡肋，但后面清除样式时，会对我们有很大帮助，后面会详细

讲。

元素选择器

作用：为页面中 某种元素 统一设置样式。

语法：

标签名 { 
       属性名:属性值;
 }

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本选择器</title>
        <style>
            /*CSS区间 写CSS代码*/
            /*查找class选择器*/
            /*标签选择器*/
            div{
                background-color:blue;
            }
            li{
                background-color:tomato;
            }
        </style>
    </head>
    <body>
<!--        <div class="top">-->
<!--            <div class="top_left"></div>-->
<!--            <div class="top_right"></div>-->
<!--        </div>-->
        <div class="one">我是第一个div元素</div>
        <div class="one two">我是第二个div元素</div>
        <div id="one">我是第三个元素 我设置的属性是id属性</div>
        <div id="one_two">我是第四个元素 我设置的属性是id属性</div>
        <p>我是p标签</p>
        <a href="">我是a标签</a>
        <ul>
            <li>我是无序列表</li>
        </ul>
        <ol>
            <li>我是有序列表</li>
        </ol>
    </body>
</html>

备注：元素选择器无法实现差异化设置，例如上面的代码中，所有的 div 和 li 元素效果都一样。

类选择器(class选择器)

作用：根据元素的 class 值，来选中某些元素。

语法：

.类名 { 
       属性名: 属性值; 
}

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本选择器</title>
        <style>
            /*CSS区间 写CSS代码*/
            /*查找class选择器*/
            .one{
                background-color:tomato;
            }
            .two{
                color:#fff;
            }

        </style>
    </head>
    <body>
<!--        <div class="top">-->
<!--            <div class="top_left"></div>-->
<!--            <div class="top_right"></div>-->
<!--        </div>-->
        <div class="one">我是第一个div元素</div>
        <div class="one two">我是第二个div元素</div>
    </body>
</html>

注意点：

1. 元素的 class 属性值不带 . ，但 CSS 的类选择器要带 . 。

2. class 值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用

英文与数字的组合，若由多个单词组成，使用 – 做连接，例如： left-menu ，且命名

要有意义，做到 “见名知意”。

3. 一个元素不能写多个 class 属性，下面是错误示例：

<!-- 该写法错误，元素的属性不能重复，后写的会失效 -->
<h1 class="speak" class="big">你好啊</h1>

4. 一个元素的 class 属性，能写多个值，要用空格隔开，例如：

<!-- 该写法正确，class属性，能写多个值 -->
<h1 class="speak big">你好啊</h1>

ID选择器

作用：根据元素的 id 属性值，来精准的选中某个元素。

语法：

#id值 { 
       属性名: 属性值; 
}

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本选择器ID选择器</title>
        <style>
            /*CSS区间 写CSS代码*/
            /*查找id选择器  #*/
            #one{
                background-color: fuchsia;
            }
            #one_two{
                background-color:pink;
            }
        </style>
    </head>
    <body>
        <div id="one">我是第三个元素 我设置的属性是id属性</div>
        <div id="one_two">我是第四个元素 我设置的属性是id属性</div>
    </body>
</html>

注意：
- id 属性值：尽量由字母、数字、下划线( _ )、短杠( – )组成，最好以字母开头、不要包含空格、区分大小写。
- 一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。
- 一个元素可以同时拥有 id 和 class 属性。

复合选择器

交集选择器

作用：选中同时符合多个条件的元素。

语法：选择器1选择器2选择器3…选择器n {}

举例：

/* 选中：类名为beauty的p元素，为此种写法用的非常多！！！！ */ 
p.beauty { 
    color: blue; 
}
/* 选中：类名包含rich和beauty的元素 */ 
.rich.beauty { 
    color: green; 
}

注意：
- 有标签名，标签名必须写在前面。
- id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义。
- 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元素。
- 用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器。

语法：选择器1, 选择器2, 选择器3, … 选择器n {}

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层级选择器-组合选择选择器</title>
        <style>

            /*.one{*/
            /*    background-color:tomato;*/
            /*}*/
            /*p{*/
            /*    background-color:tomato;*/
            /*}*/
            /*.two{}*/
             /*组合选择器*/
            .one,p,.two{
                background-color:tomato; 
            }
        </style>
    </head>
    <body>
        <div class="one">我是div元素</div>
        <p>我是P元素</p>
        <p>我是第二个p元素</p>
        <div>我是第二个div元素</div>
        <a href="" class="two">我是a</a>
    </body>
</html>

注意：
- 并集选择器，我们一般竖着写。
- 任何形式的选择器，都可以作为并集选择器的一部分。
- 并集选择器，通常用于集体声明，可以缩小样式表体积。

HTML元素间的关系

分为：①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。

父元素：直接包裹某个元素的元素，就是该元素的父元素。

<div>    <!-- div 是 h1 和 ul 的父亲-->
    <h1>我是一个h1标签</h1>
    <ul>    <!-- ul 是 li 的父亲-->
       <li>1</li>
       <li>2</li>
       <li>3</li>
    </ul>
 </div>

子元素：被父元素直接包含的元素（简记：儿子元素）。

<div>    
    <h1>我是一个h1标签</h1>  <!-- h1 是 div 的儿子-->
    <ul>    <!-- ul 是 div 的儿子-->
       <li>1</li>  <!-- li 是 ul 的儿子-->
       <li>2</li>
       <li>3</li>
    </ul>
 </div>

祖先元素：父亲的父亲……，一直往外找，都是祖先。
- 备注：父元素，也算是祖先元素的一种。
- 例如：张三的父亲，也算是张三的祖先，但一般还是称呼：父亲。

<div><!-- div 是 span 和 li 的祖先-->
    <h1>我是一个h1标签</h1>  
    <ul>    <!-- ul 是 span 的祖先-->
       <li>1</li> 
       <li>2</li>
       <li>
          <span>AAA</span>
       </li>
    </ul>
 </div>

后代元素：儿子的儿子……，一直往里找，都是后代。
- 备注：子元素，也算是后代元素的一种。
- 例如：张三的儿子，也算是张三的后代，但一般还是称呼：儿子。

<div>
    <h1>我是一个h1标签</h1>
    <ul>    
       <li>1</li> <!-- li 是 div 的后代-->
       <li>2</li>
       <li>
          <span>AAA</span><!-- span 是 div和ul 的后代-->
       </li>
    </ul>
 </div>

兄弟元素：具有相同父元素的元素，互为兄弟元素。

<div>
    <!-- h1 和 ul 有着相同的父元素，互为兄弟-->
    <h1>我是一个h1标签</h1>
    <ul>
       <!-- 以下的 li 有着相同的父元素，互为兄弟-->
       <li>1</li>
       <li>2</li>
       <li>
          <span>AAA</span>
       </li>
    </ul>
 </div>

后代选择器

作用：选中指定元素中，符合要求的后代元素。

语法：选择器1 选择器2 选择器3 …… 选择器n {} （先写祖先，再写后代）

举例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层级选择器-包含选择器</title>
        <style>
            /*后代选择器*/
            div p{
                background-color:red;
            }
        </style>
    </head>
    <body>
        <!--父子关系-->
        <div>
            <p>我是div中的p</p>
        </div>
        <!--爷孙关系-->
        <div>
            <section>
                <p>我是div中section里面所包含的p标签</p>
            </section>
        </div>
    </body>
</html>

注意：
- 后代选择器，最终选择的是后代，不选中祖先。
- 儿子、孙子、重孙子，都算是后代。
- 结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。

子代选择器

作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）

语法：选择器1 > 选择器2 > 选择器3 > …… 选择器n {}

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层级选择器-子代选择器</title>
        <style>
            /*子代选择器*/
            div>p{
                background-color:tomato;
            }
        </style>
    </head>
    <body>
        <!--父子关系-->
        <div>
            <p>我是div中的p</p>
        </div>
        <!--爷孙关系-->
        <div>
            <section>
                <p>我是div中section里面所包含的p标签</p>
            </section>
        </div>
        <div>
            <!--父子关系-->
            <div>
                <p>我是div中div里面的p元素</p>
            </div>
        </div>
    </body>
</html>

注意：
- 子代选择器，最终选择的是子代，不是父级。
- 子、孙子、重孙子、重重孙子 …… 统称后代！，子就是指儿子。

兄弟选择器

相邻兄弟选择器

作用：选中指定元素后，符合条件的相邻兄弟元素。

所谓相邻，就是紧挨着他的下一个，简记：睡在我下铺的兄弟。

语法：选择器1+选择器2 {} 。

示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层级选择器-相邻选择器</title>
        <style>
            /*相邻选择器*/
            div + p{
                background-color:pink;
            }
        </style>
    </head>
    <body>
        <div class="one">我是div元素</div>
        <p>我是P元素</p>
        <p>我是第二个p元素</p>
        <div>我是第二个div元素</div>
        <a href="" class="two">我是a</a>
        <!--父子关系-->
        <div>
            <p>我是div中的p</p>
        </div>
        <!--爷孙关系-->
        <div>
            <section>
                <p>我是div中section里面所包含的p标签</p>
            </section>
        </div>
        <p>我是div之后的p元素</p>
        <div>
            <!--父子关系-->
            <div>
                <p>我是div中div里面的p元素</p>
            </div>
        </div>
        <a href="">我是div之后的a</a>
        <p>我是a后面的p元素</p>
    </body>
</html>

通用兄弟选择器

作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）

语法：选择器1~选择器2 {} 。

实例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层级选择器-兄弟选择器</title>
        <style>
            /*兄弟选择器*/
            div ~ p {
                background-color:red;
            }
        </style>
    </head>
    <body>
        <div class="one">我是div元素</div>
        <p>我是P元素</p>
        <p>我是第二个p元素</p>
        <div>我是第二个div元素</div>
        <a href="" class="two">我是a</a>
        <!--父子关系-->
        <div>
            <p>我是div中的p</p>
        </div>
        <!--爷孙关系-->
        <div>
            <section>
                <p>我是div中section里面所包含的p标签</p>
            </section>
        </div>
        <p>我是div之后的p元素</p>
        <div>
            <!--父子关系-->
            <div>
                <div></div>
                <p>我是div中div里面的p元素</p>
            </div>
        </div>
        <a href="">我是div之后的a</a>
        <p>我是a后面的p元素</p>
    </body>
</html>

注意：两种兄弟选择器，选择的是下面的兄弟。

属性选择器

（多数情况下只针对表单标签）

作用：选中属性值符合一定要求的元素。

语法：
- [属性名] 选中具有某个属性的元素。
- [属性名=”值”] 选中包含某个属性，且属性值等于指定值的元素。
- [属性名~=”值”]选中包含某个属性具有多个空格分隔的值，且其中一个属性值等于开头的元素。
- [属性名 |=”值”]选中包含某个属性具有多个连接分隔符的值，且其中一个属性值等于开头的元素，主要用于lang属性。
- [属性名^=”值”] 选中包含某个属性，且属性值以指定的值开头的元素。
- [属性名$=”值”] 选中包含某个属性，且属性值以指定的值结尾的元素。
- [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

举例：

/* 选中具有title属性的元素 */ 
div[title]{color:red;}

/* 选中title属性值为atguigu的元素 */
div[title="atguigu"]{color:red;}

/* 选中title属性值有多个空格分隔的值为is的元素 */
 p[title ~= 'is']{background-color:blue;}

/* 选中title属性值有多个连接分隔符的值为is的元素 */
 p[title |= this ]{background-color:blue;}

/* 选中title属性值以a开头的元素 */
div[title^="a"]{color:red;}

/* 选中title属性值以u结尾的元素 */
div[title$="u"]{color:red;}

/* 选中title属性值包含g的元素 */
div[title*="g"]{color:red;}

伪类选择器

作用：选中特殊状态的元素。

如何理解“伪” ? — 虚假的，不是真的。

如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态。

常用的伪类选择器：

伪元素选择器

(不是对真正的元素选择)

:first-line 某个元素的第一行。
:first-letter 某个元素的第一个字母。
:before 某个元素的内容之前。
:after 某个元素的内容之后。

注意：在使用before或者after时，一定要配合content属性一起来使用

举例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>伪元素选择器</title>
		<style>
			/*E:first-line E元素的第一行*/
			p:first-line{
				background-color: tomato;
			}
			/*E:first-letter E元素的第一个字母。*/
			p:first-letter{
				font-size:50px;
			}
			/*E:before E元素的内容之前。*/
			div:before{
				content: '小母牛';
				font-size:100px;
				color:tomato;
			}
			/*E:after E元素的内容之后。*/
			div:after{
				font-size:100px;
				content: '->凉快';
				color:purple;
			}
		</style>
	</head>
	<body>
		<p>
			我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签 <br>
			我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
			我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
		</p>
		<div>迎风劈叉</div>
	</body>
</html>

动态伪类

:link 超链接未被访问的状态。

:visited 超链接访问过的状态。

:hover 鼠标悬停在元素上的状态。

:active 元素激活的状态。

什么是激活？—— 按下鼠标不松开。

注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>状态伪类选择器</title>
        <style>
            /*1. :link  设置超链接a在未被访问前的样式。*/
            a:link{
                color:red;
            }
            /*2. :visited 设置超链接a在其链接地址已经被访问的样式。*/
            a:visited{
                color:blue;
            }
            /*3. :hover 设置元素在鼠标悬停时的样式。(重点)*/
            a:hover{
                color:green;
            }
            /*4. :active 设置元素在被用户激活时的样式。*/
            a:active{
                color:purple;
            }
            li:hover{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <a href="https://www.so.com" target="_blank">去360</a>
        <ul>
            <li>aaaaaaaaaaaaaa</li>
            <li>aaaaaaaaaaaaaa</li>
            <li>aaaaaaaaaaaaaa</li>
            <li>aaaaaaaaaaaaaa</li>
            <li>aaaaaaaaaaaaaa</li>
        </ul>
    </body>
</html>

结构伪类

在CSS中引入的结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式

四个最基本的结构性伪类选择器

:root 将样式绑定到页面的根元素。

:not() 对某个结构元素使用样式，但是想排除这个元素下的某个子结构元素。

:empty 匹配所有为空的某个元素。

:target 代表链接到目标时。（a标签）

举例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>四个最基本的结构伪类选择器</title>
		<style>
			/*:root 将样式绑定到页面的根元素。*/
			:root{
				/*background-color:#000;*/
				/*声明变量*/
				--bgColor:#ccc;
				--fontColor:#000;
			}
			body{
				/*var() 使用变量*/
				background-color: var(--bgColor);
			}
			p{
				color:var(--fontColor)
			}
			/*E:not() 对某个结构元素使用样式，但是想排除这个元素下的某个子结构元素。*/
			li:not(.two){
				background-color: tomato;
			}
			/*E:empty 匹配所有为空的E元素。*/
			li:empty{
				background-color: tomato;
			}
			/*:target 代表链接到目标时。（a标签）*/
			a:target{
				font-size:50px;
				font-weight: bold;
				color:tomato;
			}
		</style>
	</head>
	<body>
		<p>我是P标签中的文字颜色</p>
		<a href="#ly">摸柳岩</a>
		<a href="#ty">摸唐嫣</a>
		<ol>
			<li class="one">我是第一行有序列表</li>
			<li></li>
			<li class="one">我是第二行有序列表</li>
			<li></li>
			<li class="two">我是第三行有序列表</li>
			<li></li>
			<li class="one">我是第四行有序列表</li>
			<li></li>
			<li class="one">我是第五行有序列表</li>
		</ol>
		<a id="ly">柳岩</a>
		<a id="ty">唐嫣</a>
	</body>
</html>

其他的结构伪类选择器

:focus 获取焦点的元素。

表单类元素才能使用 :focus 伪类。

当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获得焦点。

举例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>状态伪类选择器</title>
		<style>
			/*获取焦点的元素*/
			input:focus{
				background-color: tomato;
			}
		</style>
	</head>
	<body>
		<input type="text">
	</body>
</html>

结构伪类

:first-child对一个元素中的第一个子元素设置样式
- 举例：

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器</title>
                  <style>
                      /*E:first-child 对一个父元素中的第一个子元素设置样式。*/
                      li:first-child{
                          background-color: tomato;
                      }
                  </style>
              </head>
              <body>
                  <ol>
                      <li>风筝大剑五只鸟->寒冰</li>
                      <li>卖萌蘑菇快点跑->提莫</li>
                      <li>国王三刀真五秒->蛮王</li>
                      <li>我还是有序列表项一</li>
                      <li>我还是有序列表项二</li>
                      <li>我还是有序列表项三</li>
                      <li>我还是有序列表项四</li>
                      <li>我还是有序列表项五</li>
                  </ol>
              </body>
          </html>

:last-child 对一个父元素中的最后一个子元素设置样式
- 举例：

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器</title>
                  <style>
                      /*E:last-child 对一个父元素中的最后一个子元素设置样式。*/
                      li:last-child{
                          background-color: tomato;
                      }
                  </style>
              </head>
              <body>
                  <ol>
                      <li>风筝大剑五只鸟->寒冰</li>
                      <li>卖萌蘑菇快点跑->提莫</li>
                      <li>国王三刀真五秒->蛮王</li>
                      <li>我还是有序列表项一</li>
                      <li>我还是有序列表项二</li>
                      <li>我还是有序列表项三</li>
                      <li>我还是有序列表项四</li>
                      <li>我还是有序列表项五</li>
                      <li>我还是有序列表项六</li>
                  </ol>
              </body>
          </html>

:nth-child(n)对制定需要的子元素设置样式
- 举例：

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器</title>
                  <style>
                      /*E:nth-child(n) 对指定需要的子元素设置样式。*/
                      li:nth-child(8){
                          background-color: tomato;
                      }
                  </style>
              </head>
              <body>
                  <ol>
                      <li>风筝大剑五只鸟->寒冰</li>
                      <li>卖萌蘑菇快点跑->提莫</li>
                      <li>国王三刀真五秒->蛮王</li>
                      <li>我还是有序列表项一</li>
                      <li>我还是有序列表项二</li>
                      <li>我还是有序列表项三</li>
                      <li>我还是有序列表项四</li>
                      <li>我还是有序列表项五</li>
                      <li>我还是有序列表项六</li>
                  </ol>
              </body>
          </html>

关于 n 的值：

1. 0 或不写：什么都选不中 —— 几乎不用。

2. n ：选中所有子元素 —— 几乎不用。

3. 1~正无穷的整数：选中对应序号的子元素。

4. 2n 或 even ：选中序号为偶数的子元素。

5. 2n+1 或 odd ：选中序号为奇数的子元素。

6. -n+3 ：选中的是前 3 个。

:nth-last-child() 对指定需要的子元素E设置样式。（倒序）
- 举例：

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器</title>
                  <style>
                      /*E:nth-last-child() 对指定需要的子元素E设置样式。（倒序）*/
                      li:nth-last-child(3){
                          background-color: tomato;
                      }
                  </style>
              </head>
              <body>
                  <ol>
                      <li>风筝大剑五只鸟->寒冰</li>
                      <li>卖萌蘑菇快点跑->提莫</li>
                      <li>国王三刀真五秒->蛮王</li>
                      <li>我还是有序列表项一</li>
                      <li>我还是有序列表项二</li>
                      <li>我还是有序列表项三</li>
                      <li>我还是有序列表项四</li>
                      <li>我还是有序列表项五</li>
                      <li>我还是有序列表项六</li>
                  </ol>
              </body>
          </html>

:nth-of-type() 与:nth-child()作用类似，但是仅匹配使用的同种标签元素。
- 举例：

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器</title>
                  <style>
                      /*E:nth-of-type() 与:nth-child()作用类似，但是仅匹配使用的同种标签元素。*/
                      /*不会匹配到*/
                      li:nth-child(5){
                          background-color: tomato;
                      }
                      /*仅匹配使用的同种标签元素*/
                      li:nth-of-type(5){
                          background-color: fuchsia;
                      }
                  </style>
              </head>
              <body>
                  <ol>
                      <li>风筝大剑五只鸟->寒冰</li>
                      <li>卖萌蘑菇快点跑->提莫</li>
                      <li>国王三刀真五秒->蛮王</li>
                      <li>我还是有序列表项一</li>
                      <p>我是列表标签里面放的其它标签</p>
                      <li>我还是有序列表项二</li>
                      <li>我还是有序列表项三</li>
                      <li>我还是有序列表项四</li>
                      <li>我还是有序列表项五</li>
                      <li>我还是有序列表项六</li>
                  </ol>
              </body>
          </html>

:nth-last-of-type() 与:nth-last-child()作用类似，但是仅匹配使用的同种标签(倒叙)
- 举例

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器</title>
                  <style>
                      /*E:nth-last-of-type() 与:nth-last-child()作用类似，但是仅匹配使用的同种标签*/
                      li:nth-last-of-type(6){
                          background-color: tomato;
                      }
                  </style>
              </head>
              <body>
                  <ol>
                      <li>风筝大剑五只鸟->寒冰</li>
                      <li>卖萌蘑菇快点跑->提莫</li>
                      <li>国王三刀真五秒->蛮王</li>
                      <li>我还是有序列表项一</li>
                      <p>我是列表标签里面放的其它标签</p>
                      <li>我还是有序列表项二</li>
                      <li>我还是有序列表项三</li>
                      <li>我还是有序列表项四</li>
                      <li>我还是有序列表项五</li>
                      <li>我还是有序列表项六</li>
                  </ol>
              </body>
          </html>

:nth-child(an+b)循环设置样式
- a 表示每次循环中间隔几个改变样式。
- b 表示指定在循环中开始的位置。
- 举例：

 <!DOCTYPE html>
            <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>其它的结构伪类选择器</title>
                    <style>
                       /*E:nth-child(an+b)循环设置样式*/
                        /*li:nth-child(2n+1){*/
                        /*    background-color: tomato;*/
                        /*}*/
                        li:nth-of-type(2n+1){
                            background-color: tomato;
                        }
                    </style>
                </head>
                <body>
                    <ol>
                        <li>风筝大剑五只鸟->寒冰</li>
                        <li>卖萌蘑菇快点跑->提莫</li>
                        <li>国王三刀真五秒->蛮王</li>
                        <li>我还是有序列表项一</li>
                        <p>我是列表标签里面放的其它标签</p>
                        <li>我还是有序列表项二</li>
                        <li>我还是有序列表项三</li>
                        <li>我还是有序列表项四</li>
                        <li>我还是有序列表项五</li>
                        <li>我还是有序列表项六</li>
                    </ol>
                </body>
            </html>

:only-child 匹配父元素下仅有一个子元素，并且该子元素为某个元素。
- 举例：

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器</title>
                  <style>
                      /*E:only-child 匹配父元素下仅有一个子元素，并且该子元素为E元素。*/
                      p:only-child{
                          background-color: tomato;
                      }
                  </style>
              </head>
              <body>
                  <div>
                      <p>我是div中的p</p>
                  </div>
                  <div>
                      <p>我是第二个div中的第一个P</p>
                      <b>我是第二个div中的第一个B</b>
                  </div>
                  <div>
                      <p>我是第三个div中的第一个P</p>
                      <p>我是第三个div中的第二个P</p>
                  </div>
              </body>
          </html>

:only-of-type 匹配父元素下使用同种标签的唯一一个某个子元素。
- 举例：

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器</title>
                  <style>
                     /*E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素E。*/
                      p:only-of-type{
                          background-color: tomato;
                      }
                  </style>
              </head>
              <body>
                  <div>
                      <p>我是div中的p</p>
                  </div>
                  <div>
                      <p>我是第二个div中的第一个P</p>
                      <b>我是第二个div中的第一个B</b>
                  </div>
                  <div>
                      <p>我是第三个div中的第一个P</p>
                      <p>我是第三个div中的第二个P</p>
                  </div>
              </body>
          </html>

以下是跟表单相关

:enabled 匹配表单中激活的元素(只要没有disabled都是激活的)
- 举例：

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器-表单相关</title>
                  <style>
                      /*E:enabled 匹配表单中激活的元素*/
                      input:enabled{
                          background-color: tomato;
                      }
                  </style>
              </head>
              <body>
                  <form action="" method="get">
                      <input type="text" name="user" value="admin" />
                      <br>
                      <input type="text" readonly name="user1" value="admin1" />
                      <br>
                      <input type="text" disabled name="user2" value="admin2" />
                  </form>
              </body>
          </html>

:disabled 匹配表单中未激活的元素。(有disabled属性)
- 举例：

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器-表单相关</title>
                  <style>
                      /*E:disabled 匹配表单中未激活的元素。(有disabled属性)*/
                      input:disabled{
                          background-color: tomato;
                          color:#fff;
                      }
                  </style>
              </head>
              <body>
                  <form action="" method="get">
                      <input type="text" name="user" value="admin" />
                      <br>
                      <input type="text" readonly name="user1" value="admin1" />
                      <br>
                      <input type="text" disabled name="user2" value="admin2" />
                  </form>
              </body>
          </html>

:checked 匹配表单中被选择的radio或者checkbox元素。
- 举例：

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器-表单相关</title>
                  <style>
                      /*E:checked 匹配表单中被选择的radio或者checkbox元素。*/
                      /*input:checked{*/
                      /*    width: 100px;*/
                      /*    height: 100px;*/
                      /*}*/
                      input[type=radio]:checked+label{
                          font-size:20px;
                          font-weight: bold;
                      }
                      input[type=checkbox]:checked+label{
                          color:tomato;
                      }
                  </style>
              </head>
              <body>
                  <form action="" method="get">
                      <input type="radio" name="sex" value="0" id="nv"><label for="nv">女</label>
                      <input type="radio" name="sex" value="1" id="nan"><label for="nan">男</label>
                      <input type="radio" name="sex" value="2" id="baomi"><label for="baomi">保密</label>
                      <hr>
                      <input type="checkbox" name="hobby[]" value="0" id="one"><label for="one">混球</label>
                      <input type="checkbox" name="hobby[]" value="1" id="two"><label for="two">足球</label>
                      <input type="checkbox" name="hobby[]" value="2" id="three"><label for="three">篮球</label>
                  </form>
              </body>
          </html>

:focus 设置元素在其获取鼠标焦点的样式。(只有输入域有效)
- 举例：

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器-表单相关</title>
                  <style>
                      /*:focus 设置元素在其获取鼠标焦点的样式。*/
                      input:focus{
                          background-color: tomato;
                          color:#fff;
                      }
                  </style>
              </head>
              <body>
                  <form action="" method="get">
                      <input type="text" name="user" value="admin5" />
                      <br>
                      <input type="text" name="user" value="admin4" />
                      <br>
                      <input type="text" name="user" value="admin3" />
                      <br>
                      <input type="text" name="user" value="admin2" />
                      <br>
                      <input type="text" readonly name="user1" value="admin1" />
                      <br>
                      <input type="text" disabled name="user2" value="admin2" />
                  </form>
              </body>
          </html>

::selection 匹配用户当前选中的元素(了解)。
- 举例：

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器-表单相关</title>
                  <style>
                      /*::selection 匹配用户当前选中的元素(了解)。*/
                      div::selection{
                          background-color: tomato;
                          color: white;
                      }
                  </style>
              </head>
              <body>
                  <form action="" method="get">
                      <input type="text" name="user" value="admin5" />
                      <br>
                      <input type="text" name="user" value="admin4" />
                      <br>
                      <input type="text" name="user" value="admin3" />
                      <br>
                      <input type="text" name="user" value="admin2" />
                      <br>
                      <input type="text" readonly name="user1" value="admin1" />
                      <br>
                      <input type="text" disabled name="user2" value="admin2" />
                      <hr>
                      <input type="radio" name="sex" value="0" id="nv"><label for="nv">女</label>
                      <input type="radio" name="sex" value="1" id="nan"><label for="nan">男</label>
                      <input type="radio" name="sex" value="2" id="baomi"><label for="baomi">保密</label>
                      <hr>
                      <input type="checkbox" name="hobby[]" value="0" id="one"><label for="one">混球</label>
                      <input type="checkbox" name="hobby[]" value="1" id="two"><label for="two">足球</label>
                      <input type="checkbox" name="hobby[]" value="2" id="three"><label for="three">篮球</label>
                  </form>
                  <div>
                      我是div中的内容
                  </div>
              </body>
          </html>

选择器的优先级（权重）

通过不同的选择器，选中相同的元素 ，并且为相同的样式名设置不同的值时，就发生了样式的冲突。

到底应用哪个样式，此时就需要看优先级了。

简单描述：

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

当选择器包含多种选择器时，需要将多种选择器优先级相加然后进行比较。选择器的优先级不会超过它最大数量级，如果选择器优先级一样，则使用靠后的样式。

并集(组合)选择器的优先级是单独计算。

可以在样式的最后添加一个!important,则此时该样式会获得一个最高的一个优先级，将会超过所有样式甚至内联样式，所以在开发中尽量避免使用。

举例：

<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
    <style>
        #one{
            font-size: 50px;
        }
        .one{
            font-size:30px!important;
            color:tomato;
        }
        .two>.three{
            color:green;
        }
        .two>div{
            color:blue!important;
        }
     </style>
  </head>
  <body>
      <div class="one" id="one">
          我是内容
      </div>
      <div id="two" class="two">
          <div class="three" style="color: purple">我是包含中的div</div>
      </div>
      <div class="two">
          <div class="three">我是包含中的div2</div>
      </div>
  </body>

CSS三大特性

1.层叠性

概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。

什么是样式冲突？ ——— 元素的同一个样式名，被设置了不同的值，这就是冲突。

2.继承性

概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。

规则：优先继承离得近的。

常见的可继承属性：

text-?? ， font-?? ， line-?? 、 color ……

备注：参照MDN网站，可查询属性是否可被继承。

3.优先级

简单聊： !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式。

详细聊：需要计算权重。

计算权重时需要注意：并集选择器的每一个部分是分开算的！

CSS常用属性

CSS基本属性

字体颜色及字体样式

1.字体属性

color 字体颜色（重要）

取值：

-1 表示方式一：颜色名

编写方式：直接使用颜色对应的英文单词，编写比较简单，例如：

1. 红色：red

2. 绿色：green

3. 蓝色：blue

4. 紫色：purple

5. 橙色：orange

6. 灰色：gray

……

1. 颜色名这种方式，表达的颜色比较单一，所以用的并不多。2. 具体颜色名参考 MDN 官方文档：https://developer.mozilla.org/en-US/docs/Web/CSS/named-color

-2 表示方式二：rgb 或 rgba

编写方式：使用 红、黄、蓝 这三种光的三原色进行组合。
- r 表示红色
- g 表示绿色
- b 表示蓝色
- a 表示 透明度

小规律：

1. 若三种颜色值相同，呈现的是灰色，值越大，灰色越浅。

2. rgb(0, 0, 0) 是黑色， rgb(255, 255,255) 是白色。

3. 对于 rbga 来说，前三位的 rgb 形式要保持一致，要么都是 0~255 的数字，要么都是百分比。

-3 表示方式三：HEX 或 HEXA

HEX 的原理同与 rgb 一样，依然是通过：红、绿、蓝色进行组合，只不过要用 6位（分成3组）来表达，格式为：# rrggbb

-4 表示方式四：HSL 或 HSLA

HSL 是通过：色相、饱和度、亮度，来表示一个颜色的，格式为： hsl(色相,饱和度,亮度)
- 色相：取值范围是 0~360 度
- 饱和度：取值范围是 0%~100% 。（向色相中对应颜色中添加灰色， 0% 全灰， 100% 没有灰）
- 亮度：取值范围是 0%~100% 。（ 0% 亮度没了，所以就是黑色。 100% 亮度太强，所以就是白色了）

HSLA 其实就是在 HSL 的基础上，添加了透明度。

举例：

<!DOCTYPE html>
  <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>字体颜色属性</title>
          <style>
              .one{
                  color:tomato;
              }
              .two{
                  /*color:#0000ff*/
                  /*color:#f00*/
                  color:#ffff00
              }
              /*RGB模式*/
              .three{
                  color:rgb(255,255,0)
              }
              /*a指透明度 取值0~1之间的小数*/
              .four{
                  color:rgba(255,0,0,0.3)
              }
              .five{
                  color:hsl(180deg,100%,50%)
              }
              /*a 指0~1之间的小数*/
              .six{
                  color:hsla(180deg,100%,50%,0.5)
              }
              .seven{
                  color: transparent;
              }
              p>a{
                  color:red;
              }
          </style>
      </head>
      <body>
          <p class="one">我是颜色名称</p>
          <p class="two">我是十六进制</p>
          <p class="three">我是RGB模式</p>
          <p class="four">我是RGBA模式</p>
          <p class="five">我是css3中新增HSL模式</p>
          <p class="six">我是css3中新增HSLA模式</p>
          <p class="seven">我是css3中透明色</p>
          <p>
              <a href="">设置字体颜色一定要找到离字体最近的标签</a>
          </p>
      </body>
  </html>

font-style 指定文本的字体样式(正常、斜体)

取值：
- normal 正常（默认值）
- italic 斜体（使用字体自带的斜体效果）
- oblique ：斜体（强制倾斜产生的斜体效果）

实现斜体时，更推荐使用 italic 。

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字体颜色属性</title>
        <style>
            /*设置字体样式*/
            .italic{
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <div class="italic">我是字体的样式</div>
    </body>
</html>

字体大小属性及取值

font-size 指定文本字体大小（重要），控制字体的大小。
取值单位
- px 绝对长度单位，像素。
- em 相对长度单位，相对于父类文本大小，如未设置则相对于浏览器默认字体尺寸
- ex 相对长度单位(相对于一个x字符大小)（了解）
- %(百分比)
- rem 相对长度单位(相对于根元素)
  - 10px = 0.625rem
  - 12px = 0.75rem
  - 14px = 0.875rem
  - 16px = 1rem (base)
  - 18px = 1.125rem
  - 20px = 1.25rem
  - 24px = 1.5rem
  - 30px = 1.875rem
  - 32px = 2rem
  - 布局时设置案例

html { font-size: 62.5%; }  /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字体大小</title>
        <style>
            /*pc端浏览器默认字体大小是16像素 默认最小支持12px*/
            .one{
                font-size:14px;
            }
            /*em 相对单位*/
            .em{
                font-size: 1em;
            }
            /*.f{*/
            /*    font-size:14px;*/
            /*}*/
            /*.other{*/
            /*    font-size:14px;*/
            /*}*/
            /*.f{*/
            /*    font-size:15px;*/
            /*}*/
            /*.qtem{*/
            /*    font-size:1em;*/
            /*}*/

            /*ex 单位  2ex 约等于 1em*/
            /*.ex{*/
            /*    font-size:1ex;*/
            /*}*/

            /*rem root em*/
            .rem{
                font-size:1rem;
            }
            /*.rem_other{*/
            /*    font-size:20px;*/
            /*}*/
            /*.r_f{*/
            /*    font-size:30px;*/
            /*}*/
            /*.qt_rem{*/
            /*    font-size:1rem;*/
            /*}*/
            html{
                font-size: 62.5%;
            }
            body{
                font-size:1.8rem;
            }
            h1{
                font-size:2.4rem;
            }
            .bfb{
                font-size:75%;
            }
        </style>
    </head>
    <body>
        <!--测试PX-->
        <div class="one">
            我是div标签里的内容x
        </div>
        <!--测试em-->
        <div class="em">我是测试em单位的内容x</div>
        <div class="other">
            <div class="f">
                <div class="qtem">
                    我是嵌套的EM内容x
                </div>
            </div>
        </div>
        <!--测试ex-->
        <div class="ex">我相对于x字符的大小</div>
        <!--测试rem-->
        <div class="rem">我是相当于与根元素REM</div>
        <div class="rem_other">
            <div class="r_f">
                <div class="qt_rem">
                    我是嵌套的REM
                </div>
            </div>
        </div>
        <h1>我是h1标签</h1>
        <div class="bfb">aaaaaa</div>
    </body>
</html>

注意点：

1. Chrome 浏览器支持的最小文字为 12px ，默认的文字大小为 16px ，并且 0px 会自动消失。

2. 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。

3. 通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了。

font-family 定义文本使用某个字体

取值
- 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字体的其它属性</title>
        <style>
            /*设置字体族科*/
            .family{
                font-family: "宋体,微软雅黑,黑体,楷体";
            }
        </style>
    </head>
    <body>
        <div class="family">我是字体族科</div>
    </body>
</html>

font-weight 指定文本的粗细

常用值：
- 关键词
  - lighter ：细
  - normal ：正常
  - bold ：粗
  - bolder ：很粗（多数字体不支持）
- 数值
  - 100~1000 且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的精确程度）。
  - 100~300 等同于 lighter ， 400~500 等同于 normal ， 600 及以上等同于bold 。

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字体的其它属性</title>
        <style>
            /*设置字体粗细*/
            .bold{
                font-weight: bold;
            }
            .lighter{
                font-weight: lighter;
            }
            .number{
                font-weight: 900;
            }
        </style>
    </head>
    <body>
        <div class="bold">我是粗体</div>
        <div class="lighter">我是细体</div>
        <div class="number">我是数值</div>
    </body>
</html>

font-variant 设置字体为小型大写字母

取值
- normal 正常字体
- small-caps 小型的大写字母

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字体的其它属性</title>
        <style>
            /*设置小型大写字母*/
            .variant{
                font-variant: small-caps;
            }
        </style>
    </head>
    <body>
        <div class="variant">设置小型大写字母：xiaoming work lushang bei car zhuagnle</div>
    </body>
</html>

font 简写属性：斜体/小型大写字母/粗体/(字体/行高)/族科

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字体的其它属性</title>
        <style>
            /*字体的简写属性*/
            .font{
                font:italic small-caps bold 20px/50px '微软雅黑' ;
            }
        </style>
    </head>
    <body>
        <div class="font">字体的简写属性：xiaoming</div>
    </body>
</html>

letter-spacing 设置字的间距

取值
- 用长度值指定字符间隔，可以为负值

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字体的其它属性</title>
        <style>
            /*设置字间距*/
            .letter{
                letter-spacing: 10px;
            }
        </style>
    </head>
    <body>
        <div class="letter">设置字间距</div>
    </body>
</html>

word-spacing 设置单词的词间距(对中文无效)

取值
- 用长度值指定单词间隔，可以为负值
- 用百分比指定单词间隔，可以为负值

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字体的其它属性</title>
        <style>
            /*设置词间距*/
            .word{
                word-spacing: 20px;
            }
        </style>
    </head>
    <body>
        <div class="word">设置词间距 hello world</div>
    </body>
</html>

letter-spacing 设置字母间距(对中文无效)

举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>字体的其它属性</title>
	<style>
		/*设置单词间距*/
		.word{
			letter-spacing: 20px;
		}
	</style>
</head>
<body>
<div class="word">设置词间距 hello world</div>
</body>
</html>

opacity 设置颜色的透明度

取值
- 浮点数0~1之间的小数

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字体的其它属性</title>
        <style>
            /*设置透明度*/
            .opacity{
                background-color: red;
                opacity: 0.5;
            }
        </style>
    </head>
    <body>
        <div class="opacity">我是设置透明度</div>
    </body>
</html>

文本属性

overflow | overflow-x | overflow-y 当内容溢出元素框时隐藏|自动|显示混动条

取值
- visible：对溢出内容不做处理，内容可能会超出容器
- hidden：隐藏溢出容器的内容且不出现滚动条
- scroll：隐藏溢出容器的内容，溢出的内容可以通过滚动呈现
- auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。textarea元素的overflow默认值就是auto

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性</title>
        <style>
            .visible{
                width:100px;
                height: 100px;
                border:1px solid blue;
                margin-bottom: 50px;
                overflow: visible;
            }
            .scroll{
                width: 100px;
                height: 100px;
                border:1px solid red;
                margin-bottom: 50px;

                overflow: scroll;

            }
            .auto{
                width:100px;
                height: 100px;
                border:1px solid blue;
                margin-bottom: 50px;
                overflow: auto;

            }
            .hidden{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                /*隐藏会截断内容*/
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="visible">
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
        </div>
        <div class="scroll">
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
        </div>
        <div class="auto">
            aaaaa
            我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
        </div>
        <div class="hidden">
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
        </div>
    </body>
</html>

text-overflow 让溢出的文字以省略号显示

取值：
- clip：当内联内容溢出块容器时，将溢出部分裁切掉
- ellipsis：当内联内容溢出块容器时，将溢出部分替换为（…）

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性</title>
        <style>
            /*text-overflow 溢出的文字处理方式*/
            .clip{
                width: 100px;
                height: 100px;
                border:1px solid blue;
                margin-top:50px;
                /*不能单独设置*/
                text-overflow: clip;
                /*培超超出部分隐藏*/
                overflow: hidden;
            }
            .ellipsis{
                width: 100px;
                height: 100px;
                border:1px solid blue;
                margin-top:50px;
                /*不能单独设置*/
                text-overflow: ellipsis;
                overflow: hidden;
                /*针对与中文会默认换行 必须设置内容才同一行才能显示省略号*/
                white-space:nowrap;
            }
        </style>
    </head>
    <body>
        <!--溢出的文字显示省略号或者切断-->
        <div class="clip">
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
        </div>

        <div class="ellipsis">
            我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
        </div>
    </body>
</html>

white-space 设置文字是否在同一行显示

取值：
- normal：默认处理方式。会将序列的空格合并为一个，内部是否换行由换行规则决定
- pre：原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同 pre 元素效果
- nowrap：与normal值一致，不同的是会强制所有文本在同一行内显示
- pre-wrap：与pre值一致，不同的是文字超出边界时将自动换行
- pre-line：与normal值一致，但是会保留文本输入时的换行

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性</title>
        <style>
            /*white-space 设置文本是否在同一行显示*/
            ul p{
                width: 100px;
                border:1px solid red;
            }
            .normal>p{
                white-space: normal;
            }
            .pre>p{
                white-space: pre;
            }
            .pre-wrap>p{
                white-space: pre-wrap;
            }
            .pre-line{
                white-space: pre-line;
            }
            .nowarp{
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="normal">
                <p>我是第一个P标签，我来测试normal aaaaaa</p>
            </li>
            <li class="pre">
                <p>我是第二个P标签
                    我来测试pre属性值
                </p>
            </li>
            <li class="pre-wrap">
                <p>
                    我是第三个      p标签
                    我来测试  pre-wrap
                </p>
            </li>
            <li class="pre-line">
                <p>我是第四个      p标标签
                    我来测试 pre-line
                    hello
                </p>
            </li>
            <li class="nowarp">
                <p>我是第五个P标签
                    我来测试的是nowarp
                </p>
            </li>
        </ul>
    </body>
</html>

text-align 元素内容对齐方式

常用值：
- left ：左对齐（默认值）
- right ：右对齐
- center ：居中对齐

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性-内容对齐方式</title>
        <style>
            .left{
                text-align: left;
            }
            .center{
                text-align: center;
            }
            .right{
                text-align: right;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="left">我是第一个li标签，我是左对齐</li>
            <li class="center">我是第一个li标签，我是居中对齐</li>
            <li class="right">我是第一个li标签，我是右对齐</li>
        </ul>
    </body>
</html>

text-decoration 指定文本是否有修饰

可选值：
- none ：无装饰线（常用）
- underline ：下划线（常用）
- overline ：上划线
- line-through ：删除线
可搭配如下值使用：
- dotted ：虚线
- wavy ：波浪线
- 也可以指定颜色

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性-文本修饰</title>
        <style>
            /*text-decoration 指定文本是否修饰*/
            .none{
                text-decoration: none;
            }
            .underline{
                text-decoration: underline;
            }
            .overline{
                text-decoration: overline;
            }
            .line-through{
                text-decoration: line-through;
            }
        </style>
    </head>
    <body>
        <p>
            <a class="none" href="">文本修饰-取消修饰</a><br>
            <span class="underline">为文本修饰-上划线</span><br>
            <span class="overline">为文本修饰-下划线</span><br>
            <span class="line-through">为文本修饰-删除线</span>
        </p>
    </body>
</html>

text-indent 文本首行缩进

属性值： css 中的长度单位，例如： px

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性-内容对齐方式</title>
        <style>
            .text-indent{
                text-indent: 2em;
            }
        </style>
    </head>
    <body>
        <p class="text-indent">
            这是HTML中的段落标签，特点与上行文本和下行文本间隔一行
        </p>
        <p>
            这是HTML中的段落标签，特点与上行文本和下行文本间隔一行
        </p>
    </body>
</html>

word-wrap 设置当前行超过指定容器的边界时是否换行

取值：
- normal：允许内容顶开或溢出指定的容器边界
- break-word：内容将在边界内换行，如果需要，单词内部允许断行

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性-内容对齐方式</title>
        <style>
            .break-word{
                width: 100px;
                border:1px solid red;
                word-break: break-word;
            }
        </style>
    </head>
    <body>
        <div class="break-word">aaaaaaaaaaaaaaaaaaaaaaaaa</div>
    </body>
</html>

vertical-align 设置对象内容的垂直对齐方式

取值：
- baseline：把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐
- sub：把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小）
- super：把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小）
- text-top：把当前盒的top和父级的内容区的top对齐
- text-bottom：把当前盒的bottom和父级的内容区的bottom对齐
- middle：把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
- top：把当前盒的top与行盒的top对齐
- bottom：把当前盒的bottom与行盒的bottom对齐

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性-内容垂直对齐方式</title>
        <style>
                        /*vertical-align 设置元素垂直对齐方式*/
            .test p{
                border:1px solid red;
                line-height: 2em;
                font-size:16px;
            }
            .test a{
                font-size:12px;
                margin-left:10px
            }
            .baseline a{
                vertical-align: text-top;
            }
            .sub a{
                vertical-align: sub;
            }
            .super a{
                vertical-align: super;
            }
            .top a{
                vertical-align: top;
            }
            .text-top a{
                vertical-align: text-top;
            }
            .middle a{
                vertical-align: middle;
            }
            .bottom a{
                vertical-align: bottom;
            }
            .text-bottom a{
                vertical-align: text-bottom;
            }
        </style>
    </head>
    <body>
        <ul class="test">
            <li class="baseline">
                <p>参考内容<a href="">基线对齐</a></p>
            </li>
            <li class="sub">
                <p>参考内容<a href="">下标对齐</a></p>
            </li>
            <li class="super">
                <p>参考内容<a href="">上标对齐</a></p>
            </li>
            <li class="top">
                <p>参考内容<a href="">内容与顶端对齐</a></p>
            </li>
            <li class="text-top">
                <p>参考内容<a href="">文本与对象顶端</a></p>
            </li>
            <li class="middle">
                <p>参考内容<a href="">文本与对象居中对齐</a></p>
            </li>
            <li class="bottom">
                <p>参考内容<a href="">内容与对象底部对齐</a></p>
            </li>
            <li class="text-bottom">
                <p>参考内容<a href="">文本与对象底部对齐</a></p>
            </li>
        </ul>
    </body>
</html>

line-height 设置对象的行高

作用：设置一行的高度用于美化效果，第二个作用可让让内容垂直居中

可选值：
- normal ：由浏览器根据文字大小决定的一个默认值
- 像素( px )
- 数字：参考自身 font-size 的倍数（很常用）
- 百分比：参考自身 font-size 的百分比
备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性-行高</title>
        <style>
            /*line-height*/
            .line-height{
                border:1px solid red;
                /*line-height: 3em;*/
                /*给元素添加高度*/
                height: 50px;
                /*行高等于高度即可实现垂直居中*/
                line-height: 50px;
            }
        </style>
    </head>
    <body>
        <div class="line-height">
            我是div的内容，我的作用可以设置行高也可以设置垂直居中
        </div>
    </body>
</html>

背景属性

background-color 背景颜色

取值：color设置所有值均可，默认背景颜色是 transparent 。

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景颜色</title>
        <style>
            div{
                width: 100px;
                height: 100px;
            }
            .name{
                background-color:tomato;
            }
            .jinzhi{
                background-color:#0ff;
            }
            .rgb{
                background-color: rgb(255,255,0);
            }
            .rgba{
                background-color:rgba(255,255,0,0.5)
            }
            .hsl{
                background-color: hsl(180deg,50%,50%);
            }
            .hsla{
                background-color: hsla(180,100%,50%,0.5);
            }
            .transparent{
                border:1px solid red;
                background-color: transparent;
            }
        </style>
    </head>
    <body>
        <div class="name"></div>
        <div class="jinzhi"></div>
        <div class="rgb"></div>
        <div class="rgba"></div>
        <div class="hsl"></div>
        <div class="hsla"></div>
        <div class="transparent"></div>
    </body>
</html>

background-image 背景图片

属性值：url(图片的地址)

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图片</title>
        <style>
            .img{
                width: 100%;
                height: 800px;
                /*背景图片如果小于元素的大小 默认沿水平和垂直方向重复*/
                background-image:url('./a.webp')
            }
        </style>
    </head>
    <body>
        <div class="img">

        </div>
    </body>
</html>

background-repeat 背景图片是否重复

取值：
- repeat ：重复，铺满整个元素，默认值
- repeat-x ：只在水平方向重复
- repeat-y ：只在垂直方向重复
- no-repeat ：不重复

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图片</title>
        <style>
            .img{
                width: 100%;
                height: 800px;
                /*背景图片如果小于元素的大小 默认沿水平和垂直方向重复*/
                background-image:url('./a.webp');
                /*设置背景图片不重复*/
                /*background-repeat:no-repeat;*/
                /*设置背景图片沿X轴重复*/
                /*background-repeat: repeat-x;*/
                /*设置背景图片沿Y轴重复*/
                /*background-repeat: repeat-y;*/
                /*设置背景图片沿x,Y轴重复*/
                background-repeat: repeat;
            }
        </style>
    </head>
    <body>
        <div class="img">

        </div>
    </body>
</html>

background-size 设置背景图片大小

取值：
- 用长度值指定背景图像大小。不允许负值
- 用百分比指定背景图像大小。不允许负值
- auto：背景图像的真实大小
- cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器
- contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图片</title>
        <style>
            .img{
                width: 100%;
                height: 800px;
                background-color:tomato;
                /*背景图片如果小于元素的大小 默认沿水平和垂直方向重复*/
                background-image:url('./a.webp');
                /*设置背景图片不重复*/
                background-repeat:no-repeat;

                /*设置背景图的大小*/
                /*background-size:100% 100%;*/
                /*background-size:100px 100px;*/
                /*background-size:auto;*/
                /*background-size:cover;*/
                background-size: contain;
            }
        </style>
    </head>
    <body>
        <div class="img">

        </div>
    </body>
</html>

background-position 背景图片位置(相对于外层容器)

取值：
- 用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算
- 用长度值指定背景图像在元素中出现的位置。可以为负值
- center：背景图像横向或纵向居中
- left：背景图像从元素左边开始出现
- right：背景图像从元素右边开始出现
- top：背景图像从元素顶部开始出现
- bottom：背景图像从元素底部开始出现

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图片</title>
        <style>
            .img{
                width: 100%;
                height: 800px;
                background-color:tomato;
                /*背景图片如果小于元素的大小 默认沿水平和垂直方向重复*/
                background-image:url('./a.webp');
                /*设置背景图片不重复*/
                background-repeat:no-repeat;
                /*设置背景图片的位置*/
                /*background-position:center;*/
                /*background-position: 100px 100px;*/
                background-position: -100px -100px;
            }
        </style>
    </head>
    <body>
        <div class="img">

        </div>
    </body>
</html>

background-attachment 背景图片是否随内容滚动

取值
- fixed：背景图像相对于视口（viewport）固定
- scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图片</title>
        <style>
            .img{
                width: 100%;
                height: 1800px;
                background-color:tomato;
                /*背景图片如果小于元素的大小 默认沿水平和垂直方向重复*/
                background-image:url('./a.webp');
                /*设置背景图片不重复*/
                background-repeat:no-repeat;
                /*设置背景图居中*/
                background-position: center;
                /*设置背景图是否随内容而滚动*/
                background-attachment: fixed;
            }
        </style>
    </head>
    <body>
        <div class="img">

        </div>
    </body>
</html>

background 背景属性简写属性(推荐使用)

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景的简写属性</title>
        <style>
            .back{
                width: 1300px;
                height: 1800px;
                /*background: no-repeat center/contain tomato fixed url('./a.webp');*/
                background: no-repeat center tomato fixed url('./a.webp');
            }
        </style>
    </head>
    <body>
        <div class="back"></div>
    </body>
</html>

尺寸属性

width 设置元素的宽度

取值：
- auto：无特定宽度值，取决于其它属性值
- 用长度值来定义宽度。不允许负值
- 用百分比来定义宽度。百分比参照包含块宽度。不允许负值

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>尺寸属性</title>
        <style>
            .one{
                width: 100px;
                height: 100px;
                background: tomato;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
    </body>
</html>

height 设置元素的高度

取值：
- auto：无特定高度值，取决于其它属性值
- 用长度值来定义高度。不允许负值
- 用百分比来定义高度。不允许负值

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>尺寸属性</title>
        <style>
            .one{
                width: 100px;
                height: 100px;
                background: tomato;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
    </body>
</html>

这里有一小工具，我觉得还是非常好用的，在你模仿别人网站需要量尺寸的时候可以用到！标尺工具的下载地址：https://picpick.app/zh/download/free

min-height 设置最小高度

取值：
- 用长度值来定义最小高度。不允许负值
- 用百分比来定义最小高度。不允许负值

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>尺寸属性</title>
        <style>
            .two{
                width: 100px;
                min-height: 100px;
                background: tomato;
            }
        </style>
    </head>
    <body>
        <div class="two">
            我是留言的内容
            我是留言的内容
            我是留言的内容
            我是留言的内容
            我是留言的内容
            我是留言的内容
            我是留言的内容
            我是留言的内容
        </div>
    </body>
</html>

最小高度属性默认显示最小高度，当内容超过最小高度时，最小高度会随内容大小而增加

max-height 设置最大高度

取值：
- 用长度值来定义最小高度。不允许负值
- 用百分比来定义最小高度。不允许负值

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>尺寸属性</title>
        <style>
            .three{
                width: 100px;
                max-height: 100px;
                background: cyan;
            }
        </style>
    </head>
    <body>
        <div class="three">
            我是留言的内容
            我是留言的内容
            我是留言的内容
            我是留言的内容
        </div>
    </body>
</html>

最大高度属性默认没有高度，当内容增加时告诉随内容增加，当增加到最大高度时，高度不会在增加

min-width 设置最小宽度

取值：
- 用长度值来定义最小高度。不允许负值
- 用百分比来定义最小高度。不允许负值

max-width 设置最大宽度

取值：
- 用长度值来定义最小高度。不允许负值
- 用百分比来定义最小高度。不允许负值

最小高度和最大高度适用于页面布局，最小宽度和最大宽度适用于媒体查询

列表属性

list-style-type 设定列表的符号样式

取值：
- disc：实心圆(CSS1)
- circle：空心圆(CSS1)
- square：实心方块(CSS1)
- decimal：阿拉伯数字(CSS1)
- lower-roman：小写罗马数字(CSS1)
- upper-roman：大写罗马数字(CSS1)
- lower-alpha：小写英文字母(CSS1)
- upper-alpha：大写英文字母(CSS1)
- none：不使用项目符号(CSS1)
- armenian：传统的亚美尼亚数字(CSS2)
- cjk-ideographic：浅白的表意数字(CSS2)
- georgian：传统的乔治数字(CSS2)
- lower-greek：基本的希腊小写字母(CSS2)
- hebrew：传统的希伯莱数字(CSS2)
- hiragana：日文平假名字符(CSS2)
- hiragana-iroha：日文平假名序号(CSS2)
- katakana：日文片假名字符(CSS2)
- katakana-iroha：日文片假名序号(CSS2)
- lower-latin：小写拉丁字母(CSS2)
- upper-latin：大写拉丁字母(CSS2)

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表属性</title>
        <style>
            ul>li{
                list-style-type:decimal;
            }
            ol>li{
                list-style-type:none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
        </ul>
        <ol>
            <li>我是有序列表</li>
            <li>我是有序列表</li>
            <li>我是有序列表</li>
            <li>我是有序列表</li>
        </ol>
    </body>
</html>

list-style-image 使用指定的图片来代替列表的序号

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表属性</title>
        <style>
            ul>li{
                list-style-image:url('./b.webp')
            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
        </ul>
    </body>
</html>

list-style-position 设定列表需要的位置

取值：
- outside：列表项目标记放置在文本以外，且环绕文本不根据标记对齐
- inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表属性</title>
        <style>
            ul>li{
                list-style-image:url('./b.webp');
                border:1px solid red;
                list-style-position:inside ;

            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
        </ul>
    </body>
</html>

list-style 列表简写属性

举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表属性</title>
        <style>
            ol>li{
                list-style: none url('./b.webp') inside;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>我是有序列表</li>
            <li>我是有序列表</li>
            <li>我是有序列表</li>
            <li>我是有序列表</li>
        </ol>
    </body>
</html>

表格属性

边框相关属性（其他元素也能用）

CSS 属性名	功能	属性值
border-width	边框宽度	CSS 中可用的长度值
border-color	边框颜色	CSS 中可用的颜色值
border-style	边框风格	none 默认值 solid 实线 dashed 虚线 dotted 点线 double 双实线
border	边框复合属性	没有数量、顺序的要求

注意：

1. 以上 4 个边框相关的属性，其他元素也可以用，这是我们第一次遇见它们。

2. 在后面的盒子模型中，我们会详细讲解边框相关的知识。

举例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_边框相关属性</title>
    <style>
        table {
            /* border-width: 2px; */
            /* border-color: green; */
            /* border-style: solid; */
            border:2px green solid;
        }
        td,th {
            border:2px orange solid;
        }
        h2 {
            border:3px red solid;
        }
        span {
            border:3px purple dashed;
        }
    </style>
</head>
<body>
    <h2>边框相关的属性，不仅仅是表格能用，其他元素也能用</h2>
    <span>你要加油呀！</span>
    <table>
        <caption>人员信息</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>19</td>
                <td>女</td>
                <td>团员</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>20</td>
                <td>男</td>
                <td>群众</td>
            </tr>
            <tr>
                <td>4</td>
                <td>赵六</td>
                <td>21</td>
                <td>女</td>
                <td>党员</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

表格独有属性（只有 table 标签才能使用）：

CSS 属性名	功能	属性值
table-layout	设置列宽度	auto ：自动，列宽根据内容计算（默认值）。 fixed ：固定列宽，平均分。
border-spacing	单元格间距	CSS 中可用的长度值。生效的前提：单元格边框不能合并。
border-collapse	合并单元格边框	collapse ：合并 separate ：不合并
empty-cells	隐藏没有内容的单元格	show ：显示，默认 hide ：隐藏生效前提：单元格不能合并。
caption-side	设置表格标题位置	top ：上面（默认值） bottom ：在表格下面

以上 5 个属性，只有表格才能使用，即： <table> 标签。

举例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_表格独有属性</title>
    <style>
        table {
            border:2px green solid;
            width:500px;
            /* 控制表格的列宽 */
            table-layout: fixed;
            /* 控制单元格间距（生效的前提是：不能合并边框） */
            border-spacing: 10px;
            /* 合并相邻的单元格的边框 */
            border-collapse: collapse;
            /* 隐藏没有内容的单元格（生效的前提是：不能合并边框） */
            empty-cells: hide;
            /* 设置表格标题的位置 */
            caption-side: top;
        }
        td,th {
            border:2px orange solid;
        }
        .number {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <table>
        <caption>人员信息</caption>
        <thead>
            <tr>
                <th class="number">序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>19</td>
                <td>女</td>
                <td>团员</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>20</td>
                <td></td>
                <td>群众</td>
            </tr>
            <tr>
                <td>4</td>
                <td>赵六</td>
                <td>21</td>
                <td>女</td>
                <td>党员</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

鼠标属性

CSS 属性名	功能	属性值
cursor	设置鼠标光标的样式	pointer ：小手 move ：移动图标 text ：文字选择器 crosshair ：十字架 wait ：等待 help ：帮助

自定义鼠标图标

/* 自定义鼠标光标 */ 
cursor: url("./arrow.png"),pointer;

举例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>鼠标相关属性</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            cursor: url("../images/arrow.png"),pointer;
        }
        button {
            cursor: pointer;
        }
        input {
            cursor: move;
        }
    </style>
</head>
<body>
    <div>
        把鼠标放进来看一看
        <input type="text">
        <a href="#">百度</a>
        <button>点我</button>
    </div>
</body>
</html>

未完

五、JavaScript学习笔记

了解CSS

放置CSS的几种方式

CSS代码风格

CSS选择器

CSS基本选择器

通配符选择器(*)

元素选择器

类选择器(class选择器)

ID选择器

复合选择器

交集选择器

并集选择器

HTML元素间的关系

后代选择器

子代选择器

兄弟选择器

相邻兄弟选择器

通用兄弟选择器

属性选择器

伪类选择器

伪元素选择器

动态伪类

结构伪类

其他的结构伪类选择器

结构伪类

选择器的优先级（权重）

CSS三大特性

CSS常用属性

CSS基本属性

字体颜色及字体样式

字体大小属性及取值

文本属性

背景属性

尺寸属性

列表属性

表格属性

边框相关属性（其他元素也能用）

表格独有属性（只有 table 标签才能使用）：

鼠标属性

未完

下一节

评论

发送评论 编辑评论

推荐文章

发送评论编辑评论