CSS基础教程:群组化选择器
常常我们的CSS 样式中会有好几个地方需要使用到相同的设定时,一个一个分开写会是一件满累人的工作,重覆性太高且显得冗长,更不好管理....在CSS 语法的基本设定中,就可以把这几个相同设定的选择器合并在一起,原本可能是写了7~8 行相同的语法,合在一起后就只要短短的一小行,怎么看都让人心旷神怡啊~
例如:当有好几个选择器刚好都需要把文字的颜色设定为灰色的时候,一个一个分开写的方法式,感觉就很繁琐,如下:
h1 { color:#; }
h2 { color:#; }
h3 { color:#; }
h4 { color#; }
ul { color:#; }
p { color:#; }
#AAA { color:#; }
#BBB { color:#; }
群组化:把这几个选择器使用逗号合并在一起,就只要短短的一小行,如下:
h1, h2, h3, h4, ul, p, #AAA, #BBB { color:#; }
使用「群组化」选择器 可以使我们的CSS 样式变得比较简洁,将来又好管理和方便修改,这种写法是CSS 语法最基础的功能之一,只要把这一些基础的用法都熟悉了,同学们自然而然就可以练出漂亮的CSS 样式喽~
CSS基础教程:群组化选择器的更多相关文章
- CSS基础教程 -- 媒体查询屏幕适配
响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...
- css 基础教程学习
css基础语法 css语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 如果要定义不止一个声明,则 ...
- HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...
- 【HTML XHTML CSS基础教程(第6版)】笔记之CSS笔记(7~25章)
第7章 CSS构造块 1.在样式表中添加注释 /*内容*/ 2.CSS颜色 rgb(红,黄,蓝) 这三个参数可以用百分号:rgb(35%,0%,50%); 也可以用数字,如上代码就相当于r ...
- CSS基础(三):选择器
常用选择器 元素选择器,即html标记如div,ul,li,p,h1~h6,table等. p { font-size:14px; } h1 { color:#F00; } 复合选择器, 由两个选择器 ...
- CSS基础知识笔记(二)之选择器
CSS选择器 选择器{ 样式; } 每一条css样式声明(定义)由两部分组成,形式如下: 在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元 ...
- CSS基础知识点(二)——选择器
在这一篇中,主要总结一下CSS中的选择器. 参考:http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html CSS中的选择器主要包括 ...
- css3基础教程十三征服CSS3选择器
:enabled选择器 在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等.在默认情况之下,这些表单元素都处在可用状态.那 ...
- div+css基础教程
本文存下来作为备忘. 第一节 了解div+css 一.什么是div+css div元素是html(超文本语言)中的一个元素,是标签,用来为html文档内大块(block-level)的内容提供结构和 ...
随机推荐
- Django之模板语言(四) ------>Tags
案例1:单层for循环 # Django 模板语言测试代码 def template_test(request): name_list=["张三","李四",& ...
- Harvest of Apples (HDU多校第四场 B) (HDU 6333 ) 莫队 + 组合数 + 逆元
题意大致是有n个苹果,问你最多拿走m个苹果有多少种拿法.题目非常简单,就是求C(n,0)+...+C(n,m)的组合数的和,但是询问足足有1e5个,然后n,m都是1e5的范围,直接暴力的话肯定时间炸到 ...
- JavaSE_01_Exception类
1.1 异常概念 指的是程序在执行过程中,出现的非正常的情况,最终会导致JVM的非正常停止. 在Java等面向对象的编程语言中,异常本身是一个类,产生异常就是创建异常对象并抛出了一个异常对象.Java ...
- ES6 class继承
ES6 class继承 class类的继承 class可以通过extends关键字实现继承,这笔ES5的通过修改原型连实现继承要清晰和方便很多. class Point{ } class ColorP ...
- jQuery同步/异步调用后台方法
$.ajax({ type: "Post", url: "UserManage.aspx/SubmitPage",//页面/方法名 data: "{' ...
- JasperReport报表参数9
填充一个报表的主要输入是:报表模板,参数和数据源.本章将介绍这些参数,并在接下来的章节中,我们将介绍数据源. 参数是在报表填充操作传递给报表引擎的对象引用.参数传递有用的数据到报表引擎,它可以不通过数 ...
- Dapper的分页代码
public KeyValuePair<Pagination, IList<AttachmentModel>> AttachmentPagination(Pagination ...
- 有趣的纯CSS实现动态晴阴雨雪
我们先来看看实现的效果吧 非常的美腻,对吧.这个是纯css,且单标签实现的哦~ 先贴完整代码,我们再来看看这个里面究竟有什么可以借鉴的知识点 <!DOCTYPE html> <htm ...
- Spring Cloud Alibaba迁移指南(二):零代码替换 Eureka
自 Spring Cloud 官方宣布 Spring Cloud Netflix 进入维护状态后,我们开始制作<Spring Cloud Alibaba迁移指南>系列文章,向开发者提供更多 ...
- Django项目:CRM(客户关系管理系统)--24--16PerfectCRM实现King_admin日期过滤
登陆密码设置参考 http://www.cnblogs.com/ujq3/p/8553784.html list_filter = ('date','source','consultant','con ...