[HTML/HTML5]2 CSS样式表设置

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

2.1 在HTML文件中设置样式表

当前HTML“规则”指出：HTML仅用于标识页面的内容，应该使用样式表来定义内容的呈现样式。这不仅使Web页面对于所有用户（无论采用什么浏览器、平台、操作系统和物力限制等），而且对于搜索引擎和其它类型的软件，都具有更好的可访问性和可用性。

2.1.1 定义样式

在CSS中将HTML标记称为选择器（selector）。实际上，选择器就是不带尖括号的HTML标记，比如：p。定义了选择器后，就可以定义它的属性。当为属性指定属性值时，就是为选择器创建了一个声明（declaration）。可将选择器和声明合称为一个规则集合，或规则集（ruleset）。在典型的规则集中，将声明放在一对花括号中位于选择器之后。

h2{font-family:verdana;
font-size:14pt;
color:blue;
font-style:italic;}

从上面的代码可以看到定义CSS属性的模式——在一个CSS属性名之后使用一个冒号，后跟该属性的值，属性值之后是一个分号。

2.1.2 定义属性值

与HTML中的属性类似，CSS属性也具有属性值。但是与HTML属性值不同的是，CSS属性值无须使用引号括起。

HTML中的属性：

CSS中的属性：

（1）内联样式表

（2）内部样式表/外部样式表

h2{font-family:verdana; color:blue;}

2.1.3 创建样式

可以在三个重要的位置定义Web页面的样式：

内联样式：在HTML元素中使用style属性；
内部样式：在HTML文档头部<head>区域使用<style>元素来包含CSS样式；
外部样式：在HTML文档头部<head>区域使用<link>元素引用外部CSS文件。

在单个Web文档中，既可以使用一种样式表，也可以同时使用这三种样式表。如果同时使用了多种样式表，那么层叠次序（cascading order）的规则就会发生作用：内联样式表优先于内部样式表，内部样式表优先于外部样式表。

（1）内联样式表

<h2 style="font-family:verdana; color:#003366;">Hello,World!<h2>

（2）内部样式表

<head>
<title>CSS Example</title>
<style type="text/css">
h2{font-family:verdana; color:blue;}
h3{font-family:verdana; color:blue;}
</style>
</head>

（3）外部样式表

<head>
<title>Using an External Style Sheet</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

2.2 在Web开发中引用颜色的方法

2.2.1 十六进制颜色

计算机的显示器以RGB模式来显示颜色，其中R代表Red（红色），G代表Green（绿色），B代表Blue（蓝色）。每一个字母（即R、G、B）用一个介于0~255之间的值来表示，在色谱中，0代表最暗，255代表最亮。在HTML页面中使用十六进制颜色时，需要将十进制（RGB）转化为十六进制。将红、绿、蓝色值分别转化为一个两位的十六进制值，然后将这三个十六进制值合并在一起作为单个字符串，并在开头加上一个#号。

2.2.2 RGB值和百分比

如果颜色的RGB值容易得到，那么可以使用RGB值来代替十六进制值的颜色代码。

如果没有方便的RGB值可供使用，那么也可以使用RGB值得百分比。

2.2.3 颜色名称
在不断更新每一个HTML版本中，都增加了一些额外的颜色名称，它们都具有标准的值。参考：http://www.runoob.com/tags/html-colorname.html