关于CSS组合与CSS嵌套的写法应用

2016-02-19 16:52 12 1 收藏

今天图老师小编给大家介绍下关于CSS组合与CSS嵌套的写法应用,平时喜欢关于CSS组合与CSS嵌套的写法应用的朋友赶紧收藏起来吧!记得点赞哦~

【 tulaoshi.com - Web开发 】

   比如,你有如下的代码:
  h2 { color: red; }
  .abc { color: red; }
  .abccom { color: red; }
    则你可以这样写:
  h2,.abc,.abccom { 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"
  h1abc.com/h1
  pThis is my recipe for making curry purely with chocolate/p
  pMmm mm mmmmm/p
  /div

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

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

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

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

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

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

延伸阅读
标签: Web开发
Grouping 分组 当许多选择器有同样属性时,可以使用逗号组合它们。 例子: h2 {     color: red; } .thisOtherClass {     color: red; } .yetAnotherClass {     color: red; } 上面的可以写成这样: h2, .thisOtherCl...
标签: Web开发
什么是css框架 实际上还是让我们从框架说起吧。 框架就是一个你可以用于你的网站项目的基本的概念上的结构体。 阅读更多网页教学网CSS框架相关知识: CSS教程关于css框架网页设计 门户网站构建CSS框架的规则 利用CSS框架进行高效率的站点开发 CSS框架的利与弊(上) CSS框架的利与弊(下) 利用CSS框架进行高效率的站点开发 El...
标签: Web开发
在div+css布局中,一般都这样来整体构架的: div id="header"/div div id="center"/div div id="footer"/div 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: div id="header" div id="title"这里是网站的标题/div div id="nav"这里是网站导航栏/div /div 很多人一般都这样写...
定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。 定位的定义 : 在CSS中关于定位的内容是:position:relative | absolute | static | fixed static 没有特别的设定,遵循基本的定位规定,不能通过z-inde...
标签: Web开发
定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。 定位的定义: 在CSS中关于定位的内容是:position:relative | absolute | static | fixed static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。 relat...

经验教程

667

收藏

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