HTML 学习笔记 CSS(选择器)
CSS元素选择器
最常见的CSS 选择器就是元素选择器 换句话说 文档的元素就是最基本的选择器
如果设置HTML样式 选择器通常就是某个HTML元素 比如p h1 em a 甚至可以是HTML本身
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
可以将某一个样式从一个元素切换到另一个元素。
假设您决定将上面的段落文本(而不是h1元素)设置成灰色 只需要把h1改成p
html {color:black;}
p {color:gray;}
h2 {color:silver;}
元素选择器又称为类型选择器。
选择器分组
假设你希望h2元素和段落都有灰色 为达到这个目的 最容易的做法是使用以下声明:
h1,p {
color: gray;
}
将h2和p选择器放在规则左边 然后用逗号分开 就定义了一个规则。其右边的样式(color:gray;)将应用到这两个选择器的元素中。逗号是告诉浏览器 规则中包含多个选择器,如果没有这个逗号 意义将完全不同 后面的章节将会介绍。
可以将任意多个选择器分组在一起 对此没有任何限制。
例如:如果 你想将很多元素显示为灰色 可以使用类似如下的规则。
body, h2, p, table, th, td, pre, strong, em {color:gray;}
提示 通过分组 创作者可以将某些类型的样式压缩在一起 这样就可以更简洁高效。
以下的两组规则能得到同样的效果 可以看出分组选择器在这种情况下 很简洁 容易
/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;} /* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}
通配符选择器
CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。
例如,下面的规则可以使文档中的每个元素都为红色:
* {color:red;}
这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器,只需敲一次键(仅一个星号)就能使文档中所有元素的 color 属性值指定为 red。
声明分组
我们既可以对选择器进行分组,也可以对声明分组。
假设您希望所有 h1 元素都有红色背景,并使用 28 像素高的 Verdana 字体显示为蓝色文本,可以写以下样式:
h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}
但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反,我们可以将声明分组在一起:
h1 {font: 28px Verdana; color: white; background: black;}
这与前面的 3 行样式表的效果完全相同。
注意,对声明分组,一定要在各个声明的最后使用分号,这很重要。浏览器会忽略样式表中的空白符。只要加了分号,就可以毫无顾忌地采用以下格式建立样式:
h1 {
font: 28px Verdana;
color: blue;
background: red;
}
结合选择器和声明的分组
我们可以在一个规则中结合选择器分组和声明分组,就可以使用很少的语句定义相对复杂的样式。
下面的规则为所有标题指定了一种复杂的样式:
h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}
HTML 学习笔记 CSS(选择器)的更多相关文章
- css权威指南学习笔记 —— css选择器
1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器: p>a a是直接是p的 ...
- 前端学习笔记——CSS选择器
学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...
- HTML 学习笔记 CSS(选择器3)
CSS 属性选择器 属性选择器可以根据元素的额属性以及属性值来选择元素 例子1 如果 你希望把包含title的所有元素变成红色 *[title] {color:red} 例子2 与上面类似 可以只对有 ...
- HTML 学习笔记 CSS(选择器4)
CSS 后代选择器 后代选择器(descendant selector)又称为包含选择器.后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则 ...
- HTML 学习笔记 CSS(选择器2)
CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 该选择器可以单独使用 也可以和其他元素结合使用 提示 只要适当的 ...
- [CSS3] 学习笔记-CSS选择器
CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...
- [学习笔记]CSS选择器
CSS语法结构 selector { property1 : value; property2 : value; } 如果包含多个属性,那么属性每个属性的结尾需要有一个分号.如果属性的 ...
- CSS学习笔记——CSS选择器样式总结
<style type="text/css"> * { padding:0; margin:0; } .box h2 { //内边距左边的距离 padding-left ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
随机推荐
- iOS开源项目MobileProject功能点介绍
一:MobileProject简介 MobileProject项目是一个以MVC模式搭建的开源功能集合,基于Objective-C上面进行编写,意在解决新项目对于常见功能模块的重复开发,MobileP ...
- Facebook开源动画库 POP-小实例
实例1:图片视图跟着手在屏幕上的点改变大小 - (void)viewDidLoad { [super viewDidLoad]; //添加手势 UIPanGestureRecognizer *gest ...
- 转大写字母-(ASCII表)
#include<stdio.h> /* 转大写,ASCII表.大写与小写相差32 */ char upper(char c) { if(c>='a'&&c<= ...
- 【代码笔记】iOS-判断textField里面是否有空
一,效果图. 二,工程图. 三,代码. ViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional ...
- XML解析之SAX详解
XML解析之SAX详解 本文属于作者原创 http://www.cnblogs.com/ldnh/ XML解析的五个步骤 1.打开文档 (void)parserDidStartDocument:(NS ...
- Dex Loader] Unable to execute dex: Multiple dex files define
在打包的过程中可能会出现这样的问题,原因是有重复的.jar被引用,可以查看你的build path或Java build path,尤其是Android Dependencies等相关android包 ...
- android Gui系统之SurfaceFlinger(1)---SurfaceFlinger概论
GUI 是任何系统都很重要的一块. android GUI大体分为4大块. 1)SurfaceFlinger 2)WMS 3)View机制 4)InputMethod 这块内容非常之多,但是理解后,可 ...
- Maven基础使用
常用命令 mvn clean:清除maven的编译结果 mvn compile:编译 mvn package:编译.打包 mvn install:编译.打包.部署 –DskipTests:编译测试用例 ...
- ORACLE AWR报告数据的导入导出实践
关于AWR的快照数据可以导出.导入,一直没有亲手实践过.今天动手测试了一下如何导出.导入AWR数据,将AWR的数据从一测试服务器,导入到另外一台测试服务器. SQL> @?/rdbms/admi ...
- [20140928]创建连接到MySQL的连接服务器
首先要安装 mysql odbc 然后 odbc下创建DSN,并且要在系统DSN下. 最后执行 exec sp_addlinkedserver @server= 'XY', --这是链 ...