CSS 基础简介

本篇将介绍 CSS 入门知识。

会解答像这样的问题：怎样将文本设置为红色？怎样将内容显示在屏幕的特定位置？怎样用背景图片或颜色来装饰网页？还有一些高级的 CSS 特性，比如动画和响应式设计。

CSS 是什么

Cascading Style Sheets（层叠样式表）是一种样式表语言，和 HTML 类似，CSS 不是编程语言。它也不是标记语言，而是一门样式表语言。

用于描述 HTML 文档的外观和格式。它允许开发者控制网页的布局、颜色、字体等视觉效果。

CSS 与 HTML 和 JavaScript 一起构成了现代网页开发的三大支柱。

CSS 如何起作用

CSS 用于选择性地为 HTML 元素添加样式。所以就引出了选择器和样式的概念。

假设您有以下这段 HTML 代码：

已复制!

Hello, world!

您可以使用 CSS 选择器来选择该段落元素，并为其添加样式：

已复制!p {

color: blue;

font-size: 20px;

}

CSSLines: 4UTF-8

常见的选择器就是元素选择器，可以使用它来选择所有的某个元素。还可以使用类选择器和 ID 选择器来选择特定的元素。

样式就是一组声明块，每个声明由属性和属性值组成。属性是您想要设置的样式，属性值是您想要应用的样式。

纯 CSS 可以做到什么效果

单纯使用 CSS 就可以实现很多效果，比如：

颜色和背景

字体和文本

布局

动画

响应式设计

交互

CSS 资源网站

https://navnav.co

https://uiverse.io/

CSS 规则集详解

CSS 规则集是 CSS 的基本组成部分。它由选择器和声明块组成。

整个结构称为规则集（规则集通常简称为规则），注意各个部分的名称：

名称描述选择器（Selector）HTML 元素名位于规则集的开头。它定义了需要添加样式的元素（本例中就是

元素）。要给不同的元素添加样式，只需要更改选择器。声明（Declaration）它是一条单独的规则（如 color: red;）。用来指定为元素的哪个属性添加样式。属性（Properties）它是为 HTML 元素添加样式的方式（本例中 color 就是

元素的属性）。在 CSS 中，你可以选择要在规则中影响的属性。属性值（Property value）位于属性的右边，冒号后面即属性值。它从指定属性的可选值中选择一个值（例如，我们除了 red 之外还有很多属性值可以用于 color）。

还需要注意一些语法规则：

除了选择器部分，每个规则集都应该包含在成对的大括号里（）。

在每个声明里要用冒号（:）将属性与属性值分隔开。

在每个规则集里要用分号（;）将各个声明分隔开。

不同的选择器

在 CSS 中有 5 种常见的选择器

元素选择器（也称作标签或类型选择器）

选择的内容示例结果所有指定类型的 HTML 元素p {color:red;}所有的段落文字变成红色

ID 选择器

选择的内容示例结果具有特定 ID 的元素#my-id {color:red;}

或 文字变成红色

和 文字变成红色