html+css知识点全面总结（二）
文章目录
- html+css知识点全面总结（二）
- 1.css的引入方式
- 2.css选择器
- 3.字体样式
- 4.font属性连写（了解）
- 5.文本缩进
- 6.文本（内容）对齐方式
- 7.text-align：center能让哪些元素水平居中？
- 8.文本修饰
- 9.行高 line-height
- 10.行高-单行文本垂直居中
- 11.颜色的取值方法（了解）
- 12.标签水平居中（拓展）
- 13.后代选择器
- 14.子代选择器
- 15.并集选择器
- 16.交集选择器
- 17.hover伪类选择器
- 18.背景颜色 设置透明色
- 19.背景图片
- 20.背景平铺
- 21.背景位置
- 22.背景相关属性连写
- 23.img标签和背景图片的区别（拓展）
- 24.元素显示模式
- 25.拓展1：HTML嵌套规范注意点
- 26.CSS三大特性-继承性
- 27.继承失效的特殊情况（拓展）
- 28.CSS三大特性-层叠性
- 29.CSS三大特性-优先级
- 30.优先级权重叠加计算
1.css的引入方式
| 引入方式 | 书写位置 | 作用范围 | 使用场景 |
|---|---|---|---|
| 行内式 | css写在标签的style属性中 | 当前标签 | 配合js使用 |
| 内嵌式（内部样式） | css写在style标签中（通常写在head里） | 当前页面 | 小案例 |
| 外联式（外部样式） | 单独的css文件，通过link标签引入 | 多个页面 | 项目中使用 |
实际开发中行内式一般不用
css中文名称：层叠样式表
样式优先级：行内式>内嵌（内部）式>外联式>浏览器默认样式
2.css选择器
- 标签选择器 标签名{css属性名：属性值；} 所有的标签都生效
- 类选择器 .类名{css属性名：属性值；}
- id选择器 #id 属性值{css属性名：属性值；}
- 通配符选择器 *{css属性名：属性值；} 作用：找到页面中的所有标签，设置样式 注意：开发中极少使用，一般用于去除标签默认的margin和padding
class选择器：通过类名来选择标签
注意：
-
类选择器以点开头，由字母、数字、下划线、中划线组成，但是不能数字或中划线开头（尽可能做到见名知意 多个单词用驼峰命名法）
-
类名可以重复并且一个标签可以同时拥有多个类名，类名之间用空格隔开
id选择器:针对性更强，主要配合js代码使用
注意：
1.所有标签都有id属性
2.id属性类似于身份证号码，在一个页面中是唯一的，不可重复的！
3.一个标签上只能有一个id属性值！！
4.一个id选择器只能选中一个标签！！
选择器优先级：id选择器>class类选择器>元素选择器
通配符选择器：*{} 能够选择页面中的所有标签
主要应用：初始化操作，清楚默认的内外边距。
*{
margin：0；
padding：0；
}
3.字体样式
-
字体大小：font-size 谷歌浏览器默认字体大小16px 最小只能显示到12px
-
字体粗细：font-weight
属性值：
关键字：
bold 加粗
normal 正常
100-900的整百数字：
700：加粗
400：正常
-
字体样式：font-style
属性值：
normal：正常
italic：倾斜 谐音记忆：italic谐音“意大利”，意大利有一个比萨斜塔
-
字体类型：font-family “Microsoft YaHei”、微软雅黑、黑体等… 无衬线字体（sans-serif）
设置多个字体是做备选用；如果一个字体有多个英文单词，那么要使用引号包裹。
4.font属性连写（了解）
字体font相关属性的连写 中间用空格隔开。
属性名：font（复合属性）
取值：
font：style weight size family 可以省略前两个直接写size 和family 前两个会变成默认值，如果跟单一写法连用，前面写的会被覆盖。
font：字体是否倾斜 是否加粗 字体大小 字体系列
5.文本缩进
文本缩进：text-ident
取值：
- 数字+px
- 数字+em（推荐：em单位，响应式的单位，1em=当前标签的font-size的大小）
text-indent缩进
浏览器默认字号是16px 一般indent取值用em em一个字的大小
6.文本（内容）对齐方式
作用：让大盒子里面的内容水平居中
属性名：text-align
取值：left center right
让大盒子水平居中的方式：margin：0 auto；
注意：
text-align可以让标签里面的内容居中，让div居中是让盒子居中 ，所以不能用text-align，让大盒子居中要用 margin：0 auto
7.text-align：center能让哪些元素水平居中？
1.文本
2.span标签、a标签
3.input标签、img标签
注意点：如果需要以上元素水平居中，text-align：center需要给以上元素的父元素设置！！
让h1中的文字居中，要给h1加上text-align
比如给图片img设置居中，要用img的父级标签body标签设置text-align：center
但凡内容对齐都用text-align
8.文本修饰
属性名：text-decoration
| 属性值 | 效果 |
|---|---|
| underline | 下划线（常用） |
| line-through | 删除线（不常用） |
| overline | 上划线（几乎不用） |
| none | 无装饰线（常用） |
9.行高 line-height
行高：控制一行的上下行间距（控制两行文字之间的距离）
属性名: line-height
取值：
- 数字+px
- 倍数（当前标签font-size的倍数）
行高：文字的上间距+文本高度+文字的下间距 （上间距=下间距）
应用：
-
让单行文本垂直居中可以设置 line-height : 文字父元素高度
-
网页精准布局时，会设置 line-height : 1 可以取消上下间距
-
行高与font连写的注意点：
- 如果同时设置了行高和font连写，注意覆盖问题
- font : style weight size/line-height family ;
//66px 宋体 倾斜 加粗 行高2倍 font：italic 700 66px/2 宋体；
10.行高-单行文本垂直居中
设置行高的样式：line-height
单行文本在盒子中可以设置 行高=盒子的高度 使文字在盒子中垂直居中
如果是多行文本 因为行高的原因 其他行会被挤出盒子
然后text-align：center就可以水平也居中了。
11.颜色的取值方法（了解）
| 颜色表示方法 | 表示含义 | 属性值 |
|---|---|---|
| 关键词 | 预定义的颜色名 | red、green |
| rgb表示法 | 红绿蓝三原色。每项取值范围0~255 | rgb（0,0,0）、rgb（255,255,255） |
| rgba表示法 | 红绿蓝三原色+a表示透明度，取值范围是0-1 | rgba（255,255,255,255）rgba(255,0,0,0.3) |
| 十六进制表示法 | #开头，将数字转化成十六进制表示 | #000000、#ff0000 |
12.标签水平居中（拓展）
margin：0 auto
如果需要让div、p、h（大盒子）水平居中？
- 可以通过margin：0 auto；实现
注意点：
- 如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可
- margin：0 auto一般针对于固定宽度的盒子，如果大盒子没有宽度，此时会默认占满父元素的宽度。（高度不是 高度要看它的内容）
13.后代选择器
后代选择器：根据标签结构选择所有符合条件的后代标签（使用频率很高）
语法：选择器1 选择器2 选择器3 {样式代码}
注意：
后代选择器中的后代包括儿子、孙子、重孙子…
后代选择器多个选择器之间用空格隔开
div p span {
/* 只选中后代中的span元素 */
color: aqua;
}
14.子代选择器
子代选择器：根据标签结构关系选择到所有符合条件的子代标签
语法：选择器1>选择器2>选择器3{样式代码}
注意：
子代选择器中的子代表示只包含儿子辈的标签
子代选择器中多个选择器使用>号隔开
15.并集选择器
并集选择器：同时选则多组不同的标签，设置相同的样式
语法：选择器1，选择器2，选择器3{样式代码}
注意：
并集选择器中多个选择器之间用,隔开
并集选择器可以是由多个复合选择器组成
选择器书写结构上，一般一个选择器占一行
16.交集选择器
交集选择器：同时满足所有选择器条件的标签才会被选中 （不需要加任何符号！）
语法：选择器1选择器2 {样式代码}
注意点：
交集选择器中多个选择器之间是紧挨着的不需要符号隔开
如果交集选择器之间有标签选择器，那么需要写到前面
比如p标签和.target 要写成p.target 不能.targetp
17.hover伪类选择器
作用：选中鼠标悬停在元素上
hover伪类选择器：鼠标悬停时样式才生效 。任何标签都可以添加伪类，任何标签都可以鼠标悬停。
语法：选择器：hover{样式代码}
注意点：
- 伪类选择器只会在对应状态下才会生效
- 所有标签都可以使用hover
18.背景颜色 设置透明色
属性名：background-color（emmet语法：bgc）
第一种方法：给rgba中的a设置为0 原先是1
background-color: rgba(27, 158, 172,0);
第二种：background-color:transparent;
div设置背景透明 盒子里面的文字不受影响
19.背景图片
属性名：background-image（emmet语法：bgi）：url（图片路径）
注意点：
背景图片上面可以写文字
url中的图片路径可以省略引号
背景图片默认会横向和竖向平铺
背景图片不会影响盒子内容
20.背景平铺
属性名：background-repeat（bgr）
属性值：
| 取值 | 效果 |
|---|---|
| repeat | （默认值）水平和垂直方向都平铺 |
| no-repeat | 不平铺（常用） |
| repeat-x | 沿着水平方向（x轴）平铺 |
| repeat-y | 沿着垂直方向（y轴）平铺 |
21.背景位置
设置背景位置样式：background-position（bgp）：水平方向位置 垂直方向位置；
属性值取值：
1.方位名词：
水平方向：left左、center中间、right右
垂直方向：top上、center中间、bottom下
2.像素值 数字+px（坐标）：
第一个值表示从原点水平移动的距离
第二个值表示从原点垂直移动的距离
正数:向右向下移动；负数：向左向上移动
注意：背景色和背景图只显示在盒子里面
注意点：
方位名词和数字可以混用，第一个值横向，第二个值表示竖向
22.背景相关属性连写
背景的复合属性：background
书写不分顺序：background-color background-image background-repeat background-position
书写顺序推荐：background：color image repeat position
省略问题：
复合属性中，不需要的可以省略。省略后的属性相当于设置了默认值
注意点：
复合属性和单一属性混用的时候 注意层叠问题
- 如果需要设置单独的样式和连写
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
23.img标签和背景图片的区别（拓展）
背景图片和img的区别：
img标签是作为内容，有图片默认大小
背景图片是作为css样式背景，不是内容不会撑开盒子
应用：
img常用于商品、宣传等可提换图片
背景图片长时间不变的图
需求：需要在网页中展示一张图片的效果？
- 直接写上img标签即可
- img标签是一个标签，不设置宽高默认会以原尺寸显示
- div标签+背景图片
- 需要设置div的宽高，因为背景图片只是装饰的CSS样式不能撑开div标签
24.元素显示模式
1.块级元素显示特点：
- 独占一行，（一行只能显示一个）
- 默认宽度是父元素宽度，高度默认由内容撑开
- 可以设置宽高
举例：
div、p、h标题、ul、li、ol、dt、dd、form、header、nav、footer等
2.行内元素特点：
1.一行可以显示多个
2.宽度和高度由内容撑开
3.不可以设置宽高
举例：
a span b u i s strong ins em del
3.行内块显示特点：
1.一行可以显示多个
2.可以设置宽高
不加宽高时是默认的显示模式
举例：
input、textarea、button、select
特殊情况：img标签也具有行内块元素的特点，所以属于行内块，但是Chrome调试工具中显示结果是inline。
4.元素显示模块转换
-
目的：改变元素默认的显示特点，让元素符合布局要求
-
语法
属性 效果 使用频率 display:block 转换成块级元素 较多 display：inline-block 转换为行内块元素 较多 display：inline 转换为行内元素 极少
25.拓展1：HTML嵌套规范注意点
- 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等。。。
- 但是：p标签中不要嵌套div、p、h等块级元素
- a标签内部可以嵌套任意元素
- 但是：a标签不能嵌套a标签
26.CSS三大特性-继承性
特性：子元素有默认继承父元素样式的特点（子承父业）
可以被继承的样式属性（文字控制属性都可以继承）：
- color
- font-开头的样式
- text-开头的样式
- line-height
- 具体应用：字体的初始化样式
（拓展）继承的应用
➢ 好处：可以在一定程度上减少代码
➢ 常见应用场景：
- 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
- 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
27.继承失效的特殊情况（拓展）
场景：如果标签具有默认样式，则会覆盖继承的效果
➢ 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
-
a标签的color会继承失效
其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
-
h系列标签的font-size会继承失效
其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉
解决方式：单独选中对应标签添加样式，就可以覆盖默认样式
例如：
a标签的color被覆盖
h系列的font-size被覆盖
28.CSS三大特性-层叠性
➢ 特性：
- 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
- 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
➢ 注意点：
- 样式冲突时，只有当选择器优先级相同时，才会使用层叠性进行判断；如果优先级不同，则以优先级高的为准
29.CSS三大特性-优先级
特性：不同的选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级排序：
- 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意点：
- !important写在属性值的后面，分号的前面
- !important不能提升继承的优先级，只要是继承优先级就是最低的
- 实际开发中不建议使用!important
30.优先级权重叠加计算
权重叠加计算
➢ 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
➢ 权重叠加计算公式：（每一级之间不存在进位）
在复合选择器中：
| 第一级 | 第二级 | 第三级 | 第四级 |
|---|---|---|---|
| 0 | 0 | 0 | 0 |
| 行内样式的个数 | id选择器的个数 | 类选择器的个数 | 标签选择器的个数 |
➢ 比较规则：
- 先比较第一级数字，如果比较出来了，之后的统统不看
- 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
- ……
- 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
➢ 注意点：!important如果不是继承，则权重最高，天下第一！
权重叠加计算：如果使用的的是复合选择器，那么就需要进行权重的叠加计算
不同选择器的权重：
继承： 无穷小
通配符选择器 0,0,0,0
标签选择器 0,0,0,1
类选择器 0,0,1,0
id选择器 0,1,0,0
行内样式 1,0,0,0
关键字!important: 无穷大
比较规则:
将复合选择器中，各个选择器的权重举例出来，然后按位相加，获得复合选择器的权重
复合选择器的比较，从左至右按位次依次比较，第一位相同则比较第二位直至得出结果
如果复合选择器的优先级相同，则按照层叠性为准
注意点：
权重叠加不会进位
2770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
