【CSS簡介】

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

我們在原來使用html的時候發(fā)現(xiàn)記住標簽并不難，難的記住誰有什么屬性至非。

【體驗css】

《css要求》

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

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

font-size 表示字號乙墙；

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

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

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

【CSS的語法】

簡介：

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

語法要求：

第一：css需要都寫在style標簽內(nèi)，并且style標簽要位于head頭部標簽里威彰。

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

k:v;

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

《盒子特性》

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

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

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

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

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

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

化簡總結(jié)：

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

Span這種盒子 能在一行內(nèi)共存，然后它是一種自然尺寸氮惯，只跟內(nèi)容有關 inline

Zaicss的世界里面又制作出了另外一種性質(zhì)的盒子同時具備兩者的優(yōu)點叮雳； inline-block

《實體化三屬性》

我們?yōu)槭裁匆獙W習實體化三屬性想暗，就是因為將來可以將任何標簽都畫成盒子。 你今后注意一件事情只要你給標簽添加了實體化三屬性帘不，那么這個標簽就該現(xiàn)形江滨。

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

實體化三屬性分別是：

Width寬度單位帶px厌均；

Height高度唬滑；

Background背景色；

《盒子的顯示模式》

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

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

優(yōu)缺點：

大盒子的優(yōu)點是可以接受人為尺寸稻艰，缺點是不能在一行內(nèi)顯示；

小盒子的優(yōu)點是可以在一行內(nèi)顯示但是不接受人為尺寸侈净。

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

Display：inline-block；

《知識點》

如果發(fā)現(xiàn)實體化沒有成功畜侦，那么只有一種可能就是現(xiàn)實模式?jīng)]有轉(zhuǎn)換元扔。一般來講我們只有特殊需求才會轉(zhuǎn)化為inline-block其他時候都是另外兩者之間的轉(zhuǎn)換。

內(nèi)邊距屬性：padding旋膳；

外邊距屬性：margin澎语；

【邊框?qū)傩浴?/p>

《border》

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

基本結(jié)構(gòu)： ? border：粗細 類型 顏色义图；

其中類型有兩個值 solid表示固態(tài)是實線减俏。Dashed 表示虛線。

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

《知識點》

Css中所有的邊框都由4部分組成痛垛，分別是 上右下左草慧。 Top，right匙头，bottom漫谷，left

邊框的本質(zhì)：

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

【css選擇器】

介紹：

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

類選擇器和id選擇器以及標簽選擇器統(tǒng)稱css中的基礎選擇器俺祠；他們的關系和身份證上的信息很像公给。Class相當于姓名，id相當于身份證號蜘渣。標簽類型相當于民族淌铐。之前學習的顯示模式display相當于性別。所有的標簽只有兩種性別蔫缸。要么是block要么是inline腿准；

《對應關系》

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

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

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

【清空默認邊距】

有些標簽默認狀態(tài)會帶有一定的內(nèi)外邊距校翔，例如標題或段落標簽弟跑，這些邊距在我們實際寫網(wǎng)站的時候是不需要的，默認會清掉這些邊距展融，那么這個時候我們就有一個問題怎么才能選中所有的不同類型的標簽一起清掉他們窖认。

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

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

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

【基礎選擇器權(quán)重】

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

《權(quán)重規(guī)律》

所有的4個基礎選擇器當中選擇器的針對性越單一權(quán)重就越高指么。

【css中的對齊方式】

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

《居中對齊》

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

《內(nèi)外邊距的簡寫方式》

網(wǎng)頁設計師工作很久以后會發(fā)現(xiàn)對于網(wǎng)頁制作來講分區(qū)之間的內(nèi)外間距會經(jīng)常設置平项，使用頻率非常高赫舒。所以w3c為我們準備了margin和padding的簡寫方式悍及；

4值方式：上 右 下 左；

3值方式：上 左右 下接癌；

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

1值：四個方向都相同缺猛。

一個復雜的東西想要記住最好就是找里面的規(guī)律缨叫；