CSS 教程 - Web技术教程

CSS 简介

CSS 用于控制网页的外观，包括颜色、字体、布局等。CSS 与 HTML 分离，可以让网页结构与样式分离，提高代码的可维护性。

为什么使用 CSS？

可以同时控制多个网页的样式
使 HTML 代码更简洁
便于维护和更新
提供更丰富的样式选项

提示：CSS 的全称是 Cascading Style Sheets（层叠样式表），它允许你定义如何显示 HTML 元素。

CSS 语法

CSS 规则由选择器和声明块组成。选择器指向要设置样式的 HTML 元素，声明块包含一个或多个用分号分隔的声明。

选择器 { 声明1; 声明2; ... }

CSS 声明

每个声明由一个属性和一个值组成，属性和值之间用冒号分隔：

属性名: 属性值;

完整 CSS 规则示例

p {
    color: blue;
    font-size: 16px;
    line-height: 1.5;
}

CSS 的三种引入方式

内联样式：直接在 HTML 元素中使用 style 属性
内部样式表：在 HTML 文档的 <head> 部分使用 <style> 标签
外部样式表：使用单独的 CSS 文件，然后在 HTML 中通过 <link> 标签引入

内联样式

<p style="color: red; font-size: 18px;">这是一个段落。</p>

内部样式表

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

外部样式表

<!-- 在 HTML 文件中 -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

<!-- 在 styles.css 文件中 -->
p {
    color: blue;
    font-size: 16px;
}

注意：建议使用外部样式表，这样可以更好地分离结构和样式，提高代码的可维护性。

CSS 选择器

CSS 选择器用于选择要设置样式的 HTML 元素。CSS 提供了多种选择器来满足不同的选择需求。

基本选择器

元素选择器：根据元素名称选择元素
类选择器：根据 class 属性选择元素
ID 选择器：根据 id 属性选择元素
通用选择器：选择所有元素

/* 元素选择器 */
p { color: blue; }

h1 { font-size: 24px; }

/* 类选择器 */
.text-primary { color: #3498db; }

.card { border: 1px solid #ddd; }

/* ID 选择器 */
#header { background-color: #f5f5f5; }

#footer { text-align: center; }

/* 通用选择器 */
* { margin: 0; padding: 0; }

组合选择器

后代选择器：选择元素内的所有后代元素
子选择器：选择元素的直接子元素
相邻兄弟选择器：选择紧接在另一个元素后的元素
通用兄弟选择器：选择某个元素后的所有兄弟元素

/* 后代选择器 */
div p { color: red; } /* 选择 div 内的所有 p 元素 */

/* 子选择器 */
div > p { font-weight: bold; } /* 选择 div 的直接子 p 元素 */

/* 相邻兄弟选择器 */
h1 + p { margin-top: 0; } /* 选择紧接在 h1 后的 p 元素 */

/* 通用兄弟选择器 */
h1 ~ p { color: green; } /* 选择 h1 后的所有兄弟 p 元素 */

伪类和伪元素

/* 伪类 */
a:hover { color: #e74c3c; } /* 鼠标悬停时的链接样式 */

a:visited { color: #9b59b6; } /* 已访问的链接样式 */

input:focus { border-color: #3498db; } /* 获得焦点的输入框样式 */

li:nth-child(even) { background-color: #f2f2f2; } /* 偶数列表项样式 */

/* 伪元素 */
p::first-line { font-weight: bold; } /* 段落第一行的样式 */

h1::before { content: "★ "; } /* 在 h1 前添加内容 */

h1::after { content: " ★"; } /* 在 h1 后添加内容 */

CSS 样式属性

CSS 提供了大量的样式属性，用于控制元素的外观。以下是一些常用的 CSS 样式属性。

文本样式

p {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: normal; /* normal, bold, lighter, bolder, 100-900 */
    font-style: normal; /* normal, italic, oblique */
    color: #333;
    text-align: left; /* left, right, center, justify */
    text-decoration: none; /* none, underline, overline, line-through */
    text-transform: none; /* none, uppercase, lowercase, capitalize */
    line-height: 1.5; /* 行高 */
    letter-spacing: 0.5px; /* 字母间距 */
    word-spacing: 2px; /* 单词间距 */
}

盒模型

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    margin: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box; /* content-box (默认), border-box */
}

背景样式

body {
    background-color: #f9f9f9;
    background-image: url('bg.jpg');
    background-repeat: no-repeat; /* repeat, repeat-x, repeat-y, no-repeat */
    background-position: center center; /* left, center, right, top, bottom, 或百分比 */
    background-size: cover; /* auto, cover, contain, 或具体尺寸 */
    background-attachment: fixed; /* scroll, fixed, local */
}

/* 简写属性 */
body {
    background: #f9f9f9 url('bg.jpg') no-repeat center center fixed;
    background-size: cover;
}

边框样式

div {
    border-width: 2px;
    border-style: solid; /* solid, dotted, dashed, double, groove, ridge, inset, outset */
    border-color: #3498db;
    border-radius: 5px;
}

/* 简写属性 */
div {
    border: 2px solid #3498db;
    border-radius: 5px;
}

/* 单边边框 */
div {
    border-top: 2px solid #3498db;
    border-bottom: 2px dashed #e74c3c;
}

CSS 布局与定位

CSS 提供了多种方法来控制元素的布局和定位。

定位 (position)

/* 静态定位 (默认) */
.static {
    position: static;
}

/* 相对定位 */
.relative {
    position: relative;
    top: 10px;
    left: 20px;
}

/* 绝对定位 */
.absolute {
    position: absolute;
    top: 50px;
    right: 100px;
}

/* 固定定位 */
.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* 粘性定位 */
.sticky {
    position: sticky;
    top: 20px;
}

浮动 (float)

/* 左浮动 */
.float-left {
    float: left;
    margin-right: 10px;
}

/* 右浮动 */
.float-right {
    float: right;
    margin-left: 10px;
}

/* 清除浮动 */
.clear {
    clear: both;
}

/* 清除浮动的现代方法 */
.container::after {
    content: "";
    display: table;
    clear: both;
}

注意：浮动元素会脱离文档流，可能导致父元素高度塌陷。使用清除浮动技术来解决这个问题。

Flexbox 布局

Flexbox (Flexible Box Layout) 是一种一维布局模型，设计用于在不同尺寸的容器中更有效地分配空间，使元素对齐和分布更加灵活。

基本概念

主轴 (Main Axis)：flex 容器的主要方向
交叉轴 (Cross Axis)：与主轴垂直的方向
flex 容器：应用了 display: flex 的元素
flex 项目：flex 容器内的子元素

容器属性

.container {
    display: flex;
    
    /* 主轴方向 */
    flex-direction: row; /* row (默认), row-reverse, column, column-reverse */
    
    /* 主轴对齐方式 */
    justify-content: flex-start; /* flex-start (默认), flex-end, center, space-between, space-around, space-evenly */
    
    /* 交叉轴对齐方式 */
    align-items: stretch; /* stretch (默认), flex-start, flex-end, center, baseline */
    
    /* 多行容器的行对齐方式 */
    align-content: stretch; /* stretch (默认), flex-start, flex-end, center, space-between, space-around */
    
    /* 是否允许换行 */
    flex-wrap: nowrap; /* nowrap (默认), wrap, wrap-reverse */
}

/* flex-flow 是 flex-direction 和 flex-wrap 的简写 */
.container {
    flex-flow: row nowrap;
}

项目属性

.item {
    /* 项目增长因子 */
    flex-grow: 0; /* 默认值为 0，不自动增长 */
    
    /* 项目收缩因子 */
    flex-shrink: 1; /* 默认值为 1，允许收缩 */
    
    /* 项目基准值 */
    flex-basis: auto; /* 默认值为 auto，可以设置为固定宽度 */
    
    /* 项目的对齐方式，覆盖容器的 align-items */
    align-self: auto; /* auto (默认), flex-start, flex-end, center, baseline, stretch */
    
    /* 项目的排列顺序 */
    order: 0; /* 默认值为 0，数值越小越靠前 */
}

/* flex 是 flex-grow, flex-shrink 和 flex-basis 的简写 */
.item {
    flex: 0 1 auto; /* 默认值 */
}

/* 常用值 */
.item {
    flex: 1; /* 等同于 flex: 1 1 0% */
}

提示：Flexbox 非常适合一维布局，如导航栏、卡片行等。对于复杂的二维布局，可以考虑使用 Grid 布局。

CSS Grid 布局

CSS Grid 是一种二维布局系统，可以同时处理行和列。它使创建复杂的页面布局变得更加简单。

基本概念

网格容器：应用了 display: grid 的元素
网格项：网格容器内的子元素
网格线：划分网格的线，包括垂直线和水平线
网格轨道：两条相邻网格线之间的空间
网格单元格：最小的网格单元
网格区域：由一个或多个网格单元格组成的矩形区域

容器属性

.container {
    display: grid;
    
    /* 定义网格列 */
    grid-template-columns: 100px 1fr 2fr;
    
    /* 定义网格行 */
    grid-template-rows: auto 200px;
    
    /* 定义网格区域 */
    grid-template-areas:
        "header header header"
        "sidebar main main";
    
    /* 列间距 */
    column-gap: 20px;
    
    /* 行间距 */
    row-gap: 15px;
    
    /* gap 是 column-gap 和 row-gap 的简写 */
    gap: 15px 20px;
}

/* 使用 repeat() 函数简化 */
.container {
    grid-template-columns: repeat(3, 1fr); /* 创建 3 个相等宽度的列 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 响应式网格 */
}

项目属性

.item {
    /* 指定项目占据的网格区域 */
    grid-area: header; /* 对应容器中定义的区域名 */
    
    /* 指定项目的起始和结束网格线 */
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    
    /* 简写形式 */
    grid-column: 1 / 4; /* 等同于 grid-column-start: 1; grid-column-end: 4; */
    grid-row: 1 / 2; /* 等同于 grid-row-start: 1; grid-row-end: 2; */
}

/* 常用简写形式 */
.item {
    grid-column: 1 / span 3; /* 从第 1 条列线开始，跨越 3 个轨道 */
}

提示：CSS Grid 非常适合二维布局，如页面整体布局、网格系统等。它与 Flexbox 结合使用，可以创建复杂而灵活的布局。

响应式设计

响应式设计使网站能够根据用户设备的屏幕尺寸自动调整布局和内容，提供更好的用户体验。

媒体查询

媒体查询是响应式设计的核心，它允许你根据设备特性应用不同的样式。

/* 基本语法 */
@media media-type and (media-feature) {
    /* CSS 规则 */
}

/* 常用媒体查询 */
/* 移动设备 */
@media (max-width: 767px) {
    .container {
        width: 100%;
        padding: 10px;
    }
    
    .nav-menu {
        display: none;
    }
    
    .mobile-menu {
        display: block;
    }
}

/* 平板设备 */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        width: 90%;
        margin: 0 auto;
    }
}

/* 桌面设备 */
@media (min-width: 992px) {
    .container {
        width: 80%;
        max-width: 1200px;
        margin: 0 auto;
    }
}

视口设置

在 HTML 的 <head> 标签中添加 viewport 元标签，以确保页面在移动设备上正确显示。

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

响应式设计原则

移动优先：从移动设备开始设计，然后为更大的屏幕添加样式
灵活网格：使用相对单位（如 em、rem、%）代替固定像素值
灵活图像：确保图像可以缩放以适应容器
媒体查询：根据屏幕尺寸应用不同的样式
触摸友好：确保交互元素足够大，易于触摸

提示：测试不同屏幕尺寸下的网站显示效果，可以使用浏览器的开发者工具或在实际设备上测试。

动画与过渡

CSS 提供了创建动画和过渡效果的能力，可以使网页更加生动和交互性更强。

过渡 (transition)

过渡允许你平滑地改变元素的样式属性值。

.element {
    /* 基本过渡 */
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
    
    /* 简写形式 */
    transition: all 0.3s ease 0s;
    
    /* 常用简写 */
    transition: all 0.3s ease;
}

/* 示例：按钮悬停效果 */
.button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

动画 (animation)

动画允许你创建更复杂的动画效果，通过 @keyframes 规则定义动画序列。

/* 定义动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 使用动画 */
.element {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    
    /* 简写形式 */
    animation: fadeIn 1s ease 0s 1 normal none running;
    
    /* 常用简写 */
    animation: fadeIn 1s ease;
}

/* 示例：旋转动画 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

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

常用的变换 (transform)

.element {
    /* 旋转 */
    transform: rotate(45deg);
    
    /* 缩放 */
    transform: scale(1.2);
    
    /* 平移 */
    transform: translate(10px, 20px);
    
    /* 倾斜 */
    transform: skew(15deg, 10deg);
    
    /* 组合变换 */
    transform: rotate(45deg) scale(1.2) translate(10px, 20px);
}

/* 3D 变换 */
.element {
    transform: rotateY(180deg);
    transform: perspective(1000px) rotateY(180deg);
}

注意：过多或过于复杂的动画可能会影响页面性能，特别是在移动设备上。请谨慎使用动画，并确保它们不会干扰用户体验。

CSS 最佳实践

编写高质量 CSS 的建议

使用语义化的类名：选择清晰、描述性的类名
使用 CSS 变量：使用 CSS 变量来管理颜色、间距等，方便统一修改
避免过度使用选择器：优先使用类选择器，避免使用过于复杂的选择器
组织 CSS 代码：使用注释和逻辑分组来组织代码
最小化 CSS：删除未使用的 CSS，使用压缩工具减小文件大小
优先使用现代布局技术：使用 Flexbox 和 Grid 进行布局
考虑性能：避免不必要的重排和重绘
遵循 BEM 或其他命名约定：使用一致的命名约定

CSS 变量示例

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --text-color: #333;
    --light-gray: #f5f5f5;
    --border-radius: 4px;
    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
}

.button {
    background-color: var(--primary-color);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.card {
    background-color: white;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

BEM 命名约定

BEM (Block, Element, Modifier) 是一种流行的 CSS 命名约定。

Block：独立的功能块，如 .header, .card
Element：块的组成部分，如 .card__title, .card__content
Modifier：块或元素的变体，如 .card--featured, .button--primary

/* BEM 示例 */
.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

/* 实际例子 */
.card {}
.card__title {}
.card__content {}
.card--featured {}
.card__button--primary {}