div+css視頻旨在幫助網頁開發初學者直觀的掌握div+css基礎知識。
基本介紹
- 中文名：div+css視頻
- 外文名：Cascading Style Sheets
- 英文的縮寫：CSS
- 效果：動態
- 中文別名：層疊樣式表
- 作用：將網頁的表現形式與結構代碼分離
div+css由來,css的優點,css的不足之處,設計師經驗,css要點精髓,css的學習方法,書本學習,視頻學習,發展歷史,網頁設計發展趨勢——css將會得到更多關注,CSS標籤大全,
百科名片
div+css由來
起初，一些天才發明了網路，隨之研發了出了Html語言，即建立了網頁，但最早的網頁可不像現在這樣，它是相當醜陋的，僅僅有一些簡單的定義能讓你分辨出哪些是標題哪些是段落內容。 隨著網路的迅速發展，網頁被廣泛地套用、瀏覽，用戶的需求也變得多樣化，單一醜陋的網站落伍了，人們希望網頁做的漂亮些，因此老式Html頁面的局限性就暴露了。人們為了使頁面更漂亮研究了許多方法，用table排版的方法盛行一時，但它會造成頁面代碼臃腫的弊端馬上就暴露出來。直到CSS出現，它就像救世主一樣拯救了網頁。
css的優點
1.大大縮減頁面代碼，提高頁面瀏覽速度,縮減頻寬成本;
2.結構清晰，容易被搜尋引擎搜尋到，天生最佳化了seo
3.縮短改版時間。只要簡單的修改幾個CSS檔案就可以重新設計一個有成百上千頁面的站點。
4.強大的字型控制和排版能力。CSS控制字型的能力比糟糕的FONT標籤好多了，有了CSS，我們不再需要用FONT標籤或者透明的1 px GIF圖片來控制標題，改變字型顏色，字型樣式等等。
5.CSS非常容易編寫。你可以象寫html代碼一樣輕鬆地編寫CSS。
6.提高易用性。使用CSS可以結構化HTML，例如：<p>標籤只用來控制段落，heading標籤只用來控制標題，table標籤只用來表現格式化的數據等等。你可以增加更多的用戶而不需要建立獨立的版本。
7.可以一次設計，隨處發布。你的設計不僅僅用於web瀏覽器，也可以發布在其他設備上，比如PowerPoint。
8.更好的控制頁面布局。不用多說。
9.表現和內容相分離。將設計部分剝離出來放在一個獨立樣式檔案中，你可以減少未來網頁無效的可能。
10.更方便搜尋引擎的搜尋。用只包含結構化內容的HTML代替嵌套的標籤，搜尋引擎將更有效地搜尋到你的內容，並可能給你一個較高的評價(ranking)。
11.Table 布局靈活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 還可以 ul li ……但標準語法最好有序的寫。
12.另外如果你不是javascrput的高手，你可以不必去寫ID，只用class就可以。當客戶端程式設計師寫完程式，需要調整時候，你可以在利用他的ID進行控制。
13.Table 中布局中，垃圾代碼會很多，一些修飾的樣式及布局的代碼混合一起，很不利於直觀。而Div 更能體現樣式和結構相分離，結構的重構性強。
14.在幾乎所有的瀏覽器上都可以使用。
15.以前一些非得通過圖片轉換實現的功能，現在只要用CSS就可以輕鬆實現，從而更快地下載頁面。
16.使頁面的字型變得更漂亮，更容易編排，使頁面真正賞心悅目。
17.你可以輕鬆地控制頁面的布局 。
18.你可以將許多網頁的風格格式同時更新，不用再一頁一頁地更新了。你可以將站點上所有的網頁風格都使用一個CSS檔案進行控制，只要修改這個CSS檔案中相應的行，那么整個站點的所有頁面都會隨之發生變動。
css的不足之處
瀏覽器支持的不一致性 瀏覽器的漏洞或缺乏支持的CSS功能，導致不同的瀏覽器顯示出不同的CSS版面編排。例如在微軟Internet Explorer6.0的舊版本 ，執行了許多自己的CSS2.0屬性，曲解了很多重要的屬性，例如：width，height，和float。許多所謂的CSS人員，必須在最熱門的或常用的瀏覽器中達到一致的版面編排。在不同的瀏覽器中，要達到像素精準的版面編排，有時候是不可能的。
CSS沒有父層選擇器 CSS選擇器無法提供元素的父層或繼承性，以符合某種程度上的標準。先進的選擇器（例如 XPath）有助於複雜的樣式設計。然而，瀏覽器的性能和增加彩現的問題關係著父層選擇器，卻是CSS的工作群組拒絕建議的主要原因。
不能明確地指定繼承性 樣式的繼承性，建立在瀏覽器中DOM元素的層級和具體的規則上。
垂直控制的局限元素的水平放置普遍地易於控制，垂直控制則非憑直覺性的、較迂迴的甚至是不可能的。簡單來說，例如：垂直地圍繞一個元素、頁尾的放置不能高於可見視窗（viewport，視窗或螢幕的可見範圍）的底部範圍、需要複雜而非憑直覺性的樣式規則，或是簡單但不被廣泛支持的規則。
顯示的缺乏目前的CSS沒有辦法明確又簡單的顯示屬性值（例如：margin-left: 10% - 3em +4px;）。這在很多情況下都是非常有用的，例如：總欄位中計算欄位的尺寸限制。無論如何，CSS WG發表了CSS局限性的草案，而InternetExplorer 5 以後的版本支持相似功能的語法顯示。
缺乏正交性同樣的效果可以用不同的屬性來完成，這經常會造成困擾。例如position、display與float定義了不同的配置方式，而且不能有效的交替使用。 一個display: table-cell元素不能指定 float或是position: relative，因為指定float:left的元素不應該受到display效果的影響。再者，沒有考慮到新建立屬性所造成的影響，例如在表格中你應該使用border-spacing而不是margin-*來指定表格元素。這是因為依照CSS準則，表格內部元素是沒有邊界（margin）的。
設計師經驗
一、用class_name方式寫類名。
以前喜歡用class-name寫，不過好像兩樣也沒什麼差別。但我比較反對用className寫類名，因為始終對瀏覽器大小寫敏感的問題抱有懷疑態度。但是id我會寫成駝峰式，理由見下一條。
二、樣式都用class而不用id。
有三個理由，一，id不可以重複，所以用class的話，可以肆無忌憚的用無數次。二，id的優先權太高，若是寫了一個#page_content a {color:#f60} ，那你完蛋了，裡面要改連結顏色，都必須加上#page_content才能越過這個優先權。三，id專門留給JS用，這樣才符合表現與行為分離的原則。所以id我用駝峰式，也是為了體現這一點。
三、margin和padding，儘量省略最後一個值。
比如margin: 20px 10px 5px 10px; ，左右值是一樣的，就應該省略掉最後一個值，寫成margin: 20px 10px 5px; 這樣到時候要改左右間距，改一個就好，免得改漏了。其實這個問題雖然很細小，但是可以看得出對margin四個值省略規則的熟練程度。
css要點精髓
1.CSS是英文Cascading Style Sheets的縮寫，即層疊樣式表；
2.CSS樣式是用來定義HTML元素如何顯示的；
3.CSS樣式一般保存在樣式表中；
4.CSS樣式能解決了Html頁面的局限性；
5.外部CSS樣式表保存在一個CSS檔案里；
6.外部CSS樣式表能讓你做網頁事半功倍；
7.多項樣式定義將會層疊成一項；
css的學習方法
書本學習
css的學習和其他的學習一樣,都需要特定的方法才能比較快的去掌握它.要想掌握CSS, 首先要學會HTML，我剛開始是從零開始學習的，花了一個月時間學習HTML，沒有老師，書就是我唯一的老師，也沒有上網的條件！一個月過後，我就開始學習CSS，剛開始看的第一本CSS書是《CSS網頁樣式設計》看了幾天后發現根本看不懂！，之後換了一本《HTML參考大全》，這本書是網頁製作師的案頭常備之書！之所以更換這本書來學習CSS，是因為這裡面有一部分是CSS，就成了我的CSS啟蒙書。看了幾段後，覺得外國人寫的教程很有條理，由淺入深，一步一步引領你向前走，讓你明白他們在說什麼，而不是象國內的書講的深淺不一，缺乏條理，好象怕你不知道他很有學問！就象前面所說的那本書《CSS網頁樣式設計》當時看了，對於初學CSS的我來說，真的不知道它在說什麼！
再來談一下學習過程中的細節，因為一個樣式它是不可能脫離HTML頁面的，HTML不與樣式結合的話, CSS就失去了存在的意義。所以一般書中都會舉一個例子，然後讓你上機測試效果，這是筆者想讓你有對樣式表CSS有一個初步的印象，告訴你CSS能做什麼。一個小例子：“麻雀雖小，五臟俱全”，你可能看不懂每一個語句的真正意思。但是你可以記得例子的模式，以後在實踐中不斷地用，不斷用的過程就是不斷記的過程，所以不能恢心，不能總認為自己記憶力不好，但不管你騎的是牛也好，千里馬也罷，只要有恆心，一定會到達終點的。
閱讀一本書，一般來說第一次要先把整個書通讀一遍，不理解的也要往下看，在往下看的過程中你也許會找到那個問題的答案。看完後你有一個大概的印象，但一定有很多不明白的地方，沒關係，繼續往下看。
第二遍你就要邊看邊做學習筆記了，把你認為是重點的部分寫上，還有，你覺得有疑問的部分也要記下，帶著疑問看下去，如果沒有答案，你可以去BBS上發一個貼子，好心人還是很多的，提示一句：“一定要學會如何去問問題！” 這裡就不說了。你還要上機去練習書上的例子，最讓你困惑的：“一是記不住，二是對概念的理解有誤（這一條可能是書譯的不好，另外就是你的理解不對）”，對於第一條你就要樹立信心，堅持再堅持下去。當你到達終點時你回發現一切都是順理成章的事。因為你努力了，努力了就會有回報，有結果。
有好多人也看了，但是沒有什麼進步，我分析主要有以下幾個原因：
原因一：壓力不夠，因為有不少人比如美工學CSS，因為是看別人學，所以學之，不學就沒優勢！這樣的壓力是很小的，學不好還有美工這碗飯。
原因二：只是業餘學習，這樣學還只是玩一玩，因為你不一定非要以這門技術吃飯。
原因三：方法不對，有的人只是在看教程，但他不動手去做，我以前就是看的太多，做的太少，所以有了實踐你才能把理論的東西揉進去。
視頻學習
隨著網際網路的廣泛套用 ，一種新的教學模式應運而生——網上教學。眾多的視頻教學網站如雨後春筍般誕生。在div+css是網頁設計的基礎技術，學起來有一定難度，如果能採用視頻教學模式，一定能取得更好的學習效果。
發展歷史
從20世紀90年代初，在HTML被發明開始，樣式表就以各種形式出現了，不同的瀏覽器結合了它們各自的樣式語言，讀者可以使用這些樣式語言來調節網頁的顯示方式。一開始樣式表是給讀者用的，最初的HTML版本只含有很少的顯示屬性，讀者來決定網頁應該怎樣被顯示。
但隨著HTML的成長，為了滿足設計師的要求，HTML獲得了很多顯示功能。隨著這些功能的增加，使用外來定義樣式的語言越來越沒有意義了。
1994年哈坤·利提出了CSS的最初建議。伯特·波斯（Bert Bos）當時正在設計一個叫做Argo的瀏覽器，他們決定一起合作設計CSS。
當時已經有過一些樣式表語言的建議了，但CSS是第一個含有"層疊"的主意的。在CSS中，一個檔案的樣式可以從其他的樣式表中繼承下來。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或"層疊"作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合各人的愛好。
哈坤於1994年在芝加哥的一次會議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個建議。當時W3C剛剛建立，W3C對CSS的發展很感興趣，它為此組織了一次討論會。哈坤、
波斯和其他一些人（比如微軟的托馬斯·雷爾登）是這個項目的主要技術負責人。1996年底，CSS已經完成。1996年12月CSS要求的第一版本發布。
1997年初，W3C內組織了專門管理CSS的工作組，其負責人是克里斯·里雷。這個工作組開始討論第一版中沒有涉及到的問題，其結果是1998年5月發布的第二版要求。到2007年為止，第三版還未完備。
網頁設計發展趨勢——css將會得到更多關注
這是期待已久的事情。在過去的幾年設計師已經開始關注和使用CSS3+HTML5，但在2011年CSS3+HTML5將會得到更廣泛的套用。網頁設計師最終會拋棄Flash。Flash不再是昔日的王者，新技術（指CSS3+HTML5）將會取而代之。2011年，Flash漸行漸遠，魔術師“HTML5”成為舞台的主角：
當然，說HTML5代替Flash為時還早。從上面的兩幅截圖你可以知道Flash和HTML5還是有差距的。因此，2011年兩者會各自保持屬於自己的位置。不過2010年以前網頁設計師濫用Flash的現象會慢慢減少。現在很少設計師會整個網站都是用Flash設計，他們會在一些可用的地方使用HTML5替代Flash，使網站變得簡單運行更快速。然而，目前HTML5還不能夠取代Flash，Flash的某些效果HTML5暫時還不能夠實現。
然而最值得人興奮的是CSS3的套用越來越廣，在某些地方甚至超越PS（Adobe表示有鴨梨），因為利用CSS3來實現文字陰影、圖片圓角和圖片透明實在是easy job。如果你還不會，是時候去了解CSS3和HTML5。
CSS標籤大全
顏色與背景類
color 設定文字顏色
#rgb
#rrggbb
rgb(255,255,255)
rgb(100%,100%,100%) H1{color:red}
H1{color:#f00}
H1{color:#ff0000}
H1{color:rgb(255,0,0)}
H1{color:rgb(100%,0%,0%)}
background-color 設定背景顏色，格式同上。 BODY{background-color:red}
BODY{background-color:#f00}
BODY{background-color:#ff0000}
BODY{background-color:rgb(255,0,0)}
BODY{background-color:rgb(100%,0%,0%)}
background-image 設定背景圖片，
url(/imageURL) body{backround-image:url(/back.jpg);}
background-repeat 設定背景圖片是否重複排列:
repeat-x(X軸重複排列);
repeat-y(Y軸重複排列);
No-repeat(不重複排列) BODY{background-repeat:repeat-x;}
BODY{background-repeat:No-repeat;}
background-attachment 設定背景圖片是否捲動，默認為捲動。
scroll(捲動)
fixed(不捲動) BODY{background-attachment:fixed;}
background-position 設定背景圖片或背景顏色開始顯示的位置，取值格式：
top,buttom,left,right,center(用關鍵字)
70px 10px(用長度值)
50% 30%(用百分比) BODY{background-position:right top;}
BODY{background-position:50px 10px;}
BODY{background-position:20% 50%;}
background 定義背景綜合屬性，不要求順序，各屬性值以空格分開。 BODY{background:#ffcc00 url(/bg.jpg) fixed center}
字型類
font-family 設定字型屬性，取值可以是任何字型名稱，預設為瀏覽器內定字型，可以設多個以逗號(,)分開，有空格的英文字型可用單引號或雙引號括起來。 P{font-family:宋體,楷體,黑體,"Time New Rom";}
font-style 設定字型樣式：Normal(正常),italic、objlique(斜體) P{font-style:italic;}
font-variant 取值：Normal(默認)，small-caps(如果是中文字型則將字型縮小顯示，如果是英文則全部改為較小的大寫) H3{font-variant:small-caps;}
font-weight 設定字型粗細，取值有：
Normal(默認),bold,lighter,border,100,200...900
由於瀏覽器支持程度不同，一般只用normal和bold兩種屬性。 P{font-weight:bold;}
font-size 設定字型的大小；
絕對大小：xx-small,x-small,small,mediumlarge,x-large,xx-large;
相對大小：larger,smaller;
數字表示可用單位：磅(pt),像素(px),英寸(in),厘米(cm);
亦可用百分比表示。 H2{font-size:36pt;}
P{font-size:200%;}
font 設定字型的綜合屬性，其順序如下：
{font-style font-variant font-weight font-size /line-height font-family;} P{bold 12pt/14pt impact,Arial;}
文字類
letter-spacing 設定文字間距。 P{letter-spacing:5pt;}
text-decoration 設定文字加上下劃線、刪除線等效果：
none(無)
underline(下劃線)
overline(上劃線)
line-through(刪除線)
vertical-align 設定文字或圖片垂直方向的對齊方式：
baseline:默認值 sub:下標 super:上標 top:垂直向上對齊 middle:垂直居中 bottom:垂直向下對齊。
text-transform 轉換英文字母大小寫：
none:默認值 capitalize:首字母大寫 uppercase:所有英文字母大寫 lowercase:所有英文字母小寫。
text-align 設定文字的水平對齊方式：
left:左對齊 right:右對齊 center:水平居中 justify:左右對齊。
text-indent 設定標記元素內文字的首行縮進或配合margin-left屬性設定首行凸排。
line-height 設定行高，聲明方式有標準行高、固定值表示法、百分比行高、字型大小比例行高等。
列表類
list-style-type 有序列表的編號方式（供<OL>標記使用）：
none:無編號 decimal:阿拉伯數字 lower-roman:小寫羅馬數字 upper-roman:大寫羅馬數字 lower-alpha:小寫英文字母 upper-alpha:大寫英文字母。
list-style-type 無序列表的符號樣式（供<UL>使用）：
none:無符號 disc:實心圓符號 circle:空心圓符號 square:實心方形符號。
list-style-image 無序列表的自定義符號樣式：
格式：url(圖片名稱) UL{list-style-imag:url(/dd.gif);}
list-style-position 設定列表清單符號縮排屬性：
outside:凸排 inside:縮排 UL{list-style-imag:url(/dd.gif); list-style-position:outside;}
list-style 列表清單項目的綜合設定，屬性之間用空格隔開。 UL{list-style-imag:url(/dd.gif) inside;}
邊界及其相關類
margin 標記元素邊界值的綜合設定。（其規則見右邊範例）
亦可以用margin-top、margin-right、margin-bottom、margin-left分開設定各邊的邊界。 聲明4個值，其順序為上、右、下、左邊界，如：DIV{margin:12pt 15pt 20pt 16pt;}
聲明3個值，其順序為上、右、下，缺少的左邊界取其對邊（右），如：DIV{margin:12pt 15pt 16pt;}
聲明2個值，其順序為上、右，缺少的下、左邊界取其對邊，如：DIV{margin:12pt 15pt;}
聲明1個值，則4個邊界同一個值，如：DIV{margin:15pt;}
padding 設定標記內容與標記框線之間的留白的綜合設定（規則見margin屬性的範例）。 也可分開設定padding-top、padding-right、padding-bottom、padding-left各值。
border-width 標記元素框線寬度的綜合設定（規則類似於margin屬性）。 也可分開設定border-top-width、border-right-width、border-bottom-width、border-left-width各值。
border-color 標記元素框線顏色的綜合設定（規則類似於margin屬性）。顏色取值見color屬性。 也可分開設定border-top-color、border-right-color、border-bottom-color、border-left-color各值。
border-style 標記元素框線樣式的綜合設定（規則類似於margin屬性）。框線樣式有solid,double,goove,ridge,inset,outset等。 也可分開設定border-top-style、border-right-style、border-bottom-style、border-left-style各值。
border 標記元素4個框線的綜合設定，可以分別聲明框線寬度、框線樣式、和框線顏色。 DIV{border:5pt solid #ff0000;}
width 設定標記元素的寬度。
height 設定標記元素的高度。
float 設定標記元素與文字間的相對位置（文字繞排方式）。取值：
none:以默認方式顯示；
left:標記元素靠左，文字在右邊繞排；
right:標記元素靠右，文字在左邊繞排；
clear 設定標記元素與文字間的相對位置（與float不同的是標記元素兩邊都不繞排）。取值：
none:以默認方式顯示；
left:標記元素靠左，右邊無文字繞排；
right:標記元素靠右，左邊無文字繞排；
其他類
z-index 設定標記元素的堆疊層次，取值為整數，也可以是負數，數值大的在上層。
visibility 設定標記元素是否可見，取值有：
inherit:取默認值 visible:可見 hidden:不可見（隱藏）
DIV+CSS是現在比較普遍的企業網站建設布局架構。
