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 使用方法
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。样式表的使用方法有三种：外部样式表，内部样式表和内联样式表。
- 外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，可以仅通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 内部样式表
当单个文件需要特别样式时，可以使用内部样式表。在 <head> 中通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {
background-color: #FF0000;
}
p {
margin-left: 20px;
}
</style>
</head>
- 内联样式表
当特殊的样式需要应用到个别元素时，可以使用内联样式表。 使用内联样式表的方法是在相关的标签中使用样式属性，样式属性可以包含任何 CSS 属性，以下实例为如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px;">
This is a paragraph.
</p>
介绍过以上三种样式表后，可能有人会提出这样的问题：若同一个 HTML 元素被不止一个样式定义时，会优先使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式表（在 HTML 元素内部）
因此，内联样式表（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
网友评论