网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.对display:inline;与float:left;.
.门户网站与大型网站的CSS架构与组.
.体验css+div 之 给整个页面添加渐.
.使用CSS设置表格.
.如何像table一样对层div进行轻松.
.需要掌握的八个CSS布局技巧.
.css代码格式化清理工具.
.CSS定义超链接四个状态的正常顺序.
.如何将XHTML+CSS页面转换为打印机.
.符合web标准的css网站相当于已经.
.css伪类伪元素.
.css技巧:批量保存div+css图片方.
.css属性之媒体(Media)类型.
.CSS制作的阴影链接文字.
.第三章 CSS的应用补充.
.利用相对定位及偏移量做精美输入.
.CSS样式表设计的十条技巧.
.CSS去掉点击时的虚线.
.定义列表+CSS制作的垂直菜单.
.与表格边框有关的CSS语法.

CSS样式表中的选择符

发表日期:2008-11-4


一、类型选择符
什么是类型选择符?指以网页中已有的标签类型作为名称的行径符。body是网页中的一个标签类型,div,p,span都是。
如下:

body {}
div {}
p {}
span {}
 
二、群组选择符

对于XHMTL对象,可以对一组同时进行了相同的样式指派。
使用逗号对选择符进行了分隔,这样书写的优点在于同样的样式只需要书写一次即可,减少代码量,改善CSS代码结构。
使用时应该注意"逗号"是在半角模式下,并非中文全角模式。
如下:

h1,h2,h6,p,span
{
font-size:12px;
color:#FF0000;
font-family: arial;
}
 
三、包含选择符
对某对象中的子对象进行样式指点定,这样选择方式就发挥了作用。
需要注意的是,仅对此对象的子对象标签有效,对于其它单独存在或位于此对象以外的子对象,不应用此样式设置。
这样做的优点在于,帮我们避免过多的id、class设置,直接对所需的元素进行定义。
如下:

h2 span
{
color:red;
}
如下:
body h1 span strong
{
font-weight:bold;
}
 
四、id选择符

根据DOM文档对象模型原理所出现的选择符,对于一个XHTML文件,其中的每一个标签都可以使用一个id=""的形式进行一个名称指派,但需要注意,在一个XHTML文件中id是具有唯一性而不可以重复的。
在div css布局的网页中,可以针对不同的用途进行命名,如头部为header、底部为footer。
XHTML如下:

<div id="content"></div>
 
CSS如下:

#content
{
font-size:14px;
line-height:120%;
}
 
五、class选择符

其实id是对于XHTML标签的扩展,而class是对SHTML多个标签的一种组合,class直译的意思是类或类别。
对于XHTML标签使用class=""进行名称指派。与id不同,class可以重复使用,对于多个样式相同的元素,可以直接定义为一个class。
使用class的优点已不言自明,它对CSS代码重用性有良好的体现,众多的标签均可以使用一个样式来定义而不需要每一个编写一个样式代码。
XHTML如下:

<p class="he"></p>
<span class="he"></span>
<h5 class="he"></h5>
 
CSS如下:

.he
{
margin:10px;
background-color:red;
}
 
六、标签指定式的选择符

如果想同时使用id和class,也想同时使用标签选择符,可以使用如下的方式:

h1#content {}
/*表示所有id为content的h1标签*/
h1.p1 {}
/*表示所有class为p1的h1标签*/
 
标签指定式选择符的精度介于标签选择符及id/class选择符之间,是常用的选择符之一。

七、组合选择符

对于上面的所有选择符而言,进行组合使用。如下:

h1 .p1 {}
/*表示h1下的所有class为p1的标签*/
#content h1 {}
表示id为content的标签下的所有h1标签
h1 .p1,#content h1 {}
/*表示h1下的所有class为p1的标签以及id为content的标签下的所有h1标签*/
h1#content h2{}
/*id为content的h1标签下的h2标签*/
 
CSS选择符是非常自由与灵活的,可以根据页面的需要,使用各种选择符,尽量结构化与优化CSS文件.

上一篇:关于客户端XHTML,CSS和JavaScript的一些总结 人气:581
下一篇:css用expression来区分只读文本框 人气:615
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐