CSS 基础语法与选择器实战指南

<p style="color:green">hello</p>

点评： 优先级最高，能覆盖其他样式，但只适合简单场景，无法复用，不推荐用于复杂项目。

3. 外部样式（推荐）

创建独立的 .css 文件，通过 <link> 标签引入。

HTML 文件：

<link rel="stylesheet" href="./style.css">

CSS 文件 (style.css)：

div {
    color: red;
}

点评： 样式与结构彻底分离，便于维护和复用。注意浏览器缓存可能导致修改后未立即生效，需硬刷新测试。

三、选择器详解

选择器决定了 CSS 规则的作用范围。

1. 基础选择器

标签选择器

直接选中所有指定类型的标签，适合统一风格，但无法差异化处理。

p { color: brown; }
div { color: green; }

类选择器

最灵活的选择器，用 . 开头。多个标签可共用一个类，单个标签也可拥有多个类（空格分隔）。

.brown { color: brown; }

<p class='brown'>文本</p>
<div class='brown'>文本</div>

命名建议： 使用小写字母和连字符 -，避免纯数字或中文，确保语义清晰。

ID 选择器

用 # 开头。ID 在页面中必须唯一，不能重复使用，优先级高于类选择器。

#red { color: red; }

<p id='red'>文本</p>

通配符选择器

使用 * 选中所有元素，常用于全局重置样式。

* { color: red; }

2. 复合选择器

后代选择器

选中父元素内的所有子级元素（包括孙子等），中间用空格分隔。

ol li { color: red; }

子选择器

仅选中直接的子元素，使用 > 连接。

.cat > a { color: red; }

并集选择器

同时选中多组元素，用逗号分隔。建议竖着写，可读性更好。

h1, h2, h3 {
    font-weight: bold;
}

伪类选择器

基于元素状态进行选择。

• a:link：未访问链接
• a:visited：已访问链接
• a:hover：鼠标悬停
• a:active：激活状态（按下未松开）
• input:focus：获取焦点的表单元素

四、常用属性速查

1. 字体相关

• font-family：设置字体。支持多个字体兜底，有空格时需加引号。

  body { font-family: 'Microsoft YaHei', sans-serif; }
  

• font-size：字体大小。单位 px 不可省略，建议给 body 设默认值。
• font-weight：粗细。700 等同于 bold，400 为正常。
• font-style：样式。italic 为斜体，normal 为正体。

2. 文本相关

• color：颜色。支持预定义名称、十六进制（如 #ff0000）或 RGB 值。
• text-align：对齐方式。center、left、right。
• text-decoration：装饰线。underline 下划线，none 去除（常用于链接），line-through 删除线。
• text-indent：首行缩进。推荐使用 em 单位，1em 等于当前字号。
• line-height：行高。影响段落间距，设为字号的 1.5 倍左右阅读体验较好。

五、元素显示模式

理解块级和行内元素的区别是布局的基础。

1. 块级元素

常见标签：h1-h6, p, div, ul, li。

• 独占一行。
• 宽度默认为父容器 100%。
• 可以设置宽高、内外边距。
• 内部可容纳任意类型元素。

2. 行内元素

常见标签：a, span, strong, b, em。

• 不独占一行，同行可显示多个。
• 宽高无效，只能由内容撑开。
• 上下外边距无效，左右有效。
• 只能容纳文本或其他行内元素。

掌握这些基础概念，就能构建出结构清晰、样式规范的网页了。