class属性多个样式的用法
今天看到一个非常好用的样式用法,给已经在睡梦中苏醒的你们来一段代码头脑风暴。
大家都知道现在div+css布局的使用已经不是可以用潮流来概括的了,换个词应该是:普及。
以前的表格布局现在是少之极少,因为表格布局会产生太多的字符数,而且代码版面没有div+css样式来得简洁明了。
很多设计员应该都知道一个样式对应一个class,那么反过来呢,是不是也是一对一的关系?我想不是的,css样式不会局限于此,这就是css样式的强大之一了。
接下来看下class对应多个样式究竟怎么写?为了方便大家查看代码,我就直接复制代码下来了,方便讲解。
大家把目标锁定在加粗的部分,稍微懂一点代码的人都应该可以发现我最后一个div的class是这样的class="bottom content",注意这个bottom和content之间的空格。这样的样式应用是什么意思呢?
这就是我今天要分享的。这种就是样式的交叉应用,也可以称为样式叠加法。
当两个样式之和是你要的第三个样式的时候,你就没有必要在去书写第三个样式了,直接使用样式的交叉使用方法,这样可以省去你很多编写样式的时间。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--来源:http://www.maxhb.net--> <title>无标题文档</title> </head> <style type="text/css"> .top { font-weight:bold} .content {background-color:#F00;} .bottom { font-size:20px;} .yanse {color:#0F0} </style> <body> <div class="top"> 这里单独设置字体加粗! </div> <div class="content"> 这里单独设置字体的颜色! </div> <div class="bottom"> 设置的是字体的大小! </div> <div class="bottom content"> 设置字体的大小和背景颜色! </div> </body> </html>