本文详细介绍了CSS的作用、发展、工作原理和声明方式，强调了CSS选择器的多样性和使用场景，如标签选择器、类选择器、ID选择器等。同时，讲解了CSS在HTML中的应用，包括外部样式表、内部样式表和行内样式表，并阐述了CSS的优先级和样式继承规则。此外，还涵盖了CSS中的文本样式设置，如颜色、字体、对齐方式等。最后，讨论了列表样式的操作和一些常用单位值的理解。
一、CSS是什么？
1.全称：层叠样式表
2.作用：（1）用来修饰文档的语言，可以将文档以最优雅的形式呈现给用户。
（2）为了把内容和样式进行分离，提高工作效率。
3.发展：1996年12月第一份正式标准完成 CSS；1998年5月 CSS规范第二版 出版了；1999年开始修订，2001年完成了CSS工作草案。
4.CSS工作原理：
拿到HTML文件-解析HTML文件【加载CSS-解析CSS文件】 -转成DOM【将样式加到文档里】-展示给用户
5.CSS的声明：
（1） CSS核心功能：给特定的属性设置特定发值
（2）CSS的属性的值：大小写敏感
属性名和属性值 通过':'(英文)分割
属性和属性之间 通过';'(英文)分割
background-color: black;
（3）CSS的声明块:
【将多个CSS声明写在一起；声明和声明之间 通过‘;’分割】
使用'{}'将多个声明括起来，形成一个声明块。
{
background-color: black;
border:1px solid black;（如果下一行没有代码，可以不要;）
}
二、CSS选择器：
CSS声明块前面添加选择器，用来指定将这个声明块用在哪些元素上。
div {
background-color: black;
border:1px solid black;（如果下一行没有代码，可以不要;但是最好写上）
}
1.标签选择器：又叫元素选择器。使用元素名可以直接选中相同的元素。
2.类选择器： 以.开头，后面紧跟类名，不允许有空格，与元素的class属性值保持一致。一个元素可以有多个class值，每个值之间通过空格分开。
3.ID选择器：以#开头,后面紧跟ID名，不允许有空格，与元素的ID属性值保持一致。在一个文档中ID值不能重复。所以一般选择唯一元素。
4.普遍选择器：使用*来表示普遍选择器，表示选择所有元素。通常和其他选择器组合起来用。
5.层次选择器：
后代选择器：" "(空格) eg:#app p包括子元素，也包括孙子元素，子子孙孙元素。
子代选择器：">" 表示的是直接子元素。 eg:#app>p
相邻同胞选择器：下一个兄弟元素 "+" eg:.myP+* 选的是class为myP的元素的下一个兄弟元素。
一般同胞选择器："~"(英文) eg:.myP~* 选的是class为myP的元素的后面的所有兄弟元素。
6.多选择器：多个选择器组合使用。用","分割 eg:div,p,ul,.myP,#app{ }
7.嵌套选择器：用"."连接 eg:di.myDiv
8.属性选择器：在"[]"里写 [title]{color:khak1;}
[title=div2]{ }
[title^=di]{ }【属性包含title，属性值以di开头】
[title$=Div]{ }【属性包含title，属性值以Div结尾的】
[title*=i]{ }【属性包含title，属性值有i的】【模糊逼迫】
[title~=div]{ }【属性包含title，属性值必须是这个值】
9.伪类选择器：
（1）子代元素相关：
#app>*:only-child:表示app下面的独生子
以":"开头,用于其他选择器之后。指明元素在某种状态下才能选中。
only-child：只能选中长子，也就是第一个元素。
last-child:选中子元素的最后一个孩子。
nth-child(1/2/3):表示选中第1/2/3....孩子。
nth-last-child(1/2/3)：表示选中倒数第1/2/3....个孩子。
first-of-type:如果子元素有多种类型的话，会选中子元素中的每种类型的第一个元素。
last-of-type:如果子元素有多种类型的话，会选中子元素中的每种类型的最后个元素。
nth-of-type(n):如果子元素有多种类型的话，会选中子元素中的每种类型的规定的第n个元素。
nth-last-of-type(n):如果子元素有多种类型的话，会选中子元素中的每种类型的规定的倒数第n个元素。
括号里也可以写(偶数：even)(基数：odd)
<style>
ul>li:first-child {
background-color: cyan;
}
ul>li:last-child {
background-color: darkblue;
}
ul>li:nth-child(2) {
background-color: goldenrod;
}
ul>li:nth-last-child(2) {
background-color: hotpink;
}
ul>li:nth-child(even){
color:springgreen;
}
ul>li:nth-child(odd){
color: tomato;
}
ul>li:nth-child(3n){
text-align: center;
}
</style>
结果是：
（2）元素状态相关的
:hover 光标悬浮后改变样式 a:hover{ color: ;（鼠标悬停在字体上面会变色）cors}
:link a标签未被访问过的的状态 a:link{ color: ;（字的颜色）text-decoration:none;(下划线不显示)}
:visited a标签已被访问过的状态 a:visited{color: ;}（点击连接的字之后变色）
:active 活动时的状态 a:action{color: ;font-size: px;(字体大小)}（当鼠标安在上面时会改变样式）
:focus 聚焦时的状态
:checked 按钮被选中时的状态
:default 默认选中的状态
:enabled 表单项可用时的状态
:disabled 表单项禁用时的状态
:valid 通过表单验证
:invalid 不通过表单验证
:required 必填项
:optional 选填项
:in-range 在范围内
:out-of-range 不在范围内
10.伪元素选择器
以"::"开头，用于选择指定的元素，用在其他选择器之后
::after 选中之后不存在的结点，然后结合content 添加内容
h2::before{content: ;(在h2后添加) }
::before 选中之前不存在的结点，然后结合content 添加内容
h2::before{content: ;(在h2前添加) }
::first-letter 改变p文本中的第一个字符 p::first-letter{ }
::first-line 改变p文本中的第一行字符
::selection 选中的文本会改变样式
三、CSS可读性
/* CSS注释*/
可以加换行，让代码更美观，可读性更高。
【ctrl+f搜索注释】
速记写法
border
padding:内边距（上下左右统一）
padding-top
padding-right
padding-bottom
padding-left
可以直接写：
padding: 10px 20px 8px 10px;(顺序：上右下左)
margin:外边距
margin:10px 20px 8px 10px;(顺序：上右下左)
四、CSS的应用
1.HTML文档如何使用CSS
（1）外部样式表：最常用的
新建.css后缀的文件-然后在html 内通过link引入
<link rel="stylesheet" href="样式.css">
或者在style标签内通过@import "xxx.css";
<style>
@import "样式.css";
</style>
（2）内部样式表
将CSS写到HTML的style标签中，可以在不修改CSS文件的前提下修改样式，比较方便，但是不建议使用。
<style>
p{
color: chocolate;
}
</style>
（3）行类样式表
写到CSS写到元素的style属性中 只能作用于一个元素中，但是不建议这样使用。【该用还得用】
style="color:颜色"
2.CSS优先级
采取就近原则
行类样式表>内部样式表>外部样式表
特性值（只是相对概念）
style 行内样式表 1000
ID选择器 100
类选择器、属性选择器、伪类选择器 10
元素选择器和伪元素选择器 1
important:最重要的 eg:color: !important;
3.样式继承
有些规则会被子元素默认继承，有些不会。
会被继承的：font 文本 列表 cursor（鼠标类型）color等
如果不想被继承，则写代码有：color:initial;
不会被继承的：margin padding border等
如果想被继承，则写代码有：border:inherit;
跟随默认情况：
color:unset;
五、CSS中的一些单位值
1.颜色：关键字
（1）rgb()：三个参数，红绿蓝，每个值是0-255
（2） rgba()：四个参数，红绿蓝和透明度，透明度为0-1
十六进制#666：
#0-F(六个十六进制数，每俩个代表一个通道，红绿蓝)
#aaa=#aaaaaa（不能调透明度）
（3） HSL：
第一个参数；取值0-360 0：红色 120：绿色 240：蓝色
第二个参数：饱和度 0-100% 0：灰色 100%：全彩
第三个参数：亮度 0-100% 0：黑色（暗） 100%：白色（亮）
（4）HSLA：
第一个参数；取值0-360 0：红色 120：绿色 240：蓝色
第二个参数：饱和度 0-100% 0：灰色 100%：全彩
第三个参数：亮度 0-100% 0：黑色（暗） 100%：白色（亮）
第四个参数：透明度 0-100%
2. 长度宽度大小：（按F12打开盒子模型）
（1）百分比
占父元素的百分比
width:50%
（2）绝对值
px:叫像素 mm cm in(英寸)
（3）相对值单位：
em:1em和当前字体大小相同（一个M的宽度） 默认字体大小16px 1em=16px
字体不要用em font-size=20px 那1em=20px
rem:总是等于默认大小 16px
如果默认是16px 那1em=16px
六、CSS的文本样式
color:字体颜色
font-size:字体大小
font-family：字体样式：宋体等 serif sans-serif monospace cursive(楷书 英文比较草) fantasy（英文比较明显 梦幻装饰） （微软雅黑）
字体站：一次多写几个字体形式，用'',隔开。
font-style:开关斜体 italic（斜体） oblique（模拟斜体） normal(默认)
font-weight：加粗字体 取值：100-900 默认：400
bold=700（默认加粗700）
lighter(比父元素更细)
bolder(比父元素更粗)
text-align：文字排列方式 left center right
text-decoration:文本修饰（给文字加下划线）
text-decoration-line(先写需要的文字修饰)
text-decoration-style（其次在line的基础上写文字修饰的样式，就可以看见文字修饰了）
text-decoration-color（对文字修饰进一步添加颜色）
text-transform：文本变形 none
uppercase(将文本转换为大写)
lowercase(将文本转换为小写)
capitalize(将所有单词的首字母变为大写)
full-width(转换为类似于等意的字体)
text-shadow：文本阴影
font:font-style font-weight font-size/line-height font-family
line-height:行高 实现文字的垂直方向的居中
text-align:实现文字的水平方向的居中。
vertical-align:元素内容、单元格元素的垂直方向 图片
text-indent:2em 实现块元素首行文本内容缩进两个字符
七、列表样式：
有序列表 ol li
无序列表 ul li
定义列表 dl dt dd
列表的操作：导航栏 菜单栏 文字列表 卡片式布局
以上有默认的属性type与margin padding
(1)list-style-type:
(2)list-style-position:
outside
inside
(3)list-style-image:url()【下载好的图片】
(4)visibility:hidden;（占据屏幕位置空间）
hidden:隐藏
visible:显示
相当于 opacity:0;（占据屏幕位置空间）【相当于透明度】
(5)display:none;(隐藏)（不占据屏幕位置空间）
(6)overflow:hidden;(对子元素要求：超出父元素范围，将会隐藏)（会出现溢出现象）
(7)overflow的默认值是visible
scroll:会被裁剪，但浏览器会以滚动条的方式查看器全部内容。
auto:由浏览器决定 正常范围：正常展示
超出范围：以scroll形式展示。
(8)display:显示行
取值：默认：段落 margin-top margin-bottom
span:无意义的行内元素 共享在一行中 默认没有任何效果
inline：行内元素
block：块级元素
inline-block：行内块级元素 在同一行，但高度可以不同。
扫一扫
1108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
