02HTML5学习之用层叠样式表CSS配置颜色于文本

1、层叠样式表概览

CSS是一种灵活的、交互式的、基于标准的语言，由W3C发布。

层叠样式表的优点

• 能更好地控制字体和页面布局。这些特性包括字号、行间距、字符间距、缩进、边距和元素排列等。
• 样式与结构分离。页面上的文本与颜色的格式可以单独配置与存储，从而使body部份独立开来。
• 样式可以存储。我们可以将样式单独保存为一个文件，然后在网页上引用即可。修改样式时，HTML保持不变。这就意味着，如果你的客户打算将若干网页的背景颜色从红色改为白色，你只需要修改包含样式的一个文件即可，而不用挨个去改每一张网页文档了。
• 文档可以变得更小。格式部分从文档中剥离出来了，因而实际的文档应该能变小。
• 维护更方便。同样的道理，如果要修改样式，只需单独修改样式表。

配置层叠样式表

使用CSS技术的方法有四种：内联、嵌入、外部以及导入。

• 内联样式：代码写在网页的body部份，作为HTML标签的属性。因此样式的作用范围仅限于包含该属性的特定元素。
• 嵌入样式（也称作内部样式）：在网页的head部分定义样式。这些样式说明对整张网页文档起作用。
• 外部样式：样式写在独立的一个文本文件中。在写网页时，通过head部分配置链接元素与外部样式文本文件产生关联。
• 导入样式：与外部样式类似，样式也是写在外部文本文件中，网页中进行引用。通过使用@import指令将外部样式导入为嵌入样式，也可以导入到其它的外部样式表中。

样式选择器与声明

样式表由样式规则组成，这些规则说明了所应用的样式。每一个规则由两部分组成，选择器与声明。

• CSS样式规则选择器。选择器可以是一个HTML元素的名称、一个类名或一个id名称。
• CSS样式规则声明。声明指出你所设置的CSS属性以及分配给该属性的值。

背景颜色属性

CSS中的background-color属性用于设置某个元素的背景颜色。请注意，声明是用大括号括起来的，而声明属性与声明值之间则用冒号分隔。示例如下：

body {
   background-color: yellow}

颜色属性

CSS中的颜色属性(color)用于设置某个元素的文本颜色（前景）。示例如下：

body {
    color: blue }

配置背景颜色与文本颜色

如果要用一个选择器来配置多个属性，我们可以用分号(;)将各项属性分隔开来：

body {
    color: blue; background-color: yellow; }

各属性项之间的空格是可选的。结尾处的分号也是可选的，但如果之后还需要增加另外的样式规则，保留末尾的分号还是有必要的。

CSS属性介绍

属性名称	说明	属性值
background-color	某个元素的背景色	任意有效的颜色
color	某个元素的前景（文本）色	任意有效的颜色
font-family	某个字体或字体系列的名称	任意有效的字体或字体系列，如serif、sansserif、fantasy、monospace或cursive
font-size	字符大小	有多种变化：数字值，以pt为单位（磅），或者以px为单位（像素），或者以em为单位（对应于当前字体中大写的M所占的宽度）；百分比数值；文本值，xx-small、x-small、small、medium、large、x-large以及xx-large
font-style	字符样式	Normal、italic或oblique
font-weight	规定字体的粗细	有多种变化：文本值（normal、bold、bolder以及lighter）、数值（100、200、300、400至900）
line-height	设置行高	通常也以百分比数值来呈现，例如200%对应的是两倍的间距
margin	简写属性，用于配置某个元素的外边距属性。	一个数值（以px或em为单位），例如body {margin: 10px}将页面边距设置为10像素。在消除边距时不要加上px或em单位，body{margin:0}即为正确的写法
margin-left	配置元素左外边距值	一个数值（以px或em为单位），auto或0
margin-right	配置元素的右外边距	一个数值（以px