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 面板的背 ...
随机推荐
- activiti 部署在oracle多用户下不能自动建表问题的解决！
在activiti配置文件中的SpringProcessEngineConfiguration的配置项中添加<property name= "databaseSchema" ...
- mac git 命令提示
直接进入正题: $ brew list 查看你是否已经安装了"bash-completion",如果没有,继续往下看: $ brew install bash-completion ...
- php的DOMDocument 如何判断xml是否存在某节点
在做xml解释时,需要判断是否存在某个节点,查了手册函数,硬是没有发现那个函数有这个功能(如果你知道的话,请留言,博主感激涕零). 下面,就说下博主,经过N多博文,论坛查阅后,得到的一种方法(看到的博 ...
- Thinking in Java——集合(Collection)
一.ArrayList的使用(略) 二.容器的基本概念 (一).Collection是集合类的基本接口 主要方法: public interface Collection<E>{ bool ...
- *1022. D进制的A+B【考前最后一道题】
/* *Main.c *1022. D进制的A+B Ver.1 *Created on : 2014.9.5 *****测试通过****** */ #include <stdio.h> ...
- Http和Socket连接
转自http://hi.baidu.com/%D2%B9%D1%A9%B3%E6/blog/item/d6a72d2bbf467cf2e7cd406d.html 相信不少初学手机联网开发的朋友都想知道 ...
- Java Thread 总结
目 录 线程的概述(Introduction) 线程的定义(Defining) 1) 继承java.lang.Thread类 2) 实现java.lang.Runnable接口 线程的启动(St ...
- 将文件放到Android模拟器的SD卡中的两种解决方法
两种方式:一.窗口界面操作1.打开DDMS页面2.打开File Explorer页,如果没有,在Window --> Show View -->File Explorer3.一般就在mnt ...
- 并发(Concurrency)和并行(Parallelism)的区别
最近在读<real world haskell>里关于并行的一章时,看到作者首先对并发(Concurrency)和并行(Parallelism)的区别进行了定义和解释.以前我对这个问题也是 ...
- （九）boost库之文件处理filesystem
(九)boost库之文件处理filesystem filesystem库是一个可移植的文件系统操作库,它在底层做了大量的工作,使用POSIX标准表示文件系统的路径,使C++具有了类似脚本语言的功能 ...