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屬性有3個值：inline（行內），block（塊級），inline-block（行內塊級）。

 

二　　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，文本類屬性

　　　　文本樣式類：

經常使用屬性	含義	可選值
font-style	字體樣式	italic(斜體)，normal(正常的,默認值）
font-size	字體尺寸	全部css支持的
font-family	字體類型	各類字體名稱
font-weight	字體粗細	normal，100-900，bold(粗)，bolder(更粗)，lighter(細)
text-decoration	文本裝飾	none(無)，underline(下劃線)，overline(上劃線)，line-through(刪除線)
color	文本顏色	grb值，16進制值，單詞
text-shadow	文本陰影	須要四個值：1，水平偏移量；2，垂直偏移量；3，模糊半徑（0表示無陰影）；4，影音顏色
text-transform	文本轉換	none(不轉換)，uppercase(轉換爲大寫)，lowercase(轉換爲小寫)，capitalize(首字母轉換爲大寫)，full-width(轉換爲全角)

 

　　　　文本佈局類：

經常使用屬性	含義	可選值
text-align	文本對齊方式	left(左對齊)，right(右對齊)，center(居中)
line-height	行高	全部css支持的
letter-spacing	字間距	全部css支持的
word-spacing	單詞間距	全部css支持的
text-indent	首行縮進量	全部css支持的
text-overflow	溢出處理	clip(不顯示截斷內容,默認值），ellipsis(以省略號顯示被截斷內容，須要配合white-space：nowrap使用纔有效)
white-space	空白和換行處理	normal(合併,可換行)，nowrap(合併，不換行)，pre(保留)

 

　　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 attachment relative;
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。