2 Css3核心技术

CSS (Cascading Style Sheets，层叠样式表）
作用

  • 样式美化
  • 布局定位
  • 动画交互
    分类
  • 内联样式表（行内样式表）
    样式写到标签内部，可以控制当前标签的样式，特殊情况使用。
    <p style="color:red; font-size:14px;">文字内容</p>
  • 内部样式表
    写到 <head> 标签中，脱离结构，可以控制当前页面的所有标签，较为常用
  • 外部样式表
    单独新建一个 CSS 文件，完全脱离结构，可以控制整个网站的所有标签，最常用
    <link rel="stylesheet"href="./css/index.css">

1 css 选择器

  • CSS 选择器是 CSS 规则的第一部分。它是选择 HTML 元素的方式。
    Pasted image 20250920185249.png

1.1 基础选择器

基础选择器指的是有单个选择器组成，常见的有：

  • 类型选择器
  • 类选择器
  • id 选择器
  • 通配符选择器
选择器类型 语法实例 匹配范围 复用性 典型使用场景 注意事项
类型选择器 div {} 匹配所有指定 HTML 标签元素 某一类型标签 全局样式重置、基础标签样式（如 body, p） 避免滥用，可能导致样式冲突
类选择器 .nav {} 匹配所有含指定 class 的元素 多次使用 多元素共享样式 优先使用，避免与 ID 选择器冲突
ID 选择器 #header {} 匹配唯一含指定 id 的元素 唯一性 唯一元素标识 必须唯一，避免样式覆盖风险
通配符选择器 * {} 匹配所有元素 全局覆盖 全局样式重置 性能较差，慎用

1.1.1 类型选择器

  • 类型选择器选择某个类型的元素，也称为标签选择器
    Pasted image 20250920185610.png
  • CSS 层叠性
    • 原则： 后定义的样式覆盖先前的样式。（就近原则）
    • CSS 规则可以同时作用于一个元素，浏览器通过特定规则决定最终生效的样式。
    • 层叠性解决了样式冲突问题。

1.1.2 类选择器

  • 类选择器选择某 1 个元素或者多个元素。
    Pasted image 20250920190147.png
    注意：
    1. 多个英文单词组成尽量使用 - 链接
    2. class 属性可以有多类名中间用空格隔开
    3. 类选择器的优先级高于类型选择器

1.1.3 id 选择器

  • 选择 HTML 中具有特定 id 属性的唯一元素
    Pasted image 20250920190815.png

1.1.4 通配符选择器

  • 通配符选择器可以选择 HTML 中所有的标签，进行样式修改
  • 特殊情况下通过通配符清除所有元素的默认边距和填充，统一不同浏览器的默认样式。
    Pasted image 20250920191354.png

1.2 关系选择器

选择器 语法 选择范围 实例
后代选择器 A B 所有后代（跨层级） ul li {color: pink;}
子代选择器 A>B 直接子元素（仅一层） div>span {color: pink}
邻接兄弟选择器 A+B 紧邻的下一个同级元素 h2+p {color: pink}
通用兄弟选择器 A~B A 之后的所有同级元素 h2~p {color: pink}

1.2.1 后代选择器

/* 1 */
.div p{
	color: pink
}
/* 2 用类名 */
.footer p{
	color: pink
}
/* 3 可以好几层 */
.ul li a{
	color: red
}

<div class="footer">
	<p>只有我变粉</p>
</div>
<p>我不变色</p>
<ul>
	<li><a href="#">首页</a></li>
</ul>
  • 选择某个元素的后代元素（不限层级，包括子元素、孙元素等）

1.2.2 子代选择器

/* 1 */
.div>span {  
	color: green;
}
/* 2 用类名 */
.box>span {  
	color: green;  
}

<div class="box">
  <span>我是儿子</span>
  <p>
	  <span>我是孙子</span>
  </p>
</div>
  • 选择某个元素的直接子元素 （仅限一层）

1.2.3 兄弟选择器

1 邻接兄弟选择器
h2+p{
	color: pink;
}

Pasted image 20250921111731.png

  • 选中紧跟在 h 2 后面的第一个 p 元素
2 通用兄弟选择器
h2~p{
	color: pink;
}

Pasted image 20250921111751.png

  • 选中紧跟在 h 2 后面的所有 p 元素

1.3 分组选择器

div,
span {
	color: pink;
}
  • 是将不同的选择器组合在一起。使用逗号分割。
  • 也称为并集选择器。

1.4 伪类选择器

  • 选择元素的特定状态或结构位置，符号是冒号 :

1.4.1 状态伪类选择器

  • 根据用户交互或状态变化选择。
    比如：鼠标经过链接、表单获得焦点等
1 链接伪类

链接伪类用于根据链接的不同状态（如未访问、悬停、点击等）为其添加样式，从而提升用户体验和界面交互性。

1.4.2 结构伪类

  • 根据元素的位置选择。
    比如：选择第5个第10个元素、选择前3个元素等

1.4.3 表单伪类

  • 针对表单元素的状态
    比如：表单禁用、选中复选框等

2 css 文本样式

  • CSS 文本样式用于控制网页中文字的外观，包括字体、颜色、对齐、间距等，主要分为两大类：
    • 字体样式
      使用哪种字体，字体大小，字体粗体、斜体，等等
    • 文本布局
      文本对齐、行高、字间距、首行缩进等

2.1 字体样式

属性 说明 常见取值 示例
color 设置字体颜色 颜色名称(red, blue)
十六进制(#ff0000)、RGB(rgb(255,0,0))、
RGBA(rgba(255,0,0,0.5))		 color: red;
color: #3366cc;
font-family 字体族 无衬线字体 font-family: "Microsoft YaHei", sans-serif;
font-size 字体大小 px font-size: 16px;
font-style 字体斜体 normal(正常)、italic(斜体) font-style: normal;
font-weight 字体粗体 数值(100-900)、关键字(normal, bold) font-weight: 400;
font-weight: 700;
text-decoration 字体加线（上中下划线） none(无装饰)
underline(下划线)
overline(上划线)
line-through(中划线)		 text-decoration: underline;
text-decoration: line-through;

2.1.1 字体颜色 color

  1. 关键字 - 学习用
    比如：red、green、blue、pink等。
    例如：p { color: pink;}
  2. 十六进制 - 开发用
    比如： 红色 #FF0000 或者 #F00
    例如：p { color: #f00; }
  3. rgb 格式 - 特殊用
    • rgb() 函数接受三个参数，分别表示颜色的红、绿和蓝。也是设计稿复制的
      比如： 红色 rgb(255,0,0)
      例如：p { color: rgb(255,0,0) }
    • 另有：rgba(255,0,0, 0.3) 文字透明
      最后一个数值取值 0~1
      0 完全透明 1 完全不透明

2.1.2 字体族 font-family

body {
	font-family: Arial, Helvetica, sans-serif;
}
  • 给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体
  • 属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体
  • 网页建议开发使用无衬线字体
    Pasted image 20250924203415.png

2.1.3 字体大小 font-size

body {
	font-size: 16px;
}
  • 不同浏览器默认字体大小不一样，谷歌默认 16 px，建议给 body 标签统一指定大小，做到浏览器统一

2.1.4 字体风格 font-style

em {
	font-style: normal;
}
p {
	font-style: italic;
}
  • font-style 用来打开和关闭文本 italic (斜体) 。
    • normal: 将文本设置为普通字体 (将存在的斜体关闭)
    • italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本
  • 最常见： 让 em 或者 i 标签取消默认倾斜

2.1.5 字体粗体 font-weight

  • 使用场景
    1. 很多标题是不要加粗的，此时可以用CSS取消加粗。
    2. 部分大批量文字可以利用CSS加粗。
  • 属性值
    • normal: 正常粗细
    • bold: 加粗
  • 数字属性值（常用）
    取值范围 100~900 之间，常用就是 400 和 700
    • 400: 正常粗细
    • 700: 加粗

2.1.6 字体装饰 下划线/删除线 text-decoration

  • 设置/取消字体上的文本装饰。
  • 使用场景：
    1. 最常见设置链接下划线，比如取消下划线、鼠标放上后出现下划线等。
    2. 特殊情况添加删除线。
  • 属性值
  • none: 取消文本装饰
  • underline: 下划线
  • overline：上划线
  • line-through：穿过文本的线

2.2 文本布局

作用于文本的对齐、缩进、间距等布局功能的属性

字体样式 说明 核心取值 注意事项 示例
text-align 文本对齐 left、right、center、justify（两端对齐） 仅对块级元素生效 p { text-align: center; }
text-indent 首行缩进 长度值（如 20px、2em） 仅对块级元素生效 p { text-indent: 2em; }
letter-spacing 文本字符间距 数值 负值可使字符重叠（需谨慎使用） h1 { letter-spacing: 2px; }
line-height 行高 像素或者倍数 1.5 当前字体大小1.5倍。
行高等于高，单行文字垂直居中		 p { line-height: 1.6; }

2.2.1 文本对齐 text-align

p {
	text-align: center;
}
  • 控制文本在它所在的块级盒子内如何水平对齐
  • 使用场景：
    1. 文本/图片在盒子水平对齐。
    2. 文章文字两端对齐。（腾讯体育）
  • 属性值
    • left: 文本左对齐（默认）
    • right: 文本右对齐
    • center：文本水平居中对齐
    • justify: 自动改变字间距，两端对齐

2.2.2 首行缩进 text-indent

p {
	text-indent: 2em;
}
  • 设置块级元素中文本行前面空格（缩进）的长度
  • 使用场景：
    1. 段落首行缩进2个字的效果。
    2. logo隐藏文字效果（后续讲解）。
  • 属性值：
    • 数字
      常见单位是em，相对单位，本元素的文字大小
      1em 等于当前元素的字体大小，如果当前元素没有大小，则按照父元素文字大小

2.2.3 字间距 letter-spacing

p {
	letter-spacing: 2px;
}
  • 使用场景：
    1. 调整字与字之间距离，用户体验更好。
  • 属性值：数字

2.2.4 行高 line-height

p {
	line-height: 1.5;
}
  • 使用场景：
    1. 设置多行文本之间的上下间距。
    2. 让单行文本垂直居中。（ 盒子高度=上下间距+文字高度=行高 ）
  • 属性值
    • 数字px
    • 数字不带单位（当前字体大小的倍数）

2.3 font 简写

body {
  /* font: 14px "宋体"; */
  font: italic 700 18px/1.5 "宋体";
}
  • font 简写属性在一个声明中设置多个字体属性
  • 使用场景
    给整个页面设置相关字体样式
  • 语法
    font: font-style font-weight font-size/line-height font-family;
    • 其中 font-size 和 font-family 是必须写
    • 其他可以省略，默认显示
    • 属性有严格的书写顺序

2.4 css继承性

子元素自动继承父元素的某些 CSS 样式属性。

  • 主要继承跟文字相关的样式属性，比如字体、颜色、文本对齐等。
  • 但是子元素定义自己样式，会优先自己样式。
Built with MDFriday ❤️