Notes On <The Definitive Guide to HTML5> - 02

Chapter 16: CSS in Context

CSS的选择器，与样式属性的总汇。

The CSS Selectors

Selector	Description	CSS Level
<selector>, <selector>	Selects the union of the elements matched by each individual selector.	1
<selector> <selector>	Selects elements that match the second selector and that are arbitrary descendants of the elements matched by the first selector.	1
<selector> > <selector>	Selects elements that match the second selector and that are immediate descendants of the elements matched by the first selector.	2
<selector> + <selector>	Selects elements that match the second selector and that immediately follow an element that matches the first selector.	2
<selector> ~ <selector>	Selects elements that match the second selector and that follow an element that matches the first selector.	3

Chapter 17: Using the CSS Selectors - Part 1

基本的选择器

根据属性筛选：

Conditions for the Element Attribute Selector

Condition	Description	CSS Version
[attr]	Selects elements that define the attribute attr, irrespective of the value assigned to the attribute (this is the condition shown in Listing 17-6).	2
[attr="val"]	Selects elements that define attr and whose value for this attribute is val.	2
[attr^="val"]	Selects elements that define attr and whose value for this attribute starts with the string val.	3
[attr$="val"]	Selects elements that define attr and whose value for this attribute ends with the string val.	3
[attr*="val"]	Selects elements that define attr and whose value for this attribute contains the string val.	3
[attr~="val"]	Selects elements that define attr and whose value for this attribute contains multiple values, one of which is val.	2
[attr|="val"]	Selects elements that define attr and whose value is a hyphenseparated list of values, the first of which is val.	2

联合选择：使用逗号分隔不同的选择器。<selector>, <selector>, <selector>

选择后代元素：空格。<first selector> <second selector>

选择直接子元素：“>”符号。<first selector> > <second selector>

（下面略。。。）

Chapter 18: Using the CSS Selectors - Part 2

（部分略。。。）

选择默认元素，使用 :default可以从一组元素中选择默认元素，比如form中的submit按钮。

动态伪类选择器， :link与 :visited，需要注意的是，当通过 :visited选择连接元素时，能修改的属性只有颜色和字体。

:active选择器，不仅仅是那些可以与用户交互的元素才可以使用:active，广义来讲，鼠标盘旋的元素都是active状态。

Chapter 19: Using Borders and Backgrounds

边有三个属性：宽度、样式和颜色。其中样式的可选值有9个。除了none表示没有边以外，其它八种的预览如下：

当使用圆角的边时，需要注意的是，圆角的边可能会与内容重叠，如果想要增加内容与边之间的空隙，你得自己用padding来控制。

使用图片来作为边：

CSS3里支持将一张图片进行九宫格的切分，然后将最外面的八片用来做元素的边。

所以你需要制定裁切的尺寸，以图中所示的30px为例：

p {
-webkit-border-image: url(bordergrid.png) 30 / 50px;
-moz-border-image: url(bordergrid.png) 30 / 50px;
-o-border-image: url(bordergrid.png) 30 / 50px;
}

这个语法里，先是指定用来做边的图片文件（bordergrid.png），裁切尺寸（30px），还有边的宽度（50px）。默认情况下，它的效果会是：

所以这就涉及到一个新的属性，即：border-image-repeat，它的意思实际上是图片裁切后尺寸小于实际位置时，如何处理。它有四个可能的值，其含义分别为：

border-image-repeat 值

值	描述
stretch	The slice is stretched to fill the space (this is the default).
repeat	The slice is repeated to fill the space (this can lead to fragments of repeating).
round	The slice is stretched and repeated to fill the space without creating fragments.
space	The slice is repeated without creating fragments. Any remaining space is distributed around the slice.

背景：

这个部分同之前的CSS2相比，没有太大的变化，所以我想略去。

阴影：

box-shadow: hoffset voffset blur spread color inset

轮廓（outline）

轮廓与边的不同之处在于，轮廓不被考虑为页面的一部分，它不会导致页面布局被重新调整。

Chapter 20: Working with the Box Model

实际上这一章的内容正是在我看来HTML的规则中最晦涩的地方，很多时候当我们不理解一个元素为何不是出现在我们预期的地方时，那是因为对于浏览器如何按照CSS的规则来摆放HTML元素仍然不够深入理解，可是这一章作者写的很短。我将不会按照作者原本对本章内容的组织方式来总结。

位置与尺寸

这是设计者面临的第一个问题。在CSS规则中，影响一个元素的位置的，除了直接和它的位置有关的属性外，还有padding和margin，而有一个规则就是，假如你在使用百分率的值来指定它们，浏览器会用容器元素的宽，来计算这些值，无论你指定的是padding或margin的水平方向的量还是垂直方向的。甚至一个元素自身的宽和高，如果你是用百分率的形式来指定的，它们也是通过它们的容器的宽度来计算的。

可视性

在新标准里，属性visibility的有效值多了一个：collapse。不过目前只有Firefox支持。它只能用来table里的tr、td元素。它与hidden的区别是，它不仅会不见，而且也不会占据空间。

盒子属性（Box Type）

虽然标题很奇怪，它实际上的含义是类似一种“渲染模式”，也就是说，浏览器是用何种方式来在屏幕上绘制页面中的一个HTML元素的。它其实讨论的是display属性。而它的规则比较复杂。在HTML4里，很多时候它所做的事情好像与visibility有所重叠，很多利用Javascript做的复杂效果是通过它们来完成的。

display属性的值

Value	Description
inline	The box is displayed like a word in a line of text.
block	The box is displayed like a paragraph.
inline-block	The box is displayed like a line of text.
list-item	The box is displayed as a list item, typically with a bullet or some other kind of marker (such as an index number).
run-in	The type of box is dependent on the surrounding elements.
compact	The type of box is either a block or a marker box (similar to that produced by the list-item type). At the time of this writing, mainstream browsers do not support this value.
flexbox	This value relates to the flexible box layout, described in Chapter 21.
table  inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption	These values relate to laying out elements in a table. See Chapter 21 for details.
ruby ruby-base ruby-text ruby-base-group ruby-text-group	These values relate to laying out text with ruby annotations.
none	The element isn’t visible and takes no space in the layout.

理解Block-Level元素

这种类型的元素的特征是，在垂直方向上，它与它周围的其他内容是分离的，就相当于你在它的前面和后面都加了一个换行符。在HTML中的很多元素默认的模式就是Block-Level，因为它们的display属性的默认值是block。比如p标签。但其实你可以把任何元素的这个属性赋值block。

理解Inline-Level元素

这种元素的显示方式刚好同Block相反，它与上下文显示在一起。如果一个元素的display被设置为inline，那么它的某些属性会失效，比如：width，height和margin。

理解Inline-Block元素

这种元素的显示方式混合了前两者，首先，它与上下文显示在一起，其次，它的width，height和margin等属性仍然有效，于是，结果就会是看起来一个元素占据的空间超过了显示它实际需要的空间，这样一个元素被插入到一个段落中。

理解Run-In元素

当浏览器遇到这个设定时，它会根据这个元素的内容以及上下文来确定这个元素究竟是block还是inline。

通过none隐藏元素

如果一个元素的display属性值为none，那么它及其子元素将不占据任何空间。

创建浮动元素

这个东西太复杂，在HTML4里我就用得不是很好，先搁置。

Chapter 21: Creating Layouts

这一章介绍的内容非常非常有用，因为很多时候我们会抱怨一个HTML中的元素没有出现在我们期望的位置。

指定内容的位置

在CSS中有三组重要的属性与一个元素的位置有关：

Property	Description	Values
position	Sets the positioning method.	See Next Table
left right top bottom	Sets offset values for positioned elements.	<length> <%> auto
z-index	Sets the front-to-back ordering of elements.	number

position的值可以有四个：

Value	Description
static	The element is laid out as normal (this is the default value).
relative	The element is positioned relative to its normal position.
absolute	The element is positioned relative to its first ancestor that has a position value other than static.
fixed	The element is positioned relative to the browser window.

上面两张表里所展示的属性是应该搭配在一起使用的，用left，top等属性来指定一个元素的位置的偏移量，而position属性指定的是这个元素的偏移量相对于什么坐标来计算。下面是书中用来展示的示例代码：

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<style>
		img {
			top: 10px;
			left:150px;
			border: medium double black;
		}
	</style>
</head>
<body>
	<p>
		There are lots of different kinds of fruit - there are over 500 varieties
		of banana alone. By the time we add the countless types of apples, oranges,
		and other well-known fruit, we are faced with thousands of choices.
	</p>
	<p>
		One of the most interesting aspects of fruit is the variety available in
		each country. I live near London, in an area which is known for
		its apples.
	</p>
	<img id="banana" src="timthumb.jpg" alt="small banana"/>
	<p>
		When travelling in Asia, I was struck by how many different
		kinds of banana were available - many of which had unique flavours and
		which were only avaiable within a small region.
	</p>
	<p>
		<button>Static</button>
		<button>Relative</button>
		<button>Absolute</button>
		<button>Fixed</button>
	</p>
	<script>
		var buttons = document.getElementsByTagName("BUTTON");
		for (var i = 0; i < buttons.length; i++) 
		{
			buttons[i].onclick = 
			function(e) 
			{
				document.getElementById("banana").style.position = e.target.innerHTML;
			};
		}
	</script>
</body>
</html>

为了展示效果，需要把窗口拉小一些。在Firefox里的结果如下：

首先先来看看position的值为static时的情况，在这个情况下，其实top和left的设定是无效的，即使在FireBug里修改它们的值，图片的位置也是不会有任何变化，它的位置完全由浏览器的布局管理器来根据HTML的摆放规则处理。如图：

下面来看看relative的情况，在这个时候，top同left的设定值才终于生效，它们相对的坐标是这张图片原本应该存在的位置，就是说这张图片以上一个截图里为参考，被向右移动了10px，向下移动了150px。

现在来说说absolute，按照说明，这个情况下，这个元素的位置是以它的“第一个position为非static值的始祖元素”为参考的，top和left值即是按照该始祖元素的坐标系来生效的。

如上图所见，因为在img的始祖元素中，没有任何一个的position属性是非static，也就是说它们都是默认的static，那么浏览器就会以body元素来作为参考坐标系，也就是说以body元素的零点为准，向右移动10px，向下150px。不过图像完全与其他内容重叠。可是如果我们不指定top或left的值，浏览器会怎样摆放它呢？比如在relative的情况，如果我们不指定，那么同指定它们等于0的效果是一样的。可是在absolute的情况下：

在上图中，我关闭了CSS规则中的top属性的应用，结果是浏览器自己给图片指定一个top值，这个值为：

但是实际上，如果改变浏览器的窗口尺寸，这个值会不同，也就是说浏览器在自动计算这个值的时候，浏览器窗口的大小也会被考虑进去。可是它究竟是按照怎样的逻辑计算的，我们并不知道，书本没提到。

现在看看最后一个情况fixed，这个情况下，图片的位置相对于窗口，这样的一个效果就是，图片永远都是出现的，它不会被随着内容被移动而消失，所以当你拖住滑块时，效果就像是图片浮在页面上。

以上内容在Chrome和Firefox中测试的效果是一样的。至于z-index属性，就忽略不讲了，与HTML4没什么区别。

其实下面三个小节的内容是非常有用的，它们是关于如何获得一种灵活的网页整体布局，目前这些效果是通过复杂的CSS+DIV标签来做到的。当然也有一些CSS框架来做这个事情。可是我不得不略去下面的三节，原因就是这里面所讲的新功能目前基本上还没有被几个主流浏览器支持。

创建多列布局

创建灵活区块布局

创建表格布局

Chapter 22: Styling Text

（本章略。。。）