【CSS選擇符】類型選擇符

微信公眾號(hào):Rabbit_svip

CSS代碼:

h1 {
    font-family: Arial, sans-serif;
    color: #CCF;
}




用于選取特定HTML標(biāo)簽的選擇符,叫類型選擇符或元素選擇符。這種選擇符的作用特別大。能把樣式應(yīng)用到網(wǎng)頁(yè)中的每個(gè)目標(biāo)標(biāo)簽上。使用這種選擇符,只需少量工作就能大幅修改網(wǎng)頁(yè)的外觀。

假如想讓網(wǎng)頁(yè)中每個(gè)段落都使用相同的字體、顏色和字號(hào),只需編寫(xiě)一個(gè)選擇符為p(表示<p>標(biāo)簽)的樣式即可。

HTML代碼:

<p>
最基本的佐餐面包,便是吐司了。吐司的最大優(yōu)點(diǎn)就是沒(méi)有獨(dú)特的味道,很容易搭配其他料理;例如,只是簡(jiǎn)單涂抹上一層黃油就很好吃;在兩篇吐司里夾著火腿或蛋、蔬菜等食材做成三明治也很棒;在吐司上抹番茄醬,鋪放奶酪后再烤,則是美味的吐司披薩。
</p>

<p>
吐司有“方形”和“山形”兩種不同的形狀,吃的時(shí)候最好配合吐司的特征,決定不一樣的吃法。所謂吐司的特征,是指切片的厚度。不一樣厚度的吐司會(huì)帶來(lái)不一樣的口感,從而衍生出許多吃法。切成薄片的吐司吃起來(lái)有松脆的口感,厚片吐司則有綿密松軟的口感。請(qǐng)隨著喜好選擇適合的吐司,找到自己喜歡的吃法吧!
</p>

CSS代碼:

p {
    font: normal 1.2em "Slabo 27px", Garamond, Times, serif;
    color: #0e98c6;
}

得到以下效果


微信公眾號(hào):Rabbit_svip




類型選擇符用于重新定義瀏覽器顯示所有標(biāo)簽的方式。
也就是對(duì)網(wǎng)頁(yè)標(biāo)簽的重定義(reset)。

在CSS規(guī)則中很容易找到類型選擇符,它們的名稱與要裝飾的標(biāo)簽名一樣。例如p、h1、table、img等。

在CSS出現(xiàn)之前,如果要裝飾文字,要把文字放在<font>標(biāo)簽里;如果想讓網(wǎng)頁(yè)中的每個(gè)段落都具相同的外觀,通常要使用很多<font>標(biāo)簽。這樣的過(guò)程是個(gè)體力活,要編寫(xiě)很多HTML代碼,而且會(huì)導(dǎo)致網(wǎng)頁(yè)的下載速度變慢,更新時(shí)要用很多時(shí)間。有了類型選擇符,我們無(wú)需對(duì)HTML做任何修改,只需編輯所需的CSS規(guī)則,其他的工作都交給瀏覽器去做。

類型選擇符的缺點(diǎn):
?無(wú)法精準(zhǔn)控制每一個(gè)元素。
?有可能加大瀏覽器的渲染壓力(雖然對(duì)于現(xiàn)在的電腦來(lái)說(shuō)幾乎毫無(wú)壓力)。




HTML與CSS 目錄:HTML與CSS

下一篇:【CSS選擇符】類選擇符 和 ID選擇符

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,805評(píng)論 1 92
  • 本文主要是起筆記的作用,內(nèi)容來(lái)自慕課網(wǎng). 認(rèn)識(shí)CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,663評(píng)論 0 30
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,621評(píng)論 32 459
  • 張清的日精進(jìn)第79天 體驗(yàn)入 真正想要的東西,不只是踮踮腳尖那么簡(jiǎn)單。 所有的收獲,一定要全力以赴,奮不顧身!!!...
    kiyoi2017閱讀 146評(píng)論 0 3
  • 蘋(píng)果8上市以來(lái),市場(chǎng)反應(yīng)慘淡。以往iPhone首發(fā)Apple Store門(mén)前排長(zhǎng)龍,黃牛堵門(mén)收機(jī)的情景還歷歷在目。...
    牛頂風(fēng)閱讀 331評(píng)論 2 2