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

   比如,你有如下的代码:
  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">
  <h1>abc.com</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。
   

时间: 2024-08-03 07:25:44

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

网页设计CSS网页布局:CSS网页布局的未来

文章简介:大家都知道,css有着奇妙的特性,然而让人失望的是,css对基本页面布局上的支持有所欠缺.但是这种情况正在得到改变,更多的动态页面正是由css所支持的,正如peter gasston所说的. 在这里,我能够保证在数年之后,css3必定能够引领潮流.一揽子的前端工具正在应运而生,方便为我们带来rounded corners圆角,gradients渐变,opacity透明度,transformations,transitions,animations,甚至更多效果.但是现在我们都有了fun

CSS高级教程: CSS框架

文章简介:可以从CSS框架中借鉴到什么. 现在很多人会使用 CSS 框架进行快速建站.那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局.表单样式.网格.简单组件.以及样式重置.使用 CSS 框架大大降低工作成本进行快速建站.当然对于一些大型的项目,可能会很难照搬某些框架直接使用的,因为直接使用会带来一些限制或者冗余的问题.但在 CSS 框架已经日趋成熟的今天,在我们设计项目架构.规范的时候,现时市面上一些优秀的框架也可以给我们提供很多可借鉴的地方. 本文主要从几个

CSS网页制作:CSS的面试题和练习

文章简介:如果你处在一个需要面试别人有关于CSS方面技巧和知识,一时想起来还真有点难.我把我能想出来的整理在一起,提供给大家参考. 如果你处在一个需要面试别人有关于CSS方面技巧和知识,一时想起来还真有点难.我把我能想出来的整理在一起,提供给大家参考. 练习要做 正如他们说的,大家实际工作很重要.当然,大家通过工作练习更为重要.这些都是一些练习,并不特别困难,任何人或有没有CSS经验都应该做得到.只看或只听,这样做是没有任何意义的.在CodePen中做练习就挺完美的.   CodePen如何使用

不同CSS技术及其CSS性能之间的差异

 一.为什么我要测试CSS的性能    这是背景:   我是OOCSS(译者注:面向对象CSS)的忠实粉丝.但是最近工作,我一直使用Compass,SASS(译者注:SASS使CSS函数化,有诸如变量,嵌套,混合,继承等特性,需Ruby支持).我有时候感觉到OOCSS和SASS似乎有点古怪.我的一个朋友把我介绍给了Chris Eppstein(Compass的创建者),我们就SASS中的@extend方法进行了探讨.所以我决定创建一个CSS测试页面,用一种很原生态的方式来显示是否SASS的@ex

引人瞩目的 CSS 变量(CSS Variable)

这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变量. 一直以来我们都知道,CSS 中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器. 但是新的草案发布之后,直接在 CSS 中定义和使用变量已经不再是幻想了,像下面这样,看个简单的例子: // 声明一个变量: :root{ --bgColor:#000; }

学习CSS教程:学习CSS网页布局

文章简介:你也许知道什么叫选择器,什么叫属性,什么叫数值,也许你对css布局略懂一二,但这还远远不够.如果你想着从头开始学习HTML和CSS的话,我建议你认真查看下 this tutorial. 否则,在工作的时候,你依然陷入迷惘的泥潭中苦苦挣扎. 这个篇文章介绍的是现在广泛使用于网站布局领域的CSS基础. 你也许知道什么叫选择器,什么叫属性,什么叫数值,也许你对css布局略懂一二,但这还远远不够.如果你想着从头开始学习HTML和CSS的话,我建议你认真查看下 this tutorial. 否则

CssGaga教程:css合并与CSS优化

文章简介:CssGaga – css合并和CSS优化 CssGaga – css合并 勾选合并开启此功能Before: @import url("reset.import.source.css"); @import url("grid.import.source.css"); @import url("mod-1.source.css"); /* mod-1.source.css 中 @import url("media.source.

css 入门教程:css控制input与bottn样式

哈哈今天我们来看看,css 入门教程:css控制文本输入框与按钮的css样式,好了我们先来看看效果图. 现在看到了我的文本输入框是不是淡色的背景与边框哦.现在来看看我们下面是怎么实现的吧.  <p align="center"><input name="" type="submit" class="btn" value="提交"></p>     <p align=

CSS教程之CSS的应用_基础教程

  一.In-line 行内  行内样式是在html标签里直接使用style属性     <p style="color: red">text</p>  设定段落文字红色.  但要记住,最后的HTML应该是独立出来,使用表现文档,所以行内样式应该在任何地方避免.  二.Internal 内部  使用于整个页面的植入内部样式在head标签里面,style标签包围样式.     <!DOCTYPE html PUBLIC "-//W3C//DTD X