CSS基础与选择器

cheniy2025/9/17大约 8 分钟

CSS基础与选择器

学习目标

理解CSS的基本概念和作用
掌握CSS的三种引入方式
熟练使用各种CSS选择器
了解选择器的优先级规则

CSS简介

什么是CSS

CSS（Cascading Style Sheets，层叠样式表）是一种用来描述HTML或XML文档样式的样式表语言。CSS描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

CSS的作用

美化网页：控制网页的颜色、字体、布局等视觉效果
分离内容与样式：实现HTML结构与CSS样式的分离
提高开发效率：一个CSS文件可以控制多个网页的样式
便于维护：修改样式时只需要修改CSS文件

CSS语法

CSS规则由两个主要的部分构成：选择器和一条或多条声明。

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

/* 示例 */
h1 {
    color: red;           /* 文字颜色为红色 */
    font-size: 24px;      /* 字体大小为24像素 */
    text-align: center;   /* 文字居中对齐 */
}

注意事项

每个声明都必须以分号结尾
属性名和属性值之间用冒号分隔
多个声明之间用分号分隔
CSS不区分大小写，但建议使用小写

CSS引入方式

1. 内联样式（行内样式）

直接在HTML元素的style属性中编写CSS代码。

<!-- 内联样式示例 -->
<p style="color: blue; font-size: 16px;">这是一段蓝色的文字</p>
<div style="background-color: yellow; padding: 10px;">这是一个黄色背景的div</div>

特点：

优先级最高
只能作用于当前元素
不利于代码维护
适合临时调试或特殊情况

2. 内部样式表

在HTML文档的<head>部分使用<style>标签定义CSS样式。

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 内部样式表 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        
        .highlight {
            color: red;
            font-weight: bold;
        }
        
        #header {
            background-color: #333;
            color: white;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="header">网站头部</div>
    <p class="highlight">重要提示</p>
</body>
</html>

特点：

只能作用于当前HTML文档
样式与结构相对分离
适合单页面应用

3. 外部样式表

将CSS代码保存在独立的.css文件中，通过<link>标签引入。

style.css

/* 外部样式表文件 style.css */
body {
    margin: 0;
    padding: 0;
    font-family: 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #0056b3;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>外部样式表示例</title>
    <!-- 引入外部样式表 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>欢迎来到我的网站</h1>
        <p>这是使用外部样式表的示例页面。</p>
        <a href="#" class="btn">点击按钮</a>
    </div>
</body>
</html>

特点：

完全分离HTML结构和CSS样式
可以被多个HTML文档共享
便于维护和更新
减少代码重复
推荐使用的方式

CSS选择器

选择器用于选择需要添加样式的HTML元素。

1. 全局选择器

使用*选择页面中的所有元素。

/* 全局选择器 - 选择所有元素 */
* {
    margin: 0;           /* 清除所有元素的外边距 */
    padding: 0;          /* 清除所有元素的内边距 */
    box-sizing: border-box;  /* 设置盒模型为border-box */
}

使用场景

通常用于CSS重置，清除浏览器默认样式。

2. 元素选择器（标签选择器）

直接使用HTML标签名作为选择器。

/* 元素选择器示例 */
h1 {
    color: #333;
    font-size: 2em;
    margin-bottom: 20px;
}

p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 15px;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

3. 类选择器

使用.加类名来选择具有特定class属性的元素。

CSS

/* 类选择器示例 */
.header {
    background-color: #f8f9fa;
    padding: 20px;
    border-bottom: 1px solid #dee2e6;
}

.nav-item {
    display: inline-block;
    margin-right: 20px;
}

.btn-primary {
    background-color: #007bff;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #0056b3;
}

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

.text-red {
    color: #dc3545;
}

HTML

<!-- 类选择器对应的HTML -->
<header class="header">
    <nav>
        <span class="nav-item">首页</span>
        <span class="nav-item">关于我们</span>
        <span class="nav-item">联系我们</span>
    </nav>
</header>

<div class="text-center">
    <h2>欢迎访问</h2>
    <p class="text-red">重要通知</p>
    <button class="btn-primary">立即注册</button>
</div>

4. ID选择器

使用#加ID名来选择具有特定id属性的元素。

CSS

/* ID选择器示例 */
#header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px 0;
    text-align: center;
}

#navigation {
    background-color: #343a40;
    padding: 10px 0;
}

#main-content {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

#footer {
    background-color: #f8f9fa;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid #dee2e6;
}

HTML

<!-- ID选择器对应的HTML -->
<div id="header">
    <h1>我的个人网站</h1>
    <p>欢迎来到我的个人主页</p>
</div>

<nav id="navigation">
    <!-- 导航内容 -->
</nav>

<main id="main-content">
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
</main>

<footer id="footer">
    <p>&copy; 2024 我的网站. 保留所有权利.</p>
</footer>

ID选择器注意事项

每个页面中ID必须是唯一的
ID选择器优先级高于类选择器
建议主要用于页面布局的主要区域

5. 合并选择器

当多个选择器需要应用相同的样式时，可以使用逗号分隔合并选择器。

/* 合并选择器示例 */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Georgia', serif;
    font-weight: bold;
    margin-bottom: 15px;
    color: #2c3e50;
}

.btn-primary, .btn-secondary, .btn-success {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

input[type="text"], input[type="email"], input[type="password"], textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

选择器优先级

当多个CSS规则应用到同一个元素时，浏览器需要确定哪个规则优先级更高。

优先级计算规则

优先级从高到低的顺序：

内联样式 - 优先级值：1000
ID选择器 - 优先级值：100
类选择器、属性选择器、伪类 - 优先级值：10
元素选择器、伪元素 - 优先级值：1
全局选择器 - 优先级值：0

优先级示例

点击查看优先级计算示例

/* 优先级计算示例 */

/* 优先级: 1 (元素选择器) */
p {
    color: black;
}

/* 优先级: 10 (类选择器) */
.text {
    color: blue;
}

/* 优先级: 100 (ID选择器) */
#content {
    color: green;
}

/* 优先级: 11 (类选择器 + 元素选择器) */
p.text {
    color: red;
}

/* 优先级: 101 (ID选择器 + 元素选择器) */
#content p {
    color: yellow;
}

/* 优先级: 110 (ID选择器 + 类选择器) */
#content .text {
    color: purple;
}

/* 优先级: 111 (ID选择器 + 类选择器 + 元素选择器) */
#content p.text {
    color: orange;
}

<!-- 对应的HTML结构 -->
<div id="content">
    <p class="text">这段文字的颜色是什么？</p>
</div>

<!-- 
根据优先级计算，最终文字颜色为 orange
因为 #content p.text 的优先级最高 (111)
-->

!important 声明

使用!important可以提升样式的优先级，但应该谨慎使用。

/* !important 示例 */
.text {
    color: blue !important;  /* 强制优先级最高 */
}

#content {
    color: red;  /* 即使ID选择器优先级高，也会被!important覆盖 */
}

使用 !important 的注意事项

尽量避免使用!important
会使CSS难以维护和调试
只在必要时使用，如覆盖第三方库样式
如果必须使用，请添加详细注释说明原因

最佳实践

1. 选择器命名规范

/* 推荐的命名方式 */
.header-nav { }           /* 使用连字符分隔 */
.btn-primary { }          /* 语义化命名 */
.user-profile-card { }    /* 描述性命名 */

/* 避免的命名方式 */
.red { }                  /* 避免样式相关命名 */
.div1 { }                 /* 避免无意义命名 */
.headerNav { }            /* 避免驼峰命名 */

2. 选择器性能优化

/* 高效的选择器 */
.nav-item { }             /* 类选择器，性能好 */
#header { }               /* ID选择器，性能最好 */

/* 低效的选择器 */
* { }                     /* 全局选择器，性能差 */
div div div p { }         /* 过深的嵌套，性能差 */
.nav .item .link { }      /* 避免过多层级 */

3. 代码组织建议

/* 推荐的CSS代码组织结构 */

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

/* 2. 基础样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* 3. 布局样式 */
.container { }
.header { }
.main { }
.footer { }

/* 4. 组件样式 */
.btn { }
.card { }
.modal { }

/* 5. 工具类样式 */
.text-center { }
.text-left { }
.text-right { }

总结

本章我们学习了CSS的基础概念、三种引入方式和各种选择器的使用方法。掌握这些基础知识是学习CSS的重要第一步。在下一章中，我们将学习CSS的文本、背景和表格样式。