1.样式表的优先级
在用CSS样式去修饰HTML元素时,大致有以下三种方法可供我们使用!!
行内样式:如<p class="para" style="color: red;">测试</p>
嵌入样式: 在<head>...</head>间引入元素<style>...<style>,如下所示,截取片断:
<head>
<meta charset="utf-8" />
<title>测试专用</title>
<style>
p{
color:red;
}
</style>
</head>
外链样式:在<head>中引入<link>来链接到外部样式表CSS,然后在CSS文件中书写有关样式,如下所示:
<head>
<meta charset="UTF-8">
<title>百度网盘</title>
<link type="text/css" rel="stylesheet" href="../css/baiduWangPan.css">
</head>
由于对同一个元素的样式修饰有多种方法,那么样式发生冲突时应该怎么处理呢?
其实很简单,不同的样式表的使用,优先级也是不一样的,上面三种样式表的优先级为:
行内样式>嵌入样式>外链样式
同样的,选择器选择修饰元素时,仍然有一个优先级顺序(当样式发生冲突时,采用优先级较高的选择器的样式):
id选择器>类选择器=属性选择器=伪类选择器>元素选择器=伪元素选择器>*(通用选择器)
当优先级相同时,在样式表中,书写越靠后的优先级越高!!
扫描二维码关注公众号,回复:
2632331 查看本文章
2.CSS重置问题
由于浏览器多种多样,默认的样式也各不相同,在开发过程中,为了让代码有更好的兼容性,就需要统一各种浏览器的样式,自然就有了CSS重置的问题!!CSS重置一般包括以下两种:
1)normalize.css (可以理解为对浏览器样式表的一个纠正)
2)Eric Meyer's "Reset CSS"2.0 (可以理解为对浏览器所有样式表清零)
对于国内开发来说,完全使用其中的一种方法都带有一定的问题,对于前者,纠正过后样式表可能不是自己想要的;对于后者,完全清零,过于绝对化,一竿子打死了!
所以,我们通常会采用两种方式的结合,部分样式纠正,部分样式清零。
本博客由博主原创,如需转载需说明出处!谢谢支持!