CSS

1 CSS基础

1.1 基本语法

属性样式

1内嵌
2内联
3外联

1.2 选择器

1.2.1 基本选择器

通用 * 全选
类型 p 基本类型
id #? ？表示id值
类 .? class
伪类 p:hover 下面细讲
属性 [?] 选择所有含？属性的元素

1.2.2 常用伪类

链接伪类
:link：未访问的链接
:visited：已访问的链接
:hover：鼠标悬停状态
:active：元素被激活（如鼠标点击未释放）
结构伪类
:first-child：父元素的第一个子元素
:last-child：父元素的最后一个子元素
:nth-child(n)：父元素的第 n 个子元素，n 可为数字、even（偶数）、odd（奇数）或公式
:nth-last-child(n)：从父元素末尾开始计数的第 n 个子元素
:first-of-type：父元素中指定类型的第一个元素
:last-of-type：父元素中指定类型的最后一个元素
:nth-of-type(n)：父元素中指定类型的第 n 个元素
:nth-last-of-type(n)：从父元素末尾开始计数，指定类型的第 n 个元素
:only-child：父元素中唯一的子元素
:only-of-type：父元素中唯一的指定类型的元素
表单伪类
:enabled：可用的表单元素
:disabled：禁用的表单元素
:checked：选中的单选框或复选框
:required：有 required 属性的表单元素
:optional：没有 required 属性的表单元素
:valid：满足验证规则的表单元素
:invalid：不满足验证规则的表单元素
目标伪类
:target：当前活动的目标元素（如通过 URL 锚点定位）
否定伪类
:not(selector)：不匹配指定选择器的元素
状态伪类
:focus：获得焦点的元素
:empty：没有子元素（包括文本节点）的元素

1.2.3 基本选择器的组合

直接连接：p.red —— 具有 red 样式类的

元素
逗号连接：h1, p —— 所有

和

元素
空格连接：div span ——

元素内的所有 后代元素

连接：div > span ——

元素的直接子 元素

• 连接：p + span ——

  元素后的紧邻 元素
  ~ 连接：p ~ span ——

  元素后的所有同级 元素

1.3 样式声明优先级

1. 优先级规则概述
   样式应用按优先级，高优先级覆盖低优先级。
2. 优先级从高到低排序
   内联样式：直接写在 HTML 元素的 style 属性中，如

   ，优先级最高。
   ID 选择器：如 #myId，优先级次之。
   类、属性和伪类选择器：如 .myClass、[type="text"]、:hover。
   元素和伪元素选择器：如 p、::first-line。
   通用选择器：*，优先级最低。

3. 优先级计算
   可通过统计不同类型选择器数量来计算优先级，用四组数字表示（内联样式数量，ID 选择器数量，类 / 属性 / 伪类选择器数量，元素 / 伪元素选择器数量），如 0,1,0,0 比 0,0,1,0 优先级高。
4. !important 规则
   在样式声明后添加 !important，如 color: red !important;，会使该声明优先级最高，打破常规优先级规则，但应谨慎使用。
5. 继承样式
   继承的样式优先级最低，会被任何直接应用的样式覆盖。

1.4 常用 CSS 属性

颜色

命名颜色：如 red、blue、green 等。
十六进制：#RRGGBB 或 #RGB 形式，如 #FF0000 表示红色。
RGB：rgb(255, 0, 0) 表示红色。
RGBA：rgba(255, 0, 0, 0.5)，多了透明度参数。
HSL：hsl(0, 100%, 50%) 表示红色。
HSLA：hsla(0, 100%, 50%, 0.5)，含透明度。

方位表达

top：设置元素顶部的位置或外边距等。
right：设置元素右侧的位置或外边距等。
bottom：设置元素底部的位置或外边距等。
left：设置元素左侧的位置或外边距等。

长度单位

px：像素，固定大小。
em：相对单位，相对于父元素的字体大小。
rem：相对于根元素（）的字体大小。
%：相对于父元素的尺寸。
vw：视口宽度的百分比。
vh：视口高度的百分比。

盒子模型

width：元素内容宽度。
height：元素内容高度。
padding：内边距，如 padding: 10px。
border：边框，如 border: 1px solid black。
margin：外边距，如 margin: 10px。

元素背景

background - color：背景颜色。
background - image：背景图像，如 background - image: url('image.jpg')。
background - repeat：背景图像重复方式，如 no - repeat。
background - size：背景图像大小，如 cover。
background - position：背景图像位置，如 center。

文字样式

font - size：字体大小。
font - family：字体族，如 Arial, sans - serif。
font - weight：字体粗细，如 bold。
font - style：字体样式，如 italic。
text - align：文本对齐方式，如 center。
text - decoration：文本装饰，如 underline。
line - height：行高。

元素的显示模式

block：块级元素，独占一行，可设置宽高，默认宽度是父元素宽度。如

、

等。
inline：行内元素，不会换行，宽高由内容决定，不能设置宽高（部分可设置内边距和边框）。如 、 等。
inline-block：行内块元素，既不独占一行，又能设置宽高。如 等。
none：元素不显示，且不占据页面空间。

弹性框布局

display: flex：将元素设置为弹性容器。
flex-direction：定义主轴方向，值有 row（默认，水平从左到右）、row-reverse、column、column-reverse。
justify-content：主轴上的对齐方式，如 center（居中）、space-between（两端对齐）。
align-items：交叉轴上的对齐方式，如 center、flex-start。
flex-wrap：是否换行，值有 nowrap（默认，不换行）、wrap。

网格布局

display: grid：将元素设置为网格容器。
grid-template-columns：定义列的数量和宽度，如 1fr 1fr 表示两列等宽。
grid-template-rows：定义行的数量和高度。
grid-gap：网格项之间的间距。
place-items：同时设置项目在单元格内的水平和垂直对齐方式。

元素定位

position: static：默认值，元素按照正常文档流布局。
position: relative：相对定位，相对于元素正常位置进行偏移，仍占据原空间。
position: absolute：绝对定位，相对于最近的已定位祖先元素，若没有则相对于初始包含块。
position: fixed：固定定位，相对于浏览器窗口，滚动时位置不变。
position: sticky：粘性定位，在屏幕范围内时按正常文档流，滚动到屏幕范围外时固定。
top、right、bottom、left：定位元素的偏移量。

元素浮动

float: left：元素向左浮动。
float: right：元素向右浮动。
clear：清除浮动影响，值有 left、right、both。

元素的叠放层次

z-index：设置元素的堆叠顺序，值为整数，数值越大越靠上。

其他属性

opacity：元素透明度，值从 0（完全透明）到 1（完全不透明）。
visibility：元素可见性，visible 可见，hidden 隐藏但仍占空间。
cursor：鼠标指针样式，如 pointer（手型）、default（默认箭头）。
overflow：处理内容溢出情况，值有 visible（默认，溢出显示）、hidden（溢出隐藏）、scroll（显示滚动条）。