web-10. 层叠样式表CSS概述
10. 层叠样式表CSS概述
10.1 DHTML和CSS概念
一个好的Web页面，不但有丰富的内容，同事也需要有精美和“引人注目”的显示效果。DHTML就是具有动态属性和动态显示效果的HTML，而CSS则规定了各种显示风格样式的名称和设置值的规则。
10.2 CSS的基本类型
样式规则定义的第一部分成为selector（选择器），它定义了HTML文件中受该样式规则影响的HTML元素。selector包括有HTML selector、class selector、ID selector这3中基本类型，以及在这3类基本类型基础之上的其他selector。
- 以HTML标记形式实现的HTML selector
HTML selector就是通过HTML标记来实现的样式选择器，例如<P>、<DIV>、<TD>等。HTML selector一般在HTML文档的<head>区<style></style>标记对之间进行定义。
如果在CSS中将某一个HTML标记定义成了selector，那么在CSS所有应用的网页中，所有这个HTML标记都按照相应的样式规则定义语句显示。
HTML脚本在浏览器中的执行方式是解释执行方式，解释执行方式是一种顺序执行方式，因此一旦在前面定义了CSS的样式，后面脚本中就会把这种样式作用于特定的Web元素。比如在前面定义了CSS的样式：
<style type=”text/css”>
h1{color:green}
</style>
那么后面脚本中所有的<h1></h1>标记对之间的文本颜色都将会是绿色。
例子：
<html>
<head>
<title>HTML选择器实例</title>
<style type="text/css" media="screen,projection">
h1{font-size:60px;color:red;font-family:方正姚体}
h2{font-size:40px;color:green;font-family:宋体}
h1{font-size:30px;color:blue;font-family:隶书}
</style>
</head>
<body>
<h1>生命在于运动</h1>
<h2>生命在于运动</h2>
<h3>生命在于运动</h3>
</form>
</body>
</html>
- 以class属性实现的Class selector
这里类的概念是各HTML标记所通用的属性class。比如要在网页中对段落分类，只需要为各个段落标记<p>的class属性指定不同值即可。这种选择器的格式定义类似于HTML的selector。
这里所说的类不同于面向对象编程语言中的类，它仅仅是HTML标记的class属性。
例子：
<html>
<head>
<title>HTML类选择器实例</title>
<style type="text/css" media="screen,projection">
p1{color:red}
p.2{color:yellow}
p.3{color:green}
</style>
</head>
<body>
<p1>生命在于运动</p1>
<p class="2">生命在于运动</p>
<p class="3">生命在于运动</p>
</form>
</body>
</html>
注：这里浏览器不支持“类”的使用。
- 以ID属性实现的ID selector
例子：
<html>
<head>
<title>HTML类选择器实例</title>
<style type="text/css" media="screen,projection">
#p1{color:red}
#p2{color:yellow}
#p3{color:green}
</style>
</head>
<body>
<p><span ID="p1">生命在于运动</1>
<p><span ID="p2">生命在于运动</p>
<p><span ID="p3">生命在于运动</p>
</form>
</body>
</html>
10.3 CSS的基本用法
- 正文中使用
例子：
<html>
<head>
<title>内联样式表实例</title>
</head>
<body style="font-size:60px;color:red;font-family:隶书;
<p>生命在于运动</p>
<p>生命在于运动</p>
<p>生命在于运动</p>
</body>
</html>
- 在<head></head>之间
例子：
<html>
<head>
<title>内联样式表实例</title>
<style>
p{font-size:60px;color:blue;font-family:隶书}
</style>
</head>
<body style="
<p>生命在于运动</p>
<p>生命在于运动</p>
<p>生命在于运动</p>
</body>
</html>
- 使用单独的文件存放的外部样式表
存放于单独的.css文件，并用<link>标记设置使用样式表而定规则的方式。
例子：
<html>
<head>
<link rel="stylesheet" href="2.css" type="text/css" media="screen">
</head>
<body>
<center>
<h2>欢迎使用超级系统维护软件</h2>
<div class="table">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>自动登录</td>
<td><input type="checkbox" name="auto"></td>
</tr>
<tr>
<td> </td>
<td align="right"><input type="submit" value="进入" class="botton"></td>
</tr>
</table>
<div id="footer">版权所有：段立勇</div>
</div>
</center>
</body>
</html>
2.css
body,table
{
font:12px Tahoma;
margin:20px;
}
h2{
font:bolder 24px Tahoma;
color:darkred;
}
.table{
border:1px outset lightgrey;
padding:20px;
background:lightyellow;
width:300px;
}
.button{padding:2px 10px 2px 10px;
border:1 out1set white;
background:darkblue;
color:white;
font:bolder 11px Tahoma
}
#footer{
font:10px Tahoma;
margin:30px 10px 10px 10px;
text-align:right;
}
