本文详细介绍了CSS的引入方式（内部、外部、行内），基础选择器（标签、类、ID、通配符等）的用法，emmet语法，以及字体、文本样式、背景、元素显示模式、CSS特性（继承性、优先级、层叠性）、盒子模型和伪元素的使用。还涵盖了浮动和清除浮动的技巧。
目录
一、CSS引入方式
01内部样式（学习使用）
将css代码写于style标签中
02外部样式（开发使用）
css代码写于单独的css文件中（.css）并与html标签中使用link标签引入
03行内样式 （配合javaScript使用）
css代码写于标签 的style属性值里
二、基础选择器
01标签选择器
以html中的标签作为选择符
用于改变某个元素的默认样式时或者统一文档某个元素的显示效果
语法：标签{属性：属性值；}
02类选择器
语法：.class名字{属性：属性值；} 
Class属性值注意点
1、不能纯数字或中划线开头
2、 类名可重复，一个类选择器可同时选中多个标签
3、一个标签可有多个类名，中间用空格隔开
03id选择器
语法：# id名字{属性：属性值；}
注意点：
1、其类似身份证，具有唯一性
2、一个标签仅一个id属性值
3、一个id选择器只能选中一个标签
04通配符选择器
语法：* {属性：属性值；}
作用：将页面中所有标签一起更改样式 
05后代选择器
语法：选择器1 选择器2 { .... }
06子代选择器
语法：选择器1 > 选择器2 { .... }
注意点：其选中的仅为子代
07并集选择器
语法：选择器1 ，选择器2 { ... }
08交集选择器
语法：选择器1选择器2 { .... }
注意点：两种选择器中若含标签选择器则需放最前面
09hover伪类选择器
语法：选择器 ：hover { ... }
10结构伪类选择器
注意点
- n为0，1，2，3，4.....
- 通过n可组成常见公式
三、emmet语法
四、字体和文本样式
01字体
大小
语法：font-size：（单位 ：px）google默认大小为16px
粗细
语法：font-weight ：normal（400） bold（700）（属性值取100~900的整百数）
样式
语法：font-style：normal / italic（倾斜）
类型
语法：font-family
常见取值：具体字体，具体字体，.....，文字系列
具体字体：黑体，宋体.....
字体系列：san-serif、serif、monospace等
连写
语法：font：style weight size family
02文本样式
缩进
语法：text-indent
单位：px / em（1em默认一个字大小）
文本水平对齐方式
语法：text-align（设置父元素）
属性值：
- left（左对齐）
- center（居中）
- right（右对齐）
文本修饰
语法：text：decoration
属性值：
- underline（下划线）
- line-through（删除线）
- overline（上划线）
- none（无装饰线）——常用于清除a标签的下划线
行高
语法：line-height
取值：px / 倍数（当前标签font-size的倍数）
应用：line-height：父元素的高度（让单行文本水平居中）
line-heigh：1（可取消上下间距）
连写
语法：font：style weight size/line-height family
注意：覆盖问题
五、背景相关属性
颜色
语法：background-color（bgc）
其默认值为透明
常用取值：
- 关键词，如红色
- rgb表示法——rgb（0，0，0）三个数字分别代表红绿蓝占比，取值为0~255
- rgba表示法——rgba（0，0，0，0）第四个值表示透明度（0~1），0为透明
- 十六进制表示法——#000000（六个数字两两分别表示红绿蓝占比且需用十六机制数表示），若每两个数字均相同可简写，例#ffaabb可简写为#fab
图片
语法：background-image：url（'图片的路径'）（bgi）
平铺
语法：background-repeat（bgr）
属性值：
- repeat（默认值），即水平垂直方向均平铺
- no-repeat，即不平铺
- repeat-x，即沿水平方向平铺
- repeat-y，即沿垂直方向平铺
位置
语法：background-position：水平位置 垂直位置；（bgp）
属性值：（两种表达可混用）
- 数字+px（以盒子左上角为原点建系）
- 方位名词。水平：left、center、right。垂直：top、center、bottom
连写
语法：background：color image repeat position
注意：可按需求省略，但要注意覆盖
六、元素显示模式
块级元素
语法：display：block
特点：独占一行且能设置宽高，例div，p，h
行内元素
语法：display：inline
特点：一行可显示多个但不能设置宽高，例a，span
行内块元素
语法：display：inline-block
特点：一行可显示多个且能设置宽高，例input，textarea
特例：img标签有其特点，但chrome调试工具中显示其为inline
七、CSS三大特性
继承性
常见可继承的元素
color、font-style、font-weight、font-size、font-family、text-align、text-indent、text-height（可通过chrome调试工具判断，暗色为不能继承，亮色为可以继承）
继承失效
若浏览器有默认样式，则优先显示默认样式
特例：
- a标签的color
- h系列标签的font-size
- div的噶偶的不能继承，但是宽度有类似继承的效果（但也不是继承）
优先级
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important
注：！important写与属性值后，分号前，其不能提升继承的优先级
权重叠加计算方式：（0，0，0，0）
即分别判断行内样式、id选择器、类选择器、标签选择器个数
从左至右，若分出大小就结束判断
层叠性
判断方式：
- 不同样式。共同作用
- 相同样式，覆盖
样式冲突时，仅当选择器优先级相同时，才能通过层叠性判断
八、盒子模型
盒子实际大小为内容、边框、内边距的和
内容（content）
边框（border）
连写：border： 粗细 样式 颜色（快捷键：bd + Tab）
单方向设置： border-方位名词
内边距（padding）
记忆规则：从上开始，顺时针赋值，若未设置，则其内边距与其对面的值相同
外边距（margin）
即盒与盒之间的距离
属性值与内边距的属性值相同
应用：移动盒子
注意点：
- 垂直布局的块级元素，上下margin合并取最大值。解决方案：尽量避免，即仅给其中一个设置margin
- 互相嵌套的块级元素，与父元素上边紧贴的子元素的margin-top会导致父元素一起下移。解决方案（原理：使父元素上边不紧贴着子元素）：a、给父元素设置border-top/padding-top。b、给父元素设置overflow：hidden。c、转换成行内块元素。d、设置浮动
注意点
行内元素垂直方向上的padding和margin无效
九、伪元素
概念：由css模拟出的标签效果，默认为行内元素
注意：伪元素必须设置conten属性才可以生效（content:' ';）
十、浮动
浮动
语法：float
属性值：left（左浮动）和right（右浮动）
特点：
清除浮动
清除浮动即清除其影响
方法：
- 直接设置父元素高度
- 在父元素内容的最后添加一个块级元素并给其设置clear：both（额外标签法）
- 用伪元素替代额外标签（单伪元素清除法），后者可隐藏content中的内容
4.双伪元素清除法
5.给父元素设置overflow：hidden
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
