HTML第十章總結
前言
這一章節講了以下內容:
- 兩個新的 HTML elelments:它們是
<div>
和<span>
,使用這兩個 element 可以使得 HTML 有更加 serious 的 supporting structure. - 一些 shortcuts,用於簡化對 font, border 和 margin 等的 properties 的引數的 specifying 更加 eaiser.
- 關於 pseudou-class 的介紹
關於<div>
<div>
什麼時候發揮作用呢,是為了存在 logical sectons 的時候,並且要為這個 section 設定一些引數的時候使用。它也可以用於分清頁面的內容結構,使得頁面更加容易理解其大致的框架。
步驟如下:
- Identifying logical sections
- Using
<div>
s to mark sections: 這裡需要注意的是,<div>
包括起來的是一個 block element ,所以有 opening tag, 也有 closing tag:</div>
- Lableling the
<div>
s :通過在<div>
中新增 id=“” 或者 class=“”,以便以後在 CSS 中設計其 style。 - Adding some style
設定<div>
段落為選單的樣式:
在這本書中,為了能夠將段落有 order 的樣子,於是對其 CSS 添加了一些style,這些 style 具體如下:
- 設定 width:200px;這個 property 有一個特點,那就是它只 specify the width for the content area only. 而不是整個box。
- 設定 text-align:center;這裡的 text-align 會對齊所有在
<div>
中的 inline element, 不僅僅包括 text,也會包括 img. - descendent selector:在這裡,我們只想要改變
<div>
的所有<h1>
<h1>
的屬性,同時,如果設定id,class就太繁瑣,這個時候可以使用 descendents,在 CSS 中這樣寫: div h1{ color:black;} 這裡 div是parent name,h1 是child name,中間用空格隔開。 - 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:
- font-style
- font-variant
- font-weight 這三個都是 optional 的
- font-size/line height 這個必須有,line-height 是optional 的,但是要注意格式
- 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 有兩個特性:
- state related:Browser 通過使用者的狀態來將 element 動態地將其納入不同的 class
- do not need to type in HTML:這是一個 class,但是不需要自己去定義。
關於cascade
當 Browser 開啟一個網頁的時候,可以存在多個 CSS 檔案:包括 author 的,visitor 的 和 browser default 的。這時,因為對一個段落可能被很多 CSS 檔案當作 selector,所以需要經過一系列的 sorting ,找到 more specific 的那一個,來用於顯示,主要的步驟如下:
- Sort for author, reader and browser
- Sort for specify
- When elements have same specify, sort again based on ordering in styelsheets.
如何確定 specify?
通過三位數確定:000 :
- 個位:是否包含 selector ,包含一個 +one point
- 十位:是否包含 class 或者 psedo class,包含一個+one point
- 百位:是否包含 id, 包含一個+one point