目录
一.基础知识
1.介绍
Cascading style sheets 层叠样式表 决定样式美观 给页面中的HTML标签设置样式
2.引入方式
(1)内嵌式
写在style标签中,style标签可写在页面任意 位置, 通常约定写在head标签里面,title标签的下面
(2)外联式
写在一个单独的.css文件中, 通过link标签在网页中引入
(3)行内式
写在标签的style属性中, 配合js使用
二.基础选择器
1.标签选择器
标签名{css属性名: 属性值; } 通过标签名，找到页面中所有这类标签，设置样式
- 标签选择器选择的是一类标签，而不是单独某一个
- 标签选择器无论嵌套关系有多深，都能找到对应的标签
2.类选择器
.类名 { css属性名: 属性值; } 通过类名，找到页面中所有带有这个类名的标签，设置样式
注意:
- 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字开头
- 一个标签可以同时有多个类名，类名之间以空格隔开 <p class="class1 class2">hh</p>
- 类名可以重复，一个类选择器可以同时选中多个标签
3.id选择器
#id属性值{css属性名: 属性值; } 通过id属性值, 找到页面中带有这个id属性值的标签, 设置样式
注意:
- 所有标签上都有id属性
- id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！通常不做美化效果,而是配合js使用
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
- id名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
4.通配符选择器
*{css属性名: 属性值; } 找到页面中所有标签(未通过其他选择器设置样式的标签),设置样式
注意:
- 开发中使用极少，只会在极特殊情况下才会用到
- 在小页面中可能会用于去除标签默认的margin和padding
三.字体和文本样式
写在选择器中, 属性名,属性值
1.字体大小
font-size: 数字px;
- 谷歌浏览器默认文字大小是16px
- 单位需要设置，否则无效
2.字体粗细
font-weight: 数字px /单词;
正常: normal = 400 加粗:bold =700 数字:100~900整百数
注意:
- 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
- 实际开发中以：正常、加粗两种取值使用最多
3.字体样式
font-style: normal正常(默认值) / italic倾斜
4.字体
(1)字体样式
font-family 常见取值：具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
- 具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……
- 字体系列：sans-serif、serif、monospace等……
渲染规则:
- 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
- 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意:
- 如果字体名称中存在多个单词，推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
常见字体
①无衬线字体
- 特点:文字笔画粗细均匀，并且首尾无装饰
- 场景：网页中大多采用无衬线字体
- 常见该系列字体：黑体、Arial
②衬线字体
- 特点：文字笔画粗细不均，并且首尾有笔锋装饰
- 场景：报刊书籍中应用广泛
- 常见该系列字体：宋体、Times New Roman
③等宽字体
- 特点：每个字母或文字的宽度相等
- 场景：一般用于程序代码编写，有利于代码的阅读和编写
- 常见该系列字体：Consolas、fira code
样式层叠
如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效(后面的属性值覆盖前面的)
字体font相关属性连写
font(复合属性) font : style weight size family;
省略要求： 只能省略前两个，如果省略了相当于设置了默认值
注意: 如果需要同时设置单独和连写形式 , 要么把单独的样式写在连写的下面 , 要么把单独的样式写在连写的里面
(2)文本样式
文本缩进
text-indent: 数字px/ 数字em; 推荐：1em = 当前标签的font-size的大小
水平对齐方式
text-align: left/center/right; 左对齐/居中对齐/右对齐
注意: 如果需要让文本水平居中，text-align属性给文本所在标签(文本的父标签)设置
text-align: center; 可用于文本,span标签,a标签,input标签,img标签
文本修饰线
text-decoration: underline/ line-through/ overline/ none; 下划线/删除线/上划线/无装饰线
注意: 开发中会使用 text-decoration : none ; 清除a标签默认的下划线
行高
line-height: 数字px/ 倍数(当前标签font-size的倍数);
- 让单行文本垂直居中可以设置 line-height : 文字父元素高度
- 网页精准布局时，会设置 line-height : 1 可以取消上下间距
- 如果同时设置了行高和font连写，注意覆盖问题
- font : style weight size/line-height family ;
四.Chrome调试工具
调试面板: 谷歌浏览器内右击+检查 / Fn+F12
常见问题:
- Style中代码上有删除线,未生效,可能被同类属性层叠(覆盖)或注释, 前有黄色! 代码语法有误
- 调节字体或面板等的大小
- 增加效果, 或筛选效果
查错:
五.拓展
1.颜色取值
文字颜色 color 背景颜色 background-color
#fff : 白色 #000黑色 #ffaabb两数字为一组
2.标签水平居中
margin : 0 auto
注意：
- 如果需要让 div、p、h（大盒子） 水平居中，直接给当前元素本身设置即可
- margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
六.进阶选择器
1.复合选择器
(1)后代选择器( )
父选择器 后代选择器{css}
- 根据HTML标签的嵌套关系, 选择父元素 后代中 满足条件的元素
- 在选择器1所找到标签的后代(儿子、孙子、重孙子…)中，找到满足选择器2的标签，设置样式
(2)子代选择器(>)
父选择器 > 子选择器 { css }
- 根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素
- 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
2.并集选择器(,)
选择器1 , 选择器2{css}
- 同时选择多组标签,设置相同的样式
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
3.交集选择器(紧挨)
选择器1选择器2{css}
- 紧挨着 选中页面中同时满足多个选择器的标签
- (既又原则)找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式
- 交集选择器中如果有标签选择器，标签选择器必须写在最前面
4.hover伪类选择器
选择器:hover{css}
- 选中鼠标悬停在元素上的状态，设置样式 (e.g:鼠标放在文字上,文字就变色了)
- 任何标签都可以添加伪类
Emmet语法
通过简写语法, 快速生成代码
七.背景相关属性
1.背景颜色(bgr)
background-color : 值;
- 颜色取值：关键字、rgb表示法、rgba表示法、十六进制……
- 背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
- 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
2.背景图片(bgi)
background-image: url(路径);
- 背景图片中url中可以省略引号
- 背景图片默认是在水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
3.背景平铺(bgr)
background-repeat: repeat/no-repeat/repeat-x/repeat-y;
(默认)水平和垂直方向都平铺 / 不平铺 / 沿水平(x轴)平铺 / 沿垂直(y轴)平铺
4.背景位置(bgp)
background-position: 水平位置 垂直位置;
- 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
- 背景色和背景图只显示在盒子里面
5.背景属性连写(bg)
复合属性 background：color image repeat position
- 可以按照需求省略
- 在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()
- 如果需要设置单独的样式和连写,要么把单独的样式写在连写的下面 ,要么把单独的样式写在连写的里面
6.背景图与img
区别:
- 背景图依赖div标签,需要设置宽高,背景图片只是装饰的CSS样式，不能撑开div标签
- img是标签,不用设置宽高,默认会以原尺寸显示,通常用来实现比较重要的图片
八.元素显示模块
1.块级元素
块状标签: div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
显示特点：
- 独占一行（一行只能显示一个）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
2.行内元素
行内标签: a、span 、b、u、i、s、strong、ins、em、del……
显示特点：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高(设置宽高不生效)
3.行内块元素
行内块标签: input、textarea、button、select……
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
显示特点：
- 一行可以显示多个
- 可以设置宽高
4.元素显示模式转换
改变元素默认的显示特点，让元素符合布局要求, 
5.标签的嵌套
- 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……
- p标签中不要嵌套div、p、h等块级元素
- a标签内部可以嵌套任意元素 , 但是a标签不能嵌套a标签
九.CSS特性
1.继承
特性： 子元素有默认继承父元素样式的特点（子承父业）
- 可以继承的常见属性(文字控制属性都可以继承,控制标签本身的都不能继承) color, font-style, font-weight, font-size, font-family,text-indent、text-align , line-height
- 可以通过调试工具判断样式是否可以继承
继承失效的特殊情况
如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式, e.g: a标签超链接的颜色, h系列的字号
好处：可以在一定程度上减少代码
- 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
- 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
2.层叠性
- 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上 1+1=2
- 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
- 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
3.优先级
(1)优先级
- 不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
- 继承 < 通配符选择器 * < 标签选择器 < 类选择器 .abc< id选择器 # < 行内样式(标签里边写的 style) < !important
注意:
- !important写在属性值的后面，分号的前面
- !important不能提升继承的优先级，只要是继承优先级最低
- 实际开发中不建议使用 !important
(2)权重叠加计算
如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式：（每一级之间不存在进位）
比较规则：
- 将每一个复合选择器中的行内,id,类,标签选择器的个数均统计出来, 而后进行比较
- 先比较第一级数字，如果比较出则之后的不看 ,如果第一级数字相同，此时再去比较第二级数字，如果比较出则之后的不看
- 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算）
- !important如果不是继承，则权重最高，天下第一
全是继承的特殊情况: 看继承的哪个父级, 对应选择器生效
457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
