HTML — CSS样式

介绍

     CSS样式是一种用于控制网页外观和布局的标记语言，通过选择器和声明块定义元素的呈现方式。选择器指定目标元素，声明块包含属性和值，以键值对形式描述样式特征。颜色、字体、间距等视觉属性可通过CSS精确调整，实现响应式设计和跨设备适配。盒模型控制元素尺寸与边距，定位机制管理元素排列顺序。伪类支持交互状态与特殊内容样式，媒体查询则针对不同屏幕尺寸应用特定规则。样式可内联、嵌入或外链，遵循层叠原则解决冲突，优先级由特异性、顺序和重要性决定。通过变量和预处理器提升代码复用性，保持视觉一致性。

---

基本语法

CSS基本语法由选择器和声明块构成。选择器（如p、.class）指定目标元素，后接花括号包裹的声明块。每条声明格式为`属性: 值;（如color: red;），分号结尾，注释用/*...*/。

选择器 {  
  属性: 值;  
  属性: 值;  
}  

• 选择器：匹配 HTML 元素（如 div、.class、#id）。

• 声明块：包含属性：值;对，如 color: red;。

---

引入方式

CSS样式可通过内联样式（style属性直接写入HTML标签）、内部样式表（<style>标签嵌入HTML文件头部）或外部样式表（<link>引入独立.css文件）引入。优先级内联最高，外部样式表利于复用和维护，多种方式可共存，层叠规则决定最终效果。

• 内联样式（优先级最高）：<div style="color: red;">

• 内部样式表（<style> 标签内）：

<style>  
  p { color: blue; }  
</style>  

• 外部样式表：<link rel="stylesheet" href="styles.css">

 选择器类型

CSS选择器用于定位HTML元素，包括基础选择器（元素如p、类.class、ID#id）、属性选择器[type="text"]、伪类（如:hover、:nth-child(n)）。组合选择器通过符号连接（后代空格、子元素>、兄弟+/~），通用选择器*匹配所有元素。结构伪类（:nth-child）和状态伪类（:focus）增强动态控制，优先级由选择器特异性（ID > 类 > 元素）和层叠顺序决定。

• 元素选择器：p { ... }

• 类选择器：.class { ... }

• ID 选择器：#id { ... }

• 属性选择器：[type="text"] { ... }

• 伪类（交互状态）：:hover，:focus，:nth-child(n)

---

盒模型（Box Model） 

在CSS中，每个HTML元素都被视为一个矩形的盒子，这个概念被称为“盒子模型”。理解盒子模型对于网页布局至关重要。

• content（内容）

• padding（内边距）

• border（边框）

• margin（外边距）

布局方式 

CSS布局方式：标准流、浮动、定位、盒子。Flex用于现代响应式布局，定位控制精准位置，浮动逐渐被替代。

• 标准流（Normal Flow）：默认文档流，块级和行内元素排列。

• 浮动（Float）：float: left/right，脱离文档流。

• 定位（Position）：

  • static（默认）

  • relative（相对自身偏移）

  • absolute（相对最近定位祖先）

  • fixed（相对视口固定）

  • sticky（滚动时固定）

• Flexbox（弹性布局）：

• .container {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
  }  

  （注：后面会写两篇分别介绍浮动和定位）

---

常用样式属性

• 文本：font-family, font-size, color, text-align

• 背景：background-color, background-image, background-size

• 边框：border: 1px solid black;

• 阴影：box-shadow, text-shadow

• 过渡 & 动画：

• .box {  
    transition: all 0.3s ease;  
    animation: fade 2s infinite;  
  }  
  @keyframes fade {  
    0% { opacity: 0; }  
    100% { opacity: 1; }  
  }  

  （注：过渡和动画后面也会写一篇介绍）

---

优先级和层叠 

优先级（从高到低）：

1. !important

2. 内联样式

3. ID 选择器

4. 类/伪类/属性选择器

5. 元素选择器

继承：部分样式（如 font, color）可被子元素继承。

总结 

     CSS（层叠样式表）用于控制网页的样式和布局，通过选择器匹配HTML元素并定义样式规则。核心概念包括盒模型（content、padding、margin）、布局方式（Flexbox、定位）和响应式设计（媒体查询）。样式可内联、嵌入或外链引入，优先级由选择器特异性决定（!important > 行内 > ID > 类 > 元素）。CSS支持文本、背景、过渡、动画等效果，并可通过变量（var）提升复用性。层叠机制处理样式冲突，继承性使某些属性自动传递给子元素。