定义#

CSS（Cascading Style Sheet，层叠样式表）用于控制页面元素的样式。在 HTML 中引入 CSS 有三种方式。

语法/用法#

1
<span style="color: #b2b2b2; font-size: 14px;">发布时间</span>

1
<head>
2
    <style>
3
        .publish-date {
4
            color: #b2b2b2;
5
            font-size: 14px;
6
        }
7
    </style>
8
</head>

1
<head>
2
    <link rel="stylesheet" href="css/news.css">
3
</head>

1
.publish-date {
2
    color: #b2b2b2;
3
}

对比#

常见场景#

• 外部样式：项目中所有页面的统一样式管理
• 内部样式：单页面独立样式、快速原型
• 行内样式：通过 JavaScript 动态设置的样式

注意事项#

• 三种方式中，行内样式优先级最高（权重：行内 > 内部/外部，后者按选择器优先级和声明顺序决定）
• 外部样式文件通常创建在 css/ 目录下
• 企业开发中外部样式是标准做法，实现结构（HTML）与表现（CSS）的完全分离

定义#

CSS 选择器用于选取需要设置样式的 HTML 元素。根据业务场景的不同，选择器有多种类型。

语法/用法#

1
选择器名 {
2
    属性名: 属性值;
3
    属性名: 属性值;
4
}

1
/* 元素选择器：取消所有超链接下划线 */
2
a {
3
    text-decoration: none;
4
}
5

6
/* 类选择器：新闻发布时间 */
7
.publish-date {
8
    color: #b2b2b2;
9
}
10

11
/* 类选择器：版心居中容器 */
12
.news-content {
13
    width: 70%;
14
    margin: 0 auto;
15
}

常见场景#

• 全局样式使用元素选择器（如 body、a、p）
• 组件化或可复用的样式使用类选择器
• 页面中唯一元素使用 ID 选择器
• 嵌套关系使用后代选择器（如 .header a）

注意事项#

• 类选择器（.）可以重复使用，一个元素可有多个 class
• ID 选择器（#）在页面中应唯一，不可重复
• 后台开发场景下重点掌握元素选择器、类选择器、ID 选择器即可满足大多数需求
• CSS 选择器权重（优先级）：id > class > 元素

定义#

CSS 中的颜色可以通过多种方式表示，用于设置文本颜色、背景色、边框色等。

语法/用法#

1
.text-gray {
2
    color: #b2b2b2;       /* 十六进制灰色 */
3
}
4

5
.text-white {
6
    color: white;          /* 关键字白色 */
7
}
8

9
.highlight {
10
    color: rgb(216, 57, 49);  /* RGB红色 */
11
}

常见场景#

• 文本颜色：color 属性
• 背景颜色：background-color 属性
• 边框颜色：border-color 属性
• 按钮、链接的多态颜色（正常、悬停、激活）

注意事项#

• 十六进制颜色值中的字母不区分大小写（#B2B2B2 等价于 #b2b2b2）
• 十六进制颜色可简写：如 #fff 等价于 #ffffff，#333 等价于 #333333
• 拾取网页中已有颜色时，可使用截图软件的拾色器插件
• CSS3 还支持 rgba()（带透明度）和 hsl() 等方式，但基础开发中十六进制最为常用

定义#

CSS 文本样式用于控制页面中文字的显示效果，包括字体颜色、缩进、行高、下划线等。

语法/用法#

1
p {
2
    text-indent: 2em;     /* 首行缩进2个字符宽度 */
3
    line-height: 2;       /* 行高为字体大小的2倍 */
4
    color: #333;          /* 深灰色文字 */
5
}
6

7
a {
8
    text-decoration: none; /* 去除超链接下划线 */
9
}

常见场景#

• 新闻正文排版：段落首行缩进 + 行高
• 超链接样式：去除默认下划线或添加悬停下划线
• 标题样式：控制字号和粗细
• 次要信息：使用灰色字体弱化视觉权重

注意事项#

• em 是相对于当前字体大小的单位（1em = 当前字号），在 text-indent 中常用于中文缩进（2em ≈ 两个汉字宽度）
• line-height 为纯数值时表示当前字体大小的倍数（推荐），为像素值时是固定高度
• text-decoration: none 常用于去除 <a> 标签的默认下划线
• 文本样式可继承：父元素设置的 color、font-size 等会被子元素继承

定义#

<div> 和 <span> 是无语义的布局标签，实际开发中大量用于页面结构和元素分组。

语法/用法#

1
<div class="container">
2
    <span class="label">姓名：</span>
3
    <span class="value">张三</span>
4
</div>

对比#

常见场景#

• <div>：页面整体容器、顶栏、侧边栏、卡片容器、页脚等布局区块
• <span>：行内文字某部分的样式控制、表单标签的文本分组
• <div> 嵌套 <div>：构建复杂的页面布局结构

盒模型相关#

<div> 作为典型的块级容器，是 CSS 盒模型的主要应用对象。通过控制其 width、height、padding、border、margin 实现精确的布局效果。

注意事项#

• <div> 和 <span> 本身没有语义，不传递任何内容含义，避免滥用——应优先使用语义化标签（<header>、<footer>、<section>、<article> 等）
• 需要将行内元素改为块级元素时，可用 CSS display: block;
• 需要将块级元素改为行内元素时，可用 CSS display: inline;