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>
class属性多个样式的用法的更多相关文章
- jQuery修改class属性和CSS样式
jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...
- 修改input属性placeholder的样式
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQuery DOM操作 、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
- jQuery学习之旅 Item3 属性操作与样式操作
本节将Dom元素的操作:属性操作.样式操作.设置和获取HTML,文本和值.Css-Dom操作. 1.属性操作 <input type="text" name="us ...
- CSSText属性批量修改样式
给一个HTML元素设置css属性 var head= document.getElementById("head");head.style.width = "200p ...
- Vue系列： 如何通过组件的属性props设置样式
比如我们要在vue中显示百度地图,然后将相关的代码包装成组件,然后需要由外部来设置组件的高度,关于props的介绍,可以参考: http://cn.vuejs.org/guide/components ...
- AspNetPager常用属性及一些样式（本文摘自网络，作者：x123jing）
AlwaysShow 总是显示分页控件,即使要分页的数据只有一页 AlwaysShowFirsLastPageNumbr 是否总是显示第一页和最后一页数字页索引按钮 BackImageUrl 面板的背 ...
- MVC4 jquery 样式 主题 用法(案例)
MVC4已经自带了jquery,新建的项目,基本上什么都不用添加就可以运行,跑项目.(集成了那么多东西,jquery,modernizr,自带的默认权限,生成的模板,但是缺没有一个统一的文档或者什么去 ...
- AspNetPager常用属性及一些样式
AlwaysShow 总是显示分页控件,即使要分页的数据只有一页 AlwaysShowFirsLastPageNumbr 是否总是显示第一页和最后一页数字页索引按钮 BackImageUrl 面板的背 ...
随机推荐
- mysql事物处理
mysql事物主要用于处理操作量大,复杂度高的数据.比如说,在人员管理系统中,你删除一个人员,你既要删除人员的基本资料,也要删除和该人员相关的信息,如信箱,文章等.这样,这些数据库操作语句就构成一个事 ...
- golang make the first character in a string lowercase/uppercase
import ( "unicode" ) func UcFirst(str string) string { for i, v := range str { return stri ...
- Linux下MySql出现#1036 – Table ‘ ‘ is read only 错误解决方法
本文为转载内容,感谢原作者.原文出自:http://zhaoxiaoru39.blog.163.com/blog/static/609552192012511104730115/ 我遇到的问题是:在n ...
- oracle中闪回错误的dml操作原理
原理: Oracle根据还原表空间信息,利用还原表空间中的数据,类似一致性读取方法,可以把表置于一个删除前的时间点(或SCN),从而将数据找回. 删除删除错误的dml操作的oracle的前提准备: 一 ...
- 纯CSS3技术 加载中
你能相信吗?这些都是由一个DIV元素实现的动画,纯CSS3技术 html <div class="loader">加载中...</div> css: 图( ...
- UVA 816 Abbott’s Revenge
bfs求最短路,递归打印最短路的具体路径: 难点: 当前状态和转弯方式很复杂,要仔细处理: 递归打印:用一个数组存储路径中结点的前一个节点,递归查找 (bfs无法确定下一个结点,但对于没一个结点,它的 ...
- Linux文件系统学习笔记-1
在Linux中, 一切皆文件,不论是目录,设备,套接字等都可以看成文件,而且每一个文件对应一个inode号,这是一一对应的关系. [root@oracle ~]# ls -il 总用量 2624 ...
- linux命令之mv
linux下的mv即move的意思 该命令的一般形式: mv [选项] 参数1 参数2 选项: -b 如果已存在相同文件名,则覆盖前进行备份 -f ...
- Linux系统中“动态库”和“静态库”那点事儿
摘自http://blog.chinaunix.net/uid-23069658-id-3142046.html 今天我们主要来说说Linux系统下基于动态库(.so)和静态(.a)的程序那些猫腻.在 ...
- Hadoop 7、MapReduce执行环境配置
MR执行环境有两种:本地测试环境,服务器环境 本地测试环境(windows,用于测试) 1.下载Winddows版的Hadoop程序,解压后在Hadoop目录的bin目录放置一个winutils.ex ...