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或em为单位），auto或0
text-align	规定文本的水平对齐方式	Center（居中）、justify（两端对齐）、left（左对齐）或right（右对齐）
text-decoration	配置文本是否需要加下划线；通常应用于超链接	如果设置为"none"，那么浏览器显示的有超链接的文本就不像通常所做的那样带下划线了
text-indent	配置文本首行的缩进方式	一个数值（以px或em为单位）、auto或百分比
text-shadow	规定添加到文本的阴影效果。这是CSS3中的属性。	二到四个数值（以px或em为单位），用于指定水平偏移、纵向偏移、模糊半径、扩散距离，再标一个颜色值
text-transform	控制文本大小写	none（无，默认）、capitalize(首字母大写)、uppercase（全部大写）或lowercase（全部小写）
white-space	规定如何处理元素中的空白	normal（默认）、nowrap、pre、pre-line和pre-wrap
width	元素内容的宽度	一个数值（以px或em为单位），auto（默认）或百分比

2、为网页配色

配色的CSS语法

在CSS中有多种配置颜色的方法，语法如下：

• 颜色名称
• 十六进制颜色码
• 简写的十六进制颜色码
• 十进制颜色码（RGB三原色）
• CSS3中新引入的HSL颜色码（色相、饱和度、明度）。

代码规则如下：

CSS语法	颜色类型
p{ color: red; }	颜色名称
p{ color: #FF0000; }	十六进制颜色码
p{ color: #F00; }	简写的十六进制颜色码（一个字符代表一种原色）
p{ color: rgb(255, 0, 0); }	十进制颜色码（RGB三原色）
p{ color: hsl(0, 100%, 50%); }	HSL颜色码

3、带样式属性的内联CSS

样式属性（Style）

内联样式的使用方法是在相关标签中添加样式属性代码。样式属性的值写在样式规