设计、建站、维护
始于2004年
当前位置:首页 > 网站制作

CSS的组合和嵌套

发表日期:2009-3-11 作者来源:派谷网络 浏览次数:8589

    组合

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

    比如,你有如下的代码:

h2 { color: red; }

.thisOtherClass { color: red; }

.yetAnotherClass { color: red; }

    则你可以这样写:

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

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

    嵌套

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

    比如:

#top { background-color: #ccc; padding: 1em }

#top h1 { color: #ff0; }

#top p { color: red; font-weight: bold; }

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

<div id="top">

<h1>Chocolate curry</h1> <p>This is my recipe for making curry purely with chocolate</p> <p>Mmm mm mmmmm</p>

</div>

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

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

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

本文章系本站编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请与本站联系,我们将在第一时间删除内容!

相关网站设计案例

相关推荐新闻

建企业网站注意事项...

建设企业网站时,以下这些方面需要特别留意,以确保网站能够有效...

日期:2025-3-22 浏览次数:286

网站制作中除了域名,还...

在网站制作里,除域名之外,还有诸多因素会对网站推广和品牌建设...

日期:2025-3-21 浏览次数:1625

响应式设计对于网站制作...

响应式设计是一种网站设计技术,可使网站在不同设备(如台式机、...

日期:2025-3-21 浏览次数:1596

网站制作需要注意有什么...

网站制作是一个综合性的工作,需要从多个方面进行考虑和规划,以...

日期:2025-3-21 浏览次数:1279

网站开发语言ASP和A...

ASP(ActiveServerPages)和ASP.NET...

日期:2025-3-21 浏览次数:817

网站建设解决方案
  • 网站维护解决方案
  • 企业门户网站集约化解决方案
  • 营销型网站解决方案
  • 养老院行业网站建设解决方案
  • 医院诊所网站建设解决方案
  • 手机数码行业网站建设方案
  • 外贸公司网站建设解决方案
  • 金融网站建设解决方案
  • 行业协会类网站建设解决方案
  • 品牌官网网站建设方案