《CSS商业网站布局之道》 - 书摘精要

来源：互联网发布：ubuntu安装时怎么分区编辑：程序博客网时间：2024/05/22 00:38

(前言)

CSS 技术的核心是布局，而不是样式；

CSS 的强大生命力在于它的布局能力，而不是细枝末节的修饰功能；

“站得高，望得远”

(P1) “评价一种 Web 开发技术优秀的标准只有一个，那就是看这种技术能否在最恰当的时间和最恰当的地点，以最恰当的方式，为最需要信息的人提供最恰当地信息服务。”（摘自 2004 年 4 月《程序员》的《 Web 开发技术史话》）

(P3)

“表格在手，一清二楚”，这是财会人员的口头禅；

当你进入公司管理阶层工作时，你会发现若能为公司根据需要不断设计出行之有效的各类表格，那真的是一项非常重要的工作；

(P4)

表格布局是不标准的，用 W3C 制定的规范来说，表格的目的是用来显示数据的，而不是来完成布局，错把表格当成布局缘于当时 Web 技术的缺乏和对标准需求的乏力；

如今的 Web 世界，用户体验是上帝，在民意需求的强势之下，标准占据了上风，连微软这样的巨无霸也不得不诚服于 W3C 所提倡的标准之下；

(P7)

不光老板会三番五次的出难题，挑战你的耐性，甚至自己有时都会否定刚刚完成的设计；

表格是用来显示和组织数据的最好元素；

(P8) 多行多列的数据显示，使用 <td> 标签会优于 <li> 标签；

(P10) 初学者不要受各种声音的影响而半途而废，要鼓起勇气，勇敢地走下去；

(P11)

XML 最初设计的目的是弥补 HTML 的不足，以强大的扩展性满足网络信息发布的需要，现在逐渐用于网络数据交换标准的格式；

W3C 创建 CSS 标准的目的就是希望使用 CSS 取代 HTML 中结构与表现混淆在一起的弊端；

DOM (Document Object Model，文档对象模型)是一种让浏览器与页面内容沟通的语言，使得用户可以访问页面元素和组件；

(P13)

一个结构良好的 HTML 页面可以通过 CSS 的不同定义，显示在任何地方，以及任何网络设备上；

div 元素可以包含任何内容块，也可以嵌套另一个 div ；

(P14) 良好结构的 HTML 页面内几乎没有表现属性的标签，代码非常干净简洁；

(P15) 用 CSS 容易，难的是全部都用 CSS ；

(P16) 最有效的方法就是坚持，坚持也是最好的学习方法；

(P17) 在学习 CSS 标准布局的过程中，你会遇到很多困难，有时会觉得学不下去，但是要学会想办法排解心中的郁闷，并勇敢地坚持下来，只有这样你才能成为一名优秀的标准网页设计师；

(P24) XML 语言适合构建标准网页，也是 W3C 推荐的最完善的网页结构，但目前它更多地用于 Web 数据的交换；

(P26) 在 HTML 中，你可以不需要给属性值加引号，但是在 XHTML 中，它们必须加引号；

(P27) XHTML 规范废除了 name 属性，而使用 id 属性作为统一的名称。在 IE 4.0 及以下版本中应保留 name 属性，使用时可以同时使用 id 和 name 属性；

(P27)

块状元素 (Block Element) —— 元素显示为矩形区域

默认情况下，块状元素都会占据一行。通俗的说，两个相邻块状元素不会出现并列显示的现象。默认状态下，块状元素会按顺序自上而下排列，块状元素都可以定义自己的宽度和高度；

块状元素一般都作为其它元素的容器，它可以容纳内联元素和其它块状元素；

(P28)

内联元素 (Inline Element) —— 也可以翻译为内嵌元素、行内元素、直进式元素等。表现形式为行内逐个显示；

内联元素犹如水，居无定所，随行移动，嵌入行内，不会排斥同行其它元素，也没有自己的形状，你不能够定义它的宽度和高度，它会随包含内容形状变化而变化；

(P30) 一般搜索引擎对标题元素具有较强的敏感性，特别是 <H1> 和 <H2> 元素，有些搜索引擎能够对其进行检索，所以建议读者要使用 <H1> - <H6> 元素定义网页的标题，而不是使用其他元素越俎代庖；

(P31) 列表元素能够实现网页结构化列表，对于常常需要排列显示的导航菜单、新闻信息、标题列表等，使用它们优势比较明显，即使在没有 CSS 支持的情况下，列表元素也能够很好地确保信息的列表显示；

(P32) 对于 <div> 和 <span> 这两个通用元素，我们应该尽量少用，只有划分页面模块结构时才使用 <div> 元素，因为模块本身没有任何语义的，它仅表示一块独立的结构，只有想对段落内部分元素或文本应用某种有特殊样式时，才可以使用 <span> 元素把它们独立封装在一个容器内；

(P35) 在每个声明之后要用分号表示一个声明的结束。其中在规则的最后一条声明中可以省略分号，但建议设计师养成用分号结束声明的习惯；

(P36)

子对象选择符 (Child Selectors) —— e1 > e2

相邻选择符 (Adjacent Sibling Selectors) —— e1 + e2

属性选择符 (Attribute Selectors) —— e1[attr]

(P37) ul { list-style : none; } /* 定义列表样式为无 */

(P39) 对于模块的外围结构元素最好使用 id 属性，内部元素可以定义 class 属性；

(P42) 通用选择符 * 一般用于定义文档中各种元素的共同属性，如字号、字体、字体颜色、行高等；

(P44) CSS 规定伪类和伪对象以冒号开始；

(P59) 十六进制前面加一个#颜色符号；

(P61) XHTML 的每个元素都拥有 style 属性，用来设置内联样式；

(P62) 把 CSS 代码放在头部，这样便于提前被下载和解析，可避免网页内容下载后，还没有样式来控制页面的尴尬；

(P64)

CSS 强制规定部分属性不具有继承特性 —— 边框属性、边界属性、补白属性、背景属性、定位属性、布局属性、元素宽高属性；

(P68) 带有 style 属性的元素，其内联样式的有特殊性大于 id 和 class 定义的样式；

(P69) CSS 定义了一个 !important 命令，该命令被赋予最大权力；

(P70) !important 命令必须位于属性值和分号之间，否则无效；

(P77) 将 <body> 元素作为一个外套，就能够充分发挥 <body> 元素的作用，避免现成元素的浪费；

(P80) 如果你在 Dreamweaver 8 或者更高版本中为文本行局部文本定义颜色，则系统会自动插入一个 <span> 元素，并定义一个 CSS 的颜色样式类；

(P83) Javascript 脚本具有更大的优先权；

(P103) 属性面板是 Dreamweaver 中最常用的面板之一，在网页设计中我们时时刻刻都离不开属性面板的帮助；

(P116)

在元素内容与边框之间的空白区域，被称作元素的补白(Padding)，有人也称之为元素的内边框、填充或内框；

在元素边框外边的空白区域，被称做边界(Margine)，有人也称之为元素的外边距或外框；

(P121)

元素的总宽度 = 左边界 + 左边框 + 左补白 + 宽 + 右补白 + 右边框 + 右边界；

元素的总高度 = 上边界 + 上边框 + 上补白 + 高 + 下补白 + 下边框 + 下边界；

在 IE5.x 及以下版本浏览器中：

元素的总宽度 = 左边界 + 宽 + 右边界；

元素的总高度 = 上边界 + 高 + 下边界；

(P125) 计算上下想相邻元素的实际间距时，应先判断上下元素的最大边界值，然后用最大边界值参与实际间距计算；

(P125) 当上下相邻元素的边界重叠式，小的边界将被覆盖掉；

(P126) 当元素浮动时，相邻元素的边界不会出现重叠现象，此时需要把上下边界、上下边框和上下补白全部计算进去；

(P127)

空盒模型 ——

1. 只要是块状元素，或者定义了 display.block 所有元素都能执行盒模型规则，显示正确效果；

2. 非块状元素不能完全执行盒模型规则，宽、高属性失效。换句话说就是内联元素无法定义宽和高；

(P131) 定义边框可以合并代码，且属性值顺序可以任意排列；

(P134)

text-align : center —— /* 在 IE 浏览器下实现居中显示 */

margin-left : auto margin-right : auto —— /* 在非 IE 浏览器下实现居中显示 */

(P172)

text-align 属性只对第一行起作用；

text-align 属性具有继承性；

(P172) justify —— 表示两端对齐，当段落文本不满一行时，会强制其实现满行显示；

(P208) 把背景色和图形图像都定义在 background 属性中，这样背景图像将优先显示；

(P209)

visibility : hidden —— 隐藏元素保留位置；

display : none —— 隐藏元素不保留位置；

(P214) 内联元素没有高度和宽度，因此也没有固定的形状，定义它的 width 和 height 属性无效；

(P225) 任何定义为 float 的元素都会自动被设置为一个块状元素显示，相当于被定义了 display : block 声明；

(P255) z-index 属性只有在元素的 position 属性取值为 relative、absolute 或 fixed 时才可以使用；

(P250) 在 z-index 属性中，其值越大，层叠级别就越高；

(P344) 在 CSS 中，子元素会自动继承父类元素的属性值，如颜色、字体、大小、行距等排版格式。已经在父元素定义过的属性，在子元素可以直接继承，不需要重复定义；