CSS的基本介绍
css（Cascading style sheets）：层叠样式表
作用：给页面中的html标签设置样式
css标签写在style标签中，style标签一般写在head标签里面，title标签下面
css常见引入方式
<title>引入方式一（内嵌式）</title>
<style>
p{
/* 文字颜色 */
color: red;
/* 文字大小 */
font-size: 30px;
/* 背景颜色 */
background-color: aqua;
/* 宽度 */
width: 500px;
/* 高度 */
height: 500px;
}
</style>
</head>
<body>
<p>css标签认识</p>
</body>
内嵌式：css写在style里，作用在当前页面（小案例）
外联式：css写在单独的css文件中，通过link引入，作用多个页面（项目中）
行内式：css写在标签的style属性中，作用在当前页面（配合js使用）
基本选择器
结构：标签名{css属性名：css属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：文章来源：https://www.toymoban.com/news/detail-805699.html
标签选择器选择的是一类标签，而不是单独的一个
标签选择器无论嵌套关系有多深，都能找到相应的标签
类选择器
结构：.类名{css属性名：css属性值；}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
所有标签上都有class属性，class属性的属性值成为类名
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签
id选择器
结构：#id属性值{css属性名：css属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是惟一的，不可重复
一个标签只能与一个id属性值
一个id选择器只能选中一个标签
类与id的区别
class类名与id属性值的区别
class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
类选择器与id选择器的区别
类选择器以.开头
id选择器以#开头
实际开发情况
类选择器用的最多
id一般配合js使用，除非特殊情况，否则不要使用id设置样式
实际开发中会遇到冗余代码的抽取（可以将一些公共的代码抽取到一个公共的类中去）
通配符选择器
结构：*{css属性名：css属性值；}
作用：找到页面中所有的标签，设置样式
注意点：
开发中使用极少，只会在特殊情况下才会用到
在基础小页面中可能会用于去除默认的margin和padding
字体大小
属性名：font-size
取值：数字+px
注意点：
谷歌浏览器中默认文字大小是16px
单位需要设置，否则无效
font-size: 50px;字体粗细
属性名：font-weight
取值：
关键字：
正常：normal
加粗：bold
纯数字：100~900的整百数
正常：400
加粗：700
注意点：
不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中：正常/加粗两种取值使用最多
font-weight:bold;
font-weight:700;字体样式（是否倾斜）
属性名：font-style
取值：
正常（默认值）：normal
倾斜：italic
font-style:italic;常见字体
无衬线字体（sans-serif）
特点：文字笔画粗细均匀，并且首尾无装饰
场景：网页中大多采用无衬线字体
常见字体：黑体、Arial
衬线字体（serif）
特点：文字笔画粗细不均，并且首尾有笔锋装饰
场景：报刊书籍中应用广泛
常见字体：宋体、Times New Roman
等宽字体（monospace）
特点：每个字母或文字的宽度相等
场景：一般用于程序代码编写，有利于代码的阅读和编写
常见字体：Consolas、fira code
字体系列font-family
属性名：font-family
常见取值：具体字体1，具体字体2，具体字体3。。。字体系列
具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等·······
字体系列：sans-serif、serif、monospace等·······
渲染规则：
从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意点：
如果字体名称存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
系统默认字体：
window：微软雅黑
macOS：苹方
font-family: 宋体;
font-family: 甲骨文,隶书,微软雅黑,楷体,宋体,sans-serif;
样式层叠问题
问题：给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？
结果：如果给一个标签设置了相同的样式，此时样式会层叠（覆盖），写在最下面的会生效
tip：
css（Cascading style sheets）层叠样式表
所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖
字体font相关属性的连写
属性名：font
取值：font：style weight size family；
顺序要求：swsf（稍微舒服）
省略要求：只能省略前两个，如果省略了相当于默认值
注意点：如果需要同时设置单独和连写
要么把单独的样式写在连写下面
要么把单独的样式写在连写里面
文本缩进
属性名：text-indent
取值：
数字+px
数字+em（推荐：1em=当前标签的font-size大小）
文本水平对齐
属性名：text-align
取值：
left：左对齐
center：居中对齐
right：右对齐
注意点：如果让文本水平居中，text-align属性给文本所在标签（父本的父元素）设置
文本修饰
属性名：text-decoration
取值：
underline：下划线（常用）
line-through：删除线（不常用）
overline：上划线（几乎不用）
none：无装饰线（常用）
注意点：开发中会使用text-decoration：none；清除a标签默认的下划线
水平居中的方法总结
text-align：center；能让那些元素水平居中？
文本
span标签、a标签
input标签、img标签
注意点：如果需要让以上元素水平居中，text-align：center；需要给以上元素的父元素设置
如果需要让div、p、h（大盒子）水平居中？
可以通过margin：0 auto；实现
注意点：
如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可
margin：0 auto；一般针对固定宽度的盒子，如果大盒子没有设置宽度，此时会默认沾满父元素的宽度
<title>Document</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: skyblue;
/* text-align: center; */
/* margin: 0 auto; */
}
.son {
width: 100px;
height: 100px;
background-color: orange;
margin: 0auto;
}
</style>
</head>
<body>
<divclass="father">
<divclass="son"></div>
</div>
</body>行高
行高=上间距+文本高度+下间距
作用：控制行间距（给上一行和下一行增加间距）
属性名：line-height
取值：
数字+px
倍数（当前标签font-size的倍数）
应用：
让单行文本垂直居中可以设置line-height：文字父元素高度
网页精准布局时，会设置line-height：1 可以取消上下间距
行高与font连写注意点：
如果同时设置了行高和font连写，注意覆盖问题
font：style weight size/line-height family；
<style>
.box {
width: 400px;
height: 400px;
background-color: skyblue;
font-size: 20px;
line-height: 40px;
/* 1、通过行高设置单行文本的垂直居中效果 */
line-height: 400px;
/* 2、在网页精准布局的时候，会设置行高为1取消上下的间距 */
/* line-height: 1; */
/* 2、可以让单行文本在盒子中垂直居中 */
/* line-height: 400px; */
/*
font相关属性：
font:style weight size/line-height family
*/
font: italic70020px/400px 楷体;
/* line-height: 400px; */
}
</style>
</head>
<body>
<divclass="box">
我是真的帅<br>
我是真的是太帅了
</div>
</body>颜色常见取值
属性名：
文字颜色：color
背景颜色：background-color
属性值：
关键词（预定义的颜色名）：red、green···
rgb表示法（红绿蓝三原色。每项取值范围：0-255）：rgb（255,255,255）···
rgba表示法（红绿蓝三原色+a表示透明度，取值范围：0-1）：rbgd（255,255,255,0.5）···、简写可为rbgd（255,255,255,.5）
十六进制表示法（#开头，将数字转成十六进制表示）：#000000···、简写#000···
注意点：实际开发中会直接使用测量工具直接得到颜色，不需要前端自己设计颜色，直接复制粘贴即可
后代选择器：空格
作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2 {css}
结果：在选择器1所找到标签的后代（儿子、孙子、重孙子···）中，找到满足选择器2的标签，设置样式
注意点：
后代包括：儿子、孙子、重孙子·······
后代选择器中，选择器与选择器之间用空格隔开
子代选择器：>
作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1>选择器2 {css}
结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
注意点：
子代只包括：儿子
子代选择器中，选择器与选择器之间用>隔开
并集选择器：，
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1 ， 选择器2 {css}
结果：找到选择器1和选择器2选中的标签，设置样式
注意点：
并集选择器中的每组选择器之间通过，分隔
并集选择器中的每组选择器可以是基础选择器或者是复合选择器
并集选择器中的每组选择器通常一行写一个，提高代码的可读性
交集选择器：紧挨着
作用：选中页面中同时满足多个选择器的标签
选择器语法：选择器1选择器2 {css}
结果：（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
注意点：
交集选择器中的选择器之间是紧挨着的，没有分隔
交集选择器中如果有标签选择器，标签选择器必须写在最前面
emmet语法
作用：通过简写语法，快速生成代码
语法：类似于刚刚学习的选择器写法
标签名：div
类选择器：.red
id选择器：#one
交集选择器：p.red#one
子代选择器：ul>li
内部文本：ul>li{我是文本}
创建多个：ul>li*3
hover伪类选择器
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器：hover {css}
注意点：伪类选择器选中的元素的某种状态
<style>
a {
text-decoration: none;
}
a:hover {
color: aqua;
text-decoration: underline;
}
.box {
width: 100px;
height: 100px;
background-color: blueviolet;
}
.box:hover {
width: 500px;
height: 500px;
background-color: skyblue;
}
</style>
</head>
<body>
<ahref="#">此a标签设置hover效果</a>
<divclass="box"></div>
</body>背景颜色
属性名：background-color（bgc）
属性值：颜色取值：关键字、rgb表示法、rgba表示法、十六进制·······
注意点：
背景颜色默认是透明：rgba（0,0,0,0），transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
背景图片
属性名：background-image（bgi）
属性值：background-image：url（‘图片的路径’）；
注意点：
背景图片中url可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
背景平铺
属性名：background-repeat（bgr）
属性值：
repeat：（默认值）水平和垂直方向都平铺
no-repeat：不平铺
repeat-x：沿着水平方向（x轴）平铺
repeat-y：沿着垂直方向（y轴）平铺
背景位置
属性名：background-position（bgp）
属性值：background-position：水平方向位置 垂直方向位置；
方位名词（最多只能表示9个位置）：
水平方向：left、center、right
垂直方向：top、center、bottom
数字+px（坐标）：
坐标系：原点（0,0）{盒子的左上角}、x轴{水平向右}、y轴{垂直向下}
操作：将图片左上角与坐标点重合即可
注意点：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
背景相关属性连写
属性名：background（bg）
属性值：单个属性值的合写，取值之间以空格隔开
书写顺序：background：color image repeat position；
省略问题：
可以按照需求省略
特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：url（）；
注意点：
如果需要设置单独的样式和连写
①要么把单独的样式写在连写下面
②要么把单独的样式写在连写里面
img标签和背景图片的区别
需求：需要在网页中展示一张图片的效果？
直接写上img标签即可
img标签是一个标签，不设置宽高会默认以原来的尺寸显示
div标签+背景图片
需要设置div的宽高，因为背景图片只是装饰的css样式，不能撑开div标签
块级元素
属性：display：block
显示特点：
独占一行（一行只能显示一个）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高
代表标签：
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer·····
行内元素
属性：display：inline
显示特点：
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高
代表标签：
a、span、b、u、i、s、strong、ins、em、del········
行内块元素
属性：display：inline-block
显示特点：
一行可以显示多个
可以设置宽高
代表标签：
input、textarea、button、select····
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示是inline
元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
语法：
display：block；转换成块级元素（常用）
display：inline-block；转换成行内块元素（常用）
display：inline；转换成行内元素（少用）
HTML嵌套规范注意点
块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等
p标签中不要嵌套div、p、h等块级元素
<p>
<div>
</div>
</p>
//不规范的写法。
//浏览器会改成规范的，且显示出来
a标签内部可以嵌套任意元素
a标签不能嵌套a标签
css的继承性
特性：子元素有默认继承父元素样式的特点（子承父业）
可以继承的常见属性：
color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height
·········
注意点：可以通过调式工具判断样式是否可以继承
好处：可以在一定程度上减少代码
常见应用场景：
可以直接给ul设置list-style：none；属性，从而去除列表默认的小圆点样式
直接给body标签设置统一的font-size，从而统一不同浏览器默认的字体大小
继承失效的特殊情况：如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
a标签的color会继承失效
h系列标签的font-size会继承失效
div的高度不能继承，但是宽度有类似于继承的效果
css的层叠性
特性：
给一个标签设置不同的样式，此时样式会层叠叠加，会共同作用在标签上
给一个标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效
注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
css的优先级
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式：
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < ！important
注意点：
！important写在属性值的后面，分号的前面
！important不能提升继承的优先级，只要是继承优先级就是最低
实际开发中不建议使用！important
权重叠加计算
场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终那个选择器优先级最高会生效
权重叠加计算公式：（每一位之间不存在进位）
（0,0,0,0）分别是：第一级、第二级、第三级、第四级
复合选择器中：行内样式个数、id选择器个数、类选择器个数、标签选择器个数
比较规则：
先比较第一级数字，如果比较出来了，之后的不用看
如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的不用看
·········
如果最终所有的数字都相同，表示优先级相同，则比较层叠性（最下面的那个会生效）
注意点：！important如果不是写在继承里的，则权重最高
权重计算题解题步骤：
先判断选择器是否能直接选中标签，如果不能直接选中——> 是继承，优先级最低——> 直接pass
通过权重计算公式，判断谁权重最高
如果全是继承，则根据子承父业，找到他的父类，看那个能直接选中他的标签
注意点：
实际开发中选择选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己为难自己
查错流程
遇到样式不出来时，学会通过调试工具找错
查错步骤：
右击检查（f12）
哪里不会点哪里
在elements中找到对应的元素
看style中有没有自己设置的选择器
如果没有，一般是选择器写错了
常见原因：
选择器单词拼错
选择器结构写错
如果选择器有，但样式没有出来
看是否有删除线（没生效）
常见原因：
样式被注释
样式被覆盖
看是否有小三角形（报错）
常见原因：
属性值后没有分号
出现中文标点
属性名或者属性值单词拼错
pxcook的基本使用
通过软件打开设计图
打开软件
拖拽入设计图
新建项目
常用快捷键
放大设计图：Ctrl+ +
缩小设计图：Ctrl+ -
移动设计图：空格按住不放，鼠标拖动
常用工具
量尺寸
吸颜色
从psd文件中直接获取数据
切换到开发界面，直接点击获取数据
盒子模型
概念：
页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
盒子模型：css中规定每个盒子分别由内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型
记忆：可以联想现实中的包装盒
内容的宽度和高度
作用：利用width和height属性默认设置是盒子内容区域大小
属性：width、height
常见取值：数字+px
边框（border）
单个属性
作用：给设置边框粗细、边框样式、边框颜色效果
单个属性：
边框粗细：border-width，属性值：数字+px
边框样式：border-style，属性值：实线solid、虚线dashed、点线dotted
边框颜色：border-color，属性值：颜色取值
连写
属性名：border
属性值：单个取值的连写，取值之间以空格隔开
border：10px solid red；
快捷键：bd
单方向设置
场景：只给盒子的某个方向单独设置边框
属性名：border-方位名词
属性值：连写的取值
盒子实际大小初级计算公式
需求：盒子尺寸400*400，背景绿色，边框10px 实线 黑色，如何完成？
注意点：
设置width和height是内容的宽高
设置border会把盒子撑大
盒子的实际大小（宽度）=左边框+内容的宽度+有边框=10+400+10=420
所以现在是420，要求是400，多出了20px
手动减去计算出多余部分，在内容中减去即可
盒子实际大小初级计算公式：
盒子宽度=左边框+内容宽度+右边框
盒子高度=上边框+内容高度+下边款
解决：当盒子被border撑大后，如何满足需求？
解决：计算多余大小，手动在内容中减去（手动内减）
内边距（padding）
取值
作用设置边框与内容区域之间的距离
属性名：padding
常见取值：
一个值
padding：10px；
上右下左都设置为10px
两个值
padding：10px 20px；
上下设置为10px，左右设置为20px
三个值
padding：10px 20px 30px；
上设置为10px，左右设置为20px，下设置为30px
四个值
padding：10px 20px 30px 40px；
上设置为10px，左设置为20px，下设置为30px，左设置为40px
记忆规则：从上开始赋值，然后按顺时针赋值，如果设置赋值的，看对面。（上右下左）
单方向设置
场景：只给盒子的某个方向单独设置内边距
属性名：padding-方位名词
属性值：数字+px
外边距（margin）
取值
作用：设置边框以外，盒子与盒子之间的距离
属性名：margin
常见取值：
一个值
margin：10px；
上右下左都设置为10px
两个值
margin：10px 20px；
上下设置为10px，左右设置为20px
三个值
margin：10px 20px 30px；
上设置为10px，左右设置为20px，下设置为30px
四个值
margin：10px 20px 30px 40px；
上设置为10px，右设置为20px，下设置为30px，左设置为40px
记忆规则：从上开始赋值，然后顺时针赋值，如果没有设置赋值，看对面的（上右下左）
单方向设置
场景：只给盒子的某个方向单独设置外边框
属性名：margin-方位名词
属性值：数字+px
该属性也可以让盒子移动
margin-top: 20px;
/* 让当前盒子往下移动 */
margin-left: 20px;
/* 让当前盒子往右移动 */
margin-bottom: 20px;
/* 让下面的盒子往下移动 */
margin-right: 20px;
/* 让右边的盒子往右移动 */清除默认内外边距
场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置
比如：body标签默认由margin：8px
比如：p标签默认有上下的margin
比如：ul标签默认有上下的margin和padding-left
·············
解决方法：
找到有边距的标签一起设置margin：0；padding：0；（淘宝）
直接使用通配符设置margin：0；padding：0；（京东）
外边距正常情况
场景：水平布局的盒子，左右盒子的margin正常，互不影响
结果：最终两者距离为左右margin的和
外边距折叠现象-合并现象
场景：垂直布局的块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：避免就好
只给其中一个盒子设置margin即可
外边距折叠现象-塌陷现象
场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
结果：导致父元素一起往下移动
解决方法：
给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
父元素里设置文本内容
给父元素设置overflow：hidden
转换成行内元素display：inline-block；
设置浮动float：left；
行内元素的margin和padding无效情况
场景：给行内元素设置margin和padding时
结果：
水平方向的margin和padding布局中有效
垂直方向的margin和padding布局中无效
不会撑大盒子的特殊情况
不会撑大盒子的特殊情况（块级元素）：
如果子盒子没有设置宽高，此时宽高默认是父盒子的宽高
（块级元素不设置宽高，默认占满父元素一行）
此时给子盒子设置左右的padding或者左右的border，不会撑大子盒子
结构伪类选择器
目标：能够使用结构伪类选择器在HTML中定位元素
作用与优势：
作用：根据元素在HTML中的结构关系查找元素
优势：减少对HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素
选择器
E：first-child{} 匹配父元素中的第一个子元素，并且是E元素
E：last-child{} 匹配父元素中的最后一个子元素，并且是E元素
E：nth-child（n）{} 匹配父元素中的第n个子元素，并且是E元素
E：nth-last-child（n）{} 匹配父元素中的倒数第n个子元素，并且是E元素
n的注意点
n为：0、1、2、3、4、5、6·············
通过n可以组成常见公式
偶数：2n、even
奇数：2n+1、2n-1、odd
找到前5个：-n+5
找到从第5个往后：n+5
n要写在前面，写后面浏览器不能解析（如：-n+5不能写成5-n）
查找单个
<style>
/* 1、找到第一个子元素，并且为li标签 */
li:first-child {
background-color: blue;
}
/* 2、找到最后一个子元素，并且为li标签 */
li:last-child {
/* background-color: orange; */
}
/* 3、找到第3个子元素，并且为li标签 */
li:nth-child(3) {
/* background-color: pink; */
}
/* 4、找到倒数第3个子元素，并且为li标签 */
li:nth-child(8) {
/* background-color: green; */
}
li:nth-last-child(3) {
/* background-color: red; */
}
</style>
</head>
<body>
<!-- ul>li{我是第$个li}*10 -->
<ul>
<!-- <div>私生子</div> -->
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
</body>查找多个
<style>
/* 1、找到偶数个li------------------------ */
li:nth-child(2n) {
/* background-color: orange; */
}
li:nth-child(even) {
/* background-color: blue; */
}
/* 2、找到奇数个li------------------------ */
li:nth-child(2n+1) {
/* background-color: orange; */
}
li:nth-child(2n-1) {
/* background-color: blue; */
}
li:nth-child(odd) {
/* background-color: pink; */
}
/* 3、找到前5个------------------------ */
li:nth-child(-n+6) {
/* background-color: orange; */
}
/* 4、找到从第5个往后------------------------ */
li:nth-child(n+5) {
background-color: red;
}
</style>
</head>
<body>
<!-- ul>li{我是第$个li}*10 -->
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
</body>
<style>
/* 错误写法 ：都是li标签中的第一个子元素，因此都满足此写法、所有都会变红*/
li a:first-child {
/* color: red; */
}
/* 正确写法：不是第一个a标签，而是要找到第一个li里面的第一个a标签 */
li:first-child a {
color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#">这是第1个a标签(要变红）</a></li>
<li><a href="#">这是第2个a标签</a></li>
<li><a href="#">这是第3个a标签</a></li>
<li><a href="#">这是第4个a标签</a></li>
<li><a href="#">这是第5个a标签</a></li>
<li><a href="#">这是第6个a标签</a></li>
<li><a href="#">这是第7个a标签</a></li>
<li><a href="#">这是第8个a标签</a></li>
</ul>
</body>nth-of-type
选择器：E：nth-of-type（n）{} 只在父元素的同类型（E）子元素范围中，匹配第n个
区别：
：nth-child 直接在所有孩子中数个数
：nth-of-type 先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数
伪元素
目标：能够使用伪元素在网页中创建元素
伪元素：一般页面中的非主体内容可以使用伪元素
区别：
元素：HTML设置的标签
伪元素：由css模拟出的标签效果
种类：
：：before 在父元素内容的最前添加一个伪元素
：：after 在父元素内容的最后添加一个伪元素
注意点：
必须设置content属性才能生效
伪元素默认是行内元素
<style>
.father {
width: 300px;
height: 300px;
background-color: skyblue;
}
.father::before {
/* 必加的属性 */
content: '我是一个伪元素';
/* 转换显示方式 */
display: block;
width: 100px;
height: 100px;
background-color: orange;
}
.father::after {
/* 必加的属性 */
content: '我是一个伪元素';
/* 转换显示方式 */
display: block;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="father">
我是father内部的内容
</div>
</body>标准流
目标：能够认识标准流的默认布局及其特点
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
块级元素：从上往下，垂直布局，独占一行
行内元素或行内块元素：从左往右，水平布局，空间不够自动折行
<style>
div {
width: 200px;
height: 200px;
background-color: orange;
}
span {
background-color: skyblue;
}
</style>
</head>
<body>
<div>我是块级元素div</div>
<div>我是块级元素div</div>
<div>我是块级元素div</div>
<span>我是行内元素span</span>
<span>我是行内元素span</span>
<span>我是行内元素span</span>
<span>我是行内元素span</span>
<span>我是行内元素span</span>
<span>我是行内元素span</span>
<span>我是行内元素span</span>
<span>我是行内元素span</span>
<span>我是行内元素span</span>
<span>我是行内元素span</span>
</body>浮动
浮动的作用
早期作用：图文环绕
现在作用：网页布局
场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右
浮动的代码
属性名：float
属性值：
left：左浮动
right：右浮动
<style>
img {
/* 左浮动 */
float: left;
/* 图片与文字之间的距离 */
margin-right: 20px;
}
.left {
/* 左浮动 */
float: left;
width: 300px;
height: 300px;
background-color: pink;
}
.right {
/* 右浮动 */
float: right;
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 1、图文环绕 -->
<img src="./images/1.jpg" alt="">
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1] 。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1] 。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
<!-- 2、网页布局 → 水平布局 -->
<div class="left">左护法</div>
<div class="right">右护法</div>
</body>浮动的特点
浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
相当于从地面飘到了空中
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.red {
background-color: red;
}
.green {
/* 右浮动 */
float: right;
background-color: green;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素会受到上面元素边界的影响
浮动元素有特殊的显示效果
一行可以显示多个
可以设置宽高
注意点：浮动元素不能通过text-align：center；或者margin：0 auto；让浮动元素本身水平居中
书写网页导航的步骤
网页布局流程：从上往下，从外往里
清除默认的margin和padding
找到ul，去除小圆点
找到li标签，设置浮动让li在一行中显示
找到a标签：设置宽高，a标签默认是行内元素，默认不能设置宽高？
方法一：给a标签设置display：inline-block；
方法二：给a标签设置display：block；
方法三：给a标签设置float：left；
清除浮动
含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级元素
原因：子元素浮动后脱标，不占位置
目的：需要父元素有高度，从而不影响其他网页元素的布局
清除浮动的方法
直接设置父元素的高度
特点
优点：简单粗暴，方便
缺点：有些布局中不能固定父元素的高度。如：新闻列表、京东推荐模块
额外标签法
操作：
在父元素内容的最后添加一个块级元素
给添加的块级元素设置clear：both；
特点：
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
单伪元素清除法
操作：用伪元素替代了额外标签
①：基本写法
.clearfix::after {
content:'';
display:block;
clear:both;
}②：补充写法
.clearfix::after {
content:'';
display:block;
clear:both;
/* 补充代码：在网页中看不到伪元素 */
height:0;
visibility:hidden;
}特点
优点：项目中使用，直接给标签加类即可清除浮动
双伪元素清除法
操作
.clearfix::before,
.clearfix::after {
content:'';
display:table;
}
.clearfix::after {
clear:both;
}特点：
优点：项目中使用，直接给标签加类即可清除浮动
给父元素设置overflow：hidden
操作：直接给父元素设置overflow：hidden；
特点
优点：方便
网页常见布局方式
标准流
块级元素独占一行，垂直布局
行内元素、行内块元素一行显示多个，水平布局
浮动
可以让原本垂直布局的块级元素变成水平布局
定位
可以让元素自由的摆放在网页的任意位置
一般用于盒子之间的层叠情况
定位
可以解决盒子与盒子之间的层叠问题
定位之后的元素层级最高，可以层叠在其他盒子上面
可以让盒子始终固定在屏幕中的某个位置
使用定位的步骤
设置定位方式
属性名：position
常见属性：
静态定位：static
相对定位：relative
绝对定位：absolute
固定定位：fixed
设置偏移值（要设置偏移值盒子的定位才能显示）
偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
选取的原则一般是就近原则（离哪个近用哪个）
水平方向
left：数字+px；距离左边的距离
right：数字+px；距离右边的距离
垂直方向
top：数字+px；距离上边的距离
bottom：数字+px；距离下边的距离
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
}
.red {
background-color: red;
}
.blue {
/* 1、设置定位方式 */
/* 绝对定位 */
position: absolute;
/* 2、设置偏移值 */
top: 150px;
left: 150px;
background-color: blue;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
</body>静态定位
介绍：静态定位是默认值，就是之前认识的标准流
代码
position:static;注意点：
静态定位就是之前的标准流，不能通过方位属性进行移动
之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
相对定位
自恋型定位，相对于自己之前的位置进行移动
代码
position:relative;
特点：
需要配合方位属性实现移动
相对于自己原来的位置进行移动
在页面中占位置，没有脱标
应用场景：
配合绝对定位组CP（子绝父相）
用于小范围的移动
绝对定位
介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
代码
position:absolute;
特点：
需要配合方位属性实现移动
默认相对于浏览器可视区进行移动
在页面中不占位置，已经脱标
应用场景：
配合绝对定位组CP（子绝父相）
绝对定位相对于谁进行偏移？
祖先元素中没有定位，默认相对于浏览器进行移动
祖先元素中有定位，相对于最近的有定位的祖先元素进行移动
子绝父相
场景：让子元素相对于父元素进行自由移动
含义：
子元素：绝对定位
父元素：相对定位
子绝父相的好处：
父元素是相对定位，则对网页布局影响最小
子绝父绝特殊场景
场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可
原因：
父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局
子绝父相水平居中
子绝父相
先让子盒子往右移动父盒子的一半
left：50%；
再让子盒子往左移动自己的一半
普通做法：margin-left：负的子盒子宽度的一半
缺点：子盒子的宽度变化之后需要重新改代码
优化做法：transform：translateX（-50%）
优点：表示沿着X轴方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码
子绝父相水平垂直居中
子绝父相
left：50%；
top：50%；
transform：translate（-50%，-50%）；
固定定位
介绍：死心眼定位（广告定位），相对于浏览器进行定位移动
代码
position:fixed;
特点：
需要配合方位属性实现移动
相对于浏览器可视区进行移动
在页面中不占位置，已经脱标
应用场景：
让盒子固定在屏幕中的某个位置
元素层级关系
不同布局方式元素的层级关系
标准流 < 浮动 < 定位
不同定位之间的层级关系
相对、绝对、固定定位默认层级相同
此时html中写在下面的元素层级更高，会覆盖上面的元素
更改定位元素的层级
场景：改变定位元素的层级
属性名：z-index （只对定位元素的层级起效）
属性值：数字
数字越大，层级越高
垂直对齐方式（vertical-align）
基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
（英文四线第三条）
文字对齐问题
场景：解决行内、行内块元素垂直对齐问题（对于块元素无效）
问题：当图片和文字在一行中显示时，其实底部不是对齐的
垂直对齐方式
属性名：vertical-align
属性值：
baseline，默认基线对齐
top，顶部对齐
middle，中部对齐
bottom，底部对齐
补充vertical-align可以解决的问题
文本框和表单按钮无法对齐问题
input和img无法对齐问题
div中的文本框，文本框无法贴顶问题
div不设置高度由img标签撑开，此时img标签下面会存在额外间隙问题
使用line-height让img标签垂直居中问题
注意点：
学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
推荐优先使用浮动完成效果
光标类型
场景：设置鼠标光标在元素上时显示的样式
属性名：cursor （只能改变光标的样式，并不有相应的功能）
常见属性值：
default，默认值，通常是箭头
pointer，小手效果，提示用户可以点击
text，工字型，提示用户可以选择文字
move，十字光标，提示用户可以移动
cursor: default;
cursor: pointer;
cursor: text;
cursor: move;
边框圆角
场景：让盒子四个角变得软润，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字+px、百分比
原理
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
边框圆角的常见应用
画一个正圆
盒子必须是正方形
设置边框圆角为盒子宽高的一半，border-radius：50%；
胶囊按钮
盒子要求是长方形
设置border-radius：盒子高度的一半
<style>
/* 画一个正圆 */
.one {
/* 1、盒子必须是正方形 */
width: 300px;
height: 300px;
/* 2、设置边框圆角为盒子宽高的一半 */
/* border-radius: 150px; */
border-radius: 50%;
background-color: orange;
margin-bottom: 20px;
}
/* 画一个胶囊按钮 */
.two {
/* 1、盒子要求是长方形 */
width: 300px;
height: 100px;
/* 2、设置边框圆角为盒子高度的一半 */
border-radius: 50px;
background-color: purple;
margin-bottom: 20px;
text-align: center;
line-height: 100px;
color: #fff;
font-size: 20px;
}
.three {
/* 1、盒子要求是长方形 */
width: 300px;
height: 100px;
/* 2、设置边框圆角为盒子高度的一半 */
border-radius: 50px;
border: 1px solid orange;
text-align: center;
line-height: 100px;
font-size: 20px ;
color: orange;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two">我真帅</div>
<div class="three">我真帅</div>
</body>
溢出部分显示效果
溢出部分：指的是盒子内容部分所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条········
属性名：overflow
常见属性值：
visible，默认值，溢出部分可见
hidden，溢出部分隐藏
scroll，无论是否溢出，都显示滚动条
auto，根据是否溢出，自动显示或隐藏滚动条
/* 溢出部分显示效果 */
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;
元素本身隐藏
场景：让某元素本身在屏幕中不可见，如：鼠标：hover之后元素隐藏
常见属性：
visibility：hidden
display：none
区别：
visibility：hidden 隐藏元素本身，并且在网页中占位置
display：none 隐藏元素本身，并且在网页中不占位置
注意点：
开发中经常会通过display属性完成元素的显示切换
display：none；隐藏、display：block；显示
元素整体透明度
场景：让某元素整体（包括内容）一起变透明
属性名：opacity
属性值：0~1之间的数字
1：表示完全不透明
0：表示完全透明
注意点：
opacity会让元素整体透明，包括里面的内容，如：文字、子元素等等
边框合并
场景：让相邻表格边框进行合并，得到细线边框效果
代码：（是给table设置的）
border-collapse:collapse;<style>
table {
width: 400px;
height: 300px;
border: 1px solid #000;
/* 边框合并：border-collapse */
border-collapse: collapse;
}
td,
th {
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- border="1" width="400" height="300"cellspacing="0" -->
<table>
<caption><h3>前端与移动开发学员学习情况</h3></caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小姐姐</td>
<td>女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>小哥哥</td>
<td>男</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>大姐姐</td>
<td>女</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">总成绩</td>
<td colspan="2">300</td>
</tr>
</tfoot>
</table>
</body>链接伪类选择器
场景：常用于选中超链接的不同状态
选择器语法：
a：link{ }，选中a链接 未访问过 的状态
a：visited{ }，选中a链接 访问之后 的状态
a：hover{ }，选中 鼠标悬停 的状态
a：active{ }，选中 鼠标按下 的状态
/* 选中a标签未访问过的状态 */
a:link {
color: red;
}
/* 选中a标签访问过之后的状态 */
a:visited {
color: yellow;
}
/* 选中鼠标悬停的状态 */
a:hover {
color: orange;
}
/* 选中鼠标按下的状态 */
a:active {
color: skyblue;
}注意点：
如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写
其中：hover 伪类选择器使用更为频繁，常用于选择各类元素的悬停状态
用css画三角形技巧（面试题）
场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成
实现原理：
利用盒子边框完成
实现步骤：
设置一个盒子
设置四周不同颜色的边框
将盒子的宽高设置为0，仅保留边框
得到四个三角形，选择其中一个，其他三个三角形（边框）设置颜色为透明
通过调整不同边框的宽度，可以调整三角形的形态
焦点伪类选择器
场景：用于选中元素获取焦点时的状态，常用于表单控件
选择器语法：
input:focus {
background-color:red;
}
效果：
表单控件获取焦点时会默认显示外部轮廓线
属性选择器
场景：通过元素上的HTML属性来选择元素，常用于选择input标签
选择器语法：
E[attr]，选择具有attr属性的E元素
E[attr="val"]，选择具有attr属性并且属性值等于val的E元素
精灵图
场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
例如：需要在网页中展示8张小图片
8张小图片分别发送，需要发送8次
合成一张精灵图发送，需要发送1次
精灵图的使用步骤
创建一个盒子
通过PxCook量取小图片的大小，将小图片的宽高设置给盒子
将精灵图设置为盒子的背景图片
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
为什么要取负值？
背景图片的大小
作用：设置背景图片的大小
语法：background-size：宽度 高度；
取值：
数字+px，简单方便，常用
百分比，相对于当前盒子自身的宽高百分比
contain，包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover，覆盖，将背景图片等比例缩放，直到刚好它填满整个盒子没有空白
background连写
完整连写：background：color image repeat position/size；
注意点：
background-size和background连写同时设置时，需要注意覆盖问题
解决：
要么单独的样式写在连写下面
要么单独的样式写在连写里面
文字阴影
作用：给文字添加阴影效果，吸引用户注意
属性名：text-shadow
取值：
h-shadow，必须，水平偏移量，允许负值
v-shadow，必须，垂直偏移量，允许负值
blur，可选，模糊度
color，可选，阴影颜色
拓展：阴影可以叠加设置，每组阴影取值之间用逗号隔开
text-shadow: 0 0 5px #fff, 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
盒子阴影
作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
属性名：box-shadow
取值：
h-shadow，必须，水平偏移量，允许负值
v-shadow，必须，垂直偏移量，允许负值
blur，可选，模糊度
spread，可选，阴影扩大
color，可选，阴影颜色
inset，可选，将阴影改为内部阴影
过渡
作用：让元素的样式慢慢变化，常配合hover使用，增强网页交互体验
属性名：transition
常见取值：
过渡的属性
all，所有能过渡的属性都过渡
具体属性名如：width：只有width有过渡
过渡的时长
数字+s（秒）
注意点：
过渡需要：默认状态和hover状态样式不同，才能有过渡效果
transition属性给需要过渡的元素本身加
transition属性设置在不同状态中，效果不同
给默认状态设置，鼠标移入移出都有过渡效果
给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
<style>
div {
width: 200px;
height: 200px;
background-color: red;
/* 过渡 */
transition: all 1s;
}
div:hover {
width: 800px;
/* width: 200px; */
/* background-color: yellow; */
}
</style>
</head>
<body>
<div></div>
</body>网页与网站的关系
在互联网中，网站类似于是一本书，网页就是这本书的每一页
比如：淘宝、京东就是一个网站，类似于一本书
这些网站中的每一个网页，如：主页、登录页面、商品页面就是每一个单独的页面，类似于每一页纸
网页：网站中的每一页。例如：淘宝的主页、淘宝的登录页、淘宝的商品页等
网站：提供特定服务的一组网页集合。例如：百度、淘宝、京东等
骨架结构标签的认识
DOCTYPE文档说明
注意点：DOCTYPE需要写在页面的第一行，不属于html标签
<!DOCTYPE html>
文档类型声明，告诉浏览器该网页的html版本
<!DOCTYPE html> HTML5版本
网页语言
<html lang="en"> 标识网页使用的语言
作用：搜索引擎归类+浏览器翻译
常见语言：zh-CN 简体中文 / en 英文
字符编码
<meta charset="UTF-8">
标识网页使用的字符编码
作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码
常见字符编码：
UTF-8：万国码，国际化的字符编码，收录了全球的语言文字
GB2312:6000+ 汉字
GBK：20000+ 汉字
注意点：开发中统一使用UTF-8字符编码即可
SEO三大标签
SEO（Search English Optimization）：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
竞价排名
将网页制作成html后缀
标签语义化（在合适的地方使用合适的标签）
············
三大标签
title：网页标题标签
description：网页描述标签
keyword：网页关键词标签
有语义的布局标签
场景：在HTML5中，推出了一些有语义的布局标签，可以增强网页的语义化
标签：
header，网页头部
nav，网页导航
footer，网页底部
aside，网页侧边栏
section，网页区块
article，网页文章
注意点：以上标签显示特点和div一致，但是比div多了不同的语义
ico图标的设置
场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
常见代码：
<title>标题</title>
<link rel="ico" href="ico图标的路径"> <!-- 经典写法 -->
<link rel="shortcut icon" href="ico图标的路径" type="image/x-icon"/> <!-- 完整写法 -->版心
场景：把页面的主体内容约束在网页中间
作用：让不同大小的屏幕都能看到页面的主体内容
代码：
/* 版心 */
.container {
width: 1240px;
margin: 0 auto;
}注意点：
版心类名常用：container、wrapper、w 等
css的书写顺序
衡量程序员的能力，除了要看实现业务需求的能力，还要看平时书写代码的规范（专业性）
不同的css书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习惯
顺序：
布局属性：display、position、float、clear、visibility、overflow
盒子模型+背景：width、height、margin、padding、border、background
文本内容属性：color、font、text-decoration、text-align、line-height
点缀属性：cursor、border-radius、text-shadow、box-shadow
注意点：
开发中推荐多用类+后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐不要超过3个文章来源地址https://www.toymoban.com/news/detail-805699.html
到了这里，关于关于CSS的基础知识的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
