CSS是一個名稱，是一個功能，用於對HTML檔案功能的補充及擴充。其作用就是對HTML檔案中各種排版進行設定，達到對網頁中字型、顏色、背景、圖片等的控制，使網頁能夠完全依照設計者的想法來顯示。
為什麼要有CSS？CSS可以控制網頁的顯示，HTML標籤中的屬性也可以控制其顯示，為什麼還要有CSS呢？其中一個原因如下描述，以前幾乎一個人就可以完成一個網站的設定，非常的簡單，現在不是了，一個網站需要很多的人一起工作才可以完成，如果每個人都按照自己的喜好製作網頁，那麼開發出來的網頁的風格就會不一樣，那麼這些網頁很難放在同一個網站中了，CSS可以方便地設定所有網頁的風格，然後交友不同部門、不同地方的人製作網頁。
CSS就是HTML中標籤屬性獨立出來的東西，當然CSS也有自己特有的東西。將HTML語言中內容顯示的部分獨立的形成一個整體(CSS)，然後，我們編寫網頁的時候，使用HTML語言設定網頁內容的結構，使用CSS語言設定網頁內容的顯示，從而達到使網頁編程的靈活性和複用性增強目的。注意，HTML語言仍具有網頁內容顯示的功能，但是，我們在具體做網頁的時候，通常只用它對網頁內容結構控制的功能。
怎麼使用CSS？CSS不同於JavaScript，CSS不能單獨的存在，必須依靠HTML中的“標籤”而存在，“標籤”即CSS中的選取器，CSS樣式表的基本文法結構為：選取器{屬性一：值一；屬性二：值二；……}；選取器可以為HTML標籤名稱，也可以是標籤的屬性id值，或class值。
HTML使用CSS有四種方式：行內樣式、內嵌式、匯入式和串連式。行內樣式和內嵌式的CSS代碼都存放在HTML文檔裡，匯入式和串連式的CSS代碼存放在單獨的檔案中。
<html> <head> <title>頁面標題</title> <!--內嵌式--> <style type="text/css"> <!-- @import url(2.css); /*匯入式*/ /*HTML標籤名作為選取器*/ p{ color:#FF00FF; } /*HTML的class屬性值作為選取器*/ .first{ background-color:#00FF00; /*設定背景顏色*/ } /*HTML的id屬性值作為選取器*/ #second{ background-color:#0000FF; /*設定背景顏色*/ } --> </style> <!--連結式--> <link href="1.css" type="text/css" rel="stylesheet"> </head> <body> <p style="color:#FF0000; font-size:20px; text-decoration:underline;">行內式</p> <h1 class="first">標題一</h1> <h2 id="second">標題二</h2> </body></html>
注意：“串連式”會在裝載頁面主體部分之前裝載CSS檔案，這樣網頁顯示內容的時候就會顯示其相應的樣式了；“匯入式”會在整個頁面裝載完成後再裝載CSS檔案，這樣網頁先顯示內容，後再規定其相應的樣式。
為什麼是CSS+DIV？DIV是HTML中的塊標記，就是把一些HTML標籤作為一個塊。CSS可以通過DIV標籤，使被操作的對象的顆粒度可以靈活的改變。span標籤是行內標籤，div可以通過設定達到span的效果，但是，span很難達到div的一些效果。
盒子模型HTML中的所有元素，不論其元素是區塊層級元素，還是行集元素，在CSS看來都是一個盒子，這個就是盒子模型。這裡需要說的是，我們最好把這個“盒子”理解成沒有高度的盒子，這樣有利於我們理解下面層的概念，當然，你也可以把這個“盒子”理解成有高度的盒子，這樣的話，我們需要將下面“層”理解成有一定高度的層。具體的盒子模型如下
區塊層級元素在標準文檔流中是單獨的佔一行的，而行集元素在標準文檔流中佔得是行的一部分。但是當他們完全脫離標準文檔流的時候，他們就不再具有該特性。區塊層級元素和行集元素之間是可以相互改變的，通過display屬性，當屬性值為block時，就可以轉換為區塊層級元素，當屬性屬性值為inline時，就可以轉換為行集(內聯)元素。
層的概念HTML文檔內容的布局和顯示不僅僅在一個平面上，而是可以在多個平面上進行布局和顯示，各個平面（層）之間的布局有的並沒有完全的斷離關係，有的就完全脫離了關係，當然，其顯示效果我們可以通過z-index屬性進行設定，最後我們從最外的那個層面看到的重疊效果就是最終顯示的效果。
文檔流 文檔流就是文檔裡的內容連續的讀入到程式進程中，然後，經過處理，再連續從程式進程中讀出，輸出到顯示器上，當然，在其讀入和讀出時都是有一定的順序的，不是亂來的，這裡需要注意，之所以用“流”字，主要是因為資料在讀入和讀出的傳送過程中，和水的流動非常相似，所以，用了這麼一個“流”字，改字描述資料的傳送過程非常形象，但是該字卻沒有強調其讀入讀出的順序性。在這裡我們不需要太多的關心文檔的輸入資料流，應該多瞭解些文檔的輸出資料流，因為程式進程輸出各個層的先後順序的不同，就會導致最終我們看到層的重疊效果的不同。
根據文檔流對層的一些控制的不同，我們可以把文檔流分為常規流、絕對位置流和浮動流。現在我們可以把這個流當成層的意思。
常規流：最原始的那一層，最初該層包含所有的元素，其它層的元素都是從這個層裡面弄走的，當然，弄走人家的東西，你得給人家一個說法；絕對位置流：該層弄走原始層元素時，給人家說，我弄走的東西就完全是我的了，以後你這關於它的任何東西都不能存在；浮動流：該層還算厚道，不像絕對位置流那樣，說弄走人家東西，就連個毛也不給人家留，浮動流在弄走人家東西的時候，會告訴常規層，你們可以給它留個墓地或者把它原來的家留著，要是留墓地（夠它住就行）的話，墓地的位置由我來定，“好處”就是它的真身會在墓地的上方，要是留它原來的家的話，它的真身可以任意的漂流，具體你們留墓地還是流家，會告訴你們的。
注意：行集元素作為盒子被使用的時候，其本質還是在常規流上，但該元素的上方會形成一個突起，這樣我們從上方看的時候會出現一些覆蓋的現象；塊集元素作為盒子被使用的時候，它作用於整體，不會出現什麼突起，什麼覆蓋的現象發生。絕對位置流和浮動流，是在重新置放元素位置（float和position屬性設定）的時候出現的。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
