CSS代码组合和嵌套

2016-02-19 23:35 22 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享CSS代码组合和嵌套,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

CSS的组合和嵌套

CSS组合

你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

比如,你有如下的代码:

h2 { color: red; }
.thisOtherClass { color: red; }
.yetAnotherClass { color: red; }

则你可以这样写:

h2, .thisOtherClass, .yetAnotherClass { color: red; }

使用组合,你可以一次定义多个CSS,为你节省很多字节和时间.

CSS嵌套

CSS结构好的话,没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。(或者更好的说法,上下文选择符--译者著)

比如:

#top { background-color: #ccc; padding: 1em }
#top h1 { color: #ff0; }
#top p { color: red; font-weight: bold; }

这就减去不必要的类或者标识选择符,如果应用到像这样的HTML中:

div id="top"
 h1Chocolate curry/h1 pThis is my recipe for making curry purely with chocolate/p pMmm mm mmmmm/p
/div

这是因为,用英文半角空格间隔选择符,我们指明了在标识id内的h1有#ff0的颜色,而p则是红色red和粗体bold。

这可能也会有些复杂(因为可能不止两级,比如在内在内在内在内等等)。你有必要多加练习。

使用嵌套,可以让你的CSS代码读起来更清晰,能给你制定的元素定制CSS.

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1630194.html

延伸阅读
标签: Web开发
SNS的传播主体是人际传播。校内网与Web2.0应用典范的博客相比,校内网利用后发优势,集成了包括博客在内的绝大部分传统人际传播媒介的功能,更简易地实现了主体的多种需求。通过与博客等媒介的比较,归纳出传者的自组织性及去中心化,以隐私性和自主性为前提的高分享度微内容传播,传播符号的多元化,对象群体的同龄化及指定性,传播主体的...
Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种,包括Web服务器的速度、访问者的Internet连接情况,以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度,但是你可以控制构成网站Web页面的文件大小。 为了让网站能够更快,Web的建设者都会按常规地压缩和...
标签: Web开发
这篇是Nicholas讨论如果防止脚本失控的第二篇,主要讨论了如何重构嵌套循环、递归,以及那些在函数内部同时执行很多子操作的函数。基本的思想和上一节trunk()那个例子一致,如果几个操作没有特定的执行顺序,而且互相不是依赖关系,我们就可以通过异步调用的方式加以执行,不止可以减少执行的次数,还可以防止脚本失控。本文还介绍了通过mem...
《圣女之歌2》魔法组合及代码 01.治疗术:M+S 02.冻气术:G+H+L 03.护盾术:Y+S 04.恢复术:G+N 05.催眠术:H+N 06.冰剑术:L+T 07.地之剑:B+T 08.束缚术:B+I+N 09.火箭术:H+K 10.落石术:B+G+K 11.昏眩术:K+S 12.加速术:D+H 13.迅捷术:D+G+H 14.光疗术:D+M+S 15.噬血术:F+S+...
标签: Web开发
现在编写xhtml,我们强烈不推荐此种方法,应该是id,class综合应用。此文章只是讲述一种思维,并非建站过程中的方法! 用标准件的方式来组装网页DIV布局。我把class分为2种:布局class;风格class。 布局class是骨架,风格class是衣服。 举个例子:比如布局中的左栏。首先它的属性有:是左栏,宽度,背景颜色,字体颜色等。...

经验教程

289

收藏

12
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部