線上書籍

Home

XOOPS 新版佈景設計

一、 關於CSS
  1. Cascading Style Sheets：串接樣式表，簡稱CSS，可用來控制網頁上各元素之外觀
  2. 在<style type="text/css"></style>中，或者 .css 檔裡面使用註解，其註解符號為 /* 這裡寫CSS的註解 */
  3. 若是在<style type="text/css"></style>外面，或者 .html 檔裡面使用註解，其註解符號為 <!-- 這裡寫HTML的註解 -->
二、 CSS樣式設定的基本結構
  1. 基本概念：挑出網頁中的元素，套上指定樣式。
  2. 一組CSS宣告的組成為「挑選器 {樣式屬性 : 值;}」，如：「h1 {color:blue}」
  3. 若有多個，請用「;」隔開。
  4. CSS樣式屬性以及可用的值可從這裡查詢：
三、 【行內樣式】在HTML標籤中套用CSS
  1. 需靠style屬性，如： <body style="background-image: url(images/templatemo_main_bg.jpg);"> <div style="width:960px;margin:0px auto;background-image: url(images/templatemo_wrapper_m.png);">
  2. 優先權最高，影響範圍最小（只限標籤內）。
  3. 其挑選器為該標籤，適合用在單一樣式上。
四、 【頁內樣式】在單一網頁中套用相同CSS樣式
  1. 在單一網頁中套用CSS必須使用<style type="text/css"></style>標籤，盡可能放在<head></head>裡面，例如： <style type="text/css"> body{ background-image: url(images/templatemo_main_bg.jpg); } #container{ width:960px; margin:0px auto; background-image: url(images/templatemo_wrapper_m.png); } .content{ padding:10px; font-size: 12px; color:#594e51; line-height: 180%; text-align: justify; } </style>
  2. 優先權中等，影響範圍為一整頁內。
  3. 上述的body、#container、.content都是挑選器
  4. 若一篇網頁中，有多個地方要套用相同樣式，可用頁內樣式。
五、 【外部樣式】許多頁面套用相同CSS樣式
  1. 要讓多個頁面套用相同樣式，就必須把樣式表獨立出來，做成一個CSS檔，如：style.css（請存至 css 目錄下），如： body{ background-color:#f5f5f5; } #container{ width:980px; margin:0px auto;} .keyword{color:red;}
  2. 要套用該樣式表的網頁需利用<link>標籤來呼叫引用： <link rel="stylesheet" type="text/css" href="css/style.css" />
  3. 若將頁內樣式變成外部樣式後，發現圖片消失了，請檢查圖片連結的相對位置是否正確。例如原本的： background-image:url('images/templatemo_header_background.gif'); 可能要改為（因為現在的css檔放在css資料夾中）： background-image:url('../images/templatemo_header_background.gif');
  4. 優先權最低，影響範圍最大，適合用在多頁用共用同一樣式。
  5. 一個頁面可以套用好幾個css檔，若裡面有挑選器重複的，則以最後讀到的為主。
  6. 在CSS檔中，還可以用import來引入其他的CSS檔：如：@import url("block.css");
六、 CSS的三種挑選器
  1. 標籤挑選器：即一般網頁標籤。如：p、img、body...等，只要是該標籤都會受影響。
    • (1)  樣式表： body{ background-image: url(images/templatemo_main_bg.jpg); }
    • (2)  網頁： <body> </body>
  2. ID挑選器：樣式表以「#名稱」宣告，網頁則需使用id屬性，如：
    • (1)  樣式表： #container{ width:960px; margin:0px auto; background-image: url(images/templatemo_wrapper_m.png); }
    • (2)  網頁： <div id="container"> </div>
  3. 類別挑選器：樣式表以「.名稱」宣告，網頁則需使用class屬性，如：
    • (1)  樣式表： .content{ padding:10px; font-size: 12px; color:#594e51; line-height: 180%; text-align: justify; }
    • (2)  網頁： <div class="content"> </div>
七、 比較常用的關係挑選器
  1. 子層（>）：
    • CSS寫法： .content > h2{ font-size: 20px; color:#822444; font-family: "微軟正黑體"; }
    • 網頁寫法： <div class="content"> <h2校務未來發展重點></h2> 略 </div>
  2. 包含（空白）：
    • CSS寫法： ul li{ list-style-image: url(images/templatemo_list.png); }
    • 網頁寫法： <ul> <li>推展絲竹樂教學，提升音樂風氣。</li> <li>推動竹編教學，潛移默化薰陶。</li> </ul>
八、 CSS進階的選擇器
  1. div *{color:red;}，意指<div>下任何標籤裡的所有元素文字均為紅色。
  2. div[class]{color:red;}，意指<div>標籤中，若有用到屬性class 者其文字為紅色。
  3. div[class="good"]{color:red;}，意指<div>標籤中屬性 class 值等於good者，其文字為紅色。
  4. div[class~="good"]，意指<div>標籤中屬性 class 值中有包含good 者（如class="cool good nice"），其文字為紅色。
  5. div[class|="good"]，意指<div>標籤中屬性 class 的值中有連字號「-」，且為good開頭者（如class="good-bye"），其文字為紅色。
  6. div[class^="good"]，意指<div>標籤中屬性 class 的值中以good開頭者（如class="goodbye"），其文字為紅色。
  7. div[class$="good"]，意指<div>標籤中屬性 class 的值中以good結尾者（如class="very_good"），其文字為紅色。
  8. div[class*="good"]，意指<div>標籤中屬性 class 的值中有含有good者（如class="mygoodness"），其文字為紅色。
九、 CSS幾種專屬的選擇器
  1. 連結有四種狀態：a:link（未參觀過的連結）、a:active（正要參觀過的連結）a:visited（參觀過的連結）a:hover（滑鼠正移到的連結）
  2. 表 單：input:focus（正在該輸入框中）、input:lang(zh-tw)（表單中有設定語言的輸入框）、input:enabled（表單中 可用的輸入框）、input:disabled（表單中不可用的輸入框）、input:checked（表單中被選取的輸入框）
  3. 其他div:target（被連結的目的地）、td:empty（空的內容時）