什么是CSS？

CSS（层叠样式表）是一种样式表语言，用于描述HTML或XML文档的呈现方式。CSS定义了如何显示文档中的元素，包括布局、颜色、字体等视觉样式。

CSS的历史与发展

CSS由W3C（万维网联盟）制定和维护，经历了多个版本的发展：

CSS1 (1996)：第一个正式规范，包含字体、颜色、边距等基本属性
CSS2 (1998)：增加定位、媒体类型等高级功能
CSS2.1 (2011)：修复CSS2中的问题，成为最广泛支持的版本
CSS3 (1999至今)：模块化规范，引入众多新特性

提示： CSS与HTML分离是Web标准的重要原则，这使得内容与表现分离，提高了网站的可维护性。

CSS的引入方式

有三种主要方式将CSS应用到HTML文档中：

1. 内联样式

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

                        HTML
                    
                        <p style="color: blue; font-size: 16px;">这是一个蓝色的段落</p>

注意： 内联样式会覆盖外部和内部样式表，但不利于维护和复用，应谨慎使用。

2. 内部样式表

在HTML文档的<head>部分使用<style>标签定义样式：

                        HTML
                    

                        <head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
                    

3. 外部样式表

将CSS代码保存在单独的文件中，然后在HTML中通过<link>标签引入：

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

                        styles.css
                    

                        p {
    color: blue;
    font-size: 16px;
}
                    

4. @import规则

使用@import规则在CSS文件中导入其他样式表：

                        CSS
                    

                        @import url("reset.css");
@import url("typography.css");

body {
    background-color: #f5f5f5;
}
                    

最佳实践： 对于大型项目，推荐使用外部样式表，因为它可以实现样式复用、缓存和更好的维护性。

CSS基本语法

CSS规则由选择器和声明块组成：

示例

                        CSS
                    

                        h1 {
    color: red;
    text-align: center;
}
                    

这是一个居中的红色标题

CSS规则集详解

选择器：指定要应用样式的HTML元素
声明块：包含一个或多个声明，用花括号{}包围
声明：由属性和值组成，以分号;结尾
属性：要设置的样式属性（如color、font-size）
值：属性的具体设置（如red、16px）

CSS注释

注释用于解释代码，不会被浏览器执行：

                        CSS
                    

                        /* 这是一个单行注释 */

/*
这是一个
多行注释
*/

p {
    color: blue; /* 设置段落文字颜色为蓝色 */
}
                    

提示： 良好的注释习惯可以提高代码的可读性和维护性，特别是在团队协作中。

CSS层叠与优先级

当多个CSS规则应用于同一个元素时，浏览器会根据以下优先级顺序确定最终样式：

!important 声明 - 最高优先级
内联样式（style属性）
ID选择器
类选择器、属性选择器、伪类
元素选择器、伪元素
通用选择器
继承的样式 - 最低优先级

特异性计算

CSS使用特异性(specificity)值来确定规则的优先级，特异性值由四部分组成：

内联样式：特异性值为 1,0,0,0
ID选择器：每个ID选择器增加 0,1,0,0
类选择器、属性选择器、伪类：每个增加 0,0,1,0
元素选择器、伪元素：每个增加 0,0,0,1

                        特异性计算示例
                    

                        /* 特异性: 0,0,0,1 */
p { color: black; }

/* 特异性: 0,0,1,0 */
.intro { color: blue; }

/* 特异性: 0,0,1,1 */
p.intro { color: green; }

/* 特异性: 0,1,0,0 */
#header { color: red; }
                    

提示： 尽量避免使用!important，因为它会破坏CSS的自然层叠规则，使代码难以维护。

CSS值和单位

CSS支持多种值和单位，用于定义样式属性的具体值：

长度单位

单位	描述	示例
px	像素	font-size: 16px;
em	相对于父元素的字体大小	font-size: 1.2em;
rem	相对于根元素的字体大小	font-size: 1.5rem;
%	百分比	width: 50%;
vw/vh	视口宽度/高度的百分比	width: 50vw;

颜色值

表示法	描述	示例
颜色名称	预定义的颜色名称	color: red;
十六进制	#RRGGBB 或 #RGB	color: #ff0000;
RGB	rgb(红, 绿, 蓝)	color: rgb(255, 0, 0);
RGBA	带透明度的RGB	color: rgba(255, 0, 0, 0.5);
HSL	hsl(色相, 饱和度, 亮度)	color: hsl(0, 100%, 50%);

CSS继承

某些CSS属性可以从父元素继承到子元素：

可继承的属性

字体相关：font-family, font-size, font-weight, font-style
文本相关：color, text-align, text-indent, line-height
列表相关：list-style-type, list-style-position
表格相关：border-collapse, border-spacing

不可继承的属性

布局相关：width, height, margin, padding
背景相关：background-color, background-image
定位相关：position, top, left, z-index
边框相关：border, border-radius

                        继承示例
                    

                        <div style="color: blue; font-size: 16px;">
    <p>这段文字将继承父元素的蓝色和16px字体大小</p>
    <p style="color: red;">这段文字将覆盖继承的蓝色，变为红色</p>
</div>
                    