CSS基础知识汇总

news2024/11/19 7:35:46

CSS 基础知识

1. CSS 的基本结构

CSS 规则由选择器和声明块组成，基本结构如下：

selector {
  property: value;
  /* more properties and values */
}

选择器（selector）：指定要应用样式的 HTML 元素。
声明块（declaration block）：包含一个或多个声明，每个声明由属性和值组成。

2. 选择器

基础选择器：
- 元素选择器：选择所有指定的 HTML 元素。例如，p { color: red; } 选择所有 <p> 元素。
- 类选择器：选择所有指定类名的元素，使用 . 表示。例如，.className { color: blue; } 选择所有类名为 className 的元素。
- ID 选择器：选择具有指定 ID 的元素，使用 # 表示。例如，#idName { color: green; } 选择 ID 为 idName 的元素。
组合选择器：
- 后代选择器：选择某个元素内的所有指定元素，使用空格分隔。例如，div p { color: yellow; } 选择所有在 <div> 内的 <p> 元素。
- 子选择器：选择某个元素的直接子元素，使用 > 分隔。例如，ul > li { color: purple; } 选择所有 <ul> 的直接子元素 <li>。
- 相邻兄弟选择器：选择紧接在某元素后的指定元素，使用 + 分隔。例如，h1 + p { color: orange; } 选择紧接在 <h1> 后的第一个 <p> 元素。
- 通用兄弟选择器：选择某元素后面的所有指定元素，使用 ~ 分隔。例如，h1 ~ p { color: pink; } 选择 <h1> 后的所有 <p> 元素。
伪类和伪元素选择器：
- 伪类选择器：选择特定状态的元素。例如，:hover 选择鼠标悬停状态的元素，:first-child 选择父元素的第一个子元素。
- 伪元素选择器：选择元素的特定部分。例如，::before 和 ::after 用于在元素内容的前后插入内容。

3. 常用 CSS 属性

文本样式：
- color：设置文本颜色。
- font-size：设置文本大小。
- font-family：设置字体系列。
- font-weight：设置字体粗细。
- text-align：设置文本对齐方式。
- text-decoration：设置文本装饰（如下划线）。
- line-height：设置行高。
背景样式：
- background-color：设置背景颜色。
- background-image：设置背景图片。
- background-repeat：设置背景图片是否重复。
- background-position：设置背景图片的位置。
- background-size：设置背景图片的大小。
边框和间距：
- border：设置边框，包括宽度、样式和颜色。
- margin：设置元素外边距。
- padding：设置元素内边距。
布局：
- display：设置元素的显示类型（如 block、inline、inline-block、flex）。
- position：设置元素的定位类型（如 static、relative、absolute、fixed）。
- top、right、bottom、left：设置定位元素的偏移。
- z-index：设置元素的堆叠顺序。
尺寸：
- width：设置元素的宽度。
- height：设置元素的高度。
- max-width：设置元素的最大宽度。
- max-height：设置元素的最大高度。
- min-width：设置元素的最小宽度。
- min-height：设置元素的最小高度。
灵活盒子布局（Flexbox）：
- display: flex：将元素变为 flex 容器。
- flex-direction：设置主轴方向（如 row、column）。
- justify-content：设置主轴上的对齐方式（如 flex-start、center、space-between）。
- align-items：设置交叉轴上的对齐方式（如 flex-start、center）。
- flex-wrap：设置是否换行（如 nowrap、wrap）。
网格布局（Grid）：
- display: grid：将元素变为 grid 容器。
- grid-template-columns：定义列结构。
- grid-template-rows：定义行结构。
- grid-gap：设置网格间距。
过渡与动画：
- transition：设置过渡效果。
- animation：定义动画，包括名称、持续时间、计时函数等。

4. CSS 单位

绝对单位：
- px（像素）：常用的单位，适用于大多数情况。
- cm（厘米）、mm（毫米）：适用于打印媒体。
- in（英寸）、pt（磅）、pc（派卡）：适用于打印媒体。
相对单位：
- %（百分比）：相对于父元素的尺寸。
- em：相对于元素的字体大小。
- rem：相对于根元素（<html>）的字体大小。
- vw（视口宽度）、vh（视口高度）：相对于视口的百分比。
- vmin、vmax：相对于视口较小或较大的那一个百分比。