iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
2
自我挑戰組

迷路的前端工程系列 第 9

第九日:CSS 選取器

  • 分享至 

  • xImage
  •  

第八日回顧:
我們在昨天介紹了什麼是 id 和 class,今天就來使用他們吧

  • {attr:value;}: 全選,通過一個米字號可以表達全選的部分
    #id_name{attr:value;}:ID選取器,我們透過這種方式來替所選擇 id 的標籤更改樣式
    .class_name{attr:value;}:class選取器,可以同時更改許多同樣 class 標籤的樣式
    tag_name {attr:value;}:類型選取器,更改全部同樣標籤的屬性
    li > a {attr:value;}:子元素選取器,選擇身為 li 子元素的 a 元素,排除其他 a 元素
    p a {attr:value;}:後代許取器:選擇身為 p 元素的後代 a 元素,不用是直系元素

CSS RESET:
通常為了避免每個瀏覽器初始 CSS 元件設定不同,我們會有一個叫做 CSS reset 的過程,將全部的樣式統一,以避免在 A 瀏覽器上運行好好的,結果到了 B 瀏覽器跑版的慘案。

RWD 網頁開發:
又稱響應是網頁開發,具體表現就是同樣的網頁在不同寬度下的設備觀看會有不一樣的版型,以達到最高的觀看效果。

CSS 預處理器:
CSS 預處理器可以想成是透過寫程式來生產出 CSS 代碼,現在流行的有兩款:
SASS 以及 LESS ,後面會對 SASS 多加介紹。

今天就先介紹一下 CSS 選取器以及一些常看到的名詞解釋,明天正式來敲代碼囉~

小抱怨專區:
鐵人是用來堅持的,不是用來逃避的,那怕眼皮在打架...,那怕內容很敷衍...


上一篇
第八日:CSS 基本操作
下一篇
第十日:CSS之盒子模型
系列文
迷路的前端工程16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言