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屬性，如： ```
    
    <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（空的內容時）
 
</body>

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Ftad0616.net%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D972

快速登入

書籍目錄

展開 | 闔起

線上使用者

113人線上 (69人在瀏覽線上書籍)

會員: 1

訪客: 112

tad,

更多…

MarkDown

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者