CSS
基础认识
1.CSS：
层叠样式表（Cascading style sheets）
2.引入方式：
➢ 内嵌式：CSS 写在style标签中
• 提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
➢ 外联式：CSS 写在一个单独的.css文件中
• 提示：需要通过link标签在网页中引入
➢ 行内式：CSS 写在标签的style属性中
• 提示：基础班不推荐使用，之后会配合js使用
基础选择器
1.标签选择器
➢ 结构：标签名 { css属性名：属性值； }
➢ 作用：通过标签名，找到页面中所有这类标签，设置样式
➢ 注意点：
- 标签选择器选择的是一类标签，而不是单独某一个
- 标签选择器无论嵌套关系有多深，都能找到对应的标签
2.类选择器
➢ 结构：.类名 { css属性名：属性值； }
➢ 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
➢ 注意点：
- 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
- 一个标签可以同时有多个类名，类名之间以空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签
3.id选择器
➢ 结构：#id属性值 { css属性名：属性值； }
➢ 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
➢ 注意点：
- 所有标签上都有id属性
- id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
4.通配符选择器
➢ 结构：* { css属性名：属性值； }
➢ 作用：找到页面中所有的标签，设置样式
➢ 注意点：
- 开发中使用极少，只会在极特殊情况下才会用到
- 在小页面中可能会用于去除标签默认的margin和padding
类与id的区别：
➢ class类名与id属性值的区别
• class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
• id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
➢ 类选择器与id选择器的区别
• 类选择器以 . 开头
• id选择器以 # 开头
➢ 实际开发的情况
• 类选择器用的最多
• id一般配合js使用，除非特殊情况，否则不要使用id设置样式
• 实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）
5结构伪类选择器
- 作用与优势：
- 作用：根据元素在HTML中的结构关系查找元素
- 优势：减少对于HTML中类的依赖，有利于保持代码整洁
- 场景：常用于查找某父级选择器中的子元素
- 选择器
| 选择器 | 说明 |
|---|---|
| E:first-child(){} | 匹配父元素第一个子元素，并且是E元素 |
| E:last-child(){} | 匹配父元素最后一个子元素，并且是E元素 |
| E:nth-child(n){} | 匹配父元素第n个子元素，并且是E元素 |
| E:nth-last-child(n){} | 匹配父元素倒数第n个子元素，并且是E元素 |
注意：n为0，1，2，3，…
n常见公式2n 2n+1 -n+5 n+5
字体和文本样式
1.字体大小
➢ 属性名：font-size
➢ 取值：数字 + px
➢ 注意点：
• 谷歌浏览器默认文字大小是16px
• 单位需要设置，否则无效
2.字体粗细
属性名：font-weight
关键字：normal /400 正常 bold/700 加粗
➢ 注意点：
• 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
• 实际开发中以：正常、加粗两种取值使用最多。
3.字体样式
➢ 属性名：font-style
➢ 取值：
• 正常（默认值）：normal
• 倾斜：italic
4.字体系列
➢ 属性名：font-family
➢ 常见取值：具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列
• 具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……
• 字体系列：sans-serif、serif、monospace等……
➢ 渲染规则：
- 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
- 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
➢ 注意点： - 如果字体名称中存在多个单词，推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
5.font相关属性连写
➢ 属性名：font (复合属性)
➢ 取值：
• font : style weight size family;
➢ 省略要求：
• 只能省略前两个，如果省略了相当于设置了默认值
➢ 注意点：如果需要同时设置单独和连写形式
• 要么把单独的样式写在连写的下面
• 要么把单独的样式写在连写的里面
6.文本缩进
➢ 属性名：text-indent
➢ 取值：
• 数字+px
• 数字+em（推荐：1em = 当前标签的font-size的大小）
7.文本水平对齐方式
➢ 属性名：text-align
取值left 左对齐 center 居中 right 右对齐
➢ 注意点：
• 如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
文本，span，img，a，input，都可以用text-align进行对齐。
8.文本修饰
➢ 属性名：text-decoration
取值underline 下划线 overline上划线 line-through删除线 none 无划线
9.行高
➢ 作用：控制一行的上下行间距
➢ 属性名：line-height
➢ 取值：
• 数字+px
• 倍数（当前标签font-size的倍数）
➢ 应用：
- 让单行文本垂直居中可以设置 line-height : 文字父元素高度
- 网页精准布局时，会设置 line-height : 1 可以取消上下间距
➢ 行高与font连写的注意点：
• 如果同时设置了行高和font连写，注意覆盖问题
• font : style weight size/line-height family ;
Chrome调试工具
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RZeMBhSa-1661524420732)(C:\Users\lenovo\Desktop\文件夹\前端\黑马\笔记\Snipaste_2022-08-22_20-28-04.png)]
选择器进阶
后代选择器：空格
➢ 作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素
➢ 选择器语法：选择器1 选择器2 { css }
➢ 结果：
• 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
➢ 注意点：
- 后代包括：儿子、孙子、重孙子……
- 后代选择器中，选择器与选择器之前通过 空格 隔开
子代选择器：>
➢ 作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素
➢ 选择器语法：选择器1 > 选择器2 { css }
➢ 结果：
• 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
➢ 注意点：
- 子代只包括：儿子
- 子代选择器中，选择器与选择器之前通过 > 隔开
并集选择器：,
➢ 作用：同时选择多组标签，设置相同的样式
➢ 选择器语法：选择器1 ， 选择器2 { css }
➢ 结果：
• 找到 选择器1 和 选择器2 选中的标签，设置样式
➢ 注意点：
- 并集选择器中的每组选择器之间通过 , 分隔
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
交集选择器：紧挨着
➢ 作用：选中页面中 同时满足 多个选择器的标签
➢ 选择器语法：选择器1选择器2 { css }
➢ 结果：
• （既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式
➢ 注意点：
- 交集选择器中的选择器之间是紧挨着的，没有东西分隔
- 交集选择器中如果有标签选择器，标签选择器必须写在最前面
hover伪类选择器
➢ 作用：选中鼠标悬停在元素上的状态，设置样式
➢ 选择器语法：选择器:hover { css }
➢ 注意点：
- 伪类选择器选中的元素的某种状态
背景相关属性
背景颜色
➢ 属性名：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 | 沿水平方向平铺 |
| repeat-y | 沿垂直方向平铺 |
背景位置
➢ 属性名：background-position（bgp）
➢ 属性值：background-position: 方位名词 水平方向left/center/right/ 垂直方向top/center/botom
数字px 原点：盒子左上角 水平向右（x轴）垂直向下（y轴）
背景相关属性的连写形式
➢ 属性名：background（bg）
➢ 属性值：
• 单个属性值的合写，取值之间以空格隔开
➢ 书写顺序：
• 推荐：background：color image repeat position
➢ 省略问题：
• 可以按照需求省略
• 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()
➢ 注意点
• 如果需要设置单独的样式和连写
• ① 要么把单独的样式写在连写的下面
• ② 要么把单独的样式写在连写的里面
（拓展）img标签和背景图片的区别
➢ 需求：需要在网页中展示一张图片的效果？
➢ 方法一：直接写上img标签即可
• img标签是一个标签，不设置宽高默认会以原尺寸显示
➢ 方法二：div标签 + 背景图片
• 需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
元素显示模式
块级元素
➢ 显示特点：
- 独占一行（一行只能显示一个）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
➢ 代表标签：
• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
行内元素
➢ 显示特点：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
➢ 代表标签：
• a、span 、b、u、i、s、strong、ins、em、del……
行内块元素
➢ 显示特点：
- 一行可以显示多个
- 可以设置宽高
➢ 代表标签：
• input、textarea、button、select……
• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
伪元素
➢ 伪元素：一般页面中的非主体内容可以使用伪元素
➢ 区别：
- 元素：HTML 设置的标签
- 伪元素：由 CSS 模拟出的标签效果
➢ 种类：
| 伪元素 | 作用 |
|---|---|
| ：：before | 在父元素内容的最前面添加一个伪元素 |
| ：：after | 在父元素内容的最后面添加一个伪元素 |
➢ 注意点：
- 必须设置content属性才能生效
- 伪元素默认是行内元素
元素显示模式转换
➢ 目的：改变元素默认的显示特点，让元素符合布局要求
➢ 语法：
| 属性 | 效果 | 使用频率 |
|---|---|---|
| display：block | 转换成块级元素 | 较多 |
| display：inline-block | 转换成行内块 | 较多 |
| display：inline | 装换成行内元素 | 较少 |
CSS特性
继承性
➢ 特性：子元素有默认继承父元素样式的特点（子承父业）
➢ 可以继承的常见属性(文字控制属性都可以继承)
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
- line-height
- ……
➢ 注意点：
• 可以通过调试工具判断样式是否可以继承
层叠性的介绍
➢ 特性：
- 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
- 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
➢ 注意点： - 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
优先级的介绍
➢ 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
➢ 优先级公式：
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
➢ 注意点：
- !important写在属性值的后面，分号的前面！
- !important不能提升继承的优先级，只要是继承优先级最低！
- 实际开发中不建议使用 !important 。
权重叠加计算
➢ 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
➢ 权重叠加计算公式：（每一级之间不存在进位）
➢ 比较规则：
- 先比较第一级数字，如果比较出来了，之后的统统不看
- 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
- ……
- 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
➢ 注意点：!important如果不是继承，则权重最高，天下第一！
盒子模型
盒子模型的介绍
- 盒子的概念
- 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
- 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
- 盒子模型
➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（
margin）构成，这就是 盒子模型 - 记忆：可以联想现实中的包装盒
内容的宽度和高度
➢ 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
➢ 属性：width / height
➢ 常见取值：数字+px
边框
➢ 作用：给设置边框粗细、边框样式、边框颜色效果
➢ 单个属性：
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 虚线dashed，点线dotted，实线solid |
| 边框颜色 | border-color | 颜色取值 |
连写
➢ 属性名：border
➢ 属性值：单个取值的连写，取值之间以空格隔开
• 如：border : 10px solid red;
边框（border）- 单方向设置
➢ 场景：只给盒子的某个方向单独设置边框
➢ 属性名：border - 方位名词
➢ 属性值：连写的取值
内边距（padding）
➢ 作用：设置 边框 与 内容区域 之间的距离
➢ 属性名：padding
➢ 常见取值：
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | padding：10px | 四个方向都设置为10px |
| 两个值 | padding：10px 20px | 上下10px，左右20px |
| 三个值 | padding：10px 20px 30px | 上10px 左右20px 下30px |
| 四个值 | paddinig：10px 20px 30px 40px | 上10px 右20px 下30px 左40px |
➢ 记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！
➢ 盒子实际大小终极计算公式：
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
➢ 解决：当盒子被border和padding撑大后，如何满足需求？
• 自己计算多余大小，手动在内容中减去（手动内减）
内边距（padding）- 单方向设置
➢ 场景：只给盒子的某个方向单独设置内边距
➢ 属性名：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） - 单方向设置
➢ 场景：只给盒子的某个方向单独设置外边距
➢ 属性名：margin - 方位名词
➢ 属性值：数字 + px
外边距折叠现象 – ① 合并现象
➢ 场景：垂直布局 的 块级元素，上下的margin会合并
➢ 结果：最终两者距离为margin的最大值
➢ 解决方法：避免就好
• 只给其中一个盒子设置margin即可
外边距折叠现象 – ② 塌陷现象
➢ 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
➢ 结果：导致父元素一起往下移动
➢ 解决方法：
- 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
- 给父元素设置overflow：hidden
- 转换成行内块元素
- 设置浮动
行内元素的margin和padding无效情况
➢ 场景：给行内元素设置margin和padding时
➢ 结果：
- 水平方向的margin和padding布局中有效！
- 垂直方向的margin和padding布局中无效！
标准流
➢ 标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
➢ 常见标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
浮动
浮动作用
早期用于文字环绕
后来用于布局
浮动代码
flot:left 左浮动
flot:right 右浮动
浮动特点
- 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
• 相当于从地面飘到了空中 - 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素有特殊的显示效果
• 一行可以显示多个
• 可以设置宽高
➢ 注意点：
• 浮动的元素不能通过text-align:center或者margin:0 auto
清除浮动
额外标签法
➢ 操作：
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置 clear:both
➢ 特点：
• 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
单伪元素清除法
➢ 操作：用伪元素替代了额外标签
.clearfix::after{
content:'';
display:block;
clear:both;
}
➢ 特点：
• 优点：项目中使用，直接给标签加类即可清除浮动
双伪元素清除法
.clearfix::before,
.clearfix::after{
content:'';
display:table;
}
.clearfix::after{
clear:both;
}
➢ 特点：
• 优点：项目中使用，直接给标签加类即可清除浮动
给父元素设置overflow : hidden
➢ 操作：
- 直接给父元素设置 overflow : hidden
1590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
