首页 > 代码库 > css的存在形式以及优先级
css的存在形式以及优先级
css的存在形式以及优先级
css不仅仅可以在每个head标签中定义,而且也可以写在一个文件中,每个页面即可进行引用,这样可以做到重复利用。
css文件的写法如下:
common.css
.c1{
height: 48px;
width: auto;
border: 1px solid red;
font-size: 16px;
text-align: center;
line-height: 48px;
}
#i{
height: 48px;
width: auto;
border: 1px solid red;
font-size: 16px;
text-align: center;
line-height: 48px;
}
直接在里面写入css样式即可,写完后保存。
引用方式如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <link rel="stylesheet" href="common.css"/> </head> <body> <div class="c1">样式测试</div> </body> </html>
<link rel="stylesheet" href="http://www.mamicode.com/common.css" 的真实含义其实就是相当于把文件中定义的样式复制到这篇HTML中,所以你在引用的
时候直接用css文件中定义好的选择器即可。
css选择器的优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <style> .c1{ height: 48px; width: auto; border: 1px solid red; font-size: 16px; text-align: center; line-height: 48px; } #i{ height: 48px; width: auto; border: 1px solid rebeccapurple; font-size: 16px; text-align: center; line-height: 48px; } </style> </head> <body> <div class="c1" id="i">样式测试</div> </body> </html>
在这篇代码中我们可以看到body标签中的div引用了两个样式,c1样式的边框颜色是红色,i样式的边框颜色是紫色,执行代码后,“style 中靠后的样式优先展示”
优先级最高的是在div,或者其他的标签自己内部定义的样式,这是最高级的。
css的存在形式以及优先级
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。