前言

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

CSS简介

概述

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

多重样式将层叠为一个

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

层叠次序

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

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于head标签内部)
  4. 内联样式(在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的特殊规则
,这样它就会摆脱父元素的规则。

1
2
3
4
5
6
7
8
9
10
11
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元素变为斜体字,而不是通常的粗体字,可以定义这样一个派
生选择器:

1
2
3
4
li strong{
font-size: italic;
font-weight: normal;
}

注意strong的上下文关系。

1
2
3
4
5
6
7
<p><strong>我是粗体字,不是斜体字,因为我不在列表中,所以这个规则对我不起作用
</strong></p>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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选择器常用于建立派生选择器。

1
2
3
4
5
#sidebar p{
font-style: italic;
text-allign: right;
margin-top: 0.5em;
}

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

一个选择器,多种用法

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#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;
}

在这里,与页面中的其他p元素明显不同的是,sidebar内的p元素得到了特殊处理,同时,
与页面中其他所有h2元素明显不同的是,sidebar的h2元素也得到了不同的特殊处理。

参考链接

to be continued…

本文历史

  • 2019年12月25日 完成初稿,整理笔记花时约1小时。