本系列文章的绝大多数内容都来自 w3cschool, 表示感谢。
1. 基础语法
- CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。selector {declaration1; declaration2; ... ; declarationN }
- 选择器通常是需要改变样式的 HTML 元素。
- 每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。selector {property1:value1; property2:value2; ... }
- 如果值是由多个单词构成的，要加引号：p {font-family:
"sans serif";} - 多个声明之间用分号隔开。最后一个分号不是必须的
- css本身是大小写不敏感的，但是如果css中出现了html中的id或者class，就会区分大小写
2. 选择器
- 可以对选择器进行分组，被分组的选择器就可以分享相同的声明
- 用逗号将需要分组的选择器分开，比如 h1, h2, h3 {color:green;}
- 子元素一般会从父元素继承属性。比如body {font-family:verdana; }, p {color:red}，其中p也会继承body的font-family属性。但是一些浏览器不支持继承
- 如果不想继承，就为子元素编写新的属性值，比如p {font-family:Times; color:red; }
3. 派生选择器
- 派生选择器允许根据文档的上下文关系来确定某个标签的样式。比如li strong {font-style: italic; }，只有<strong></strong>应用于<li></li>之间时，才会有效，否则不起作用。
4.id选择器
- id选择器为标有特定id的HTML元素指定样式
- 以#来定义，比如#test {color:red; }，id为"test"的HTML元素的文本都会是红色的(如果没有其他样式共同作用)
- id选择器常用来定义派生选择器，比如#sidebar p {color:red; }，表示该样式只会对id为"sidebar"的元素中的段落起作用
- 假如要将一个样式指定应用到id为"sidebar"的div(而不能应用到id为"sidebar"的table)，可以写div#sidebar
- 在一个文档中，同一个id，只可能出现一次
- id选择器不能结合使用，即不能出现<div id="id1 id2" />的写法
- 尽管css本身不区分大小写，但是元素的id区分大小写
5. 类选择器
- 类选择器为标有特定class属性的HTML元素指定样式
- 以.来定义，比如.center {text-align:center}。这个样式会作用于class="center"的元素，让该元素的文本居中
- 类选择器也常用来定义派生选择器，比如.fancy td{... ...}。该样式只会对class包含"fancy"的元素内的td起作用
- td.fancy{... ...}表示该样式只会对class包含"fancy"的td起作用，对其他元素（即便class包含"fancy"）不起作用
- 元素的class属性值可以有多个类选择器，比如class="fancy1 fancy2", 此时，fancy1和fancy2的样式都会作用于这个元素，是叠加的效果
- .fancy3.fancy4{}这种选择器，将只会匹配class中既包含fancy3又包含fancy4的元素，顺序不限
- 尽管css本身不区分大小写，但是类名区分大小写
6. 属性选择器
- 对带有指定属性的HTML元素设置样式
- IE6或者更低版本的浏览器不支持属性选择器
- [title] {...} 表示该样式只会对设置了title的HTMl元素起作用，没有设置title的元素不受影响
- [title=test] {...} 表示该样式只会对设置了title，并且title="test"的元素起作用
- [title~=test] {...} 表示该样式只会对设置了title，并且title中有某个单词是test的元素起作用，这些单词之间是通过空格分开的。title="test", title="test css"或者title="css test example"都会受其影响，但是title="testcss"不会受影响
- [title|=test] {...} 表示该样式只会对设置了title，并且title中有某个单词是test的元素起作用，这些单词之间时通过连字符分开的。title="test", title="test-zh", title="test-zh us"都会受其影响，但是title="test -zh"不会受影响
- input[type="button"] {... ...} 表示该样式只会对button起作用
7. 使用css
- 外部样式表：在页面文件之外，编写css文件，将样式全部放入css文件，并在页面上引用css文件。引用代码为<link rel="stylesheet" type="text/css" href="...">
- 内部样式表：直接写在页面文件的<head></head>之间的样式表，当某个页面文件自己需要特定的样式表时，可以使用内部样式表
- 内联样式：在HTML元素中使用style="... ..."定义。一般不推荐这种方式，它将表现和内容混合在一起
- 如果某个元素在不同的样式表中被同样的选择器定义，那么重叠的样式将会按照 内联样式 > 内部样式表 > 外部样式表的顺序确定最终的样式