網站規劃與設計上課補充教材

第十三堂課: CSS 的呼叫、引用、文字風格、表單風格等應用

我們之前已經講過很多 CSS 相關的話提,只是內容大多是直接應用為主,接下來的兩節課內容會提到比較多的 CSS 連續資料, 會貫穿之前我們談到的許多概念。這節課主要談到 CSS 的引用方式,還有文字特效、表單特效等等,更高階的方塊應用下節課繼續討論!

樣式表的整體宣告之設定與基礎瞭解

  1. CSS (Cascading Style Sheet) 樣式表,可以修訂原先單純 HTML 的呆板樣式,可以加入許多較為特殊的特效!他的應用方式有:
    • 可以直接修改 html 標籤的顯示風格,例如『 p { color: blue; line-height: 1.5 } 』之類的風格宣告方式。
      • 上式中,p 被稱為『選取器』
      • 括號內的 color:blue 及 line-height:1.5 被稱為『宣告』
      • 每個項目中, color 被稱為屬性 (或元素),而 blue 就被稱為屬性值 (或元素值)
    • 『選取器』除了 HTML 原有的標籤之外,還可以新建某些特定選取器名稱,主要有:
      • 使用『 .類別 {...} 』建立,再以 class="類別" 來引用;
      • 使用『 #名稱 {...} 』建立,再以 class="名稱" 來引用
    • 建立一個外部引用檔,在網頁 head 當中使用如下的方式來引用:
      • <link rel="stylesheet" href="filename" >

  2. 如何定義即將使用的標籤?就利用剛剛第一點談到的 <style> 即可。這個 style 放在 <head> </head> 之間。
    <style type="text/css">
    	HTML標籤1 { 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
    	HTML標籤2 { 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
    	HTML標籤3 { 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
    	HTML標籤4 { 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
    	....
    </style>
    
  3. 如果樣式的內容一樣,那麼標籤可以整合起來一起寫在同一行。如下所示:
    <style type="text/css">
    	HTML標籤1, 標籤2, 標籤3 { 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
    	....
    </style>
    
  4. 多層次的標籤,例如 table -> tr -> td 是一連續的階層,此時則可以這樣設定:
    <style type="text/css">
    	HTML標籤1 標籤2 標籤3 { 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
    	....
    </style>
    
  5. 除了直接某些 HTML 標籤之外,還有許多不同的方式可以選擇與設定 CSS 的樣式選取器!主要有底下這些:
    選取器名稱功能意義範例
    全域選取器套用到 body 內的所有元素上* {....}
    重點是那個 * 號!
    類型選取器找到符合的 HTML 標籤h1, h2, h3 {...}
    會影響到文件中的 h1, h2, h3 這三個標籤
    class選取器(類別)透過 class="" 來選取宣告.class1 {...}
    會影響到後來使用 class="class1" 的項目
    p.class1 {...}
    (1)只對 p 標籤而且 (2)該標籤使用 class="class1" 才生效
    id選取器(名稱)透過 id="" 來選取宣告#id1 {...}
    影響到使用 id="id1" 的標籤項目
    子標籤選取器找到一標籤的直系子標籤li>a {...}
    在 <li> 緊接著的 <a> 標籤才有效果!
    後代選取器找出一標籤的後代標籤即可p a {...}
    在 <p> 後面出現的 <a> 標籤就有效果!(不須緊鄰)
    相連手足選取器找出『連續』的標籤處理h1+p {...}
    與子標籤類似,但是僅有第一個 p 元素生效

  6. 如果有兩條以上的規則重複了,那麼該標籤會以哪條規則為主呢?基本上重要的依據為:
    • 後來先贏:就像程式設計的變數一樣,以後面設定的會生效為主;
    • 指定程度 1:例如有 p b 以及 b 的規則,那麼 p b 的規則會比較具有指定性,會生效;
    • 指定程度 2:例如 p#intro 會比 p 來的有指定性,只是 p#intro 就必須在 id="intro" 內才會生效
    • 設定重要性:例如 p b { color:blue !important; } 會比 p b { color: violet; } 來的重要!(而不論是否出現在前面或後面)

  7. 但,無論如何,將 CSS 與 HTML 分開放置在不同的檔案,才是比較好的作法!網頁的外觀與內容分開,可以產生一致性的網頁風格!除非你的網頁所使用到的標籤具有獨特性, 與本網站的任何檔案無關,那時將 CSS 寫在同一頁即可!

  8. 請參考 這個檔案 的內容結構,那個『大』是要放大字體到大約 20pt 左右,小則是縮小字體到大約 10pt 左右。 如何透過外部的檔案連結功能,再透過剛剛上頭講的多層次標籤的功能,在不改變該檔案的 table 內容的情況下, 達到我們想要處理的目的呢?請建立檔名 class_13_1.php 檔案來完成喔!

使用多重定義的樣式表,分別透過『 #名稱 -- id 』及『 *.類別 --class 』來定義

  1. 有些宣告的內容會用在多種不同的標籤中,如果要如前面的方式來定義整體標籤,又可能導致我們不想要的畫面! 畢竟標籤的內容可能會隨時變化。此時制訂一個『能夠讓不同標籤引用的相同樣式定義』就很有幫助了!

  2. 首先介紹『樣式名稱』法:使用 # 配合 id 來宣告的方式,如下所示:
    <style type="text/css">
    	#樣式名稱1{ 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
    	#樣式名稱2{ 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
    	....
    </style>
    
    	<標籤名稱 id=樣式名稱1>.....</標籤名稱>
    
  3. 將上面第 8 點的網頁進行修改,將三個『大』的字樣設定出三種不同的樣式,分別是:
    • 顏色為:00ff00,字體大小為 15 點字,加底線(text-decoration:underline}
    • 顏色為:ff0000,字體大小為 18 點字,不加底線
    • 顏色為:0000ff,字體大小為 12 點字,加底線

  4. 再來介紹『樣式類別』法:使用 *.樣式類別 ,配合 class 來使用
    <style type="text/css">
    	*.樣式類別1{ 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
    	*.樣式類別2{ 樣式元素:元素值; 樣式元素:元素值; ... 樣式元素:元素值; 樣式元素:元素值; }
    	....
    </style>
    
    	<標籤名稱 class=樣式類別1>.....</標籤名稱>
    
  5. 將剛剛第 3 點的資料,再度修改為 class 的樣式類別方式來處理。

  6. 樣式表的繼承:在原本的 HTML 標籤內,只要是巢狀標籤時,那麼該 CSS 樣式就會一直繼承,除非子標籤有特別自行指定 CSS 樣式。請點選13_1_chap_13-2.txt來瞭解什麼是繼承吧!

  7. 其他樣式表的使用方式:
    1. 利用 style="xx" 在標籤內,直接指定。例如:<h1 style="color:0000ff;font-size:18">之類;
    2. 利用外部已經定義好的 CSS 檔案(通常檔名為 xx.css)來進行呼叫,你可以參考 崑山科大的首頁 查詢其原始碼, 看看有沒有相關的資料?至於呼叫外部 CSS 預先定義的樣式表檔案,主要有兩種方法:
      • 使用 @import 方法
        <style type="text/css">
        	@import url("外部檔案的完整檔名");
        </style>
      • 使用 link 的方法
        <link type="text/css" rel="stylesheet" href="外部的 CSS 樣式表完整檔名" />
        			
  8. 觀念:樣式表設定的結果,網頁的顯示順序:我們知道有多種樣式表了,那麼哪種樣式表的資料會先被顯示出來? 基本上,順序如下所示:
    1. 插入的樣式表,亦即 <標籤 style="xx"> 為最高優先
    2. 接下來的 <style>, @import, <link> 這三者優先度相同,因此以最後出現的那個樣式表為主。

  9. 如果想要隨意插入任何 CSS 的樣式功能時,可以使用 <span style="xxx"> 或 <div style="xxx">。 其中 span 比較傾向較小的範圍,而 div 比較傾向大範圍!我們以 span 為例來說明:
    <span style="xx"> .......... </span>
    <span id="xx">    .......... </span>
    <span class="xx"> .......... </span>
    

實作題:請依照如下提示來製作本週習題:
  1. 實作題一:請使用第四週的習題,如按此連結察看。然後依據課本 13-32 與 13-34 的元素,重新改寫上述的網頁, 讓該網頁以 CSS 的樣式來呈現!請取檔名為 week10-13-1.html

  2. 參考第五週的習題,如按此連結察看,並依據課本 13-39 的元素,重新改寫該網頁,讓底圖可以單一一張在網頁正中央, 且底圖不會隨著捲軸而變!這是非常有用的功能喔!請取檔名為 week10-13-2.html

  3. 參考第四週的習題,如按此連結察看,然後依據課本 13-36 頁的元素,修改各個清單。若需要使用球形, 可以按此下載,當然,您也可以使用自己製作的小動畫來顯示,將讓你的清單更容易使用喔。 請設定檔名為 week10-13-3.html

  4. 重新修改第六週的實作題,如按此連結察看。請利用 CSS 的相關功能,讓該網頁變的更美觀。注意,使用文字排版 CSS 特效來處理, 尤其是可以讓中文字對齊的話,那就更好了!注意,不要有中文全形在文章內了喔!

  5. 建立屬於你自己的 CSS 樣式表 (例如 vbird.css),將你喜歡的、常用的樣式製作成為外部呼叫的樣式表檔案, 然後,未來使用 CSS 時,請呼叫此一檔案來製作屬於您自己的網頁。請將樣式表的內容連結到你的 index.html 當中, 讓老師可以按下連結連到該檔案察看內容即可。檔名自訂

  6. 修改您的 index.html ,讓本週的習題可以被瀏覽。


本章練習與習題:
  1. 將小陳老師或大陳老師的作業,一些簡易的影片檔案,轉檔為 .mp4 或音效轉檔為 .ogg 並且注意檔案容量大小後,嵌入到你的個人網站中!
  2. 將上述資料進行完畢,並於首頁加入正確的連結,將結果上傳後,到上傳網站查閱是否正確處理才可以!