企业官网建设流程全解析

CSS 文本样式分类

CSS 文本样式用于控制文字外观，分为两大类：

• 字体样式：控制字体本身（颜色、字体、大小、粗细等）
• 文本布局：控制文字排版（对齐、行高、间距等）

字体样式的核心属性

1. 字体颜色（color）

• 作用：设置文字颜色
• 常见取值：
  • 关键字：red/pink等（生产环境少用，仅学习）；
  • 十六进制：#f00/#3366cc（开发常用，可从设计稿复制）；
  • RGB/RGBA：rgb(255,0,0)（颜色）、rgba(255,0,0,0.5)（带透明度，取值 0-1）；
• 示例：color: #f00;

2. 字体族（font-family）

• 作用：设置文字的字体（按先后顺序选择可用字体）
• 语法：多个字体用逗号分隔，浏览器选列表中第一个已安装的字体；
• 示例：

  css

  /* 通用无衬线字体 */ font-family: Arial, Helvetica, sans-serif; /* 小米字体配置（设计稿常用） */ font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,...;

3. 字体大小（font-size）

• 作用：设置文字大小
• 常用单位：px（CSS 像素，绝对单位）；
• 注意：不同浏览器默认大小不同（如 Chrome 默认 16px），建议给body统一设置（如font-size: 16px;）；
• 示例：font-size: 18px;

4. 字体风格（font-style）

• 作用：控制文字是否斜体
• 取值：
  • normal：正常字体（关闭斜体，常用于取消em/i标签的默认斜体）；
  • italic：斜体（使用字体自带斜体版本）；
• 示例：font-style: normal;（取消 em 的斜体）

5. 字体粗细（font-weight）

• 作用：设置文字粗细
• 取值：
  • 关键字：normal（正常）、bold（加粗）；
  • 数字：400（对应 normal）、700（对应 bold），取值范围 100-900；
• 场景：取消标题默认加粗、批量文字加粗；
• 示例：font-weight: 700;

6. 字体装饰（text-decoration）

• 作用：设置文字的装饰线
• 取值：
  • none：取消装饰（常用：取消链接的默认下划线）；
  • underline：下划线；
  • overline：上划线；
  • line-through：删除线；
• 示例：text-decoration: line-through;（添加删除线）

字体样式总结表

文本布局的定义

用于控制文字的对齐、缩进、间距等排版功能，是 CSS 文本样式的重要组成部分。

核心属性详解

1. 文本对齐（text-align）

• 作用：控制文本在块级盒子内的水平对齐方式
• 属性值：
  • left：左对齐（默认）；
  • right：右对齐；
  • center：水平居中；
  • justify：自动调整字间距，实现两端对齐；
• 场景：文本 / 图片水平对齐、文章文字两端对齐；
• 注意：仅对块级元素生效；
• 示例：p { text-align: center; }

2. 首行缩进（text-indent）

• 作用：设置块级元素首行文本的缩进量
• 属性值：长度值（常用em，1em = 当前元素字体大小）；
• 场景：段落首行缩进 2 个字（如text-indent: 2em;）；
• 注意：仅对块级元素生效；
• 示例：p { text-indent: 2em; }

3. 字符间距（letter-spacing）

• 作用：设置文本中字符之间的间距
• 属性值：数值（如2px）；
• 场景：调整字间距，提升阅读体验；
• 注意：负值会导致字符重叠，需谨慎使用；
• 示例：h1 { letter-spacing: 2px; }

4. 行高（line-height）

• 作用：设置文本行与行之间的垂直间距
• 属性值：
  • 像素值（如25px）；
  • 倍数（如1.5，即当前字体大小的 1.5 倍）；
• 场景：
  1. 调整多行文本的上下间距；
  2. 单行文本垂直居中（原理：行高 = 盒子高度）；
• 示例：p { line-height: 1.6; }

文本布局总结表

font 简写的作用

在一个 CSS 声明中同时设置多个字体相关属性，简化代码书写。

使用场景

主要用于给整个页面统一设置字体样式（如页面全局的字体、大小、行高）。

语法规则

css

font: font-style font-weight font-size/line-height font-family;

• 必填项：font-size和font-family必须写，否则简写无效；
• 可选项：font-style（默认 normal）、font-weight（默认 normal）、line-height（默认与字体大小一致）可省略；
• 严格顺序：属性必须按上述顺序书写，不能打乱。

分组选择器

• 定义：将不同选择器组合在一起（用逗号分隔），也叫 “并集选择器”。
• 使用场景：多个元素需要设置相同样式时，简化代码。
• 语法示例：

  css

  div, span { color: pink; /* div和span都会应用该样式 */ }

伪类选择器

• 核心特点：选择元素的特定状态 / 结构位置，符号为冒号（:）。
• 分类及作用：
  1. 状态伪类：根据用户交互 / 状态变化选择（如鼠标悬浮链接、表单获焦）；
  2. 结构伪类：根据元素的位置选择（如选第 5 个元素、前 3 个元素）；
  3. 表单伪类：针对表单元素的状态（如表单禁用、选中复选框）。

状态伪类：链接伪类

• 作用：根据链接的不同状态（未访问、已访问、悬浮、点击）设置样式，提升交互体验。
• 4 个核心链接伪类：

  伪类	作用
  a:link	未访问链接的默认样式
  a:visited	已访问链接的样式
  a:hover	鼠标悬浮在链接上的样式
  a:active	链接被点击时的瞬时状态

• 顺序规则（LVHA 顺序）：必须按a:link → a:visited → a:hover → a:active书写，否则样式可能失效。
• 实际开发常用写法（以调整下划线 / 颜色为例）：

  css

  a { text-decoration: none; /* 取消默认下划线 */ color: #666; } a:hover { text-decoration: underline; /* 悬浮时显示下划线 */ color: #ff0f23; }

用户行为伪类的定义

属于状态伪类的分支，也叫 “动态伪类”，是在用户与文档交互时（如鼠标经过、表单获焦）为元素应用的样式。

使用场景

1. 鼠标经过元素时，修改元素样式；
2. 表单元素（如输入框）获得焦点时，修改样式。

核心伪类及作用

示例代码

css

/* 鼠标经过div时，修改背景色 */ div { background-color: pink; } div:hover { background-color: red; } /* 输入框获焦时，修改边框样式 */ input:focus { border: 2px solid blue; }

结构伪类选择器的定义

根据元素在兄弟元素中的位置来选择目标元素，是伪类选择器的一种类型。

使用场景

选择一组兄弟元素中的第 1 个、最后 1 个，或第 n 个元素。

核心结构伪类及作用

n的取值规则

n用于:nth-child(n)中，取值类型包括：

1. 数字：从 1 开始（如:nth-child(3)选第 3 个元素）；
2. 关键字：
   • odd：选择奇数位置的元素；
   • even：选择偶数位置的元素；
3. 公式（n从 0 开始计算）：
   • 3n：选第 3、6、9… 个（3 的倍数）；
   • n+2：选第 2 个及以后的元素；
   • -n+3：选前 3 个元素。

表单伪类选择器

• 定义：针对表单元素的状态设置样式的伪类选择器。
• 使用场景：
  1. 表单按钮禁用时调整样式；
  2. 复选框 / 单选按钮选中时修改样式。
• 核心选择器及作用：

  表单伪类	作用
  :disabled	选择处于禁用状态的表单元素
  :checked	选择处于选中状态的单选 / 复选按钮

伪元素选择器

• 定义：选择元素的特定部分（或插入内容），使用双冒号（::）标识。

1. 选择元素特定部分

• 使用场景：
  1. 修改表单placeholder（占位符）的文字颜色；
  2. 实现文字首行 / 首字母的装饰效果。
• 核心选择器及作用：

  伪元素选择器	作用
  ::first-line	选择元素内的首行文字
  ::first-letter	选择元素内的首字母
  ::placeholder	选择input/textarea的占位符文字

2. 插入内容（::before / ::after）

• 作用：在元素内部插入伪元素（非真实 DOM 元素）：
  • ::before：插入为元素内的第一个子元素；
  • ::after：插入为元素内的最后一个子元素。
• 示例代码：

  css

  div::before { content: "开始"; /* 必须写content属性，无内容填空引号 */ color: red; } div::after { content: "结束"; color: red; }

• 注意事项：
  1. ::before/::after是伪元素，特性类似内联元素；
  2. content属性是必填项，不可省略；
  3. 后期常用于实现小图标、装饰性元素等效果。

属性选择器的定义

根据元素的属性特征（属性名、属性值）来精准定位元素，实现更灵活的样式控制。

使用场景

1. 表单元素的样式统一控制；
2. 图标字体的样式适配；
3. 国际化语言（如多语言文本）的样式适配。

核心选择器及作用

示例参考（如 B 站的表单样式控制）

css

/* 匹配type为checkbox/radio的元素 */ [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; }

CSS 三大特性

CSS 的核心特性包括继承性、层叠性、优先级，共同决定样式的最终呈现。

1. 继承性

• 定义：子元素会自动继承父级元素的部分样式（主要是文字类样式，如字体、颜色等）。
• 特殊情况：部分元素的默认样式无法通过继承修改，需单独指定样式：
  • 如h标签的默认加粗、<a>标签的默认下划线，不能通过修改父级样式取消，需单独写h { font-weight: normal; }或a { text-decoration: none; }。
• 权重：继承样式的权重为0。

2. 层叠性

• 规则：当多个样式的权重相等时，后面声明的样式会覆盖前面的样式（遵循 “就近原则”）。

优先级（权重规则）

优先级是浏览器判断样式优先级的依据，基于选择器的权重匹配规则。

1. 优先级核心原则

• 权重不同：权重高的选择器对应的样式优先生效；
• 权重相同：遵循层叠性（就近原则）；
• 权重是4 位分层级的数值（如(a,b,c,d)），层级之间不能进位。

2. 选择器的权重值

3. 权重叠加规则

多个选择器组合时，权重是各选择器的层级数值相加（不进位）。

• 示例：#nav .item a的权重 = ID 选择器(0,1,0,0)+ 类选择器(0,0,1,0)+ 标签选择器(0,0,0,1)=(0,1,1,1)；
• 查看方式：可通过代码计算，或浏览器调试工具（Styles 面板）查看 “Specificity”。