1667 字

8 分钟

CSS核心

2026-05-14

编程学习

HTML

CSS

Web基础

前端

浏览量加载中...

AI 摘要

CSS引入方式#

定义#

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

语法/用法#

1. 行内样式（Inline）#

通过元素的 style 属性直接设置：

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

2. 内部样式（Internal）#

在 <head> 中通过 <style> 标签定义：

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

3. 外部样式（External）#

通过 <link> 标签引入独立的 .css 文件：

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

news.css 文件内容：

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

对比#

方式	优点	缺点	使用情况
行内样式	直接、优先级最高	代码冗余、维护困难	不常用（偶尔配合 JS）
内部样式	当前页面集中管理	无法跨页面复用	小型页面、演示示例
外部样式	HTML/CSS 完全分离、可复用	额外 HTTP 请求	企业开发常用方式

常见场景#

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

注意事项#

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

CSS选择器#

定义#

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

语法/用法#

通用格式#

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

常见选择器类型#

选择器	语法	示例	说明
元素选择器	`tag {}`	`a { color: red; }`	选取所有指定标签
类选择器	`.classname {}`	`.publish-date { color: gray; }`	选取所有带指定 class 的元素
ID 选择器	`#idname {}`	`#title { font-size: 24px; }`	选取带指定 id 的唯一元素

联合使用示例#

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颜色表示#

定义#

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

语法/用法#

三种常见表示方式#

方式	语法	示例	说明
颜色关键字	`color: 颜色名;`	`color: gray;`	直接使用预定义颜色名称
十六进制	`color: #RRGGBB;`	`color: #b2b2b2;`	最常用，6位十六进制数
RGB	`color: rgb(r, g, b);`	`color: rgb(178, 178, 178);`	红绿蓝三通道 0-255

示例#

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文本样式#

定义#

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

语法/用法#

常用文本属性#

属性	说明	示例	取值
`color`	字体颜色	`color: #b2b2b2;`	颜色值
`text-indent`	首行缩进	`text-indent: 2em;`	长度值（`em`、`px`）
`line-height`	行高（行间距）	`line-height: 2;`	数值（倍数）或长度值
`text-decoration`	文本装饰线	`text-decoration: none;`	`none` / `underline` / `line-through`
`font-size`	字体大小	`font-size: 24px;`	长度值
`font-weight`	字体粗细	`font-weight: bold;`	`normal` / `bold` / 数值

综合示例#

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标签#

定义#

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

语法/用法#

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

对比#

特性	`<div>`	`<span>`
显示方式	块级元素：独占一行	行内元素：一行可显示多个
默认宽度	父元素宽度的 100%	由内容撑开
默认高度	由内容撑开	由内容撑开
可设置宽高	可以（`width`、`height`）	不可以
典型用途	页面布局容器、区块划分	行内文本分组、局部样式控制

常见场景#

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

盒模型相关#

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

注意事项#

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

支持与分享

如果这篇文章对你有帮助，欢迎分享给更多人或赞助支持！

赞助

CSS核心

https://blog.tsh520.cn/posts/javawebai/前端基础/css核心/

作者

团子和蛋糕

发布于

2026-05-14

许可协议

CC BY-NC-SA 4.0

最后更新于 2026-05-14，距今已过 37 天

部分内容可能已过时

CSS布局

CloudFlare-ImgBed + Telegram 图床 + PicGo + Obsidian 自动上传全流程教程

评论区

[ 标签 ]

# AI 1 # Ajax 2 # Apifox 1 # Astro 2 # claudecode 1 # CloudFlare 1 # CSS 6 # DELETE 1 # Gist 1 # GitHub 1 # HTML 6 # HTTP 2 # Java 23 # java 13 # JavaScript 5 # JDBC 3 # JSON 1 # JUnit 1 # Logback 1 # Maven 6 # Mybatis 1 # MyBatis 4 # MySQL 6 # MySql 1 # Obsidian 1 # ORM 1 # PathVariable 1 # PicGo 1 # RequestBody 1 # RequestMapping 1 # RESTful风格 1 # Slf4j 1 # SpringBoot 11 # SQL 2 # Svelte 1 # TailwindCSS 1 # Telegram 1 # Tlias 2 # Vue 7 # Web基础 6 # YAML 1 # 三层架构 1 # 使用文档 7 # 刷步数 1 # 前端 32 # 单词 1 # 博客 2 # 博客开发 1 # 参数接收 1 # 后端 1 # 图床 1 # 存储 1 # 学习方法 1 # 导航栏 1 # 工具 1 # 开发 1 # 开发规范 1 # 开心 1 # 影视 1 # 想法 3 # 感悟 4 # 数据库 10 # 日常 13 # 日志框架 1 # 生活迁移 1 # 电影 1 # 碎碎念 1 # 网络教室 1 # 蓝奏云 1 # 记录 1 # 词根 1 # 词缀 1 # 路径参数 1 # 运动 1 # 配置 1 # 音乐 1 # 音标 1 # 驼峰命名 1

[ 分类 ]

# 编程学习 63 # 博客指南 8 # 技术分享 6 # 英语笔记本 5 # AI使用 1 # 资源整理 1

[ 公告 ]

如果你喜欢，那么欢迎来到我的世界！

了解更多

[ 音乐 ]

找不到相关结果。

[ contents ]

[ 全部文章 ]

CSS核心

CSS引入方式#

定义#

语法/用法#

1. 行内样式（Inline）#

2. 内部样式（Internal）#

3. 外部样式（External）#

对比#

常见场景#

注意事项#

CSS选择器#

定义#

语法/用法#

通用格式#

常见选择器类型#

联合使用示例#

常见场景#

注意事项#

CSS颜色表示#

定义#

语法/用法#

三种常见表示方式#

示例#

常见场景#

注意事项#

CSS文本样式#

定义#

语法/用法#

常用文本属性#

综合示例#

常见场景#

注意事项#

div与span标签#

定义#

语法/用法#

对比#

常见场景#

盒模型相关#

注意事项#

支持与分享

相关阅读

评论区

音乐