CSS 学习笔记

1. CSS 基础

$a.$ 概述

CSS (Cascading Style Sheets) 用于为 HTML 文档添加样式，控制网页的布局和外观。它通过一系列规则 (rules) 来实现。

CSS 的基本语法如下: 一条规则由一个选择器 (selector) 和一个声明块 (declaration block) 组成。声明块包含一个或多个由分号分隔的声明，每个声明都是一个 属性: 值 对。

/* selector { property: value; } */
div {
  color: white;
  background-color: black;
}

$b.$ 选择器

选择器 (Selector) 用于“选择”要应用样式的 HTML 元素。CSS 中有下面的选择器：

通用选择器 (*): 选中页面上的所有元素。
类型选择器 (Type Selectors): 选中所有指定类型的元素（如 div, p, h1）。
类选择器 (.classname): 选中所有具有指定 class 属性的元素。
- 一个元素可以有多个类，用空格隔开 (class="class1 class2")。
- 类名不能以数字开头。
ID 选择器 (#idname): 选中具有指定 id 属性的单个元素。
- ID 在整个页面中必须是唯一的。
- 应谨慎使用，通常类选择器更灵活。
属性选择器 ([attribute]): 根据元素的属性或属性值来选择。
- [disabled]: 选中所有带 disabled 属性的元素。
- [type="text"]: 选中 type 属性值为 text 的元素。
- [class~="important"]: 选中 class 属性值中包含 important 单词的元素。
- [href^="https"]: 选中 href 属性值以 https 开头的元素。
- [href$=".pdf"]: 选中 href 属性值以 .pdf 结尾的元素。
- [href*="example"]: 选中 href 属性值中包含 example 字符串的元素。
分组选择器 (Grouping Selector): 使用逗号分隔，将相同的样式应用于多个选择器。

.read, .unread {
  color: white;
  background-color: black;
}

链式选择器 (Chaining Selectors): 将多个选择器连接在一起（无空格），选中同时满足所有条件的元素。

/* 选中同时拥有 subsection 和 header 两个类的元素 */
.subsection.header {
  color: red;
}

后代组合器 (Descendant Combinator): 使用空格分隔，选中作为某个元素后代（子、孙等）的元素。

/* 选中 class 为 ancestor 的元素内部的任何 class 为 contents 的元素 */
.ancestor .contents {
  /* declarations */
}

子代组合器 (>): 选中作为某个元素直接子代的元素。

/* 只选中 .parent 下的直接子元素 .child */
.parent > .child {
  /* declarations */
}

伪类 (Pseudo-classes): 以冒号 (:) 开头，用于定义元素的特殊状态。
- :hover: 鼠标悬停在元素上时。
- :focus: 元素获得焦点时（如输入框被点击）。
- :first-child: 作为其父元素的第一个子元素。
- :last-child: 作为其父元素的最后一个子元素。
- :nth-child(n): 作为其父元素的第 n 个子元素，n 可以是数字、odd (奇数)、even (偶数) 或公式 (如 2n+1)。
伪元素 (Pseudo-elements): 以双冒号 (::) 开头，用于为元素的特定部分添加样式。
- ::before: 在元素内容之前插入一个虚拟元素。
- ::after: 在元素内容之后插入一个虚拟元素。
- ::first-line: 选中块级元素的第一行文本。
- ::first-letter: 选中块级元素的第一个字母。

$c.$ 常用属性

颜色:
- color: 设置文本颜色。
- background-color: 设置元素背景颜色。
- 值可以是颜色名 (red)、HEX (#ff0000)、RGB (rgb(255,0,0)) 或 HSL。
排版:
- font-family: 设置字体。建议提供一个备选字体列表，以通用字体族结尾（如 "Times New Roman", serif）。
- font-size: 设置字体大小（如 22px）。
- font-weight: 设置字体粗细（如 bold 或 700）。
- text-align: 设置文本的水平对齐方式（如 center, left）。
- line-height: 设置行高，可以改善文本的可读性。
- text-decoration: 添加文本装饰，如 underline (下划线)。
尺寸:
- height 和 width: 设置元素的高度和宽度。
- min-width, max-width, min-height, max-height: 设置元素的最小/最大尺寸。
背景:
- background-image: 设置背景图片 (url('path/to/image.jpg'))。
- background-size: 控制背景图片大小 (cover, contain)。
- background-position: 控制背景图片位置。
- background-repeat: 控制背景图片是否重复。

$d.$ 添加 CSS 到 HTML

有三种方式将 CSS 添加到 HTML：

外部 CSS (External CSS): 最推荐的方式。将 CSS 写在独立的 .css 文件中，并通过 <link> 标签引入 HTML 的 <head> 部分。
```
<head>
  <link rel="stylesheet" href="styles.css">
</head>
```
内部 CSS (Internal CSS): 将 CSS 规则写在 HTML 文件的 <head> 部分的 <style> 标签内。适用于单个页面的特殊样式。
内联 CSS (Inline CSS): 将样式直接写在 HTML 元素的 style 属性中。不推荐，因为它会使 HTML 混乱且难以维护，并且具有最高的优先级，可能导致意外的样式覆盖。

2. 层叠、特殊性与继承

层叠 (Cascade) 是浏览器决定当多个规则冲突时应用哪个规则的过程。有如下的规则：

$a.$ 特殊性/优先级 (Specificity)

更具体的选择器具有更高的优先级。浏览器通过一个加权系统来计算特殊性。

优先级顺序: 内联样式 > ID 选择器 > 类/属性/伪类选择器 > 类型/伪元素选择器 > 通用选择器。
计算方法: 可以想象成一个 (A, B, C, D) 的值，其中：
- A: 内联样式，是则为 1。
- B: ID 选择器的数量。
- C: 类、属性、伪类选择器的数量。
- D: 类型、伪元素选择器的数量。
- 比较时从左到右，值大的胜出。例如 0,1,2,1 比 0,1,1,2 优先级高。
组合器 ( , >) 本身不增加优先级。
!important 规则会覆盖任何其他声明，但应避免使用，因为它会破坏自然的层叠规则。

$b.$ 继承 (Inheritance)

子元素会继承父元素的某些属性（主要是排版相关的，如 color, font-family, text-align）。尺寸、边框、边距等通常不会被继承。

直接应用 > 继承: 直接为子元素设置的样式会覆盖从父元素继承的样式。

$c.$ 规则顺序 (Rule Order)

如果两条规则的特殊性完全相同，则后面定义的规则会覆盖前面的规则。

3. 盒子模型 (Box Model)

网页上的每个元素都被视为一个矩形的盒子。

$a.$ 盒子模型的组成

一个元素从内到外依次是：

内容 (Content): 元素的文本、图片等。
内边距 (Padding): 内容与边框之间的空间。
边框 (Border): 包围内边距的线。
外边距 (Margin): 边框以外的空间，用于控制元素之间的距离。

margin 和 padding 可以单独设置四个方向：margin-top, margin-right, margin-bottom, margin-left。
外边距折叠 (Margin Collapsing): 在垂直方向上，相邻的两个块级元素的外边距会发生折叠，取其中较大的值，而不是相加。

$b.$ `box-sizing` 属性

该属性决定了元素的 width 和 height 如何计算。

content-box (默认值): width 和 height 只包括内容的尺寸。padding 和 border 会被额外加上，导致元素的实际占用空间变大。
border-box (推荐): width 和 height 包括内容、内边距和边框。这是更直观的模型，可以更容易地控制元素的总尺寸。

/* 通常会为所有元素设置此模式，以统一行为 */
*, *::before, *::after {
  box-sizing: border-box;
}

5. `display` 属性：块级、内联与其它

元素的 display 属性决定了它在页面流中的行为。

$a.$ `block` 元素

行为:
- 独占一行，每个块级元素都会从新的一行开始。
- 宽度默认为父元素的 100%。
- 可以设置 width, height, margin, padding。
示例: <div>, <p>, <h1>-<h6>, <ul>, <li>, <form>, <section>.

$b.$ `inline` 元素

行为:
- 不会开始新的一行，与其他内联元素并排显示。
- 宽度由其内容决定。
- 无法有效设置 width, height。垂直方向的 margin 和 padding 也不会影响周围元素。
示例: <a>, <span>, <strong>, <em>, <img>, <input>.

$c.$ `inline-block` 元素

行为:
- 像 inline 元素一样与其他元素并排。
- 像 block 元素一样可以设置 width, height, margin, padding。
用途: 当需要将多个块状元素并排排列时非常有用。

$d.$ `none`

行为: 元素会从页面上完全消失，不占据任何空间，就像它不存在一样。这与 visibility: hidden; 不同，后者会隐藏元素但仍保留其所占空间。

$e.$ `div` 与 `span` 的使用

<div>: 一个通用的块级容器。主要用于将页面划分为不同的区块，以便进行布局和样式化。
<span>: 一个通用的内联容器。主要用于包裹一小段文本或行内元素，以便单独设置样式。

6. 定位

position 属性用于精确控制元素在页面上的位置。

$a.$ `static` (默认值)

元素遵循正常的文档流，top, right, bottom, left 和 z-index 属性无效。

$b.$ `relative`

元素仍在文档流中占据原始位置。
可以通过 top, right, bottom, left 相对于其原始位置进行偏移。
通常用作 absolute 定位元素的定位上下文。

$c.$ `absolute`

元素脱离正常的文档流，不再占据空间。
其位置相对于最近的非 static 定位的祖先元素进行定位。如果没有这样的祖先，则相对于 <html> 元素。
可以通过 top, right, bottom, left 来设置位置。

$d.$ `fixed`

元素脱离正常的文档流。
其位置相对于浏览器视口 (viewport) 进行定位，滚动页面时位置保持不变。
常用于创建固定的导航栏或页脚。

$e.$ `sticky`

元素的行为像 relative 和 fixed 的混合体。
在正常文档流中，直到滚动到某个阈值（由 top, right 等定义）时，它会“粘住”并表现得像 fixed 一样。
常用于创建滚动时固定的侧边栏或标题。

$f.$ `z-index`

当元素重叠时，z-index 决定了它们的堆叠顺序。值越大的元素越靠上。
只对非 static 定位的元素有效。

7. CSS 单位

CSS 有下面两种单位：

绝对单位:
- px: 像素，最常用的绝对单位。
相对单位:
- %: 相对于父元素的百分比。
- em: 相对于当前元素的 font-size。如果用于 font-size 自身，则相对于父元素的 font-size。
- rem (Root EM): 相对于根元素 (<html>) 的 font-size。在创建可缩放的布局时非常有用。
- vw (Viewport Width): 相对于视口宽度的 1%。100vw 等于视口的总宽度。
- vh (Viewport Height): 相对于视口高度的 1%。100vh 等于视口的总高度。

10. 高级技巧与概念

$a.$ CSS 变量

CSS 变量允许你定义可重用的值，通常在 :root 伪类中定义，以便全局可用。

:root {
  --main-color: #3498db;
  --default-padding: 15px;
}

.panel {
  background-color: var(--main-color);
  padding: var(--default-padding);
}

$b.$ 过渡

过渡 (Transitions) 可以在属性值发生变化时，提供平滑的动画效果。

.button {
  background-color: blue;
  transition: background-color 0.3s ease-in-out;
}

.button:hover {
  background-color: red;
}

$c.$ 变换

变换 (Transforms) 允许我们对元素进行移动、旋转、缩放和倾斜，而不影响周围的元素。

transform: translate(x, y);: 移动元素。
transform: rotate(angle);: 旋转元素 (如 45deg)。
transform: scale(x, y);: 缩放元素。
transform: skew(x-angle, y-angle);: 倾斜元素。

$d.$ 媒体查询

媒体查询 (Media Queries) 实现响应式设计的关键。允许你根据设备的特性（如视口宽度、高度、方向等）应用不同的样式。

/* 当视口宽度小于等于 600px 时应用这些样式 */
@media (max-width: 600px) {
  .sidebar {
    display: none; /* 在小屏幕上隐藏侧边栏 */
  }

  .content {
    width: 100%;
  }
}

CSS 学习笔记

1. CSS 基础

a.a.a. 概述

b.b.b. 选择器

c.c.c. 常用属性

d.d.d. 添加 CSS 到 HTML

2. 层叠、特殊性与继承

a.a.a. 特殊性/优先级 (Specificity)

b.b.b. 继承 (Inheritance)

c.c.c. 规则顺序 (Rule Order)

3. 盒子模型 (Box Model)

a.a.a. 盒子模型的组成

b.b.b. box-sizing 属性

5. display 属性：块级、内联与其它

a.a.a. block 元素

b.b.b. inline 元素

c.c.c. inline-block 元素

d.d.d. none

e.e.e. div 与 span 的使用