- Div+CSS网页样式与布局从入门到精通
- 刘西杰 夏晨
- 782字
- 2020-06-27 12:03:27
第3章CSS样式设计基础
CSS是为了简化Web页面的更新工作而诞生的，它的功能非常强大，可以让网页变得更加美观，维护更加方便。CSS跟HTML一样，也是一种标记语言，甚至很多属性都来源于HTML，它也需要通过浏览器解释执行。任何懂得HTML的人都可以非常容易地掌握CSS。
学习目标
初识CSS
CSS选择器
CSS属性和属性值
3.1 初识CSS
现在CSS已经被广泛应用于各种网页的制作当中。在CSS的配合下，HTML语言能够发挥出更大的效应。
3.1.1 CSS基本语法
CSS（Cascading Style Sheet，层叠样式表）是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一。
CSS的语法结构仅由三部分组成：选择符、样式属性和值。其基本语法如下。
选择符{样式属性：取值；样式属性：取值；样式属性：取值；…… }
选择符（Selector）是指这组样式编码所要针对的对象，可以是一个XHTML标签，如body、hl；也可以是定义了特定id或class的标签，如#lay选择符表示选择<Div id=lay>，即一个被指定了lay为id的对象。浏览器将对CSS选择符进行严格的解析，每一组样式均会被浏览器应用到对应的对象上。
属性（Property）是CSS样式控制的核心，对于每一个XHTML中的标签，CSS都提供了丰富的样式属性，如颜色、大小、定位、浮动方式等。
值（Value）是指属性的值。其形式有两种，一种是指定范围的值，如float属性，只可能应用left、right、none三种值；另一种为数值，如width能够使用0～9999px、或其他数学单位来指定。
在实际应用中，往往使用以下类似的应用形式。
body {background-color：red}
该形式表示选择符为body，即选择了页面中的<body>这个标签，属性为background-color，这个属性用于控制对象的背景色，而值为red。页面中的body对象的背景色通过使用这组CSS编码，被定义为了红色。
除了单个属性的定义，同样可以为一个标签定义一个甚至更多个属性定义，每个属性之间使用分号隔开。
3.1.2 添加CSS的方法
添加CSS有四种方法：链接外部样式表、内部样式表、导入外部样式表和内嵌样式，下面分别进行介绍。
1．链接外部样式表
链接外部样式表就是在网页中调用已经定义好的样式表来实现样式表的应用，它是一个单独的文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内。这种方法最适合于大型网站的CSS样式定义。举例如下。
<head>
…
<link rel=stylesheet type=text/css href=slstyle.css>
…
</head>
上面这个例子表示浏览器从slstyle.css文件中以文档格式读出定义的样式表。rel=stylesheet是指在页面中使用外部的样式表，type=text/css是指文件的类型是样式表文件，href=slstyle.css是文件所在的位置。
一个外部样式表文件可以应用于多个页面。当改变这个样式表文件时，所有页面的样式都随着改变。在制作大量相同样式页面的网站时，链接外部样式表非常有用，它不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码的操作。
2．内部样式表
这种CSS一般位于HTML文件的头部，即<head>与</head>标签内，并且以<style>开始，以</style>结束。这样，定义的样式就应用到页面中了。下面的实例就是使用<style>标记创建的内部样式表。
<head>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.style1 {
color: #fbe334;
font-size: 13px;
}
-->
</style>
</head>
3．导入外部样式表
导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import，看下面这个实例。
<head>
…
<style type=text/css>
<!—
@import slstyle.css
其他样式表的声明
➔
</style>
…
</head>
此例中@import slstyle.css表示导入slstyle.css样式表。注意在使用导入外部样式表时，外部样式表的路径、方法和链接外部样式表的方法类似，但导入外部样式表的输入方式更有优势。实质上，它是相当于存在于内部样式表中的。
4．内嵌样式
内嵌样式是混合在HTML标记里使用的，用这种方法可以很简单地对某个元素单独定义样式，主要是在body内实现。内嵌样式的使用是直接在HTML标记里添加style参数，而style参数的内容就是CSS的属性和值，在style参数后面的引号里的内容相当于在样式表大括号里的内容。
如：
<table style=color:red；margin-right：220px>
这是个表格
</p>
这种方法使用起来比较简单，显示也很直观，但无法发挥样式表的优势，因此不推荐使用。
3.1.3 设计第一个实例
以Div+CSS为主流技术的Web页面技术现在的发展正如日中天，与表格相比，Div具有加载速度快、利于搜索引擎优化的特点。本实例就以Div+CSS技术设计一个简单的网站页面，具体操作步骤如下。
（1）在站点根目录中创建名为CSS和imgs的文件夹，分别用于存放CSS文件和图像资源文件，如图3-1所示。
图3-1 创建文件夹
（2）在imgs文件夹中存放本实例要用到的图像文件banner.gif，如图3-2所示。
图3-2 图像文件banner.gif
（3）用Dreamweaver创建一个网页文件，将其命名为index.html，其中的代码如下所示。
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/
html; charset=gbk" />
<title>旅游天地</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<Div id="container">
<Div id="header_line">
<Div id="header">
<h1>可爱的小乌龟</h1>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">给我留言</a></li>
</ul>
</Div>
</Div>
<Div id="body">
<Div id="banner">
<Div id="site_discription">旅游天地</Div>
</Div>
<Div id="main">
<Div class="log">
<h3>美丽的长岛</h3>
<Div class="content">
<p> 长岛县，是山东省烟台市辖县，由32个岛屿组成，是山东省唯一的海岛县。这里海域辽阔，
周围海域一直保持着国家一类海水标准，水产资源丰富，特别是海参、鲍鱼、海胆等海珍品，在国内外享有盛誉，
是我国重要的海珍品出口基地。</p>
</Div>
<Div class="log_descr">2014-8-30 17:54</Div>
</Div>
<Div class="log">
<h3>美丽海滨城市青岛</h3>
<Div class="content">
<p>黄海之滨的明珠，万国建筑的经典，啤酒飘香的名城，对外开放的热土。而唯有来青岛了，
你才知道什么是“红瓦绿树，碧海蓝天”。夏季海水温暖，沙滩细软，无烈日高温，是旅游的黄金季节。</p>
</Div>
<Div class="log_descr">2014-10-25 10:21</Div>
</Div>
</Div>
<Div id="sidebar">
<h2>内容搜索</h2>
<input />
<button type="submit">搜索</button>
<h2>自我介绍</h2>
<p>我叫孙喜讯<br />
今年12岁<br />
现在上小学六年级<br />
我喜欢旅游，也喜欢小动物</p>
</Div>
</Div>
<Div id="footer"> Copyright © 2014 孙喜讯
<a href="#">海岛之旅</a> </Div>
</Div>
</body>
</html>
（4）在创建的名为CSS的文件夹中创建一个文本文件，将其命名为style.css。用Dreamweaver编辑style.css文件，添加如下内容。
@charset "utf-8";
/* -- Global -- */
html,body,Div{ margin:0; padding:0; }
body{ font-size:13px; font-family:"宋体", Arial;
line-height:21px; }
/* -- #container -- */
#container{ background-color:#95BA46; padding-
bottom:20px; background-position:bottom;
background-repeat:repeat-x; }
/* -- #header -- */
#header_line{ background-repeat:repeat-x; }
#header{ height:59px; width:740px; margin:auto; }
#header h1{ margin:0; color:#95BA46; font-size:
30px; padding:20px 0 0 0; float:left; }
#header ul{ list-style:inline; float:right; }
#header ul li{ display:inline; }
#header ul li a{ padding:17px 5px; color:#FFF;
font-size:17px; text-decoration:none; }
#header ul li a:hover,#header ul li a:active
{ background-color:#5f6e42; }
/* -- #body -- */
#body{ background-color:#FFF; padding:15px;
width:710px; margin:auto; }
#body:after { content: "."; display: block;
clear: both; height: 0; visibility: hidden }
/* -- #banner -- */
#banner{ width:708px; height:182px; border:solid
1px #333; background-image:url(../imgs/banner.jpg); }
#site_discription{ margin:70px 0 0 30px; font-size:14px;}
/* -- #main -- */
#main{ width:430px; float:left; padding-right:20px; }
.log h3{ border-bottom:solid 1px #95BA46; }
.log .log_descr{ text-align:right; color:#888; }
/* -- #sidebar -- */
#sidebar{ width:240px; float:right; padding-left:20px; }
#sidebar h2{ border-bottom:solid 1px #95BA46; }
/* -- #footer -- */
#footer{ width:738px; font-size:14px; color:#FFF;
background-color:#45444D; text-align:center;
margin:auto; border:#fff solid 1px; padding:2px 0; }
#footer a{ color:#FFF; background-color:#45444D;
text-decoration:none; }
（5）至此，网页的编辑工作都已完成，下面运行代码，网页效果如图3-3所示。可以看到，纯正的Div+CSS布局的效果非常漂亮，页面结构也很简单。
图3-3 网页效果
3.2 CSS选择器
一些新手对选择器一知半解，不知道在什么情况下运用什么样的选择器，这是一个让新手比较头疼的问题。准确而简洁地运用CSS选择器会达到非常好的效果。我们不必通篇给每一个元素定义类（class）或ID，通过合适的组织，可以用最简单的方法实现同样的效果。
3.2.1 CSS选择器概述
实际上，选择器是CSS知识中的重要部分之一，也是CSS的根基。利用CSS选择器能在不改动HTML结构的情况下，通过添加不同的CSS规则得到不同样式的网页。CSS3选择器在常规选择器的基础上新增了属性选择器、伪类选择器、过滤选择器，可以帮助开发人员在开发中减少对HTML类名或ID名的依赖，以及对HTML元素的结构依赖，使代码编写变得更加简单轻松。
要使某个样式应用于特定的HTML元素，首先需要找到该元素。在CSS中，执行这一任务的表现规则称为CSS选择器。它为获取目标元素之后施加样式提供了极大的灵活性。
使用不同选择器的原则如下。
第一，准确地选到要控制的标签。
第二，使用最合理优先级的选择器。
第三，HTML和CSS代码尽量简洁美观。
通常在使用CSS选择器时需要注意如下事项。
（1）最常用的选择器是类选择器。
（2）li、td、dd等经常大量连续出现，并且样式相同或者是相类似的标签，采用类选择器与标签选择器相结合的方式。
（3）极少情况下会用ID选择器，当然很多前端开发人员喜欢将header、footer、banner、content设置成ID选择器，因为相同的样式在一个页面里不可能有第二次。
3.2.2 标签选择器
顾名思义，标签选择器是直接将HTML标签作为选择器，可以是p、h1、dl、strong等HTML标签。例如P选择器，下面就是用于声明页面中所有<p>标签的样式风格。
p{
font-size:14px;
color:blue;
}
以上这段代码声明了页面中所有的<p>标签，文字大小均是14px，颜色为#蓝色。在后期维护中，如果想改变整个网站中<p>标签文字的颜色，只需要修改color属性就可以了！
一个完整的HTML页面是由很多个不同的标签组成的，而标签选择器则决定哪些标签采用相应的CSS样式。
3.2.3 类选择器
类选择器更容易理解，就是使页面中的某些标签具有相同的样式。标签选择器一旦声明，则页面中所有的该标签都会相应地产生变化，如声明了<p>标签为红色时，则页面中所有的<p>标签都将显示为红色，如果希望其中的某一个标签不是红色，而是蓝色，则仅依靠标签选择器是远远不够的，所以还需要引入类别（class）选择器。定义类型选择器时，在自定义类的名称前面要加一个“.”号。
类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范，举例如下。
<p class="one">此处为p标签内的文字</p>
例如，当页面同时出现3 个<P>标签时，如果想让它们的颜色各不相同，就可以通过设置不同的class选择器来实现。一个完整的案例如下所示。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>类选择器</title>
<style type="text/css">
.red{ color:red; font-size:18px;}
.bule{ color: #06F; font-size:30px;
.green{ color: #090; font-size:20px;}
</style>
</head>
<body>
<p class="red">类选择器1</p>
<p class="bule">类选择器2</p>
<h3 class="green">h3同样适用</h3>
</body>
</html>
其显示效果如图3-4所示。从图中可以看到两个<P>标记分别呈现出了不同的颜色和字体大小，而且任何一个class选择器都适用于所有HTML标记，只需要用HTML标记的class属性声明即可。
图3-4 类别选择器实例
在上面的例子中仔细观察还会发现，最后一行<h3>标记显示效果为粗字，这是因为在没有定义字体的粗细属性的情况下，浏览器采用默认的显示方式，<P>默认为正常粗细，<h3>默认为粗字体。
3.2.4 ID选择器
ID选择器的使用方法跟类选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更强。在HTML标记中只需要利用id属性，就可以直接调用CSS中的ID选择器，但这种选择器应该尽量少用，因为它具有一定的局限性。一个ID选择器的指定要有指示符#在名字前面。
下面举一个实际案例，其代码如下。
<!doctype html>
<html>
<head>
<title>ID选择器</title>
<style type="text/css">
<!--
#one{
font-weight:bold; /* 粗体 */
}
#two{
font-size:30px; /* 字体大小 */
color:#009900; /* 颜色 */
}
-->
</style>
</head>
<body>
<p id="one">ID选择器1</p>
<p id="two">ID选择器2</p>
<p id="two">ID选择器3</p>
<p id="one two">ID选择器3</p>
</body>
</html>
其显示效果如图3-5所示，可以看出，在很多浏览器下，ID选择器可以用于多个标记，即每个标记定义的id不只是CSS可调用，JavaScript等其他脚本语言同样也可以调用。因为这个特性，所以不要将ID选择器用于多个标记，否则会出现意想不到的错误。如果一个HTML中有两个相同的id标记，那么将会导致JavaScript在查找id时出错，例如函数getElementById()。
图3-5 ID选择器实例
正因为JavaScript等脚本语言也能调用HTML中设置的id，所以ID选择器一直被广泛地使用。网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多只能赋予一个HTML标记。
另外，从图3-5可以看到，最后一行没有任何CSS样式风格显示，这意味着ID选择器不支持像class选择器那样的多风格同时使用，类似于“id="one two"”这样的写法是完全错误的语法。
3.2.5 伪类选择器和伪元素
伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类选择器的最大作用就是可以对链接的不同状态定义不同的样式效果。伪类选择器定义的样式最常应用在定位锚标记（<a>）上，即锚的伪类选择器，它表示动态链接四种不同的状态：未访问的链接（link）、已访问的链接（visited）、激活链接（active）和鼠标停留在链接上（hover）。
伪类选择器的语法如下（以:link伪类为例）。
Selector:link{}
伪元素选择器的语法如下（以:before伪元素为例）。
Selector:before{}
其中，参数Selector表示目标元素，后面的表示伪类或伪元素。
伪类选择器和伪元素选择器可以很轻松地为特定元素添加样式，下面就来使用伪类选择器和伪元素选择器实现一个鼠标经过时改变样式的页面。
（1）新建一个HTML页面，将其命名为index.html，代码如下。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>莲花池荷花</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body><Div id="title_Div">
<h3>莲花池荷花</h3>
</Div>
<Div id="main_Div">
<p>莲花池古称西湖、太湖、南河泊，因广种莲花故称莲花池。《水经注》记载：湖东西二里，南北三里，
盖燕之旧池也。绿水澄澹，川亭远望，亦为游瞩之胜所也。可见莲花池早就是一个郊游风景区。京门古池旧貌换
新颜，曲岸垂柳、满园青翠、泱泱湖水、莲花竟放。万米莲塘北京一绝，深受广大游人喜爱。参观游览的群众络
绎不绝，古池遗址又重放光彩！
</p>
<p>
夏季荷花盛开时节，万米荷塘，让您欣赏“出淤泥而不染，濯清涟而不妖”的荷姿，荷塘边精美的汉白玉雕
像。每年的荷花节（6 月—8 月）深受广大游客的喜爱，同时吸引了广大摄影爱好者前来赏荷、拍荷，给荷花节
赋予了极强的文化气息。在荷花盛开时节，南荷北莲荟萃，盆荷碗莲斗艳，满园秀色飘香，荷气微风醉人。每值
夏季泛舟湖上，荷风袭来，荷影婆娑，将带给您人间仙境一般的美景。夏季荷花盛开时节，奉献给参观者的将是
接天莲叶无穷碧，映日荷花别样红的醉人盛境。</p>
</Div>
</body>
</html>
（2）利用伪类选择器Div:hover实现鼠标移到Div元素上面时，将改变Div的背景色和鼠标的样式，CSS代码如下。
@charset "utf-8";
body{
background-image:url(beijing.jpg);
background-repeat:no-repeat;
}
Div:hover{
background-color:#FC3;
cursor:pointer;
}
#title_Div {
margin-left:550px;
margin-top:100px;
width:100px;
}
#main_Div{
width:500px;
margin-left:350px;
margin-top:50px;
}
（3）在浏览器中打开该网页，效果如图3-6所示。当鼠标移到文字上面时，将改变文字的背景颜色，效果如图3-7所示。
图3-6 网页效果
图3-7 改变文字的背景颜色
除了伪类，CSS3还支持访问伪元素。伪元素可用于定位文档中包含的文本，但无法在文档树中定位。伪元素其实在CSS中一直存在，大家平时看到的有“:first-line”、“:first-letter”、“:before”和“:after”。CSS3中对伪元素进行了一定的调整，在以前的基础上增加了一个冒号，也就相应地变成了“::first-letter”、“::first-line”、“::before”和“::after”，另外伪元素还增加了一个“::selection”。
3.2.6 群组选择器
通常在CSS样式中有好几个地方需要使用到相同的设置时，一个一个分开写是一件累人的工作，重复性太高且显得冗长，更不好管理。在CSS中，可以把这几个相同设置的选择器合并在一起，将同样的定义应用于多个选择器，可以将选择器以逗号分隔的方式并为组。其基本语法如下。
E1,E2,E3{}
例如，页面中有table元素、Div元素和a元素，代码如下。
<table>
<tr>
<td></td>
<td class="td1"></td>
<td></td>
</tr>
</table>
<Div><a href="#">植物园 </a></Div>
将class属性值为"td1"的td元素和<Div>标签中包含的a元素的字体大小设置为16px，CSS代码如下。
.td1,Div a{ font-size:16px;}
使用群组选择器可以使CSS样式变得比较简洁，将来又好管理和方便修改，这大大地提高了编码效率，同
时也减少了CSS文件的体积。
下面的这个例子，介绍如何将多个不同的元素设置为统一样式。
（1）新建一个HTML页面，页面中有一个表格，显示了旅游景点的相关信息，代码如下所示。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旅游景区</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<table width="528" border="1" cellpadding="5" cellspacing="0">
<tr>
<td width="247" align="center" bgcolor="#FF9933"><strong>地区</strong></td>
<td width="275" align="center" bgcolor="#FF9933"><strong> 著 名 景 点
</strong></td>
</tr>
<tr>
<td align="center">北京</td>
<td align="center">故宫、长城</td>
</tr>
<tr>
<td align="center">上海</td>
<td align="center">世博会、外滩</td>
</tr>
<tr>
<td align="center">广东</td>
<td align="center">深圳欢乐谷</td>
</tr>
<tr>
<td align="center">山东</td>
<td align="center">泰山、孔府</td>
</tr>
<tr>
<td align="center">天津</td>
<td align="center">盘山</td>
</tr>
<tr>
<td align="center">陕西</td>
<td align="center"><label for="textfield">请输入:</label>
<input type="text" name="textfield" id="textfield"></td>
</tr>
</table>
</body>
</html>
（2）设置<td>标签、<a>标签和<input>标签的字体颜色和边框样式等，CSS代码如下。
td,td a,input{ color:#390; font-size:16px;
border:#F30 solid 2px;}
（3）在浏览器中打开该网页，效果如图3-8所示。
图3-8 将不同的元素设置为统一样式
3.2.7 相邻选择器
相邻选择器（E + F）可以选择紧接在另一个元素后的元素，它们具有一个相同的父元素。换句话说，E和F是同辈元素，F元素在E元素后面，并且相邻，这样就可以使用相邻选择器来选择F元素。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>使用CSS3选择器</title>
<style type="text/css">
*{margin: 0;padding:0;}
body {width: 400px;margin: 0 auto;}
Div{margin:10px;padding:·0px;border: 1px solid #F60;}
body > Div {background: #090;}
.active + Div {background:#F93;}
</style>
</head>
<body>
<Div class="active">1</Div>
<Div>2</Div>
<Div>3</Div>
<Div>4</Div>
<Div>5</Div>
</body>
</html>
此时，第二个Div的背景色将变成“F93”橙色，如图3-9所示。
图3-9 使用相邻选择器设置颜色
3.2.8 通用选择器
通用选择器（*）用来选择所有元素，当然也可以选择某个元素下的所有元素。如：
*{margin: 0;padding:0}
上面一行代码大家在样式文件中经常看到，表示所有元素的margin和padding都设置为0。为什么要这么用呢？因为每种浏览器都自带有CSS文件，如果一个页面在浏览器加载页面后，发现没有CSS文件，那么浏览器就会自动调用它本身自带的CSS文件，但是不同的浏览器自带的CSS文件又都不一样，对不同标签定义的样式不一样，如果我们想让页面能够在不同的浏览器显示出来的效果都是一样的，那么就需要对HTML标签进行重置，也就是上面的代码了。
这看起来像是一个通配符，而且在某种情况下确实是，因为可以用它选择一大堆元素而无需给它们命名。下面是一个实例，代码如下。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通用选择器</title>
<style type="text/css">
<!--Div * {border: 1px solid #060;}-->
</style>
</head>
<body><Div>
<h1>您好</h1>
<p>这是一个<em>通用选择器的用法</em></p>
<ol>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ol>
</Div>
</body>
</html>
使用Div * {border: 1px solid #060;} 来定义Div中的全部元素的样式，结果跟下面写的代码是一样的，效果如图3-10所示。
图3-10 使用通用选择器设置样式
Div h1, Div p, Div em, Div ol, Div li {border: 1px solid #060;}
3.3 CSS属性和属性值
组成CSS属性的一些元素（例如：em、auto、red等）可以增强样式表的功能。这些特性可以使我们使用不同的计量单位，引用不同的颜色，让我们通过CSS直接在网页中插入内容、引用外部文件等。
3.3.1 CSS属性
CSS的属性都定义在CSS的声明块中，每个CSS属性都定义了一系列的关键信息，如表3-1所示。
表3-1 CSS属性
CSS中有些属性属于缩写属性，即允许使用一个属性设置多个属性值。
例如，background属性是缩写属性，它可以一次设置background-color、background-image、background-repeat、background-attachment、background-position的属性值。在缩写属性中如果有一些值被省略，那么被省略的属性就被赋予其初始值。
Div
{
background-color:red;
background-image:none;
background-repeat:repeat;
background-repeat:0% 0%;
background-attachment:scroll;
}
等价于
Div
{
background:red;
}
示例中background-image、background-repeat、background-attachment、background-position四个属性设置的值都是其初始值，因此可以省略。
3.3.2 CSS单位
CSS中的单位如表3-2所示。
表3-2 CSS单位
3.3.3 设置颜色
1．CSS预定义颜色表示法
CSS预定义颜色表示法就是使用颜色的英文来表示。
color:red;
color:green;
color:blue;
red、green、blue都是CSS关键词。
2．RGB颜色表示法
color:rgb(255,0,0);
color:rgb(0,255,0);
color:rgb(0,0,255);
RGB颜色表示法就是红（R:red）、绿（G:green）、蓝（B:blue）三原色混合后呈现出的颜色，其中每种颜色的取值为0~255。
3．RGB百分比颜色表示法
color:rgb(100%, 0%, 0%);
color:rgb(0%, 100%, 0%);
color:rgb(0%, 0%, 100%);
RGB百分比颜色表示法就是利用百分比来表示RGB颜色。
4．十六进制颜色表示法
color:#ff0000;
color:#00ff00;
color:#1199ff;
十六进制颜色表示法就是使用三对十六进制数分别表示RGB中的三原色，像上面例子中的最后一个color:#1199ff；其中的11代表R的颜色（十六进制的11就等于十进制中的17），其中的99代表G的颜色（十六进制的99就等于十进制中的153），其中的ff代表B的颜色（十六进制的ff就等于十进制中的255）。#1199ff;等价于rgb（17,153,255）。
5．RGBA颜色
RGBA颜色值支持的浏览器：IE9+、Firefox 3+、Chrome、Safari以及Opera 10+。
RGBA颜色值是RGB颜色值的扩展，带有一个alpha通道——它规定了对象的不透明度。
RGBA颜色值是这样规定的：rgba（red, green, blue, alpha）。alpha参数是介于0.0（完全透明）与1.0（完全不透明）的数字。
实例：
p
{background-color:rgba(255,0,0,0.5);}
6．HSL颜色
HSL颜色值支持的浏览器：IE9+、Firefox、Chrome、Safari以及Opera 10+。
HSL指的是hue（色调）、saturation（饱和度）、lightness（亮度），表示颜色柱面坐标表示法。
HSL颜色值是这样规定的：hsl（hue, saturation, lightness）。
hue是色盘上的度数（从0到360），0（或360）是红色，120是绿色，240是蓝色。saturation是百分比值，0%意味着灰色，而100%是全彩。lightness同样是百分比值，0%是黑色，100%是白色。
实例：
p
{
background-color:hsl(120,65%,75%);
}
7．HSLA颜色
HSLA颜色值支持的浏览器：IE9+、Firefox 3+、Chrome、Safari以及Opera 10+。
HSLA颜色值是HSL颜色值的扩展，带有一个alpha通道——它规定了对象的不透明度。
HSLA颜色值是这样规定的：hsla（hue, saturation, lightness, alpha），其中的alpha参数定义不透明度。alpha参数是介于0.0（完全透明）与1.0（完全不透明）的数字。
实例：
p
{
background-color:hsla(120,65%,75%,0.3);
}
下面通过一个实例讲述CSS颜色的设置，效果如图3-11所示。
图3-11 CSS颜色的设置
<!DOCTYPE html>
<html>
<body>
<p style="background-color:#FFFF00">
使用十六进制值设置的颜色
</p>
<p style="background-color:rgb(255,255,0)">
使用rgb值设置的颜色
</p>
<p style="background-color:yellow">
使用颜色名设置的颜色
</p>
</body>
</html>