1. 什么是CSS

层叠样式表（Cascading Style Sheets,CSS）：通过不同的规则来控制页面上元素的样式，并根据优先级应用不同的样式，使网页在不同设备和屏幕上都呈现良好的视觉体验

层叠性的体现：

  • 来源的优先级：内联样式优先级最高，接下来是内部样式表，最后是外部样式表
  • 选择器的优先级：从高到低依次是内联样式、ID 选择器、类选择器、标签选择器
  • 顺序优先级：如果两个样式的来源和选择器相同，那么后定义的样式会覆盖先定义的样式

2. CSS使用

2.1 基本语法

属性后跟冒号:，属性值后面需要有分号;

1
2
3
4
选择器 {
  属性1: 属性值1;
  属性2: 属性值2;
}

注意html是属性后跟等于号=，属性值后面需要有空格

冒号后跟一个空格，每一个属性值后都需要有分号

2.2 设置手段

  • 外链：引用外部CSS文件（最常用，实现css和html的分离）
1
<link rel="stylesheet" href="/url/to/style.css"
  • 嵌入：写在css文件中的<style></style>标签内（一般用于全局设置和特殊页面的设置）
1
2
3
4
<style>
  li { margin: 0; list-style: none; }
  p { margin: 1em 0; }
</style>
  • 內联：作为标签内的属性值（不推荐，html的属性不应该用于样式）
1
<p style="margin: 1em 0">contene</p>

2.3 CSS后台

  1. 解析 HTML：浏览器会首先解析 HTML 文件，构建 DOM 树
  2. 解析 CSS：浏览器会解析所有的 CSS 规则，它将根据不同的 CSS 文件、内联样式或内部样式表构建一个 CSSOM 树
  3. 计算样式：浏览器会将 DOM 树和 CSSOM 树结合起来，计算每个 DOM 元素的最终样式
  4. 布局：浏览器计算每个元素的确切位置和尺寸
  5. 绘制：浏览器会将元素渲染到屏幕上，应用颜色、背景、边框、阴影等样式
  6. 合成：当页面元素绘制完成后，浏览器会将各个图层合成在一起并最终呈现在用户屏幕上

3. 选择器

3.1 基本选择器

  • 通配选择器：使用*选择所有元素
  • 元素/标签选择器：填写指定的html元素/标签名称
  • ID 选择器：使用#选择具有唯一ID的元素
  • 类选择器：使用.选择属于某个类的所有元素

类选择器可以其他选择器复合使用，比如p.center表示选择类为center中的所有p标签
可以一次性选择多个选择器，用逗号隔开，如h1, h2, .center

3.2 属性选择器

  • [attribute]：选择具有某个属性的所有元素
  • [attribute="value"]：选择具有特定属性值的元素
  • [attribute^="value"]：选择属性值以指定字符串开头的元素
  • [attribute$="value"]：选择属性值以指定字符串结尾的元素
  • [attribute*="value"]：选择属性值包含指定字符串的元素

3.3 组合选择器

  • 后代选择器：使用一个空格 选择父元素的所有后代元素
  • 子元素选择器：使用>选择父元素的直接子元素
  • 相邻选择器：使用+选择紧邻某元素之后的第一个元素
  • 兄弟选择器：使用~选择某元素后面的所有元素

3.4 伪元素选择器

  • ::before：在元素的内容之前插入内容（常用于添加图标）
  • ::after：在元素的内容之后插入内容（常用于添加分隔符）
  • ::first-letter：选择元素的首个字母（常用于大写字母）
  • ::first-line：选择元素的首行文本（常用于首行突出）
  • a:link：选择未被访问的链接
  • a:visited：选择已经被访问过的链接
  • a:hover：选择鼠标悬停在的链接
  • a:active：选择正在被点击的链接
  • input:focus：选择当前具有焦点的元素（常用于表单填写）
  • tr:first-child：选择父元素中的第一个子元素（常用于首行加粗）
  • td:last-child：选择父元素中的第一个子元素（常用于首列加粗）

伪元素是处于特殊状态的元素，它不能被看作为一个新的 HTML 元素，也无法成为真正的 DOM 元素，但是可以添加独立的 CSS 样式，甚至改变页面布局

4. 基本属性

4.1 颜色：color

  • RGB：通过红、绿、蓝三种色光的强度值表示颜色
    • 十六进制表示，每一字段从00到ff：#rrggbb
    • 十进制表示，每一字段从0到255：rgb(red, green, blue)
  • HSL：通过色相、饱和度和亮度来表达颜色
    • Hue：控制颜色的色相（0-360）
    • Saturation：控制色彩的饱和度（0-100%），越大颜色越鲜艳
    • Lightness控制颜色的亮度（0-100%），越大颜色越亮
  • 关键字：black，white，skyblue，maroon等预定义的经典颜色
  • 透明度（transparent）：控制颜色的透明程度，范围从 0（完全透明）到 1（完全不透明），放在第四通道（rgba和hsla）

4.2 文本

4.2.1 字体风格：font-family

font-family：用于指定文本的字体序列，浏览器会按顺序尝试使用第一个可用的字体，字体名称之间用逗号,分隔

通用字体族：font-familt的最后一个值，是浏览器都具有的字体风格

风格字体样式例子适用
serif衬线字体Times New Roman、宋体正式和传统的文本风格
sans-serif无衬线字体Arial、黑提现代和简洁的设计
monospace等宽字体Courier、中文代码显示和技术文档
cursive手写字体Comic Sans、楷体适合个性化的场景
fantasy装饰性字体Papyrus通常用于特定主题设计

4.2.2 字体大小：font-size

  • px：像素大小
  • %和em：相对于父元素的比例
  • rem：相对于根元素的比例
  • 关键字：small、medium、large

4.2.3 字体粗细：font-weight

  • normal：正常字体粗细（相当于 400）
  • bold：粗体（相当于 700）
  • bolder：比父元素更粗
  • lighter：比父元素更细
  • 数字值：从 100 到 900

需要字体支持粗细，否则不会有变化！

4.2.4 字体风格：font-style

  • normal：使文本竖直（默认值）
  • italic：使文本斜体
  • oblique：使文本倾斜，通常比斜体的倾斜程度稍微小一些

4.2.5 文本修饰：text-decoration

  • none：移除任何装饰（通常用于去掉链接的下划线）
  • underline：添加下划线
  • line-through：添加删除线
  • overline：添加上划线

4.2.6 字符间距：letter-spacing

  • normal：使用浏览器默认的字符间距（默认值）
  • 长度单位：可以使用px、em、rem等来修改字符之间的间距

4.2.7 行高：line-height

  • normal：使用浏览器默认的行高（默认值）
  • 单一数值：相对于字体大小的比例
  • 比例：使用%，em，rem设置相对于字体大小的比例
  • 像素单位：设置固定的行高

4.2.8 对齐：text-align

  • left：将文本对齐到容器的左边（默认值）
  • right：将文本对齐到容器的右边
  • center：将文本居中对齐
  • justify：使文本两端对齐，行内文字会自动调整间距以填满整行

justify对最后一行不生效，因为最后一行内容较少，强行填满会破坏美观

4.2.9 缩进：text-indent

  • 单位可以是px、em、rem等长度单位
  • 使用负值时，文本会向左缩进

text-indent只影响段落的第一行，对其他行无效

4.3 空白符处理：white-spacecuno

方式合并空格保留换行符自动换行
normal是否是
nowrap是否是
pre否是否
pre-wrap否是是
pre-line否是是