Appearance
CSS 创建
「CSS 创建」指的是：把 CSS 写在哪里、如何和 HTML 关联起来。常见有三种方式：内联样式、内部样式表、外部样式表。了解它们的写法和适用场景，是组织好项目的第一步。
一、内联样式（Inline Style）
把样式直接写在元素的 style 属性里，只影响这一个元素。
写法
html
<p style="color: red; font-size: 18px;">这段文字是红色、18px。</p>- 属性之间用分号
;分隔。 - 不需要写选择器，因为已经指定了是「当前这个标签」。
优点与缺点
- 优点：写起来快，立刻能看到效果，适合临时调试。
- 缺点：
- 无法复用，每个元素都要写一遍。
- 结构和样式混在一起，不好维护。
- 无法利用「类」「伪类」等批量控制。
建议
日常开发尽量少用内联样式，多用在「临时改一下看效果」或某些必须由服务端动态输出样式的情况。
二、内部样式表（Embedded / Internal）
把 CSS 写在 HTML 文件里的 <style> 标签中，一般放在 <head> 里。
写法
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<style>
p {
color: blue;
font-size: 16px;
}
.highlight {
background: yellow;
}
</style>
</head>
<body>
<p>这段会应用上面 p 的样式。</p>
<p class="highlight">这段还会多一个黄色背景。</p>
</body>
</html>- 这里用的就是「选择器 + 属性: 值」的完整 CSS 语法。
- 作用范围是当前这个 HTML 页面，其他页面不会用到这段样式。
优点与缺点
- 优点：一个文件里就能写完 HTML + CSS，方便做单页 demo、小练习。
- 缺点：多个页面无法共用同一套样式，改样式要在每个页面里改。
建议
适合单页、练习、原型；正式项目更推荐用「外部样式表」。
三、外部样式表（External，最推荐）
把 CSS 写在单独的 .css 文件里，再在 HTML 里用 <link> 引入。这样多个页面可以共用一个或多个 CSS 文件。
1. 创建 CSS 文件
例如在项目里建一个 style.css：
css
/* style.css */
body {
font-family: sans-serif;
margin: 0;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}2. 在 HTML 中引入
在需要用到这些样式的 HTML 的 <head> 里写：
html
<head>
<meta charset="UTF-8">
<title>我的页面</title>
<link rel="stylesheet" href="style.css">
</head>rel="stylesheet"：表示这是样式表。href="style.css"：CSS 文件的路径（相对路径或绝对路径）。路径要写对，否则样式加载不出来。
若 CSS 在子目录，例如 css/style.css，则写：
html
<link rel="stylesheet" href="css/style.css">优点与缺点
- 优点：
- 多个 HTML 共用一个 CSS，改一处全站生效。
- 结构（HTML）和样式（CSS）分离，代码清晰，便于维护。
- 浏览器可以缓存 CSS 文件，加载更快。
- 缺点：多一个文件，需要保证路径正确。
建议
做网站、多页面项目时，优先使用外部样式表。
三种方式优先级（简要）
当同一元素同时被多种方式设置样式时，一般规则是：
- 内联样式 优先级最高（会覆盖内部和外部里对同一属性的设置）。
- 其次是 内部 和 外部（谁后出现谁覆盖前面的，和是否内联/外部无关，只看顺序）。
优先级和「选择器权重」也有关系，后面在 CSS !important 会再说明。
小结
| 方式 | 写法位置 | 适用场景 |
|---|---|---|
| 内联样式 | 标签的 style 属性 | 临时调试、极个别特例 |
| 内部样式表 | <style> 在 <head> 里 | 单页、小练习 |
| 外部样式表 | 独立 .css + <link> 引入 | 多页面、正式项目 |
- 学习时三种都可以试试；做项目时推荐以外部样式表为主。
- 引入外部 CSS 用：
<link rel="stylesheet" href="你的.css路径">。
下一节我们开始讲具体样式，从 CSS Backgrounds（背景） 开始。