当前位置：首页 > news >正文

原生CSS讲解

news 2025/11/10 9:59:29

原生 CSS（层叠样式表）是用于控制网页外观和布局的核心技术，以下从基础到进阶梳理其核心知识体系：

一、CSS 基础语法

语法结构由「选择器」和「声明块」组成，声明块包含一个或多个 属性: 值; 键值对：
css
```
选择器 {属性1: 值1;属性2: 值2;
}
```
例：
css
```
p {color: red;font-size: 16px;
}
```
引入方式
- 内联样式：直接写在 HTML 标签的 style 属性中（优先级最高，不推荐）：
  html
  预览
```
<p style="color: red;">文本</p>
```
- 内部样式：写在 HTML 的 <style> 标签中（作用于当前页面）：
  html
  预览
```
<style> p { color: red; } </style>
```
- 外部样式：单独的 .css 文件，通过 <link> 引入（推荐，可复用）：
  html
  预览
```
<link rel="stylesheet" href="style.css">
```

二、选择器（核心）

用于定位 HTML 元素，决定样式作用的目标：

基础选择器
- 元素选择器：直接匹配标签名（如 p、div）。
- 类选择器：匹配 class 属性，以 . 开头（如 .active）。
- ID 选择器：匹配 id 属性，以 # 开头（如 #header，唯一）。
- 通配符：* 匹配所有元素（慎用，性能差）。
组合选择器
- 后代选择器：A B 匹配 A 内部的所有 B（无论嵌套层级）。
- 子选择器：A > B 仅匹配 A 的直接子元素 B。
- 相邻兄弟选择器：A + B 匹配 A 后面紧邻的第一个 B。
- 通用兄弟选择器：A ~ B 匹配 A 后面所有同级的 B。
属性选择器
- [attr]：匹配有 attr 属性的元素（如 [disabled]）。
- [attr=value]：匹配 attr 属性值为 value 的元素（如 [type="text"]）。
伪类选择器（动态 / 状态选择）
- 状态类：:hover（鼠标悬停）、:active（点击时）、:focus（获焦时）。
- 结构类：:first-child（第一个子元素）、:nth-child(2)（第 2 个子元素）。
- 否定类：:not(.class)（排除特定类的元素）。
伪元素选择器（创建虚拟元素）
- ::before：在元素内容前插入虚拟元素（需配合 content 属性）。
- ::after：在元素内容后插入虚拟元素。
- ::first-letter：匹配文本的第一个字符。

三、优先级与层叠

当多个样式作用于同一元素时，优先级决定最终生效的样式：

优先级规则（从高到低）：
- 内联样式（style 属性）。
- ID 选择器（#id）。
- 类 / 属性 / 伪类选择器（.class、[attr]、:hover）。
- 元素 / 伪元素选择器（div、::before）。
- 通配符（*）和继承样式。
权重计算：用四元组 (a, b, c, d) 表示，a 最高：
- a：内联样式（1 或 0）。
- b：ID 选择器数量。
- c：类 / 属性 / 伪类选择器数量。
- d：元素 / 伪元素选择器数量。例：#header .nav li 权重为 (0, 1, 1, 1)。
!important：强制提升样式优先级（如 color: red !important;），谨慎使用（破坏自然优先级）。

四、盒子模型（Box Model）

所有 HTML 元素都被视为盒子，由四部分组成（从内到外）：

内容区（content）：显示文本和图像，大小由 width、height 控制。
内边距（padding）：内容区与边框的距离（padding-top、padding: 10px 20px）。
边框（border）：包裹内边距和内容区（border: 1px solid #000）。
外边距（margin）：盒子与其他元素的距离（margin-bottom、margin: 0 auto 水平居中）。

盒模型模式：
- box-sizing: content-box（默认）：width/height 仅包含内容区。
- box-sizing: border-box（推荐）：width/height 包含内容区 + 内边距 + 边框（避免计算麻烦）。

五、布局技术

1. 普通流（Normal Flow）

元素默认的布局方式：块级元素（div、p）垂直排列，行内元素（span、a）水平排列。

2. 浮动（Float）

让元素脱离普通流，向左 / 右移动，直到碰到父元素边缘或其他浮动元素：

css

.float-left { float: left; }
.float-right { float: right; }

注意：浮动会导致父元素高度坍塌，需清除浮动（如父元素加 overflow: hidden 或使用 ::after 伪元素）。

3. 定位（Position）

控制元素在页面中的精确位置：

static（默认）：遵循普通流，不接受 top/left 等属性。
relative：相对自身原有位置偏移，不脱离普通流（占位）。
absolute：相对最近的非 static 定位祖先元素偏移，脱离普通流（不占位）。
fixed：相对浏览器窗口定位，固定在屏幕某个位置（如导航栏）。
sticky：滚动时在指定位置（top: 0）固定，兼具 relative 和 fixed 特性。

4. Flex 布局（弹性布局）

一维布局模型，通过「容器」和「项目」的属性控制排列：

容器属性：
- display: flex：启用 Flex 布局。
- flex-direction：主轴方向（row 水平 /column 垂直）。
- justify-content：主轴对齐方式（center 居中 /space-between 两端对齐）。
- align-items：交叉轴对齐方式（center 居中 /flex-start 顶部对齐）。
- flex-wrap：项目是否换行（wrap 换行 /nowrap 不换行）。
项目属性：
- flex: 1：项目占剩余空间的比例（自适应拉伸）。
- order：控制项目排列顺序（数值越小越靠前）。
- align-self：单独设置项目的交叉轴对齐方式。

5. Grid 布局（网格布局）

二维布局模型，适合复杂的多行多列布局：

容器属性：
- display: grid：启用 Grid 布局。
- grid-template-columns：定义列数和宽度（repeat(3, 1fr) 3 列等宽）。
- grid-template-rows：定义行数和高度（100px 200px 2 行，高度分别为 100px 和 200px）。
- gap：列 / 行之间的间距（gap: 10px 行列间距均为 10px）。
- justify-items/align-items：网格项在单元格内的对齐方式。
项目属性：
- grid-column: 1 / 3：项目跨第 1 到第 3 列（占 2 列）。
- grid-row: 2 / 4：项目跨第 2 到第 4 行（占 2 行）。

六、文本与字体

文本样式
- color：文字颜色（#ff0000、rgb(255,0,0)、red）。
- font-size：字体大小（16px、1rem、1.2em）。
- font-weight：字重（normal、bold、600）。
- text-align：水平对齐（left、center、right）。
- line-height：行高（1.5 倍文字大小，垂直居中常用）。
- text-decoration：文本装饰（none 去除下划线、underline 下划线）。
字体设置
- font-family：字体族（"Microsoft YaHei", sans-serif，优先使用前者，无则用系统默认 sans-serif）。
- @font-face：引入自定义字体：
  css
```
@font-face {font-family: "MyFont";src: url("myfont.woff2") format("woff2");
}
```

七、背景与边框

背景
- background-color：背景色（#f0f0f0）。
- background-image：背景图（url("bg.jpg")）。
- background-repeat：背景图是否重复（no-repeat 不重复）。
- background-position：背景图位置（center 居中）。
- background-size：背景图大小（cover 覆盖容器 /contain 完整显示）。
- 简写：background: #f0f0f0 url("bg.jpg") no-repeat center/cover。
边框
- border: width style color（border: 1px solid #ccc）。
- border-radius：圆角（50% 圆形，8px 圆角矩形）。
- box-shadow：阴影（0 2px 4px rgba(0,0,0,0.1) 水平偏移 0、垂直偏移 2px、模糊 4px、半透明黑）。

八、响应式设计

使网页在不同设备（手机、平板、电脑）上自适应显示：

媒体查询（@media）根据屏幕尺寸应用不同样式：
css
```
/* 屏幕宽度 ≤ 768px 时生效 */
@media (max-width: 768px) {.container {width: 100%;}
}
```
常见断点：
- 手机：max-width: 767px
- 平板：min-width: 768px and max-width: 1023px
- 桌面：min-width: 1024px
相对单位
- rem：相对于根元素（html）的 font-size（默认 1rem = 16px）。
- em：相对于父元素的 font-size。
- vw/vh：相对于视口宽度 / 高度的 1%（50vw 即视口宽度的一半）。

弹性图片

css

img {max-width: 100%; /* 图片不超过容器宽度 */height: auto; /* 保持宽高比 */
}

九、动画与过渡

过渡（Transition）使样式变化更平滑（如 hover 效果）：

css

.btn {transition: background-color 0.3s, transform 0.3s; /* 监听属性及持续时间 */
}
.btn:hover {background-color: blue;transform: scale(1.1); /* 放大1.1倍 */
}

动画（Animation）更复杂的自定义动画，需定义关键帧：

css

/* 定义关键帧 */
@keyframes rotate {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}
/* 应用动画 */
.box {animation: rotate 2s linear infinite; /* 动画名、持续时间、匀速、无限循环 */
}

变换（Transform）改变元素的形状、位置或角度：
- translate(Xpx, Ypx)：平移
- scale(1.2)：缩放
- rotate(45deg)：旋转
- skew(10deg)：倾斜

十、CSS 变量（自定义属性）

复用样式值，方便维护：

css

/* 定义变量（通常在 :root 伪类，全局可用） */
:root {--primary-color: #3B82F6;--font-size: 16px;
}
/* 使用变量 */
body {color: var(--primary-color);font-size: var(--font-size);
}