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

大家都知道现在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. weblogic配置jdbc数据源

    weblogic配置jdbc数据源的过程 方法/步骤   启动weblogic 管理服务器,使用管理用户登录weblogic管理控制台   打开管理控制台后,在左侧的树形域结构中,选择服务->数 ...

  2. inline-block布局方式

    刚研究了一下inline-block布局方式 inline-block布局方式是一种比float浮动更优的一种布局方式. 一个超简单的demo html: <!doctype html> ...

  3. Java编程思想——类型信息(RTTI)

    一.概念 编译时已知的到所有的类型:就是在写代码阶段就确定是这个类型了,当运行程序的时候,类型是不可改变的 举例:List<String> str = new ArrayList();   ...

  4. webpack ------require,ensure

    require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...

  5. Nginx 配置指令的执行顺序(三)

    如前文所述,除非像 ngx_set_misc 模块那样使用特殊技术,其他模块的配置指令即使是在 rewrite 阶段运行,也不能和 ngx_rewrite 模块的指令混合使用.不妨来看几个这样的例子. ...

  6. Inno Setup技巧[实例]添加自定义页面

    原文 http://hi.baidu.com/watashi/item/b3dda993459ff8f0291647a0 通过“添加自定义页面”可以丰富安装程序的功能.本文以添加一个页面“选择安装类型 ...

  7. [转]openlayer+geoserver实现WFS操作

    From:http://liushaobo2005.blog.163.com/blog/static/253056702011541462372/ wfs是OGC的标准规范,主要用于提供对矢量地理数据 ...

  8. HDU1181 变形课 (回溯法)

    变形课 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)Total Submis ...

  9. poj 1083 Moving Tables_dp

    题意:给你n个凳子,接着告诉你一个凳子从a房间到b房间,运输时间为10分钟,走廊很窄能通过一张凳子,当然不堵塞的话能同时扮凳子,问最小花费多少时间 因为数据很小就直接用数组统计了,a,b如果是奇数的话 ...

  10. 最新首发Eclipse+CDT+android-ndk写纯c++安卓应用(附openGL Es)

    首先下载eclipse和cdt.我的版本依次是:Version: Indigo Service Release 2和Version: 1.0.0.201202111925,再下载windows的ndk ...