<HeadFirst_HTML与CSS> O'REILLY_Chap.10_div与span

<HeadFirst_HTML与CSS> O’REILLY_Chap.10_div与span

本博客的FollowMeReading系列初衷是在线的读书笔记. 为方便后期查阅, 故写成博客形式, 使用关键字查询便可以快读的找到相关的内容.

FollowMeReading系列所选的书籍一般选自O’REILLY或Apress出版社, 尽量保证笔记内容的权威性.

FollowMeReading系列的博客标题格式为: <书名> 出版社章节数章节名, 方便大家在纸质版书籍中查找.

FollowMeReading系列博文中的内容大部分是原文, 非原文部分前面将有’博主’字样提醒.

感谢<HeadFirst_HTML与CSS>作者 Eric Freeman & Elisabeth Robson
感谢<HeadFirst_HTML与CSS>翻译 徐阳 丁小峰

本博客由@scott编写. 若转载此文章, 请注明出处和作者

正文

原文

BULLTE POINTS(要点):

• <div> 元素用于将相关的元素归组在一起, 放在逻辑区中.

• 创建逻辑区有助于标识内容区以及页面的页面和页脚.

• 可以使用 <div> 元素将需要共同样式的元素归组在一起.

• 使用嵌套的 <div> 元素伪文件增加更多结构, 这有利于保证结构清晰或者方便增加样式. 不过除非确实需要, 否则不要过多的增加结构.

• 一旦用 <div> 元素将内容区归组在一起, 类似于其他块元素, 可以对这些 <div> 增加样式. 例如, 对于包含在 <div> 中的一组元素, 可以使用嵌入这些元素的 <div> 的边框属性, 对这些元素增加一个边框.

• width 属性设置一个元素内容区的宽度.

• 一个元素的总宽度是内容区宽度, 加上增加的内边距, 边框和外边距的宽度.

• 一旦设置一个元素的宽度, 它不会延伸来占满浏览器窗口的整个宽度.

• text-align 是块元素的一个属性, 用来将这个块元素中的所有内容对齐, 可以居中, 左对齐或右对齐. 这个属性可以由所有嵌套的块元素继承.

• 可以使用子孙选择器来选择嵌套在其他元素中的元素. 例如:div h2 {...} 会选择嵌套在 <div> 元素中的所有 <h2> (包括子元素, 孙子元素等).

• 可以对相关的属性使用快捷方式. 例如, padding-top, padding-right, padding-bottom, padding-left 都与内边距有关, 可以用一个快捷规则来指定: padding.

• 内边距, 外边距, 边框, 背景和字体属性都可以用快捷方式指定.

• <span> 内联元素与 <div> 元素类似, 它用于将相关的内联元素和文本归组在一起.

• 类似于 <div> , 可以将 <span> 元素增加到类(或者为 <span> 元素指定唯一的id), 对它们增加样式.

• 有些元素有不同的状态, <a> 元素就是这样一个例子. <a> 元素的主要状态包括未访问, 已访问和悬停.

• 可以用伪类单独的为各个状态指定样式. 伪类最常用于 <a> 元素, :link 对应为访问的链接, :visited 对应已访问的链接, :hover 对应悬停状态.

• 伪类还可以用于其他元素, 而不仅限于 <a> .

• 另外一些伪类包括: :hover, :active, :focus , :first-child 和 last-child 伪类等.