【技术专题】CSS3 网页技术 - CSS3 简介 & CSS 语法：选择器、属性、值、声明块

大家好，我是Java1234_小锋老师，最近更新《一天学会 CSS3 视频教程(无废话版) 》专辑，感谢大家支持。

本课程主要介绍和讲解 CSS3简介，CSS3 入门，CSS3 选择器与优先级，CSS3 单位、颜色、字体与文本，CSS3 盒模型与基础样式，CSS3 布局基础，CSS3 布局进阶，CSS3 视觉增强，CSS3 变换与动画，CSS3 函数与变量，CSS3 响应式与移动端适配，CSS3 工程化与最佳实践。

视频教程+课件+源码打包下载：

链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234

提取码：1234

CSS3（在第二阶段目录里）

CSS3 简介

CSS3 是 W3C 制定的 Cascading Style Sheets Level 3 ，即"层叠样式表第 3 版"的统称。它用于控制网页的外观、布局和部分交互效果。和 CSS2.1 不同，CSS3 不是单一规范，而是一组模块化规范：选择器、背景边框、颜色、字体、动画、媒体查询、布局等模块各自独立发展，浏览器可以按模块逐步支持。

CSS3 向下兼容 CSS2.1，并常与 HTML5 一起被称作"HTML5 + CSS3"，但两者是独立标准：HTML5 负责结构，CSS3 负责表现。

核心特点

模块化
CSS3 被拆分为多个模块，如 Selectors、Backgrounds and Borders、Transitions、Animations、Transforms、Media Queries、Multi-column、Fonts、Flexible Box、Grid 等。
表现力增强
- 圆角：border-radius
- 阴影：box-shadow、text-shadow
- 渐变：linear-gradient、radial-gradient
- 透明度与颜色：rgba()、hsla()、opacity
- 多背景、边框图片、Web 字体等
动画与变换
- 过渡：transition
- 关键帧动画：@keyframes、animation
- 2D/3D 变换：transform，如 translate、scale、rotate、perspective
响应式设计
通过 @media 媒体查询，根据屏幕宽度、设备方向等条件应用不同样式，实现 PC、平板、手机适配。
现代布局
- Flexbox：一维布局，适合行或列排列。
- Grid：二维布局，适合复杂网格页面。
- 多列布局：column-count、column-gap 等。
选择器增强
支持属性选择器、结构伪类如 :nth-child()、:first-of-type、否定伪类 :not() 等，减少类名依赖。

HelloWorld简单实例

下面是一个完整可运行的 CSS3 简单示例：一个渐变圆角盒子，鼠标悬停会放大。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS3 简单实例</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background: linear-gradient(45deg, #4facfe, #00f2fe); /* CSS3 渐变 */
      border-radius: 16px;                                  /* CSS3 圆角 */
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);           /* CSS3 阴影 */
      color: white;
      font-size: 22px;
      text-align: center;
      line-height: 100px;
      font-family: Arial, sans-serif;
      transition: transform 0.3s ease;                      /* CSS3 过渡 */
    }

    .box:hover {
      transform: scale(1.1);                                /* CSS3 变形 */
    }
  </style>
</head>
<body>
  <div class="box">Python222</div>
</body>
</html>

说明：

linear-gradient：背景渐变
border-radius：圆角
box-shadow：阴影
transition / transform：鼠标悬停时的放大动画

保存为 .html 文件后用浏览器打开即可看到效果。

第一部分：.box 规则

css 复制代码

.box {

.box ：类选择器，匹配 HTML 中 class="box" 的元素。
复制代码
```
width: 200px;
```
width ：设置元素宽度为 200px（像素）。
复制代码
```
height: 100px;
```

height ：设置元素高度为 100px。

复制代码

background: linear-gradient(45deg, #4facfe, #00f2fe);

background ：设置背景。这里使用 CSS3 的 linear-gradient() 函数创建线性渐变。
- 45deg：渐变方向为 45 度（从右下到左上）。
- #4facfe：起始颜色（一种亮蓝色）。
- #00f2fe：结束颜色（一种青色）。
- 整体效果：从亮蓝到青色的斜向渐变背景。
  
  border-radius: 16px;
border-radius ：设置圆角半径。16px 表示四个角都是 16 像素的圆角。
复制代码
```
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
```
box-shadow ：给盒子添加阴影。参数依次为：
- 0：水平偏移量（不左右偏移）。
- 6px：垂直偏移量（向下偏移 6 像素）。
- 15px：模糊半径（阴影边缘模糊 15 像素）。
- rgba(0, 0, 0, 0.3)：阴影颜色，黑色，透明度 30%。
  
  color: white;
color：设置文字颜色为白色。
复制代码
```
font-size: 22px;
```
font-size：设置文字大小为 22 像素。
复制代码
```
text-align: center;
```
text-align：设置文本水平居中对齐。
复制代码
```
line-height: 100px;
```
line-height：设置行高为 100 像素。因为盒子高度也是 100px，所以单行文字会垂直居中。
复制代码
```
font-family: Arial, sans-serif;
```
font-family ：设置字体。优先使用 Arial，如果系统没有则使用 sans-serif（无衬线字体）。
复制代码
```
transition: transform 0.3s ease;
```
transition ：定义过渡动画，用于属性变化时平滑过渡。这里：
- transform：指定要过渡的属性是 transform。
- 0.3s：过渡持续 0.3 秒。
- ease：缓动函数，表示先快后慢的平滑效果。
- 整体含义：当 transform 发生变化时，用 0.3 秒平滑过渡。
  
  }
结束 .box 规则。

第二部分：.box:hover 规则

复制代码

.box:hover {

.box:hover ：伪类选择器，匹配鼠标悬停在 .box 元素上的状态。
复制代码
```
transform: scale(1.1);
```
transform ：变形属性。scale(1.1) 表示将元素在 X 轴和 Y 轴上都放大到原来的 1.1 倍（即放大 10%）。
因为 .box 中定义了 transition: transform 0.3s ease;，所以这个放大过程会平滑过渡，而不是瞬间跳变。ss

}
结束 .box:hover 规则。

CSS 语法：选择器、属性、值、声明块

CSS 规则的基本结构是：

html 复制代码

选择器 {
  属性: 值;
  属性: 值;
}

例如：

html 复制代码

h1 {
  color: red;
  font-size: 24px;
}

1. 选择器

选择器用于指定"样式作用在哪些元素上"。

常见类型：

元素选择器：p、div、h1
类选择器：.card、.btn-primary
ID 选择器：#header
通配选择器：*
属性选择器：[disabled]、[type="text"]
伪类：:hover、:focus、:nth-child(2n)
伪元素：::before、::after、::first-line
组合选择器：
- 后代：div p
- 子代：div > p
- 相邻兄弟：h1 + p
- 通用兄弟：h1 ~ p
分组选择器：h1, h2, h3

举例：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS 选择器示例</title>
  <style>
    /* ========== 基础布局 ========== */
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      line-height: 1.6;
    }

    .container {
      max-width: 700px;
      margin: 0 auto;
    }

    /* ========== 通配选择器 ========== */
    * {
      font-size:18px;
    }

    /* ========== 分组选择器 ========== */
    h1, h2, h3 {
      color: #222;
    }

    /* ========== ID 选择器 ========== */
    #header {
      background: #eef;
      padding: 16px;
    }

    /* ========== 类选择器 ========== */
    .card {
      border: 1px solid #ccc;
      padding: 12px;
      margin: 12px 0;
      position: relative;
    }

    .btn-primary {
      background: #0d6efd;
      color: #fff;
      border: none;
      padding: 8px 12px;
      cursor: pointer;
    }

    /* ========== 属性选择器 ========== */
    [disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }

    [type="text"] {
      border: 2px solid #0d6efd;
      padding: 6px;
    }

    /* ========== 伪类 ========== */
    a:hover {
      color: red;
    }

    input:focus {
      outline: 3px solid orange;
    }

    li:nth-child(2n) {
      background: #f0f0f0;
    }

    /* ========== 组合选择器 ========== */

    /* 后代选择器：div 内所有 p */
    div p {
      color: #555;
    }

    /* 子代选择器：div 的直接子元素 p */
    div > p {
      border-left: 4px solid #0d6efd;
      padding-left: 8px;
    }

    /* 相邻兄弟选择器：h1 后面紧挨着的 p */
    h1 + p {
      color: green;
    }

    /* 通用兄弟选择器：h1 后面所有同级 p */
    h1 ~ p {
      text-decoration: underline;
    }

    /* ========== 伪元素 ========== */
    .card::before {
      content: "★ ";
      color: gold;
    }

    .card::after {
      content: "（结束）";
      color: #999;
      font-size: 12px;
    }

    p::first-line {
      font-weight: bold;
      color: #0d6efd;
    }
  </style>
</head>
<body>
  <div class="container">

    <!-- ID 选择器：#header -->
    <header id="header">
      <h1>CSS 选择器示例</h1>

      <!-- h1 + p：相邻兄弟；h1 ~ p：通用兄弟 -->
      <p>这是 h1 后面紧邻的 p，会被 h1 + p 选中。</p>
      <p>这是 h1 后面的另一个 p，会被 h1 ~ p 选中。</p>
    </header>

    <!-- 类选择器：.card；伪元素：::before / ::after -->
    <section class="card">
      <h2>类选择器与伪元素</h2>

      <!-- 后代选择器：div p；子代选择器：div > p -->
      <div>
        <p>我是 div 的直接子元素 p，会被 div &gt; p 选中，有左边框。</p>

        <section>
          <p>我是 div 内嵌套的 p，只会被 div p 后代选择器选中，没有左边框。</p>
        </section>
      </div>
    </section>

    <section class="card">
      <h2>属性选择器与伪类</h2>

      <!-- 属性选择器：[type="text"]、[disabled] -->
      <p>
        <input type="text" placeholder="type=text，有蓝色边框">
        <input type="text" disabled placeholder="disabled 属性">
      </p>

      <!-- 伪类：:hover -->
      <p>
        <a href="#">鼠标悬停我（:hover）</a>
      </p>

      <!-- 伪类：:nth-child(2n) -->
      <ul>
        <li>列表项 1</li>
        <li>列表项 2（nth-child(2n)）</li>
        <li>列表项 3</li>
        <li>列表项 4（nth-child(2n)）</li>
      </ul>

      <!-- 类选择器：.btn-primary -->
      <button class="btn-primary">按钮 .btn-primary</button>
    </section>

  </div>
</body>
</html>

2. 属性

属性表示"要修改哪个样式特征"，例如：

复制代码

color
font-size
display
margin
background-color

CSS 属性名通常不区分大小写，但规范写法是小写，并用连字符分隔，如 font-size。

3. 值

值表示"把该属性设置成什么"。不同属性接受不同类型的值：

复制代码

color: red;
color: #ff0000;
font-size: 16px;
width: 50%;
display: flex;
margin: 10px 20px;
background: url("bg.png");
width: calc(100% - 20px);

常见值类型包括：

关键字：auto、none、block、flex
颜色：red、#f00、rgb()、hsl()
长度：px、em、rem、vw、vh
百分比：50%
函数：calc()、var()、url()、linear-gradient()

4. 声明块

声明块由一对花括号 {} 包裹，里面包含一条或多条声明：

复制代码

.box {
  color: #333;
  padding: 16px;
  background: #fff;
}

其中：

复制代码

color: #333;

称为一条声明。声明由"属性 + 冒号 + 值 + 分号"组成。最后一条声明的分号可以省略，但建议保留，便于后续维护。

【技术专题】CSS3 网页技术 - CSS3 简介 & CSS 语法：选择器、属性、值、声明块

视频教程+课件+源码 打包下载 ：

CSS3 简介

核心特点

HelloWorld简单实例

CSS 语法：选择器、属性、值、声明块

1. 选择器

2. 属性

3. 值

4. 声明块

视频教程+课件+源码打包下载：