從零基礎到web前端工程師（三）

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文件夾中）

h3{
    color: #0000FF;
}
div{
    color:pink
}
p{
    color: gold;
    size: 25pt;
}

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>

顯示效果：

注意:

樣式顯示效果跟HTML元素中的類名先後順序無關,受CSS樣式書寫的上下順序有關。(也就是是說在上面的代碼中如果換了.font20和.red的順序字體就會變藍色)
各個類名中間用空格隔開。

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:"微軟雅黑";}
可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。

注意：

現在網頁中普遍使用14px+。
儘量使用偶數的數字字號。ie6等老式瀏覽器支持奇數會有bug。
各種字體之間必須使用英文狀態下的逗號隔開。
中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位於中文字體名之前。
如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: “Times New Roman”;。
儘量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

CSS Unicode字體：
在 CSS 中設置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支持類似微軟雅黑的中文。

方案一：你可以使用英文來替代。比如 font-family:“Microsoft Yahei”。

方案二：在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。
例如：
font-family: "\5FAE\8F6F\96C5\9ED1"，表示設置字體爲“微軟雅黑”。

這裏關於字體和Unicode編碼轉化的表格

字體名稱	英文名稱	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標籤下的天天向上變爲紅色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>後代選擇器</title>
    <style>
        div p{
            color: red;
        }
    </style>
</head>
<body>
    <div>好好學習</div>
    <div>好好學習</div>
    <div>好好學習</div>
    <div> <p>
        天天向上
    </p></div>
<p>天天向上</p>
<p>天天向上</p>
<p>天天向上</p>

</body>
</html>

效果實現：

子元素選擇器

子元素選擇器只能選擇作爲某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 > 進行連接，注意，符號左右兩側各保留一個空格。(就指親兒子)

比如： .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含着h3。

一個小案例：

需求

鏈接登錄的顏色爲紅色,同時主導航欄裏面的所有的鏈接改爲藍色

主導航欄和側導航欄裏面文字都是14像素並且是微軟雅黑。

主導航欄裏面的一級菜單鏈接文字顏色爲綠色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小案例</title>
<!--    需求-->
<!--    1. 鏈接 登錄 的顏色爲紅色,同時主導航欄裏面的所有的鏈接改爲藍色   -->
<!--    2. 主導航欄和側導航欄裏面文字都是14像素並且是微軟雅黑。-->
<!--    3. 主導航欄裏面的一級菜單鏈接文字顏色爲綠色。-->
    <style>
        .site-r > a{
            color: red;
        }
        .nav{
            color: blue;
        }
        .nav,.sitenav{
            font-family: "微軟雅黑";
            font-size: 14px;

        }
        .nav > ul > li >a{
            color: green;
        }


    </style>
</head>
<body>
<div class="nav">    <!-- 主導航欄 -->
    <ul>
        <li><a href="#">公司首頁</a></li>
        <li><a href="#">公司簡介</a></li>
        <li><a href="#">公司產品</a></li>
        <li>
            <a href="#">聯繫我們</a>
            <ul>
                <li><a href="#">公司郵箱</a></li>
                <li><a href="#">公司電話</a></li>
            </ul>
        </li>
    </ul>
</div>
<div class="sitenav">    <!-- 側導航欄 -->
    <div class="site-l">左側側導航欄</div>
    <div class="site-r"><a href="#">登錄</a></div>
</div>
</body>
</html>

顯示效果：

僞類選擇器

鏈接僞類選擇器

: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個狀態的順序寫

但是，在項目中，我們一般這樣寫：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	 a {
	 	color: #333;
	 	text-decoration: none;
	 	font-size: 25px;
	 	font-weight: 700;
	 }
	 a:hover {  /*鼠標經過*/
		color: #f10215;;
	 }
	</style>
</head>
<body>
	<a href="http://www.baidu.com">秒殺</a>
</body>
</html>

感謝，你能看到這裏，文章中難免會有錯誤，請指出或提出建議
下文鏈接：跟新中 $\cdots$

從零基礎到web前端工程師（三）

CSS選擇器

文章目錄

初始CSS

引入CSS樣式表

內部樣式表

行內式（內聯樣式）

外部樣式表（外鏈式）

三種樣式表總結（位置）

CSS樣式規則

CSS基礎選擇器

標籤選擇器（元素選擇器）

類選擇器

多類名選擇器

id選擇器

通配符選擇器

CSS字體樣式屬性

CSS外觀屬性

CSS複合選擇器

交集選擇器

並集選擇器:

後代選擇器

子元素選擇器

僞類選擇器

這個網絡爬蟲代碼，拿到數據之後如何存到csv文件中去？

即刻放大鏡。跟隨鼠標，屏幕任意位置放大

【面試準備】【SQL】數據庫有哪些約束？

.NET開源強大、易於使用的緩存框架 - FusionCache

面試，有時候是個運氣活

Intellj IDLE 構造異常（try/catch）的快捷鍵

Maltab中有關的函數知識，你都知道嗎？

Java StringBuffer類和 StringBuild類

深入理解HashMap的實現原理

用python特殊方法實現的重載操作

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結