第9天 | 16天搞定前端,CSS的語法和選擇器(必看)

老陳說編程 發佈 2020-12-12T15:44:52+00:00

年輕人不講武德,那是不可取的,你看,連CSS都得講規則。CSS的語法,挺簡單的。它有兩部分組成,一個是選擇器,一個是聲明語句。選擇器是你需要改變樣式的 HTML 元素,每條聲明由鍵:值對組成,以分號(;)結束,聲明都放在大括號裡面。儘管多條聲明可以放在同一行,但建議你一條一行。

年輕人不講武德,那是不可取的,你看,連CSS都得講規則。CSS的語法,挺簡單的。它有兩部分組成,一個是選擇器,一個是聲明語句。

選擇器是你需要改變樣式的 HTML 元素,每條聲明由鍵:值對組成,以分號(;)結束,聲明都放在大括號裡面。儘管多條聲明可以放在同一行,但建議你一條一行。

如下,選擇器為h1,聲明語句是color: green;和text-align:center;語句使用就是在碼英語單詞,用法挺簡單的。

h1 {
color: green;
text-align:center;
}

選擇器,有7種,解析優先級為:內嵌樣式表 > id 選擇器 > 類選擇器 = 偽類選擇器 = 屬性選擇器 > 標籤選擇器 = 偽元素選擇器。用得較多的有id選擇器、類選擇器和標籤選擇器。

9.1 id 選擇器

id選擇器里的id,是指定HTML元素中的id屬性。幾乎所有HTML標籤都有id屬性,CSS用#號進行指定。如有個id="h"的<h1>標籤,在瀏覽器進行解析時,<h1>會被自動附上CSS的內容。

溫馨提醒:在CSS文件中,注釋用/**/;在HTML文件中,用<!-- -->。

/*放在樣式表ys.css文件中*/
#h {
color:green;
}
<!--放在html文件中-->
<h1 id="h">這個愛分享技術的IT老傢伙,<b/>
    將分享Python、 前端、<br/>
    App和Java等技術,你趕緊來關注</h1>

輸出結果

9.2 class選擇器

class 選擇器不同於id選擇器,id選擇器常用於id名稱相同的HTML標籤中,可id相同會給人造成困擾。class則不同,它可以在多個元素中被使用。如果你要用,就用HTML標籤的class指定,不用的話,不管就好。 類選擇器以一個點"."號顯示的。

/*放在樣式表ys.css文件中*/
.d {
    text-shadow: 5px 5px 5px #FF0000;
    text-align:left;
}
<!--放在html文件中-->
<div class="d">
    今天早上,剛一進辦公室,就發現氣氛特別不對勁,<br/>
    大家都在緊鑼密鼓的忙著,但又都是一些與工作無關的事,<br/>
    就連最最敬業的潔姐也不例外。<br/>
    我坐下想了半天,百思不得其解,<br/>
    潔姐看我這個鬼樣子,一句道破天機:<br/>
    生病住院的副總已經出院,明天就正式上班。
</div>

輸出效果

9.3 標籤選擇器

在樣式表中直接用標籤名,聲明語句。在HTML中,如果有其標籤,那麼就會被CSS修飾。它常用於全局背景之類的應用。

/*放在樣式表ys.css文件中*/
body {
    background-color:#6495ad;
}

h2 {
   color:#00ffa1;
}

p{
    color:grey
}

HTML文件內容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>標籤選擇器</title>
    <link rel="stylesheet" type="text/css" href="ys.css"/>
</head>
<body>
<h2>老陳說編程</h2>
<p>
    IT界一老頭
</p>
</body>
</html>

輸出結果

內嵌樣式表之前說過,不再贅述,偽類選擇器、屬性選擇器 、偽元素選擇器平時用得較少,後面用到的時候,我再講解一番。在此之前,建議你關注我一下。

好了,有關CSS的語法和選擇器的內容,老陳講完了,如果覺得對你有所幫助,希望老鐵能轉發點讚,讓更多的人看到這篇文章。你的轉發和點讚,就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老傢伙,分享多年的編程經驗。想學編程的朋友,可關注今日頭條:老陳說編程。分享Python,前端(小程序)、App和嵌入式方面的乾貨。關注我,沒錯的。

#前端##HTML5##CSS##程式設計師##Web#

關鍵字: