今天看到一个非常好用的样式用法，给已经在睡梦中苏醒的你们来一段代码头脑风暴。

大家都知道现在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属性多个样式的用法的更多相关文章

  1. jQuery修改class属性和CSS样式

    jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...

  2. 修改input属性placeholder的样式

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

  4. jQuery学习之旅 Item3 属性操作与样式操作

    本节将Dom元素的操作:属性操作.样式操作.设置和获取HTML,文本和值.Css-Dom操作. 1.属性操作 <input type="text" name="us ...

  5. CSSText属性批量修改样式

      给一个HTML元素设置css属性 var head= document.getElementById("head");head.style.width = "200p ...

  6. Vue系列： 如何通过组件的属性props设置样式

    比如我们要在vue中显示百度地图,然后将相关的代码包装成组件,然后需要由外部来设置组件的高度,关于props的介绍,可以参考: http://cn.vuejs.org/guide/components ...

  7. AspNetPager常用属性及一些样式（本文摘自网络，作者：x123jing）

    AlwaysShow 总是显示分页控件,即使要分页的数据只有一页 AlwaysShowFirsLastPageNumbr 是否总是显示第一页和最后一页数字页索引按钮 BackImageUrl 面板的背 ...

  8. MVC4 jquery 样式 主题 用法(案例)

    MVC4已经自带了jquery,新建的项目,基本上什么都不用添加就可以运行,跑项目.(集成了那么多东西,jquery,modernizr,自带的默认权限,生成的模板,但是缺没有一个统一的文档或者什么去 ...

  9. AspNetPager常用属性及一些样式

    AlwaysShow 总是显示分页控件,即使要分页的数据只有一页 AlwaysShowFirsLastPageNumbr 是否总是显示第一页和最后一页数字页索引按钮 BackImageUrl 面板的背 ...

随机推荐

  1. MYSQL分页存储过程及事务处理--转自peace

    MYSQL的分页过程,和事务处理的一个测试过程. /* --名称:MYSQL版查询分页存储过程 by peace 2013-8-14 --输入参数:@fields -- 要查询的字段用逗号隔开 --输 ...

  2. kettle查询出来的真实值被识别为null

    问题描述: 通过关联表查询出来的applyId(申请编号),在数据流里也是能看到的,但是在写入到数据表中的时候,由于设置了这个字段不能为空,所以一直报错. 问题实质: 数据流内存在的数据却不能保存,原 ...

  3. HTML5的结构学习(2) --- 新增的非主体结构元素

    除了上一篇学习到的主体结构元素之外,html5还增加了一些表示逻辑结构和附加信息的非主体结构元素: 1.header 解释:一种具有引导和导航作用的结构元素. 用途:通常用来放置整个页面或者页面内某一 ...

  4. Android性能优化建议

    1.减少View树的高度(多层嵌套) 2.使用<include>重用layout 3.使用<ViewStub>实现View的延迟加载 作用范围:当这个布局在初始化加载时候,不需 ...

  5. 定制化Azure站点Java运行环境(3)

    定制化Azure Website提供的默认的Tomcat和JDK环境 在我们之前的测试中,如果你访问你的WEB站点URL时不加任何上下文,实际上你看到的web界面是系统自带的测试页面index.jsp ...

  6. 并发(Concurrency)和并行(Parallelism)的区别

    最近在读<real world haskell>里关于并行的一章时,看到作者首先对并发(Concurrency)和并行(Parallelism)的区别进行了定义和解释.以前我对这个问题也是 ...

  7. （八）boost库之异常处理

    (八)boost库之异常处理 当你面对上千万行的项目时,当看到系统输出了异常信息时,你是否想过,如果它能将文件名.行号等信息输出,该多好啊,曾经为此绞尽脑汁. 今天使用boost库,将轻松的解决这个问 ...

  8. 怎么去掉word标题前的黑点

    原文地址:http://jingyan.baidu.com/article/9c69d48f593c5b13c9024e2c.html 我们在使用word时,标题前总是出现黑点,其实这个黑点在打印时是 ...

  9. EasyUI选项卡tab页面处理示例

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  10. 电脑中已有VS2005和VS2010安装.NET3.5失败的解决方案

    1.重启 MSI 安装服务: 运行-输入“CMD”命令,在弹出的对话框中输入命令: msiexec/unregserver ,回车,并再次输入 msiexec/regserver . 2.启用 Pri ...