認真的F
@MajimeF
Fri, Oct 29, 2021 4:47 AM
Sat, Oct 30, 2021 7:54 AM
2021/10/29（五）
線上課程
網頁開發
學習進度
進度紀錄
60/554。複習日。
https://www.udemy.com/...
57、element, id, class selector。
認真的F
@MajimeF
Fri, Oct 29, 2021 4:47 AM
上一噗：
@MajimeF - 2021/10/28（四） #線上課程 #網頁開發 #學習進度 #進度紀錄 60/...
認真的F
@MajimeF
Fri, Oct 29, 2021 4:47 AM
此課程
書籤噗
：
@MajimeF - #書籤噗 #線上課程學習紀錄 #網頁開發
認真的F
@MajimeF
Fri, Oct 29, 2021 4:49 AM
057. Element, Id, Class Selectors
這課三個一起講。
彼此也有點相關連。
認真的F
@MajimeF
Fri, Oct 29, 2021 4:50 AM
HTML Tag's attribute（屬性）：
在 HTML 中，每一個標籤，可以做得屬性設定。
1. id：如身份證，是獨一無二的，且一個標籤只能有一個ID。
2. class：
不是班級
類別。給標籤分類用。
認真的F
@MajimeF
Fri, Oct 29, 2021 4:50 AM
一個標籤…
可以有很多個 class 。
但只能有一個 ID。
認真的F
@MajimeF
Fri, Oct 29, 2021 4:53 AM
【element Selector】
element＝標籤＝TAG。
其實這就是之前已經學過的那種…
h1 {
color: green;
}
認真的F
@MajimeF
Fri, Oct 29, 2021 4:56 AM
直接選擇標籤（h1、h2、p…等等）去指定樣式。
輸入標籤名稱，空格，大括號，裡面寫指定樣式。
寫完分號結束。
認真的F
@MajimeF
Fri, Oct 29, 2021 8:08 AM
【ID Selector】
想要特定標籤是別的顏色，就能用 ID Selector。
其實也是可以直接在該標籤指定樣式，不過這方法的話以後要修改可以一口氣改XD
認真的F
@MajimeF
Fri, Oct 29, 2021 8:08 AM
如果前面指定 h1 是綠色，但想要某一個是紅色。
先指定ID：
<h1 id="redText">H1大標題2</h1>
認真的F
@MajimeF
Fri, Oct 29, 2021 8:11 AM
如果前面指定 h1 是綠色，但想要某一個是紅色。
先指定ID：
<h1 id="redText">H1大標題2</h1>
自定義 ID 為「redText」。
認真的F
@MajimeF
Fri, Oct 29, 2021 8:13 AM
到 .css 文件進行設定。
id selector 要以「#（井字號）」開頭。
redText
{
color: red;
}
指定 ID 為「redText」的標籤是紅色字。
認真的F
@MajimeF
Fri, Oct 29, 2021 8:15 AM
效果：
element selector 指定<h1>為綠色。
id selector 指定「id="redText"」的<h1>是紅色，因此所有<h1>只有它是紅色。
認真的F
@MajimeF
Fri, Oct 29, 2021 8:21 AM
不過 ID 不能重複，所以只能用在一個標籤上。
如果想要複選的話，就要改用 class selector。
認真的F
@MajimeF
Fri, Oct 29, 2021 8:23 AM
【Class Selector】
指定類別。同類別的可以一起更動。
ID 不能重複，一個標籤也只能有一個。
class 可以重複，一個標籤可以有複數類別。
認真的F
@MajimeF
Fri, Oct 29, 2021 8:24 AM
一樣先指定
<h1 class="blueText">H1大標題3</h1>
<h1 class="blueText">H1大標題4</h1>
把這兩個歸類在「blueText」類別中。
認真的F
@MajimeF
Fri, Oct 29, 2021 8:27 AM
到 .css 文件去設定：
class selector 要以「.（點）」開頭。
.blueText {
color: blue;
}
指定 Class 為「blueText」的標籤是藍色字。
認真的F
@MajimeF
Fri, Oct 29, 2021 8:30 AM
效果：
element selector 指定<h1>為綠色。
id selector 指定「id="redText"」的<h1>是紅色。
class selector 指定「class="blueText"」的<h1>是藍色。
這個 class 類別可以指定好幾個。id 則不能重複。
認真的F
@MajimeF
Fri, Oct 29, 2021 10:44 AM
一個標籤的 id 只能有一個。
class 則可以有好幾個（複數種類）。
加入複數 class ，不用再打一個「class="類別"」，直接在後面加空格後輸入第二個 class 即可。
<h1 class="blueText largeText">H1大標題1</h1>
認真的F
@MajimeF
Fri, Oct 29, 2021 10:48 AM
這樣是錯誤寫法：
<h1 class="blueText" class="largeText">H1大標題1</h1>
不用這樣。
實測也沒有作用…只會認得第一個 class。
認真的F
@MajimeF
Fri, Oct 29, 2021 10:54 AM
效果：
這個 font-size: 3rem 還沒學到。
先知道指定文字三倍大即可。
認真的F
@MajimeF
Sat, Oct 30, 2021 6:59 AM
【並用】
element、id、class selector 是可以互相並用的。
直接在選擇器後方輸入另一個選擇器即可。
認真的F
@MajimeF
Sat, Oct 30, 2021 7:00 AM
例如設定：
<h1 class="redText">H1大標題1</h1>
<h1 class="blueText">H1大標題2</h1>
<p class="blueText">P段落文字2。</p>
認真的F
@MajimeF
Sat, Oct 30, 2021 7:02 AM
CSS設定：
在「h1（element選擇器）」後面直接加上「.blueText（class選擇器）」。
h1.blueText {
color: blue;
}
選擇器直接加上前一個後面。不要空格（實測空格會失效）。
認真的F
@MajimeF
Sat, Oct 30, 2021 7:20 AM
效果圖：
變動範圍：「符合全部」的標籤。
要同時包含「h1標籤」與「class="blueText"」才有作用。
因此生效的是「H1大標題2」。
另外兩個只符合其中一項，就沒有效果。
認真的F
@MajimeF
Sat, Oct 30, 2021 12:27 PM
下一噗：
@MajimeF - 2021/10/30（六） #線上課程 #網頁開發 #學習進度 #進度紀錄 60/...
載入新的回覆
線上課程 網頁開發 學習進度 進度紀錄 60/554。複習日。
https://www.udemy.com/...
57、element, id, class selector。
這課三個一起講。
彼此也有點相關連。
在 HTML 中，每一個標籤，可以做得屬性設定。
1. id：如身份證，是獨一無二的，且一個標籤只能有一個ID。
2. class：
不是班級類別。給標籤分類用。可以有很多個 class 。
但只能有一個 ID。
element＝標籤＝TAG。
其實這就是之前已經學過的那種…
h1 {
color: green;
}
輸入標籤名稱，空格，大括號，裡面寫指定樣式。
寫完分號結束。
想要特定標籤是別的顏色，就能用 ID Selector。
其實也是可以直接在該標籤指定樣式，不過這方法的話以後要修改可以一口氣改XD
先指定ID：
<h1 id="redText">H1大標題2</h1>
先指定ID：
<h1 id="redText">H1大標題2</h1>
自定義 ID 為「redText」。
id selector 要以「#（井字號）」開頭。
redText {
color: red;
}
指定 ID 為「redText」的標籤是紅色字。
element selector 指定<h1>為綠色。
id selector 指定「id="redText"」的<h1>是紅色，因此所有<h1>只有它是紅色。
如果想要複選的話，就要改用 class selector。
指定類別。同類別的可以一起更動。
ID 不能重複，一個標籤也只能有一個。
class 可以重複，一個標籤可以有複數類別。
<h1 class="blueText">H1大標題3</h1>
<h1 class="blueText">H1大標題4</h1>
把這兩個歸類在「blueText」類別中。
class selector 要以「.（點）」開頭。
.blueText {
color: blue;
}
指定 Class 為「blueText」的標籤是藍色字。
element selector 指定<h1>為綠色。
id selector 指定「id="redText"」的<h1>是紅色。
class selector 指定「class="blueText"」的<h1>是藍色。
這個 class 類別可以指定好幾個。id 則不能重複。
class 則可以有好幾個（複數種類）。
加入複數 class ，不用再打一個「class="類別"」，直接在後面加空格後輸入第二個 class 即可。
<h1 class="blueText largeText">H1大標題1</h1>
<h1 class="blueText" class="largeText">H1大標題1</h1>
不用這樣。
實測也沒有作用…只會認得第一個 class。
這個 font-size: 3rem 還沒學到。
先知道指定文字三倍大即可。
element、id、class selector 是可以互相並用的。
直接在選擇器後方輸入另一個選擇器即可。
<h1 class="redText">H1大標題1</h1>
<h1 class="blueText">H1大標題2</h1>
<p class="blueText">P段落文字2。</p>
在「h1（element選擇器）」後面直接加上「.blueText（class選擇器）」。
h1.blueText {
color: blue;
}
選擇器直接加上前一個後面。不要空格（實測空格會失效）。
變動範圍：「符合全部」的標籤。
要同時包含「h1標籤」與「class="blueText"」才有作用。
因此生效的是「H1大標題2」。
另外兩個只符合其中一項，就沒有效果。