順著黃光燈泡看向餐桌上的保健品與藥罐,玲瑯滿目就像是黃昏時都市中的大樓,參差不齊的排列總是很難一眼看見要挑選的目標,也不知道從何時開始,這些東西漸漸變成人們的養分來源之一。
網頁上的元素越多,越難找到想要的目標,CSS在挑選時就能夠透過許多方式,來選取一個或多個元素:
通用選擇器
*
就是這個星號 * 可以直接選擇所有的元素,這可以將所有元素都套用同樣的樣式。
標籤選擇器
例如:h1
直接用元素的標籤名來選擇。
類別選擇器
例如:.divider
用以選擇所有符合指定類別(class)屬性值的元素。
ID選擇器
例如:#description
用以選擇指定id值的元素,跟類別不同的是,每一種id在一個網頁中只會存在一個。
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
我的營養標示