我的位置:首頁 >   > 

    程式語言教學-CSS篇-01

    發表時間:

    通過前四篇的HTML教學後

    正式進入到CSS教學篇了

    何謂CSS

    CSS 的全名為 Cascading Style Sheets

    中文稱為"樣式表"

    可以讓瀏覽器把我們所撰寫的HTML套上效果(大小、色彩、間距、位置.....etc)

    CSS的使用方式有三種

    1.在<head>標籤中加入<style type="text/css">CSS內容</style>

    2.引入外部的CSS檔案,一樣在<head>中加入<link href="檔案路徑" rel="stylesheet" type="text/css" />

    3.直接在HTML標籤中使用CSS,<span style="CSS內容">

    但是通過第1.2點所引入或撰寫的CSS要怎麼知道必須套用到哪一些我們所寫的HTML標籤呢??

    這就要使用到所謂的CSS選擇器了

    通過選擇器可以精準的套用到一個或多個HTML標籤

    以下就來介紹選擇器的種類和用法吧
    1. 通用選擇器(Universal selector)

    這個選擇器的特點就是,會套用到"所有的元素"

    使用方法:

    *{
    CSS內容
    }

    範例:

    <html>
    <head>
    <style type="text/css">
    *{
    font-size:200px;
    }
    </style>
    </head>
    <body>
    <span>Test</span>
    <div>Test</div>
    Test
    </body>
    </html>

    如果忘記HTML標籤的話,可以去翻一下之前所寫的文章

    程式語言教學-HTML篇-01
    程式語言教學-HTML篇-02
    程式語言教學-HTML篇-03
    程式語言教學-HTML篇-04

    執行範例後會發現,不管是<span>、<div>甚至純文字都會被"font-size:200px;"這個效果給放大

    所以這種選擇器很適合套用廣域的規格
    2. Type selectors(類型選擇器)

    這個選擇器是針對標籤去做套用

    使用方法:

    標籤名{
    CSS內容
    }

    範例:

    <html>
    <head>
    <style type="text/css">
    div{
    font-size:200px;
    }
    </style>
    </head>
    <body>
    <span>Test</span>
    <div>Test</div>
    Test
    </body>
    </html>

    執行後只有DIV標籤會被套用CSS規則,如果有多個標籤可以用逗點區隔

    範例2:

    <html>
    <head>
    <style type="text/css">
    div,span{
    font-size:200px;
    }
    </style>
    </head>
    <body>
    <span>Test</span>
    <div>Test</div>
    Test
    </body>
    </html>
    3. ID selectors(ID選擇器)

    這個選擇器是針對HTML標籤中的ID屬性去套用,ID名稱前面必須加上關鍵字"#",ID大小寫沒有差異

    使用方法:

    #ID名稱{
    CSS內容
    }

    範例:

    <html>
    <head>
    <style type="text/css">
    #DIV{
    font-size:200px;
    }
    </style>
    </head>
    <body>
    <span>Test</span>
    <div id="DIV">Test</div>
    Test
    </body>
    </html>

    執行後只有ID為DIV的標籤被套用
    4. Class selectors(類選擇器)

    這個選擇器是針對HTML標籤中的Class屬性去套用,Class名稱前面必須加上關鍵字".",大小寫一樣沒有差別

    使用方法:

    .Class名稱{
    CSS內容
    }

    範例:

    <html>
    <head>
    <style type="text/css">
    .DIV{
    font-size:200px;
    }
    </style>
    </head>
    <body>
    <span>Test</span>
    <div class="DIV">Test</div>
    Test
    </body>
    </html>

    Class selectors 和 ID selectors 使用上其實大同小異,但是標籤可以套用多個Class樣式,兩個樣式名稱中間用空格分開

    範例2:

    <html>
    <head>
    <style type="text/css">
    .DIV{
    font-size:200px;
    }
    .RED{
    color:red;
    }
    </style>
    </head>
    <body>
    <span>Test</span>
    <div class="DIV RED">Test</div>
    Test
    </body>
    </html>

    執行後不只DIV標籤中的文字放大,連同文字顏色也被改成紅色
    5. Descendant selectors(後代選擇器)

    所謂的後代就是被一組標籤包在裡面的標籤(上下關係),兩個關鍵字中間用空格分開

    使用方法:

    關鍵字1 關鍵字2{
    CSS內容
    }

    範例:

    <html>
    <head>
    <style type="text/css">
    div span{
    font-size:200px;
    }
    </style>
    </head>
    <body>
    <div>
    <span>Test</span>
    Text
    </div>
    </body>
    </html>

    執行後會發現被DIV包住的SPAN標籤被放大了,但是一般文字卻維持著同樣的大小

    如果換成以下的狀況呢?

    範例2:

    <html>
    <head>
    <style type="text/css">
    div span{
    font-size:200px;
    }
    </style>
    </head>
    <body>
    <div>
    <a>
    <span>Test</span>
    </a>
    Text
    </div>
    </body>
    </html>

    SPAN標籤被A標籤包住,而A標籤又被DIV標籤包住

    但是執行後SPAN標籤一樣被CSS套用了,所以Descendant selectors會把關鍵字1包住的"所有"關鍵字2的標籤套用CSS

    其實關鍵字並非只能是標籤名,用Class或是ID也可以

    範例3:

    <html>
    <head>
    <style type="text/css">
    div .sp{
    font-size:200px;
    }
    </style>
    </head>
    <body>
    <div>
    <a>
    <span>Test</span>
    <span class="sp">Test</span>
    </a>
    Text
    </div>
    </body>
    </html>

    範例3中的CSS會被解讀成在"DIV標籤"下的所有"Class屬性"為sp的標籤

    以上就是在網頁設計上比較常用的選擇器,至於哪些標籤可以套用哪些效果,這就要自己去GOOGLE了

    嘗試配合之前所學的HTML,撰寫出一個漂亮的網頁吧

    下一篇會繼續介紹一些比較特殊的選擇器