CSS樣式表

1,：內聯樣式表 即寫在標籤內部

 

solid表示實線，獲得效果

 

修改語句加寬高（注意分號隔開）

 

獲得效果

 

 

當新設置行高（line-height:""）與外邊框同樣高的時候

 

 

123出現垂直居中

 

 

以後想讓123再出現水平居中則添加text-align：center       （align 屬性規定 div 元素中的內容的水平對齊方式）

 

出現效果

 

 

再讓整個div居中，則設置邊距margin:0px  再設置左右邊距自動調整：auto

 

---

 

2：內嵌樣式表 （必須寫在head標籤裏，由於程序先讀取head標籤）style標籤

 

注意，type標籤能夠不寫，只寫style

 

好比只針對p標籤起做用，就直接使用p寫樣式 ，好比設置背景顏色和文字大小，以下

 

 

此時須要body中添加一個相對應的P標籤，以下

 

 

顯示以下

 

 

若在body中設置多個P標籤，都執行內嵌樣式

 

顯示以下     

 

 

總結：

 

 

---

 

3：外部樣式表 

注意寫外部樣式表的時候會首先默認寫一個星號*

margin間距設爲0

padding間距設爲0     間距：P標籤與P標籤之間的距離

好比此時 *號標籤等於對於全部標籤去除邊距和間距

 

 

 

新建一個外部樣式表，新建css

 

新建以下

 

而後把*標籤與p標籤剪切過來

 

注意由於自己是css，因此不須要放置style標籤，可直接寫樣式表

因此保存後，出現效果以下

 

 

在HTML當中引用css樣式表，鼠標右鍵·····以下

 

·············································

 

 

以後出現對應CSS的link語句

 

 

 此時保存刷新，則又出現以前出現過的樣式，如圖

---

二 選擇器

1.標籤選擇器，就是上面說過的

 

2.class選擇器 

class表示類，以點「.」開頭，以class引用，可屢次引用

 

 

舉例：

好比在css中設置一個.aa標籤

 

接下來用class在HTML中的第二個p標籤中引用.aa   。以下所示：

 

顯示效果：

 

小結：.class選擇器在css中以點開頭設置標籤，以class=「」在HTML的P標籤中引用

 

3.ID選擇器       以#開頭以ID引用，能夠屢次引用嗎？不能夠，注意ID是惟一引用

 

例如在css中寫入一個ID標籤

 

在html中引用，以下

 

效果以下：

 

不能兩個p標籤引用同一個ID標籤，ID只能引用一次，class能夠多個引用

 

4.複合選擇器

 

例如P標籤和span標籤同時執行此樣式：

 

 

同時HTML中：0

效果如圖：0

 

 

（2）：

 

其中.main表示在class=main所引用的標籤內部（即兩個尖括號中間的位置），若是有P標籤存在，則這個P標籤執行如下的樣式。後代指被包圍的。

 

例如：

 

同時css中以下

 

顯示效果

 

其中黃色內容爲p標籤

 

（3）篩選：

 

此表示：p標籤當中class等於sp的 執行如下此樣式

 

例如：

 

同時HTML中

 

顯示以下

 

注：能夠理解爲前面的P標籤的規則沒起做用···p標籤只是起到了一個導向性的做用

 

 

 

 

 

二.樣式屬性★★★★

1.    樣式屬性之背景與前景

1.背景：

 

2.前景字體：

 

（二）邊界和邊框

 

border（表格邊框、樣式等）、margin（表外間距）。padding（內容與單元格間距）。

 

 

 

例如：

 

 

 

顯示如圖：

 

 

 

 

（三）列表與方塊

width、height、（top、bottom、left、right）只有在絕對座標狀況下才有用。

 

 

 

---

 

效仿360瀏覽器中網站連接樣式的寫法

 

 

連接的style：

  a:link 超連接被點前狀態

  a:visited 超連接點擊後狀態

  a:hover 懸停在超連接時

  a:active 點擊超連接時

  在定義這些狀態時，有一個順序l v h a   必定要按照順序來

例如：

 

顯示如圖

 

此時訪問事後默認瀏覽痕跡爲紫色，如圖

 

而後在css中寫入一個link標籤，讓此連接沒有x下劃線（text-decoration：none），如圖

 

再寫visited

 

再寫hover（鼠標指在上方時，即鼠標懸浮在上方），此時出現下劃線與文字顏色：

 

再寫active（行動），即點擊時顯現的顏色：

 

以後保存刷新後出現360瀏覽器連接樣式效果，不附圖

可是以下圖中不一樣顏色的連接：

 

則須要分類，寫法以下

l v h a 中分別加標籤「.a1」,以下：

 

 

 

再在HTML中   class="a1"  以下：

 

再回到css中 複製一組lvha改標籤爲a2  ， 並改變初始顏色   以下：

4

 

在HTML中再引用a2，以下

 

效果以下

 

 

注：其中hover還能夠在其餘div中使用

例如：

 

 

 

顯示效果：鼠標指向時div區域變爲綠色，鼠標離開變爲藍色。以下

 

最後思惟導圖總結：