本文详细介绍了CSS的作用、基本语法、选择器的种类和工作原理，包括标签选择器、ID选择器、类选择器等。内容涵盖了CSS的优先级规则、继承、单位、文本样式、列表样式、盒子模型、表格样式、布局方式（如浮动布局、定位布局和Flex布局）以及CSS动画和过渡效果。此外，还探讨了CSS在HTML中的使用方式，如行内样式、内联样式和外部样式。
css（前端三要素之一）
1.介绍
作用：修饰页面的
css：层叠样式表
层叠：多个样式用于同一个元素
样式：color font-size
表：css代码，css文件
选择器 样式 布局
工作原理：加载html，然后加载css，将html和css结合，创建DOM树，浏览器显示DOM
DOM：文档对象模型，树形结构， 元素、属性、文本称之为节点
2.语法
声明
属性名：属性值
css中区分大小写，对大小写比较敏感
声明块
将多个声明放在一个 { } 里面，每个声明之间使用；分隔
{
color：red；
font-size：12px；
}
规则
选择器{
color：red；
}
注释: /*注释内容*/ 快捷键 ctrl+/
作用：1.记录你的编程思路
2.便于后期代码的维护
空白：可以在css代码中添加一些空白（空格 回车），提高代码的可读性
color：red；
font-size：12px；
速写形式：
font
font-size
font-weight
padding: 1px 2px 3px 4px; 顺时针（上右下左）
padding-top
padding-left
padding-right
padding-bottom
margin
如何在html中使用css
1）行内样式
将样式写在元素的style属性中
<div style='color:red;font-size:22px;'>
缺点：结构和样式没有分离
代码的复用率低
优点：优先级高
2）内联样式
将代码写在head标签中的style标签中
<style>
选择器 {
color:red,
font-size:19px;
}
</style>
缺点：代码的复用率不高
优点：结构和样式可以分离
3）外部样式
在外部定义一个后缀名为.css的文件，在head中使用link标签引入
优点：结构和样式分离
复用率提高
选择器+规则（样式）+布局+动画
3.css选择器
作用：选择元素
核心选择器
1）标签选择器
div{
规则;
规则;
...
}
选中标签为div的所有样式
2）id选择器
#id{
规则;
规则;
...
}
3）类选择器
.class{
规则;
规则;
...
}
4）普遍选择器
*
层次选择器
1）后代选择器
ul li{
规则;
规则;
...
}
选中ul下面的所有li
2）子代选择器
.bottom>p{
规则;
规则;
...
}
选中class为bottom的直接子元素p
3）相邻同胞选择器
.jiangsu+li{
规则;
规则;
...
}
选中class为江苏这个元素的下一个兄弟元素
4）一般同胞选择器
.jiangsu~li{
规则;
规则;
...
}
选中class为江苏的所有兄弟元素
多选择器
1）逗号选择器
h1,h2,h3,.test{
规则;
规则;
...
}
选中h1、h2、h3、class为test的元素
2）组合选择器
a.baidu{
规则;
规则;
...
}
选中class为baidu的a标签
属性选择器
[atrr] 选中具有属性atrr的元素，不管属性的值为多少
[atrr=val] 选中具有atrr属性，并且值为val
[atrr ^= val] 选中具有atrr属性，并且值以val开头
[atrr $= val] 选中具有atrr属性，并且值以val结尾
[atrr *= val] 选中具有atrr属性，并且值包含val
[atrr ~= val] 选中具有atrr属性，并且其中一个值为val
伪类选择器
子代元素相关的伪类选择器
ul:first-child{
规则;
规则;
...
}
选中ul的第一个孩子
ul:last-child{
规则;
规则;
...
}
选中ul的最后一个孩子
ul:nth-child(参数){
规则;
规则;
...
}
参数的取值：
1.数字
2.关键字(odd=>奇数 even=>偶数)
选中ul的参数值的孩子
元素状态相关的伪类选择器
:hover 鼠标悬停在上面时
:link
:visited
伪元素选择器
::after 选中之后不存在的元素
::before 选中之前不存在的元素
4.优先级
1）权重(特性值) 比较权重
2）权重一样的话，后面的样式会覆盖前面的样式
3) !important
通过4个特性值来量化一个选择器
Thousands
声明在元素的style属性中。特性值记为1000
Hundreds
包含在一个选择器中的所有ID选择器，特性值记为100
Tens
包含在一个选择器中的所有类选择器，属性选择器，伪类选择器，特性值记为10
Ones
包含在一个选择器中的所有元素选择器，伪元素选择器，特性值记为1
5.继承
CSS中有些规则将会默认被子元素继承，有些则不会。
可继承属性：font系列属性、文本系列属性、列表系列属性、cursor、visibility等
不可继承属性：margin、padding、border等
CSS提供了三个特殊的值用来处理继承
inherit 继承父元素的样式
initial 不继承。应用浏览器的默认样式
unset 不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。
6.单位
颜色
关键字 red、pink、teal
十六进制的值 #ffffff(白) #cccccc(灰色) #ff0000(红色) #fff
rgb函数 rgb(0,0,0)白 rgb(0~255,0~255,0~255)
rgba函数 rgba(0~255,0~255,0~255,0~1)
hsl函数
hsla函数
长度
绝对单位
px 像素
相对单位
em 相对于当前元素的字体大小
div font-size：12px 1em=12px width=10em
rem 相对于html上的字体大小
div html：10px 1rem=10px
%
选择器+样式(文本相关、字体、盒子、表格样式、列表样式)
7.文本相关的样式
文字相关的样式(可以被继承)
color 给文本指定颜色(关键字、十六进制的值、rgb函数、rgba函数)
font-family 给文本设置字体(字体栈、字体族)
serif 有衬线的字体,笔画结尾有特殊的装饰线或衬线
sans-serif 无衬线的字体，笔画结尾是平滑的字体
monospace 等宽字体，用于代码，字体中每个字宽度相同
cursive 草书，这种字体有的有连笔，有的还有特殊的斜体效果。
fantasy 梦幻装饰字体 ，具有特殊艺术效果的字体
网络字体
@font-face{
font-family: myfont;
src: url(./FZYangNSXSJW.TTF);
}
p{
font-family: myfont;
}
font-style 用于打开和关闭斜体
normal 【默认】正常字体，关闭斜体
italic 斜体
oblique 模拟斜体
font-weight 字体的粗细程度
normal 默认】正常,400
bold 加粗字体,700
lighter 设置当前元素字体比父元素更细
bolder 设置当前元素字体比父元素更粗
100–900 数值类型的粗细程度（值越大字体越粗）
text-align 文本的排列方式
left 左对齐
center 居中
right 右对齐
text-transform 允许字体变形
none 防止任何改变
uppercase 将文本转换为大写
lowercase 将文本转换为小写
capitalize 将所有单词第一个字母转换为大写
full-width 转换为类似于一个等宽字体
text-decoration (line style color)
text-decoration-line
none 取消所有文本修饰
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
text-decoration-style
solid(实线)
wavy(波浪线)
dashed(虚线)
dotted(点状线)
double(双实线)
Text-decoration-color
关键字、十六进制的值、rgb函数、rgba函数
text-shadow (h-shadow v-shadow blur color) 文本的阴影
none 取消所有阴影
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色。参阅 CSS 颜色值
字体图标库
iconfont
8.列表样式
list-style
list-style-type 列表类型
none 没有类型
disc 一个实心的小黑圆圈
circle 一个空心的小圆圈
square 一个块
decimal 数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
decimal-leading-zero 十进制的值
list-style-image
none 没有图片
url() 图片的路径
list-style-position
outside [默认值]显示在主块的外部
inside 显示在主块的内部
9.其他样式
cursor 调整光标悬浮到链接上的时候光标的形状
url 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。鼠标样式栈 url('./images/zhankai.png'), help
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标
pointer 手型
crosshair 十字交叉
wait 等待
help 帮助
move 移动
text 文本
line-height 设置文本的行高
给元素设置行高=盒子的高度，那么盒子中的文本将垂直居中
一般用相对单位
outline 环绕边框
类似于盒子的边框，但是不占空间
display 控制盒子的显示方式
inline 行内显示，宽高无效(行内元素)
block 块级显示，宽高有效（块级元素）
inline-block 行内显示同时宽高有效（行内块）
none 不显示，不占据屏幕空间（隐藏）
visibility 显示与隐藏
hidden 隐藏，占据屏幕的空间
visible 显示
opacity 透明度 0~1之间的值
overflow 溢出部分的处理
hidden 超出内容隐藏
auto 超出产生滚动条
scroll 滚动条
10.盒子相关的样式
每一个元素都是一个盒子
width 宽度
height 高度
padding 内边距
padding-top
padding-right
padding-bottom
padding-left
margin 外边距
margin-top
margin-right
margin-bottom
margin-left
border 边框
border-width 为元素指定边框的宽度
关键字 thin、medium、thick
单位 px、em
border-style 为元素指定边框样式
none 不设置
hidden 隐藏
dotted 显示一系列的点
dashed 显示一系列小线段
solid 显示一条单一的实心直线
double 显示两条实心直线
groove 边框雕刻效果(与ridge相反)
ridge 与groove相反
inset 嵌入式边界框(与outset相反)
outset 突出的边界框
…
border-color 为元素指定边框颜色
关键字 十六进制 RGB HSL RGBA HSLA
border-radius 为元素指定圆角
background 为元素设置背景
background-color 为元素设置一种颜色
关键字 十六进制 RGB HSL RGBA HSLA
background-image 为元素设置一个背景图片
none
url
background-size 设置背景的大小
cover 背景铺满整个屏幕，（尽量不要使用大图覆盖小范围）
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。按照背景定位区域的最大边扩展。
contain 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。按照背景定位区域的最小边扩展，如果不重复，可能背景定位区域有一部分没有背景图片。
百分比
绝对值
background-repeat 设置背景图片的重复方式
repeat 为了覆盖整个背景范围，背景图片尽可能多的重复，在背景边缘切割(clipping)最后一个图片以使用整个背景范围。
repeat-x x方向平铺一行
repeat-y y方向平铺一行
no-repeat 不重复
background-origin 设定背景的起始点
padding-box 默认，背景图片从内边距的外边缘开始绘制
border-box 背景图片从边框的外边缘开始绘制
content-box 背景图片从内容区开始绘制
background-clip 设定背景的覆盖范围
border-box 默认，背景位于边框以内
padding-box 背景位于内边距以内
content-box 背景位于内容区
background-attachment 设置背景图片的固定点
scroll 默认值，背景图像会随着页面其余部分的滚动而移动，背景固定在自身元素上，背景图相对于元素固定，背景随页面滚动而移动，即背景和元素绑定。
fixed 背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了视口区上。
background-position 设置为背景图像初始位置，可以实现图片精灵
background 背景设置的速记写法
11.盒子模型
所有的元素都可以看作一个盒子
1）内容盒子(w3c盒子、标准盒子)
box-sizing：content-box
width=内容的宽度
2）边框盒子(怪异盒子、IE盒子)
box-sizing:border-box
width=内容+padding+border
12.元素的默认样式
body 默认有一个外边距
a
p
h1~h6
ul
13.表格样式
border-collapse 指定表格的边框是合并还是分开
separate 【默认值】分开模式，表示相邻的两个格子都有独立边框
collapse 合并模式，表示相邻的两个格子共享边框
caption-side 指定caption坐落在表格的哪个位置上
top 标题位于表格的上方
bottom 标题位于表格的下方
left 标题位于表格的左侧
right 标题位于表格的右侧
14.布局
1）默认文档流
1）元素显示的顺序和代码的顺序是一致的
2）块级元素独占一行空间，默认宽度为父元素的100%，高度由内容或者子元素决定
3）行内元素共享一行空间，默认宽高都由内容决定
2）浮动布局
float(如果一个元素添加float属性，那么这个元素就会成为一个浮动元素)
left 向左浮动
right 向右浮动
none 不浮动
inherit 浮动方式继承父元素
浮动元素的特点：
1）当一个元素是浮动元素的时候，他会失去对父元素的支撑
2）清除浮动
a.给父元素添加overflow：hidden
b.使用伪元素,给伪元素添加clear：both
3）脱离文档流
3）定位布局
position
static 静态（默认） 非定位元素
relative 相对定位 定位元素
相对的是元素原先的位置，
不脱离文档流(还占据原先的位置),宽度默认还是100%，
可以覆盖在其他元素上
absolute 绝对定位 定位元素
相对的是距离它最近的父定位元素的位置，如果没有父定位元素，那么它相对于浏览器视口
脱离文档流
fixed 固定定位 定位元素
相对于浏览器视口
脱离文档流
不会随着浏览器的滚动而滚动
sticky 粘滞定位 定位元素
不脱离文档流
使用top/right/bottom/left设置一个过渡点，当超过这个过渡点的时候，就会体现fixed固定在页面上
只有定位元素才可以使用top、right、bottom、left、z-index默认值为0
脱离文档流的特点：默认宽度由内容决定，不占据原先的位置（原先的位置被其他元素抢占）
4） flex布局(伸缩盒布局)
1.比较：
传统布局
兼容性好
布局繁琐
局限性，不能在移动端很好的布局
flex弹性布局
操作方便，布局极为简单，移动端应用很广泛
pc端浏览器支持情况较差
IE11或更低版本，不支持或部分支持
2.原理
任何一个容器都可以指定为flex布局
采用flex布局的元素，称之为flex容器，它的所有子元素称之为flex项目
容器默认存在两根轴：水平的主轴和垂直的交叉轴
当我们为父盒子设为flex布局后，子元素的float、clear属性即将失效
给父元素设置display：flex，达到控制子元素的目的
3.常见父项(容器)属性
flex-direction：设置主轴的方向
row(默认值):主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿
justify-content:设置主轴上的子元素排列方式
flex-start 【默认值】左对齐
flex-end 右对齐
center 居中
space-around 两端对齐，项目之间的间隔都相等
space-between 每个项目两侧间隔相等
所以，项目之间间隔比项目与边框的间隔大一倍
flex-wrap：设置子元素是否换行
nowrap(默认): 不换行
wrap: 换行，第一行在上方
wrap-reverse: 换行，第一行在下方
align-content：设置侧轴上的子元素的排列方式(多行)
flex-start: 与交叉轴的起点对齐
flex-end： 与交叉轴的终点对齐
center： 与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间平均分布
space-around： 每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值)
align-items:设置侧轴上的子元素的排列方式(单行)
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐
stretch（默认值）：如果项目没设置高度或设auto，将占满整个容器
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4.项目的属性
order
该属性定义了项目的排列顺序，数值越小，排列越靠前，默认0
flex-grow
该属性定义了项目的放大比例，默认0，即如果存在剩余空间，也不放大
flex-shrink
该属性定义了项目的缩小比例，默认为1，即如果剩余空间不足，该项目将缩小
flex-basis
该属性定义了在分配多余空间之前，项目占据的主轴空间
flex
flex-grow、flex-shrink、flex-basis的速写形式
15.css动画
定义动画：使用@keyframes 定义动画，关键帧可以使用关键字from~to，也可以使用0%~100%
配置动画：
animation-name 动画的名字
@keyframes定义的动画的名字
animation-duration 动画持续的时间
单位 s、ms 默认0s
animation-iteration-count 动画迭代次数
数字 默认值为1，可以为小数，不可以为负数
infinite(无限循环)
animation-delay 动画延迟执行时间
animation-direction 动画方向
normal (默认)动画按照正常顺序执行
reverse 反转 最后一帧作为第一帧
alternate 顺序交替反转
alternate-reverse
animation-fill-mode 动画填充模式
none 默认
forwards 在动画结束后，目标将保留在执行期间所遇到的最后一个关键帧所设置的计算值
backwards 在延迟时间内，目标将保留在执行期间所遇到的第一个关键帧所设置的计算值。
both 向前和向后填充模式都被应用。
animation-timing-function 动画的速度曲线
ease (默认)先快后慢
linear 线性，匀速
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 先慢后快再慢
第三动画库
1.安装
先把源码下载到本地库
2.使用
<div class="box animate__animated animate__swing">hello</div>
16.css过渡
div {
transition: <property> <duration> <timing-function> <delay>;
}
transition
transition-property 过渡属性
transition-duration 持续时间
transition- timing-function 时间曲线
transition-delay 过渡延迟
transition 速写形式
过渡和动画的区别：
1.过渡需要触发
2.不是所有的属性都可以过渡
17.css变形
transform 属性
rotate(旋转)
rotateX (angle)
绕X轴旋转，例如单杠运动 30deg
rotateY (angle)
绕Y轴旋转，例如钢管舞运动
rotateZ (angle)
绕Z轴旋转，例如旋转盘。
rotate (angle)
与rotateZ()一致。
skew(倾斜)
skewX(deg)
skewY(deg)
skew(x,y)
scale(缩放)
scale(x,y) 隐藏元素scale(0,0)不占据空间
translate(移动)
translate(x,y)
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
