CSS阶层式样式表4何谓CSS样式表.ppt

網頁製作1032 數位教材單元 9 : CSS 主講老師：徐培倫 * CSS CSS 階層式樣式表 CSS的優點 CSS的用法 直接加在HTML標籤中 作成樣式表加在網頁 作業9 單元 9 CSS(Cascading Style Sheet )是用來控制網頁外觀的！ 傳統的HTML碼對於網頁外觀的控制能力不足。例如，font文字的大小最大只到 7 font size=7文字/font 若你要 size=70 ，HTML最大就是7 若想要比7大的字，使用下列CSS格式 font style=font-size:70px文字/font CSS 階層式樣式表 * 何謂CSS樣式表 風格 樣式表 體裁紙 如字體、顏色、大小 用途 控制文件在媒體上顯示的風格 媒體 電腦螢幕、電視、紙張、手機、聲音 理念 將文件的內容(contenet)與格式(format)分開 * CSS的優點 專業分工 由專業人員負責風格設計 其他人只要負責內容即可 讓文件呈現一致的風格 共享 可重複使用 具有繼承的概念 效率 減少文件大小、節省網路頻寬 * CSS的優點 容易製作、容易維護 為一般文字格式 用普通編輯器即可撰寫 可程式控制 可在程式中動態改變樣式 CSS的用法 如何把CSS加到網頁中呢？依照用途有三種用法： 直接加在HTML標籤中 作成樣式表加在網頁中 宣告HTML標籤的外觀樣式 訂class樣式 訂ID樣式 獨立成一個CSS檔 直接加在HTML標籤中 使用 Style 屬性如下 大小為20像素的紅色文字 font style=“color: red; font-size: 20px“大小為20像素的紅色文字/font 顏色 color , 字的大小 font-size 起始標籤 style=“CSS屬性1:值; CSS屬性2:值; ... …/結束標籤 作成樣式表加在網頁 主要是在head/head之間，實際上，加在哪裡都無所謂，只要在套用樣式之前都可以 head … style type=text/css … /style … /head 宣告HTML標籤的外觀樣式 HTML 現有標籤可重新宣告外觀樣式如body 宣告顏色、字型大小、 及粗體 head … style type=text/css body { ????color: gray; ????font-size: 12px; ????font-weight: bold; } /style … /head 自訂class樣式 HTML 現有標籤可重新宣告外觀樣式如body 宣告顏色、字型大小、 及粗體 head … style type=text/css body { ????color: gray; ????font-size: 12px; ????font-weight: bold; } /style … /head 自訂ID樣式 自訂外觀的一種 在HTML的標籤元件中有設定ID的時候，前面一定要有一個「#」 * #自訂ID樣式名稱 { ????屬性1:值; ????屬性2:值; ????????：} html head title網頁標題/title style type=text/css #keyword { ????color: red; ????background-color: yellow; ????font-weight: bold; ????border: 1px; ????padding: 2px; } /style /head body 這裡是font id=keyword關鍵字/font。 /body /html 獨立成一個CSS檔 網頁中head.../head中則需要加入: link rel=stylesheet type=text/css href=CSS檔名稱.css 另外也可用 @import style type=text/css @import url(style.css) /style * Style.css 內容: HTML標籤{ 屬性1:值; 屬性2:值; } 自訂樣式{ 屬性1:值; 屬性2:值; } 作業 9：題目 請修改範例檔 ex9.html 達成下列表單  * 作業 9：題目 請修改範例檔 ex9.html 達成下列表單 作業1 會執行 ex1a.html  * 作業9: ex9.html ex9sub.html * 作業9: ex9home.html * ex9.html 執行結果 * 請修改 ex