CSS 简介

CSS（层叠样式表）是用于控制网页外观和布局的语言。本教程将带你从零开始学习 CSS。

什么是 CSS？

CSS 的作用

CSS（Cascading Style Sheets，层叠样式表）用于描述 HTML 文档的外观和格式：

颜色和背景：设置文字颜色、背景色、渐变等
字体和排版：控制字体、大小、行高、对齐方式
布局：控制元素的位置和排列方式
动画和过渡：创建动态效果

CSS 的特点

特点	说明
层叠性	多个样式规则可以作用于同一个元素
继承性	子元素可以继承父元素的某些样式
优先级	不同来源的样式有优先级顺序
模块化	分为多个模块，如盒模型、Flexbox、Grid等

CSS 语法

基本结构

/* 选择器 */
h1 {
    /* 属性: 值; */
    color: blue;
    font-size: 24px;
}

各部分说明：

h1 { color: blue; }
  │   │      │
  │   │      └── 值 (value)
  │   └───────┘
  │       │
  │       └── 属性值对
  └───────────
    选择器 (selector)

CSS 注释

/* 这是单行注释 */

/* 
 * 这是多行注释
 * 用于详细说明样式规则
 */

/* 不要使用 HTML 风格的注释 */
/* <!-- 这不是正确的CSS注释 --> */

CSS 引入方式

1. 外部样式表（推荐）

将 CSS 写入单独的 .css 文件，通过 <link> 引入：

<!-- 在 HTML 的 <head> 中引入 -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

styles.css:

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

优点

样式与结构分离
多个页面共享同一样式文件
浏览器可以缓存 CSS 文件，提高加载速度

2. 内部样式表

将 CSS 写在 HTML 文件的 <style> 标签内：

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

适用场景

单页面网站
需要针对特定页面添加特殊样式

3. 内联样式（慎用）

直接在 HTML 元素的 style 属性中编写：

<h1 style="color: blue; font-size: 24px;">标题</h1>
<p style="font-size: 16px; color: #333;">段落内容</p>

缺点

样式与 HTML 混合，难以维护
无法复用样式
优先级最高，难以覆盖
避免使用！

样式优先级

来源	优先级（从低到高）
浏览器默认样式	最低
外部样式表 / 内部样式表	中
内联样式	最高

CSS 选择器

选择器用于指定要样式化的 HTML 元素：

元素选择器

/* 选择所有段落元素 */
p {
    color: #333;
}

/* 选择所有标题 */
h1, h2, h3 {
    color: #2c3e50;
}

类选择器

/* HTML 中定义 class="highlight" */
.highlight {
    background-color: yellow;
}

/* 元素+类选择器 */
p.highlight {
    font-weight: bold;
}

ID 选择器

/* HTML 中定义 id="header" */
#header {
    background-color: #3498db;
    padding: 20px;
}

注意

ID 在页面中应该是唯一的
类选择器比 ID 选择器更灵活，推荐使用类

后代选择器

/* 选择 article 内的所有段落 */
article p {
    line-height: 1.6;
}

/* 选择 div 内的所有 strong */
div strong {
    color: red;
}

子选择器

/* 只选择直接子元素 */
ul > li {
    list-style: none;
}

/* div 的直接子元素 p */
div > p {
    margin: 10px 0;
}

伪类选择器

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

/* 第一个子元素 */
li:first-child {
    border-top: none;
}

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

完整选择器列表

选择器	示例	说明
元素	`p`	所有 `<p>` 元素
类	`.highlight`	所有 class="highlight"
ID	`#header`	id="header" 的元素
后代	`article p`	article 内的 p
子	`ul > li`	ul 的直接 li 子元素
相邻兄弟	`h1 + p`	h1 后的第一个 p
属性	`input[type="text"]`	指定属性的元素
伪类	`:hover`	元素状态
伪元素	`::before`	元素特定部分

CSS 属性

常用属性示例

/* 文字颜色 */
color: #333333;
color: rgb(0, 0, 0);
color: red;

/* 字体大小 */
font-size: 16px;
font-size: 1.2em;

/* 背景 */
background-color: #f5f5f5;
background-image: url('bg.jpg');
background: linear-gradient(to bottom, #fff, #000);

/* 边框 */
border: 1px solid #333;
border-radius: 5px;

/* 外边距 */
margin: 10px;
margin-top: 20px;

/* 内边距 */
padding: 15px;
padding-left: 20px;

/* 宽度和高度 */
width: 100%;
height: 200px;
max-width: 1200px;

CSS 值和单位

长度单位

单位	说明	示例
`px`	像素（绝对）	`font-size: 16px;`
`%`	百分比（相对于父元素）	`width: 50%;`
`em`	相对于当前字体大小	`font-size: 1.5em;`
`rem`	相对于根元素字体大小	`font-size: 1rem;`
`vw`	视口宽度的1%	`width: 50vw;`
`vh`	视口高度的1%	`height: 100vh;`

/* 绝对单位 */
font-size: 16px;
border-width: 2px;

/* 相对单位 - 推荐用于响应式设计 */
width: 50%;
font-size: 1.5em;
padding: 2rem;

颜色值

/* 颜色名称 */
color: red;
color: blue;

/* 十六进制 */
color: #ff0000;
color: #f00;  /* 简写 */

/* RGB */
color: rgb(255, 0, 0);

/* RGBA（带透明度） */
color: rgba(255, 0, 0, 0.5);

/* HSL */
color: hsl(0, 100%, 50%);

CSS 变量

/* 定义变量 */
:root {
    --primary-color: #3498db;
    --font-size-base: 16px;
    --spacing: 10px;
}

/* 使用变量 */
.button {
    background-color: var(--primary-color);
    font-size: var(--font-size-base);
    padding: var(--spacing);
}

/* 带默认值的变量 */
.content {
    color: var(--text-color, #333); /* 默认值 */
}

第一个 CSS 示例

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>
    <header class="site-header">
        <h1>我的网站</h1>
        <nav>
            <a href="#">首页</a>
            <a href="#">教程</a>
            <a href="#">关于</a>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>欢迎学习 CSS</h2>
            <p class="intro">CSS 用于控制网页的样式和布局。</p>
            <p>通过 CSS，我们可以让网页变得更加美观。</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2024 我的网站</p>
    </footer>
</body>
</html>

CSS 样式

/* style.css */

/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 基本样式 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

/* 头部样式 */
.site-header {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
}

.site-header h1 {
    margin-bottom: 10px;
}

/* 导航样式 */
nav a {
    color: white;
    text-decoration: none;
    margin-right: 15px;
}

nav a:hover {
    text-decoration: underline;
}

/* 主内容区 */
main {
    max-width: 800px;
    margin: 30px auto;
    padding: 0 20px;
}

article h2 {
    color: #2c3e50;
    margin-bottom: 15px;
}

.intro {
    font-size: 18px;
    color: #555;
}

/* 底部样式 */
footer {
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 50px;
}

效果预览： 此示例展示了一个完整的网页布局，包含头部导航、内容区和底部。

<!-- 结构示例 -->
<header>
    <h1>我的网站</h1>
    <nav>
        <a href="#">首页</a>
        <a href="#">教程</a>
        <a href="#">关于</a>
    </nav>
</header>
<main>
    <h2>欢迎学习 CSS</h2>
    <p class="intro">CSS 用于控制网页的样式和布局。</p>
    <p>通过 CSS，我们可以让网页变得更加美观。</p>
</main>
<footer>
    <p>&copy; 2024 我的网站</p>
</footer>

结合上述 CSS 样式，最终效果为一个带有深色头部、白色内容区和深色底部的现代网页布局。

浏览器开发者工具

浏览器开发者工具是学习和调试 CSS 的利器：

打开方式

Chrome/Edge：按 F12 或 Ctrl+Shift+I
Firefox：按 F12 或 Ctrl+Shift+I
Safari：Cmd+Option+I

常用功能

Elements 面板：查看和编辑 HTML 和 CSS
Styles 面板：查看计算后的样式
Computed 面板：查看盒模型的精确值
选择器测试：点击元素快速定位

调试技巧

使用开发者工具实时修改 CSS，即时预览效果
查看元素的 computed styles 了解最终应用的样式
使用 :hov 强制显示伪类状态（如 hover）

小结

本章学习了：

CSS 基础：什么是 CSS 以及它的作用
语法结构：选择器、属性、值的写法
引入方式：外部样式表、内部样式表、内联样式
选择器：元素、类、ID、后代、伪类选择器
单位和值：长度单位、颜色值、CSS 变量
开发工具：浏览器开发者工具的使用

练习

创建第一个 CSS 文件，设置页面基本样式
尝试使用不同的选择器选择元素
使用浏览器开发者工具检查和修改样式
定义 CSS 变量并在多个地方使用
创建一个简单的博客页面布局样式

什么是 CSS？​

CSS 的作用​

CSS 的特点​

CSS 语法​

基本结构​

CSS 注释​

CSS 引入方式​

1. 外部样式表（推荐）​

2. 内部样式表​

3. 内联样式（慎用）​

样式优先级​

CSS 选择器​

元素选择器​

类选择器​

ID 选择器​

后代选择器​

子选择器​

伪类选择器​

完整选择器列表​

CSS 属性​

常用属性示例​

CSS 值和单位​

长度单位​

颜色值​

CSS 变量​

第一个 CSS 示例​

HTML 结构​

CSS 样式​

浏览器开发者工具​

打开方式​

常用功能​

小结​

练习​