基础选择器和字体文本相关样式

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 923 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #前端

基础选择器与字体文本样式技术文章大纲

基础选择器部分

CSS语法规则

*css的语法必须写在title里面

语法：style{

}

css引入的方法：

内嵌式:CSS 写在style标签中

提示:style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中

外联式:CSS 写在一个单独的.css文件中

提示:需要通过link标签在网页中引入

行内式:CSS 写在标签的style属性中

CSS 基础选择器类型

元素选择器（标签选择器）
结构:标签名 { css属性名:属性值; }

作用:通过标签名，找到页面中所有这类标签，设置样式

注意点:
1. 标签选择器选择的是一类标签，而不是单独某一个
2. 标签选择器无论嵌套关系有多深，都能找到对应的标签
类选择器（Class Selector）
结构:.类名 { css属性名:属性值; }

作用:通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点:
1. 所有标签上都有class属性，class属性的属性值称为类名(类似于名字)

2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

3. 一个标签可以同时有多个类名，类名之间以空格隔开

4. 类名可以重复，一个类选择器可以同时选中多个标签
ID 选择器（ID Selector）
结构:#id属性值 { css属性名:属性值; }

作用:通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点:
1. 所有标签上都有id属性

2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!

3. 一个标签上只能有一个id属性值

4. 一个id选择器只能选中一个标签
补充:类与id的区别

➢ class类名与id属性值的区别

class类名相当于姓名，可以重复，一个标签可以同时有多个class类名

id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

➢ 类选择器与id选择器的区别

类选择器以 . 开头

id选择器以 # 开头

➢ 实际开发的情况

类选择器用的最多

id一般配合js使用，除非特殊情况，否则不要使用id设置样式
通配符选择器（Universal Selector）
结构:* { css属性名:属性值; }

➢ 作用:找到页面中所有的标签，设置样式

➢ 注意点:
1. 开发中使用极少，只会在极特殊情况下才会用到
2. 在小页面中可能会用于去除标签默认的margin和padding(后续讲解)
目标:理解选择器的作用，能够使用基础选择器在 HTML 中选择元素

选择器作用:选中页面中对应的标签(找她)，方便后续设置样式(改她)

标签选择器:标签名 { css属性名:属性值; }

类选择器:.类名 { css属性名:属性值; }

id选择器:#id属性值 { css属性名:属性值; }

通配符选择器:* { css属性名:属性值; }

组合选择器

后代选择器（Descendant Selector）
子元素选择器（Child Selector）
相邻兄弟选择器（Adjacent Sibling Selector）
通用兄弟选择器（General Sibling Selector）

伪类与伪元素

常用伪类（:hover, :active, :focus）
常用伪元素（::before, ::after）

选择器优先级与权重

权重计算规则（内联样式、ID、Class/伪类、元素选择器）
!important 的使用及注意事项

/* 示例：选择器组合与优先级 */
.container .title {
  color: blue; /* 权重：0,2,0 */
}

#header {
  color: red !important; /* 权重：1,0,0（覆盖其他规则） */
}

字体与文本样式部分

字体样式（Font Properties）

font-family：字体族设置（通用字体族与自定义字体）
font-size：字体大小（px、em、rem、百分比单位）
属性名:font-size

➢ 取值:数字 + px

➢ 注意点:
谷歌浏览器默认文字大小是16px
单位需要设置，否则无效
font-weight：字重（normal, bold, 数值 100-900）
属性名:font-weight ➢ 取值:

关键字:

正常：normal

加粗：bold

纯数字:100~900的整百数:

正常：400

加粗：700

➢ 注意点:

不是所有字体都提供了九种粗细，因此部分取值页面中无变化

实际开发中以:正常、加粗两种取值使用最多。
font-style：斜体与正常样式（italic, normal）

文本样式（Text Properties）

color：文字颜色（十六进制、RGB、RGBA、HSL）
text-align：对齐方式（左、右、居中、两端对齐）
text-decoration：装饰线（下划线、删除线等）
line-height：行高（单位与倍数设置）
letter-spacing 与 word-spacing：字符与单词间距

高级文本控制

text-overflow：溢出文本处理（ellipsis 截断）
white-space：空白处理（nowrap, pre）
text-shadow：文字阴影效果

/* 示例：字体与文本样式 */
.heading {
  font-family: "Arial", sans-serif;
  font-size: 1.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.paragraph {
  line-height: 1.6;
  text-align: justify;
  color: #333;
}

实际应用与优化建议

响应式字体与相对单位

使用 rem 和 vw 实现响应式字体
媒体查询调整不同屏幕下的字体大小

字体加载性能优化

@font-face 自定义字体与格式选择（WOFF2 优先）
font-display 控制字体加载行为

浏览器兼容性与最佳实践

常见兼容性问题（如 text-shadow 在旧版 IE 中的支持）
使用 CSS 变量（Custom Properties）统一管理样式

/* 示例：响应式字体与变量 */
:root {
  --main-font: "Helvetica Neue", sans-serif;
  --text-size: clamp(1rem, 2vw, 1.2rem);
}

body {
  font-family: var(--main-font);
  font-size: var(--text-size);
}