• 设为首页
  • 加入收藏
  • 汇款方式
  • 留言反馈
  • 网站首页
  • 关于我们
  • 网站建设
  • 网站托管
  • 网站推广
  • 微信网站
  • 速达软件
  • 成功案例
  • 后续服务
  • 在线留言
  • 联系我们
快速服务导航
  • 网站建设
  • 网站推广
  • 网站托管
  • 财务软件
  • 客户服务
  • 经济型网站建设套餐
  • 基本型网站建设套餐
  • 标准型网站建设套餐
  • 品牌型网站建设套餐
临沂进销存软件
建站知识
您现在的位置: 首页 >> 建站知识

网站制作技术之关于CSS代码执行的优先级

添加时间:2012-9-4

一、加入CSS代码的方式 临沂网站建设

a、在<head>标签对中链接外部样式:

<link href="style.css" rel="stylesheet" type="text/css">

b、在<head>标签对中写内部样式:

<style type="text/css">
......
</style>

c、在链接外部样式表和内部样式的最前面可以使用 @import url(style.css); 输入样式

d、在标签属性中可以使用style属性写入,即行内样式:

<p style="css code">内容</p>

二、CSS优先级是:行内样式 > 内部样式 > 链接外部样式 ?

是的,的确是这样,但我们必须给其限定一下条件,这个比较才是成立,而不是一味的就这样认为了。

这个条件就是:在相同的selector(选择器)情况下

在不使用“!important”的情况下,行内样式最优先,这个毋庸置疑,那么就比较没有行内样式吧

下面示例:临沂网站建设
 

html代码 :

<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title> new document </title>
<link href="color1.css" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(color2.css);
span{color:#06f}
</style>
</head>
<body>
<div><span><b>什么颜色呢?</b></span></div>
</body>
</html>

color1.css :

div span b{color:red}

color2.css :

div span{color:blue}

 

那么文字的最终颜色是--red

是的,在不使用行内样式的情况下,外部链接样式打赢了。

 

三、CSS优先级计算方式

说明 权重 
HTML标记 1 
class 10 
id 100 
行内style 1000 
!important 高于一切 
继承 0 
 
临沂网站建设

 

知道了这些,使用加法就很容易了解权重值了,例如:

div span{} 权重为:1+1=2

#select1 div{} 权重为:100+1=101

.select2 div{} 权重为:10+1=11

#select1 .select2 div{} 权重为:100+10+1=111

 

所以上面那个例子,外部链接样式权重3大于内部样式权重2

 

四、要注意的一些问题

1、如果!important声明冲突,则比较优先权。如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。

2、由@import加载的外部样式,由于@import必须出现在所有其它规则定义之前(如不是,则浏览器应该忽略之),所以按照后来居上原则,一般优先权冲突时是占下风的。

3、关于继承性:
权重低,任何显式声明的规则都会覆盖继承的样式,比如全局选择符定义的规则;
局限性,有一些属性不能被继承,如:border, margin, padding, background等。

4、要使用内联样式,必须使用Content-Style-Type HTTP页眉扩展对整个文档进行单独的样式表语言声明。
<meta http-equiv="Content-Style-Type" content="text/css"> 

5、所有的 @import 声明必须放在样式表的开始部分,后面 @import 的样式覆盖前面 @import 的样式,所以<style>中的样式表规则超越输入样式表中对应的规则。临沂网站建设


本文摘自:http://www.ly333.net/new_show.asp?id=596

浏览次数:2254


上一条:临沂网站建设:建设网站过程中 要丰富网页的内容
下一条:临沂网站建设:静态网页和动态网页的区别
  • 返回首页
  • 关于我们
  • 汇款方式
  • 留言反馈
  • 联系我们
  • 临沂软件公司
版权所有 Copyright @ 2006 临沂三人行网络 All Rights reserved 鲁ICP备11032993号-1
联系地址:临沂市兰山区临西五路与北园路交汇处优卡空间B座509 临沂三人行网络科技公司 邮编:276000
咨询专线:0539-7322544     业务总监:13954495915
商务一部:0539-7322401 咨询QQ:858823118
商务二部:0539-7322402 咨询QQ:346917770
 商务三部:0539-7322403 咨询QQ:1737388890
监督电话:13954495915    EMAIL:w7169322@163.com
网站关键词: 临沂网站建设|临沂网站制作|临沂网络公司|临沂网站改版|临沂网站托管|临沂三人行网络  网站地图