VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > css >
  • css教程之样式表的冲突问题

样式表的冲突问题
      由于CSS样式表的定义规则不止一种,因此当某个标记CSS样式表的定义出现冲突时,多种相同属性的定义将出现冲突问题;此外当多种定义规则出现时,引用效果也讲出现冲突,下面列举出各种冲突的处理规则
※定义冲突:
1.     HTML文件内部定义之间出现冲突
<style>
body{
color:red;
}
body{
color:blue;
}
</style>
      使用时定义位置靠后的将取代前面定义的属性,成为最终定义的属性
2.     CSS外部定义同一个.css文件内定义之间出现冲突
(同上)
 
※引用冲突:
1.     HTML文件内部定义与CSS外部定义.css文件之间出现冲突
<link rel=stylesheet href="style.css" type="text/css">
<style>
body{
color:#ff00ff;
}
</style>
      引用时HTML文件内部定义的样式将取代CSS外部定义文件内的样式
2.     CSS外部定义的多个.css文件之间出现冲突
style1.css
body{
color:red;
}
style2.css
body{
color:blue;
}
引用时:
l  若都使用<link>标签导入,则后导入的将取代先导入的,成为最终样式
<link rel=stylesheet href="fail.css" type="text/css">
<link rel=stylesheet href="success.css" type="text/css">
l  若都使用@import语法导入,则后导入的将取代先导入的,成为最终样式
<style>
@import fail.css;
@import success.css;
</style>
l  若使用@import语法<link>标签分别导入,则语法顺序定义位置在后面的将取代语法顺序定义位置在前面的,成为最终样式
<style>
@import fail.css;
</style>
<link rel=stylesheet href="success.css" type="text/css">
或:
<link rel=stylesheet href="fail.css" type="text/css">
<style>
@import success.css;
</style>
3.     多个标记定义同一内容而引发的引用冲突
l  外层标签与内层标签定义冲突时,内层标签样式将覆盖外层标签样式效果
<style>
      p{
           color:red;
      }
      b{
           color:blue;
      }
</style>
<b><p>红色</p></b>
<p><b>蓝色</b></p>
<I style="color:green;"><b>蓝色</b><I>
<b><I style="color:green;">绿色<I></b>
l  具有样式的标签嵌套不规则冲突时,距离被修饰内容进的样式定义其作用
<style>
      p{
           color:red;
      }
      b{
           color:blue;
      }
</style>
<b><p>红色</b></p>
<p><b>蓝色</p></b>
总:具有相同样式修饰,不同样式值的标签距离被修饰内容近标签的样式格式起作用
4.     当CSS对某个标签进行定义时,基于HTML默认标签使用的值都是默认设定,此时优先使用CSS定义规则,否则CSS定义就毫无意义了。
 

相关教程