這周學習開始接觸CSS樣式表了，能製做的網頁也開始了各類高大上，各類屬性與屬性值也紛至沓來，編程的世界確實很精彩。css
首先，我們先來看看樣式表的類型。主要分爲3種：web
【1.行內樣式表】
（1）將CSS樣式，與HTML代碼徹底糅雜在一塊兒，不符合W3C關於「內容與表現分離」的基礎規範，不利於後期維護。
（2）優先級最高，可是不推薦使用。編程
【2.內部樣式表】
（1）必定程度的將CSS樣式與HTML代碼進行了分離，可是分離不夠完全，沒法實現樣式複用。
（2）優先級低於行內樣式表。瀏覽器
<style type="text/css">
...
</style>
【3.外部樣式表】
（1）實現了CSS樣式與代碼的完全分離，方便樣式複用與後期維護，符合W3C規範;
（2） 優先級要求低於內部樣式表。
（3）後續開發，土建使用此種方式。
rel ：聲明被連接文檔與當前文檔的光系關係，必選。
type：被連接文檔的類型，可選。
href：被連接文檔的地址，必選。學習
<link rel="stylesheet" type="text/css" href="css/CSS02.css"
或者：字體
<style type="text/css">
@import url("css/test.css");
</style>
【兩種導入方式的區別】
（1）link標籤是標準的HTML標籤，而import不是；
（2）link能夠連接各類形式的文件，而import只能導入CSS；
（3）link使用的是連接的方式，至關於在HTML與CSS文件中的橋樑，
import使用的是導入的方式，會在文檔加載時，將CSS文件的代碼導入到HTML文檔中；
（4）link在網頁邊加載的時候，變連接CSS文件，而import會在HTML文檔徹底加載完後，在導入CSS文件；url
看完了CSS樣式表的類型和導入方式，我們來看看如何使用各個選擇器，和選擇器的樣式：spa
/*【選擇器的命名規則】
*1.只能有字母，數字，下劃線組成，不能由其餘字符組成。
* 2.開頭不能是數字
* */code
/*【標籤選擇器】
* 1.寫法：HTML標籤名{樣式屬性：樣式屬性值；……}
* 2.做用：選中頁面中全部的對應標籤。
*/orm
/*【通用選擇器】
* 1.寫法：*{}
* 2.做用：選擇頁面中的全部標籤。
* 3.優先級：最低。
*/
*{
font-size: 20px;
background-color: #cccccc;
}
/*【後代選擇器】
* 1.寫法：選擇器1 選擇器2 選擇器3……{}
* 例如：div .li{}需知足div裏面的class="li"的元素能夠是div的子代，也能夠是div的後代（孫代日後）
* 【子代選擇器】
* 1.寫法：選擇器1>選擇器2>選擇器3……{}
* 例如：div>ul{}則，ul必須是div的直接子代，孫帶之後選不中。
*/
div .li{
font-size: 50px;
}
div>ul>#li{
font-size: 60px;
}
/*【類選擇器class選擇器】
* 1.寫法：.選擇器名稱{}
* 調用：在須要改變樣式的標籤上，使用class="選擇器名稱"調用對應選擇器
* 2.做用：修改全部調用選擇器的標籤。
* 3.優先級：高於標籤選擇器。
*/
/*【ID選擇器】
*1.寫法：#選擇器名稱{}
* 調用：在須要改變樣式的標籤上，使用id="選擇器名稱*調用對應選擇器
*注意事項：ID是惟一的，同一頁面，只能有一個ID。
*/
/*【交集選擇器】
* 1.寫法：選擇器1選擇器2……{}
* 例如：.li#li{}元素必須同時具有class="li"而且id="li"才能生效
*/
/*【並級選擇器】
* 1.寫法：選擇器1，選擇器2……{}
* 例如：.li,#li{}元素只要具有class="li"或者id="li"，便可生效
*/
/*【選擇器的優先級】
* 1.第一原則：「近者優先」，最內層選擇器永遠大於外層
* 例如：div ul li >div #ul ,li在ul內層，因此li標籤選擇器，能覆蓋外層ID選擇器
* 2.看成用在同一層時，ID選擇器>class選擇器>標籤選擇器
* 例如：div #li > div .li > div li 只要最後一個選擇器都做用於li上，哪不管以前
* 有多少層選擇器嵌套，均沒有遠近關係。
* 3.看成用於同一層且最後一層爲同等選擇器（均爲class或id或標籤）
* 例如：div ul .li > div .li做用範圍選的更精準，則優先級更高。
* 4.當優先級徹底相同時，寫在後面的選擇器會覆蓋前面的選擇器。
*/
選擇器說完了，我們來講說CSS樣式中的屬性及其運用：
【顏色單位】
1.直接寫顏色的英文名字：red,green,blue；
2.十六進制寫法：#FFFFFF白色，或者#FFF，分別對應紅綠藍的比例；（最經常使用）
3.RGB寫法：RGB(0~255,0~255,0~255)
RGBA（0~255,0~255,0~255，0~1）第四位數表示透明度，0全透明1不透明；
【經常使用的文本屬性】
一、字體、字號：
font-weight:字體的粗細，可選屬性值：bold加粗lighter細體 100~900數值（400正常，700=bold）
font-size:字體大小**px **%（瀏覽器默認字體大小的百分比，絕大部分默認16px）
font-family：字體族，設置字體
>>>多個字體樣式之間用逗號分隔，瀏覽器解析時，會從左往右依次解析，選擇可用字體。
>>>通常前面使用具體字體名稱，最後一個使用字體族類名稱。
（經常使用字體族名稱：襯線體serif 非襯線體sans-serif（經常使用）等寬字體Monospace）
>>>例如：font-family：Arial,'Micrsoft Yahei',sans-serif
font-style:正常 (normal)斜體（italic）
font-variant：small-caps;將字母轉爲小號大寫字母
(瞭解)font縮寫形式：font-style font-variant font-weight font-size line-height font-famiy
>>>使用注意事項：
1.順序必須嚴格按照上述順序；
2.多個樣式之間用空格分割，並且font-size/line-hight必須做爲一對用/分割
3.font-size和font-family必須指定，其餘樣式不指定將採用默認樣式顯示；
>>>例如：font：italic bold 75%/1.8 'Microsoft Yahei'，sans-serif;
斜體 加粗 字號/行號 字體族（微軟雅黑，非襯線字體族）
二、字體顏色：
color：字體顏色。
opacity ：透明度，0~1之間的數字。調整時控件以及子空間均會透明，而使用RGBA調整時，
只會使本控件透明，子控件不會發生透明度變化。
三、行距、對齊等：
line-height ：行高，
1.像素單位，如48px
2.不帶px正常行高的倍數
2.百分數，同2.
>>>典型應用，調整控件中文字垂直居中的方式：控件的height=控件的line-height
text-align ：塊級元素中文字的水平對齊方式left center right
letter-spacing :字符間距,字與字之間的間距。
text-decoration ：文本修飾 ，下劃線underline，刪除線line-through，上劃線overline。
overflow：控制超出範圍文本的顯示方式（auto根據文字多少自動顯示滾動條，scoll始終顯示滾動條，hidden 超出範圍文本隱藏）能夠經過overflow-x和overflow-y分別設置水平垂直方向。
text-overflow：設置多餘文字的顯示方式clip裁剪，ellipse省略號
【重點】讓每行多餘文字顯示省略號：
1.white-space: nowrap;
2.overflow：hidden；
3.text-overflow：ellipse；
text-shadow：文本陰影，四個屬性值：
1.水平陰影距離：必選，數值越大，陰影右移；
2.垂直陰影距離：必選，數值越大，陰影下移；
3.陰影模糊距離：可選，數值越大，陰影越模糊，默認爲0，不模糊；
4.陰影顏色：可選，默認黑色。
text-indent：首行縮進，可用像素值調整縮進距離。
text-stroke:-webkit-text-stroke: 0.5px red;描邊的粗細，描邊的顏色。
white-space: nowrap;中文行末不斷行顯示
word-break: 設置英文行末斷行：瀏覽器默認在空格出斷行，當一個單詞長度超出範圍時，break-all容許在單詞內斷行
【CSS經常使用背景屬性】
background 縮寫形式
background-color背景色
background-image背景圖 background-image: url(圖片地址相對路徑);背景圖和背景色同時存在時
背景圖會覆蓋背景色。
background-repeat背景圖重複方式 :no-repeat不平鋪，repeat平鋪（默認），repeat-x水平平鋪，
repeat-y垂直平鋪
background-size背景圖大小：兩個屬性：寬高，高度
>>>寬高的寫法：第一個屬性值爲寬度，第二個屬性值爲高度；
（1）直接寫像素（2）寫百分比（父容器寬高的百分比）
>>>當只用一個屬性值時，默認爲寬高等比縮放。
>>>當有兩個屬性值時，會按照指定的高度寬度進行壓縮/拉伸顯示。
【其餘屬性值】
>>>contain：圖片等比縮放，縮放到寬或高的某一邊等於父容器的 寬高，另外一邊按照圖片大小縮放（可能空餘部分區域沒法覆蓋）
>>>cover:圖片等比縮放，使背景圖像徹底覆蓋背景區域。（
可能致使背景圖部分區域沒法顯示）
background-position位置座標、偏移量
>>>指定位置：left/center/right top/center/bottom
當只寫一個屬性值得時候，另外一個默認居中。
>>>填寫座標：水平位置 垂直位置（像素或百分比形式）
（1）當只寫一個屬性值時，默認寫的爲水平方向，則垂直居中
(2) 當使用像素時：圖片的左上角往各個方向移動的實際距離
水平方向：正數右移，負數左移；垂直方向：正數下移，負數上移
（左負右正，上負下正）
（3）當使用百分數時，只能用正數。表明去掉圖片後剩餘距離的空白比比例。
例如：background-position：30%；水平方向去掉圖片後，剩餘區域3：7.
background-clip：裁剪背景圖和背景顏色顯示區域。不改變定位位置，只是經過裁剪顯示部分區域。
border-box：從邊框外緣開始顯示，
padding-box:從邊框內緣開始顯示，
content-box:從文字內容區開始。
不在顯示區域內的背景圖或背景色，會被裁剪不顯示。
background-origin：設置背景圖的定位方式。不改變背景圖顯示區域的大小，只決定左上角定位位置。
border-box：從邊框外緣開始，
padding-box:從邊框內緣開始，
content-box:從文字內容區開始。
【常見列表屬性】
none:無風格。
disc：實心圓（ul默認類型）
circle：空心圓。
square：實心正方形。
decimal：數字（ol默認類型）。
【margin（外邊距）】
* 1.寫一個值：上下左右四個方向均爲指定數值；
* 2.寫兩個數值：第一個數=上下margin，第二個數=左右margin
* 3.寫三個數值：上，右，下，左邊默認等於右邊。
* 4.寫四個數值：上，右，下，左 四個方向。
* 5.margin: 0 auto;塊級盒子在父容器中水平居中。
* 【border（邊框）】
* 1.三個屬性值：寬度，樣式，顏色，原則上不能少，順序可隨意安排。
* 2.能夠經過top，right，left分別修改4個方向。
* 【padding（內邊距）】
* 1.padding爲內邊距，會使盒模型的可視區域變大，使用時需注意盒模型實際顯示的區域大小。
* 2.其餘使用同margin。
* 【border-radius 圓角】
* 1.能夠接受8個屬性值：X軸（左上，右上，右下，左下）/Y軸
* 例如：border-radius：50px 0px 50px 50px /50px 0px 50px 50px
* 2.只寫X軸時，Y軸默認等於X軸。只寫左上角，默認=右下角。只寫右上角默認=左下角。
* 例如：border-radius：50px 0px;
* =border-radius:50px 0px 50px 0px;
【border-image】圖片邊框
* 1.十個屬性：
* （1）圖片路徑：url()
* （2）圖片切片寬度：4個值，分別表明上，右，下，左，四條切線。經過四條切線
* 切割後，會把圖片分紅九宮格，四個角分別對應邊框的四角（不會進行任何拉伸）
* ，四個邊分別對應邊框的四邊（根據設置進行拉伸/平鋪/鋪滿）。
* 寫的時候，不能帶px單位。
* （3）圖片邊框的寬度：4個值，分別表明上，右，下，左四條邊框，
* 寫的時候必須帶PX單位。
* （4）邊框背景重複方式：stretch（拉伸），round（鋪滿），repeat（平鋪）
* 【鋪滿和平鋪的區別】
* 平鋪：會保持原有四條邊的寬度，進行平鋪。可能致使角落處沒法顯示完整一個圖標；
* 鋪滿：會對四條邊進行適當的拉伸收縮，確保能夠正好徹底顯示。
* 2.屬性值的寫法：border-image：（1）（2）/（3）px （4）；
* （3）能夠省略，默認寬度等於（2）.
* （2）能夠只寫一個值/兩個值/三個值，判斷方式同margin
【盒子模型】
欲知後事如何，且聽下回分解~~~~
