學習筆記，僅供參考，有錯必糾
CSS
CSS的定義
- 什麼是CSS？
CSS 指層疊樣式表 (Cascading Style Sheets)，CSS通常稱爲CSS樣式表或層疊樣式表（級聯樣式表），主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局等外觀顯示樣式。
CSS以HTML爲基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設置不同的樣式。
- HTML和CSS的關係
HTML爲結構層， 負責從 語義的角度搭建頁面結構；
CSS爲樣式層 ，負責從審美的角度美化頁面；
JavaScript爲行爲層，負責從交互的角度提升用戶體驗。
引入CSS的方式
所有的標籤都有一個默認樣式，我們稱爲瀏覽器樣式，或者默認樣式.
行內樣式
知識點回顧：所有的HTML標籤都有id, name, style等屬性.
行內樣式，是通過在標籤中設置style屬性來達到控制標籤樣式的效果。例如：
<h1 style="color: red;">我是紅色的h1標籤</h1>
<!--屬性名1:屬性值1;屬性名2:屬性值2;-->
在標籤的style屬性中，我們可以設置多條的CSS樣式：
<h1 style="color: red;font-size:12px;">我是12像素的紅色h1標籤</h1>
嵌入樣式
在head標籤中，可以嵌套一個style標籤，在style標籤中，可以書寫CSS的樣式內容，style標籤有一個屬性type屬性，默認值就是 text/css，也可以省略。例如：
<style type="text/css"> /*css註釋方式*/
p { /*對p標籤的樣式進行設置*/
color: green; /*設置前景色，也就字體的顏色*/
background-color: silver; /*設置背景色，也就字體的顏色*/
}
ul {
background-color: red;
}
</style>
外聯CSS樣式
我們可以通過link標籤引入外部的CSS樣式文件，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS學習</title>
<link rel="stylesheet" href="CssFile/main.css">
<!--rel：是指當前HTML文件與CSS文件的關係
href：是指外聯樣式表的路徑-->
<!--stylesheet表示當前頁面的樣式表-->
<!--href屬性指向的路徑爲我們的css樣式文件的地址,它是相對地址-->
</head>
<body>
<ul>
<li><a href="#">小黃</a></li>
<li><a href="#">大白</a></li>
<li><a href="#">小黑</a></li>
</ul>
</body>
</html>
CSS樣式文件main.css：
a {
color: yellow;
}
頁面：
導入樣式
@import導入樣式會導致css文件不能並行下載，所以，我們並不推薦這種導入方式。
注意，導入樣式的書寫必須在所有的css規則書寫之前。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS學習</title>
<style>
/*將某一個CSS文件的樣式直接導入到當前的位置*/
/*導入樣式必須寫在所有的其他樣式設置之前*/
@import url(CssFile/main.css);
p {
color: green; /*設置前景色，也就字體的顏色爲綠色*/
background-color: red;/*設置背景色爲紅色*/
}
</style>
</head>
<body>
<p>我是一個Bunny列表</p>
<ul>
<li><a href="#">小黃</a></li>
<li><a href="#">大白</a></li>
<li><a href="#">小黑</a></li>
</ul>
</body>
</html>
頁面：
現在，我們創建b.css樣式文件：
a {
background-color: blue;
}
並在main.css中導入b.css：
@import url(b.css);
a {
color: yellow;
}
現在，我們再看一下我們的頁面：
