文章导航

HTML class 属性

2018-11-10 12:44| 作者: admin| 查看: 2059| 评论: 0|来自: 蚂蚁部落

class属性可以为元素应用一个或者多个CSS样式类。

利用此属性可以与指定的CSS样式类关联起来,以此达到设置元素样式的功能。

关于CSS类选择器可以参阅CSS class 类选择器一章节。

JavaScript也经常操作HTML元素的class属性,具体参阅如下两篇文章:

(1).className属性可以参阅JavaScript className 属性一章节。

(2).classList属性可以参阅JavaScript classList 属性一章节。

语法结构:

[HTML] 纯文本查看 复制代码
<element class="value">

参数解析:

(1).value:属性值,可以是一个或者多个CSS样式类名,类名之间用空格分隔。

浏览器支持:

(1).IE浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).opera浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title> 
<style>
 .ant{
   width:150px;
   height:60px;
   text-align:center;
   line-height:60px;
   color:red;
   background-color:#ccc;
  } 
</style>   
</head>  
<body>  
<div class="ant">蚂蚁部落</div>
</body>  
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/124703mziuhuxqhii3jxzi.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).为div元素添加class属性,并将属性值设置为"ant"。

(2).同时创建一个class选择器名称为"ant"的样式类。

(3).由于div的class属性值与CSS类选择器名称相同,那么此选择器中属性声明将作用与此div。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title> 
<style>
.a{
  width:150px;
  height:60px;
  text-align:center;
  line-height:60px;
} 
.b{
  color:red;
  background-color:#ccc;
}
</style>   
</head>  
<body>  
<div class="a b">蚂蚁部落</div>
</body>  
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/124728urdy6e0e1qd00kmp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

class属性值可以一次性设置多个样式类,类名之间用空格分隔。

记住是空格,不要想当然的认为使用逗号分隔。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title> 
<style>
.a{
  width:150px;
  height:60px;
  text-align:center;
  line-height:60px;
  background-color:#ccc;
} 
.b{
  color:red;
}
</style>   
</head>  
<body>  
<div class="b" class="a">蚂蚁部落</div>
</body>  
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/124802b8owel92s8q2zesv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码仅字体颜色被设置为红色,说明只有样式类b生效。

通常情况下,后声明的同名属性会覆盖先声明的属性,但是HTML中的属性不一样。

先声明的class属性生效,后面的同名属性直接被忽略。

当然实际应用中要避免这种写法,完全没必要,也是错误的。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部