CSS學習筆記

一、CSS介紹

CSS 指層疊樣式表 (Cascading Style Sheets)，定義如何顯示HTML元素。  
CSS規則由兩個主要的部分構成：選擇器，以及一條或多條聲明:  
p{color:red; text-align:left;}  
其中p爲選擇器，選擇器一般是須要改變樣式的HTML元素。  
{}內的爲聲明，每條聲明由一個屬性和一個值組成，屬性和值用冒號分開，聲明之間用分號隔開。

二、CSS選擇器

選擇器的類型較多，根據本身的理解，梳理集中經常使用的。

選擇器名稱	選擇器	示例	示例說明	備註
id選擇器	#id	#firstname	選擇全部id="firstname"的元素	經常使用
id選擇器	#id	#firstname	選擇全部id="firstname"的元素
屬性選擇器	[attribute]	[target]	選擇全部帶有target屬性的元素
	element[attribute]	a[target]	選擇全部帶有target屬性的<a>元素
類選擇器	.class	.center	選擇全部class="center"的元素	經常使用
	element.class	h1.center	選擇全部class="center"的<h1>元素
元素類型選擇器	element	p	選擇全部<p>元素	經常使用
	element,element	div,p	選擇全部<div>元素和<p>元素
	element element	div p	選擇<div>元素內的全部<p>元素
	element>element	div>p	選擇全部父級是 <div> 元素的 <p> 元素
通用選擇器	*	*	選擇全部元素
狀態選擇器	：state	a:link	選擇全部未訪問的<a>連接
		a:visited	選擇全部訪問過的連接
		a:hover	選擇鼠標在連接上面時
		a:active	選擇活動連接

https://www.w3cschool.cn/cssref/53s812dp.html

三、選擇器的優先級

1. 內聯樣式
2. ID 選擇器
3. 屬性選擇器
4. 類選擇器
5. 元素類型選擇器
6. 通用選擇器

四、CSS聲明

簡單舉幾個例子，工做中遇到了不熟悉的，能夠來這裏查：https://www.w3cschool.cn/cssref/sel-attribute.html

• 背景

body{  
    background-color:#cccccc;  
    background-image:url('./mm.jpg');  
    background-repeat:repeat-y;  
    background-position:right top;              
}  

• 文本

p{  
    color:red;  
    text-align:left;  
}

• 字體

h1{  
    font-size:20px;  
    font-family: Arial;  
}

• 填充

p{  
    padding-top:25px;  
    padding-bottom:25px;  
    padding-right:50px;  
    padding-left:50px;  
}

• 輪廓線

p {   
    outline-style:dotted;   
    outline-color:#00ff00;   
}

# 五、Bootstrap簡介

官方對Bootstrap定義是，Bootstrap是一套用於 HTML、CSS 和 JS 開發的開源工具集。能夠將Bootstrap理解爲是對CSS的補充，能夠提升頁面佈局、樣式設置的效率。  

學習Bootstrap就是了解與不一樣HTML元素相對應的類名，不一樣類名對應着不一樣的實現效果。