【CSS Cookbook】笔记摘要（一）

概要

　　CSS的优点：将表现和内容相分离；更好地控制页面布局；大大减少了文件尺寸；缩短了改版时间；提高了易用性。

　　CSS全称层叠式样表（Cascading Style Sheets）。

　　1.问题：如何最有效地使用类选择符和ID选择符？

　　回答：但要在文档中多次引用同一个样式时可以使用类选择符，如果样式只使用一次，则可以考虑ID选择符。

　　2.问题：如何让自己的网页标准化、合法化？

　　回答：HTML4.01有3种文档类型：strict、transitional和framset。XHTML1.1有一种文档类型，但XHTML1.0有3种，就像HTML4.01一样，HTML文档中只能选择一种文档类型定义。文档类型（DOCTYPE），简称DTD，定义了HTML和XHTML稳定的建筑块，同时告诉浏览器和验证器你的文档使用的HTML或XHTML的版本。每一个Web页面都必须有文档类型声明，这个声明放在HTML元素之前，这样才能保证标签和CSS是符合标准的，浏览器才会用合适的文档类型来处理网页。XHTML要求必须有文档类型，否则页面就是无效的，浏览器也会陷入quirk模式，用意想不到的方式去解析页面，会讲网页标签的书写方式当成非法的。因此即使这些XHTML和CSS代码完美无缺，浏览器也不能正确地渲染页面。W3C组织提供了HTML验证器和CSS验证器，可用于检验文档的正确性。但如果没有文档类型定义，验证器也只能束手无策。没有定义文档类型，或者定义的文档类型比较老，或者文档类型的定义方式不正确，都会导致浏览器用quirks模式错误地渲染页面。有的情况下，与浏览器有关，部分内容会根据W3C的指示生成。

　　3.问题：希望给予窗口定位元素，而不仅仅将元素局限于默认位置。

　　回答：在样式表中用position属性进行绝对定位，并使用bottom、left属性，也可以一起使用进行元素定位。使用绝对定位来设计网页，内容的放置方式将不再受默认的页面布局流影响，我们可以利用CSS属性将元素很好不差地放在当前窗口或箱盒的任何位置。

 

 

网页排版

　　1.问题：如何为网页中的文本设定字体。

　　回答：使用font-family属性。可以给font-family设置多个值，各值以逗号分隔，告诉浏览器生成需要的字体。如果浏览器不能解释第一种字体，就会尝试去解释下一种，知道找到可以解释的字体为止。如果font名中包含空白，例如Times New Roman，则要用单引号或双引号把font名括起来。在font值列表的最后，应该插入一个通过用的字形体系(serif、sans-serif、monospace、cursive、fantasy)。

　　2.问题：减少标题和段落之间的空白。

　　回答：将标题和段落元素的margin和padding均置为0。为了消除视点（有时指浏览器窗口）和元素之间的空白，我们需要把body元素的margin和padding值设为0。

　　3.问题：段落的首字符是大写字符。

　　回答：p:first-letter{font-size:1.2em}

 

图片

　　background-position属性包含了两个值，这两个值以逗号分隔。第一个值决定了点在x轴上的坐标，第二个值决定y轴上的坐标。如果只给出一个值，那么它代表了水平位置，垂直位置在这种情况下会被设为50%。将background-position设为50%意味着将图片放置于浏览器视窗的正中央。0%和100%也就是分别将图片放在视窗的左上角和右下角。除了百分比，还可以利用其他值定位，比如y轴方向可用为top、center和bottom，x轴方向的可用left、center和right。如果绑定使用这些值就可以将图片放置在视窗各边的八个点上。但是Netscape Navigator4不支持background-position属性，目前尚未找到用CSS解决局限的有效方法。

　　GIF和JPEG是网站上最常用的两种图片格式，这两种格式以不同的方式压缩图片。GIF格式比较适合压缩色彩层次较简单的图片，而JPEG更适合用户压缩色彩层次分明的图形或相片。

　　当创建流式布局或柔性布局时，列单元中的HTML文本会自动适应浏览器窗口大小的变化。然而，那些通常用像素来设置尺寸的图片却只能保持固定大小。为了使所有页面元素在柔性布局中按比例缩放，应该使用百分比来设置宽度和高度。但是如果用百分比设置图片的长宽，浏览器拉伸图片至一定限度时，将会破坏页面的布局和完整性。例如，过度拉伸JPEG图片，将使图片中几乎不可见的事物可见或者像素看起来不在其原来的位置且图形歪斜。为了解决这个问题，可以使用max-width属性设置图片宽度的最大值。

　　没有绝对安全的图片。首先，为了提高加载页面的速度，图片会自动保存在浏览器和临时文件夹中。只有超过一定时间或者用户清楚浏览器缓存时，这些图片才会被删除。不过浏览器常会自动给这些图片重命名，大多数用户都不清楚这些缓存文件的位置。

　　在用户浏览器渲染页面时，reflection.js中的Javascript代码将遍历整个网页搜寻class值为reflect的图片元素。然后脚本会根据要使用倒影的源图片创建一张新图片。一旦发现任何符合这些标准的图片，脚本就会复制并倒转图片，再将新图片的不清晰度（opacity）和高度都设为默认值50%。reflection脚本提供了两方面的定制：倒影的高度和倒影的不清晰性。为了调整倒影的高度，要给图片元素的class属性添加一个新的值，rheightXX。XX是复制的倒影图片的高度百分比。百分比值越大，倒影的高度就越高。为了调整倒影的清晰度，要在图片的class属性中引入另一个新的值，ropacityXX。XX是指倒影图片的透明度百分比值。随着opacity值的减少，倒影会变得越来越模糊。