初识CSS

yzzzzzzzzzzzzzzzzz

于 2025-08-17 08:06:16 发布

阅读量498

点赞数 11

CC 4.0 BY-SA版权

分类专栏： html+css+js 文章标签： css 前端

本文链接：https://blog.csdn.net/2401_83194362/article/details/150394062

html+css+js 专栏收录该内容

4 篇文章

订阅专栏

（二）声明块（Declaration Block）

（三）层叠与优先级

五、CSS 与 HTML 的结合方式

（一）内联样式（Inline Style）

（二）内部样式表（Internal Style Sheet）

（三）外部样式表（External Style Sheet）

一、CSS 是什么

CSS 是 Cascading Style Sheets 的缩写，中文译为“层叠样式表”，是一种专门用于定义网页样式的标记语言。它与 HTML 共同构成了网页开发的基础，其中 HTML 负责构建网页的结构（如标题、段落、图片等元素），而 CSS 则负责控制这些元素的外观表现（如颜色、字体、布局、间距等）。

在互联网发展初期，网页仅通过 HTML 标签定义内容和简单样式，例如使用 <font> 标签设置文字颜色、<center> 标签居中内容。这种方式导致样式与结构混杂，当网页规模扩大时，修改样式需要逐行调整标签，维护成本极高。为解决这一问题，1996 年 W3C（万维网联盟）正式推出了 CSS 规范，将样式定义从 HTML 中分离出来，实现了“结构与样式分离”的核心思想，这也成为现代网页开发的基本原则之一。

如今，CSS 已成为前端开发的核心技术之一，与 HTML、JavaScript 并称为“前端三基石”。无论是简单的静态网页还是复杂的动态应用，都离不开 CSS 对视觉呈现的控制。掌握 CSS 是构建美观、易用、响应式网页的基础。

二、CSS 的发展历史

CSS 的发展经历了多个版本的迭代，每一次更新都带来了更丰富的功能和更强大的样式控制能力：

CSS 1（1996 年）：第一个正式版本，定义了基础语法和核心样式属性，包括文字样式（字体、颜色）、盒模型（宽度、高度、边距）、对齐方式等，初步实现了样式与结构的分离。
CSS 2（1998 年）：在 CSS 1 的基础上扩展了功能，新增了定位（position）、浮动（float）、媒体查询（media queries 雏形）、表格样式等重要特性，奠定了现代 CSS 布局的基础。
CSS 2.1（2011 年）：对 CSS 2 的修订版本，解决了早期规范中的模糊定义和浏览器兼容性问题，明确了层叠机制和盒模型计算规则，成为被浏览器广泛支持的稳定版本。
CSS 3（模块化发展）：与前两个版本不同，CSS 3 采用模块化开发，从 2001 年开始逐步发布各个模块（如选择器模块、颜色模块、布局模块等）。它新增了大量革命性特性：圆角（border-radius）、阴影（box-shadow）、渐变（gradient）、弹性布局（Flexbox）、网格布局（Grid）、动画（animation）等，极大地提升了网页的视觉表现力和布局灵活性。目前 CSS 3 仍在持续更新中，新的模块不断被标准化。

CSS 的发展始终围绕“更精准的样式控制”“更灵活的布局能力”和“更好的开发体验”三大目标，适配了从 PC 端到移动端、从静态页面到动态应用的多样化需求。

三、CSS 的核心作用

CSS 的核心价值在于对网页样式的全面控制，具体可分为以下几个方面：

（一）美化网页外观

这是 CSS 最基础的功能，通过定义颜色、字体、间距等属性，让原本单调的 HTML 内容变得视觉丰富：

颜色控制：设置文字颜色（color）、背景颜色（background-color）、边框颜色（border-color）等，支持十六进制、RGB、HSL 等多种颜色格式。
字体样式：指定字体类型（font-family）、大小（font-size）、粗细（font-weight）、风格（font-style）等，实现文字的多样化展示。
文本排版：控制行高（line-height）、字间距（letter-spacing）、文本对齐（text-align）、文本装饰（text-decoration）等，优化阅读体验。
视觉效果：添加圆角、阴影、渐变、透明度（opacity）等效果，增强元素的立体感和层次感。

例如，通过以下 CSS 可将标题设置为蓝色、加粗、带阴影的样式：

h1 {
  color: #1a73e8; /* 蓝色文字 */
  font-size: 24px; /* 字体大小 */
  font-weight: bold; /* 加粗 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 文字阴影 */
}

（二）控制页面布局

CSS 提供了多种布局技术，能够精准控制元素在页面中的位置和排列方式，实现复杂的页面结构：

基础布局：通过盒模型（margin、padding、border）控制元素的间距和尺寸。
传统布局：使用浮动（float）实现文字环绕或多列布局，使用定位（position）实现元素的精准定位（如固定导航栏）。
现代布局：通过弹性布局（Flexbox）实现一维方向的灵活排列（如水平居中、均匀分布），通过网格布局（Grid）实现二维网格结构（如响应式卡片布局）。
响应式布局：结合媒体查询（@media）根据设备屏幕尺寸（如手机、平板、PC）自动调整布局，确保在不同设备上都有良好的显示效果。

例如，使用 Flexbox 实现导航栏的水平居中排列：

.nav {
  display: flex; /* 启用弹性布局 */
  justify-content: center; /* 水平居中 */
  gap: 20px; /* 元素间距 */
}

（三）实现交互与动画

CSS 支持通过伪类和动画属性实现简单的交互效果和动态视觉体验，减少对 JavaScript 的依赖：

交互反馈：通过 :hover（鼠标悬停）、:active（点击状态）、:focus（聚焦状态）等伪类，为元素添加状态变化样式（如按钮悬停变色）。
过渡动画：使用 transition 属性实现元素样式的平滑过渡（如宽度变化、颜色渐变）。
关键帧动画：使用 @keyframes 定义复杂动画序列，通过 animation 属性控制动画的播放、延迟、循环等。

例如，为按钮添加悬停放大和颜色过渡效果：

.button {
  padding: 10px 20px;
  background-color: #4285f4;
  transition: all 0.3s ease; /* 样式变化平滑过渡 */
}
.button:hover {
  transform: scale(1.05); /* 放大 5% */
  background-color: #1a73e8; /* 颜色加深 */
}

（四）样式复用与维护

CSS 的“层叠”和“继承”特性使得样式可以被复用和管理，降低开发和维护成本：

样式复用：通过类选择器（class）为多个元素应用相同样式，避免重复代码。
继承机制：子元素可以继承父元素的部分样式（如字体、颜色），减少样式定义的冗余。
外部样式表：将 CSS 代码写入独立文件（.css），通过 <link> 标签引入多个页面，实现样式的统一管理和批量修改。

四、CSS 基本语法

CSS 的语法规则简洁清晰，主要由选择器和声明块两部分组成，基本结构如下：

选择器 {
  属性名1: 属性值1;
  属性名2: 属性值2;
  /* 注释内容 */
}

（一）选择器（Selector）

选择器的作用是指定需要应用样式的 HTML 元素，它决定了“样式给谁用”。CSS 提供了多种类型的选择器，以适应不同的选择需求：

1. 基础选择器

标签选择器：根据 HTML 标签名选择元素，作用于所有该标签的元素。
示例：p { color: gray; }（所有 <p> 标签文字设为灰色）。
类选择器：通过元素的 class 属性选择元素，以 . 开头，可作用于多个元素。
示例：.highlight { background: yellow; }（所有 class="highlight" 的元素背景为黄色）。
ID 选择器：通过元素的 id 属性选择元素，以 # 开头，作用于唯一元素（id 需唯一）。
示例：#logo { width: 200px; }（id="logo" 的元素宽度为 200px）。
通配符选择器：以 * 表示，选择页面中所有元素，常用于重置默认样式。
示例：* { margin: 0; padding: 0; }（清除所有元素的默认边距和内边距）。

2. 复合选择器

后代选择器：选择某元素的后代元素，用空格分隔。
示例：ul li { list-style: none; }（所有 <ul> 中的 <li> 去除默认列表样式）。
子元素选择器：选择某元素的直接子元素，用 > 连接。
示例：nav > a { text-decoration: none; }（<nav> 的直接子元素 <a> 去除下划线）。
相邻兄弟选择器：选择某元素之后紧邻的同级元素，用 + 连接。
示例：h2 + p { margin-top: 10px; }（<h2> 后的第一个 <p> 顶部边距为 10px）。
群组选择器：同时选择多个不同的元素，用 , 分隔。
示例：h1, h2, h3 { font-family: "Microsoft YaHei"; }（h1、h2、h3 共用字体）。

3. 伪类与伪元素选择器

伪类：用于选择元素的特定状态（如hover、聚焦）或位置（如第一个子元素），以 : 开头。
常用伪类：:hover（鼠标悬停）、:active（点击时）、:focus（聚焦时）、:first-child（第一个子元素）、:nth-child(n)（第 n 个子元素）。
示例：a:hover { color: red; }（链接悬停时变红）。
伪元素：用于选择元素的特定部分（如首字母、前后内容），以 :: 开头。
常用伪元素：::before（元素前插入内容）、::after（元素后插入内容）、::first-letter（首字母）、::selection（选中的文本）。
示例：p::first-letter { font-size: 2em; }（段落首字母放大）。

（二）声明块（Declaration Block）

声明块位于选择器后的大括号 {} 内，由一个或多个样式声明组成，每个声明定义元素的具体样式：

样式声明：由“属性名: 属性值”组成，以分号 ; 结尾（最后一个声明可省略分号）。
属性（Property）：CSS 预定义的样式控制项（如 color、font-size），决定“控制什么样式”。
属性值（Value）：属性的具体取值（如 red、16px），决定“样式的具体效果”，部分属性支持多个值（用空格分隔）。

示例：

/* 选择器为 .card，声明块包含3个样式声明 */
.card {
  width: 300px; /* 宽度 300px */
  margin: 20px auto; /* 上下边距 20px，左右自动居中 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

（三）层叠与优先级

当多个样式规则作用于同一元素时，CSS 通过“层叠机制”决定最终生效的样式，核心规则包括：

优先级：不同选择器的权重不同，权重高的样式优先生效。
优先级顺序（从高到低）：
!important 声明 > 内联样式（style 属性） > ID 选择器 > 类选择器/伪类/属性选择器 > 标签选择器 > 通配符选择器。
示例：#title { color: red; } 比 .heading { color: blue; } 优先级高，文字最终为红色。
层叠顺序：当优先级相同时，后定义的样式覆盖先定义的样式（“后来者居上”）。
示例：
```
p { color: gray; }
p { color: black; } /* 后定义，文字最终为黑色 */
```
继承：子元素会继承父元素的部分样式（如字体、颜色），但盒模型属性（如边距、边框）通常不继承。
示例：
```
body { font-family: "Arial"; } /* 所有子元素默认继承 Arial 字体 */
```
!important：可强制提升样式优先级（慎用，可能破坏层叠机制）。
示例：p { color: red !important; }

五、CSS 与 HTML 的结合方式

CSS 需与 HTML 结合才能生效，常见的结合方式有三种，各有适用场景：

（一）内联样式（Inline Style）

通过 HTML 元素的 style 属性直接定义样式，仅作用于当前元素：

<p style="color: blue; font-size: 18px;">这是内联样式的文本</p>

优点：直接生效，优先级最高。
缺点：样式与结构混杂，复用性差，难以维护，不推荐大量使用。
适用场景：临时调试或单个元素的特殊样式。

（二）内部样式表（Internal Style Sheet）

在 HTML 文档的 <head> 标签内通过 <style> 标签定义样式，作用于当前文档：

<head>
  <style>
    h1 { color: green; }
    .content { line-height: 1.6; }
  </style>
</head>
<body>
  <h1>内部样式表标题</h1>
  <p class="content">这是内部样式表的内容</p>
</body>

优点：样式集中管理，仅作用于当前页面，无需额外请求文件。
缺点：无法跨页面复用，页面体积增大。
适用场景：单个页面的样式定义。

（三）外部样式表（External Style Sheet）

将 CSS 代码写入独立的 .css 文件，通过 <link> 标签或 @import 引入 HTML 文档，可作用于多个页面：

创建 style.css 文件：

/* style.css */
body { background-color: #f5f5f5; }
.container { max-width: 1200px; margin: 0 auto; }

在 HTML 中引入：

<head>
  <link rel="stylesheet" href="style.css"> <!-- 推荐使用 link 标签 -->
</head>

优点：样式与结构完全分离，可跨页面复用，便于维护和缓存（提升加载速度）。
缺点：需要额外请求 CSS 文件（可通过优化减少影响）。
适用场景：多页面网站或大型项目，是开发中的首选方式。

六、CSS 常用属性分类

CSS 提供了数百种属性，按功能可分为以下几类常用属性：

（一）文本与字体属性

控制文字的外观和排版：

color：文字颜色（如 color: #333;）。
font-family：字体类型（如 font-family: "SimSun", serif;）。
font-size：字体大小（如 font-size: 16px; 或 font-size: 1rem;）。
font-weight：字体粗细（如 font-weight: bold; 或 font-weight: 700;）。
line-height：行高（如 line-height: 1.5; 通常用于垂直居中）。
text-align：文本对齐方式（如 text-align: center; 水平居中）。
text-decoration：文本装饰（如 text-decoration: none; 去除下划线）。

（二）盒模型属性

控制元素的尺寸、边距和边框（所有 HTML 元素都可视为“盒子”）：

width / height：元素的宽度和高度（如 width: 100%; height: 200px;）。
margin：外边距（元素与外部元素的间距，如 margin: 10px 20px; 上下10px，左右20px）。
padding：内边距（元素内容与边框的间距，如 padding: 15px; 四周15px）。
border：边框（如 border: 1px solid #ddd; 1px 灰色实线边框）。
border-radius：圆角（如 border-radius: 8px; 圆角边框）。
box-sizing：盒模型计算方式（box-sizing: border-box; 推荐值，宽度包含 padding 和 border）。

（三）背景属性

控制元素的背景样式：

background-color：背景颜色（如 background-color: #fff; 白色背景）。
background-image：背景图片（如 background-image: url("bg.jpg");）。
background-repeat：背景图片重复方式（如 background-repeat: no-repeat; 不重复）。
background-position：背景图片位置（如 background-position: center; 居中显示）。
background-size：背景图片大小（如 background-size: cover; 覆盖元素）。

（四）布局与定位属性

控制元素的位置和排列：

display：元素的显示类型（如 display: block; 块级元素，display: inline; 行内元素，display: flex; 弹性布局）。
position：定位方式（static 静态定位，relative 相对定位，absolute 绝对定位，fixed 固定定位）。
float：浮动（left / right，早期用于多列布局，现代多被 Flexbox 替代）。
flex：弹性布局属性（如 flex: 1; 子元素等分父元素空间）。
grid：网格布局属性（如 grid-template-columns: repeat(3, 1fr); 三列网格）。
z-index：层级顺序（数值越大越靠上，仅对定位元素有效）。

（五）动画与过渡属性

控制元素的动态效果：

transition：样式过渡（如 transition: all 0.3s; 所有样式变化在0.3秒内完成）。
animation：动画控制（如 animation: rotate 2s infinite; 应用 rotate 动画，2秒一次循环）。
transform：变形效果（如 transform: rotate(30deg); 旋转30度，transform: scale(1.2); 放大1.2倍）。

七、CSS 布局技术演进

布局是 CSS 的核心功能，其技术发展反映了网页开发的需求变化：

（一）传统布局

表格布局：早期使用 <table> 标签实现布局，结构与样式混杂，灵活性差，已淘汰。
浮动布局：通过 float: left/right 实现多列布局，需配合 clear: both 清除浮动，容易出现高度塌陷等问题。
定位布局：通过 position: absolute/fixed 实现元素精准定位，适合局部元素（如导航栏、弹窗），但不适合整体布局。

（二）现代布局

弹性布局（Flexbox）：2009年推出，专为一维布局（水平或垂直）设计，通过 display: flex 启用，提供 justify-content（水平对齐）、align-items（垂直对齐）等属性，轻松实现居中、均匀分布等效果，兼容性好，是目前主流的布局方式。
网格布局（Grid）：2017年广泛支持，专为二维布局（行列交织）设计，通过 display: grid 启用，可定义网格的列数、行数、间距等，适合复杂的页面结构（如仪表盘、卡片网格），功能强大但学习成本稍高。

响应式布局：结合媒体查询（@media）根据屏幕宽度（如 max-width: 768px）切换布局样式，实现“一套代码适配多设备”，例如在手机上单列显示，在PC上多列显示：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PC 端 4 列 */
}
@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr); /* 平板 2 列 */
  }
}
@media (max-width: 480px) {
  .container {
    grid-template-columns: 1fr; /* 手机 1 列 */
  }
}