前端HTML编程3：初识CSS

[CSS3 入门笔记 | 前端学习记录](#CSS3 入门笔记 | 前端学习记录)

前言

[一、什么是 CSS？](#一、什么是 CSS？)

[二、CSS 的三种引入方式](#二、CSS 的三种引入方式)

[2.1 行内样式](#2.1 行内样式)

[2.2 内部样式](#2.2 内部样式)

[2.3 外部样式（开发最常用）](#2.3 外部样式（开发最常用）)

[HTML 文件](#HTML 文件)

[index.css 文件](#index.css 文件)

[2.4 三种方式对比](#2.4 三种方式对比)

优先级规则

[三、CSS 基本语法](#三、CSS 基本语法)

语法规范

[1. 属性后面加分号](#1. 属性后面加分号)

[2. 每个属性单独换行](#2. 每个属性单独换行)

[3. 属性和值之间保留空格](#3. 属性和值之间保留空格)

[四、id 与 class 命名规范](#四、id 与 class 命名规范)

[4.1 id](#4.1 id)

[4.2 class](#4.2 class)

[4.3 命名建议](#4.3 命名建议)

五、基础选择器

选择器练习代码

[六、CSS 选择器优先级](#六、CSS 选择器优先级)

[6.1 优先级顺序](#6.1 优先级顺序)

[6.2 规则说明](#6.2 规则说明)

[1. 先比较级别](#1. 先比较级别)

[2. 同级别比较数量](#2. 同级别比较数量)

[3. 完全相同则后写覆盖前写](#3. 完全相同则后写覆盖前写)

优先级练习代码

七、常用文本样式

[7.1 字体相关属性](#7.1 字体相关属性)

[7.2 文本相关属性](#7.2 文本相关属性)

文本样式练习代码

八、学习建议

建议学习方式

[1. 示例代码一定要自己敲](#1. 示例代码一定要自己敲)

[2. 多改参数观察效果](#2. 多改参数观察效果)

[3. 结合 HTML 做小项目](#3. 结合 HTML 做小项目)

总结

CSS3 入门笔记 | 前端学习记录

作者：燐妤

来源：CSDN

原文链接：CSDN 原文

前言

五一假期没有出去旅游，正好趁着这段时间把之前落下的前端基础重新补了一遍。

前面已经整理过 HTML5 的基础内容，HTML 更像是网页的"骨架"，负责页面结构；而 CSS 则更像"装修"，负责页面的样式和布局。网页里的字体、颜色、边距、动画、排版这些效果，基本都离不开 CSS。

前端开发里，HTML 负责结构，CSS 负责样式，JavaScript 负责交互，三者配合才能组成一个完整网页。

这篇文章主要整理 CSS 的基础知识以及一些常见写法，适合刚接触前端的同学学习。

一、什么是 CSS？

CSS 全称 Cascading Style Sheets ，中文叫做 层叠样式表。

它的主要作用是给网页设置样式，例如：

修改字体颜色、大小
设置背景颜色和图片
调整页面布局
控制元素位置
设置边距、间距、对齐方式等

简单来说：

HTML 负责"搭结构"，CSS 负责"做样式"。

CSS 最大的优势就是：

结构与样式分离
方便统一修改
代码复用性高
页面更容易维护

二、CSS 的三种引入方式

CSS 常见有三种写法：

行内样式
内部样式
外部样式

2.1 行内样式

直接写在标签内部，通过 style 属性设置。

html 复制代码

<p style="color: red;">这是一段文字</p>

特点：

只对当前标签生效
优先级较高
不适合大量使用
后期维护比较麻烦

2.2 内部样式

写在 HTML 页面中的 <style> 标签里，一般放在 <head> 中。

html 复制代码

<head>
    <style>
        p {
            color: red;
            font-size: 20px;
        }
    </style>
</head>

特点：

当前页面有效
适合单页面练习
能实现部分样式分离

2.3 外部样式（开发最常用）

把 CSS 单独写到 .css 文件中，再通过 link 引入。

HTML 文件

html 复制代码

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

index.css 文件

css 复制代码

p {
    color: red;
    font-size: 20px;
}

特点：

真正实现结构与样式分离
可重复使用
更方便维护
实际开发中最常用

2.4 三种方式对比

样式类型	优点	缺点
行内样式	编写方便，优先级高	不方便维护，无法复用
内部样式	适合单页面练习	无法跨页面复用
外部样式	可复用，便于维护	小项目引入稍麻烦

优先级规则

同权重情况下：

复制代码

行内样式 > 内部样式 > 外部样式

三、CSS 基本语法

CSS 的语法格式比较固定：

复制代码

选择器 {
    属性: 值;
}

例如：

css 复制代码

p {
    color: red;
    font-size: 20px;
}

语法规范

建议养成以下习惯：

1. 属性后面加分号

复制代码

color: red;

2. 每个属性单独换行

这样更方便阅读。

3. 属性和值之间保留空格

四、id 与 class 命名规范

在写 CSS 之前，必须先理解 id 和 class。

4.1 id

特点：

一个页面中通常唯一
一个标签只能有一个 id
常用于 JavaScript 获取元素

示例：

html 复制代码

<div id="header"></div>

4.2 class

特点：

可重复使用
一个标签可以有多个 class
多个标签可以共用同一个 class

示例：

html 复制代码

<div class="box"></div>

4.3 命名建议

推荐规范：

使用小写字母
多个单词使用 -
名字见名知意

五、基础选择器

CSS 中，选择器用于"选中元素"。

常见的基础选择器如下：

选择器	示例
标签选择器	`p`
class 选择器	`.nav`
id 选择器	`#header`
后代选择器	`.box p`
通配符选择器	`*`

选择器练习代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>基本选择器练习</title>

    <style>
        /* 标签选择器 */
        li {
            color: #333;
        }

        /* class 选择器 */
        .active {
            color: red;
        }

        /* id 选择器 */
        #special {
            color: blue;
        }

        /* 通配符选择器 */
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <ol>
        <li>张三</li>
        <li class="active">李四</li>
        <li id="special">王五</li>
    </ol>

</body>
</html>

六、CSS 选择器优先级

当多个选择器同时作用于同一个元素时，会按照优先级决定最终样式。

6.1 优先级顺序

复制代码

!important
>
行内样式
>
id 选择器
>
class / 属性 / 伪类选择器
>
标签选择器
>
通配符选择器
>
继承样式

6.2 规则说明

1. 先比较级别

谁级别高，谁生效。

2. 同级别比较数量

选择器数量越多，优先级越高。

3. 完全相同则后写覆盖前写

后面的样式会覆盖前面的样式。

优先级练习代码

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>优先级练习</title>

    <!-- 外部样式 -->
    <link rel="stylesheet" href="css/index.css">

    <!-- 内部样式 -->
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

<body>

    <!-- 行内样式优先级最高 -->
    <h1 style="color: orange;">
        Hello CSS
    </h1>

    <h1>
        我也是 h1 标签
    </h1>

</body>
</html>

七、常用文本样式

7.1 字体相关属性

属性	作用
font-size	字体大小
font-weight	字体粗细
font-style	字体风格
font-family	字体类型

7.2 文本相关属性

属性	作用
color	字体颜色
text-align	水平对齐
text-indent	首行缩进
line-height	行高
text-decoration	文本修饰

文本样式练习代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本样式练习</title>

    <style>

        h1 {
            text-align: center;
            color: #2f9b57;
        }

        .content {
            text-indent: 2em;
            line-height: 30px;
        }

        .delete {
            text-decoration: line-through;
        }

        a {
            text-decoration: none;
        }

    </style>
</head>

<body>

    <h1>新闻资讯</h1>

    <p class="content delete">
        4月8日，联合国秘书长古特雷斯谴责以色列对黎巴嫩全境发动的大规模空袭，
        袭击造成大量平民伤亡，并破坏民用基础设施。
    </p>

    <p class="content">
        古特雷斯强调必须遵守国际人道法，
        呼吁各方立即停火并执行联合国相关决议。
    </p>

    <a href="#">
        点击进入百度
    </a>

</body>
</html>

八、学习建议

CSS 入门并不难，核心就是：

选择元素，然后给元素设置样式。

真正难的是：

布局思维
页面结构拆分
样式规范
响应式设计

这些都需要不断练习。

建议学习方式

1. 示例代码一定要自己敲

只看不练，记忆会很快遗忘。

2. 多改参数观察效果

比如：

改字体大小
改颜色
改边距
改布局方式

这样学习效率会高很多。

3. 结合 HTML 做小项目

可以尝试：

登录页
新闻页面
个人主页
商品列表页

边做边学效果最好。

总结

CSS 是前端开发中非常重要的一部分。

前期学习时不用急着记大量属性，更重要的是：

理解选择器
理解盒子模型
理解布局思路
多练习页面效果

把基础打牢，后面学习 Flex、Grid、动画、响应式布局时会轻松很多。

学习不是三天打鱼两天晒网，而是持之以恒，要保持恒心，遇到再大的困难也要咬牙坚持，胜利的曙光终将属于自己

每日励志文案：

生命没有败笔，笔笔都是天意