一、 CSS的书写位置
1. 内联样式（行内样式）
- 在标签内部通过style属性设置元素样式
- 每次只能对一个标签生效
<h2 style="color: red;">CSS学习</h2>
2. 内部样式
- 写在 head 标签下的style标签内部
- 通过 css 选择器选中元素进行样式设置
<head>
<style>
选择器 {
属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
3. 外部样式表
<head>
<link rel="stylesheet" href="外部css路径">
</head>
- 这种方式可以使用到浏览器的缓存机制，进而加快网页加载速度，提高用户体验
二、 CSS的选择器
1. 常用选择器
1.1 元素选择器
1.2 id 选择器
- 根据元素的id属性值选中一个元素
- 语法：
#id名 { }
- id名不可以重复
1.3 类（class）选择器
- 根据元素的class属性值选中一组元素
- 语法：
.class名 { }
- class可以重名
- 同一个元素可以有多个 class
1.4 通配选择器（*）
2. 复合选择器
2.1 交集选择器（&&）
- 选择满足多个复合条件的元素
- 语法：
选择器1选择器2... { } ，多个选择器之间没有空格！！
- 如果有元素选择器，元素选择器必须放最前面
2.2 分组选择器（||）
- 同时选择多个选择器对应的元素
- 语法：
选择器1，选择器2，... { }
3. 关系选择器
3.1 子元素选择器
- 选择指定父元素的指定子元素
- 语法：
父元素 > 子元素
3.2 后代元素选择器
- 选中指定元素的指定后代元素
- 语法：
祖孙 后代 （中间有一个空格）
3.3 兄弟元素选择器
- 选择紧邻的下一个兄弟：
前一个兄弟元素 + 紧邻的下一个兄弟元素
- 选择后面所有的兄弟：
兄 ~ 弟
4. 属性选择器
- [属性名]：选择含有指定属性的元素
- [属性名 = 属性值]：选择含有指定属性和指定属性值的元素
- [属性名 ^= 属性值] ：选择属性值以指定值开头的元素
- [属性名 $= 属性值] ：选择属性值以指定值结尾的元素
- [属性名 *= 属性值] ：选择属性值中含有指定属性值的某些元素
5. 伪类（ : ）选择器
- 伪类是用来描述一个元素的特殊状态，是一种不存在的类
- 伪类一般都是以冒号 : 开头
| 伪类 |
说明 |
| :first-child |
所有元素中的第一个子元素 |
| :last-child |
所有元素中的最后一个子元素 |
| :nth-child(n) |
所有元素中的第n个子元素；2n 或 even 选中偶数位；2n+1 或 odd 选中奇数位 |
| :first-of-type |
同类型元素中的第一个元素 |
| :last-of-type |
同类型元素中的最后一个元素 |
| :nth-of-type(n) |
同类型元素中的第n个子元素；2n 或 even 选中偶数位；2n+1 或 odd 选中奇数位 |
| :not() |
将符合条件的元素从选择器中去除 |
| :link |
未访问过的链接（正常的链接） |
| :visited |
访问过的链接，只能修改颜色（出于隐私保护） |
| :hover |
鼠标移入的状态 |
| :active |
鼠标点击的状态 |
6. 伪元素（ :: ）
| 伪元素 |
说明 |
| ::first-letter |
首字母 |
| ::first-line |
第一行 |
| ::selection |
元素选中的部分 |
| ::after |
元素的最后的位置，要结合content属性使用 |
| ::before |
元素开始的位置，要结合content属性使用 |
7. 样式的继承
- 后代元素会继承祖先元素的样式
- 背景和布局等样式不会被继承
8. 选择器的权重
| 选择器 |
权重（优先级） |
| ! important |
最高的 |
| 内联样式 |
1000 |
| id选择器 |
100 |
| 类和伪类选择器 |
10 |
| 元素选择器 |
1 |
| 调配选择器 |
0 |
| 继承 |
没有优先级 |
- 比较选择权优先级时，要把所有选择器的权重进行相加在比较，但不会超过最大那个选择器的权重
- 如果优先级计算相同，则使用最后的一个
- 分组选择器是单独计算的
三、单位
1. 长度单位
1.1 像素（px）
- 屏幕（显示器）是由一个个像素点构成的
- 不同屏幕的像素大小不同，像素越小的显示越清晰
1.2 百分比
- 相对于父元素的百分比
- 可以使子元素随父元素的改变而变化
1.3 rem 和 em
- em 相对长度单位，相对于自身元素的字体大小计算
- rem 相对于根元素（html）的字体大小进行计算
2. 颜色单位
2.1 RGB值
- CSS中可以直接使用颜色名（英文名）来设置颜色
- RGB是通过配置R（red）、G（green）、B（blue）三原色的浓度来调整颜色
- 每一种颜色的范围都是 0 - 255（0% - 100%）
- 语法：
rgb (红,绿,蓝)
2.2 RGBA
- A代表不透明度，1表示完全不透明，0表示完全透明，0.5表示半透明
2.3 十六进制的RGB
- 语法：
#红绿蓝
- 颜色浓度 00 - ff，如：#ff00bb
- 如果颜色是两位两位的重复，可以简写，只写一个，如：#ffbbaa 简写为 #fba
2.4 HSL值
- H：色相 （0 - 360）
- S：饱和度（0% - 100%），即颜色浓度
- L：亮度（0% - 100%），颜色亮度
四、CSS盒模型
1. 文档流
- 文档流是网页的最底层，我们书写的都是在文档流
- 元素的两个状态：在文档流和脱离文档流
- 元素在文档流中
- 块元素：在页面中独占一行（自上向下垂直排列）；默认宽度是父元素宽度；默认高度是被内容撑开的高度
- 行内元素：不会独占一行，会自左向右水平排列，超过父元素宽度才会换行；默认宽度和高度是被内容撑开的
2. CSS盒（子）模型
- 所有元素都是一个矩形盒子，盒子由以下四部分组成
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
2.1 内容区（content）
- 元素中的所有子元素和内容都在内容区里面
- 内容区的大小由 weight 和 height 共同决定
2.2 边框（border）
- 边框是盒子的边缘，边框以内属于盒子内部，边框以外是盒子外部
- 边框的大小会影响盒子的大小
- 边框的三个必选值：宽度（border-width）、颜色（borde-color）、样式（borde-style），可以四条边分别指定
- 边框宽度：border-weight，必选（默认为3px）
- 边框颜色：border-color，必选（默认为black）
- 边框样式：border-style，必选（默认为none），可选值：none（不显示边框）、solid（实线）、dashed（虚线）、dotted（点状虚线）、double（双实线）
- 边框样式的简写：
border: weight color style (weight color style顺序可以更改，中间都是空格分隔）
CSS中四个值（上、右、下、左）的简写
- 设置四个值：上、右、下、左
- 设置三个值：上、左右、下
本文详细介绍了CSS的基础知识，包括CSS的书写位置、选择器的使用（元素选择器、ID选择器、类选择器等）、单位（像素、百分比、rem和em等）以及盒模型的概念，如内容区、内边距、边框和外边距。此外，还涵盖了浮动、定位和字体样式等内容，是学习CSS的入门指南。
最低0.47元/天 解锁文章
扫一扫
1540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
