一、CSS
1、Cascade Style Sheet層疊樣式表
用來裝飾HTML/XML的标記集合
2、特點
1）樣式表由樣式規則組成，以告訴浏覽器如何顯示一個文檔。
2）每個規則的組成包括一個選擇符（通常是一個HTML的元素）和該選擇符所接受的樣式。
3）每個元素可以定義多個屬性，每個屬性帶有一個值，共同的描述選擇符如何呈現。
4）總結：CSS是用來裝修标簽的。
3、例子
1）例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1{ font-size: 16px; color: red; }
h2{ font-size: 10px; color: green; }
</style>
</head>
<body>
<h1>Hello</h1>
<h2>World</h2>
</body>
</html>
總結：
①font-size（字型大小）和color（字型顔色）是CSS中的兩個屬性，屬性與屬性之間用分号隔開，屬性與屬性值之間用冒号隔開。
②style标簽寫在head中，這是CSS内部樣式的用法。
2）例2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 style="font-size: 20px; color: blue;">Hello</h1>
<h2 style="font-size: 10px; background: yellow; font-family: courier;">World</h2>
</body>
</html>
總結：
①style可以寫在标簽内，這是行内樣式。
②background:用于設定标簽的背景顔色，font-family表示字型類型,如宋體、courier new等。
③font-style表示字型風格，如italic、oblique等。
3）例3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/03.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
</head>
<body>
<h1>Hello</h1>
<h2>World</h2>
</body>
</html>
03.css檔案：
h1{ font-size: 16px; color: red; }
h2{ font-size: 10px; color: green; }
總結：
這是外部樣式的用法。
①使用link來引入一個外部樣式表。
②rel="stylesheet"表示引入的是一個樣式表。
③type="text/css"表示是一個css檔案，href表示該檔案的位置。
二、CSS優先級問題
按照最靠近元素的定義來顯示
1）例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/03.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
</head>
<body>
<h1 style="font-size: 20px; color: blue;">Hello</h1>
<h2 style="font-size: 10px; background: yellow; font-family: courier;">World</h2>
<h1>Hello2</h1>
</body>
</html>
總結：
①Hello和World的樣式由行内樣式決定，Hello2由于沒有行内樣式，是以由link引入的外部樣式來決定。
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)