售前咨询 售后咨询
当前位置: 上海网站设计 > 建站知识 > 行业新闻

class的高级使用技巧

网站编辑:小润 | 发表时间:2019-01-18 15:51:42

class的高级使用技巧


 
class作为一种专门对于样式定义的属性,不同于id,除了在使用上可以多个元紊同时使用一个class名称之外,还可以为同一个元素使用多个class样式.使用的方法是在xHTML中的。lass定义时,使用空格分隔多个样式名称,如下代码所示:
 
<p class='font0l font02 font03*>class的高级使用技巧</p>使用空格为页面元素加入了fontOl, fontO2. fontO3个样式表,下面是font0l的CSS样式表代码、
 
fonto 1{
 
padding:  lOpx;
 
float: left;
 
border: 2px solid #CCCCCC;
 
 }
预览效果,可以看到文本被加上了边框的效果,再编写fontO2样式表,控制字体样式,fontO2的CSS样式表代码如下:
 
.font02(
 
font一size:  12px;
 
font-weight:bold;
 
color: blue;
 
预览效果,文本被加了边框,并且字体也变成了蓝色粗体字.再编写fontO3样式表,设置字体颜色为红色,fontO3的CSS样式表代码如下:
 
.font03{
 
color:  font03
 
最终显示的结果是带边框、粗体字、字体为红色。
 
在这个例子可能看出class重复使用的一个问题,在使用font0l, fontO2, fonto3的样式表中,在fontO2的样式表中定义了字体颜色为蓝色,在fontO3的样式表中定义了字体颜色为红色。这就说明了有关多样式同时使用的优先问题,对于这样的多样式这义,后面的样式总是能够覆盖前面的样式进行最终的显示,而且只是覆盖相同的属性。
 

关键字:
官方微信
上海市长宁区宣化路300号华宁国际广场中区7层
+021-8031 0607
+135 8590 1130