CSS基礎

一　　CSS顯示模式

　　1，標簽級別

　　CSS將HTML標簽做了分類：文本級，容器級，

　　文本級標簽只能嵌套文字，圖片等資訊，常用的文本級標簽包含：span，p，em，img等，

　　容器級標簽可以嵌套其他所有標簽，常用的包含：div，ul，ol，table等所有結構化語意標簽都是容器級，比如header，footer，nav，section等，

　　2，元素分類

　　CSS將所有HTML元素分為三大類：塊級元素，行類元素，行內塊級元素，

　　塊級元素：獨占一行；如果沒有設定寬度，將繼承父元素的寬度；如果設定了寬高，將按照設定值顯示，

　　行內元素：在一行內共存，不能設定寬高（margin和padding依然可以使用），默認按內容大小顯示，

　　行內塊級：不會獨占一行，但可以設定寬高，

　　CSS對元素的這種分類，我們稱之為顯示模式，

　　3，顯示模式轉換

　　CSS使用display屬性設定元素的顯示模式，display屬性可以是以下這些值：inline（行內），block（塊級），inline-block（行內塊級），flex（彈性盒子），inline-flex（行內彈性盒子），

二　　CSS選擇器

　　1，常用選擇器

　　a)，通配符

　　　　CSS使用(*)星號表示通配符選擇器，選中所所有標簽，

1 *{font-size:14px;}

　　b)，特別重要

　　　　CSS可以在屬性值后添加 !important 強調該屬性，該屬性一定會被應用到HTML元素上，不管是否還設定了其他樣式，

1 p{color:red !important;}

　　c)，標簽選擇器

　　　　直接使用HTML標簽名作為選擇器，

1 p{}/*選中所有p元素*/

　　d)，類選擇器

　　　　CSS使用(.)點表示類選擇器，

1 .wrap{}/*選中所有class為wrap的元素*/

　　e)，id選擇器

　　　　CSS使用(#)井號表示id選擇器，

1 #firstname{}/*選中id為firstname的元素*/

　　f)，后代選擇器

　　　　CSS使用( )空格表示后代選擇器，左邊表示父元素，右邊表示后代元素，

1 div p{}/*選中div中的所有后代p*/

　　g)，子選擇器

　　　　CSS使用(>)大于表示自選擇器，左邊表示父元素，右邊表示兒子元素，

1 div>p{}/*選中div中的所有兒子p*/

　　h)，兄弟選擇器

　　　　CSS使用(+)加號表示兄弟選擇器，

1 div+p{}/*選中緊接在div之后的兄弟p元素*/

　　i)，屬性選擇器

　　　　CSS使用([])表示屬性選擇器，

1 input[name]/*選中所有帶有name屬性的元素，*/
2 input[name='ren']/*選中所有name屬性值為ren的元素，*/

　　j)，并列選擇器

　　　　上面的選擇器直接連在一起，不使用任何符號隔開，即是CSS中的并列選擇器，

1 div.wrap{}/*選中calss為wrap的p元素，*/

　　h)，組選擇器

　　　　上面的選擇器使用逗號隔開，即是CSS中的組選擇器，

1 p,.wrap,div,#firstname{}/*同時選中p、class為wrap、div、id為firstname的元素，*/

　　i)，偽類選擇器

　　　　偽類選擇器的形式是：普通選擇器+冒號+關鍵字，偽類用于修飾普通選擇器，常用來設定普通選擇器選中元素的特殊狀態，

1 div:hover{}/*d用于設定div被滑鼠滑過時的樣式，*/
2 p:first-child{}/*選中在兄弟元素中作為第一個元素的p元素，*/

　　　　CSS還有很多其他的偽類選擇器，詳情請參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes，

　　j)，偽元素選擇器

　　　　偽元素選擇器的形式和偽類相似，不同點在于，它使用雙冒號連接關鍵字，偽元素用來對普通選擇器選中的元素的特殊部分單獨設定樣式，它會把該元素的一部分當做一個完整的元素看待，從而為其設定單獨的樣式，

1 p::first-line{}/*選中所有p元素的第一行文本，*/
2 p::before{}/*創建一個元素作為p的第一個子元素，該元素默認是行內元素，可以使用content屬性添加內容，*/

　　　　更多偽元素請參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements，

　　雖然W3C規范要求使用雙冒號來表示偽元素，但大多數瀏覽器依然支持使用單冒號表示偽元素，為了不產生混淆，推薦大家使用雙冒號，加以區分，

　　2，CSS選擇器權重

　　　　！important：infinity，

　　　　行內樣式：1000，

　　　　id選擇器：100，

　　　　class||屬性||偽類：10，

　　　　標簽：1，

　　　　通配符：0，

　　請注意：權重值不是十進制數，很可能是256進制的，這意味著即使你使用11個calss屬性選中一個元素，它的優先級還是不及一個id選擇器，

　　通常，我們并不需要通過權重計算來判斷css選擇器的優先級，按照以下方式就可以簡單快速的判斷：　　

　　！important > 行內樣式 > id > （class || 屬性選擇器）> 標簽 >通配符，

　　只有在使用并列選擇器時，才需要計算權重值來判定優先級，如果權重值一樣，那么就按照誰寫在后面誰優先級高的原則，

三　　CSS屬性

　　1，文本類屬性

　　　　文本樣式類：

　　　　文本布局類：

　　2，盒子類屬性

　　display：設定盒子是否顯示，

1 div{
2     display:none;/*完全隱藏，不占用空間*/
3     /*display:block;塊級元素*/
4     /*display:inline;行內元素*/
5     /*display:inline-block;行內塊級*/
6 }

　　content：width和height，分別定義盒子內容區域的寬高，

1 p{
2     width:200px;
3     height:200px;
4 }

　　padding：環繞在content區域之外的就是內邊距（或者叫填充），

1 p{
2     padding-top:10px;
3     padding-right:20px;
4     padding-bottom:30px;
5     padding-left:40px;
6     /*padding:10px 20px 30px 40px;簡寫方式，順時針方向*/
7     /*padding:20px; 如果四周padding值相同，可這樣簡寫*/
8 }

　　border：環繞在padding和content區域之外的即是邊框，

 1 p{
 2     border-width:5px;/*邊框寬度*/
 3     border-style:solid;/*邊框型別，solid實線，dotted圓點虛線，dashed虛線*/
 4     border-color:black;/*邊框顏色*/
 5     /*border:5px solid black;簡寫方式*/
 6     /*單獨設定某個方向邊框的方式與padding類似*/
 7     /*border-top-color:red;也可以通過該方式單獨設定某一邊的單個屬性*/
 8     border-radius:5px;/*四角的圓角*/
 9     /*圓角也是一個復合屬性，你可以單獨設定某一個，例如左上角的圓角：border-top-left-radius*/
10 }

　　margin：元素最外層的包裹層就是margin區域，使用時請注意margin的折疊問題（塌陷），前一篇《CSS概述》中有詳細介紹，

1 p{
2     margin:10px 20px 30px 40px;
3     /*margin設定方式同padding*/
4 }    

　　CSS的兩種盒子模型：標準盒模型，怪異盒模型，你可以使用box-sizing設定CSS以哪種模式決議元素，

1 div{
2     box-sizing:content-box;/*默認值,標準模型*/
3     /*box-sizing:border-box;怪異模型*/
4 }

　　他們唯一的區別是：標準盒模型決議width，height屬性為內容區域的寬高，怪異模型則決議為content+padding+border區域，

　　3，內容溢位

　　我們已經知道，CSS將所有元素決議為一個個盒子，并可以通過設定width和height屬性規定盒子內容區的大小，那么，當內容過多，盒子大小不足以容納這么多內容時，CSS是怎么處理的呢？實際上，CSS為了避免資料丟失（用戶無法查看所有內容），會在超出設定的范圍之外顯示剩余內容，進而可能影響到其他元素的顯示，這種現象我們稱之為內容溢位，

　　一般有兩種情況會導致內容溢位，一種是子元素的尺寸大于父元素的尺寸，另一種是文本超出行內塊級元素的尺寸，你可以通過設定父元素的overflow屬性來控制CSS如何處理溢位的情況，

1 div{
2     overflow:hidden;/*隱藏超出部分*/
3     /*overflow:scroll;顯示滾動條*/
4     /*overflow:scroll-x/scroll-y;僅上下或左右方向有滾動條*/
5     /*overflow:auto;一般交給瀏覽器決定*/
6 }

四　　背景

　　1,顏色

　　背景是修飾HTML常用的方式，CSS中使用background屬性設定背景屬性，

1 p{
2     backrgound-color:orange;/*背景顏色*/
3 }

　　2，圖片

　　除了可以設定背景顏色外，CSS還可以設定背景圖片，

1 p{
2     backrgound-img:url('url');/*背景圖片*/
3     background-repeat:no-repeat;/*不平鋪(重復)*/
4     /*該屬性還有幾個可選值：repeat：水平垂直都平鋪（默認值）；repeat-x：只在x軸平鋪；repeat-y：只在y軸平鋪*/
5 }

　　請注意，如果背景影像和顏色都被設定了，一般情況下影像會覆寫顏色，

　　你還可以通過設定background-size來調整背景圖片的尺寸，以適應網頁的需要，

1 p{
2     background-size:100px 200px;/*指定具體尺寸*/
3     /*如果你不知道具體尺寸，那么你可以使用關鍵字，讓瀏覽器幫你設定大小，
4　　　cover：保證圖片的寬高比，放大圖片以填滿整個區域，可能導致圖片部分內容溢位，
5　　　contain：保證圖片不溢位，盡量填滿整個區域，可能導致部磁區域無法被影像覆寫，*/
6 }

　　3，定位

　　在影像不需要填滿整個區域的時候，你可以使用background-position來定位圖片，讓其顯示在你想要的位置，需要配合background-repeat:no-repeat使用，

　　在學習如何定位之前，我們應該先了解一下CSS中的坐標系：

 　　坐標原點即盒子的左頂點，水平向右為x軸正方向，垂直向下為y軸正方向，

1 p{
2     background-img:url('url');
3     backrgound-repeat:no-repeat;
4     background-position:50px 50px;/*設定水平和垂直偏移量*/
5 }

　　偏移量可以是正值，也可以是負值，單位可以使px，百分比，em，或者單位名詞，

　　4，關聯

　　通常，如果我們設定了背景圖片，且網頁內容較多，出現滾動條時，當我們滑動滾動條，背景圖片也會隨著網頁一起滾動，如果你想讓背景圖片固定不動，即使滑動滾動條，也只是內容上下或左右移動，那么你可以通過設定背景與滾動條的關聯方式來達到目的，

1 div{
2     background-img:url('url');
3     background-attachment:fixed;
4     /*另一個取值scroll是該屬性的默認值，即圖片隨滾動條一起滾動*/
5 }

　　5，簡寫

　　如果你想一次設定多個背景相關的屬性，其實你大可不必像上面那樣，上面介紹的背景相關屬性可以簡寫為：

1 /*background:顏色 圖片 平鋪方式 關聯方式 定位*/
2 div{
3     background:red url('url') no-repeat fixed 50px 50px;
4 }

　　6，漸變

　　你一定在網頁上見過漸變色，它是那么的炫酷，現在，你也可以通過css定義自己的漸變色了，

　　使用linear-gradient()函式創建線性漸變，

　　函式需要3個或多個引數，第一個表示漸變方向（可以是關鍵字或角度deg），第二個表示開始顏色，第三個表示結束顏色，如果在后面添加了更多的顏色，那么這些顏色都會在漸變程序中出現，

1 p{
2     background:linear-gradient(to right,red,blue);
3     /*創建一個從左到右的，從紅色到藍色的漸變*/
4 }
5 p{
6     background:linear-gradient(to bottom right,red,blue);
7     /*創建一個從左上角到右下角的，從紅色到藍色的漸變*/
8 }

　　使用radial-gradient()函式創建徑向漸變，

　　函式需要3個或多個引數，第一個引數定義漸變的圓點，默認值為center，即元素的中心點，你也可以通過具體尺寸或關鍵字（top，right，bottom，left，center或他們的組合）指定其位置；第二個引數定義徑向漸變的形狀（circle(圓)，ellipse(橢圓，默認值)）和大小，然后是起止顏色，同線性漸變，你也可以給每個顏色后面添加一個百分比（用空格隔開），表示該顏色在整個漸變區域中的占比，

1 p{
2     background:radial-gradient(top center,circle,orange 70%,purple 30%);
3     /*定義一個以盒子上邊緣中間點為圓點，橘色占70%，紫色占30%的圓形徑向漸變，*/
4 }

　　由于漸變在CSS3才被引入，所有現在各大瀏覽器對它的支持各不相同，并且語法也與標準語法有一定出入，在使用時請一定作重考慮他們的兼容性問題，更多漸變知識請參考https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients，

標籤：Html/Css

上一篇：CSS 選擇器大全

下一篇：html常用標簽、包含關系、常用術語,以及網頁設計中的字體分類