大家都知道DIV+CSS是实现网页布局的一大法宝,它可以实现对网页各个元素的精确定位和布局。那么CSS(样式表)是怎样实现对HTML文档的中元素的样式设置的呢?这就要涉及到一个概念:CSS选择器。
CSS选择器是什么东西呢? 下面先给大家看一个简单的例子:
/*简单的CSS样式*/
.content{
color:#FF0000;//将文字标记为红色
}
/*HTML中的内容*/
<div class="content">
这是一个简单的DIV+CSS的Demo
</div>
网页的预览效果是:“这是一个简单的DIV+CSS的Demo”这句话的文字颜色是红色
通过上面这个最简单的例子我们可以发现:CSS中的样式要想实现对HTML文档中元素的控制,需要某种对应关系(上例中的“Content”就是二者的联系所在),根据这种对应关系(可以是一对一、一对多或者多对多),CSS实现对HTML的样式控制。我们就将这种通过对应关系实现样式控制的东西叫做CSS选择器。
CSS选择器有很多种(随版本的不同而变化),下面我为大家介绍几种最常见的CSS选择器
ID选择器
ID选择器是通过元素的ID来进行选择的,对于同一个HTML页面,每一个元素的ID都是惟一的,所以ID选择器具有唯一性
在样式表中,ID选择器前面以“#”进行标识,下面举例说明
/*ID选择器的CSS样式*/
#content{
font-size:14px;
}
/*HTML中的内容*/
<div id="content">
这是一个ID选择器的例子
</div>
网页的预览效果是:“这是一个ID选择器的例子”这句话的字体大小是14像素
类选择器
类选择器是通过元素的class属性值来进行选择的,多个元素可以同时具有相同的class属性值,所以它可以实现“一对多”的样式控制。凡是具有相同class属性值的元素都会应用对应的样式。
在样式表中,类选择器前面以“.”进行标识,下面举例说明
/*类选择器的CSS样式*/
.content{
background:#FF0000; //背景色为红色
}
/*HTML中的内容*/
<div class="content">
这是一个类选择器的例子1
</div>
<div>
下面是一个段落
<p class="content">
这是一个类选择器的例子2
</p>
</div>
网页的预览效果是:“这是一个类选择器的例子1”和“这是一个类选择器的例子2”两句话的背景色是红色的,而“下面是一个段落”这句话没有样式。
标签选择器
标签选择器是通过元素的标签进行选择的。大家都知道HTML页面中的元素都是通过标签进行整合的,具有相同标签的元素就会应用相同的样式
在样式表中,标签选择器的前面什么都不用加,只需写出标签名即可,下面举例说明
/*标签选择器的CSS样式*/
p{
color:blue;
fontsize-12px;
}
/*HTML中的内容*/
<p>段落1</p>
<div class="example">
下面是一个段落
<p>段落2</p>
</div>
网页的预览效果是:“段落1”和“段落2”两句话的字体是蓝色的,大小是12像素;“下面是一个段落”这句话没有任何样式
伪类选择器
最常用的伪类选择器就是对连接标签<a>应用的选择器,下面举例说明
/*伪类选择器的CSS样式*/
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
/*HTML中的内容*/
<a href="http://www.baidu.com" target="_blank">连接到百度</a>
网页的预览效果是:连接默认没有下划线,当鼠标悬停时有下滑下,访问过后没有下划线
属性选择器
属性选择器是根据特定标签的特定属性值或者是属性的有无来进行选择的,举例如下
/*属性选择器的CSS样式*/
p[title]{font-size=14px;}
或者
p[title="123"]{ font-size=18;}
如果<p>标签有“title”属性,则将该段设为字体14像素;如果<p>标签的“title”属性值为“123”,则将该段设为字体18像素
后代选择器
后代选择器是通过指定父代的所有指定后代(包括直接后代和深层次后代)进行选择的,它通常由两个常用标签组合形成。通过使用后代选择器,可以实现更精确的样式控制,是非常常用的一种CSS选择器。
父选择器和后代选择器之间以空格分隔,下面举例说明:
/*后代选择器的CSS样式*/
.father p{
color:blue;
}
/*HTML中的内容*/
<div class="father">
这是父元素
<p>
这是子元素
</p>
</div>
网页的预览效果是:"这是父元素"这句话没有样式,而“这是子元素”这句话的字体颜色是蓝色
子选择器
子选择器与后代选择器非常类似,他们的区别是:后代选择器将样式用到父元素的所有后代当中(包括直接后代和深层次后代),而子选择器只将样式用到父元素的直接后代元素,只有“儿子”能用到、“孙子”以及“重孙子”用不到。
父选择器和子选择器之间以“>”分隔,下面举例说明
/*子选择器的CSS样式*/
.father>.son{
background:blue;
}
/*HTML中的内容*/
<div class="father">
<div class="son">
这是子元素
<div class="son">
这是孙子元素
</div>
</div>
</div>
网页的预览效果是:"这是子元素"这句话的背景色是蓝色的;“这是孙子元素”这句话的背景色是白色的(没有样式)
如果将“>”改为空格 即 “”.father .son",则两句话的背景色都是蓝色的。
通用选择器
通用选择器即应用于所有标签的选择器,用“*”表示,举例如下:
/*通用择器的CSS样式*/
*{
margin:0;
padding:0;
}
将所有“盒子”的外边距和内边距都设为0,这句话通常用在CSS样式表的开头,用作初始化。
希望这篇文章能对初学DIV+CSS的朋友们有所帮助
分享到:
相关推荐
大话3WDF解包器(也可解大话2的) 所解图片版权归网易所有
大话地图提取
mtxy2 存档数据库 大话西游2 木头人,单机版
HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
大话西游鼠标,内附所有鼠标样式,具体安装细节请问度娘。
提取大话美术资源的程序,可以提取、打包、查看、
大话云计算【高清】
大话280环及科举答题器,纯属个人做的,呵呵,可以用
用于查看大话素材工具打开wdf文件,无需解包就能查看was素材
05大话企业级Android开发_MVC讲解及简单短信和拨号器实现 06大话企业级Android开发_日志输出、单元测试及调试 07大话企业级Android开发_UI(上) 08大话企业级Android开发_UI(中) 09大话企业级Android开发_UI(下) 10...
《大话5G》小火车,好多鱼版本PDF,文本格式PDF文件,可复制。排版精美
功能: 支持AS3的ByteArray序列化对象的AMF格式编码、解码( readObject、writeObject )。 支持AS3的ByteArray的compress、uncompress压缩算法:DEFLATE、LZIB、LZMA。 支持直接修改AS3的ByteArray字节流内编码...
大话核心网.mobi
针对游戏:大话西游2.0.78版本 软件功能:此版本的lua4脚本引擎 注意如果要编译大话西游2.0.78版,需要相应的将src\lopcodes-78.h 改名 lopcodes.h。 版权属于Copyright (C) 1994-2000 TeCGraf, PUC-Rio. All ...
大话西游was资源文件转换器转动画格式透明格式
大话西游2WDF注释文件,对WDF文件的大部分子WAS文件都进行了注释,方便可以快速找到自己所需要的素材。
本书对LabWindows/CVI的开发平台、技术更新进行了详细介绍,作者以局外人的视角重新审视,结合了多年的教学与工程实践经验,对这个开发平台提出了进一步改进的渴望与憧憬,希望能看到NI更加优秀的性能和功能改进,并...
大话西游和梦幻西游美术资源素材提取教程!
大话ERP精华编
大话2和梦幻资源提取工具。 方便提取内部资源使用,想自己做表情和游戏的朋友快来下吧。