CSS(层叠样式表)基础知识（连载二） 推荐
2007-08-15 10:02
267 查看
上一节，我们讲了如何在页面中添加CSS(层叠样式表)，我们分别讲了“链接外部样式表”、“定义内部 样式表”、“在XML文件中链接样式表”和“定义内联样式”。今天我们就来讲一讲CSS中各种选择器（选 择符）的意义及页面调用方法。为了简便，我们演示的例子都是将样式表直接写在页面中的style标签中 （即上节讲的“定义内部样式表”）。
一、类
样式表中可以定义一类样式，该样式可以应用到任何标签，其写法是在选择符前加一个点（.）， 如：.sty1{....},在页面中的标签中调用该类样式时，只需要在相应的标签内添加“class="sty1"”。下 面我们通过一个实例来演示一下：
源码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS--类选择器的用法</title>
<style>
.sty1{
font-size:14px;
color:#ff0000;
font-weight:bold;
background-color:yellow;
}
</style>
</head>
<body>
<div class="sty1">DIV标签中调用：这里的文字将以红色的粗体显示，同时文字背景色是黄色</div>
<p class="sty1">P标签中调用：这里的文字将以红色的粗体显示，同时文字背景色是黄色</p>
</body>
</html>
演示效果：
二、标签
所谓标签，就是在CSS中直接使用页面中需要重新定义样式的对象的标签名作为CSS选择符，这样的话，只要页面中出现已经被定义了样式的对象标签，那么它们都将自动被重新定义样式，比如我们为P这个标签定义了样式，那么页面中所有的 P标签的样式都将被改变。
实例源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS--标签选择器的用法</title>
<style>
div{
width:150px;
height:100px;
border:#ff0000 2px solid;
background-color:#c0c0c0;
}
p{
font-size:14px;
color:blue;
border:black 2px solid;
}
</style>
</head>
<body>
<div>div标签已被定义了样式，它的宽度是150像素，高度是100像素，红色的边框，灰色的背景</div>
<p>P标签已被定义了样式，它里面的字号是14像素，字体颜色是蓝色，区块边框是黑色</p>
</body>
</html>
演示效果：
三、高级（ID、伪类选择器等）
ID选择符以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符；伪类可以看做是一种特殊的类 选择符，伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，具体有关伪类的内 容我们将在后面的连载中详细讲解。
实例源码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS--ID选择器的用法</title>
<style>
#div1{
width:150px;
height:100px;
border:#ff0000 2px solid;
background-color:#c0c0c0;
}
div{
width:200px;
hegiht:60px;
font-size:12px;
border:blue 3px solid;
background-color:red;
}
</style>
</head>
<body>
<div id="div1">这是一个应用了ID选择器的DIV，它的宽度是150像素，高度是100像素，红色的边框，灰
色的背景</div>
<div>这是一个普通的DIV，它里面的字号是12像素，边框颜色是蓝色，背景颜色是红色</div>
</body>
</html>
演示效果：
一、类
样式表中可以定义一类样式，该样式可以应用到任何标签，其写法是在选择符前加一个点（.）， 如：.sty1{....},在页面中的标签中调用该类样式时，只需要在相应的标签内添加“class="sty1"”。下 面我们通过一个实例来演示一下：
源码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS--类选择器的用法</title>
<style>
.sty1{
font-size:14px;
color:#ff0000;
font-weight:bold;
background-color:yellow;
}
</style>
</head>
<body>
<div class="sty1">DIV标签中调用：这里的文字将以红色的粗体显示，同时文字背景色是黄色</div>
<p class="sty1">P标签中调用：这里的文字将以红色的粗体显示，同时文字背景色是黄色</p>
</body>
</html>
演示效果：
二、标签
所谓标签，就是在CSS中直接使用页面中需要重新定义样式的对象的标签名作为CSS选择符，这样的话，只要页面中出现已经被定义了样式的对象标签，那么它们都将自动被重新定义样式，比如我们为P这个标签定义了样式，那么页面中所有的 P标签的样式都将被改变。
实例源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS--标签选择器的用法</title>
<style>
div{
width:150px;
height:100px;
border:#ff0000 2px solid;
background-color:#c0c0c0;
}
p{
font-size:14px;
color:blue;
border:black 2px solid;
}
</style>
</head>
<body>
<div>div标签已被定义了样式，它的宽度是150像素，高度是100像素，红色的边框，灰色的背景</div>
<p>P标签已被定义了样式，它里面的字号是14像素，字体颜色是蓝色，区块边框是黑色</p>
</body>
</html>
演示效果：
三、高级（ID、伪类选择器等）
ID选择符以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符；伪类可以看做是一种特殊的类 选择符，伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，具体有关伪类的内 容我们将在后面的连载中详细讲解。
实例源码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS--ID选择器的用法</title>
<style>
#div1{
width:150px;
height:100px;
border:#ff0000 2px solid;
background-color:#c0c0c0;
}
div{
width:200px;
hegiht:60px;
font-size:12px;
border:blue 3px solid;
background-color:red;
}
</style>
</head>
<body>
<div id="div1">这是一个应用了ID选择器的DIV，它的宽度是150像素，高度是100像素，红色的边框，灰
色的背景</div>
<div>这是一个普通的DIV，它里面的字号是12像素，边框颜色是蓝色，背景颜色是红色</div>
</body>
</html>
演示效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS（层叠样式表）基础知识（连载一）
- CSS 层叠样式表 基础知识
- CSS（层叠样式表）基础知识
- css布局基础知识
- 推荐系统基础知识储备
- CSS基础知识学习笔记
- CSS基础知识（三）
- css 入门基础知识
- DIV+CSS网页布局常用的一些基础知识整理
- Python爬虫之CSS基础知识
- 【原创】《矩阵的史诗级玩法》连载五：45度地图砖块所蕴含的矩阵基础知识（下）
- html和css基础知识复习（1）--四种语言的联系与区分，HTML语义化，id和name
- css和javascript的一些笔记（二） js基础知识
- HTML & CSS 基础知识
- html与css基础知识回顾
- HTML/CSS一些需要注意的基础知识
- CSS基础知识
- vue2.0+基础知识连载（05）--- 绑定class样式
- css基础知识