Cascading Style Sheets层叠样式表教程

在我们日常生活中和工作中，已经离不开电脑，但电脑中的一些系统，是一定得理解和清楚的，否则我们将无从下手，今天就给大家介绍一下CSS 教程。

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个

CSS 实例

一个HTML文档可以显示不同的样式: 查看CSS是如何工作的

样式解决了一个很大的问题

HTML 标签原本被设计为用于定义文档内容，如下实例：

Cascading Style Sheets层叠样式表教程图1

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

CSS 语法

CSS 实例

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

Cascading Style Sheets层叠样式表教程图2

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS 实例

CSS声明总是以分号(;)结束，声明总以大括号({})括起来:

Cascading Style Sheets层叠样式表教程图3

为了让CSS可读性更强，你可以每行只描述一个属性:

Cascading Style Sheets层叠样式表教程图4

CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 \"/*\" 开始，以 \"*/\" 结束，实例如下:

Cascading Style Sheets层叠样式表教程图5

CSS Id 和 Class

id 和 class 选择器

如果你要在HTML元素中设置CSS样式，你需要在元素中设置\"id\" 和 \"class\"选择器。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS 中 id 选择器以 \"#\" 来定义。

以下的样式规则应用于元素属性 id=\"para1\":

Cascading Style Sheets层叠样式表教程图6

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示，在 CSS 中，类选择器以一个点\".\"号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

Cascading Style Sheets层叠样式表教程图7

在以下实例中，所有的 p 元素使用 class=\"center\" 让该元素的文本居中:

Cascading Style Sheets层叠样式表教程图8

内容简单，今天教程小编就先写到这里，下期再继续写。