css式样重用、子选择器和组选择器

css

工作与网页制作有关,最近整理了一些css的东西,发出来,希望有用。

重用:
经常会用到一些基本的式样叠加,比如字体的颜色和加粗。网页中可能同时出现三种情况:1.字体为红色  2.字体加粗 3.字体红色加粗
这时我们只需要定义前两个css:
.red{color:red;}
.b{font-weight:bold;}
第三种情况时用<div class="red b"></div>

子选择器:
相对来说,简化html文件的代码更加重要,因此在css中使用子选择器非常有益,同时也使css代码更加容易理解。比如下面的代码:
<div id="sub_nav">
<ul>
<li> <a href="#">Item 1</a></li>>
<li> <a href="#">Item 2</a></li>
<li> <a href="#">Item 3</a></li>
</ul>
</div>
如果div li a都有各自的式样,采用子选择器,可以省略代码中li 和a 的class属性,从而简化代码:
#sub_nav { /* Some styling */ }
#sub_nav li { /* Some styling */ }
#sub_nav a { /* Some styling */ }
组选择器:
当一些元素类型、class或者id都有共同的一些属性,你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。
例如:定义所有标题的字体、颜色和margin,你可以这样写:
h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用时,有个别元素需要定义独立样式,你可以再加上新的定义,可以覆盖老的定义,例如:
h1 { font-size:2em; }
h2 { font-size:1.6em; }
重用、子选择器和组选择器的灵活使用可以非常有效的减少代码,同时非常有利的增加代码的可读性,具体的应用需要在具体编写过程中体会。

时间: 2024-12-31 22:12:12

css式样重用、子选择器和组选择器的相关文章

CSS命中目标:子选择器、相邻同胞选择器与属性选择器等

在CSS布局网页开发中,我们还会用到一常非常有用的选择器,可以用它来进行整体布局声明,这就是通用选择器.看下面的代码:  代码如下 复制代码 * {     margin:0;     padding:0; } 这种形式的代码一般不会多次出现,在页面代码中出现一次而已,但它的功能是非常强大的,在计算机领域中一般情况下都约定"*"为通配符,它的声明将会作用于页面中所有的可用元素,使用它可以定义一些页面中基本的规则,如边距margin.填充padding.字体font-family.文字大

解析css中30个最常用的选择器

文章简介:30个最常用css选择器解析. 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1. * {    margin: 0;    padding: 0;   } 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的margin和padding设置为0. *选择符也可以在子选择器中使用.

一个CSS元素同时有id选择器和类选择器的例子

一个元素可同时有id选择器和类选择器,但只能有一个id选择器,且id选择器的优先级大于class选择器. 例: html文件内容: <html> <head> <title>一个元素可同时有id选择器和类选择器</title> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body&

css伪类伪元素域高级选择器的介绍

 给链接定义样式 a:link 表示尚未访问的链接,鼠标未划过和点击 a:visited 表示已经访问的链接 a:hover 表示鼠标划入的链接 a:active 表示激活的链接,也就是鼠标点击链接的一瞬间 注意上面这四个链接的伪类在使用的时候要有一定的顺序,即上面列举的顺序,否则看不到效果.可以简单记为LOVE(包含link和visited首字母)和HATE(包含hover和active的首字母). 给段落定义样式 :first-letter 为一行中的第一个字符创建样式 :first-lin

CSS ID选择器与CLASS选择器

  在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素.          属性选择器可以根据元素的属性及属性值来选择元素.   三种基本的选择器类型:标签名选择器.类选择器.ID选择器 具体语法如下:  1.标签名选择器,如: html {color:black;} h1 {color:blue;} h2 {color:silver;} 即直接使用HTML标签作为选择器. 2.类选择器 类选择器允许以一种独立于文档元素的方式来指定样式. 该选择器可以单独使用,也可以与其他元素结合使用

CSS 语法由三部分构成:选择器、属性和值

CSS 语法 CSS 语法由三部分构成:选择器.属性和值: selector {property: value} 选择器 (selector) 通常是你希望定义的 HTML 元素或标签,属性 (property) 是你希望改变的属性,并且每个属性都有一个值.属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration): body {color: blue} 上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色.在上述例子中,body 是选择器,而包括在花括

如何在动态节点上添加CSS式样

问题描述 functionc_ss(){/*新创建的DIV节点*/vara=document.createElement("div");/*得到一个CSS文件,并取出一个CSS式样*/vard=document.styleSheets[0].rules[0];/*现在的问题是:我要怎么弄才能往这个div里面添加d的css式样试了挺多方法都不行,求解答~谢谢了,第一次发帖,不妥之处还请包涵*//*要添加的代码*/?????/*将新创建的div添加到另一个div中*/document.ge

详解强大的jQuery选择器之基本选择器、层次选择器_jquery

jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器.另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器(即选择器插件,参考上篇:jQuery插件原来如此简单--jQuery插件的机制及实战).正是jQuery强大的选择器功能,让它很容易上手,吸引了大批的开发者,本文就来介绍一下强大的jQuery选择器. jQuery选择器类型 jQuery选择器主要分为四类: 1.基本选择器 2.层次选择器 3.过滤选择器 4.表

jQuery选择器之基本选择器与层次选择器

 本文主要是通过表格向大家展示了jQuery选择器之基本选择器与层次选择器,方便大家对比学习,有需要的小伙伴参考下.     基本选择器 基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class和标签名等来查找DOM元素.在网页中,每个id名称只能使用一次,class允许重复使用.   选择器 描述 返回 示例 #id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素 .class 根据给定的类名匹配元素 集合元素 $(