小白的《CSS权威指南》笔记（上部分）

前言

书中言道，本书只涉及CSS2.0和CSS2.1的知识（PS：我是想學CSS3才买的书，看来买错了，没事，当作复习）

CSS的优点

1.丰富的样式
2.易于使用
3.在多个页面上使用样式
4.层叠（也就是选择器有权重的作用）
5.缩减文件大小
6.为将来做准备

元素

文档中的每个元素都对文档的表现起一定作用。
替换和非替换元素
替换元素：指用来替换元素内容的部分并非文档内容直接表示。
例：img

非替换元素：大多数HTML和XHTML。

块级元素和行内元素
块级元素：在元素框之前和之后生成了“分隔符”。
例：p、div
特例：列表项（生成一个标识符）

行内元素：在一个文本行内生成元素框，而不会打断这行文本。
例：a、strong、em

关键属性：display

导入css样式表

link标记：

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />

为了成功地加载一个外部样式表，link必须放在head元素中。

media属性：
all：用于所有表现媒体。
aural：用于语音合成器、屏幕阅读器和文档的其他声音表现。
braille：用Braille设备表现文档时使用。
embossed：用Braille打印设备时使用。
handheld：用于手持设备，如个人数字助理或支持Web的蜂窝电话。
print：为视力正常的用户打印文档时使用，另外还会在显示文档的”打印预览“时使用。
projection：用于投影媒体，如发表演讲时显示幻灯片的数字投影仪。
screen：在屏幕媒体（如桌面计算机监视器）中表现文档时使用。在这种系统上运行的所有Web浏览器都是屏幕媒体用户代理。
tty：在固定间距环境（如电传打字机）中显示文档时使用。
tv：在电视上显示文档时使用。

候选样式表

<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" />
<link rel="stylesheet" type="text/css" href="sheet1.css" title="Big Text" />
<link rel="stylesheet" type="text/css" href="sheet1.css" title="Crazy colors!" />

如果没有为样式表指定title，那么它将作为一个永久样式表（persistent style sheet）。

style元素

<style type="text/css">

style一定要使用type属性。

@import指令

@import url(sheet2.css);

@import出现在style容器中。它必须放在这里。

<style type="text/css">
		@import url(styles.css);/*必须放前面*/
		h1 {
				color:gray;
			}

可以限制所导入的样式表应用于一种或多种媒体

@import url(styles.css) all;
@import url(styles.css) screen print;

作用：一个外部样式表要使用到其他外部样式表中的样式。
原因：外部样式表不能包含任何文档标记，所以不能使用link元素。

@import url(http://example.org/library/layout.css);
@import url(basic-text.css);
@import url(print.css) print;
body {
		color: red;
	 }
h1 {
	color: blue;
	}

向后可访问性

在style内容区添加<!--和-->

<style type="text/css"><!--
@import url(print.css) print;
body {
		color: red;
	 }
h1 {
	color: blue;
	}
--></style>

CSS注释

/*和*/

CSS注释不能嵌套

内联样式（inline style）

直接写在HTML的标签上：

<p style="color: gray;">你好漂亮</p>

注意：不能写在body以外的标签上，如head、title。
一个内联style属性（记住，书上是说属性，不是标签）中只能放一个声明块，而不能放整个样式表。

选择器

规则结构：

h1 { color：red; background: yellow;}

选择器：h1
声明块：{color: red; background: yellow;}
声明：color: red;
属性：color
值：red

元素选择器

p {color: red;}

如果值是无效的，声明自动被忽略。
多个值用空格分开。

选择器分组

有相同样式：，

h2，
p {
 	color: gray;
 }

通配选择器

*：选中所有元素

* {
	margin：0；
	padding：0；
}

类选择器和ID选择器

<p class="warning">你好漂亮</p>
<p><span class="warning">beautiful</span></p>

*.warning {
 		font-weight: bold;
 		  }

一个元素可以添加多个类

<p class="warning urgent">你好漂亮</p>
<p><span class="warning">beautiful</span></p>

*.warning {
 		font-weight: bold;
 		  }
.urgent {
 		color: red;
 		}

选择有多个class属性值的元素（亲测可用）

<p class="warning urgent">你好漂亮</p>
<p><span class="warning">beautiful</span></p>

p.warning.urgent {
		color: red;
	}
	/*只会影响到同时有两个class属性的那个元素。*/

但是，感觉这个功能好像有点鸡肋，也说不出为什么，一种感觉。

ID选择器

<p id="urgent">你好漂亮</p>
<p><span id="warning">beautiful</span></p>

#warning {
 		font-weight: bold;
 		  }
#urgent {
 		color: red;
 		}

id的值只能唯一，一个元素只能有一个id。
（听说实际开发中id属性不能随便使用，由于要和后端数据传输的缘故，可能后端会篡改你设置的id。）

属性选择器

对于类选择器和ID选择器，所做的实际上只是选择属性值。
简单属性选择

h1[class] {
	color: silver;
	}

选择所有使用了class属性的h1元素。

实例：选择使用了alt属性的img元素：
用来诊断不是设计，即用来确定图像是否确实有效。

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可

a[href][title] {
	font-weight: bold;
	}

根据具体属性值选择

a[href="http://www.css-discuss.org/about.html"] {
	font-weight: bold;
	}

根据部分属性值选择

如果属性能接受词列表（词之间用空格分隔），可以根据其中的任意一个词进行选择。

<p class="urgent warning">你好，世界</p>

p[class~="warning"] {
	fony-weight: bold;
	}

如果忽略~，需要完成完全值匹配。

根据部分属性值选择元素

img[title="Figure"] {
	border: 1px solid gray;
	}

可以匹配：
title=“Figure4. A bald-headed elder statesman”
title=“How To Figure Out Who’s In Charge”

子串匹配属性选择器

类型						描述
[foo^="bar"]			选择foo属性值以”bar“开头的所有元素
[foo$="bar"]			选择foo属性值以"bar"结尾的所有元素
[foo*="bar"]			选择foo属性值中包含子串”bar“的所有元素

特定属性选择类型

*[lang |="en"] {
	color: white;
}

这个规则会选择lang属性等于en或者以en-开头的所有元素。

<h1 lang="en">Hello!</h1>
<p lang="en-us">Greatings!</p>
<div lang="en-au">G'day!</div>
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>

选中前三个，后两个不选中。

使用文档结构

DOM树结构
父子关系：如果一个元素出现在文档层次结构中另一个元素的上一层，则称前者是后者的父元素。反之，如果一个元素在另一个元素的下一层，则称前者是后者的子元素。
父子关系是祖先-后代关系的特例

后代选择器

descendant selector，也称为包含选择器或上下文选择器（contextual selector）。

h1 em {
	color: gray;
	}

从右向左读选择器！

特定的后代选择器
就是使用上class

td.siderbar {
	background: blue;
	}
td.main {
	background: white;
	}

选择子元素

在某些情况下，可能并不想选择一个任意的后代元素，而是希望缩小范围。
使用子结合符，即大于号（>）：

h1 > strong {
	color: red;
	}

选中h1的子元素是strong的strong元素。

/*只会选择第一个h1的strong*/
<h1>你好漂亮<strong>真的</strong>没骗你</h1>
<h1>你好<em>吗<strong>?</strong></em>好</h1>

书中：选择作为h1元素子元素的所有strong元素。

选择相邻兄弟元素

对二者具有相同父元素的兄弟元素进行选择。
使用相邻兄弟结合符（adjacentsibling combinator），就是一个记号（+）。

h1 + p {
	margin-top: 0;
	}

选择紧接在一个h1元素后出现的所有段落，h1要与p元素有共同的父元素。

用一个结合符只能选择两个相邻兄弟元素中的第二个元素。
即：h1 + p 只会选择p，并不会把h1选择上。

那么，如果有下面这个结构，要选中ol和ul，怎么办？
注意“+”后面的元素必须是跟在前面那个元素之后的。

<