python--前端之CSS（css頁面引入方法、選擇器之基本選擇器、組合選擇器）
CSS產生背景：
為了讓網頁元素的樣式更加豐富，也為了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。
有了CSS，html中大部分表現樣式的標簽就廢棄不用了，html只負責文檔的結構和內容，表現形式完全交給CSS，html文檔變得更加簡潔。
CSS基本語法及頁面引用
CSS基本語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
selector {
property: value;
property: value;
... property: value
}
選擇器是將樣式和頁面元素關聯起來的名稱，屬性是希望設置的樣式屬性每個屬性有一個或多個值。例如：
h1 {color:red; font-size:14px;}
CSS頁面引入方法：
1.行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
<p style="background-color: rebeccapurple">hello yuan</p>
2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3 鏈接式
通過link標簽，將一個.css文件引入到HTML文件中
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下：
<style type="text/css">
@import"mystyle.css"; 此處要註意.css文件的路徑
</style>
鏈接式與導入式對比：
導入式會在整個網頁裝載完後再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的一個缺陷。
使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是鏈接式的優點。
CSS文本設置
常用的應用文本的css樣式：
color 設置文字的顏色，如： color:red;
font-size 設置文字的大小，如：font-size:12px;
font-family 設置文字的字體，如：font-family:‘微軟雅黑‘;
font-style 設置字體是否傾斜，如：font-style:‘normal‘; 設置不傾斜，font-style:‘italic‘;設置文字傾斜
font-weight 設置文字是否加粗，如：font-weight:bold; 設置加粗 font-weight:normal 設置不加粗
font 同時設置文字的幾個屬性，寫的順序有兼容問題，建議按照如下順序寫： font：是否加粗 字號/行高 字體；如： font:normal 12px/36px ‘微軟雅黑‘;
line-height 設置文字的行高，如：line-height:24px;
text-decoration 設置文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
text-indent 設置文字首行縮進，如：text-indent:24px; 設置文字首行縮進24px
text-align 設置文字水平對齊方式，如text-align:center 設置文字水平居中
CSS選擇器
基本選擇器
組合選擇器
E,F 多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔 :div,p { color:#f00; }
E F 後代元素選擇器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔 :li a { font-weight:bold;｝
E > F 子元素選擇器，匹配所有E元素的子元素F :div > p { color:#f00; }
E + F 毗鄰元素選擇器，匹配所有緊隨E元素之後的同級元素F :div + p { color:#f00; }
E ~ F 普通兄弟選擇器（以破折號分隔） :.div1 ~ p{font-size: 30px; }
註意，關於標簽嵌套：
一般，塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
需要註意的是，p標簽不能包含塊級標簽。
python--前端之CSS（css頁面引入方法、選擇器之基本選擇器、組合選擇器）