CSS 基本教材

2010年1月14日星期四

1. Eric A. Meyer 及 YUI 都有提供

RESET CSS ，為什麼要使用？

To reduce browser inconsistencies( http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/ )

some browsers indent unordered and ordered lists with left margins(IE8), whereas others use left padding(Chrome)

make that default look more consistent across browsers

2010年1月14日星期四

2010年1月14日星期四

1 (cont’d)

* { margin: 0; padding: 0 }

2010年1月14日星期四

2. 試說明為什麼不要用 HTML 排版，而用 CSS 來作排版

HTML -> 內容，框架

CSS -> 設計，設計如何裝飾框架

分開才有彈性(內容不變的前提下，可以輕鬆重設計)

2010年1月14日星期四

3. 在 HTML 中的 tag 可以加入 style

屬性來指定樣式，有什麼缺點？

失去彈性(之後要修改樣式會比較繁雜)

無法重複利用

HTML 程式碼變比較大

2010年1月14日星期四

4. 什麼叫作 CSS selector？以 CSS 2.1 為準，有哪些 selector 可以使用？各瀏覽器的支援性如何？

什麼是 CSS 選擇器

既然要定義樣式，重要的是指明要定義誰？所以利用 CSS 選擇器來選擇要被定義的對象。(ericsk)

2010年1月14日星期四

4. 有哪些 selector 可以使用(cont’d)Pattern Meaning Described in section

* 會套用至全部的標籤 Universal selector

E.warning一個 class 可以在一 HTML 檔中多次出現，而且同一個標籤還可以同時套用不

同的 class (In HTML, the same as DIV[class~="warning"].)Class selectors

E#myid理論上一個 id 只會出現在一個標籤內，定義了 #id 的樣式，被設定為該 #id

的標籤就會被套用ID selectors

E 直接用「標籤名稱」作為選擇器 Type selectors

E F 後代選擇器 Descendant selectors

E > F 只會選擇往下一層的元素 Child selectors

E:first-child Matches element E when E is the first child of its parent. The :first-child pseudo-class

E:link E:visited Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). The link pseudo-classes

E:active E:hover E:focus Matches E during certain user actions. The dynamic pseudo-classes

E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined). The :lang() pseudo-class

E + F 選擇同一階層的緊鄰在後的元素 Adjacent selectors

E ~ F 選擇同一階層的後面的元素 Adjacent selectors

E[foo] 用標籤的屬性來選擇 (whatever the value). Attribute selectors

E[foo="warning"] 完全相同 Attribute selectors

E[foo~="warning"] 含有該值 Attribute selectors

E[lang|="en"] 以該值為開頭，並帶有 - 的值 Attribute selectors

* { padding:0px }

2010年1月14日星期四

4. 各瀏覽器的支援性如何 (cont’d)child selector -> ≥IE 7

adjacent sibling -> ≥IE 7

pseudo-class -> http://www.quirksmode.org/css/contents.html

2010年1月14日星期四

6. 什麼是 CSS Box Model？它會影響什麼樣式屬性？

2010年1月14日星期四

5. 什麼是 document compatibility mode ?

document.compatMode

IE -> Quirks Mode, Standards Mode

Quirks Mode -> document.compatMode=BackCompat

Standards Mode-> document.compatMode=CSS1Compat

2010年1月14日星期四

5. (cont’d)Internet Explorer Box Model Bug

Inline Vertical Alignment

aligned to the baselinealigned images to the bottom border

2010年1月14日星期四

7. 字型的設定有三大類：sans-serif, serif,

monospace。請說明它們的差別，以及哪些字型屬於哪個類型。

sans-serif(無襯線體)

Verdana, Arial Black, Arial, Geneva

serif(襯線體)

Times, Times New Roman

monospace(等寬體)

Courier, Courier New, Andale Mono2010年1月14日星期四

7. (cont’d)serif 和 sans serif 的一般比較

serif 的字體較易辨識，也因此易讀性較高。反之 sans serif 則較醒目，但在走文閱讀的情況下，sans serif 容易造成字母辨識的困擾，常會有來回重讀及上下行錯亂的情形。

serif 強調了字母筆畫的開始及結束，因此較易前後連續性的辨識。

serif 強調一個 word，而非單一的字母，反之 sans serif 則較強調個別字母。

在很小字的場合，通常 sans serif 會較 serif 字體較為清晰。

http://blog.bs2.to/post/EdwardLee/3401 李果正2010年1月14日星期四

8. 關於尺寸的單位可區分為「相對單位」、「絕對單位」，試說明之。

單位

px: pixelpt: point，根據螢幕解析度決定 point 大小

cm, mm, inpc: 1pc == 12ptem: 字型大小

%: 百分比

2010年1月14日星期四

8. (cont’d)

絕對大小：10px, 16px, 12pt, 15mm, etc.

相對大小：50%, 120%, 1em, 1.5em

以 YUI Font 為例

13px => 100% (YUI 定義的)

em

px / 13 = em (non IE)2010年1月14日星期四

9. 用來表示顏色的方式有哪些？(bonus) CSS3 有新增的表示法

#RRGGBB: 16-bit 的 RGB 值 ( 0~f ) eg. #00ff99

#RGB: 8-bit RGB 值 ( 0~f ) eg. #0f9

rgb(r, g, b): rgb 數值 ( 0~255 ) eg. rgb(100,255,150)

色彩名稱

color:red

CSS3: HSL(hue-saturation-lightness)

rgba(r, g, b, a) alpha

2010年1月14日星期四

10. 什麼是 CSS 的繼承關係？

繼承 (inheritance) 的意思就是說子標籤的樣式會跟父標籤一樣，除非子標籤本身另有自訂的樣式。

2010年1月14日星期四

11. !important 作何使用？(bonus) 如何 overwrite inline style?

!important -> 提高該樣式的優先權

早期可作為 IE6 跟其他瀏覽器的樣式區分

2010年1月14日星期四

11. 如何 overwrite inline style?

span[style]{

color: inherit !important;

font-size: inherit !important;

}

2010年1月14日星期四

12. 定義樣式中的 position 屬性，各有什麼差別？

position: static | absolute | relative | fixedstatic預設值，根據現有的 CSS 及文件模型決定位置。

absolute絕對位置，根據 left 及 top 的值來決定位置。

relative將 left 及 top 的值視為位移來決定位置。

fixed類似 absolute，不同於 absolute 的是，fixed 是相對於瀏覽器的畫面，而 absolute 則是相對於它所在的 block。

2010年1月14日星期四

13. float 屬性的用途，以及它所帶來的影響

float: left | right | none;

透過設定元素的 float 屬性，將元素擺到所在

block 的左側或右側。(float 會讓該元素脫離頁面的正常 flow)

浮動的位置會根據 HTML 的順序而定。

2010年1月14日星期四

13. (cont’d)

2010年1月14日星期四

14. display 與 visibility 有何不同？

visibility=visible | hidden

display: none/inline/block/list-item/run-in/compact/marker;

visibility:hidden這個Property是要告訴瀏覽器，我存在，但是我不要顯示，但是如果我有占空間，還是要保留空間給我。

disaply:none這個Property是要告訴瀏覽器，我不存在，連我原本的空間都不要Render給我。

2010年1月14日星期四

15. 什麼是 CSS sprites？用它有什麼好處？

background-position

http://www.google.com/

if(document.images)new Image().src='/images/nav_logo7.png'

好處:減少對 Server 要資料的連線數

2010年1月14日星期四

16. 什麼是 Image replacement？好處是？

圖片取代文字

可以滿足 SEO 也可以滿足頁面的豐富度

Fahrner Image Replacement (FIR)

2010年1月14日星期四

17. 在 HTML 中以 <link> 引入 CSS 檔案時，media 的屬性作用為何呢？

滿足該 document 在不同媒介上的表現樣式

2010年1月14日星期四

18. 如何利用 Firefox + firebug(附加元件) 或是 Chrome(or

Safari) + devtools(內建) 找出元素的 computed style？

2010年1月14日星期四

19. (bonus) 在定義樣式時，屬性名稱前面加入 * 或 _ 或 # 等是什麼意思？

IE Sucks!!!

2010年1月14日星期四

20. (bonus) 有沒有聽過 CSS3？說明幾個新 feature 吧

Rounded Corners

border-radius: 10px;

Border Image

border-top-image

border-right-image blahblah~

Multi Column

column-count: 3;

2010年1月14日星期四

20. (cont’d)

Multiple backgrounds

New Attribute selectors

2010年1月14日星期四

References

W3C SchoolsGoogle Doctype

SitePoint CSS ReferenceQuirksMode

http://blog.ericsk.org/

2010年1月14日星期四