DIV+CSS基础DIV+CSS十日教程5:浏览器默认样式和CSS优先级

DIV+CSS十日教程5:浏览器默认样式和CSS优先级

相信经过您的耐心学习,已经逐渐对自己充满了信心,本节一起来研究一些关于CSS优先级的知识。在前面的基础课程里了解到,引入CSS文件的方法是,使用link标签,如:

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

这是推荐大家使用的方法,另外还有两种引入CSS的方法,分别是:

1. 使用<style>标签,例如:

<html>
<head>
<title>周杰伦2016新专辑</title>
<style type="text/css">
h1 {color:red}
h2 {color:blue}
</style>
</head>
<body>
<h1>周杰伦新专辑</h1>
<h2>周杰伦的床边故事</h2>
</body>
</html>

将这段代码保存为html网页后尝试浏览,会发现这个网页的h1内容显示为红色,h2显示为蓝色,这正是<style>标签所起的作用。

2. html标签内style属性,例如:

<html>
<head>
<title>周杰伦2016新专辑</title>
</head>
<body>
<h3 style="color:red">周杰伦新专辑</h1>
<h4 style="color:blue">周杰伦的床边故事</h2>
</body>
</html>

浏览后发现,h3显示为红色,h4为蓝色,这是style内联属性所起的作用。这两种引入css的方法与link标签大致是相同的,将link标签所引入的css文件内容放到<style>标签中,效果是一样,而标签内style属性则相当于将css文件大括号中的内容放到该属性的引号内。

相对于link引入css文件,以上两种方法存在不方便的地方,方法1中的css代码仅在该网页内有效,如果有多个网页的样式需要定义或修改,则必须每个网页中的CSS代码都要改,同样的,方法2也是一样,修改的时候很不方便,所以大家制作网页模板的时候,应尽可能使用link标签引入外部css文件。

下面简单的说说浏览器自带的默认CSS样式,例如这个网页:

<html>
<head>
<title>周杰伦2016新专辑</title>
</head>
<body>
<p><strong>周杰伦新专辑</strong></p>
<p><em>周杰伦的床边故事</em></p>
<a href="http://www.google.ca/">这是一个文字链接</a>
</body>
</html>

浏览后发现strong标签中的文字显示为加粗,em中的文字是斜体,而带有链接的文本显示为蓝色,有下划线,如果用css来表达这些样式,则应该是:

strong {font-weight:bold;}
em {font-style:italic;}
a{a {text-decoration: underline;color:blue;}

而事实上,上面那段html代码并无引入任何css样式,原因是浏览器默认提供了部分样式,例如几乎任何浏览器都会将strong和b标签加粗,给链接默认加上下划线。像这些浏览器默认的样式,不同的浏览器默认样式有可能不同,所以大多数时候设计网页的时候,需要先针对浏览器的默认样式做个重置,或者称复位,以便减小各个浏览器的显示效果差别。

CSS复位最简单粗暴的方法是:

* {padding:0;margin:0;border:0;font-size:100%;}

通配符表示“选择所有”,这句代码的意思是将所有元素的内外边距和边框都设置为0,以及将所有元素的字号都重置为同一大小,这种写法一般出现在测试页面中,属于一种偷懒的写法,实际应用中不建议这么写,但是具体怎么写,您可以在实践中慢慢摸索,总结适合自己网页的写法。

浏览器的默认样式可以被通配符选择器复位,这是因为浏览器默认样式的优先级是最低的,而通配符选择器的优先级仅高于浏览器而低于其他选择器,可以做个实验测试一下几种引入CSS的方法其优先级的高低:

<html>
<head>
<title>周杰伦2016新专辑</title>
<link rel="stylesheet" type="text/css" href="theme1.css" />
<style type="text/css">
* {color:black}
p {color:red}
</style>
</head>
<body>
<p>周杰伦新专辑</p>
</body>
</html>

建立一个CSS文件名为theme1.css保存在同一个目录下,在theme1.css内写入p {color:blue},尝试浏览这个网页,发现文字显示为红色,也就是说以<style>标签中的定义为准,通配符选择器的定义被覆盖,接下来交换一下html代码中link和<style>标签的位置:

<html>
<head>
<title>周杰伦2016新专辑</title>
<style type="text/css">
p {color:red}
</style>
<link rel="stylesheet" type="text/css" href="theme1.css" />
</head>
<body>
<p>周杰伦新专辑</p>
</body>
</html>

此时文字显示为红色,说明<style>标签和link标签同时出现的时候,以后定义的为准,下面再来试试同一个标签加上不同属性的显示结果:

<html>
<head>
<title>周杰伦2016新专辑</title>
<style type="text/css">
p {color:red;color:purple;}
</style>
</head>
<body>
<p>周杰伦新专辑</p>
</body>
</html>

同时给p标签定义红色和紫色,则最终显示的结果是紫色,CSS在同一个优先级的情况下,后定义的要优先于前面定义的,接下来试试内联标签的优先级:

<html>
<head>
<title>周杰伦2016新专辑</title>
<link rel="stylesheet" type="text/css" href="theme1.css" />
<style type="text/css">
p {color:red}
</style>
</head>
<body>
<p style="color:pink">周杰伦新专辑</p>
</body>
</html>

浏览这个网页,发现文字显示为粉色,也就是说,style内联属性的优先级高于link和<style>标签,当然您也可以认为它是“后定义”的;

关于CSS选择器的优先级,则是由选择器的权值决定的,一般的,一个id选择器的权值为100,一个class选择器的权值是10,普通标签的权值是1,综合选择器的权值是将这些数字相加,权值高的优先级更高,也许这么说你已经一头雾水了,还是试试看吧:

<html>
<head>
<title>周杰伦2016新专辑</title>
<style type="text/css">
#xyz {color:blue}
.abc {color:black}
p {color:red}
</style>
</head>
<body>
<p id="xyz" class="abc">周杰伦新专辑</p>
</body>
</html>

此时文字显示为蓝色,因为id的优先级最高,尽管它的最先定义的,如果去掉#xyz {color:blue}这一段代码,再浏览一次,会发现文字显示为黑色而不是红色,因为class的优先级高于标签,再试试下面的例子:

<html>
<head>
<title>周杰伦2016新专辑</title>
<style type="text/css">
#top p {color:black}
#top {color:blue}
p {color:red}
</style>
</head>
<body>
<div id="top">
<p class="abc">周杰伦新专辑</p>
</div>
</body>
</html>

如果这样写,文字会显示为黑色,因为#top和p选择器加起来的权值是101,大于单独id的权值100,接着再来试试:

<html>
<head>
<title>周杰伦2016新专辑</title>
<style type="text/css">
.abc {color:black}
#top {color:blue}
</style>
</head>
<body>
<div id="top">
<p class="abc">周杰伦新专辑</p>
</div>
</body>
</html>

此时文字显示为黑色,并未按照权值来显示,因为本例中p标签与div是继承关系,而单独指定的CSS优先级大于继承的样式。此外,CSS中还存在一个!important定义,当它出现时,表示它的优先级是最大的,不用遵守其他规则,例如:

<html>
<head>
<title>周杰伦2016新专辑</title>
<style type="text/css">
p {color:red !important;color:purple;}
</style>
</head>
<body>
<p>周杰伦新专辑</p>
</body>
</html>

此时本应该显示紫色的文字显示了红色,正是因为!important规定了最高优先级。综合以上的所有描述,可以总结如下:

CSS优先级法则:

A  网页CSS样式的优先级 > 通配符选择器的样式 > 浏览器的样式;

B  选择器都有一个固定的权值,权值之和权值越大则越优先;

C  当权值相等时,后设置的样式优先于先设置的样式;

D  继承的CSS样式 < 指定的CSS样式;

E  在同一组属性中,标有!important规则的优先级最大...

也许,您已经被绕晕,但是这并不影响你使用CSS,遇到问题大不了多试验几次就行了,理论并不需要死记硬背,平时多加练习,慢慢摸索,自然而然就知道其中的规律了。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/div_css/6.html