iT邦幫忙

2021 iThome 鐵人賽

DAY 5
1
自我挑戰組

從零開始前端學習筆記(HTML、CSS、JavaScript)系列 第 5

Day 05 CSS <基礎選擇器>

CSS的選擇器分為基礎選擇器以及複合選擇器
本日將先說明基礎選擇器 DAY6將繼續說明複合選擇器

CSS中的基礎選擇器
單個選擇器組成,包含標籤選擇器類選擇器id選擇器通配符選擇器

標籤選擇器
是指用HTML標籤名稱作為選擇器
按照標籤名稱分類,為頁面中某一類標籤指定統一的CSS樣式

標籤名{
屬性1 : 屬性值1;
屬性1 : 屬性值1;
...
}

主要功用 : 把某一類標籤全部選擇出來,像是所有的<div>標籤和所有的<span>標籤
優點 : 能快速為頁面中同類型的標籤統一設置樣式
缺點 : 不能設計差異化的樣式,只能選擇全部的同類標籤

類選擇器
若要單獨選一個或某幾個標籤,可以使用類選擇器
HTML元素以class屬性來設置類選擇器,CSS中類選擇器以"."來定義

<style>
.example{     //套用HTML標籤中的example類別
color : red;  //把內容文字修改成顏色
}
</style>

<body>

<div class=example>
這是類選擇器的範例
</div>

</body>

類選擇器範例

備註:
1.可以理解為給HTML內標籤起了名子來表示 (class=想要添加的命名)
2.不可使用純數字或中文命名,一般都使用英文字母做命名
3.命名盡量有意義,也方便操作使用

多類名
給一個標籤指定多個類名來達到更多的操作目的
簡單理解就是一個標籤有多個名子

<div class=" red fong">多類名冊是 此處的div有red跟fong兩種類名</div>

備註:

  1. 多個類名中間必須使用空格進行分開
  2. 上面的程式碼div標籤將會分別具有red以及fong兩種類別的樣式

多類名的使用場景:

  1. 可以把一些標籤元素共同的部分放到一個類裡面
  2. 這些標籤就可以調用公共的類 然後再去調用自己獨有的類
  3. 以此來節省CSS代碼,修改也較方便

id選擇器
id選擇器可以為標有特定id的HTML元素指定特定的樣式
HTML元素以id屬性來設置id選擇器,CSS中id選擇器以"#"來定義

/*
ex:將id為nav元素中的內容設置為紅色
*/
CSS語法:
#nav{
color: red;
}
HTML語法:
<div id=nav>
id選擇器內容
</div>

id選擇器和類選擇器的區別

  1. 類選擇器(class)好比人的名字,一個人可以有多個名子,一個名子也可以被多個人使用
  2. id選擇器好比身分證號碼,是唯一的,在頁面中不可重複
  3. id選擇器和類選擇器最大的不同在於使用次數上
  4. 類選擇器在修改樣式中用的最多,id選擇器一般用於頁面唯一的元素上,經常和JS搭配使用

通配符選擇器
通配符選擇器使用"*"定義,表示選取頁面中的所有元素(標籤)

*{
margin: 0;
padding: 0;
}

備註 :
通配符選擇器不需要調用,自動就給所有的元素使用樣式
特殊情況才使用,EX : 清除所有元素標籤的內外邊距)


上一篇
Day 04 HTML<表單標籤>
下一篇
Day 06 CSS <複合選擇器>
系列文
從零開始前端學習筆記(HTML、CSS、JavaScript)10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言