前端三剑客速查笔记之CSS3

前言

本文是css及css3速查表，用于快速查询常用用法。
REF: w3school.com.cn

CSS简介

概述

CSS指层叠样式表（cascading style sheets）
样式定义如何显示HTML元素
样式通常存储在样式表中
把样式添加到HTML4.0中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可层叠为一

多重样式将层叠为一个

样式可以规定在单个HTML元素中、在HTML页的头元素中、或在一个外部的CSS文件中。
样式可以在同一个HTML文档内部引用多个外部样式表。

层叠次序

当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？
以下是规则，其中数字4拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于head标签内部）
内联样式（在HTML元素内部）

CSS基础语法

CSS规则由两个主要部分组成：选择器、一条或多条声明。

1	selector {declaration1; declaration2;...N}

每条声明由一个属性和一个值组成。

1
2
3

selector {property: value}

h1 {color:red; font-size:14px;}

值的不同写法和单位

以颜色为例：

英文单词red
十六进制颜色值 #ff0000，或缩写形式#f00
RGB rgb(255,0,0)或rgb(100%,0%,0%)，注意，0也要写百分号

CSS高级语法

选择器的分组

用逗号将需要分组的选择器分开。

1
2
3

h1,h2,h3,h4,h5,h6{
  color: green;
}

继承及其问题

根据CSS，子元素从父元素继承属性。

1
2
3

body {
  font-family: Verdana, sans-serif;
}

根据上面的规则，站点的body元素将使用Verdana字体（假如访问者系统中存在该字体的话
）。通过CSS继承，子元素将继承最高级元素（在此例中是body）所拥有的元素（这些子元
素诸如p, td, ul, ol, li, dl, dt, dd等）。不需要另外的规则，所有body的子元素都应
该显示Verdana字体，子元素的子元素也一样。在大部分现代浏览器中确实是这样，但是在
以前，如Netscape不支持。

如果不想被所有子元素继承，如希望段落的字体是Times，那么创建一个针对p的特殊规则
，这样它就会摆脱父元素的规则。

body {
  font-family: Verdana, sans-serif;
}

td, ul, ol, li, dl, dt, dd {
  font-family: Verdana, sans-serif;
}

p {
    font-family: Times, "Times New Roman", serif;
}

CSS派生选择器

通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。
派生选择器允许我们根据文档的上下文关系来确定某个标签的样式，使HTML代码变得更加
整洁。

比如，希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以定义这样一个派
生选择器：

li strong{
  font-size: italic;
  font-weight: normal;
}

注意strong的上下文关系。

<p><strong>我是粗体字，不是斜体字，因为我不在列表中，所以这个规则对我不起作用
</strong></p>

<ol>
<li><strong>我是斜体字，这是因为strong元素位于li元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

上面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别
的class或id，代码更加简洁。

strong {
  color: red;
}
h2 {
  color: green;
}
h2 strong {
  color: blue
}

<p>red</p>
<h2>green</h2>
<h2>green <strong>blue</strong></h2>

CSS id选择器

id选择器

<++>

id选择器为特定id的HTML元素指定特定的样式。
id选择器以#来定义。
id属性只能在每个HTML文档中出现一次。

1 2	#red {color:red;} #green {color:green;}

1 2	<p id="red">这个段落是红色的。</p> <p id="green">这个段落是绿色的。</p>

id选择器和派生选择器

在现代布局中，id选择器常用于建立派生选择器。

#sidebar p{
  font-style: italic;
  text-allign: right;
  margin-top: 0.5em;
}

上面的样式只会应用于出现在id是sidebar的元素内的段落中。这个元素很可能是div或者
是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，
比如em或者span，不过这样的用法是非法的，因为不可以在内联元素span中嵌入p。

一个选择器，多种用法

即便标注为sidebar的元素只能在文档中出现一次，这个id选择器作为派生选择器也可以被
使用很多次：

#sidebar p {
  font-style: italic;
  text-align: right;
  margin-top: 0.5rm;
}

#sidebar h2{
  font-size: 1em;
  font-weight: normal;
  font-style: italic;
  margin: 0;
  line-height: 1.5;
  text-align: right;
}