入门

本章将带你了解CSS的基本概念，学习如何在HTML中引入CSS样式。

CSS简介

什么是CSS？

CSS（Cascading Style Sheets）即层叠样式表，是一种用于描述HTML文档呈现方式的样式表语言。

Cascading（层叠）：多个样式可以层叠在一起，按照优先级应用
Style（样式）：定义元素的外观，如颜色、字体、大小等
Sheets（表）：样式可以集中在一个或多个文件中管理

CSS的作用

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS的作用演示</title>
    <style>
        /* 没有CSS的样式 */
        .no-css {
            /* 默认样式，没有任何美化 */
        }
        
        /* 有CSS的样式 */
        .with-css {
            background-color: #4CAF50;  /* 绿色背景 */
            color: white;                /* 白色文字 */
            padding: 20px;               /* 内边距 */
            border-radius: 8px;          /* 圆角 */
            text-align: center;          /* 居中对齐 */
            font-size: 18px;             /* 字体大小 */
        }
    </style>
</head>
<body>
    <!-- 没有CSS样式 -->
    <p class="no-css">这是一个没有样式的段落</p>
    
    <!-- 有CSS样式 -->
    <p class="with-css">这是一个有样式的段落</p>
</body>
</html>

CSS基本语法

语法结构

CSS规则由两个主要部分组成：选择器和声明块。

css

/* CSS基本语法结构 */
选择器 {
    属性名: 属性值;
    属性名: 属性值;
}

语法示例

css

/* 选择所有p元素 */
p {
    color: red;           /* 设置文字颜色为红色 */
    font-size: 16px;      /* 设置字体大小为16像素 */
}

/* 选择class为title的元素 */
.title {
    color: blue;          /* 设置文字颜色为蓝色 */
    font-weight: bold;    /* 设置字体加粗 */
}

/* 选择id为header的元素 */
#header {
    background-color: #333;  /* 设置背景颜色 */
    height: 60px;            /* 设置高度 */
}

语法规则

css

/* 1. 每条声明以分号结尾 */
p {
    color: red;     /* 分号结尾 */
    font-size: 16px; /* 分号结尾 */
}

/* 2. 声明块用花括号包围 */
h1 {
    color: blue;
}

/* 3. 属性名和属性值用冒号分隔 */
div {
    width: 200px;   /* 冒号分隔 */
}

/* 4. CSS不区分大小写，但推荐使用小写 */
P {
    COLOR: RED;     /* 可以运行，但不推荐 */
}

p {
    color: red;     /* 推荐写法 */
}

/* 5. 多个选择器可以共享样式 */
h1, h2, h3 {
    color: #333;    /* 多个选择器用逗号分隔 */
}

引入CSS的三种方式

1. 行内样式（Inline Style）

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

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>行内样式示例</title>
</head>
<body>
    <!-- 行内样式：直接写在style属性中 -->
    <p style="color: red; font-size: 18px;">这是红色文字</p>
    
    <!-- 多个样式用分号分隔 -->
    <div style="width: 200px; height: 100px; background-color: blue; color: white;">
        这是一个蓝色背景的盒子
    </div>
    
    <!-- 行内样式优先级最高 -->
    <p style="color: red;" class="blue-text">这段文字是红色的（行内样式优先）</p>
</body>
</html>

优点：

简单直接，适合快速测试
优先级最高，可以覆盖其他样式

缺点：

HTML和CSS混合，难以维护
无法复用，每个元素都要单独写
不推荐在实际项目中大量使用

2. 内部样式表（Internal Style Sheet）

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

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内部样式表示例</title>
    
    <!-- 内部样式表：写在style标签中 -->
    <style>
        /* 设置页面背景色 */
        body {
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
        }
        
        /* 设置标题样式 */
        h1 {
            color: #333;
            text-align: center;
            border-bottom: 2px solid #4CAF50;
            padding-bottom: 10px;
        }
        
        /* 设置段落样式 */
        p {
            color: #666;
            line-height: 1.8;
            margin: 15px 0;
        }
        
        /* 设置容器样式 */
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>内部样式表示例</h1>
        <p>这是一个使用内部样式表的页面。</p>
        <p>所有样式都写在head标签内的style标签中。</p>
    </div>
</body>
</html>

优点：

HTML和CSS分离，结构更清晰
适合单个页面的样式定义
方便测试和演示

缺点：

只能在当前页面使用
多页面网站无法复用

3. 外部样式表（External Style Sheet）

将CSS写在外部文件中，通过<link>标签引入：

HTML文件：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部样式表示例</title>
    
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="styles.css">
    
    <!-- 也可以引入多个CSS文件 -->
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <header class="header">
        <h1>网站标题</h1>
        <nav class="nav">
            <a href="#">首页</a>
            <a href="#">关于</a>
            <a href="#">联系</a>
        </nav>
    </header>
    
    <main class="main">
        <article class="article">
            <h2>文章标题</h2>
            <p>文章内容...</p>
        </article>
    </main>
    
    <footer class="footer">
        <p>&copy; 2024 我的网站</p>
    </footer>
</body>
</html>

styles.css文件：

css

/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
    line-height: 1.6;
}

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

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

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

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

/* 主内容区域 */
.main {
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
}

/* 文章样式 */
.article {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 页脚样式 */
.footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: white;
    margin-top: 20px;
}

优点：

HTML和CSS完全分离
可以在多个页面复用
浏览器会缓存CSS文件，提高加载速度
便于维护和团队协作
推荐在实际项目中使用

缺点：

需要额外的HTTP请求（但可以缓存）

link标签属性

html

<link 
    rel="stylesheet"    <!-- 表示这是一个样式表 -->
    href="styles.css"   <!-- CSS文件的路径 -->
    type="text/css"     <!-- 文件类型（HTML5可省略） -->
    media="screen"      <!-- 媒体类型（可选） -->
>

media属性示例：

html

<!-- 只在屏幕上应用 -->
<link rel="stylesheet" href="screen.css" media="screen">

<!-- 只在打印时应用 -->
<link rel="stylesheet" href="print.css" media="print">

<!-- 只在屏幕宽度小于768px时应用 -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">

CSS注释

注释用于解释代码，不会被执行：

css

/* 这是单行注释 */

/*
   这是
   多行注释
   可以写很多内容
*/

/* ========== 头部样式开始 ========== */
.header {
    background-color: #333;  /* 深灰色背景 */
    color: white;            /* 白色文字 */
}
/* ========== 头部样式结束 ========== */

/*
 * 导航样式
 * 包含导航链接和悬停效果
 */
.nav {
    display: flex;
    gap: 20px;
}

CSS层叠规则

当多个样式应用于同一元素时，CSS会按照一定规则决定最终应用哪个样式。

层叠优先级

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>层叠规则示例</title>
    <style>
        /* 优先级从低到高 */
        
        /* 1. 元素选择器（优先级最低） */
        p {
            color: black;
        }
        
        /* 2. 类选择器 */
        .text-color {
            color: blue;
        }
        
        /* 3. ID选择器 */
        #special-text {
            color: green;
        }
        
        /* 4. 行内样式（优先级最高，见下方HTML） */
    </style>
</head>
<body>
    <!-- 最终显示黑色：元素选择器 -->
    <p>普通段落</p>
    
    <!-- 最终显示蓝色：类选择器优先级高于元素选择器 -->
    <p class="text-color">蓝色段落</p>
    
    <!-- 最终显示绿色：ID选择器优先级高于类选择器 -->
    <p id="special-text" class="text-color">绿色段落</p>
    
    <!-- 最终显示红色：行内样式优先级最高 -->
    <p id="special-text" class="text-color" style="color: red;">红色段落</p>
</body>
</html>

优先级计算

选择器类型	权重值	示例
行内样式	1000	`style="..."`
ID选择器	100	`#id`
类选择器、伪类、属性选择器	10	`.class`、`:hover`、`[attr]`
元素选择器、伪元素	1	`div`、`::before`

css

/* 优先级计算示例 */

/* 权重：1 */
p {
    color: black;
}

/* 权重：10 */
.text {
    color: blue;
}

/* 权重：100 */
#special {
    color: green;
}

/* 权重：10 + 1 = 11 */
.text p {
    color: yellow;
}

/* 权重：100 + 10 + 1 = 111 */
#special .text p {
    color: purple;
}

/* !important 强制最高优先级（不推荐使用） */
p {
    color: red !important;  /* 会覆盖所有其他样式 */
}

!important的使用

css

/* 不推荐：滥用 !important */
p {
    color: red !important;
    font-size: 16px !important;
}

/* 适当使用：覆盖第三方库的样式 */
.third-party-button {
    background-color: blue !important;  /* 覆盖第三方样式 */
}

注意

!important 会破坏CSS的层叠规则，导致样式难以维护。请尽量避免使用，只在必要时使用。

CSS继承

某些CSS属性会从父元素继承到子元素：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS继承示例</title>
    <style>
        /* 父元素样式 */
        .parent {
            color: blue;           /* 可继承 */
            font-size: 18px;       /* 可继承 */
            font-family: Arial;    /* 可继承 */
            line-height: 1.6;      /* 可继承 */
            border: 1px solid red; /* 不可继承 */
            padding: 20px;         /* 不可继承 */
            margin: 10px;          /* 不可继承 */
            width: 300px;          /* 不可继承 */
        }
        
        /* 子元素会继承父元素的可继承属性 */
        .child {
            /* 不需要写color、font-size等，会自动继承 */
        }
        
        /* 强制继承 */
        .inherit-all {
            border: inherit;  /* 强制继承父元素的border */
            padding: inherit; /* 强制继承父元素的padding */
        }
    </style>
</head>
<body>
    <div class="parent">
        父元素文字（蓝色、18px）
        <div class="child">
            子元素文字（继承父元素的颜色和字体大小）
        </div>
    </div>
</body>
</html>

常见可继承属性

可继承属性	不可继承属性
color	border
font-size	padding
font-family	margin
font-weight	width
line-height	height
text-align	background
text-indent	display
list-style	position

CSS颜色值

CSS支持多种颜色表示方式：

css

/* 1. 颜色名称 */
.color-name {
    color: red;        /* 红色 */
    color: blue;       /* 蓝色 */
    color: green;      /* 绿色 */
    color: transparent; /* 透明 */
}

/* 2. 十六进制（最常用） */
.hex-color {
    color: #ff0000;    /* 红色 */
    color: #00ff00;    /* 绿色 */
    color: #0000ff;    /* 蓝色 */
    color: #f00;       /* 红色简写 */
    color: #000;       /* 黑色简写 */
    color: #fff;       /* 白色简写 */
}

/* 3. RGB值 */
.rgb-color {
    color: rgb(255, 0, 0);      /* 红色 */
    color: rgb(0, 255, 0);      /* 绿色 */
    color: rgb(0, 0, 255);      /* 蓝色 */
    color: rgb(0, 0, 0);        /* 黑色 */
    color: rgb(255, 255, 255);  /* 白色 */
}

/* 4. RGBA值（带透明度） */
.rgba-color {
    color: rgba(255, 0, 0, 1);    /* 红色，不透明 */
    color: rgba(255, 0, 0, 0.5);  /* 红色，半透明 */
    color: rgba(255, 0, 0, 0);    /* 红色，完全透明 */
}

/* 5. HSL值 */
.hsl-color {
    color: hsl(0, 100%, 50%);   /* 红色 */
    color: hsl(120, 100%, 50%); /* 绿色 */
    color: hsl(240, 100%, 50%); /* 蓝色 */
}

/* 6. HSLA值（带透明度） */
.hsla-color {
    color: hsla(0, 100%, 50%, 0.5); /* 红色，半透明 */
}

/* 7. currentColor关键字 */
.current-color {
    color: blue;
    border: 1px solid currentColor; /* 边框颜色继承文字颜色 */
}

CSS单位

绝对单位

css

.absolute-units {
    width: 100px;    /* 像素（最常用） */
    font-size: 12pt; /* 点（打印用） */
    width: 2in;      /* 英寸 */
    width: 5cm;      /* 厘米 */
    width: 50mm;     /* 毫米 */
}

相对单位

css

.relative-units {
    /* em：相对于父元素的字体大小 */
    font-size: 16px;
    padding: 1em;    /* 16px */
    
    /* rem：相对于根元素（html）的字体大小 */
    font-size: 1rem; /* 通常等于16px */
    
    /* %：相对于父元素 */
    width: 50%;      /* 父元素宽度的50% */
    
    /* vw：视口宽度的1% */
    width: 100vw;    /* 视口宽度 */
    
    /* vh：视口高度的1% */
    height: 100vh;   /* 视口高度 */
    
    /* vmin：视口宽度和高度中较小的那个的1% */
    font-size: 5vmin;
    
    /* vmax：视口宽度和高度中较大的那个的1% */
    font-size: 3vmax;
}

单位选择建议

css

/* 推荐使用 */
.recommended {
    font-size: 1rem;    /* 字体大小用rem */
    padding: 1em;       /* 内边距用em */
    width: 100%;        /* 宽度用% */
    max-width: 1200px;  /* 最大宽度用px */
    height: 100vh;      /* 全屏高度用vh */
}

/* 不推荐 */
.not-recommended {
    font-size: 16px;    /* 字体大小用px不便于用户调整 */
}

综合示例

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>
    <style>
        /* 重置默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* 根元素样式 */
        html {
            font-size: 16px;  /* 设置rem的基准大小 */
        }
        
        /* 页面主体 */
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        /* 容器 */
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        /* 头部 */
        .header {
            background-color: #4CAF50;
            color: white;
            padding: 1.5rem;
            text-align: center;
            border-radius: 8px 8px 0 0;
        }
        
        .header h1 {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }
        
        .header p {
            opacity: 0.9;
        }
        
        /* 主内容 */
        .main {
            background-color: white;
            padding: 2rem;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .main h2 {
            color: #4CAF50;
            border-bottom: 2px solid #4CAF50;
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .main p {
            margin-bottom: 1rem;
        }
        
        /* 按钮 */
        .btn {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
        }
        
        .btn:hover {
            background-color: #45a049;
        }
        
        /* 页脚 */
        .footer {
            text-align: center;
            padding: 1rem;
            margin-top: 2rem;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>CSS入门教程</h1>
            <p>学习CSS的基础知识</p>
        </header>
        
        <main class="main">
            <h2>什么是CSS？</h2>
            <p>CSS（层叠样式表）是一种用于描述HTML文档呈现方式的样式表语言。它可以控制网页的颜色、字体、布局等视觉效果。</p>
            
            <h2>CSS的作用</h2>
            <p>通过CSS，我们可以将网页的内容（HTML）和表现（CSS）分离，使代码更加清晰、易于维护。</p>
            
            <button class="btn">开始学习</button>
        </main>
        
        <footer class="footer">
            <p>&copy; 2024 CSS教程</p>
        </footer>
    </div>
</body>
</html>

本章小结

本章我们学习了：

CSS基本概念：层叠样式表，用于描述HTML文档的呈现方式
CSS语法：选择器 + 声明块
引入CSS的三种方式：行内样式、内部样式表、外部样式表
CSS注释：使用 /* */ 编写注释
层叠规则：优先级计算和样式覆盖
CSS继承：某些属性会从父元素继承
颜色值：颜色名称、十六进制、RGB/RGBA、HSL/HSLA
CSS单位：绝对单位（px）和相对单位（rem、em、%、vw、vh）

下一章我们将学习选择器，掌握各种CSS选择器的使用方法。

入门 ​

CSS简介 ​

什么是CSS？ ​

CSS的作用 ​

CSS基本语法 ​

语法结构 ​

语法示例 ​

语法规则 ​

引入CSS的三种方式 ​

1. 行内样式（Inline Style） ​

2. 内部样式表（Internal Style Sheet） ​

3. 外部样式表（External Style Sheet） ​

link标签属性 ​

CSS注释 ​

CSS层叠规则 ​

层叠优先级 ​

优先级计算 ​

!important的使用 ​

CSS继承 ​

常见可继承属性 ​

CSS颜色值 ​

CSS单位 ​

绝对单位 ​

相对单位 ​

单位选择建议 ​

综合示例 ​

本章小结 ​

下一章 ​

入门

CSS简介

什么是CSS？

CSS的作用

CSS基本语法

语法结构

语法示例

语法规则

引入CSS的三种方式

1. 行内样式（Inline Style）

2. 内部样式表（Internal Style Sheet）

3. 外部样式表（External Style Sheet）

link标签属性

CSS注释

CSS层叠规则

层叠优先级

优先级计算

!important的使用

CSS继承

常见可继承属性

CSS颜色值

CSS单位

绝对单位

相对单位

单位选择建议

综合示例

本章小结

下一章