html5与CSS3基础教程

第五章：

JPEG 格式:   适用于彩色照片，因为它包含大量的颜色并进行了合理的压缩，采用这种格式保存的文件相对较小。图像的文件变小（且不论是何种格式），下载速度就会变快，访问者就不必等待较长时间才能看到图像。不过，JPEG 是一种有损的格式，因此在将图像保存为JPEG 时会丢失一部分原始信息,且无法还原。

alpha透明：可以控制一个像素透明的程度。也就是说，一个像素可以部分透明，而非要么透明要么不透明。

JPEG 适用于大多数照片，以及其他颜色较多且可接受一些质量损失的图像，颜色1600 万以上，不支持索引色（基本），不支持透明alpha 透明

PNG-8 适用于标识、重复的图案以及其他颜色较少的图像或具有连续颜色的图像，颜色256 ，支持索引色（基本），支持透明alpha 透明

PNG-24 与PNG-8 相似，不过支持颜色更多的图像。适用于颜色丰富且质量要求高的照片，颜色1600 万以上，支持索引色（基本），不支持透明alpha 透明

PNG-32 与PNG-24 相似，不过支持具有alpha 透明的图像，颜色1600 万以上，不支持索引色（基本），支持透明alpha 透明

GIF 用法与PNG-8 相似，在大多数情况下应使用PNG-8 ，颜色256 ，支持索引色（基本），不支持透明alpha 透明

 

第六章

链接有两个主要的部分：目标和标签。

使用目标（destination）可以指定访问者点击链接时会发生什么。可以创建链接进入另一个页面，在页面内跳转，显示图像，下载文件，
呼叫电话，等等。不过，最常见的是连接到其他网页的链接，其次是连接到其他网页特定位置（称为锚，anchor）的链接。
目标是通过编写URL 定义的，通常只能在（桌面）浏览器的状态栏中看到。

标签（label），即访问者在浏览器中看到或在屏幕阅读器中听到的部分。激活标签就可以到达链接的目标。

例如：<a href="cats.html（目标）">Cookie and Woody（标签）</a>

 

如果锚位于另一个文档，就使用<a href ="page.html#anchor-name"> 引用该区域。（ 在URL 和# 之间没有空格。） 如果锚位于另一台服务器上的页面，则需输入
<a href="http://www.site.com/directory/page.html#anchor-name">（没有空格）。


第七章

补充材料“哪些属性会被继承”列出了其他一些会被继承的属性。

以下是会被继承的CSS 属性，我们按照类型对其进行了分组。这些属性中的大多数都将
在本书后续章节进行讲解，不过你可以根据它们的名称猜出其作用。
◎ 文本
‰ color（颜色，a 元素除外）
‰ direction（方向）
‰ font（字体）
‰ font-family（字体系列）
‰ font-size（字体大小）
‰ font-style（用于设置斜体）
‰ font-variant（用于设置小型大写字母）
‰ font-weight（用于设置粗体）
‰ letter-spacing（字母间距）
‰ line-height（行高）
‰ text-align（用于设置对齐方式）
‰ text-indent（用于设置首行缩进）
‰ text-transform（用于修改大小写）
‰ visibility（可见性）
‰ white-space（用于指定如何处理空格）
‰ word-spacing（字间距）
◎ 列表
‰ list-style（列表样式）
‰ list-style-image（用于为列表指定定制的标记）
‰ list-style-position（用于确定列表标记的位置）
‰ list-style-type（用于设置列表的标记）
◎ 表格
‰ border-collapse（用于控制表格相邻单元格的边框是否合并为单一边框）
‰ border-spacing（用于指定表格边框之间的空隙大小）
‰ caption-side（用于设置表格标题的位置）
‰ empty-cells（用于设置是否显示表格中的空单元格）
◎ 页面设置（对于印刷物）
‰ orphans（用于设置当元素内部发生分页时在页面底部需要保留的最少行数）
‰ page-break-inside（用于设置元素内部的分页方式）
‰ widows（用于设置当元素内部发生分页时在页面顶部需要保留的最少行数）
◎ 其他
‰ cursor（鼠标指针）
‰ quotes（用于指定引号样式）

 

CSS权重的问题:选择器权重值的计算

 

第八章：操作样式表

使用与媒体相关的样式表

<link rel="stylesheet" href="style.css" media="screen" />

<link rel="stylesheet" href="print.css" media="print" />

　通过对link 元素添加media 属性， 可以将样式表限于特定输出。在这个例子中，使用浏览器查看页面时，style.css 会起作用（由于使用了media="screen"）；打印页面时，print.css 会起作用（由于使用了media="print"）。如果第一个link 元素包含了media="all" 的设置，或者没有media 属性，style.css 中的规则也会应用到打印页面。

/* 针对所有媒体的样式 */
img {
border: 4px solid red;
}
p {
color: orange;
font-style: italic;
}
/* 打印样式表 */
@media print {
body {
/* 加大字号 */
font-size: 25pt;
}
p {
/* 黑色的十六进制值 */
color: #000;
}
img {
/* 不显示图像 */
display: none;
}
}

 

第九章：定义选择器

伪元素、伪类及CSS3 语法
在CSS3 中，:first-line 的语法为::first-line，:first-letter 的语法为::firstletter。注意，它们用两个冒号代替了单个冒号。这样修改的目的是将伪元素（有四个，
包括::first-line、::first-letter、::before 和::after） 与伪类（ 如:first-child、:link、:hover 等）区分开。

伪元素（pseudo-element）是HTML 中并不存在的元素。例如，定义第一个字母或第一行文字时，并未在HTML 中作相应的标记。它们是另一个元素（在本例中为p 元素）的部分内容。

相反，伪类（pseudo-class）则应用于一组HTML 元素，而你无需在HTML 代码中用类标记它们。例如，使用:first-child 可以选择某元素的第一个子元素，你就不用写成
class="first-child"。更多关于伪类的内容，请参见下一节。

未来，::first-line 和::first-letter 这样的双冒号语法是推荐的方式，现代浏览器也支持它们。原始的单冒号语法则被废弃了，但浏览器出于向后兼容的目的，仍然支持它们。
不过，IE9 之前的Internet Explorer 版本均不支持双冒号。因此，你可以选择继续使用单冒号语法，除非你为IE8 及以下版本设置了单独的CSS（参见http://reference.sitepoint.com/css/conditionalcomments）。

第十章：为文本添加样式

选择字体

虽然font-family 属性是继承的，但有几个元素不会继承父元素的字体设置，其中有表单的select、textarea 和input 元素

1em ＝ 16px，该值应该是相对于这些元素的父元素的。

CSS3 引入了一些新的单位，其中很有意思的一个便是rem（root em 的简称）。它同em 很像，不过它总是以根元素为参照系设置其他元素的字体大小，而不是父元素。

Internet Explorer 直到IE9 才开始支持它（http://caniuse.com/#search=rem）。

第11章用CSS进行布局

如果不显式设置宽度和高度，浏览器就会使用auto。对于大多数默认显示为块级元素的元素，width 的auto 值是由包含块的宽度减去元素的内边距、边框和外边距计算出
来的

第12章 构建响应式网站