从零基础到web前端工程师（三）
前文連接：從零基礎到web前端工程師（二）
CSS選擇器
文章目錄
- CSS選擇器
- 初始CSS
- 引入CSS樣式表
- 內部樣式表
- 行內式（內聯樣式）
- 外部樣式表（外鏈式）
- 三種樣式表總結（位置）
- CSS樣式規則
- CSS基礎選擇器
- 標簽選擇器（元素選擇器）
- 類選擇器
- 多類名選擇器
- id選擇器
- 通配符選擇器
- CSS字體樣式屬性
- CSS外觀屬性
- CSS復合選擇器
- 交集選擇器
- 并集選擇器:
- 后代選擇器
- 子元素選擇器
- 偽類選擇器
初始CSS
從HTML被發明開始，樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為用戶提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。
隨著HTML的成長，為了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。于是CSS便誕生了。
CSS(Cascading Style Sheets) 美化樣式，CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
CSS以HTML為基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設置不同的樣式。
引入CSS樣式表
內部樣式表
內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中，并且用style標簽定義，其基本語法格式如下：
<head> <style type="text/CSS">選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;} </style> </head>代碼實例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">h3{color: #FF0000;}div{color: #8EA9DB;}h4{color: deeppink;}p{color: #FFD966;size: letter;}</style> </head> <body> <h3>憶江南(1)</h3><div>唐.白居易</div><p>江南好，風景舊曾諳。(2) 日出江花紅勝火，春來江水綠如藍，(3) 能不憶江南。</p><h4>作者介紹</h4><p>白居易(772－846) ，字樂天，太原(今屬山西)人。唐德宗朝進士，元和三年(808)拜左拾遺，后貶江州(今屬江西)司馬，移忠州(今屬四川)刺史，又為蘇州(今屬江蘇)、同州(今屬陜西大荔)刺史。晚居洛陽，自號醉吟先生、香山居士。其詩政治傾向鮮明，重諷喻，尚坦易，為中唐大家。也是早期詞人中的佼佼者，所作對后世影響甚大。</p><h4>注釋</h4> <p>(1)據《樂府雜錄》，此詞又名《謝秋娘》，系唐李德裕為亡姬謝秋娘作。又名《望江南》、《夢江南》等。分單調、雙調兩體。單調二十七字，雙凋五十四字，皆平韻。(2)諳(音安)：熟悉。(3)藍：藍草，其葉可制青綠染料。</p> <h4>品評</h4><p>此詞寫江南春色，首句“江南好”，以一個既淺切又圓活的“好”字，攝盡江南春色的種種佳處，而作者的贊頌之意與向往之情也盡寓其中。同時，唯因“好”之已甚，方能“憶”之不休，因此，此句又已暗逗結句“能不憶江南”，并與之相關闔。次句“風景舊曾諳”，點明江南風景之“好”，并非得之傳聞，而是作者出牧杭州時的親身體驗與親身感受。這就既落實了“好”字，又照應了“憶”字，不失為勾通一篇意脈的精彩筆墨。三、四兩句對江南之“好”進 行形象化的演繹，突出渲染江花、江水紅綠相映的明艷色彩，給人以光彩奪目的強烈印象。其中，既有同色間的相互烘托，又有異色間的相互映襯，充分顯示了作者善于著色的技巧。篇末，以“能不憶江南”收束全詞，既托出身在洛陽的作者對江南春色的無限贊嘆與懷念，又造成一種悠遠而又深長的韻味，把讀者帶入余情搖漾的境界中。</p> </body> </html>顯示效果：
注意：
語法中，style標簽一般位于head標簽中title標簽之后，也可以把他放在HTML文檔的任何地方。
type=“text/CSS” 在html5中可以省略， 寫上也比較符合規范， 所以這個地方可以寫也可以省略。
行內式（內聯樣式）
內聯樣式，又有人稱行內樣式、行間樣式、內嵌樣式。是通過標簽的style屬性來設置元素的樣式，其基本語法格式如下：
<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>例如，我修改了上面代碼實例中最后一個p標簽，修改內容：
<p style="color: #152161;background-color: #FF0000">
顯示效果：
語法中style是標簽的屬性，實際上任何HTML標簽都擁有style屬性，用來設置行內式。其中屬性和值的書寫規范與CSS樣式規則相同，行內式只對其所在的標簽及嵌套在其中的子標簽起作用。
外部樣式表（外鏈式）
鏈入式是將所有的樣式放在一個或多個以.CSS為擴展名的外部樣式表文件中，通過link標簽將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下：
<head><link href="CSS文件的路徑" rel="stylesheet" /> </head>代碼實例：
css部分（這個我創建在一個css文件夾中）
html部分
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>文言文</title><link rel="stylesheet" href="css/style.css" /> </head> <body> <h3 align="center">捕蛇者說</h3> <div align="center">作者：柳宗元</div> <p>永州之野產異蛇：黑質而白章，觸草木盡死；以嚙人，無御之者。然得而臘之以為餌，可以已大風、攣踠、瘺癘，去死肌，殺三蟲。其始太醫以王命聚之，歲賦其二。募有能捕之者，當其租入。永之人爭奔走焉。有蔣氏者，專其利三世矣。問之，則曰：“吾祖死于是，吾父死于是，今吾嗣為之十二年，幾死者數矣。”言之貌若甚戚者。余悲之，且曰：“若毒之乎？余將告于蒞事者，更若役，復若賦，則如何？”蔣氏大戚，汪然出涕，曰：“君將哀而生之乎？則吾斯役之不幸，未若復吾賦不幸之甚也。向吾不為斯役，則久已病矣。自吾氏三世居是鄉，積于今六十歲矣。而鄉鄰之生日蹙，殫其地之出，竭其廬之入。號呼而轉徙，餓渴而頓踣。觸風雨，犯寒暑，呼噓毒癘，往往而死者，相藉也。曩與吾祖居者，今其室十無一焉。與吾父居者，今其室十無二三焉。與吾居十二年者，今其室十無四五焉。非死即徙爾，而吾以捕蛇獨存。悍吏之來吾鄉，叫囂乎東西，隳突乎南北；嘩然而駭者，雖雞狗不得寧焉。吾恂恂而起，視其缶，而吾蛇尚存，則弛然而臥。謹食之，時而獻焉。退而甘食其土之有，以盡吾齒。蓋一歲之犯死者二焉，其余則熙熙而樂，豈若吾鄉鄰之旦旦有是哉。今雖死乎此，比吾鄉鄰之死則已后矣，又安敢毒耶？”余聞而愈悲，孔子曰：“苛政猛于虎也！”吾嘗疑乎是，今以蔣氏觀之，猶信。嗚呼！孰知賦斂之毒，有甚于是蛇者乎！故為之說，以俟夫觀人風者得焉。</p></body> </html>顯示效果：
注意： link 是個單標簽哦!!!
該語法中，link標簽需要放在head頭部標簽中，并且必須指定link標簽的三個屬性，具體如下：
href：定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。
type：定義所鏈接文檔的類型，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表。
rel：定義當前文檔與被鏈接文檔之間的關系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。
三種樣式表總結（位置）
| 行內樣式表 | 書寫方便，權重高 | 沒有實現樣式和結構相分離 | 較少 | 控制一個標簽（少） |
| 內部樣式表 | 部分結構和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個頁面（中） |
| 外部樣式表 | 完全實現結構和樣式相分離 | 需要引入 | 最多，強烈推薦 | 控制整個站點（多） |
CSS樣式規則
使用HTML時，需要遵從一定的規范。CSS亦如此，要想熟練地使用CSS對網頁進行修飾，首先需要了解CSS樣式規則，具體格式如下：
在上面的樣式規則中:
1.選擇器用于指定CSS樣式作用的HTML對象，花括號內是對該對象設置的具體樣式。
2.屬性和屬性值以“鍵值對”的形式出現。
3.屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等。
4.屬性和屬性值之間用英文“:”連接。
5.多個“鍵值對”之間用英文“;”進行區分。
可以用段落 和 表格的對齊的演示。
CSS基礎選擇器
要想將CSS樣式應用于特定的HTML元素，首先需要找到該目標元素。在CSS中，執行這一任務的樣式規則部分被稱為選擇器（選擇符）。
標簽選擇器（元素選擇器）
標簽選擇器是指用HTML標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統一的CSS樣式。其基本語法格式如下：
標簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標簽選擇器最大的優點是能快速為頁面中同類型的標簽統一樣式，同時這也是他的缺點，不能設計差異化樣式。標簽選擇器 可以把某一類標簽全部選擇出來 div span
前面寫的代碼實例其實都是標簽選擇器 ，都是為頁面中某一標簽指定統一的CSS樣式。
類選擇器
類選擇器使用“.”（英文點號）進行標識，后面緊跟類名，其基本語法格式如下：
.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標簽調用的時候用 class=“類名” 即可。
類選擇器最大的優勢是可以為元素對象定義單獨或相同的樣式。 可以選擇一個或者多個標簽
代碼實例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Goole</title><style>span{font-size: 150pt;}.g {color: skyblue;}.o {color: red;}.oo {color: orange;}.l {color: green;}</style> </head> <body> <span class="g">G</span> <span class="o">o</span> <span class="oo">o</span> <span class="g">g</span> <span class="l">l</span> <span class="o">e</span></body> </html>結果顯示：
多類名選擇器
我們可以給標簽指定多個類名，從而達到更多的選擇目的。
例如：
代碼實例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.font20 {font-size: 20px;color: blue;}.red {color: red;}.fontw {font-weight: 700;}</style> </head> <body><div class="font20 red fontw">多類名選擇器</div><div>多類名選擇器</div><div>多類名選擇器</div><div>多類名選擇器</div><p class="red">多類名選擇器</p><p>多類名選擇器</p><p>多類名選擇器</p><p class="fontw">多類名選擇器</p><div>多類名選擇器</div> </body> </html>顯示效果：
注意:
id選擇器
id選擇器使用“#”進行標識，后面緊跟id名，其基本語法格式如下：
#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
該語法中，id名即為HTML元素的id屬性值，大多數HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應于文檔中某一個具體的元素。
實例代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>#last {color: pink;/* id只能有一個*/}.set_color{color: red;}</style> </head> <body><div>id選擇器</div><div >id選擇器</div><div class="set_color">id選擇器</div><div id="last">id選擇器</div> <!-- id只能有一個--></body> </html>顯示效果：
id選擇器和類選擇器區別
區別：
W3C標準規定，在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class。
也就是說具有相同名稱的class可以出現多次，而id只能出現一次。就好比人的名字和身份證的區別。
id選擇器和類選擇器最大的不同在于使用次數上
通配符選擇器
通配符選擇器用“*”號表示，他是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
代碼案例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style> * { /** 代表所有標簽的意思 使用較少 */color: lightskyblue;}</style> </head> <body><div>通配符選擇器</div><p>通配符選擇器</p><span>通配符選擇器</span><table>通配符選擇器</table> </body> </html>結果顯示：
CSS字體樣式屬性
font-size:字號大小 ：font-size屬性用于設置字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。具體如下：
font-family:字體 ：
font-family屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文本的字體設置為微軟雅黑，可以使用如下CSS樣式代碼：
p{ font-family:"微軟雅黑";}
可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。
注意：
CSS Unicode字體：
在 CSS 中設置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支持 類似微軟雅黑的中文。
方案一： 你可以使用英文來替代。 比如 font-family:“Microsoft Yahei”。
方案二： 在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。
例如：
font-family: "\5FAE\8F6F\96C5\9ED1"，表示設置字體為“微軟雅黑”。
這里關于字體和Unicode編碼轉化的表格
| 宋體 | SimSun | \5B8B\4F53 |
| 新宋體 | NSimSun | \65B0\5B8B\4F53 |
| 黑體 | SimHei | \9ED1\4F53 |
| 微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷體_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隸書 | LiSu | \96B6\4E66 |
| 幼園 | YouYuan | \5E7C\5706 |
| 華文細黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 細明體 | MingLiU | \7EC6\660E\4F53 |
| 新細明體 | PMingLiU | \65B0\7EC6\660E\4F53 |
font-weight:字體粗細
字體加粗除了用 b 和 strong 標簽之外，可以使用CSS 來實現。
font-weight屬性用于定義字體的粗細，其可用屬>性值：normal、bold、bolder、lighter、>100~900（100的整數倍）(其中400等價于normal，而700等價于bold)。
font-style:字體風格
字體傾斜除了用 i 和 em 標簽之外，可以使用CSS 來實現.
font-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：
-
normal：默認值，瀏覽器會顯示標準的字體樣式。
-
italic：瀏覽器會顯示斜體的字體樣式。
-
oblique：瀏覽器會顯示傾斜的字體樣式。
font:綜合設置字體樣式
font屬性用于對字體樣式進行綜合設置，其基本語法格式如下：
選擇器{font: font-style font-weight font-size/line-height font-family;}
使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。
注意：其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。
CSS外觀屬性
color:文本顏色
color屬性用于定義文本的顏色，其取值方式有如下3種：
預定義的顏色值，如red，green，blue等。
十六進制，如#FF0000，#FF6600，#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。
RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代碼的百分比顏色值，取值為0時也不能省略百分號，必須寫為0%。
line-height:行間距
ine-height屬性用于設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實際工作中使用最多的是像素px.
text-align:水平對齊方式
text-align屬性用于設置文本內容的水平對齊，相當于html中的align對齊屬性。其可用屬性值如下：
-
left：左對齊（默認值）
-
right：右對齊
-
center：居中對齊
text-indent:首行縮進
text-indent屬性用于設置首行文本的縮進，其屬性值可為不同單位的數值、em字符寬度的倍數、或相對于瀏覽器窗口寬度的百分比%，允許使用負值, 建議使用em作為設置單位。
1em 就是一個字的寬度 如果是漢字的段落， 1em 就是一個漢字的寬度
text-decoration 文本的裝飾
text-decoration 通常我們用于給鏈接修改裝飾效果
| none | 默認。定義標準的文本。 |
| underline | 定義文本下的一條線。下劃線 也是我們鏈接自帶的 |
| overline | 定義文本上的一條線。 |
| line-through | 定義穿過文本下的一條線。 |
CSS復合選擇器
復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標簽。
交集選擇器
交集選擇器由兩個選擇器構成，其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special。(就是兩者都要滿足的意識)
并集選擇器:
并集選擇器（CSS選擇器分組）是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>復合選擇器</title><style>div.red{color: red; /*交集選擇器*/}p,span{color:pink; /*并集選擇器*/}</style></head> <body><div class="red">復合選擇器</div><div>復合選擇器</div><div>復合選擇器</div><p>復合選擇器</p><p>復合選擇器</p><p>復合選擇器</p><span>復合選擇器</span><span>復合選擇器</span></body> </html>實例結果:
后代選擇器
后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代，其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔。當標簽發生嵌套時，內層標簽就成為外層標簽的后代。
代碼實例：
這里有個需求，只要把div下的p標簽下的天天向上變為紅色
效果實現：
子元素選擇器
子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接，注意，符號左右兩側各保留一個空格。(就指親兒子)
比如： .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。
一個小案例：
需求
顯示效果：
偽類選擇器
鏈接偽類選擇器
- :link /* 未訪問的鏈接 */
- :visited /* 已訪問的鏈接 */
- :hover /* 鼠標移動到鏈接上 */
- :active /* 選定的鏈接 */
代碼實例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>a:link { /* 未訪問過的連接狀態*/color: #3c3c3c;font-size: 25px;text-decoration: none; /*取消下劃線*/font-weight: 700;}a:visited { /*這個鏈接我們已經點過的樣子 已訪問過鏈接*/color: orange;}a:hover { /*鼠標經過連接時候的樣子*/color: #f10215;}a:active { /*鼠標按下時候的樣子*/color: green;}</style> </head> <body><a href="http://www.百度.com">秒殺</a> </body> </html>顯示效果：
點擊前是顏色是：#3c3c3c（差不多黑色）經過是紅色，點擊是綠色，點擊后是橘色，
而且一般按這4個狀態的順序寫
但是，在項目中，我們一般這樣寫：
感謝，你能看到這里，文章中難免會有錯誤，請指出或提出建議
下文鏈接：跟新中 ? \cdots ?
總結
以上是生活随笔為你收集整理的从零基础到web前端工程师（三）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 三极管集电极和基集短接等效成二极管
- 下一篇： html中用form单选框右侧提示汗字,