仿站咨询QQ:2587483189

手机微信同号:15850888840

原创CSS网页布局[五]层叠与优先级概念

上节教程我们学习了CSS选择器,选择器帮助我们确定该规则应用至文档中的哪些元素.我们已经可以配合XHTML来做个大概的网页布局样式了吧.

遗留些问题,我们现在解决下,顺便也是加深印象的过程.注意思考/
?规则格式,可加回车,空格.
?什么是类选择器和ID选择器的区别?
<元素名称 属性=属性值></元素名称>
类选择器 class
ID选择器 id
样式表中的区别是:
类选择器 .
ID选择器 #

区别:
类选择器可以应用给多个不同的元素.
ID选择器仅能出现一次,因为JS有时会调用元素的ID属性.[总之记住ID仅能出现一次就可以了.]

一个元素可以同时具有多个类名.
一个元素可可以同时具有类和ID属性.

当附加一个类型选择器到一个类选择器或者ID选择器上时,就限定了该样式表规则只作用于相应类型的元素.

div#ppp 类型选择器+自定义选择器.
div.ppp 类型选择器+自定义选择器.

 

伪类:

:link  表示未访问的超级链接.
:visited 表示已访问的超级链接.
:hover 表示鼠标指针当前停留在该元素上.[悬停]
:active 表示用户正在单击该元素.


还记得我们第三节教程如何解释CSS的吗?  CSS – Cascade Style Sheet – 层叠样式表.事实上,优先级的概念就以及重要性就暗含在语言本身的名字里:层叠样式表.层叠自然就描述了优先级的术语.

很简单,我们先举个例子.
div{
color:red;
}
div{
color:blue;
}
这里我们在样式表中设置了2条规则,凡是符合负责的元素都会应用这2条规则.现在我们,考虑下,究竟是显示红色还是蓝色?

经过测试,我们发现,应用了第2条规则,为什么?

⒈同样的选择器.后出现的将覆盖前面出现的规则.层叠的概念明白了吧?

我们再来看不同的选择器之间的优先规则.

div{
background:red;
}

#d{
background:blue;
}

经过测试,我们发现,应用了第2条规则.为什么?

⒉不同的选择器,更具体的选择器[针对性]规则将优先被应用.
大致就这2条需要记忆的.我们将来验证这2条.

⒈后代选择器与类型选择器.
⒉ID选择器与class选择器.
⒊类型+自定义选择器与其他选择器的对比.

思考:
为什么h1-h6标签的字体比其他标签的字体颜色加重?
因为浏览器本身也有一个样式,层叠的概念又出来了,我们设计CSS样式表的时候实际上就是在覆盖浏览器的样式,我们也发现,浏览器的样式优先级是最低的.

还记得我们将CSS样式表与网页文档结合的4种方法吗?
⒈内嵌样式表.
⒉外部样式表.
⒊导入样式表.
⒋内联样式表.

这里我们要说下第四点,内联样式表是给元素增加style属性,来加入规则到具体的网页元素的.所以,其最具有针对性.因此其优先级最高,最先应用这个规则.

!important 规则甚至优先于style.
用法:加入到某条声明的分号[;]之前.

优先级的作用就是控制当某些规则同时的出现的时候,具体是用哪条规则.
⒈相同的选择器.后出现的优先级高.
⒉不同的选择器.越具有针对性的选择器优先级越高.
⒊style规则高于前面学的任何选择器.
⒋!important规则又高于style .


到这里,CSS网页布局教程已经第5课了.一直在学习基础,包括HTML/XHTML,CSS选择器和优先级.以及多次的重复网页包含哪些元素.大家不知道厌倦了没?到底这些和设计网页有什么联系呢?

事实上,如果您足够认真,或者思考了,可能已经有了一些想法,只是因为不了解样式表声明中的具体属性和属性值的写法而没有实施,下节教程开始,我们就具体学习这些属性了.

⒈需要一个网页.
⒉需要了解网页内拥有哪些元素.
⒊需要掌握如何增加这些元素至网页内.
⒋需要知道组织这些元素的版式时用到的方法.如:
?字体大小,颜色,样式,背景
?元素之间的距离等等.
?要明白这些都属于元素的属性.
⒌我们知道了如何选择元素,现在只要按照自己的想法设计就可以了.如想让字体变大,给他应用字体大小属性,再给该属性设定您想要的属性值[具体大小]就可以了.

本节教程就到这里了,理论知识的学习终于完成了,明日,我们将踏上征战之途.~~~

  • 上一篇:原创CSS网页布局四CSS选择器
  • 下一篇:原创CSS网页布局[六]文本属性
  • 来源:未知//所属分类: 仿站DIV+CSS /更新时间:2010-03-10
    相关仿站教程