CSS 基础入门：零基础也能学会
欢迎来到奇妙的网页造型世界！
想象一下，你正在建造一栋房子。如果你只用砖块、水泥和木头搭起一个框架，那就是房子的结构。这很像我们之前学习的 HTML，它负责网页的内容和结构：文本、图片、链接、表格等等，定义了页面上有什么以及它们之间的关系。
但是，一个只有框架的房子是不能住人的，它需要被装饰得漂亮、舒适、有风格。你需要给墙壁刷上颜色，选择地板的材质，布置家具，调整窗户的样式……这一切让房子变得独特和吸引人。在网页的世界里，负责进行这种“装饰”和“造型”的，就是 CSS！
CSS 的全称是 Cascading Style Sheets，中文翻译是 层叠样式表。它的主要作用是控制网页的外观和布局，让你的 HTML 结构呈现出各种各样的视觉效果。没有 CSS，网页将是单调的纯文本和基本元素堆砌；有了 CSS，网页才能变得五彩斑斓、布局灵活、用户体验良好。
为什么学习 CSS 对你很重要？
- 美观与吸引力： 决定了网站的“颜值”，是吸引用户第一眼的关键。
- 提升用户体验： 良好的排版、易读的字体、清晰的导航都能让用户更轻松地获取信息。
- 响应式设计的基础： CSS 是实现网页在不同设备（电脑、平板、手机）上自适应显示的关键技术。
- 提高开发效率： 将样式与结构分离，使得修改和维护网页更加方便。
- 职业发展： 无论是前端开发、网页设计还是全栈开发，CSS 都是必备技能。
如果你已经了解一些 HTML 基础，那么恭喜你，你已经迈出了学习网页开发的第一步。现在，让我们一起踏入 CSS 的世界，为你的网页穿上漂亮的衣服吧！
CSS 的三种引入方式
在学习 CSS 语法之前，我们首先需要知道如何将 CSS 代码应用到 HTML 文件中。CSS 主要有三种引入方式：
- 行内样式 (Inline Styles)
- 内部样式表 (Internal/Embedded Style Sheets)
- 外部样式表 (External Style Sheets)
让我们逐一看看它们是怎么工作的。
1. 行内样式 (Inline Styles)
行内样式是将 CSS 代码直接写在 HTML 元素的 style 属性中。
优点： 直接、简单，适用于只对个别元素应用少量样式的情况。
缺点：
* 样式与 HTML 结构混杂，不符合“结构与样式分离”的原则。
* 样式不能复用，如果你有多个相同的元素需要应用相同样式，你需要重复写很多次。
* 维护困难，修改样式需要找到每个元素逐个修改。
示例：
“`html
这是一个蓝色居中的标题
这是一段绿色的段落。
“`
在上面的例子中，我们直接在 <h1> 和 <p> 标签里使用了 style 属性来定义它们的颜色和对齐方式。
总结： 极不推荐在实际开发中大量使用行内样式，它通常只用于快速测试或特定极简场景。
2. 内部样式表 (Internal/Embedded Style Sheets)
内部样式表是将 CSS 代码写在 HTML 文件头部的 <head> 标签内的 <style> 标签中。
优点：
* 样式与 HTML 内容在同一个文件中，对于简单的单页面网站比较方便查看。
* 可以对当前页面内的多个元素应用样式，实现一定程度的复用。
缺点：
* 样式仍然与 HTML 结构混在一起，不符合分离原则。
* 样式不能跨页面复用。如果你的网站有多个页面，每个页面都需要复制一份相同的 CSS 代码。
* HTML 文件会变得很大，不便于管理。
示例：
“`html
这是一个蓝色居中的标题
这是一段绿色的段落。
这是另一段绿色的段落。
“`
在 <style> 标签内部，我们定义了针对 <h1> 和 <p> 元素的样式规则。这些规则将应用于当前页面中所有的 <h1> 和 <p> 元素。
总结： 比行内样式好，但仍然不适合大型或多页面的网站。适用于单个、样式独特的页面。
3. 外部样式表 (External Style Sheets)
外部样式表是将 CSS 代码完全独立地存放在一个 .css 文件中，然后在 HTML 文件的 <head> 标签中使用 <link> 标签将其关联起来。
优点：
* 强力推荐！ 这是实际开发中最常用、最推荐的方式。
* 结构与样式完全分离： HTML 文件只负责结构，CSS 文件只负责样式，职责明确，易于阅读和维护。
* 样式高度复用： 一个 .css 文件可以被多个 HTML 页面引用，实现全站风格统一，修改一次 CSS 文件，所有引用它的页面都会更新。
* 提高加载速度： CSS 文件会被浏览器缓存，访问其他页面时无需重新下载样式文件。
缺点：
* 对于极简单的单页应用或测试，需要额外创建一个 .css 文件。
示例：
首先，创建一个名为 style.css 的文件（你可以取任何名字，但 .css 后缀是必须的），将 CSS 代码写进去：
style.css 内容：
“`css
/ 这里是 CSS 代码 /
h1 {
color: blue;
text-align: center;
}
p {
color: green;
}
“`
然后，在你的 HTML 文件（例如 index.html）中，通过 <link> 标签引用这个 CSS 文件：
index.html 内容：
“`html
这是一个蓝色居中的标题
这是一段绿色的段落。
这是另一段绿色的段落。
“`
注意 <link> 标签的几个属性：
* rel="stylesheet"：表示这个链接的文件是一个样式表。
* href="style.css"：指定 CSS 文件的路径。如果 CSS 文件和 HTML 文件在同一个目录下，直接写文件名即可。如果在子文件夹，需要写相对路径，例如 css/style.css。
总结： 外部样式表是最佳实践，请优先使用这种方式。
学习建议： 从现在开始，当你练习 CSS 时，请尽量使用外部样式表的方式。
CSS 基本语法：规则集 (Ruleset)
无论你使用哪种引入方式，CSS 代码本身都由一条条的规则组成。每一条规则都告诉浏览器“针对哪个元素，应用什么样式”。
一个 CSS 规则通常由两个主要部分组成：选择器 (Selector) 和 声明块 (Declaration Block)。
css
/* 这是一条 CSS 规则 */
selector {
property: value; /* 声明 */
property: value; /* 声明 */
/* ... 更多声明 */
}
让我们分解一下：
-
选择器 (Selector):
- 位于规则的最前面。
- 它的作用是“选中”你想要应用样式的 HTML 元素。
- 例如：
h1选中所有<h1>元素，p选中所有<p>元素。后面我们会详细介绍各种选择器。
-
声明块 (Declaration Block):
- 紧跟在选择器后面，由一对花括号
{}包围。 - 里面包含了一条或多条声明。
- 紧跟在选择器后面，由一对花括号
-
声明 (Declaration):
- 每一条声明都由一个 属性 (Property) 和一个 值 (Value) 组成。
- 属性和值之间用冒号
:分隔。 - 每条声明的末尾必须用分号
;结束（最后一条声明的分号可以省略，但为了规范和防止出错，建议都加上）。 - 属性 (Property): 你想要修改的 CSS 样式名称，比如
color(颜色)、font-size(字体大小)、text-align(文本对齐)。 - 值 (Value): 你想要给这个属性设置的具体值，比如
blue(蓝色)、16px(16像素)、center(居中)。
示例规则：
“`css
p { / 选择器：选中所有
元素 /
color: red; / 声明1：将文本颜色设置为红色 /
font-size: 18px; / 声明2：将字体大小设置为 18 像素 /
}
h2 { / 选择器：选中所有
元素 /
text-align: center; / 声明1：将文本对齐方式设置为居中 /
border: 1px solid black; / 声明2：给元素添加一个 1像素 粗细、实线、黑色的边框 /
margin-bottom: 20px; / 声明3：设置下外边距为 20 像素 /
}
“`
重要提示： CSS 代码对空格和换行不敏感（在选择器、属性、值和分号之间）。你可以在声明之间、规则之间自由地使用空格和换行，以提高代码的可读性。上面的示例就使用了换行和缩进。
核心概念一：选择器 (Selectors)
选择器是 CSS 的灵魂之一，它决定了你的样式将作用于哪些 HTML 元素。掌握各种选择器是编写高效、灵活 CSS 的关键。
最基础和常用的选择器包括：
-
元素选择器 (Type Selector):
- 直接使用 HTML 元素的标签名作为选择器。
- 选中页面上所有该类型的元素。
- 示例：
p { ... }(选中所有<p>)，h1 { ... }(选中所有<h1>)，div { ... }(选中所有<div>)。
-
类选择器 (Class Selector):
- 选中所有带有特定
class属性的元素。 - 在 HTML 中，通过
class="classname"给元素添加类名。一个元素可以有多个类名，用空格分隔，如<p class="intro highlight">。 - 在 CSS 中，类选择器以一个点号
.开头，后面紧跟类名。 - 优点： 可以对任意 HTML 元素应用样式，并且同一个类名可以被多个元素使用，实现样式的复用。这是非常常用的选择器。
- 示例 HTML：
html
<p class="warning">这是一个警告信息。</p>
<div class="box">这是一个盒子。</div>
<span class="warning">这也是一个警告。</span> -
示例 CSS：
“`css
.warning { / 选中所有 class 包含 warning 的元素 /
color: red;
font-weight: bold;
}.box { / 选中所有 class 包含 box 的元素 /
border: 1px solid blue;
padding: 10px;
}
“`
- 选中所有带有特定
-
ID 选择器 (ID Selector):
- 选中带有特定
id属性的唯一元素。 - 在 HTML 中，通过
id="idname"给元素添加 ID。在一个 HTML 页面中，同一个 ID 值只能被使用一次。 - 在 CSS 中，ID 选择器以一个井号
#开头，后面紧跟 ID 名。 - 优点： 精确选中页面上的一个唯一元素。
- 缺点： ID 具有很高的优先级（后面会讲），且不能复用，不如类选择器灵活，因此在 CSS 中使用频率相对较低，更多用于 JavaScript 或页面内部跳转锚点。
- 示例 HTML：
html
<div id="header">网站头部</div>
<p id="main-content">主要内容</p> -
示例 CSS：
“`css
#header { / 选中 id 为 header 的元素 /
background-color: #f0f0f0;
padding: 20px;
}main-content { / 选中 id 为 main-content 的元素 /
line-height: 1.5;}
“`
- 选中带有特定
总结选择器优先级（初步了解）：
- ID 选择器（#）优先级最高。
- 类选择器（.）和属性选择器优先级次之。
- 元素选择器（标签名）优先级最低。
这意味着，如果一个元素同时被多种选择器选中，优先级高的选择器定义的样式会覆盖优先级低的选择器定义的样式。
除了这三种基本选择器，还有很多更复杂的选择器，例如：
* 组合选择器（如 div p 选中 div 内部的所有 p）
* 伪类选择器（如 :hover 鼠标悬停时）
* 伪元素选择器（如 ::before 在元素内容前插入内容）
* 属性选择器（如 [type="text"] 选中所有 type 属性为 text 的元素）
但在入门阶段，先牢固掌握元素选择器、类选择器和 ID 选择器已经足够你开始美化网页了。
核心概念二：常用 CSS 属性 (Properties)
了解了如何选中元素，接下来就是学习如何修改它们的样式了。这需要掌握各种 CSS 属性。下面列举一些最常用、最基础的属性及其值的用法。
1. 文本样式 (Text Styling)
-
color: 设置文本颜色。- 值可以是颜色名称（如
red,blue）、十六进制值（如#ff0000）、RGB 值（如rgb(255, 0, 0)）等。 - 示例：
color: blue;,color: #333;,color: rgb(0, 128, 0);
- 值可以是颜色名称（如
-
font-family: 设置字体。- 值是字体名称列表，浏览器会按顺序查找用户系统中安装的字体。最后通常会指定一个通用字体族（如
serif,sans-serif,monospace），以防前面列出的字体都找不到。 - 如果字体名称包含空格，需要用引号括起来。
- 示例：
font-family: "Microsoft YaHei", sans-serif;,font-family: Arial, Helvetica, sans-serif;
- 值是字体名称列表，浏览器会按顺序查找用户系统中安装的字体。最后通常会指定一个通用字体族（如
-
font-size: 设置字体大小。- 值可以是像素
px、相对单位em、rem、百分比%等。入门阶段使用px比较直观。 - 示例：
font-size: 16px;,font-size: 1.2em;,font-size: 120%;
- 值可以是像素
-
font-weight: 设置字体粗细。- 值可以是关键字
normal(普通),bold(粗体)，或数字（100-900，通常 400 对应normal，700 对应bold）。 - 示例：
font-weight: bold;,font-weight: 700;
- 值可以是关键字
-
text-align: 设置文本对齐方式。- 值可以是
left(左对齐),right(右对齐),center(居中对齐),justify(两端对齐，使文本充满整行)。 - 示例：
text-align: center;
- 值可以是
-
text-decoration: 设置文本装饰线。- 值可以是
none(无装饰，常用于去掉链接的下划线),underline(下划线),overline(上划线),line-through(删除线)。 - 示例：
text-decoration: none;
- 值可以是
-
line-height: 设置行高。- 控制文本行之间的垂直距离。值可以是数字（相对于字号的倍数）、像素
px、百分比%等。 - 常用值是 1.5 到 2，可以提高文本的可读性。
- 示例：
line-height: 1.5;,line-height: 24px;
- 控制文本行之间的垂直距离。值可以是数字（相对于字号的倍数）、像素
2. 颜色与背景 (Color and Background)
-
color: （前面已讲，设置文本颜色） -
background-color: 设置元素的背景颜色。- 值同
color。 - 示例：
background-color: yellow;,background-color: #eee;
- 值同
-
background-image: 设置元素的背景图片。- 值使用
url()函数指定图片路径。 - 示例：
background-image: url('images/background.jpg');
- 值使用
-
background-repeat: 控制背景图片是否重复以及如何重复。- 值可以是
no-repeat(不重复),repeat(水平垂直都重复),repeat-x(只水平重复),repeat-y(只垂直重复)。 - 示例：
background-repeat: no-repeat;
- 值可以是
-
background-position: 设置背景图片的起始位置。- 值通常是一对关键词或百分比/像素值，如
top center,bottom right,50% 50%,10px 20px。 - 示例：
background-position: center;,background-position: top right;
- 值通常是一对关键词或百分比/像素值，如
-
background-size: 控制背景图片的大小。- 值可以是具体尺寸（如
200px 100px）、百分比、cover(覆盖整个元素，可能会裁剪图片)、contain(包含在元素内，保持图片比例)。 - 示例：
background-size: cover;
- 值可以是具体尺寸（如
3. 尺寸 (Dimensions)
-
width: 设置元素的宽度。- 值可以是像素
px、百分比%(相对于父元素的宽度)、auto(默认值，根据内容或父元素自动计算)。 - 示例：
width: 300px;,width: 50%;,width: auto;
- 值可以是像素
-
height: 设置元素的高度。- 值可以是像素
px、百分比%(相对于父元素的高度，但父元素通常需要有明确的高度)、auto(默认值，根据内容自动计算)。 - 示例：
height: 200px;,height: auto;
- 值可以是像素
-
max-width: 设置元素的最大宽度。- 防止元素在视口变大时无限变宽，常用于响应式设计。
- 示例：
max-width: 800px;
-
max-height: 设置元素的最大高度。- 示例：
max-height: 500px;
- 示例：
-
min-width: 设置元素的最小宽度。- 示例：
min-width: 300px;
- 示例：
-
min-height: 设置元素的最小高度。- 示例：
min-height: 100px;
- 示例：
4. 边框 (Border)
border 是一个复合属性，用于设置元素的边框。它通常包含三个值：边框的宽度、样式和颜色。
-
border-width: 边框宽度。- 值可以是像素
px或预定义值thin,medium,thick。 - 示例：
border-width: 1px;,border-width: thick;
- 值可以是像素
-
border-style: 边框样式。- 常用值有
solid(实线),dashed(虚线),dotted(点线),none(无边框)。 - 示例：
border-style: solid;
- 常用值有
-
border-color: 边框颜色。- 值同
color。 - 示例：
border-color: black;
- 值同
-
border: 复合属性，可以一次性设置边框的宽度、样式和颜色。顺序不固定，但通常是：border: [width] [style] [color];- 示例：
border: 1px solid black;(最常用)
- 示例：
你也可以单独设置元素的某一边框，例如：
* border-top, border-bottom, border-left, border-right：设置整个边框（宽度 样式 颜色）。
* border-top-width, border-top-style, border-top-color 等：设置某个方向边框的某个属性。
示例：
css
div {
border: 2px dashed blue; /* 所有边 2px 蓝色虚线 */
border-bottom: 5px solid red; /* 底部边框是 5px 红色实线 (会覆盖上面的底部样式) */
}
核心概念三：盒模型 (Box Model)
理解 CSS 的盒模型是掌握网页布局的关键！CSS 将所有 HTML 元素都视为一个矩形的“盒子”，即使它看起来不是矩形（比如一个圆形图片，它的盒子仍然是矩形的）。
这个“盒子”由四个部分组成，从内到外分别是：
-
内容区域 (Content):
- 元素的实际内容，比如文本、图片等。
- 其大小由元素的
width和height属性决定（默认情况下，或者当box-sizing属性设置为content-box时）。
-
内边距 (Padding):
- 内容区域和边框之间的空间。
- 设置内边距会增加盒子的大小。
- 背景颜色或背景图片会延伸到内边距区域。
- 用于将内容与边框或元素边缘隔开。
-
边框 (Border):
- 围绕内边距的线条。
- 前面已经讲过如何设置边框的样式、宽度和颜色。
- 设置边框也会增加盒子的大小。
-
外边距 (Margin):
- 边框外面的空间，用于分隔不同的元素。
- 设置外边距不会增加盒子的背景区域，它是完全透明的。
- 相邻元素的垂直外边距有时会发生外边距合并 (Margin Collapse) 现象。
可视化盒模型：
+-------------------------------------+
| Margin |
| +-------------------------------+ |
| | Border | |
| | +-----------------------+ | |
| | | Padding | | |
| | | +---------------+ | | |
| | | | | | | |
| | | | Content | | | |
| | | | | | | |
| | | +---------------+ | | |
| | | Padding | | |
| | +-----------------------+ | |
| | Border | |
| +-------------------------------+ |
| Margin |
+-------------------------------------+
设置内边距 (Padding)
-
padding-top,padding-bottom,padding-left,padding-right: 分别设置上、下、左、右的内边距。- 值可以是像素
px、百分比%等。 - 示例：
padding-top: 10px;,padding-left: 20px;
- 值可以是像素
-
padding: 复合属性，可以一次性设置所有方向的内边距。- 一个值：
padding: 10px;(所有方向都是 10px) - 两个值：
padding: 10px 20px;(上下 10px，左右 20px) - 三个值：
padding: 10px 20px 15px;(上 10px，左右 20px，下 15px) - 四个值：
padding: 10px 20px 15px 25px;(上 10px，右 20px，下 15px，左 25px，顺序：上 右 下 左，顺时针)
- 一个值：
设置外边距 (Margin)
-
margin-top,margin-bottom,margin-left,margin-right: 分别设置上、下、左、右的外边距。- 值可以是像素
px、百分比%、auto(常用于块级元素的水平居中)。 - 示例：
margin-bottom: 20px;,margin-right: 15px;
- 值可以是像素
-
margin: 复合属性，可以一次性设置所有方向的外边距。用法同padding。- 一个值：
margin: 10px;(所有方向) - 两个值：
margin: 10px 20px;(上下 10px，左右 20px) - 三个值：
margin: 10px 20px 15px;(上 10px，左右 20px，下 15px) - 四个值：
margin: 10px 20px 15px 25px;(上 右 下 左)
- 一个值：
-
水平居中技巧： 对于块级元素（后面会讲
display属性），如果设置了固定的width，可以通过设置margin: 0 auto;来实现水平居中。auto会让浏览器自动分配左右的外边距。
示例：
css
.my-box {
width: 200px; /* 内容区域宽度 */
height: 100px; /* 内容区域高度 */
padding: 20px; /* 内边距，盒子会变大 */
border: 5px solid green; /* 边框，盒子会变大 */
margin: 30px auto; /* 上下外边距 30px，左右 auto 实现水平居中 */
background-color: lightblue;
}
在这个例子中，盒子的总宽度实际上是 200px (内容) + 20px (左内边距) + 20px (右内边距) + 5px (左边框) + 5px (右边框) = 250px。盒子的总高度是 100px (内容) + 20px (上内边距) + 20px (下内边距) + 5px (上边框) + 5px (下边框) = 150px。外边距 30px auto 在盒子外部增加了空间。
box-sizing 属性
默认情况下（box-sizing: content-box;），width 和 height 设置的是内容区域的尺寸。内边距和边框会增加盒子的总尺寸。
但有时候，我们希望 width 和 height 设置的是整个盒子（包括内容、内边距和边框）的尺寸。这时，我们可以使用 box-sizing: border-box;。这是很多现代 CSS 框架和开发者的首选设置。
示例：
“`css
.box-content-box {
width: 200px; / 内容宽 200px /
padding: 20px;
border: 5px solid black;
/ 实际总宽 = 200 + 202 + 52 = 250px /
}
.box-border-box {
width: 200px; / 总宽 200px (包含内边距和边框) /
padding: 20px;
border: 5px solid red;
box-sizing: border-box;
/ 实际总宽 = 200px /
/ 内容宽 = 200 – 202 – 52 = 150px /
}
``box-sizing: border-box;` 让计算盒子尺寸变得更直观。
使用
核心概念四：显示类型 (Display)
每个 HTML 元素都有一个默认的 display 属性值，这决定了它在页面上的布局行为。最常见的两种类型是块级元素和行内元素。还有一种常用的类型是行内块级元素。
-
块级元素 (Block-level Elements):
- 特点：
- 总是从新的一行开始。
- 会尽可能占据其父元素的全部宽度。
- 可以设置
width,height,margin-top,margin-bottom,padding-top,padding-bottom以及水平方向的margin和padding。
- 常见块级元素：
<div>,<p>,<h1>到<h6>,<ul>,<ol>,<li>,<form>,<header>,<footer>,<article>,<section>等。
- 特点：
-
行内元素 (Inline Elements):
- 特点：
- 不会独占一行，多个行内元素可以在同一行上显示。
- 宽度和高度由其内容决定，不能设置
width和height。 - 不能设置
margin-top和margin-bottom。水平方向的margin和padding可以设置，但垂直方向的padding会影响背景区域但不影响布局。
- 常见行内元素：
<span>,<a>,<img>,<input>,<button>,<strong>,<em>等。
- 特点：
-
行内块级元素 (Inline-block Elements):
- 特点：
- 像行内元素一样，可以在同一行上显示。
- 像块级元素一样，可以设置
width,height,margin和padding。
- 用途： 常用于需要控制尺寸和间距，但又希望它们能在同一行排列的元素，比如导航菜单项、小卡片等。
- 默认是行内块级的元素不多，但我们可以通过 CSS 将任何元素设置为
display: inline-block;。 - 常见默认行内块元素：
<button>,<input>,<textarea>,<select>,<img>(虽然通常被归类为行内替换元素，但行为上接近 inline-block)。
- 特点：
使用 display 属性改变元素的显示类型
你可以使用 display 属性来改变元素的默认显示类型：
display: block;：将元素显示为块级元素。display: inline;：将元素显示为行内元素。display: inline-block;：将元素显示为行内块级元素。display: none;：隐藏元素，使其不占空间，就像不存在一样（与visibility: hidden;不同，visibility: hidden;会隐藏元素但仍然占据空间）。
示例：
“`css
/ 将所有
li {
display: inline-block;
margin-right: 10px; / 给它们之间添加水平间距 /
padding: 5px;
border: 1px solid grey;
}
/ 将一个 span 元素显示为块级，使其独占一行并可以设置宽高 /
.my-block-span {
display: block;
width: 100px;
height: 50px;
background-color: lightgreen;
}
“`
理解不同 display 类型元素的行为对于进行网页布局至关重要。
层叠与继承 (Cascading and Inheritance)
CSS 的全称是“层叠样式表”，层叠 (Cascading) 是它的核心概念之一。它解释了当多个样式规则应用于同一个元素时，浏览器如何决定最终应该使用哪个样式。层叠顺序大致遵循：
- 重要性 (Importance): 带有
!important标记的规则 > 普通规则。 - 来源 (Origin): 作者样式表 (你写的CSS) > 浏览器默认样式表。
- 选择器优先级 (Specificity): 优先级高的规则 > 优先级低的规则。（前面提到的 ID > Class > Type）
- 书写顺序 (Order): 如果优先级和来源都相同，后出现的规则会覆盖先出现的规则。
这个机制确保了样式的灵活性和可控性。对于初学者来说，了解选择器优先级和书写顺序的影响是最直接的。
继承 (Inheritance) 是指某些 CSS 属性可以从父元素“继承”到子元素。
- 可继承的属性： 主要是一些文本相关的属性，如
color,font-family,font-size,text-align,line-height等。 - 不可继承的属性： 大多数盒模型属性（
width,height,margin,padding,border）、背景属性、布局属性（display,position,float等）是不可继承的。
示例：
“`html
这段文字是蓝色的。
这段文字也是蓝色的。
``div
在这个例子中，的color: blue;属性被p和span子元素继承了，所以它们的文本也是蓝色的。但border: 1px solid black;属性不会被继承，所以p和span` 没有边框。
理解继承可以帮助你更高效地编写 CSS，避免重复设置一些文本样式。
实践：创建一个简单的样式页面
现在，让我们把学到的知识综合起来，创建一个简单的 HTML 页面并用 CSS 进行美化。
1. 创建 HTML 文件 (index.html)
“`html
欢迎学习 CSS 基础！
什么是 CSS？
CSS (Cascading Style Sheets) 是一种用于描述 HTML 或 XML（包括各种 XML 方言，如 SVG、MathML 或 XHTML）文档呈现的样式表语言。
CSS 描述了在屏幕、纸质、音频等其他媒体上元素应该如何被渲染的问题。
CSS 的作用
通过使用 CSS，你可以极大地提升网页的视觉效果和用户体验。它使得内容（HTML）和表现（CSS）分离，提高了网站的可维护性和开发效率。
盒模型示例
这个 div 展示了盒模型的概念：内容、内边距、边框、外边距。
显示类型示例
我是 Span 1 (Inline-block)
我是 Span 2 (Inline-block)
我是 Span 3 (Inline)
我是 Span 4 (Inline)
“`
2. 创建 CSS 文件 (style.css)
“`css
/ style.css /
/ 全局样式或重置样式 /
body {
font-family: “Microsoft YaHei”, sans-serif; / 设置页面默认字体 /
line-height: 1.6; / 设置默认行高 /
margin: 0; / 移除 body 默认外边距 /
background-color: #f4f4f4; / 设置页面背景色 /
color: #333; / 设置页面默认文本颜色 /
}
/ 头部样式 /
header {
background-color: #333;
color: #fff;
padding: 20px 0; / 上下内边距 20px，左右 0 /
text-align: center;
margin-bottom: 30px; / 底部外边距 /
}
header h1 {
margin: 0; / 移除 h1 默认外边距 /
font-size: 2.5em; / 相对于父元素字号的 2.5 倍 /
}
/ 内容容器 /
.container {
width: 80%; / 容器宽度占父元素 (body) 的 80% /
margin: 0 auto; / 上下外边距 0，左右 auto 实现水平居中 /
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); / 添加阴影效果 /
}
/ 章节样式 /
section {
margin-bottom: 30px; / 章节底部外边距 /
padding-bottom: 20px; / 章节底部内边距 /
border-bottom: 1px solid #eee; / 章节底部浅灰色边框 /
}
section:last-child {
border-bottom: none; / 最后一个 section 不需要底部边框 /
}
section h2 {
color: #555;
border-left: 5px solid #007bff; / 左边框作为装饰 /
padding-left: 10px; / 内边距与左边框隔开 /
}
/ 特定类样式 /
.highlight {
color: #007bff; / 高亮文本颜色 /
font-weight: bold;
}
/ 盒模型示例样式 /
.box-example {
width: 300px;
padding: 20px;
border: 5px dashed orange;
margin: 30px auto; / 水平居中 /
background-color: #ffeeba;
box-sizing: border-box; / 设置 box-sizing /
text-align: center;
}
.box-example p {
margin: 0; / 移除段落默认外边距，避免影响父元素布局 /
}
/ 显示类型示例样式 /
.display-example {
margin-top: 30px;
border: 1px solid purple;
padding: 10px;
}
.display-example h3 {
color: purple;
}
.inline-block-span {
display: inline-block; / 设置为行内块 /
width: 150px; / 可以设置宽度 /
height: 40px; / 可以设置高度 /
margin: 5px; / 可以设置外边距 /
padding: 5px; / 可以设置内边距 /
border: 1px solid green;
background-color: #e2f0cb;
text-align: center;
line-height: 40px; / 使文本垂直居中 /
}
.block-div {
display: block; / 默认就是 block，这里只是强调 /
width: 90%; / 可以设置宽度 /
height: 50px; / 可以设置高度 /
margin: 10px auto; / 水平居中，上下外边距 /
background-color: #b4e0ff;
text-align: center;
line-height: 50px; / 使文本垂直居中 /
}
.inline-span {
display: inline; / 默认就是 inline /
border: 1px solid red; / border 可以显示 /
padding: 5px; / 水平 padding 可以显示，垂直 padding 不影响布局 /
margin: 5px; / 水平 margin 可以显示，垂直 margin 无效 /
background-color: #ffcccb;
/ 注意：这里设置 width/height 是无效的 /
}
/ 底部样式 /
footer {
text-align: center;
margin-top: 40px;
padding: 20px 0;
background-color: #333;
color: #fff;
font-size: 0.9em;
}
footer p {
margin: 0; / 移除段落默认外边距 /
}
“`
将这两个文件保存在同一个文件夹中，然后用浏览器打开 index.html 文件，你就能看到一个初步经过 CSS 美化的页面了！
通过修改 style.css 文件中的属性值，或者添加新的规则，你可以实时看到页面外观的变化。尝试修改颜色、字体大小、边距、边框样式等等，多动手实践是学习 CSS 最有效的方式。
CSS 调试技巧
在编写 CSS 时，样式不生效或显示不正确是很常见的事情。这时，就需要进行调试。浏览器开发者工具 (Developer Tools) 是你的最佳帮手。
几乎所有现代浏览器（Chrome, Firefox, Edge, Safari）都提供了开发者工具。通常可以通过右键点击页面元素，选择“检查” (Inspect) 或“审查元素” (Inspect Element) 来打开它，或者使用快捷键 F12。
在开发者工具中，你可以：
- 检查元素 (Elements/Inspector 面板): 查看 HTML 结构，以及选中元素的 CSS 样式。你可以看到哪些规则应用了该元素，哪些规则被覆盖了，以及样式的来源（哪个文件，哪一行）。
- 修改样式： 在开发者工具中直接修改元素的 CSS 属性值，或者临时添加/删除 CSS 规则，实时查看效果，但这些修改不会保存到你的 CSS 文件中。
- 查看盒模型： 在 Elements 面板中选中一个元素后，通常可以在右侧或下方找到一个图示，清晰地展示该元素的 Content, Padding, Border, Margin 的尺寸。
- 查看计算样式 (Computed Tab): 查看元素最终生效的所有 CSS 属性及其计算后的值，这对于理解继承和层叠非常有帮助。
学会使用开发者工具进行调试，能够极大地提高你解决 CSS 问题的效率。
接下来可以学习什么？
恭喜你！通过学习上面的内容，你已经掌握了 CSS 最基础也是最重要的概念：如何引入 CSS、基本语法、常用选择器、基本属性、盒模型以及显示类型。这为你进一步深入学习 CSS 打下了坚实的基础。
接下来，你可以继续探索 CSS 更高级和实用的主题：
- 更多选择器： 伪类（
:hover,:active,:focus,:nth-child等）、伪元素（::before,::after）、组合选择器（后代、子代、相邻兄弟、通用兄弟）。 - 布局方式：
- 浮动 (Float): 早期用于图文混排和简单的多列布局（现在较少用于主要布局）。
- 定位 (Position): 控制元素在页面上的精确位置（
static,relative,absolute,fixed,sticky）。 - Flexbox (弹性盒子): 一维布局模型，用于在一行或一列上对齐和分布空间，非常适合构建导航、列表等。
- Grid (网格布局): 二维布局模型，用于将页面分割成行和列，非常适合构建整个页面的布局框架。
- 响应式设计 (Responsive Design): 使用媒体查询 (
@media) 根据不同设备（屏幕大小）应用不同的样式。 - CSS 单位： 深入理解
em,rem,vh,vw等相对单位。 - 伪类和伪元素的高级用法。
- 转换 (Transform)、过渡 (Transition) 和动画 (Animation): 让你的页面动起来。
- CSS 预处理器： 如 Sass, Less，提供变量、嵌套、混合等功能，提高 CSS 的编写效率和可维护性。
- CSS 框架： 如 Bootstrap, Tailwind CSS，提供预设的样式和组件，帮助快速构建页面。
CSS 的知识体系非常庞大，但不要被吓倒。一步一个脚印，通过不断地实践和项目练习，你会越来越熟练。
总结与鼓励
在这篇文章中，我们从零开始认识了 CSS，学习了它的重要性、三种引入方式（重点是外部样式表）、基本语法（选择器、属性、值、声明、规则集）、核心概念（常用属性、盒模型、显示类型）以及层叠与继承的原理。我们还通过一个简单的例子进行了实践，并了解了调试的基本方法。
CSS 是一门实践性很强的语言。理论知识固然重要，但只有通过大量的练习，不断尝试不同的属性和值，去观察它们对页面产生的影响，你才能真正掌握它。
不要害怕出错，错误是学习过程中最宝贵的经验。当你遇到问题时，学会查阅文档（MDN Web Docs 是非常好的资源），使用开发者工具，或者在网上搜索答案。
记住，每一个前端高手都是从写第一行 CSS 代码开始的。保持好奇心和耐心，享受将静态的 HTML 变成生动有趣的网页的过程吧！
祝你在 CSS 的学习旅程中一帆风顺！