CSS英文名Cascading Style Sheet,中文名字叫層疊樣式表,是用于控制頁面樣式并允許将樣式資訊與網頁内容分離的一種标記性語言,DIV+CSS是WEB設計标準,它是一種網頁的布局方法。與傳統中通過表格(table)布局定位的方式不同,它可以實作網頁頁面内容與表現相分離。提起DIV+CSS組合,還要從XHTML說起。XHTML是一種在HTML(标準通用标記語言的子集)基礎上優化和改進的新語言,目的是基于XML應用與強大的資料轉換能力,适應未來網絡應用更多的需求。“DIV+CSS”其實是錯誤的叫法,而标準的叫法應是XHTML+CSS。因為DIV與Table都是XHTML或HTML語言中的一個标記,而CSS隻是一種表現形式。
接下來,小編會從最基礎的CSS.DIV網頁樣式與布局,開始慢慢的介紹,一點點的深入,然後結合例子,慢慢分析,希望對大家有所幫助。通常我們在學習CSS時,應該盡量的參照其她網站的編寫CSS。比如百度,谷歌等,通過學習其她網站的CSS代碼,可以很快的對頁面設計有不一樣的心動感覺,更容易上手。這個我們叫做“站在巨人的肩膀上。” 今天小編主要簡單的介紹一下CSS的基本概念以及CSS的基本文法,首先我們來看一張圖:

接着,小編會順着這張圖的脈絡,依次減少CSS的基本知識。
初探CSS
概念:CSS(Cascading Style Sheet),中文譯為層疊樣式表,是用于控制網頁樣式并允許将樣式資訊與網頁内容分離的一種标記性語言。
使用CSS控制頁面:CSS控制頁面的方法有四種:分别為行内樣式,内嵌式,連結式和導入樣式。對于稍微龐大的網頁我們都會使用連結樣式,這是因為其将HTML和CSS分開編寫,便于後期維護,而且明朗清晰。
基本文法
對于CSS選擇器,也就是我們選擇哪個html物件進行CSS樣式控制,有三種:分别為标記選擇器,類别選擇器和ID選擇器,接下來,小編對這三個選擇器進行詳細介紹。
标記選擇器:
我們來看一個例子的代碼及其顯示效果:
效果如下:
類别選擇器:繼續講類别選擇器:也就是我們常說的.class。
對比上面的标記選擇器,我們很容易看出來,就一個h1變成了.class;别的看不出變化,那我們看看代碼裡邊怎麼應用,我們來看一個例子的代碼及其顯示效果:
分析一下上面的代碼,我們每一個P标記都用一個class進行控制,一個class="one"對應一個.one{},然後在.one裡邊添加屬性,就可以了,效果如下:
我們看的出來,這個h3跟.two是一個效果,隻是字型不一樣,那就是h3預設的字型與class的差別。采用class的好處是可以讓使用者充分的自定義并且這個class可以重複的被使用,這就是咱們的p标志和h3标志所顯示的那樣。
ID選擇器
我們來看一個例子的代碼及其顯示效果:
對比類别選擇器多了一個“#”,ID與class的差別是:ID不允許出現兩個同樣的ID,顯示效果如下:
CSS的聲明
對于CSS的聲明這裡有三種,集體聲明,全局聲明和嵌套聲明,看下邊兩個例子:
效果如下:
下邊這個例子為嵌套聲明,可以幫助我們很精确的找到我們想控制的區域:
效果如下:
效果如下:
小編寄語:該博文,小編主要介紹了CSS的一些基礎知識,總的來說分為兩個部分進行介紹,一個是初探CSS,一個是CSS的基本文法,初探CSS包括概念和使用CSS控制頁面,CSS的基本文法包括三個方面的内容,分别是CSS的選擇器,CSS聲明,CSS繼承。有了CSS讓我們的界面瞬間活了起來,動了起來,讓我們的網際網路世界更加的豐富多彩,美麗無限,BS學習,未完,待續......