CSS核心概念与基础特性解析

CSS（层叠样式表）是构建现代Web界面的核心技术之一，掌握其基础概念对于前端开发至关重要。本文将系统讲解CSS的定义、核心特性以及样式表类型等基础知识。

一、CSS定义

CSS（Cascading Style Sheets，层叠样式表）是一种样式表语言，用于描述HTML或XML（包括SVG、MathML等衍生语言）文档的呈现方式。

<!-- HTML结构 -->
<h1>欢迎来到我的网站</h1>
<p>这是一个段落文本</p>

<!-- CSS样式 -->
<style>
  h1 {
    color: blue;
    font-size: 2em;
  }
  p {
    margin: 1em 0;
    line-height: 1.5;
  }
</style>

CSS的主要作用是将文档的内容与其呈现分离，这种分离带来了几个重要优势：

可维护性：样式集中管理，修改方便
复用性：同一套样式可应用于多个页面
可访问性：不同设备可以应用不同样式
性能优化：样式可被缓存，提高加载速度

二、CSS核心特性

1. 层叠性（Cascading）

层叠性是指当多个CSS规则应用于同一个元素时，浏览器会根据特定规则决定最终应用的样式。层叠的决策基于三个因素：

来源优先级（从高到低）：
- 用户标记为!important的样式
- 开发者标记为!important的样式
- 开发者编写的常规样式
- 用户设置的常规样式
- 浏览器默认样式
选择器特异性（权重计算）：
- 内联样式：1000
- ID选择器：100
- 类/属性/伪类选择器：10
- 元素/伪元素选择器：1
- 通配符/继承样式：0
出现顺序：后出现的规则覆盖先出现的规则

/* 特异性示例 */
#header .nav li a { color: red; }   /* 权重：100 + 10 + 1 + 1 = 112 */
.nav li.active a { color: blue; }   /* 权重：10 + 1 + 10 + 1 = 22 */
a { color: green !important; }      /* 最高优先级 */

2. 继承性（Inheritance）

继承性是指某些CSS属性会自动从父元素传递到子元素。不是所有属性都能继承，一般文本相关属性具有继承性：

可继承属性：color, font-family, font-size, line-height, text-align等
不可继承属性：width, height, margin, padding, border, background等

/* 继承示例 */
body {
  font-family: 'Arial', sans-serif;
  color: #333;
}

/* 所有body的子元素都会继承上述字体和颜色 */

可以通过inherit关键字显式指定继承父元素的值：

.special {
  border: inherit;  /* 显式继承父元素的border值 */
}

3. 优先级（Specificity）

当多个规则作用于同一元素时，优先级决定了哪个规则生效。优先级从高到低：

!important声明
内联样式（style属性）
ID选择器
类选择器、属性选择器、伪类选择器
元素选择器、伪元素选择器
通配符选择器、关系选择器

实践建议：

避免过度使用!important，会导致样式难以维护
尽量使用类选择器而非ID选择器，降低特异性
保持选择器简洁，避免过长的选择器链

三、样式表类型

CSS可以通过三种方式引入到HTML文档中：

1. 内联样式（Inline Styles）

直接在HTML元素的style属性中定义样式：

<p style="color: red; font-size: 16px;">这是一个红色段落</p>

特点：

优先级最高（仅次于!important）
不利于维护和复用
适用于少量、临时性的样式

2. 内部样式表（Internal Style Sheets）

在HTML文档的<head>中使用<style>标签定义：

<head>
  <style>
    p {
      color: blue;
      margin: 10px 0;
    }
    .highlight {
      background-color: yellow;
    }
  </style>
</head>

特点：

只对当前页面有效
比内联样式更易于维护
适用于单页面应用的少量样式

3. 外部样式表（External Style Sheets）

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

<head>
  <link rel="stylesheet" href="styles.css">
</head>

styles.css文件内容：

/* styles.css */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}
.container {
  width: 80%;
  margin: 0 auto;
}

特点：

最佳实践，最推荐的方式
可以被多个页面共享，提高复用性
浏览器可以缓存CSS文件，提高性能
便于团队协作和维护

实践建议：

生产环境始终使用外部样式表
合理组织CSS文件结构，可以按功能模块拆分
使用构建工具合并和压缩CSS文件

四、CSS基础实践建议

样式重置：使用重置样式表消除浏览器默认样式差异
```
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```

合理组织CSS：采用一致的命名规范和代码结构

/* 推荐结构顺序 */
/* 1. 布局相关属性 */
display, position, float, clear, etc.

/* 2. 盒模型属性 */
width, height, margin, padding, border, etc.

/* 3. 视觉样式 */
background, color, font, etc.

/* 4. 其他 */
cursor, overflow, z-index, etc.

使用注释：为重要的样式段添加注释

/* 主导航样式 */
.main-nav {
  /* 布局 */
  display: flex;
  justify-content: space-between;
  
  /* 视觉 */
  background-color: #333;
  padding: 1rem;
}

渐进增强：先构建基础样式，再添加高级特性

/* 基础按钮样式 */
.button {
  display: inline-block;
  padding: 0.5em 1em;
  border: 1px solid #ccc;
}

/* 增强效果 */
@supports (display: flex) {
  .button {
    display: inline-flex;
    align-items: center;
  }
}

通过掌握这些CSS基础概念和特性，开发者可以构建出结构良好、易于维护的样式系统，为更复杂的布局和效果打下坚实基础。

CSS核心概念解析：层叠、继承与优先级详解