HTML第十章总结

前言

这一章节讲了以下内容:

  1. 两个新的 HTML elelments:它们是 <div>和 <span>,使用这两个 element 可以使得 HTML 有更加 serious 的 supporting structure.
  2. 一些 shortcuts,用于简化对 font, border 和 margin 等的 properties 的参数的 specifying 更加 eaiser.
  3. 关于 pseudou-class 的介绍

关于<div>

<div>什么时候发挥作用呢,是为了存在 logical sectons 的时候,并且要为这个 section 设置一些参数的时候使用。它也可以用于分清页面的内容结构,使得页面更加容易理解其大致的框架。
步骤如下:

  1. Identifying logical sections
  2. Using <div>s to mark sections: 这里需要注意的是,<div>包括起来的是一个 block element ,所以有 opening tag, 也有 closing tag:</div>
  3. Lableling the <div>s :通过在<div>中添加 id=“” 或者 class=“”,以便以后在 CSS 中设计其 style。
  4. Adding some style

设置<div>段落为菜单的样式:

在这本书中,为了能够将段落有 order 的样子,于是对其 CSS 添加了一些style,这些 style 具体如下:

  1. 设置 width:200px;这个 property 有一个特点,那就是它只 specify the width for the content area only. 而不是整个box。
  2. 设置 text-align:center;这里的 text-align 会对齐所有在<div>中的 inline element, 不仅仅包括 text,也会包括 img.
  3. descendent selector:在这里,我们只想要改变<div>的所有<h1>的颜色,但是我们不想改变文章其他部分<h1>的属性,同时,如果设置id,class就太繁琐,这个时候可以使用 descendents,在 CSS 中这样写: div h1{ color:black;} 这里 div是parent name,h1 是child name,中间用空格隔开。
  4. line-height 参数的设置:可以通过 1em,%的方式设置,但是这样设置的话,是基于 中的文本文字的,这时候,标题的字比较大,padding 就会不足,可以用数字“1”代替,它的意思是 to change the line-height of each element in it.

一些shortcuts

padding 和 margin的简化

原来是这样的:

padding-top:0px;
padding-right:20px;
padding-bottom:10px;
padding-left:0px;

或者这样:

`margin-top:0px;
margin-right:20px;
margin-bottom:10px;
margin-left:0px;

现在只需要这样:
margin:top right bottom left;
如果两个对边相等,
可以这样:
margin:top,right;
如果四个相等,
可以
margin:20px;

关于 border,background 的 property 的设置:

boder 有很多参数,比如:

  • border-width
  • border-style
  • border-color
    现在只需要这样:
    border: solid thin #007e7e;
    而且你可以 specify them in any order you like

background 有很多参数,比如:

  • background-color:
  • background-image;
  • background-repeat:

现在可以这样写:
background white url(images/cocktail.gif) repeat-x;

对于 font 的设置

font 的 property 的设置有顺序:
font:

  1. font-style 
  2. font-variant
  3. font-weight 这三个都是 optional 的
  4. font-size/line height 这个必须有,line-height 是optional 的,但是要注意格式
  5. font-family 用逗号隔开每个字体的名称

关于<span>

<span>用于inline element,把它们弄成一个 package ,<div>是用于 block element 的。

关于<a> element 的 psedo-class

<a>element 有五个psedo-class:

  • a:link
  • a:visited
  • a:hover
  • a:focus
  • a:active

可以在 CSS 中对其设置相应的参数,比如当 hover 时,字体变成黄色:
a:hover
{ color:yellow;
}
这里的psedo-class 有两个特性:

  1. state related:Browser 通过用户的状态来将 element 动态地将其纳入不同的 class
  2. do not need to type in HTML:这是一个 class,但是不需要自己去定义。

关于cascade

当 Browser 打开一个网页的时候,可以存在多个 CSS 文件:包括 author 的,visitor 的 和 browser default 的。这时,因为对一个段落可能被很多 CSS 文件当作 selector,所以需要经过一系列的 sorting ,找到 more specific 的那一个,来用于显示,主要的步骤如下:

  1. Sort for author, reader and browser
  2. Sort for specify
  3. When elements have same specify, sort again based on ordering in styelsheets.

如何确定 specify?

通过三位数确定:000 :

  1. 个位:是否包含 selector ,包含一个 +one point
  2. 十位:是否包含 class 或者 psedo class,包含一个+one point
  3. 百位:是否包含 id, 包含一个+one point 

相关文章