1、书写规则
CSS的一个核心特性就是能向文档中的一组元素类型应用某些规则。比如,想让<h1>元素的文本都显示为红色,可以这样写:
h1 {color:red;}
2、声明
声明的格式:一个属性后面跟一个冒号,再后面是一个或多个值(中间用空格分开),然后是一个分号。
3、分组
假设希望h1、h2、p元素都有灰色文本。为达到这个目的,最容易的做法就是用以下声明:
h1,h2,p {color:gray;}
4、通配符
(*)为通配符,表示可以与任何元素匹配。例如,要让一个文档中的每个元素都 为红色,书写规则如下:
* {color:red;}
5、类选择器与ID选择器
类选择器与ID选择器允许以一种独立于文档元素的方式来指定样式。这些选择器可以单独使用,也可以与其他元素选择器结合使用。
类选择器
要应用样式而不考虑具体涉及的元素,最常用的方法就是使用类选择器。为了将一个类选择器的样式与元素关联,必须将该元素的class属性指定为一个适当的值。书写规则如下:
*.jiahei {font-weight:bold;} //CSS样式表中的代码
<p class=jiahei>字体加黑</p> //网页中书写的代码
ID选择器
ID选择器类似于类选择器,不过也有一些重要的差别。一是ID选择器前面有一个#号;二是ID选择器不引用class属性值,它引用id属性中的值。样式规则如下:
#jiahei {font-weight:bold;} //css样式表中的代码
<p id=jiahei>字体加黑</p> //网页中的代码
类选择器与ID选择器到底选哪个呢?
类选择器可以为任意多个元素指定类,ID选择器会使用一次,而且仅一次
6、属性选择器
与类选择器和ID选择器不同,属性选择器可以根据元素的属性及属性值来选择元素。属性选择器可以分为四种:
简单属性选择器
如果希望选择有某个属性的元素,而不论该属性的值是什么,可以使用简单属性选择器。例如:想选择带 class属性的h1元素,可以写为:
h1[class] {color:red;}
根据具体属性值选择
如果想只选择特定属性值的元素,如将所有指向http://www.homebai.com的链接变为粗体。可以写为:
a[href="http://www.homebai.com"] {font-weight:bold;}
根据部分属性值选择
如果属性能接受列表(词之间用空格分开),可以根据其中的任意一个词进行选择。假设class属性中有个"menu item"列表,现在想匹配 class属性值为item的元素。可以按如下格式书写:
p[class~="item"] {font-weight:bold;}
"~"表示部分匹配,如果省略掉就表示需完全匹配。
子串匹配属性选择器
类型 | 描述 |
foo^="bar" | 选择foo属性值以"bar"开头的所有元素 |
foo$="bar" | 选择foo属性值以"bar"结尾的所有元素 |
foo*="bar" | 选择foo属性值中包含"bar“的所有元素 |
特殊属性选择器
例如:*[lang |="en"] {color:red;}
这个规则会选择属性等于en或者以en开头的所有元素。