CSS层叠样式表
CSS层叠样式表
层叠样式表可以看成一个层叠样式的属性集
使用class和id层叠样式符样式符
样式在使用是由不同之处的,Class可以用于被多个对象是设置成同种css的情况,假如这样写:
<h3 class="style2"></h3>
<h4 class="style2"></h3>
这是使用id选择器的写法
<h3 id="style3"></h3>
<h4 id="style3"></h3>
示例:
<style type="text/css">
.style1{
color:red;
font-size:16px;
}
#style2{
color:blue;
font-size:16px;
}
</style>
</head>
<body>
<h3 class="style1">使用class样式符</h3>
<h3 class="style1">使用class样式符</h3>
<h2 id="style2">使用id样式符</h2>
<h3 id="style2">使用id样式符</h3>
</body>
创建选择器
<1>HTML选择器:
重新定义HTML表现性标签的样式,正如文中所提的<h1>的文本应该是大写的黑体字
<style type="text/css">
h1{color:black;
font-size:16px;
font-famliy:微软雅黑;
}
<2>id选择器:
id选择器开头要加一个“#”号,就要这样写:
<style type="text/css">
#style1{
font-size:20px;
font-famliy:微软雅黑;
color:black;
}
</style>
<h1 class="style1">这是一个标题</h1>
<3>class选择器:
如果希望通过class选择器将样式表固定到html中的话,样式表开头要加上"."(dot)符号,例如:
.play{
font-size:1 em;
font-famliy:微软雅黑;
}
<h1 class="play">修改文本的大小和字体</h1>
应用CSS样式表
1.嵌入样式表
是指将用<style>标签将样式表嵌入到<head>中,将样式与页面分离,对于使用者来说效率更高。
2.内联样式表
行内css,通过使用style来引用声明语句
<h1 style=" color:red; margin-left:20px; ">
3.外联样式表
使用<link rel="shortcut" type="text/css" href="some.css">
4.多重样式表
<总之在使用的时候注意到这里有优先级,不同的使用次序回导致样式覆盖>