CSS入门与精通
CSS基础语法
为网页穿上“外衣”
如果说HTML是网页的骨架，那么CSS（层叠样式表）就是给这个骨架穿上的漂亮衣服。它负责网页的视觉表现，比如颜色、字体和布局。要让CSS生效，首先需要将它引入到你的HTML文件中。有三种主要方式可以做到这一点。
- 外部样式表 (External Stylesheet) 这是最常用也是最推荐的方式。你将所有的CSS规则写在一个单独的
.css文件中，然后在HTML的<head>部分使用<link>标签来引用它。这样做的好处是内容与样式完全分离，便于维护，而且多个页面可以共用同一个样式文件。
<!-- 在 HTML 文件中 -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* 在 styles.css 文件中 */
body {
font-family: sans-serif;
}
- 内部样式表 (Internal Stylesheet) 你可以将CSS代码直接放在HTML文件的
<head>部分，并用<style>标签包裹起来。这种方式适用于单个页面的特殊样式，但如果多个页面都需要这些样式，就会产生代码冗余。
<head>
<style>
p {
color: blue;
}
</style>
</head>
- 内联样式 (Inline Styles) 这种方式直接将样式写在HTML元素的
style属性中。它拥有最高的优先级，会覆盖其他两种方式定义的样式。不过，内联样式会使HTML代码变得混乱，难以维护，所以通常只在特殊情况下或者用于测试时使用。
<p style="color: red; font-size: 16px;">这是一个红色的段落。</p>
CSS语法结构
无论你选择哪种引入方式，CSS的语法规则都是一样的。它由两个主要部分构成：选择器 (Selector) 和 声明块 (Declaration Block)。
把CSS规则想象成一条指令：“嘿，找到这个元素，然后把它变成这样。”
- 选择器 负责“找到这个元素”。它指向你想要设置样式的HTML元素。
- 声明块 负责“把它变成这样”。它由一对花括号
{}包裹，里面包含一条或多条声明 (Declaration)。
每条声明都由一个 属性 (Property) 和一个 值 (Value) 组成，中间用冒号:分隔，并以分号;结尾。
selector {
property: value;
}
例如，下面这条规则的意思是：找到所有的<p>（段落）元素，并将它们的文字颜色设置为蓝色。
p {
color: blue;
}
这里，p是选择器，color是属性，blue是值。
常用选择器
选择器是CSS的基石，它告诉浏览器应该对哪些元素应用样式。以下是三个最基础、最常用的选择器。
元素选择器
noun
直接使用HTML标签名作为选择器，它会选中页面上所有该类型的元素。
类选择器
noun
以一个点.开头，后面跟着一个自定义的类名。你可以在HTML中为元素添加class属性，然后用类选择器为所有拥有该类的元素应用样式。类选择器可以被多个元素重复使用。
ID选择器
noun
以一个井号#开头，后面跟着一个自定义的ID名。它用来选中页面上拥有特定id属性的唯一元素。记住，一个ID在一个页面中只能使用一次。
| 选择器类型 | 语法 | 示例 | 作用域 |
|---|---|---|---|
| 元素选择器 | tagname | p | 页面上所有的<p>元素 |
| 类选择器 | .classname | .warning | 页面上所有class="warning"的元素 |
| ID选择器 | #idname | #header | 页面上id="header"的那个唯一元素 |
常用属性
学会了如何选择元素，接下来就是改变它们的外观了。CSS提供了海量的属性，但入门时只需掌握几个最基本的即可。
以下是一些控制文本和颜色的常用属性：
| 属性 | 描述 | 示例值 |
|---|---|---|
color | 设置文本颜色 | red, #FF0000, rgb(255, 0, 0) |
background-color | 设置元素的背景颜色 | lightblue, #ADD8E6 |
font-size | 设置字体大小 | 16px, 1.2em, 120% |
font-family | 设置字体类型 | Arial, Verdana, sans-serif |
text-align | 设置文本的水平对齐方式 | left, center, right |
让我们把这些知识结合起来。假设我们有以下HTML代码：
<div id="intro">
<h1>欢迎来到我的网站</h1>
<p>这是一个介绍段落。</p>
<p class="special">这是一个特别的段落。</p>
</div>
我们可以编写如下CSS来美化它：
/* ID选择器，为整个介绍区域设置背景 */
#intro {
background-color: #f0f0f0;
}
/* 元素选择器，让所有标题居中 */
h1 {
text-align: center;
color: #333;
}
/* 元素选择器，为所有段落设置基础字体大小 */
p {
font-size: 16px;
}
/* 类选择器，让特别的段落文字变成红色 */
.special {
color: red;
}
通过这些基础的选择器和属性，你已经可以开始为你的网页添加基本的样式了。随着学习的深入，你会发现更多强大的CSS功能，但掌握好这些基础是迈向网页设计的第一步。
在CSS中，以下哪个符号用于选择所有具有特定类（class）的HTML元素？
在CSS规则 h1 { color: red; } 中，color: red; 这部分被称为什么？