class的高级使用技巧

2021-06-22 分类：网站建设

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的样式表中定义了字体颜色为红色。这就说明了有关多样式同时使用的优先问题，对于这样的多样式这义，后面的样式总是能够覆盖前面的样式进行最终的显示，而且只是覆盖相同的属性。

网页题目：class的高级使用技巧
网页网址：https://www.cdcxhl.com/news1/118201.html

成都网站建设公司_创新互联，为您提供网站收录、App设计、商城网站、自适应网站、建站公司、ChatGPT

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容