Tad 教材網 - 線上書籍

:::

XOOPS 新版佈景設計
============

### 一、 關於CSS

1. Cascading Style Sheets：串接樣式表，簡稱CSS，可用來控制網頁上各元素之外觀
2. 在<style type="text/css"></style>中，或者 .css 檔裡面使用註解，其註解符號為 /\* 這裡寫CSS的註解 \*/
3. 若是在<style type="text/css"></style>外面，或者 .html 檔裡面使用註解，其註解符號為 
 
### 二、 CSS樣式設定的基本結構

1. 基本概念：挑出網頁中的元素，套上指定樣式。
2. 一組CSS宣告的組成為「挑選器 {樣式屬性 : 值;}」，如：「h1 {color:blue}」
3. 若有多個，請用「;」隔開。
4. CSS樣式屬性以及可用的值可從這裡查詢：
 
- (1) 英文版：<http://www.w3schools.com/cssref/>
- (2) 中文版：<http://css.doyoe.com/>
 
### 三、 【行內樣式】在HTML標籤中套用CSS

1. 需靠style屬性，如： ```
  <pre class="brush:xml;">
  <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>裡面，例如： ```
  <pre class="brush:xml;">
  <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 目錄下），如： ```
  <pre class="brush:xml;">
  body{ background-color:#f5f5f5; }
  #container{ width:980px; margin:0px auto;}
  .keyword{color:red;}
  ```
2. 要套用該樣式表的網頁需利用<link>標籤來呼叫引用： ```
  <pre class="brush:xml;">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  ```
3. 若將頁內樣式變成外部樣式後，發現圖片消失了，請檢查圖片連結的相對位置是否正確。例如原本的： ```
  <pre class="brush:css;">
  background-image:url('images/templatemo_header_background.gif');
  ```
  
   可能要改為（因為現在的css檔放在css資料夾中）： ```
  <pre class="brush: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) 樣式表： ```
      <pre class="brush:css;">
      body{
        background-image: url(images/templatemo_main_bg.jpg);
      }
      ```
  - (2) 網頁： ```
      <pre class="brush:xml;">
      <body>
      </body>
      ```
2. ID挑選器：樣式表以「#名稱」宣告，網頁則需使用id屬性，如： 
  - (1) 樣式表： ```
      <pre class="brush:css;">
      #container{
          width:960px;
          margin:0px auto;
          background-image: url(images/templatemo_wrapper_m.png);
      }
      ```
  - (2) 網頁： ```
      <pre class="brush:xml;">
      <div id="container">
      </div>
      ```
3. 類別挑選器：樣式表以「.名稱」宣告，網頁則需使用class屬性，如： 
  - (1) 樣式表： ```
      <pre class="brush:css;">
      .content{
        padding:10px;
        font-size: 12px;
        color:#594e51;
        line-height: 180%;
        text-align: justify;
      }
      ```
  - (2) 網頁： ```
      <pre class="brush:xml;">
      <div class="content">
      </div>
      ```
 
### 七、 比較常用的關係挑選器

1. 子層（>）： 
  - CSS寫法： ```
      <pre class="brush:css;">
      .content > h2{
        font-size: 20px;
        color:#822444;
        font-family: "微軟正黑體";
      }
      ```
  - 網頁寫法： ```
      <pre class="brush:xml;">
      <div class="content">
        <h2校務未來發展重點></h2>
        略
      </div>
      ```
2. 包含（空白）： 
  - CSS寫法： ```
      <pre class="brush:css;">
      ul li{
        list-style-image: url(images/templatemo_list.png);
      }
      ```
  - 網頁寫法： ```
      <pre class="brush:xml;">
      <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（空的內容時）
 
</body>

:::