:::

3. CSS3入門

一、 關於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(空的內容時)

:::

搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D972

書籍目錄

展開 | 闔起

線上使用者

36人線上 (15人在瀏覽線上書籍)

會員: 0

訪客: 36

更多…