2.1 CSS语法基础
CSS（Cascading Style Sheets，层叠样式表）是一种用来为结构化文档添加样式的计算机语言，由W3C定义和维护。XHTML仅仅将网页要显示的内容做了安排，但页面中各项内容的颜色、大小、排版效果等需要使用CSS来完成。
CSS在完成页面效果修饰时可以做到与页面内容完全分离，这样就给网页设计带来了很多的好处，比如：增强了XHTML文件的可读性、简化了XHTML文件的结构、集中了修饰信息等。掌握CSS基本语法并做到熟练运用CSS进行页面修饰，对进行网页开发的人员来说是非常重要的。
2.1.1 CSS的引入
CSS代码在与XHTML文档结合时允许以多种方式来实现样式规定。
（1）可以在XHTML文件中引入一个外部独立的CSS文件，即外部样式表，其优先级别最低；
（2）可以将CSS代码嵌入到XHTML文件头部（<head>）信息内，即内部样式表，其优先级别居中；
（3）可以将CSS代码作为XHTML标签属性进行结合，即内联样式表，其优先级别最高。
1. 外部样式表
外部样式表，是推荐使用的一种引入CSS样式的常用方法。这种方法的好处在于样式与内容完全分离，使XHTML文件结构更简洁、易读。因为CSS文件独立存在，所以CSS代码的效果如果遇到有后面两种方式引入相同CSS修饰时会被覆盖。
其语法如下。
2-1.html
<html> <head> <title>外部样式表语法</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>外部样式表独立存在。</p> </body> </html>
“style.css”即为外部CSS文件名，注意路径的写法。
2. 内部样式表
内部样式表，是一种书写在<head></head>标签内部的CSS代码形式。这种方法使得CSS代码比较集中，XHTML标签与CSS分离，易读性好，但会增加整个XHTML文档的长度。
其语法如下。
2-2.html
<html>
<head>
<title>内部样式表语法</title>
<style type="text/CSS">
*{
margin:0;
padding:0;
}
body{
font-size:12px;
font-color:red;
}
…
</style>
</head>
<body>
<p>内部样式表与标签分离</p>
</body>
</html>
3. 内联样式
内联样式表，是一种将CSS代码作为标签属性结合在标签内部的形式。这种方法使得CSS代码与XHTML标签距离更近，但不适合书写太多，否则文档易读性会变差。
其语法如下。
2-3.html
<html> <head> <title>内联样式表语法</title> </head> <body> <p style="font-size:15px">内部样式表与标签分离</p> </body> </html>
2.1.2 CSS的构成
无论采取哪种方式引入CSS样式，其代码书写格式都是一致的。构成CSS规则的主要有两个部分：选择器；一条或多条声明。
语法形式如下。
selector{
属性1:值;
属性2:值;
...
属性N:值;
}
其中，Selector（选择器）包括以下几种情况，为了方便读者读懂代码，下面的实例选取“内部样式表”形式为例进行介绍。
1. 标签名选择器
标签名选择器，即修饰哪个XHTML标签，就以该标签名字本身作为选择器。
2-4.html
<html>
<head>
<title>标签名选择器</title>
<style type="text/css">
<!--修饰单个标签-->
p{color:red;}
<!--修饰并列多个标签-->
h1,h2{
font-size:15px;
text-align:center;
}
</style>
</head>
<body>
<p>帮我改成红色文字</p>
<h1>我是一级标题，我和h2要求一样</h1>
<h2>我是二级标题，我和h1要求一样</h2>
</body>
</html>
注意：color属性值除了英文单词写法之外，还可以使用十六进制的颜色值，如#ff0000，或者通过以下两种方法使用RGB值。
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
提示：（1）尽量一组属性值占一行，这样可以增加可读性。
（2）如果值中间包含空格，则要记得给属性值加引号。
2. 标签名派生选择器
标签名选择器是最直观、最简单的一种选择器的写法。但XHTML文档中标签有时候会以多个标签嵌套的形式出现，因此为了修饰效果更精确，在标签名选择器基础上通过层级关系又引入了标签名派生选择器。
即：根据文档的上下文关系来确定标签子元素的样式，中间是用空格分隔符。
2-5.html
<html>
<head>
<title>标签名派生选择器</title>
<style type="text/css">
li strong{
font-style:italic;
font-size:15px;
}
</style>
</head>
<body>
<strong>这次修饰和我没关系啊！</strong>
<ul>
<li><strong>修饰的是我呀！</strong></li>
</ul>
</body>
</html>
根据标签名派生选择器的上下文关系，以上代码只针对<li>标签包含的<strong>标签下的内容进行字体类型、字体大小的修饰，而独立存在的<strong>标签则不受影响。
3．id选择器
XHTML文档中有时也会同时出现多次相同标记，但每个标记又要求使用不同效果。这种情况下，标签名选择器就无能为力了，因此CSS中针对此种情况提供了一种id选择器。即根据HTML标签的id属性值进行修饰。
要求：id选择器以“#”开头，例如：#id_name。
2-6.html
<html>
<head>
<title>id选择器</title>
<style type="text/css">
#red{
font-color:red;
}
</style>
</head>
<body>
<p id="red">整个段落为红色。</p>
<p id="green">整个段落不受控制。</p>
</body>
</html>
代码中出现了两次p标记，每种标记都有自己的id属性值，通过“#red”的限制，CSS仅针对“id=red”的标记进行修饰，而“id=green”则不受控制。
4．id派生选择器
id选择器解决了同名标签不同修饰的问题，但当具有id属性的标签又嵌套其他成批标签后，只使用id选择器显然无法从大量标签中挑选某一个指定标签进行特殊修饰，因此在id选择器的基础上又出现了id派生选择器。
即：使用id属性值再根据上下文关系定义对应子元素的特殊样式。
2-7.html
<html>
<head>
<title>id派生选择器</title>
<style type="text/css">
#red p{
font-style: italic;
text-align: right;
}
</style>
</head>
<body>
<div id="red">
<p>文字为斜体居右对齐。</p>
<span>与p标签同级别，但不受影响</span>
</div>
<p>本段文字不受影响。</p>
</body>
</html>
在以上代码中，“id=red”标签中同时包含两个标签，但只有p标签被修饰，同级别的span标签不受影响，独立存在的p标签更不会被修饰。
5. 类选择器
在XHTML文档中，有时候需要针对不同标签进行相同修饰，即批量修饰。CSS提供了类选择器解决以上问题。
要求：类选择器以一个点号“.”开头，例如：.class_name。
2-8.html
<html>
<head>
<title>类选择器</title>
<style type="text/css">
.center{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">我和p标记样式一致，居中显示一级标题</h1>
<p class="center">我和h1标记样式一致，居中显示段落内容。</p>
</body>
</html>
类选择器的作用就是无论标签名是什么，只要class属性值一致就同时进行修饰。
6. 类派生选择器
派生选择器都是在某种选择器基础上出现的升级选择器，使得修饰更精确，类派生选择器也不例外。类派生选择器是在类选择器的基础上再根据上下文关系进行修饰的一种选择器。
2-9.html
<html>
<head>
<title>类派生选择器</title>
<style type="text/css">
.center h1{
text-align:center;
}
</style>
</head>
<body>
<div class="center">
<h1>我在div里面，居中显示一级标题</h1>
<h2>我也属于div，但不会被修饰</h2>
</div>
</body>
</html>
同id派生选择器的效果，CSS通过“.center h1”选择器限制，上述代码中只有h1标签被修饰。
7. 基于类的元素选择器
在CSS中为了更精确，还提供了一种元素名与类属性值相结合的选择器，即基于类的元素选择器。
2-10.html
<html>
<head>
<title>基于类的元素选择器</title>
<style type="text/css">
td.grey {
color:pink;
background:grey;
}
</style>
</head>
<body>
<table border="1px">
<tr>
<td class="grey">我变色</td>
<td>我不变</td>
</tr>
</table>
<p class="grey">跟我无关</p>
</body>
</html>
以上代码中td标签出现多次，但“td.grey”选择器仅针对元素名为td，且class属性值为grey的部分进行修饰，这种写法更精确。
8．CSS属性选择器
XHTML文档中有时候标签不具有id或者class属性值也可以进行精确修饰。CSS还有一种通过标签普通属性值来限制修饰内容的选择器，即属性选择器。这种方法对带有指定属性的XHTML元素设置样式。
要求：属性选择器使用“[]”，例如：[属性名=属性值]。
2-11.html
<html>
<head>
<title>属性选择器</title>
<style type="text/css">
input[type="text"]{
width:100px;
display:block;
margin-bottom:5px;
}
</style>
</head>
<body>
<form>
姓名：<input type="text"/>
口令：<input type="password"/>
</form>
</body>
</html>
上述代码中input标签出现了两次，但每次的type属性类型值都不同，且没有指定id属性值和class属性值，因此选择“input[type="text"]”方法限制后，只有type属性值为text的标签会被修饰。
当然CSS选择器还有很多种，以上只是常用的几种类型，详细内容可参考在线手册www.w3school.com.cn。
在线客服
共有条评论 网友评论