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 面板的背 ...
随机推荐
- c#中override重写和new隐藏
最近学习c#,昨晚看书看到多态.由于个人本身是从事java开发,于是拿来做对比便是自然的. 进入主题吧. c#中,子类要重写基类的方法,必须要基类声明中带有virtual关键字方法或者带有abstra ...
- 类与对象 - PHP手册笔记
基本概念 PHP对待对象的方式与引用和句柄相同,即每个变量都持有对象的引用,而不是整个对象的拷贝. 当创建新对象时,该对象总是被赋值,除非该对象定义了构造函数并且在出错时抛出了一个异常.类应在被实例化 ...
- django接收和发送json数据
通过json.jumps处理字典数据, 发送给前端 def get_context_data(self, **kwargs): ctx = super(HelpUpdateView, self).ge ...
- Inno Setup：卸载时判断要调用的dll是否存在
原文 http://zwkufo.blog.163.com/blog/static/2588251201072581947474/ [Code]function SuiteRemovedAlert2: ...
- 让C/C++程序一次编译可以发布到多版本Linux之上
最近页游开放平台比较多, 每个平台要求的Linux版本各不相同, 这给开发人员部署服务器带来了很大的困难. 在本机Linux编译的程序,发布时即便将依赖的so附带到目标Linux环境,仍然会碰到依赖及 ...
- EasyUI选项卡tab页面处理示例
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 【ZOJ】3785 What day is that day? ——浅谈KMP在ACM竞赛中的暴力打表找规律中的应用
转载请声明出处:http://www.cnblogs.com/kevince/p/3887827.html ——By Kevince 首先声明一下,这里的规律指的是循环,即找到最小循环周期. 这 ...
- poj 1149 PIGS_网络流
#include<iostream> #include<queue> #include<cstdio> #include<cstring> using ...
- Walking Ant(一道有意思的蚂蚁游戏，bfs)
Walking Ant Time Limit: 2 Seconds Memory Limit: 65536 KB Ants are quite diligent. They sometime ...
- C++ STL中的常用容器浅谈
STL是C/C++开发中一个非常重要的模板,而其中定义的各种容器也是非常方便我们大家使用.下面,我们就浅谈某些常用的容器.这里我们不涉及容器的基本操作之类,只是要讨论一下各个容器其各自的特点.STL中 ...