《Head First HTML与CSS、XHTML》第十一章要点

1月8日 · 2012年

        本章学习两个非常重要的元素<div>和<span>。要注意的是在页面中使用<div>的时候,不要滥用。学习块元素居中的方法,子孙选择符,缩写形式以及伪类。在最后介绍了“层叠”的内容。本章内容较多且很重要,需要复习巩固多加练习。

要点:

1、<div>元素用来把相关的元素组成逻辑部分

2、创建逻辑部分有助于标识页面的主内容区、标题和页脚

3、可以用<div>元素把需要相同样式的元素组成一组。

4、用嵌套的<div>元素给文件添加更深一层的结构,这样有利于结构清晰和样式设计。不过除非真的需要,否则不要轻易添加结构

5、用<div>元素把几部分内容组成一组,就可以跟其他块元素一样给它设计样式。例如,可以用border属性给一组被<div>包围着的元素添加边框。

6、width属性用来设置元素内容区的宽度

7、一个元素的总宽度等于内容区的宽度加上所有补白、边框和边界的宽度。

8、一旦设置了一个元素的宽度,它就不再随浏览器窗口的宽度变化而伸缩了。

9、text-align是一个用于块元素的属性,可以使块元素中的所有内联内容居中。它可以被任何嵌套的块元素继承。

10、可以用子孙选择符选择嵌套在其他元素中的元素,例如,子孙选择符 div h2 { … }  选择所有嵌套在<div>元素中的<h2>(包括孩子,孙子等)。

11、可以用缩写方式定义相关的属性。例如,padding-top, padding-bottom,padding-left都是关于padding的属性,可以用一个缩写定义,padding。

12、padding,margin,border,background和font属性都可以用缩写规则指定。

13、<span>内敛元素跟<div>元素一样:它用来把相关的内敛元素和文本组成一组。

14、跟<div>一样,也可以把<span>元素添加到类中(或者给<span>元素设置唯一的id)来给它们设计样式。

15、<a>元素是有不同状态的元素的一个例子。<a>元素主要的状态有unvisited,visited和hover。

16、可以用伪类单独地给每个状态设计样式。伪类和<a>元素一起最常用的是: :link,用于未被访问的链接, :visited,用于已经访问的链接, :hover,用于停留状态。

17、其他元素支持 :hover伪类,一些浏览器也支持 :first-child, :active, :focus伪类用于其他元素。

3 条回应
验证码
输入运算符及数字使等式成立
{{comment.validate_num1}} = {{comment.validate_num2}}
点赞确定
退出登录?
取消 确定
  1. CONEY2012-1-8 · 13:36

    我买了本 Head First JavaScript 看了好快,一个星期的样子就看了一半了,内容好简单…

    • 猴猴2012-1-8 · 16:24

      我看的这本书也是看的很快,就第11、12章讲高级网站构建和布局和排版内容多了一些。作为入门书感觉还是很不错的~入门后再看其他CSS的书 😳

      • CONEY2012-1-8 · 17:02

        看到一半,就停滞了,还没看完。。。