iT邦幫忙

2022 iThome 鐵人賽

DAY 9
0

https://ithelp.ithome.com.tw/upload/images/20220924/20148082RGqqGlf39c.jpg
營養標示


選擇器 (Selectors)

順著黃光燈泡看向餐桌上的保健品與藥罐,玲瑯滿目就像是黃昏時都市中的大樓,參差不齊的排列總是很難一眼看見要挑選的目標,也不知道從何時開始,這些東西漸漸變成人們的養分來源之一。

網頁上的元素越多,越難找到想要的目標,CSS在挑選時就能夠透過許多方式,來選取一個或多個元素:

  • 通用選擇器 *
    就是這個星號 * 可以直接選擇所有的元素,這可以將所有元素都套用同樣的樣式。

  • 標籤選擇器 例如:h1
    直接用元素的標籤名來選擇。

  • 類別選擇器 例如:.divider
    用以選擇所有符合指定類別(class)屬性值的元素。

  • ID選擇器 例如:#description
    用以選擇指定id值的元素,跟類別不同的是,每一種id在一個網頁中只會存在一個。


外部資源連結 (link)

link是一個在html上的標籤,這在點餐篇的任務中就已經使用到,讓我們仔細看看:

<head>
    <title>Cafe Menu</title>
    <link href="./styles.css" rel="stylesheet" />
</head>

link標籤通常在head元素之中,常見的兩個屬性有rel跟herf:

  • rel (relationship)
    表示這個link元素的一個關鍵關係,比方說rel="stylesheet"代表這個連結是樣式表,用來裝飾html中的元素。

  • herf
    這裡就是放上外部的連結,注意到如果html與css是放在同一個資料夾中,就可以寫成href="./styles.css"來連結本地的(local side)css樣式表。

接收到的資訊越來越多,如同桌上的瓶瓶罐罐,在腦中整理並消化這些養分,在寫下網站的程式選擇洽當的元素與樣式,完成營養標示吧。

下一篇:無障礙網頁


引用與資源:
freecodecamp
mdn_web_docs_Selectors
mdn_web_docs_link
我的營養標示


上一篇
Day8 - 保持彈性 (flexbox)
下一篇
Day10 - 無障礙網頁 (WAI-ARIA)
系列文
30天讓你爺爺取得 FreeCodeCamp 響應式網頁設計證書30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言