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.多重样式表

<总之在使用的时候注意到这里有优先级,不同的使用次序回导致样式覆盖>




posted @ 2018-05-19 17:56  sunchongwei  阅读(140)  评论(0编辑  收藏  举报