、CSS的起源

當web開發還是一項新技術的時候，無論定義網頁內容還是定義網頁樣式，都是使用的HTML語言，HTML的內容和樣式沒有區分開，如古老的HTML樣式：

<H3 COLOR=RED><CENTER>樣式</CENTER></H3>

其中color表示顏色，center讓文字居中，不是目前規范的書寫形式，而且舊的HTML標簽都是大寫的，web開發人員還需要來回切換大小寫，所以很多人認識到了這種開發方式并不理想。

Web開發人員想開發一種新的語言，把表示樣式的代碼從HTML中分離出來，并且創建一種規則來定義HTML標簽要顯示成什么樣子，這門語言叫做CSS，CSS是用來描述HTML標簽應該如何顯示的一個代碼。如：

<h3>樣式</h3> 

用CSS可以讓h3標簽顯示成綠色，讓h3字體在大一點，讓h3有一個下劃線，可以統一字體的顯示樣式等。

二、CSS的工作方式

CSS的全稱叫做 Cascading Style Sheets 級聯樣式表，CSS的工作方式依賴于"選擇器"可以選擇HTML標簽，并且修改這些標簽的樣子。

選擇器的類型有：

1、類型選擇器：不帶尖括號的標簽名，最簡單的選擇器

定義了一個P標簽，如果想在CSS中選擇這個標簽，首先寫上字母P，然后選擇要定的屬性如text-decoration，并設置這個屬性的屬性值為underline下劃線，在瀏覽器中這個段落就會顯示下劃線。

使用選擇器的時候我們必須要遵守選擇器的特殊語法規則：

選擇器名字后面是一個開始的大括號，屬性和屬性值中間是冒號，屬性值后面是分號，這里面任何一部分都不能丟掉，否則CSS無法正常工作，并且要注意標點符號全部是英文半角的，最后在所有的屬性列表后面是一個結束的大括號，大括號的作用就是可以在里面寫很多屬性，如圖：

顯示結果為帶下劃線的紅色字體段落：

在CSS中使用標簽名選擇標簽的時候，類型選擇器會作用在所有同名標簽中。所以這里只定義額一CSS樣式，它會作用在所有的P標簽中。

2、派生選擇器

可以讓CSS標簽作用在很小的范圍內，如下圖，只讓CSS作用在li標簽中，所以選擇ul標簽中的li標簽即可。

3、偽類選擇器

1）在原有選擇器的基礎上添加一個限定條件，當某種情況發生時在選擇這個標簽。如下圖，首先定義個a的類型選擇器，讓頁面中所有的超鏈接下劃線都不顯示，然后通過派生選擇器控制鼠標的動作，當鼠標移上去的時候，超鏈接文字顯示下劃線并顯示為深藍色。

這條規則只有當鼠標放到超鏈接上停留的時候才會被應用，因此當某種情況發生時候偽類選擇器才會被應用在某個標簽上。

a的偽類選擇器一共有四種：

:link 未被訪問的鏈接的樣式；和a標簽相同時，并且同時存在的時候會覆蓋a標簽

:hover 鼠標移動到超鏈接上的時候

:active 選擇器用于活動鏈接，被選定的超鏈接。

:visited 已被訪問的超鏈接，

注釋：在 CSS 定義中，:hover 必須位于 :link 和 :visited 之后（如果存在的話），這樣樣式才能生效。

2）使用偽類選擇器縮小選擇范圍

:first-child 縮小標簽的選擇范圍，如圖：

如果一個標簽后面還接了一個子標簽，在子標簽后面冒號：first-child，說明這里只選擇了子標簽中的第一個標簽，可以看到瀏覽器中有序列表中的第一個li子元素"北京"顏色為紫色。

三、CSS樣式表放在什么地方

在head標簽中添加style子標簽，在style標簽里寫一個屬性type="text/css"，這樣瀏覽器就知道當頁面顯示出來的時候，需要把style中的CSS代碼應用到HTML中，因此可以在style標簽中創建CSS規則。

每天進步一點點，跟著教頭學開發。

篇文章繼續為大家介紹html常用修飾標簽介紹。我們今天主要說下樣式標簽<span>、內容修飾標簽<b><i>等的語法以及使用技巧。

1）樣式標簽<span>

使用語法：<span>文章內容</span>

<span>標簽是沒有語義的，它的作用就是為了設置單獨的樣式用的。如果現在我們想要修改一篇文章中的幾個字字體效果，為它設置和其它文字不同的樣式，所以這樣情況下就可以用到<span>標簽了。比如我們設置字體顏色為藍色，并設置字號大小為30px，代碼如下圖所示：

代碼在瀏覽器中顯示的效果就如下圖所示：我們可以清楚的看到被span標簽包裹的文字內容已經變成了藍色，字體大小也變成了30px；

2）內容修飾標簽

內容修飾標簽有很多，這里我們簡單的來列舉一下標簽的名稱以及標簽的作用。

文字斜體標簽： <i></i>、<em></em>

文字加粗標簽： <b></b>、<strong></strong>

文字下標標簽： 

文字上標標簽： 

文字下劃線標簽： <ins></ins>

文字刪除線標簽： <del></del>

具體的代碼如下所示：

代碼在瀏覽器中顯示的效果就如下圖所示：每個被標簽包裹的內容都賦予了其獨立的效果。

好了以上就是我們所說的修飾標簽，每個標簽都有單獨的意義，在以后練習的時候可以自己多實踐一下，只有自己親自動手去寫了才能明白其中的含義以及效果。

附贈一句經典語錄：每一天，都要盡心盡力的工作，每一件小事情，都力爭高效的完成，不是為了看到老板的笑臉，而是為了自身不斷的進步。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

檔對象模型（Document Object Model，DOM）是一種抽象化表示網頁的方法，文檔是以樹形結構表示的。

Document節點分為父節點（parentNode）、子節點（childNode）、兄弟節點（siblingNode）等。

BOM（瀏覽器對象模型）因為沒有一個標準來定義瀏覽器的功能，所以不同的瀏覽器有不同的屬性和方法。DOM則不然，有專門定義HTML（或XML）頁面中的對象應該如何表示的標準。開發人員可以使用DOM操作或查找網頁中的某項內容，尤其是表單、圖片、定位元素。

1 查詢或訪問的方法

當HTML文檔加載完成后，瀏覽器將會將其表示成樹形結構，頁面上的所有元素都是對象樹中的對象。如JS在處理表單時，會根據其在文檔中出現的次序為所有表單創建一個數組。document.forms[0]用來表示第一個表單。同樣，頁面上所有的圖片、鏈接和錨點都會以其名字存儲在數組中，例如document.images、document.links、document.anchors[]等。

1.1 數組通過名字或索引

如文檔中有一個表單，名字是form1，那么就可以通過它的名字來訪問它，即document.forms["form1"]，也可以使用索引值來訪問它，即document.forms[n].

1.2 通過document方法的name屬性

document.getElementByTagName();

1.3 通過document方法的ID屬性

document.getElementById();

2 DOM的修改

window.onload=function(){

var divObj=document.getElementById("divtest");

divObj.innerHTML="Inserting new text in the div container!";

}

3 DOM的追加

window.onload=function(){

var para=document.createElement("p");

var divObj=document.getElementById("divtest");

divObj.appendChild(para);

var txt=document.createTextNode("Hope this work!");

para.appendChild(txt);

}

4 DOM節點的插入

document.body.insertbefore(newPara, firstPara);

5 為DOM節點創建屬性

var headings=document.getElementsByTagName("h4");

headings[0].setAttribute("id", "firsth4");

6 DOM的復制

newPara=oldPara.cloneNode(true);

7 DOM的刪除

parentDiv1.removeChild(div2);

補充：

document.write()方法

可以寫入全部的文檔代碼，包括HTML、CSS乃至JS。

－End－