CSS的初步認識

                             

1、CSS基本概念

1)   定義

CSS（CascadingStyle Sheet 譯為“階層式樣式表”）用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言；用來進行網頁設計的；它也是一種用來表現HTML或XML等檔案樣式的電腦語言；

2)   CSS文法

Selector{property:value} (選擇符{屬性：值})

3)   CSS中選取器

ID選取器：在HTML頁面中ID參數指定了某個單一元素，ID選擇符是用來對這個單一元素定義單獨的樣式，所以一種標籤只能設定一種樣式。

類別選取器：你能夠把相同的元素分類定義不同的樣式一種類別則可以通過“空格”添加多重樣式。

      選取器的優先順序別：

ID選取器（id）>類別選取器（class）>HTML標籤選取器

4）span和div

DIV(division)是一個區塊層級元素，範圍為一整“行”（用DIV修飾的盒子的範圍為一整行）。可以包含段落、標題、表格，乃至諸如章節、摘要和備忘等。

SPAN 是行內元素，SPAN 的前後是不會換行的，它沒有結構的意義，純粹是應用樣式。

但是我們倡導多用div，因為用span修飾的盒子，我們在改其屬性時（如border、margin等）經常會沒有效果（尤其是IE核心不同的瀏覽器，對行內元素支援的效果不好）。但是我們並不是說就不用span，我們用div無法實現效果時，就可以使用SPAN，因此span對於div是一個很好的補充。

 

2、CSS的核心

1)   標準流

標準流其實就是標籤的相片順序（即代碼編寫順序），就像流水一樣，以此類推，它是有順序的。

2)   盒子模型

         

           

一個頁面是所有盒子的集合，每個標籤就是一個盒子，而class、id選取器是對盒子屬性的具體描述。

3)   浮動

這因為div作用的範圍是一正行，所以按控制流程的方案，下一個div塊只能下移。如果我們需要將兩個div塊放到同一行時，就對布局有了很高的要求，這時遵守控制流程就有很有局限性。

所以便有了浮動的概念：被設為浮動的盒子將會脫離控制流程方案，成為一個獨立各體。比如：部落格支援內容塊的自由布局，每個內容塊就是一個“浮動”的獨立個體，能夠改變位置。

4)   定位

定位：將浮動定位某一具體規則。

由於盒子浮動離開了原有的“約束”，所以我們在設計頁面配置的時候會與原有的控制布局方案產生衝突，所以我們需要為浮動加上一個符合規定的“約束”，使之能良好的相容而不至於產生意想不到的結果。

    

3、 CSS優點

在首頁製作時採用CSS技術，可以有效地對頁面的布局、字型、顏色、背景和其它效果實現更加精確的控制。

只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。

它的優點表現在：

1)   樣式和內容分離

將樣式部分抽取出來放到獨立的樣式表中，HEML檔案中只存放文本資訊。

2)   提高瀏覽器的瀏覽速度  

對於同一個頁面視覺效果，採用CSS布局的頁面容量要比TABLE編碼的分頁檔容量小得多，前者一般只有後者的1/2大小。瀏覽器就不用去編譯大量冗長的標籤。

3)   易於維護和改版

只要簡單的修改CSS檔案就可以重新設計整個網站的頁面。

4)   幾乎所有的瀏覽器都可以使用。

支援大部分IE、非IE核心的瀏覽器。

5)   單個樣式表可以控制多個頁面文檔。

6)   很容易編寫，語言簡單明確。

7)        使用CSS布局更符合現在的W3C標準。