day 43 CSS前端
一 . CSS定義
如何顯示HTML元素，給HTML設定樣式，讓它更加美觀，當瀏覽器讀到一個樣式表，它就會按照這個樣式來對文件進行格式化(渲染)。每個CSS樣式由兩個組成部分：選擇器和宣告，宣告就是屬性和屬性值，每個宣告用分號結束。
二 . CSS引入方法
1.CSS引入的方法很簡單，就是在<title>標籤下引入<style>標籤，然後在<body>標籤下使用上面型別標籤的屬性，開啟pycharm右上角本機有的網頁即可執行。
2.CSS有多種選擇器，根據不同的需求來選擇相對應的選擇器
3.元素選擇器：p{color:"red";} ，找到頁面下所有p標籤
ID選擇器：#i1{backgroud-color:red;} ，#號表示id屬性，後面的i1表示id屬性的值，找到所有i1標籤
類選擇器：.c1{font-size:14px;} . 表示class屬性，c1表示class的值 ，找到所有類值是c1的標籤
p.c1{color:red;} 找到所有p標籤裡面含有class屬性的值為c1的p標籤，注意他倆之間沒有空格
通用選擇器：* {color:white;} ，* 表示選中所有標籤
注意：樣式類名不要用數字開頭（有的瀏覽器不認），現在也有很多瀏覽器做了優化的，最好不要使用噢！標籤中的class屬性如果有多個，要用空格分隔。
4.組合選擇器之後代選擇器（子子孫孫）：li a{color:green;} * li 內部的a標籤設定字型顏色
組合選擇器之兒子選擇器（只找兒子）：div>p{font-family:"Arial Black";} * 選擇所有父級是<div>元素的<p>元素
組合選擇器之鄰居選擇器：div+p{margin:5px；} ，選擇所有標籤<div>元素的<p>元素
組合選擇器之弟弟選擇器：#li~p{border:2px solid rdyalblue;} , 選擇*li後面所有的兄弟p標籤
5.屬性選擇器（通過屬性或者屬性的值來查詢，這個屬性是我們自己定義的，不是id啊class啊這種html自帶的屬性）
div[title="hello"] {color:blue}
6.分組和巢狀
分組（多個選擇器逗號分隔）
當多個元素的樣式相同的時候，我們沒有必要重複地為每個元素都設定樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設定元素樣式。
div,p{color:red;} div標籤和p標籤統一設定字型為紅色
巢狀（多種選擇器可以混起來使用）
. c1 p{color:red;} c1類內部所有p標籤設定字型顏色為紅色
7.偽類選擇器（比較特殊，CSS3版本新加的特性）
/* 未訪問的連結 */
a:link {
color: #FF0000
}
/* 已訪問的連結 */
a:visited {
color: #00FF00
}
/* 滑鼠移動到連結上 */ 這個用的比較多
a:hover {
color: #FF00FF
}
/* 選定的連結 */ 就是滑鼠點下去還沒有擡起來的那個瞬間，可以讓它變顏色
a:active {
color: #0000FF
}
/*input輸入框獲取焦點時樣式*/
input:focus { #input預設的有個樣式，滑鼠點進去的時候，input框會變淺藍色的那麼個感覺
#outline: none;
background-color: #eee; #框裡面的背景色
}
8.偽元素選擇器（通過CSS來造標籤，不推薦使用）
first-letter ：常用給首字母設定特殊樣式
# 將p標籤中的文字的第一個字百年顏色變大小
p:first-letter{font-size:48px; color:red;}
三 . 選擇器的優先順序
1.CSS繼承
上面的選擇器總結來說，當選擇器相同的時候，按照順序來看CSS樣式，誰最後就按誰渲染。
繼承是CSS的一個主要特徵，它是依賴於祖先到後代的關係，繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於某個特定的元素，還可以應用於它的後代，例如一個body定義了字型顏色值也會應用到段落的文字中。
body{color:red;}
！！！內聯的意識是把CSS樣式寫在標籤裡面
其他的權重：即使是11個class相加起來大於id的100權重，也還是id生效，也就是說，不會僅為，class組合起來也無法超過id的權重。
除此之外可以在選擇器顏色後面新增important方式來強制讓樣式生效，不講道理的操作，也是最吊的，但不推薦使用，不到萬不得不可以使用。
2.CSS屬性相關
CSSwidth屬性可以為元素設定寬度，height屬性可以為元素設定高度，塊級標籤才能設定寬度，內聯標籤的寬度由內容來決定，是設定不了的。
也可以設定文字字型：font-family
字型大小：font-size:14px
字重（粗細）：font-weight
文字顏色：
文字對齊：text-align規定元素中的文字的水平對齊方式，left左邊對齊，right右對齊，center居中對齊，justify兩端對齊
文字裝飾：text-decoration
首行縮排p{text-indent:none:32px;} 一個縮排預設大小為16px
四 . 邊框
邊框屬性1.border-width 寬度 2.border-style 樣式 3.border-color 顏色
#i1{border:2px solid red;}
設定邊框
#i1 {
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
具體詳見：https://www.cnblogs.com/clschao/articles/10082587.html?tdsourcetag=s_pctim_aiomsgCSS