【前端基础】HTML + CSS + JavaScript 快速入门（二）：CSS 详解

我的主页：寻星探路
个人专栏：《JAVA（SE）----如此简单！！！》《从青铜到王者，就差这讲数据结构！！！》
《数据库那些事！！！》《JavaEE 初阶启程记：跟我走不踩坑》
《JavaEE 进阶：从架构到落地实战》《测试开发漫谈》
《测开视角・力扣算法通关》《从 0 到 1 刷力扣：算法 + 代码双提升》
《Python 全栈测试开发之路》
没有人天生就会编程，但我生来倔强！！！

寻星探路的个人简介：

【前端基础】HTML + CSS + JavaScript 快速入门（二）：CSS 详解

摘要：在掌握了 HTML 构建网页骨架之后，我们需要使用 CSS 来对网页进行美化和布局。本文将详细讲解 CSS 的基本语法、引入方式、各类选择器、常用的样式属性（字体、背景、边框等），以及核心的盒子模型和弹性布局（Flexbox）。
前置知识 ：【前端基础】HTML + CSS + JavaScript 快速入门（一）：HTML 详解

1. CSS 概述

CSS (Cascading Style Sheets)，层叠样式表。

如果说 HTML 是网页的"骨架"，那么 CSS 就是网页的"化妆师"。它的主要作用是：

美化页面：设置字体、颜色、背景、边框等。
页面布局：控制元素的位置、大小、排列方式。

HTML 专注于页面的结构（语义），而 CSS 专注于页面的表现（样式），实现了结构与表现的分离。

2. 基本语法规范

CSS 的基本语法由选择器 和声明块组成：

css 复制代码

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

选择器 (Selector) ：选中页面中的哪些标签（例如上面的 p 表示选中所有的段落标签）。
声明块 ：在 {} 内部，由一个或多个键值对组成。
格式：属性名: 属性值;
注意：冒号后面通常加一个空格，每个声明结束必须加分号 ;。

3. CSS 的引入方式

在 HTML 中使用 CSS 主要有三种方式：

3.1 内部样式表

将 CSS 代码写在 HTML 文件的 style 标签中。通常 style 标签放在 head 标签内。

html 复制代码

<head>
    <style>
        div { color: red; }
    </style>
</head>

优点：样式与结构在同一文件中，便于教学和简单测试。
缺点：分离不够彻底，不适合大型项目。

3.2 内联样式（行内样式）

直接在 HTML 标签的 style 属性中定义样式。

html 复制代码

<div style="color: green; font-size: 20px;">这是一个div</div>

缺点：优先级过高，且样式与结构混杂，无法复用，极不推荐大量使用。

3.3 外部样式表（推荐）

将 CSS 代码单独写在一个 .css 文件中，然后在 HTML 中通过 link 标签引入。

test.css:

css 复制代码

div { color: blue; }

test.html:

html 复制代码

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

优点：完全实现结构与表现分离，一个 CSS 文件可被多个 HTML 页面共用，是实际开发中最常用的方式。

4. CSS 选择器

选择器的作用就是"找标签"。

4.1 基础选择器

标签选择器：直接写标签名。

css 复制代码

p { color: red; } /* 选中所有 p 标签 */

类选择器 ：以 . 开头，通过 HTML 标签的 class 属性调用。

css 复制代码

.title { color: blue; } 
/* HTML: <div class="title">...</div> */

注意：一个标签可以有多个类名，用空格隔开，如 class="box title"。

ID 选择器 ：以 # 开头，通过 HTML 标签的 id 属性调用。

css 复制代码

#submit-btn { color: green; }
/* HTML: <div id="submit-btn">...</div> */

注意：ID 是唯一的，一个页面中同一个 ID 只能出现一次。

通配符选择器 ：使用 * 选中所有标签。通常用于清除默认样式。

css 复制代码

* { margin: 0; padding: 0; box-sizing: border-box; }

4.2 复合选择器

后代选择器 ：元素1 元素2（中间用空格）。选中元素1内部的所有元素2。

css 复制代码

ul li { color: red; } /* 选中 ul 里面的所有 li */

子选择器 ：元素1 > 元素2。选中元素1的亲儿子元素2。

css 复制代码

div > span { color: red; }

并集选择器 ：元素1, 元素2。同时选中元素1和元素2。

css 复制代码

h1, h2 { color: gray; }

伪类选择器 ：用于表示标签的某种状态。最常用的是 :hover（鼠标悬停）。

css 复制代码

a:hover { color: orange; } /* 鼠标放到链接上时变色 */

5. 常用样式属性

5.1 字体与文本

font-size: 字体大小（如 20px）。
font-family: 字体族（如 '微软雅黑'）。
font-weight: 字体粗细（bold 加粗, normal 正常, 数字 700 等）。
color: 文本颜色。
单词：red, blue
十六进制：#ff0000, #333
RGB：rgb(255, 0, 0)
text-align: 文本对齐方式 (left, center, right)。
text-decoration: 文本装饰（常用 none 去掉链接下划线）。
line-height: 行高（用于控制行间距，或实现单行文本垂直居中）。

5.2 背景

background-color: 背景颜色。
background-image: 背景图片 (url(...))。
background-repeat: 图片平铺 (no-repeat 不平铺)。
background-position: 图片位置 (center center)。
background-size: 图片大小 (cover 覆盖, contain 包含)。

6. 盒子模型 (Box Model)

HTML 中的每一个标签都可以看作是一个矩形的"盒子"。盒子模型由四个部分组成（从内到外）：

内容 (Content)：盒子里面实际装的东西（文字、图片）。
内边距 (Padding)：内容和边框之间的距离。
边框 (Border)：盒子的墙壁。
外边距 (Margin)：盒子和盒子之间的距离。

边框 (Border) 详解：

css 复制代码

border: 1px solid red; /* 粗细 样式 颜色 */
/* 也可以分开写：border-top, border-left 等 */

内边距/外边距写法：

padding: 20px; (上下左右都是 20px)
padding: 10px 20px; (上下 10px，左右 20px)
margin: 0 auto; (上下 0，左右自动 => 实现块级元素水平居中)

重要提示 ：默认情况下，设置 padding 和 border 会撑大盒子。为了避免这种情况，建议设置：
box-sizing: border-box;

这样设置后，width 就包含了 padding 和 border，盒子总宽度不会变。

7. 弹性布局 (Flexbox)

传统的布局方式（浮动、定位）比较繁琐。CSS3 引入了 Flexbox，是目前最流行的布局方式。

只要给父盒子设置 display: flex;，它就变成了弹性容器，子元素默认水平排列。

常用属性（设置在父元素上）：

justify-content：设置主轴（默认水平方向）上的排列方式。

flex-start: 靠左（默认）。
center: 居中。
flex-end: 靠右。
space-between: 两端对齐，中间留空。
space-around: 每个元素周围空间相等。

align-items：设置侧轴（默认垂直方向）上的排列方式。

center: 垂直居中。

代码示例：实现一个垂直水平居中的盒子

css 复制代码

.container {
    width: 100%;
    height: 500px;
    display: flex;       /* 开启弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}

下一篇预告 ：

页面有了结构（HTML）和样式（CSS），已经是"静态"的美图了。但如何让页面"动"起来？如何实现点击按钮提交数据？在下一篇**【JavaScript 与 jQuery 篇】**中，我们将学习前端的编程逻辑，并亲手完成一个"表白墙"项目！