CSS 基础

CSS

层叠样式表 (Cascading Style Sheets)
css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。
而css就可以分别为网页的各个层次设置样式。

三种使用方式

方式	优点	缺点	推荐程度
内联样式	简单、直接	不可复用、结构与表现耦合	不推荐
内部样式表	可复用、部分分离	仅限当前页面	不推荐
外部样式表	完全分离、可复用、支持缓存	需额外文件	✅ 推荐

行内样式

可以将css样式编写到元素的style属性当中
将样式直接编写到style属性中，这种样式我们称为内联样式
内联样式只对当前的元素的内容起作用，内联样式不方便复用
内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用

html

<p style="color:red;font-size:40px;">锄禾日当午，汗滴禾下土</p>
<p style="color:red;font-size:40px;">谁知盘中餐，粒粒皆辛苦</p>

内部样式表

可以将css样式编写到head中的style标签里
将样式表编写到style标签中，然后通过css选择器选中指定元素
然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用
将样式表写到style标签中，也可以使表现和结构进一步分离，它也是我们推荐的使用方式

html

<!-- style标签 写在 html文件的head 中 -->
<style type="text/css">
  p {
    color: red;
    font-size: 40px;
  }
</style>

外部样式表

还可以将样式表编写到外部的css文件中，然后通过link标签将外部的css文件引入到当前页面中，这样外部文件中的css样式表将会应用到当前页面中。
将css样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表可以在不同的页面中使用，
最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存
加快用户访问的速度，提高了用户体验，所以在开发中我们最推荐使用的方式就是外部的css文件

html

<!-- link标签 写在 html文件的head 中 -->
<link rel="stylesheet" type="text/css" href="style.css" />

css

// style.css 文件中的内容
p {
  color: red;
  font-size: 40px;
}

CSS语法

选择器声明块

选择器：通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上。
声明块：声明块紧跟在选择器的后边，使用一对 {} 括起来，声明块中实际上就是一组一组的名值对结构，这一组一组的名值对我们称为声明，在一个声明块中可以写多个声明，多个声明之间使用 ; 隔开，声明的样式名和样式值之间使用 : 来连接。
注释：作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中。

选择器（重要）

元素选择器

css

/* 为页面中的所有p元素，设置一个字体颜色为红色 */
/*
 * 元素选择器
 * 作用：通过元素选择器可以选取页面中的所有指定元素
 * 语法：标签名 {}
 */
p {
  color: red;
}

id选择器

css

/*
 * id选择器
 * - 通过元素的id属性值选中唯一的一个元素
 * - 语法：#id属性值 {}
 */
#id1 {
  font-size: 20px;
}

类选择器

html

<!-- 我们可以为元素设置class属性。class属性和id属性类似，
只不过class属性可以重复。拥有相同class属性值的元素，我们说他们是一组元素。
可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开。-->
<p class="p2 hello">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p2">锄禾日当午</p>

css

/*
 * 类选择器
 * - 通过元素的class属性值选中一组元素
 * - 语法：
 *   .class属性值 {}
 */
.p2 {
  color: red;
}

通配选择器

css

/*
 * 通配选择器
 * - 他可以用来选中页面中的所有的元素
 * - 语法：* {}
 */

并集 & 交集选择器

并集选择器

css

/*
 * 为id为p1的元素，class为p2的元素，还有h1，同时设置一个背景颜色为黄色
 */
/*
 * 选择器分组
 * - 通过选择器分组可以同时选中多个选择器对应元素
 * - 语法：选择器1, 选择器2, 选择器N {}
 */
#p1,
.p2,
h1 {
  background-color: yellow;
}

交集选择器

css

/*
 * 为拥有class为p3的span元素设置一个背景颜色为黄色
 *
 * 复合选择器（交集选择器）
 * - 作用：可以选中同时满足多个选择器的元素
 * - 语法：选择器1选择器2选择器N {}
 */
span.p3 {
  background-color: yellow;
}

/*
 * 对于id选择器来说，不建议使用复合选择器，因为 id 是唯一的。
 * p#p1 {
 *     background-color: red;
 * }
 */

后代选择器 & 子元素选择器

后代选择器

css

/*
 * 为div中的span设置一个颜色为绿色
 * 后代元素选择器
 * - 作用： 选中指定元素的指定后代元素
 * - 语法： 祖先元素 后代元素 {}
 */
div span {
  color: greenyellow;
}

子元素选择器

css

/*
 * 为div的子元素span设置一个背景颜色为黄色
 * 子元素选择器
 * - 作用： 选中指定父元素的指定子元素
 * - 语法： 父元素 > 子元素
 */
div > span {
  background-color: yellow;
}

IE6 及以下的浏览器不支持子元素选择器

属性选择器

属性选择器（Attribute Selectors）是 CSS 中一类强大的选择器，它允许你根据 HTML 元素的属性是否存在或属性值是否匹配特定条件来选中元素。属性选择器对大小写敏感

选择器	含义	示例	匹配的 HTML 元素
`[attr]`	存在 `attr` 属性	`[title]`	`<p title="hello">`
`[attr="val"]`	属性值完全等于 `val`	`[type="submit"]`	`<input type="submit">`
`[attr~="val"]`	属性值是空格分隔的列表，其中包含 `val`	`[class~="btn"]`	`<div class="btn primary">`
`[attr\|="val"]`	属性值以 `val` 开头，且后面是 `-` 或结束	`[lang\|="en"]`	`<html lang="en">` 或 `<html lang="en-US">`
`[attr^="val"]`	属性值以 `val` 开头（前缀）	`[href^="https"]`	`<a href="https://example.com">`
`[attr $ ="val"]`	属性值以 `val` 结尾（后缀）	`[href $ =".pdf"]`	`<a href="doc.pdf">`
`[attr*="val"]`	属性值包含 `val`（子串）	`[title*="home"]`	`<a title="go home now">`

兄弟选择器

css

/*
 * 为span后的一个p元素设置一个背景颜色为黄色
 * 后一个兄弟元素选择器
 * - 作用：可以选中一个元素后紧接着的指定的兄弟元素
 * - 语法：前一个 + 后一个
 */
span + p {
  background-color: yellow;
}

/*
 * 选中后边的所有兄弟元素
 * - 语法：前一个 ~ 后边所有
 */
span ~ p {
  background-color: yellow;
}

伪类和伪元素

特性	伪类	伪元素
作用	选择元素的状态或位置	创建或选中虚拟内容/部分
数量	一个元素可同时匹配多个伪类	一个元素只能有一个 `::before` 和一个 `::after`
语法	单冒号 `:`（如 `:hover`）	推荐双冒号 `::`（如 `::before`）
生成新元素	否	是（虚拟元素）

伪类

伪类用于选择元素的特定状态或特殊位置，不是真实存在于 HTML 中的类，而是由 CSS 提供的一种“虚拟类”。

常见伪类	说明
`:hover`	鼠标悬停时的状态
`:focus`	元素获得焦点时（如输入框被点击）
`:active`	元素被激活时（如点击按钮的瞬间）
`:visited`	已访问过的链接
`:first-child`	父元素的第一个子元素
`:nth-child(n)`	父元素的第 n 个子元素
`:not(selector)`	排除匹配 selector 的元素
`:first-of-type`	父元素的第一个指定类型的子元素
`:nth-of-type(n)`	父元素的第 n 个指定类型的子元素

css

a:hover {
  color: red;
}
p:first-child {
  font-weight: bold;
}

伪元素

伪元素用于创建不在文档中的虚拟元素，通常用来插入装饰性内容或选中内容的特定部分（如首行、首字母）。
语法（现代标准使用双冒号 ::，但单冒号 : 仍被兼容）

常见伪元素	说明
`::before`	在元素内容前插入内容
`::after`	在元素内容后插入内容
`::first-line`	选中元素的第一行文本
`::first-letter`	选中元素的第一个字母
`::selection`	选中用户高亮（选中）的文本
`::placeholder`	选中输入框或文本域中的占位符文本

css

p::first-letter {
  font-size: 2em;
  color: blue;
}
.quote::before {
  content: "“";
}
.quote::after {
  content: "”";
}

⚠️ 注意

::before 和 ::after 必须配合 content 属性使用，否则不会显示。

选择器优先级

像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承。
利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。
但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承，边框相关的样式、定位相关的样式。

当使用不同的选择器，选中同一个元素时并且设置相同的样式时，
这时样式之间产生了冲突，最终到底采用哪一个选择器定义的样式，由选择器的优先级（权重）决定
优先级高的优先显示

优先级	选择器类型	示例
🔴 最高	`!important`	`color: red !important;`
🟠 高	内联样式	`<div style="...">`
🟡 中高	ID 选择器	`#main`
🟢 中	类 / 属性 / 伪类	`.btn`, `[disabled]`, `:focus`
🔵 低	元素 / 伪元素	`p`, `::before`
⚪ 很低	通配符	`*`
⚪ 最低	继承	inherited styles

⚠️ 注意

!important
覆盖所有其他规则（包括内联样式）。应尽量避免使用，会破坏样式可维护性。
相同优先级时
后定义的规则胜出（CSS 的“层叠”特性）。
继承的样式
继承的样式优先级为 0，任何显式声明都会覆盖它。

长度单位

单位	类型	相对基准	受嵌套影响	响应式	典型用途
`px`	绝对单位	屏幕物理像素（固定值）	否	弱	固定尺寸（图标、边框、精确布局）
`%`	相对单位	父元素对应属性的值（如 `width: 50%` → 父宽的 50%）	否	中	自适应容器、流体布局
`em`	相对单位	当前元素自身的 `font-size` （若未设置，则继承父级）	是（嵌套会累积）	中	文本内间距、按钮 padding、局部缩放
`rem`	相对单位	根元素 `<html>` 的 `font-size`	否	强	全局布局、组件尺寸、可访问性设计
`vw`	视口单位	1% 的视口宽度（1vw = viewport width × 1%）	否	极强	全屏横幅、响应式标题、流体字体
`vh`	视口单位	1% 的视口高度（1vh = viewport height × 1%）	否	极强	全屏区块、登录页、动态高度区域

说明

视口（Viewport）：指浏览器内容可视区域，不包括地址栏、工具栏等

颜色单位

表示法	示例	透明度支持	兼容性
关键字	`red`, `transparent`	仅`transparent`	所有浏览器
Hex	`#ff0000`, `#f00`	否	所有浏览器
Hex (8位)	`#ff000080`	是	较新浏览器
RGB / RGBA	`rgb(255,0,0)`, `rgba(...,0.5)`	是	所有浏览器
HSL / HSLA	`hsl(0,100%,50%)`	是	IE9+
HWB	`hwb(0, 0%, 50%)`	是	较新浏览器

附录

附1：inline-block基线对齐

在使用 inline-block 元素时，它们的垂直对齐默认是按照基线（baseline）对齐。
如果某个元素内部没有内容或其 overflow 不为 visible，则它的基线会退化为底部 margin 边缘。
这会导致多个 inline-block 元素在垂直方向上出现错位。
解决方法：使用 vertical-align 属性（如 top、middle、bottom、baseline 等）来统一对齐方式。

附2：元素之间的关系

父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素

附3：a标签的伪类书写顺序

text

/*
 * 涉及到a的伪类一共有四个：
 *   :link
 *   :visited
 *   :hover
 *   :active
 * 但是注意：在书写时必须按照这个顺序来写，否则可能出现语法错误
 * 而这四个选择器的优先级是一样的。
 */

CSS 基础 ​

三种使用方式 ​

行内样式 ​

内部样式表 ​

外部样式表 ​

CSS语法 ​

选择器（重要） ​

元素选择器 ​

id选择器 ​

类选择器 ​

通配选择器 ​

并集 & 交集 选择器 ​

后代选择器 & 子元素选择器 ​

属性选择器 ​

兄弟选择器 ​

伪类和伪元素 ​

伪类 ​

伪元素 ​

选择器优先级 ​

长度单位 ​

颜色单位 ​

附录 ​

附1：inline-block基线对齐 ​

附2：元素之间的关系 ​

附3：a标签的伪类书写顺序 ​

CSS 基础

三种使用方式

行内样式

内部样式表

外部样式表

CSS语法

选择器（重要）

元素选择器

id选择器

类选择器

通配选择器

并集 & 交集选择器

后代选择器 & 子元素选择器

属性选择器

兄弟选择器

伪类和伪元素

伪类

伪元素

选择器优先级

长度单位

颜色单位

附录

附1：inline-block基线对齐

附2：元素之间的关系

附3：a标签的伪类书写顺序