CSS3入门

引入方式

CSS 常用的引入方式如下：

引入方式	语法/位置	作用范围	权重	开发建议
行内样式	HTML元素的 `style`属性	仅当前元素	最高 (1,0,0,0)	慎用，仅用于动态样式或最高优先级覆盖。
内部样式表	HTML的 `<head>`中的 `<style>`标签	当前HTML文档	取决于选择器	临时使用，适合Demo或单页特有样式。
外部样式表	通过 `<link>`标签链接独立的 `.css`文件	所有引入该文件的页面	取决于选择器	强烈推荐，是项目开发的标准方式。
`@import`规则	在 `<style>`标签或 `.css`文件内部	当前样式表及引入的样式表	取决于选择器	避免直接使用，应由构建工具管理。

行内样式

将CSS规则直接写在HTML元素的 style属性中。

代码示例：

<p style="color: #ff4757; font-weight: bold;">这是一个重要的提示。</p>
<button style="padding: 8px 16px; background-color: #2ed573; border: none; border-radius: 4px;">点击我</button>

详细说明：

优先级：拥有最高的样式权重（1,0,0,0），可以覆盖其他任何方式定义的样式（除非使用 !important且权重更高）。
优点：极致精准，立即生效，便于用JavaScript直接操作（如 element.style.color = ‘blue’）。
缺点：
1. 严重违反“内容与表现分离” 的原则，导致HTML结构混乱，难以维护。
2. 样式无法复用，同样的样式需要在多个元素上重复编写，增加代码量。
3. 会阻塞渲染（尽管单个影响小，但大量使用会影响页面首次绘制）。
适用场景：
1. 收到动态数据后，由JavaScript实时计算并注入的样式（例如，一个可拖动元素的实时位置）。
2. 在旧内容管理系统或特定框架中，用于微调某个元素的样式且确保一定能生效。
3. 编写HTML电子邮件时，为保证兼容性常大量使用。

内部样式表

概念：将CSS规则集中写在HTML文档 <head>部分的 <style>标签内。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内部样式表示例</title>
    <style>
        /* 在这里编写页面所有的CSS */
        body {
            font-family: ‘Microsoft YaHei‘, sans-serif;
            background-color: #f8f9fa;
        }
        .container {
            width: 1200px;
            margin: 0 auto;
        }
        .highlight {
            background-color: yellow;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="highlight">这个段落被高亮了。</p>
    </div>
</body>
</html>

详细说明：
- 优先级：其内部的CSS选择器按正常权重计算（如 .class权重为 0,1,0,0）。
- 优点：
  1. 实现了页面级的样式与结构分离，比行内样式更易于维护。
  2. 可以在单个文件内快速编写和预览效果，适合学习或制作简单的独立页面。
- 缺点：
  1. 样式无法跨页面复用。如果多个页面需要相同样式，必须在每个页面重复编写。
  2. 增加了单个HTML文件的体积，且无法被浏览器单独缓存，当用户访问同一网站的不同页面时，需要重复下载这些样式。
- 适用场景：
  1. 快速原型、Demo或练习项目。
  2. 只有一个页面的小型网站。
  3. 该页面拥有完全不与其他页面共享的独特样式。

外部样式表

概念：将CSS规则保存在一个或多个独立的 .css文件中，通过HTML的 <link>标签引入。

代码示例：

HTML文件 (index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的网站</title>
    <!-- 引入公共重置样式和主样式 -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
    <!-- 可以引入多个CSS文件 -->
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

CSS文件 (css/main.css):

/* 这是一个独立的CSS文件 */
.header { height: 60px; }
.nav-item { display: inline-block; }
.btn-primary {
    background: linear-gradient(to right, #4776E6, #8E54E9);
    color: white;
}

详细说明：
- 优先级：与内部样式表同级，取决于选择器权重。
- 优点：
  1. 彻底分离与最佳实践：完全实现HTML（结构）、CSS（表现）、JS（行为）的分离，代码结构清晰，利于团队协作和维护。
  2. 高效复用与缓存：同一个CSS文件可以被网站所有页面引用。浏览器会缓存该文件，用户首次加载后，访问其他页面无需重复下载，极大提升加载速度和用户体验。
  3. 便于项目管理与优化：可以按模块（如 layout.css， form.css）拆分样式文件，方便管理。生产环境中，可以使用构建工具（如Webpack、Vite）将它们合并、压缩，进一步优化性能。
- 缺点：在开发阶段，会产生额外的HTTP请求。但在HTTP/2多路复用普及后影响减小，且生产环境可通过打包合并来优化。
- 适用场景：所有正式的前端项目，无一例外都应作为首选方式。

@import规则

一种在CSS文件内部或<style>标签内引入其他CSS文件的方法，由CSS解析器处理。

在主CSS文件中引入:

/* main.css */
@import url(‘reset.css‘); /* 引入重置样式 */
@import url(‘components/buttons.css‘); /* 引入按钮组件样式 */

body {
    font-size: 16px;
}

在HTML的<style>标签中使用（不推荐）:

<style>
    @import url(‘theme.css‘);
    p { color: #333; }
</style>

详细说明：

优先级：被引入文件中的规则，其权重正常计算。
工作机制与问题：
1. 串行加载：浏览器必须先下载、解析包含 @import的CSS文件，遇到 @import指令后，才会开始下载被引入的CSS文件。这严重阻碍了并行加载，可能显著增加页面整体渲染时间。
2. 不利于性能优化：无法通过 <link>标签的 media属性或 rel=‘preload‘等方式进行更细粒度的资源加载控制。
现代用法：在基于Webpack、Vite等构建工具的项目中，可以在JavaScript或CSS模块中使用 @import（或ES Module的 import）语句来声明依赖。构建工具会在打包阶段处理这些指令，将它们合并或生成最优的资源加载策略，从而规避了浏览器中原生 @import的性能缺陷。

适用场景：

在由构建工具管理的现代化前端项目中使用。
需要根据媒体查询条件加载不同的CSS文件（例如 @import url(‘print.css‘) print;），但这种需求现在更推荐使用 <link>的 media属性实现。

最佳实践

首选方式：对于项目样式，无条件使用 <link>引入外部样式表。
避免使用：
- 避免在生产环境中直接使用 @import引入关键样式。
- 尽量避免使用行内样式，除非是动态样式或特定框架（如React的style对象）要求。
合理使用：
- 内部样式表可用于极小的单页demo或与当前页面强绑定的独特样式。
- @import可在由构建工具处理的CSS模块化代码中使用，或用于按媒体查询条件加载CSS。
性能与缓存：外部样式表能被浏览器缓存，是提升网站二次加载速度的关键。应利用构建工具对CSS进行合并与压缩。

选择器

基础选择器

选择器类型	语法示例	描述与作用	权重值 (Specificity)	代码示例与解释
通配选择器	`*`	匹配文档中的所有元素。常用于重置默认样式（如 `margin`, `padding`）。	0,0,0,0	`* { margin: 0; padding: 0; box-sizing: border-box; }` 解释：将所有元素的边距、内边距设为0，并设置为边框盒模型。
元素选择器	`div`、`p`、`h1`	根据HTML标签名来选择元素。也称为“标签选择器”。	0,0,0,1	`p { color: #333; line-height: 1.6; }` 解释：选择所有 `<p>`段落元素，并设置其文字颜色和行高。
类选择器	`.className`	根据元素的 `class`属性值来选择。一个元素可以有多个类，一个类也可用于多个元素。最常用的选择器之一。	0,0,1,0	`<div class="box active"></div>` `.box { border: 1px solid #ccc; }` `.active { background-color: yellow; }` 解释：`.box`选中所有 `class`包含 `box`的元素；`.active`会为元素添加黄色背景。
ID 选择器	`#idName`	根据元素的 `id`属性值来选择。ID在文档中应是唯一的。权重很高，应谨慎使用。	0,1,0,0	`<header id="main-header"></header>` `#main-header { height: 60px; background: blue; }` 解释：选中 `id`为 `main-header`的唯一元素，并设置其样式。
属性选择器	`[attr]`、`[attr=value]`	根据元素的属性及属性值来选择元素。非常灵活。	0,0,1,0 （与类选择器同级）	1. `[disabled] { opacity: 0.5; }` 选中所有带有 `disabled`属性的元素。 2. `input[type="text"] { border-color: blue; }` 选中 `type`属性为 `text`的 `<input>`元素。 3. `a[href^="https"]`(以...开头), `a[href$=".pdf"]`(以...结尾) 等。
后代选择器	`selectorA selectorB`	（空格连接）选择 selectorA 元素内部的所有后代 selectorB 元素。	权重为所有部分之和	`.article p { text-indent: 2em; }` 解释：选中所有在 `class="article"`的元素内部的* `<p>`元素，无论嵌套多深。*
子元素选择器	`selectorA > selectorB`	（大于号连接）选择 selectorA 元素的直接子元素 selectorB。只匹配一代。	权重为所有部分之和	`.menu > li { border-bottom: 1px solid #eee; }` 解释：只选中 `.menu`下一级的 `<li>`子元素，不会选中更深的 `<li>`。
相邻兄弟选择器	`selectorA + selectorB`	（加号连接）选择紧跟在 selectorA 之后的第一个同辈 selectorB 元素。	权重为所有部分之和	`h2 + p { margin-top: 0; }` 解释：选中紧跟在 `<h2>`后面的第一个 `<p>`段落。
通用兄弟选择器	`selectorA ~ selectorB`	（波浪号连接）选择 selectorA 之后的所有同辈 selectorB 元素。	权重为所有部分之和	`.active ~ li { color: gray; }` 解释：选中所有在 `.active`类元素之后的同级 `<li>`元素。
群组选择器	`selA, selB, selC`	（逗号连接）同时选中多个选择器对应的元素，并为它们应用相同的样式。	各自独立计算，不叠加	`h1, h2, .title, #main-heading { font-family: ‘Microsoft YaHei’; }` 解释：将上述列出的所有标题、类、ID 的字体统一设置为微软雅黑。

说明：

权重顺序：!important> 行内样式 > ID选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器 > 通配选择器
组合使用：这些基础选择器可以通过空格、>、+、~、, 等符号灵活组合，以精准定位目标元素
开发建议：优先使用类选择器，它复用性高且权重适中。谨慎使用ID选择器和!important，以免导致样式难以管理和覆盖

Keyboard shortcuts

编程笔记