CSS 学习笔记（基础部分）

CSS 是什么？

设想这样一个场景，我们要用 Word 写一篇文档。首先，打开 Word，然后输入内容，再根据需要把内容的题目居中、字体变大，最后还会调整各段的字体、大小、颜色、行间距等。修改完成后，我们会把这篇文档保存成为一个后缀名为 doc 或 docx 的文件。这个Word 文件可以说是由两大部分组成的：内容和样式。同样地，我们浏览网页所看到的 HTML 文件也是由内容和样式组成的。网页上的文字和图片是内容，文字的字体、大小、颜色等都是样式。CSS 就是控制网页样式的技术。

CSS 是 Cascading Style Sheets（层叠样式表）的缩写，是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 基本语法

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

selector {declaration1; declaration2; ... declarationN; }

选择器通常是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成，属性是希望设置的样式属性，每个属性都有一个与之对应的值且属性和值之间被冒号分隔。

selector {property: value;}

下面这行代码的作用是将 h1 元素内的文字颜色定义为蓝色，同时将字体大小设置为 12 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，blue 和 12px 是值。

h1 {color:blue; font-size:12px;}

下图展示了上面这段代码的结构：

selector.png

CSS 使用方法

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。样式表的使用方法有三种：外部样式表，内部样式表和内联样式表。

• 外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，可以仅通过更改一个文件来改变整个站点的外观。

• 内部样式表

当单个文件需要特别样式时，可以使用内部样式表。在 中通过

• 内联样式表

当特殊的样式需要应用到个别元素时，可以使用内联样式表。 使用内联样式表的方法是在相关的标签中使用样式属性，样式属性可以包含任何 CSS 属性，以下实例为如何改变段落的颜色和左外边距。

    This is a paragraph.

介绍过以上三种样式表后，可能有人会提出这样的问题：若同一个 HTML 元素被不止一个样式定义时，会优先使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 标签内部）
4. 内联样式表（在 HTML 元素内部）

因此，内联样式表（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

相关资料

1. 菜鸟教程：http://www.runoob.com/css/css-tutorial.html
2. W3School 教程：http://www.w3school.com.cn/css/index.asp