css 起步

什么是 CSS

CSS（Cascading Style Sheets，层叠样式表）是为 web 内容添加样式的代码。

和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。

CSS 是一门样式表语言，可以用它来选择性地为 HTML 元素添加样式。

一般在 HTML 文件中头部（也就是 head 标签之间）引入 CSS：

<link href="styles/style.css" rel="stylesheet" />

CSS 创建

插入样式表的方法有三种:

• 外部样式表（External style sheet）
• 内部样式表（Internal style sheet）
• 内联样式（Inline style）

一般情况下，优先级由高到低如下：

• 内联样式 Inline style
• 内部样式 Internal style sheet
• 外部样式 External style sheet
• 浏览器默认样式

CSS 规则集

包含以下部分：

• 选择器（Selector）：HTML 元素的名称位于规则集开始。
• 声明（Declaration）：一个单独的规则，如 color: red; 用来指定添加样式元素的属性。
• 属性（Properties）：改变 HTML 元素样式的途径，由编写人员决定修改哪个属性以改变规则。
• 属性值（Property value）：在属性的右边，冒号后面的值，它从指定属性的众多外观中选择一个值。

选择器选择一个或多个元素，给其添加样式。

常用的选择器类型

• 元素选择器（也称作标签或类型选择器），例如 p 选择 <p>
• 类选择器，例如 .my-class 选择 <p class="my-class">
• ID 选择器，例如 #my-id 选择 <p id="my-id">
• 属性选择器，例如 img[src] 选择 <img src="myimage.png"> 但不是 <img>
• 伪类选择器，例如 a:hover 选择仅在鼠标指针悬停在链接上时的 <a> 元素

选择器分类

• 基本选择器
  • 通用选择器：选择所有元素 *
  • 元素选择器：按照给定的节点名称匹配
  • 类选择器：按照给定的 class 属性的值匹配 .classname
  • ID 选择器：按照 id 属性匹配一个元素 #idname
  • 属性选择器：按照给定的属性 [attr]
• 分组选择器（Grouping selector）
  • 用 , 将不同选择器组合在一起
• 组合器（Combinator）
  • 后代组合器：空格，组合器选择前一个元素的后代节点
  • 直接子代组合器：> 组合器选择前一个元素的直接子代的节点
  • 一般兄弟组合器：~ 组合器选择兄弟元素
  • 紧邻兄弟组合器：+ 组合器选择相邻元素
  • 列组合器：|| 组合器选择属于某个表格行的节点
• 伪选择器（Pseudo）
  • 伪类：: 对按照未被包含在文档树中的状态信息匹配
  • 伪元素：:: 对无法用 HTML 语义表达的实体匹配

盒子模型

页面里大部分 HTML 元素都可以被看作若干层叠的盒子。

CSS 布局主要是基于盒子模型。在页面上占用空间的每个盒子都有类似的属性：

padding（内边距）：是指内容周围的空间。
border（边框）：是紧接着内边距的线。
margin（外边距）：是围绕元素边界外侧的空间。

CSS 规则

有相同的元素选择器，有相同的优先级，顺序在最后的生效。

一些设置在父元素上的 CSS 属性是可以被子元素继承的，有些则不能。

一个选择器的优先级可以说是由三个不同的值（或分量）相加，
可以认为是 百（ID）十（类）个（元素），三位数的三个位数：

• ID：选择器中包含 ID 选择器则百位得一分。
• 类：选择器中包含类选择器、属性选择器或者伪类则十位得一分。
• 元素：选择器中包含元素、伪元素选择器则个位得一分

通用选择器（*）、组合符（+、>、~、' '）
和调整优先级的选择器（:where()）不会影响优先级。

mdn