iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
0

上一篇介紹套用CSS的方法,最常用的是另外建立css檔並引入html檔。那麼我們要怎麼在css檔內寫入我們想要的樣式呢?

首先我們會介紹css的語法,接著本篇的重點在於selector(選擇器)。選擇器是CSS用來指定HTML的元素—指定特定的樣式要用在哪些元素上。

先來了解CSS的語法吧!

下圖是CSS的語法,通常這樣子排列,比較好讀。



語法解說:

  • 用選擇器去指定要套樣式的元素
  • 用大括號包住樣式聲明,大括號內可寫多行樣式。
  • 樣式聲明:
    • property屬性,用屬性來指定你要改變元素的什麼性值,像是背景、字體、字的大小、顏色等樣式。
    • value值,指定該屬性的對應值,像顏色屬性的值,就會是色碼 ; 字體大小屬性的值,就是賦予各種單位的數值。
    • 每個樣式的聲明都要用分號結尾,用來區隔每一行聲明。
  • 結果:

另外還有@規則,透過開頭為@的語法,可以匯入字碼設定(@charset)、媒體訊息(@media)、其它樣式表等(像上一篇講到的@import就是)。

CSS的語法重點就這樣,CSS主要就是用選擇器跟樣式聲明堆疊起來的,當聲明越寫越多個時候,語法的排版就很重要,第一張圖就是普遍大家寫CSS code時會用的排版方式。

CSS selector(選擇器)

任何元素選擇符*

  • *米字號可以選到所有的元素(也可以說是選到所有的節點)。試著指定這個html檔的所有元素,並給予底線樣式。

      <h1>暑假計畫</h1>
    
      <h2>研究西拉雅歷史</h2>
      <ul>
        <li>找部落資料</li>
        <li>成立圖書會</li>
        <li>擬訪談搞</li>
      </ul>
    
      <h2>考救生員執照</h2>
      <ol>
        <li>報名救生員暑期班</li>
        <li>買競速泳衣</li>
      </ol>
    
  • 再用任何元素選擇符,選擇所有元素,並聲明底線樣式:

      * {
          text-decoration: underline;
      }
    
  • 所有的元素(h1、h2、ul內的li、ol內的li)的字都有了底線:

element selector(元素選擇器)

  • 在css檔內指定要套樣式的元素名稱,例如:

      h2 {
          background-color: lightblue;
      }
    
  • 結果

class selector(類別選擇器)

class選擇器,只想要指定某個、或某些特定的元素時的用法,它對應html檔元素內的class屬性值,在CSS裡,class的選擇符為" . ",一個簡單的點(dot)。

HTML的class屬性可以指定多個,每個屬性值用" "空格來區別,例如我們幫一個元素寫入三個class值:

<p class="one two three">
	我是一個段落
</p>

class的命名很重要,上面那樣命名是不好的示範,我們將會在之後介紹。

  • 設定html的class屬性值,比如我們這個計畫列表中,"成立圖書會"跟"報名救生員暑期班"是需要優先處理的事,我們就用class屬性把它特殊化出來:

      <h1>暑假計畫</h1>
    
      <h2>研究西拉雅歷史</h2>
      <ul>
        <li>找部落資料</li>
        <li class="top_priority">成立圖書會</li>
        <li>擬訪談搞</li>
      </ul>
    
      <h2>考救生員執照</h2>
      <ol>
        <li class="top_priority">報名救生員暑期班</li>
        <li>買競速泳衣</li>
      </ol>
    
  • 然後在css檔內用class選擇符" . "加上class的值"top_priority",聲明大紅色的背景跟白色的字:

      .top_priority {
        background-color: red;
        color: white;
      }
    
  • 結果

ID selector(ID選擇器)

CSS的ID選擇符為" # ",後面加上HTML的ID屬性值,想要指定單一元素的樣式,就可以用到ID,ID屬性值在同一個html文檔內不得重複,它就像人的身份證字號一樣,是獨一無二的。

  • 比方我們這個 todo list裡,必須選出唯一一個必須做的是,是最重要的。那麼我們可以用ID屬定來指定它:

      <h1>暑假計畫</h1>
    
      <h2>研究西拉雅歷史</h2>
      <ul>
        <li>找部落資料</li>
        <li id="must_do">成立圖書會</li>
        <li>擬訪談搞</li>
      </ul>
    
      <h2>考救生員執照</h2>
      <ol>
        <li>報名救生員暑期班</li>
        <li>買競速泳衣</li>
      </ol>
    
  • 接著,在css檔裡用ID選擇符" # ",選擇id值為"must_do"的元素:

      #must_do {
      	font-weight: bolder;
      	font-size: 23px;
      	background-color: yellow;
      }
    
  • 結果

選擇器的大小寫區分

元素選擇器不區分大小寫,例如h1跟H1效果會是一樣的。但是在選擇器控制範圍外的語法就可能會有大小寫區分,比方屬性值就有區分大小寫,像class跟ID的屬性值是區分大小寫的,如果html中屬性class="warning",選擇器內的class值打成Warning就無效,還是要小心使用哦!

今天的筆記告一段落,下一篇也是講選擇器,明天見囉~/images/emoticon/emoticon41.gif

*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。


上一篇
Day10 如何套用CSS
下一篇
Day12 CSS selector (2)
系列文
從門外漢到前端新手30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言