跳至主要內容

CSS入门教程 - 从零开始学习CSS样式表

Java突击队大约 19 分钟

CSS入门教程 - 从零开始学习CSS样式表

目录

  1. CSS简介
  2. 环境搭建
  3. CSS基础语法
  4. CSS选择器
  5. CSS样式属性
  6. CSS盒模型
  7. CSS布局
  8. CSS定位
  9. CSS动画和过渡
  10. 响应式设计
  11. CSS预处理器
  12. 实际项目案例
  13. 最佳实践与总结

点击这里👇🏻获取：100万QPS短链系统、复杂的商城微服务系统、智能翻译助手AI Agent、SaaS点餐系统、刷题吧小程序、商城系统、秒杀系统、AI项目、代码生成神器、苏三demo项目等 8 个项目的：项目源代码、开发教程和技术答疑

1. CSS简介

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML文档样式的样式表语言。CSS定义了网页的外观和布局，包括颜色、字体、间距、布局等视觉效果。

  • 美化网页：控制网页的颜色、字体、大小等视觉效果

  • 布局控制：实现各种页面布局，如两栏、三栏布局

  • 响应式设计：使网页在不同设备上都能良好显示

  • 提高效率：通过样式表统一管理样式，提高开发效率

  • CSS1（1996年）：基础样式功能

  • CSS2（1998年）：定位、媒体类型等

  • CSS3（2011年）：模块化，新增动画、渐变、弹性布局等

  • CSS4（持续更新）：更多新特性和改进

  • HTML：负责网页的结构和内容

  • CSS：负责网页的样式和外观

  • JavaScript：负责网页的交互行为

三者配合使用，共同构建现代化的网页。

2. 环境搭建

代码编辑器

推荐使用以下编辑器之一：

  • Visual Studio Code（推荐）：免费，功能强大，插件丰富
  • Sublime Text：轻量级，速度快
  • Atom：开源，可定制性强
  • WebStorm：JetBrains出品，功能全面（付费）

浏览器

  • Chrome：推荐，开发者工具强大
  • Firefox：开发者工具也很好
  • Edge：Windows系统自带
  • Safari：Mac系统自带

步骤1：创建HTML文件

创建index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS入门教程</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>欢迎学习CSS</h1>
    <p>这是我的第一个CSS样式页面</p>
</body>
</html>

步骤2：创建CSS文件

创建style.css：

/* 这是CSS注释 */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    font-size: 16px;
}

步骤3：在浏览器中打开

双击index.html文件，在浏览器中查看效果。

打开开发者工具

  • Chrome/Edge：按F12或Ctrl+Shift+I（Mac: Cmd+Option+I）
  • Firefox：按F12或Ctrl+Shift+I
  • Safari：需要先启用开发者菜单

使用开发者工具

  1. 检查元素：右键点击页面元素，选择"检查"
  2. 查看样式：在右侧面板查看应用的CSS样式
  3. 修改样式：可以直接修改样式，实时查看效果
  4. 调试布局：查看盒模型、定位等信息

3. CSS基础语法

CSS规则由选择器和声明块组成：

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

示例：

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}
/* 这是单行注释 */

/* 
   这是
   多行
   注释
*/

方式1：内联样式

直接在HTML元素上使用style属性：

<p style="color: red; font-size: 18px;">这是内联样式</p>

优点：优先级高，直接作用于元素
缺点：不利于维护，代码冗余

方式2：内部样式表

在HTML的<head>标签内使用<style>标签：

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

优点：适合单页面使用
缺点：多页面需要重复代码

方式3：外部样式表（推荐）

使用<link>标签引入外部CSS文件：

<head>
    <link rel="stylesheet" href="style.css">
</head>

优点：

  • 代码复用，多个页面可以共享
  • 便于维护和修改
  • 浏览器可以缓存CSS文件，提高性能

推荐使用外部样式表！

当多个样式规则作用于同一个元素时，优先级规则：

  1. 内联样式：优先级最高（1000）
  2. ID选择器：优先级100
  3. 类选择器、属性选择器、伪类：优先级10
  4. 元素选择器、伪元素：优先级1
  5. 通配符选择器：优先级0

示例：

/* 优先级：1 */
p { color: black; }

/* 优先级：10 */
.text { color: blue; }

/* 优先级：100 */
#title { color: red; }

/* 内联样式优先级最高 */
/* <p id="title" class="text" style="color: green;">文本</p> */
/* 最终颜色：green */

!important规则：

p {
    color: red !important; /* 最高优先级 */
}

注意：尽量避免使用!important，会破坏CSS的层叠性。

4. CSS选择器

元素选择器

选择所有指定元素：

p {
    color: blue;
}

h1 {
    font-size: 24px;
}

ID选择器

选择具有指定ID的元素（ID在页面中应该唯一）：

#header {
    background-color: #333;
}

#footer {
    background-color: #666;
}
<div id="header">头部</div>
<div id="footer">底部</div>

类选择器

选择具有指定类的元素（类可以重复使用）：

.text-center {
    text-align: center;
}

.text-red {
    color: red;
}
<p class="text-center text-red">居中的红色文本</p>

通配符选择器

选择所有元素：

* {
    margin: 0;
    padding: 0;
}

后代选择器

选择指定元素的后代元素：

div p {
    color: blue;
}
<div>
    <p>这个p会被选中</p>
    <span>
        <p>这个p也会被选中</p>
    </span>
</div>

子元素选择器

选择指定元素的直接子元素：

div > p {
    color: blue;
}
<div>
    <p>这个p会被选中（直接子元素）</p>
    <span>
        <p>这个p不会被选中（不是直接子元素）</p>
    </span>
</div>

相邻兄弟选择器

选择紧接在指定元素后的兄弟元素：

h1 + p {
    color: blue;
}
<h1>标题</h1>
<p>这个p会被选中</p>
<p>这个p不会被选中</p>

通用兄弟选择器

选择指定元素后的所有兄弟元素：

h1 ~ p {
    color: blue;
}
<h1>标题</h1>
<p>这个p会被选中</p>
<p>这个p也会被选中</p>
/* 选择具有指定属性的元素 */
[href] {
    color: blue;
}

/* 选择属性值等于指定值的元素 */
[type="text"] {
    border: 1px solid #ccc;
}

/* 选择属性值包含指定值的元素 */
[class*="btn"] {
    padding: 10px;
}

/* 选择属性值以指定值开头的元素 */
[href^="https"] {
    color: green;
}

/* 选择属性值以指定值结尾的元素 */
[src$=".jpg"] {
    border: 2px solid #ccc;
}

链接伪类

a:link {
    color: blue; /* 未访问的链接 */
}

a:visited {
    color: purple; /* 已访问的链接 */
}

a:hover {
    color: red; /* 鼠标悬停 */
}

a:active {
    color: green; /* 激活状态（点击时） */
}

结构伪类

/* 第一个子元素 */
p:first-child {
    color: red;
}

/* 最后一个子元素 */
p:last-child {
    color: blue;
}

/* 第n个子元素 */
p:nth-child(2) {
    color: green;
}

/* 奇数子元素 */
p:nth-child(odd) {
    background-color: #f0f0f0;
}

/* 偶数子元素 */
p:nth-child(even) {
    background-color: #fff;
}

/* 第一个指定类型的子元素 */
p:first-of-type {
    font-weight: bold;
}

表单伪类

input:focus {
    border: 2px solid blue;
    outline: none;
}

input:disabled {
    background-color: #ccc;
}

input:checked {
    accent-color: blue;
}
/* 元素的第一行 */
p::first-line {
    font-weight: bold;
}

/* 元素的第一个字母 */
p::first-letter {
    font-size: 2em;
    color: red;
}

/* 元素之前插入内容 */
p::before {
    content: "前缀：";
    color: blue;
}

/* 元素之后插入内容 */
p::after {
    content: "（后缀）";
    color: green;
}

/* 选中文本的样式 */
::selection {
    background-color: yellow;
    color: black;
}

5. CSS样式属性

字体属性

p {
    /* 字体族 */
    font-family: Arial, "Microsoft YaHei", sans-serif;
    
    /* 字体大小 */
    font-size: 16px;
    
    /* 字体粗细 */
    font-weight: normal; /* normal, bold, 100-900 */
    
    /* 字体样式 */
    font-style: normal; /* normal, italic, oblique */
    
    /* 字体简写 */
    font: italic bold 16px/1.5 Arial, sans-serif;
}

文本属性

p {
    /* 文本颜色 */
    color: #333;
    
    /* 文本对齐 */
    text-align: left; /* left, right, center, justify */
    
    /* 文本装饰 */
    text-decoration: none; /* none, underline, overline, line-through */
    
    /* 文本转换 */
    text-transform: uppercase; /* none, uppercase, lowercase, capitalize */
    
    /* 文本缩进 */
    text-indent: 2em;
    
    /* 字母间距 */
    letter-spacing: 2px;
    
    /* 单词间距 */
    word-spacing: 5px;
    
    /* 行高 */
    line-height: 1.5;
    
    /* 文本阴影 */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
div {
    /* 背景颜色 */
    background-color: #f0f0f0;
    
    /* 背景图片 */
    background-image: url('image.jpg');
    
    /* 背景重复 */
    background-repeat: no-repeat; /* repeat, no-repeat, repeat-x, repeat-y */
    
    /* 背景位置 */
    background-position: center center; /* top, center, bottom, left, right */
    
    /* 背景大小 */
    background-size: cover; /* cover, contain, 100% 100%, 200px 300px */
    
    /* 背景固定 */
    background-attachment: fixed; /* scroll, fixed */
    
    /* 背景简写 */
    background: #f0f0f0 url('image.jpg') no-repeat center/cover;
}

渐变背景

/* 线性渐变 */
div {
    background: linear-gradient(to right, #ff0000, #0000ff);
    background: linear-gradient(45deg, #ff0000, #0000ff);
    background: linear-gradient(to right, red, yellow, green);
}

/* 径向渐变 */
div {
    background: radial-gradient(circle, #ff0000, #0000ff);
}
div {
    /* 边框宽度 */
    border-width: 2px;
    
    /* 边框样式 */
    border-style: solid; /* solid, dashed, dotted, double, none */
    
    /* 边框颜色 */
    border-color: #333;
    
    /* 边框简写 */
    border: 2px solid #333;
    
    /* 单独设置各边 */
    border-top: 1px solid red;
    border-right: 2px dashed blue;
    border-bottom: 3px dotted green;
    border-left: 4px double yellow;
    
    /* 圆角 */
    border-radius: 10px;
    border-radius: 10px 20px 30px 40px; /* 四个角 */
    border-radius: 50%; /* 圆形 */
}
ul {
    /* 列表标记类型 */
    list-style-type: disc; /* disc, circle, square, none */
    
    /* 列表标记位置 */
    list-style-position: outside; /* inside, outside */
    
    /* 列表标记图片 */
    list-style-image: url('bullet.png');
    
    /* 列表样式简写 */
    list-style: disc outside none;
}

/* 自定义列表样式 */
ul.custom {
    list-style: none;
    padding: 0;
}

ul.custom li::before {
    content: "✓ ";
    color: green;
    font-weight: bold;
}
table {
    /* 边框合并 */
    border-collapse: collapse;
    
    /* 边框间距 */
    border-spacing: 0;
    
    /* 表格布局 */
    table-layout: fixed; /* auto, fixed */
}

td, th {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

th {
    background-color: #333;
    color: white;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #ddd;
}
div {
    /* 显示类型 */
    display: block; /* block, inline, inline-block, none, flex, grid */
    
    /* 可见性 */
    visibility: visible; /* visible, hidden */
    
    /* 透明度 */
    opacity: 0.5; /* 0.0 - 1.0 */
}

display属性说明：

  • block：块级元素，独占一行
  • inline：行内元素，不独占一行
  • inline-block：行内块元素，可以设置宽高
  • none：不显示，不占空间
  • flex：弹性布局
  • grid：网格布局

6. CSS盒模型

CSS盒模型由以下部分组成：

  • 内容区（Content）：元素的实际内容
  • 内边距（Padding）：内容与边框之间的空间
  • 边框（Border）：围绕内边距的边框
  • 外边距（Margin）：元素与其他元素之间的空间
┌─────────────────────────────┐
│         Margin              │
│  ┌───────────────────────┐  │
│  │       Border         │  │
│  │  ┌─────────────────┐ │  │
│  │  │    Padding      │ │  │
│  │  │  ┌───────────┐  │ │  │
│  │  │  │  Content  │  │ │  │
│  │  │  └───────────┘  │ │  │
│  │  └─────────────────┘ │  │
│  └───────────────────────┘  │
└─────────────────────────────┘
div {
    /* 宽度和高度 */
    width: 300px;
    height: 200px;
    
    /* 内边距 */
    padding: 20px; /* 四个方向 */
    padding: 10px 20px; /* 上下 左右 */
    padding: 10px 20px 30px 40px; /* 上 右 下 左 */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
    
    /* 边框 */
    border: 2px solid #333;
    
    /* 外边距 */
    margin: 20px; /* 四个方向 */
    margin: 10px 20px; /* 上下 左右 */
    margin: 10px 20px 30px 40px; /* 上 右 下 左 */
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
    
    /* 外边距合并 */
    margin: 0 auto; /* 水平居中 */
}
/* 标准盒模型（默认） */
div {
    box-sizing: content-box;
    width: 300px;
    padding: 20px;
    border: 2px solid #333;
    /* 总宽度 = 300 + 20*2 + 2*2 = 344px */
}

/* 边框盒模型（推荐） */
div {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 2px solid #333;
    /* 总宽度 = 300px（包含padding和border） */
}

/* 全局设置 */
* {
    box-sizing: border-box;
}

当两个垂直相邻的元素都有外边距时，会发生外边距塌陷：

/* 父元素和第一个子元素 */
.parent {
    margin-bottom: 20px;
}

.child {
    margin-top: 30px;
}
/* 实际间距是30px（取较大值），不是50px */

解决方案：

.parent {
    padding-top: 1px; /* 或使用border */
}

/* 或使用flex布局 */
.parent {
    display: flex;
    flex-direction: column;
}

7. CSS布局

浮动布局

.left {
    float: left;
    width: 200px;
}

.right {
    float: right;
    width: 200px;
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

定位布局

.container {
    position: relative;
}

.box {
    position: absolute;
    top: 50px;
    left: 100px;
}

Flexbox是CSS3引入的布局方式，非常适合一维布局。

Flex容器属性

.container {
    display: flex;
    
    /* 主轴方向 */
    flex-direction: row; /* row, row-reverse, column, column-reverse */
    
    /* 换行 */
    flex-wrap: nowrap; /* nowrap, wrap, wrap-reverse */
    
    /* 主轴对齐 */
    justify-content: flex-start; /* flex-start, flex-end, center, space-between, space-around, space-evenly */
    
    /* 交叉轴对齐 */
    align-items: flex-start; /* flex-start, flex-end, center, baseline, stretch */
    
    /* 多行对齐 */
    align-content: stretch; /* flex-start, flex-end, center, space-between, space-around, stretch */
}

Flex项目属性

.item {
    /* 放大比例 */
    flex-grow: 0; /* 默认0，不放大 */
    
    /* 缩小比例 */
    flex-shrink: 1; /* 默认1，可以缩小 */
    
    /* 基础大小 */
    flex-basis: auto; /* auto, 200px等 */
    
    /* flex简写 */
    flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
    flex: 0 0 200px; /* 不放大，不缩小，基础大小200px */
    
    /* 自身对齐 */
    align-self: auto; /* auto, flex-start, flex-end, center, baseline, stretch */
    
    /* 顺序 */
    order: 0; /* 数值越小越靠前 */
}

Flex布局示例

/* 水平居中 */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 两栏布局 */
.container {
    display: flex;
}

.sidebar {
    flex: 0 0 200px;
}

.main {
    flex: 1;
}

/* 三栏布局 */
.container {
    display: flex;
}

.left, .right {
    flex: 0 0 200px;
}

.center {
    flex: 1;
}

Grid是CSS3引入的二维布局方式，非常适合复杂布局。

Grid容器属性

.container {
    display: grid;
    
    /* 定义列 */
    grid-template-columns: 200px 200px 200px;
    grid-template-columns: repeat(3, 200px);
    grid-template-columns: 1fr 2fr 1fr; /* 比例分配 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    
    /* 定义行 */
    grid-template-rows: 100px 200px;
    
    /* 网格间距 */
    gap: 20px; /* row-gap column-gap的简写 */
    row-gap: 20px;
    column-gap: 20px;
    
    /* 对齐方式 */
    justify-items: stretch; /* start, end, center, stretch */
    align-items: stretch;
    justify-content: start;
    align-content: start;
}

Grid项目属性

.item {
    /* 网格位置 */
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    
    /* 简写 */
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    
    /* 跨越 */
    grid-column: span 2;
    grid-row: span 2;
    
    /* 区域 */
    grid-area: header; /* 需要先在容器中定义 */
}

Grid布局示例

/* 定义网格区域 */
.container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 100px 1fr 100px;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    gap: 20px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

居中布局

/* 水平居中 */
.center {
    margin: 0 auto;
    width: 300px;
}

/* Flex居中 */
.container {
    display: flex;
    justify-content: center;
}

/* Grid居中 */
.container {
    display: grid;
    place-items: center;
}

/* 绝对定位居中 */
.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

圣杯布局

.container {
    display: flex;
}

.left {
    flex: 0 0 200px;
    order: 1;
}

.main {
    flex: 1;
    order: 2;
}

.right {
    flex: 0 0 200px;
    order: 3;
}

8. CSS定位

div {
    /* 静态定位（默认） */
    position: static;
    
    /* 相对定位 */
    position: relative;
    top: 10px;
    left: 20px;
    
    /* 绝对定位 */
    position: absolute;
    top: 50px;
    right: 100px;
    
    /* 固定定位 */
    position: fixed;
    top: 0;
    left: 0;
    
    /* 粘性定位 */
    position: sticky;
    top: 0;
}

static（静态定位）

默认值，元素按照正常文档流排列。

relative（相对定位）

相对于元素自身原来的位置进行偏移，原来的空间仍保留。

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

absolute（绝对定位）

相对于最近的已定位（非static）祖先元素定位，如果没有则相对于body。

.container {
    position: relative; /* 定位上下文 */
}

.box {
    position: absolute;
    top: 0;
    right: 0;
}

fixed（固定定位）

相对于浏览器窗口定位，滚动时位置不变。

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

sticky（粘性定位）

在滚动到指定位置前是相对定位，之后变为固定定位。

.sticky-header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 100;
}

控制元素的堆叠顺序，数值越大越在上层。

.box1 {
    position: absolute;
    z-index: 1;
}

.box2 {
    position: absolute;
    z-index: 2; /* 在box1之上 */
}

注意：只有定位元素（非static）才能使用z-index。

9. CSS动画和过渡

实现属性值之间的平滑过渡。

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

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

/* 多个属性 */
.box {
    transition: width 0.3s, height 0.3s, background-color 0.3s;
}

/* 简写 */
.box {
    transition: all 0.3s ease;
}

transition属性

div {
    /* 过渡属性 */
    transition-property: width, height;
    
    /* 过渡时长 */
    transition-duration: 0.3s;
    
    /* 过渡函数 */
    transition-timing-function: ease; /* ease, linear, ease-in, ease-out, ease-in-out */
    
    /* 延迟时间 */
    transition-delay: 0.1s;
    
    /* 简写 */
    transition: width 0.3s ease 0.1s;
}

实现更复杂的动画效果。

/* 定义动画 */
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);
    }
}

/* 使用动画 */
.box {
    animation: slide 1s ease infinite;
}

/* 多关键帧 */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

.box {
    animation: bounce 1s ease infinite;
}

animation属性

div {
    /* 动画名称 */
    animation-name: slide;
    
    /* 动画时长 */
    animation-duration: 1s;
    
    /* 动画函数 */
    animation-timing-function: ease;
    
    /* 延迟时间 */
    animation-delay: 0.5s;
    
    /* 播放次数 */
    animation-iteration-count: infinite; /* 数字或infinite */
    
    /* 播放方向 */
    animation-direction: normal; /* normal, reverse, alternate, alternate-reverse */
    
    /* 填充模式 */
    animation-fill-mode: both; /* none, forwards, backwards, both */
    
    /* 播放状态 */
    animation-play-state: running; /* running, paused */
    
    /* 简写 */
    animation: slide 1s ease 0.5s infinite alternate;
}
div {
    /* 平移 */
    transform: translateX(50px);
    transform: translateY(50px);
    transform: translate(50px, 50px);
    
    /* 旋转 */
    transform: rotate(45deg);
    
    /* 缩放 */
    transform: scale(1.5);
    transform: scaleX(1.5);
    transform: scaleY(1.5);
    transform: scale(1.5, 2);
    
    /* 倾斜 */
    transform: skewX(10deg);
    transform: skewY(10deg);
    transform: skew(10deg, 20deg);
    
    /* 组合 */
    transform: translate(50px, 50px) rotate(45deg) scale(1.2);
}

加载动画

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loader {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

淡入淡出

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 1s ease;
}

10. 响应式设计

<meta name="viewport" content="width=device-width, initial-scale=1.0">

根据不同的屏幕尺寸应用不同的样式。

/* 基础样式 */
body {
    font-size: 16px;
}

/* 平板设备 */
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    body {
        font-size: 20px;
    }
}

/* 移动设备 */
@media (max-width: 767px) {
    .sidebar {
        display: none;
    }
}

媒体查询语法

/* 屏幕宽度 */
@media (min-width: 768px) { }
@media (max-width: 1024px) { }

/* 屏幕方向 */
@media (orientation: landscape) { }
@media (orientation: portrait) { }

/* 设备类型 */
@media screen { }
@media print { }

/* 组合条件 */
@media screen and (min-width: 768px) and (max-width: 1024px) { }
div {
    /* 相对单位 */
    width: 50%; /* 相对于父元素 */
    font-size: 1.5em; /* 相对于父元素字体大小 */
    font-size: 1.5rem; /* 相对于根元素字体大小 */
    
    /* 视口单位 */
    width: 50vw; /* 视口宽度的50% */
    height: 50vh; /* 视口高度的50% */
    font-size: 5vmin; /* 视口较小尺寸的5% */
    font-size: 5vmax; /* 视口较大尺寸的5% */
}
/* 移动优先 */
.container {
    width: 100%;
    padding: 10px;
}

/* 平板 */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
        padding: 20px;
    }
}

/* 桌面 */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
    }
}
img {
    max-width: 100%;
    height: auto;
}

/* 使用picture元素 */
<picture>
    <source media="(min-width: 1024px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="响应式图片">
</picture>

11. CSS预处理器

CSS预处理器扩展了CSS的功能，提供了变量、嵌套、混合等功能。

变量

$primary-color: #3498db;
$font-size: 16px;

.button {
    background-color: $primary-color;
    font-size: $font-size;
}

嵌套

.nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    li {
        display: inline-block;
    }
    
    a {
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
}

混合（Mixin）

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    @include flex-center;
}

继承

.message {
    border: 1px solid #ccc;
    padding: 10px;
}

.success {
    @extend .message;
    border-color: green;
}

12. 实际项目案例

<div class="card">
    <img src="image.jpg" alt="图片">
    <div class="card-content">
        <h3>标题</h3>
        <p>描述文本</p>
        <button class="btn">按钮</button>
    </div>
</div>
.card {
    width: 300px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 20px;
}

.btn {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #2980b9;
}
<nav class="navbar">
    <div class="nav-brand">Logo</div>
    <ul class="nav-menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系</a></li>
    </ul>
</nav>
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #333;
    color: white;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: #3498db;
}

@media (max-width: 768px) {
    .nav-menu {
        flex-direction: column;
        gap: 1rem;
    }
}

13. 最佳实践与总结

  1. 使用外部样式表：便于维护和复用
  2. 使用语义化的类名：.btn-primary而不是.red-button
  3. 避免内联样式：除非必要，否则使用外部样式
  4. 使用CSS变量：便于主题切换
  5. 合理使用选择器：避免过度嵌套
  6. 使用flex和grid：现代布局方式
  7. 移动优先：响应式设计从移动端开始
  8. 性能优化：减少选择器复杂度，避免过度使用动画

BEM命名法

/* Block */
.card { }

/* Element */
.card__title { }
.card__content { }

/* Modifier */
.card--large { }
.card__title--highlight { }
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
}

通过本教程，你已经掌握了：

  • ✅ CSS基础语法和选择器
  • ✅ 样式属性的使用
  • ✅ 盒模型和布局
  • ✅ 定位和动画
  • ✅ 响应式设计
  • ✅ 实际项目应用

下一步学习方向：

  1. CSS预处理器：Sass、Less
  2. CSS框架：Bootstrap、Tailwind CSS
  3. CSS模块化：CSS Modules、Styled Components
  4. CSS新特性：CSS Grid、CSS Variables
  5. 性能优化：关键CSS、代码分割

结语

CSS是前端开发的基础技能之一。通过本教程的学习，相信你已经掌握了CSS的核心知识。

记住：

  • 多实践：通过实际项目练习
  • 多思考：理解布局原理
  • 多学习：关注CSS新特性
  • 多优化：注重代码质量和性能

祝你学习愉快，编程顺利！ 🚀

本教程由Java突击队学习社区编写，如有问题欢迎反馈。

一个可以快速提升Java技术的神奇网站
Copyright © 2025 Java突击队