css教材
Post on 30-Oct-2014
25 Views
Preview:
DESCRIPTION
TRANSCRIPT
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日星期四
top related