CSS基础教程:群组化选择器

常常我们的CSS 样式中会有好几个地方需要使用到相同的设定时,一个一个分开写会是一件满累人的工作,重覆性太高且显得冗长,更不好管理....在CSS 语法的基本设定中,就可以把这几个相同设定的选择器合并在一起,原本可能是写了7~8 行相同的语法,合在一起后就只要短短的一小行,怎么看都让人心旷神怡啊~

例如:当有好几个选择器刚好都需要把文字的颜色设定为灰色的时候,一个一个分开写的方法式,感觉就很繁琐,如下:

  1. h1 { color:#666666; }
  2. h2 { color:#666666; }
  3. h3 { color:#666666; }
  4. h4 { color:#666666; }
  5. ul { color:#666666; }
  6. p { color:#666666; }
  7. #AAA { color:#666666; }
  8. #BBB { color:#666666; } 

群组化:把这几个选择器使用逗号合并在一起,就只要短短的一小行,如下:

  1. h1, h2, h3, h4, ul, p, #AAA, #BBB { color:#666666; } 

使用「群组化」选择器 可以使我们的CSS 样式变得比较简洁,将来又好管理和方便修改,这种写法是CSS 语法最基础的功能之一,只要把这一些基础的用法都熟悉了,同学们自然而然就可以练出漂亮的CSS 样式喽~

时间: 2024-08-29 14:10:53

CSS基础教程:群组化选择器的相关文章

css基础教程

什么是CSS?它能做些什么? CSS实用教程(一) CSS实用教程(二) CSS实用教程(三) CSS实用教程(四) CSS实用教程(五) CSS实用教程(六) CSS产生的特殊效果 CSS样式表高效使用的技巧 使用不同的CSS写法-CSS进阶 CSS的字体.字型控制 利用CSS改善网站可访问性 给你的网页加上两种以上的文字链接效果 式样单的例子 深入透析样式表滤镜(上) 深入透析样式表滤镜(下) 关于CSS中的类-CLASS

css基础教程之网页结构布局

从本篇开始讲述如何用css实现网页的布局,即如何用css控制网页内各个元素的显示位置.如果你是一个初学者,很可能觉得做一个网页的第一步就是布局.其实不然,css网页的设计过程可以参考分为以下几步: 平面设计->页面切割->布局->细节控制 平面设计是一个网页的精髓所在,读者直接面对的界面,在本站以后的文章中会涉及此方面内容.也许你会认为在脑子里形成一个网站的大概印象就可以了,那么这种想法直接就给你贴上业余的标签.推荐工具:Photoshop: 页面切割其实可以划分到布局里,因为你的页面切

css基础教程:如何让一行并列显示多张图片

许多人在用表格制作网页时,利用ASP或PHP循环输出,经常会碰到如何一行显示多张图片的问题. 下面给出一个简单的例子来实现这个效果. 大家可以举一反三.通过DIV+CSS来布局不但使得代码简洁多了,效果也达到了,要维护性更好了. [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

[CSS基础教程]background属性详细解析

CSS背景图像属性background详细解析 CSS的背景属性"background"提供了众多属性值,如颜色.图像.定位等,为网页背景图像的定义提供了极大的便利.看看background提供的属性值: background : background-color  | background-image  | background-repeat  | background-attachment  | background-position 从属性值的名字就可以很明白的看出来,分别是:颜

CSS基础教程:水平对齐(text-align)

水平对齐(text-align),用以设定元素内文本的水平对齐方式. 1.语法 text-align具体参数如下: 语法:text-align : left | right | center | justify 说明:设定元素内文本的水平对齐方式. 参数:left : 左对齐;right : 右对齐;center : 居中;justify : 两端对齐 初始值:跟浏览器的设置有关 继承性:可继承 适用于:block元素 其各参数在浏览器内的显示如图1所示. 图1 水平对齐方式 前三种对齐方式都很

[CSS基础教程]常见的DIV+CSS布局日期显示在右侧的效果

以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

《Web前端开发精品课 HTML与CSS进阶教程》——第一部分 HTML进阶第01章 HTML基础知识1.1 HTML和CSS进阶简介

第一部分 HTML进阶 第01章 HTML基础知识 1.1 HTML和CSS进阶简介 1.1.1 你真的精通HTML和CSS吗 我们都知道,前端技术最核心的三大技术是HTML.CSS和JavaScript.HTML定义网页的结构,CSS定义网页的外观,而JavaScript定义页面的行为.其中HTML和CSS是前端技术中最基础的东西. HTML和CSS入门容易,精通却很难,特别是CSS."什么?精通很难?我很确定我已经精通CSS了啊!"这种话往往是出自学习三两个月.技术刚入门的人之口.

《Web前端开发精品课 HTML与CSS进阶教程》——2.4 表格语义化

2.4 表格语义化 不少初学者看了<Web前端开发精品课HTML和CSS基础教程>(本书的姊妹篇)跑来问:"不是说表格布局已经被抛弃了吗?为什么还要在书里讲解表格呢?这不是多此一举吗?"其实不然,在实际开发中,我们不建议使用表格布局,应该使用浮动布局或者定位布局.虽然表格拿来做布局的方式被抛弃了,但是这并没有说明表格就一无是处了. 问大家一个问题:如图2-5所示的这种表格数据的展示,应该怎么实现呢?不少得了"table恐惧症"的小伙伴可能会想到使用div

CSS应用基础教程(2) 应用方式

css|基础教程 C S S 的 声 明 方 式 这章节将开始为您介绍CSS的应用.当然一开始要介绍的是如何去建立个样式表 (Style Sheets),包括了声明的方式和应用在网页上的方法,最後还会为您概述一下CSS的一些特性.概略来说,CSS的声明有三种方式: 一.基本声明:最典型的CSS声明方式. element {property: value} 用中文来表示的话,也就是元件(标签) {性质(属性)名称: 设定值}例如: H3 {COLOR: BLUE} 即为一组声明.二.集体声明:同时