标签:css 写入 定义 红色 代码 ext type 边框 cap
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="common.css" 的真实含义其实就是相当于把文件中定义的样式复制到这篇HTML中,所以你在引用的
时候直接用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 写入 定义 红色 代码 ext type 边框 cap
原文地址:http://www.cnblogs.com/kerwinC/p/6052813.html