3、CSS基础：语法、选择器、盒模型与常用样式属性
CSS（Cascading Style Sheets，层叠样式表）是Web程序设计中的核心表现层技术，负责定义HTML文档的呈现方式。在计算机二级Web程序设计考试中，CSS基础占据约15%的分值比重，题型覆盖选择题、填空题与操作题。本章将系统讲解CSS语法结构、四大类核心选择器、盒模型原理以及字体、颜色、背景、边框、浮动与定位六大常用样式属性，帮助考生建立完整的样式设计知识框架。
3.1 CSS语法与引入方式
3.1.1 核心语法原理
CSS语法由三部分组成：选择器（Selector）、属性（Property）和值（Value）。基本格式为：选择器 { 属性1: 值1; 属性2: 值2; }。选择器决定样式作用于哪些元素，属性决定设置什么样式，值则指定样式的具体参数。CSS的"层叠"特性意味着多个样式规则可以同时作用于同一元素，最终效果由优先级和顺序共同决定。
3.1.2 三种引入方式对比
| 引入方式 | 语法位置 | 优先级 | 适用场景 | 缺点 |
|---|---|---|---|---|
| 行内样式 | HTML标签的style属性 | 最高 | 单个元素特殊样式 | 代码冗余，维护困难 |
| 内部样式表 | <head>中的<style>标签 | 中等 | 单页面样式 | 不能跨页面复用 |
| 外部样式表 | 独立.css文件，通过<link>引入 | 最低 | 多页面统一风格 | 需额外HTTP请求 |
3.1.3 案例：外部样式表的基本使用
/* style.css 文件 */
p {
font-size: 16px;
color: #333333;
line-height: 1.6;
}
/* index.html 文件 */
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="#" aria-disabled="true" data-keke-missing-local-link="1" onclick="return false">
</head>
<body>
<p>这是一段应用了外部样式的文本。</p>
</body>
</html>3.1.4 常见误区
- 误区一：忘记在属性值后添加分号，导致后续属性失效。
- 误区二：混淆CSS注释与HTML注释，CSS使用
/* */，HTML使用<!-- -->。 - 误区三：属性名拼写错误（如将
background-color写成bgcolor），浏览器会静默忽略无效声明。
3.2 选择器详解
3.2.1 选择器分类与优先级
CSS选择器决定了样式的作用范围，掌握各类选择器的优先级是考试的重点。优先级从高到低排列为：ID选择器（#id）> 类选择器（.class）> 标签选择器（tag）> 通配符选择器（*）。后代选择器和伪类选择器的优先级由组成它的基础选择器决定。
| 选择器类型 | 语法示例 | 优先级权重 | 作用范围 |
|---|---|---|---|
| 标签选择器 | p { } | 0,0,0,1 | 所有<p>元素 |
| 类选择器 | .nav { } | 0,0,1,0 | class="nav"的元素 |
| ID选择器 | #header { } | 0,1,0,0 | id="header"的唯一元素 |
| 后代选择器 | div p { } | 0,0,0,2 | div内部的所有p元素 |
| 伪类选择器 | a:hover { } | 0,0,1,0 | 鼠标悬停的链接 |
3.2.2 选择器使用规范
- ID选择器：页面中每个ID必须唯一，通常用于页面骨架（如#header、#footer）或JavaScript操作锚点。
- 类选择器：可重复使用，适合定义可复用的样式组件（如.btn、.card）。
- 后代选择器：使用空格分隔，选择所有符合条件的后代元素，注意不要过度嵌套导致性能下降。
- 伪类选择器：常用:link、:visited、:hover、:active、:first-child、:nth-child(n)等。
3.2.3 案例：导航菜单的样式设计
<nav class="main-nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">考试</a></li>
</ul>
</nav>
/* 样式设计 */
.main-nav ul {
list-style: none;
padding: 0;
margin: 0;
background: #2c3e50;
}
.main-nav li {
display: inline-block;
}
.main-nav a {
display: block;
padding: 10px 20px;
color: #ffffff;
text-decoration: none;
}
.main-nav a:hover {
background: #3498db;
}
.main-nav li:first-child a {
font-weight: bold;
}3.2.4 优先级计算与常见误区
当多个选择器作用于同一元素时，浏览器按照优先级权重决定最终样式。权重计算规则为：内联样式（1000）> ID选择器（100）> 类选择器/伪类（10）> 标签选择器（1）。例如，#nav .item a的权重为100+10+1=111。
div p的权重为1+1=2，而.nav p的权重为10+1=11。不要误以为后代选择器优先级更高。
3.3 盒模型（Box Model）
3.3.1 盒模型核心原理
CSS盒模型是页面布局的基础，每个HTML元素都可以看作一个矩形盒子，由内到外依次为：内容区（content）→ 内边距（padding）→ 边框（border）→ 外边距（margin）。内容区包含文本、图片等实际内容；内边距是内容与边框之间的透明区域；边框包裹在内边距外部；外边距则是元素与其他元素之间的间距。
3.3.2 盒模型尺寸计算
| 属性 | 作用 | 常用值示例 | 影响范围 |
|---|---|---|---|
| width / height | 设置内容区尺寸 | 300px / 50% | 仅内容区 |
| padding | 设置内边距 | 10px 20px（上下 左右） | 扩大元素背景区域 |
| border | 设置边框 | 1px solid #ccc | 增加元素可见边界 |
| margin | 设置外边距 | 0 auto（水平居中） | 影响元素间距 |
| box-sizing | 切换盒模型模式 | content-box / border-box | 改变尺寸计算方式 |
3.3.3 标准盒模型与怪异盒模型
标准盒模型（content-box）中，width只包含内容区宽度，实际占位宽度 = width + padding + border。而怪异盒模型（border-box）中，width已包含padding和border，实际占位宽度 = width。在响应式布局中，推荐使用box-sizing: border-box，避免频繁计算尺寸。
总宽度 = width + padding-left + padding-right + border-left + border-right。若设置box-sizing: border-box，则总宽度 = width。
3.3.4 案例：卡片组件的盒模型应用
.card {
width: 300px;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin: 15px;
box-sizing: border-box; /* 使用怪异盒模型 */
background: #ffffff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* 实际占位宽度 = 300px（含padding和border） */3.3.5 常见误区
- 误区一：忘记设置box-sizing，导致元素实际宽度超出预期。
- 误区二：margin垂直方向会发生折叠（取较大值），水平方向不会。
- 误区三：padding会扩大元素背景区域，若需保持背景尺寸不变，应使用background-clip。
3.4 常用样式属性
3.4.1 字体与文本属性
字体属性控制文字的显示效果，核心属性包括：font-family（字体族）、font-size（字号）、font-weight（粗细）、font-style（斜体）、line-height（行高）。文本属性则控制文字排列方式，如text-align（对齐）、text-decoration（装饰线）、text-indent（缩进）。
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
font-size: 14px;
line-height: 1.8;
color: #333333;
}
h1 {
font-size: 28px;
font-weight: bold;
text-align: center;
letter-spacing: 2px;
}3.4.2 颜色与背景属性
颜色表示方式有四种：十六进制（#FF0000）、RGB（rgb(255,0,0)）、RGBA（rgba(255,0,0,0.5)）、HSL（hsl(0,100%,50%)）。背景属性包括background-color、background-image、background-repeat、background-position、background-size等。
| 属性 | 示例值 | 说明 |
|---|---|---|
| color | #2c3e50 | 文字颜色 |
| background-color | rgba(52,152,219,0.3) | 半透明背景色 |
| background-image | url("bg.png") | 背景图片 |
| background-size | cover / contain | 背景图片缩放方式 |
| background-position | center center | 背景图片位置 |
3.4.3 边框属性
边框属性包含三个子属性：border-width（宽度）、border-style（样式）、border-color（颜色）。简写方式为border: 1px solid #ccc。边框样式常用值有：solid（实线）、dashed（虚线）、dotted（点线）、none（无边框）。
3.4.4 浮动（Float）与定位（Position）
浮动用于实现文字环绕和块级元素并排布局。设置float: left/right后，元素脱离文档流，向左或向右浮动。浮动元素会紧贴父容器边缘或前一个浮动元素。清除浮动常用方法：clear: both或父容器使用overflow: hidden。
定位有四种模式：static（默认）、relative（相对定位）、absolute（定位）、fixed（固定定位）。相对定位相对于元素原位置偏移；定位相对于最近的已定位祖先元素；固定定位相对于浏览器窗口。
::after清除浮动，否则父容器高度会塌陷。
3.4.5 案例：两栏布局的浮动实现
.container {
width: 100%;
overflow: hidden; /* 清除浮动 */
}
.sidebar {
float: left;
width: 250px;
background: #f8f9fa;
}
.main-content {
float: left;
width: calc(100% - 250px);
background: #ffffff;
}
/* 若需固定底部，可使用position: fixed */3.4.6 常见误区与总结
- 误区一：浮动元素不占文档流空间，后续元素会顶上来，需及时清除浮动。
- 误区二：定位元素相对于最近的
position非static祖先定位，若祖先都未设置，则相对于浏览器窗口。 - 误区三：z-index只对定位元素（relative/absolute/fixed）生效。