1. Cascading Style Sheets

2. HTML 專有名詞 組成要素 : 段落 標籤 : 段落 屬性 : 段落 屬性名稱 : 段落 屬性值 : 段落 組成要素內容 : 段落 組成要素名稱 : 段落

3. CSS Separate Style From Structure of a Web Page Specify point size and font of text; Set margins within a web page; Create a distinctive style for individual web pages or sets of web pages; Format style to one element of a web page or to a numerous pages; Control color of different elements of a web page; Etc.

4. CSS 的 Box( 框盒 ) margin ( 邊界 ) 內容 border ( 框線 ) padding ( 內距 ) 所有要素內容均放入 Box 中 顯示文字與畫像 等組成要素區域 通常為透明狀態

5. Font Appearance of an Element HTML code special Collections CSS rule H3 { Font-family: times new roman, 'serif'; Color: #800000; Text-align: center; }

6. Understanding Style Rules Style Rules The style characteristics for an HTML element are expressed by Style Rules. Style Sheet A set of style rules is called a Style Sheet. Style rules are contained in the element in the document ’ s section. P {color:blue; font-size: 24pt;}

7. Understanding Style Rules Style Rule A Style Rule is composed of two parts: a selector ( 選擇器 ) and a declaration. TH {color: red;}. Selector The Selector indicates the element to which the rule is applied. Declaration The Declaration determines the property values of a selector. Selector Declaration

8. “ * ” Selector 若使用 ” * ” 作為 selector ，則樣式將套用 至所有要素 Example: * { font_size:36pt }

9. Understanding Style Rules Property The Property specifies a characteristic, such as color, font-family, position, and is followed by a colon (:). Value The Value expresses specification of a property, such as red for color, arial for font family, 12 pt for font-size, and is followed by a semicolon (;). P {color: red;} Property Value

10. Using the Element The element is always positioned in the section of the document. The element always contains attribute. The value “ text/css ” defines the style language as Cascading Style Sheets. P {color:blue; font-size: 24pt;}

11. Using External Style Sheet Style Rules can be expressed in an external Style Sheet - a text document that doesn ’ t contain any HTML code. There is no element in an external style sheet. External Style Sheet has a.css extension. h1, h2, h3 {font-family: verdana, arial, 'sans serif'; color: #9933FF; text-align: center;}

12. Linking to an External Style Sheet To link a Web page to an external style sheet a element should be added within element of a document with the URL to a style sheet. It tells the browser to find a specified style sheet. Demo_1

13. Linking to an External Style Sheet Demo_1 HREF attribute states the relative URL to the style sheet The REL attribute describes the relationship between the current document and the document identified by the href attribute

14. .class{} 與 #ID {} Example: CSS.sample { color: #ffffff; background: #006600; } #special { color: #ffffff; background: #006600; } HTML 段落

15. Using the Class Attribute Selector CLASS is an HTML attribute that assigns a class name to any HTML element on a Web page. Can be used to identify which style sheet rules should be applied for the particular element of a Web page A.nav:link {color:#FF3300; text-decoration: none;} Class Selector Element

16. Using the Class Attribute Selector A class name is created by declaring a style rule and adding (.) flag character indicating that the selector is a class selector. Add it to HTML code of a Web page by using the CLASS attribute. A.nav:link {color:#FF3300; text-decoration: none;} ERIC

17. 設定連結樣式 a:link 尚未點選的連結 a:visited 已經點選過的連結 a:hover 滑鼠游標移到連結上方時 a:active 按下滑鼠鍵時

18. Example a.menu:link { color:#330000; background:#ffffff; text-decoration:none; font-size: 11pt; font-weight: bolder; } a.menu:visited { color:#330000; background:#ffffff; text-decoration:none; font-size: 11pt; font-weight: bolder; } a.menu:hover {/* 當滑鼠移到超連結上時，顯示底線，且顏色變紅色 */ color:#00CCFF; background:#ffffff; text-decoration:underline; font-size: 11pt; font-weight: bolder; }

19. 適用於特定範圍的要素 範圍 對象 { } 範圍 範圍 對象 { } Example CSS: li p { color: #ffffff; background: #990000; } HTML: 段落 段落

20. 針對第一個字母設定樣式 適用對象 : first-letter { } Example h1:first-letter { font-size:1.2em; color: #339900; }

21. CSS 的注解 /* 註解 */

22. 樣式優先順序 使用者指定之樣式 : 使用 !important 標記 p{color:#FFFFFF !important} 構成該網頁之原始樣式 使用者指定之樣式 : 未使用 !important 標 記 瀏覽器的預設樣式