【CSS簡介】

Css它對html來講做出了很多的貢獻其中有一個很重要的貢獻就是將所有標簽中跟樣式有關的屬性都集中起來管理使用了。

我們在原來使用html的時候發現記住標簽并不難，難的記住誰有什么屬性。

【體驗css】

《css要求》

首先css語言要求所有的css都需要寫在一對style標簽，這個標簽可以加上一個屬性type="text/css"，保證更好的兼容，但是這個不加現在也都能兼容了。

在css中文字控制三屬性分別變成了

font-size 表示字號；

Color 仍然表示文字顏色，但是注意只表示文字顏色了。

font-family 表示字體設置替換了原來的face。在css中如果要設置中文必須要加引號。

Text-align 表示文本對齊方式。等同于以前的align也是左中右；

【CSS的語法】

簡介：

我們要學習的css一共分成了兩大部分，一個是css屬性（核心），另外一個是css選擇器。（也就是說這兩部分學完了css就沒有別的東西了）

語法要求：

第一：css需要都寫在style標簽內，并且style標簽要位于head頭部標簽里。

第二：css一共分為兩部分其中css屬性重新定義了鍵值對的語法要求格式是

k:v;

注意：如果遇到中文類型的值例如字體名稱需要加引號。

《盒子特性》

在css眼中一切標簽都具備盒子特性， 盒子的類型包括兩種，一個是div類型（大盒子）另外一個是span類型（小盒子） 這兩個盒子的區別

Div相當于一個段落盒它會獨占一行；

Span相當于一個文字盒（就像一個字）它可以在一行內存在多個。

Div尺寸可以接受人為修改；相當于人工盒子；

Span的尺寸只跟內容有關相當于它是一個自然盒子；

這兩個盒子的特性在css眼里今后將被施加到所有標簽身上

化簡總結：

Div這種盒子 獨占一行，然后又能接受人為尺寸。 block

Span這種盒子 能在一行內共存，然后它是一種自然尺寸，只跟內容有關 inline

Zaicss的世界里面又制作出了另外一種性質的盒子同時具備兩者的優點； inline-block

《實體化三屬性》

我們為什么要學習實體化三屬性，就是因為將來可以將任何標簽都畫成盒子。 你今后注意一件事情只要你給標簽添加了實體化三屬性，那么這個標簽就該現形。

實體化指的就是把標簽畫成盒子。

實體化三屬性分別是：

Width寬度單位帶px；

Height高度；

Background背景色；

《盒子的顯示模式》

在css眼中所有的盒子只有顯示模式的不同。顯示模式需要用display屬性來修改；

大盒子默認的顯示模式是 display：block；小盒子顯示模式是inline；

優缺點：

大盒子的優點是可以接受人為尺寸，缺點是不能在一行內顯示；

小盒子的優點是可以在一行內顯示但是不接受人為尺寸。

所以css針對這兩個問題專門制造出了一種顯示模式可以同時具備兩者的優點；

Display：inline-block；

《知識點》

如果發現實體化沒有成功，那么只有一種可能就是現實模式沒有轉換。一般來講我們只有特殊需求才會轉化為inline-block其他時候都是另外兩者之間的轉換。

內邊距屬性：padding；

外邊距屬性：margin；

【邊框屬性】

《border》

Border屬性是用來設置盒子邊框的，它一共有3個值，css語法鍵值對的值與值之間用空格隔開。有的特殊屬性是擁有多個值的。

基本結構： ? border：粗細 類型 顏色；

其中類型有兩個值 solid表示固態是實線。Dashed 表示虛線。

瀏覽器是有一定的容錯能力的，即便你寫的不標準但是有的時候也可以解析，但是你盡量要寫的沒有錯才是最終目標。

《知識點》

Css中所有的邊框都由4部分組成，分別是 上右下左。 Top，right，bottom，left

邊框的本質：

Css中實際上一個盒子一共有3條邊框。內外邊距實際上是兩條透明的看不見的邊框。所以說但凡是邊框都分成4部分就是上右下左。也就是告訴我們 margin和padding也可以寫成4個單獨的部分 margin-top或者padding-top；

【css選擇器】

介紹：

在css中所有的標簽都可以起兩種名稱一個是類名通過class屬性，特點是可以重復。另外一個是id名屬性，特點是整個網頁只能有一個。

類選擇器和id選擇器以及標簽選擇器統稱css中的基礎選擇器；他們的關系和身份證上的信息很像。Class相當于姓名，id相當于身份證號。標簽類型相當于民族。之前學習的顯示模式display相當于性別。所有的標簽只有兩種性別。要么是block要么是inline；

《對應關系》

在css中類名稱通過 ?.類名來書寫；

Id名稱通過 ? #id名稱來書寫；

Font-weight:bold; 文字加粗屬性；bold表示最大值就是粗體。

【清空默認邊距】

有些標簽默認狀態會帶有一定的內外邊距，例如標題或段落標簽，這些邊距在我們實際寫網站的時候是不需要的，默認會清掉這些邊距，那么這個時候我們就有一個問題怎么才能選中所有的不同類型的標簽一起清掉他們。

方法就是使用 一種新的選擇器-通配符 ? ? * ?作用是選中所有類型的標簽。

注意：清空默認邊距的時候需要清空 三個屬性，padding，margin，border都為0即可。

（在真正做網站的時候一般會做一些準備工作其中第一項就是清掉所有默認邊距。）

【基礎選擇器權重】

解釋：當一個標簽同時擁有多個選擇器的時候它的樣式聽誰的。

《權重規律》

所有的4個基礎選擇器當中選擇器的針對性越單一權重就越高。

【css中的對齊方式】

***在css中有兩種類型的對齊方式；一種是內容對齊；一種是自身對齊；其中自身對齊有很大價值因為可控性更高。（我們之前學習過的東西基本上全是內容對齊，還沒有擁有自身對齊能力的屬性）

《居中對齊》

通過margin屬性左右為auto可以設置盒子居中顯示。如果單獨讓左外邊距為auto會右對齊顯示。

《內外邊距的簡寫方式》

網頁設計師工作很久以后會發現對于網頁制作來講分區之間的內外間距會經常設置，使用頻率非常高。所以w3c為我們準備了margin和padding的簡寫方式；

4值方式：上 右 下 左；

3值方式：上 左右 下；

2值方式：上下 左右；較為常用；

1值：四個方向都相同。

一個復雜的東西想要記住最好就是找里面的規律；