【CSS】精通CSS網頁設計法則-筆記

套版選取器                                                                                                                       

Class

CSS

.blue{
     ....
}

HTML
套用則加上class="blue"

                                                                                                                                      

限定標籤Class

CSS

h2.spacial{

     ...

}

HTML

只能套用於<h2 class="spacial">

                                                                                                                                      

ID選取器

CSS

#name{

     ...

}

HTML

在一份HTML只能套用一次id="name"

                                                                                                                                      

群組化選取器

CSS

h1, h3, p{

     ...

}

HTML

可以一次套用多種標籤

                                                                                                                                      

單位                                                                                                                                   

相對單位

em

元素的字體高度，根據目前的字體大小而定。具有繼承的關係，負笈大小依賴於瀏覽器預設字體大小。

ex

依據小寫字母「x」而定。

px

像素，根據工作環境而定，如螢幕解析度、作業系統。

%

百分比，要設定參照對象，通常用於設定表格或是網頁寬度。

                                                                                                                                      

絕對單位

cm

公分

in

吋，1in = 2.54cm

pt

點，1pt = 1/72in

pc

皮卡，1pc = 12pt

                                                                                                                                      

<span> vs <div>                                                                                                               

span與div一樣，標籤內的文字、影像等內容也會被視作一個物件，但是span是行內嵌入的，其後的內容不會自動換行，也沒有結構上的意義，純粹是一種變更部分內容樣式效果的應用。

浮動區塊                                                                                                                           

float:

left(元素靠左浮動)

right(元素靠右浮動)

none(不符動)

inherit(繼承父級浮動效果)

解決自動換行的問題                                                                                                      

word-break:

normal (預設值，適時換行)

break-all(允許亞洲或非亞洲文字進行換行)

keep-all(不允許亞洲文字換行)

源自於：《精通CSS網頁設計法則》