【轉載】CSS基本介紹
https://www.cnblogs.com/wj-1314/articles/8372503.html
CSS基本介紹
一，我們為什麼需要CSS？
使用css的目的就是讓網頁具有美觀一致的頁面，另外一個最重要的原因是內容與格式分離 在沒有CSS之前，我們想要修改HTML元素的樣式需要為每個HTML元素單獨定義樣式屬性，當HTML內容非常多時，就會定義很多重複的樣式屬性，並且修改的時候需要逐個修改，費心費力。是時候做出改變了，所以CSS就出現了。
CSS的出現解決了下面兩個問題：
| 1 2 3 |
|
二，什麼是CSS？
CSS是指層疊樣式表(Cascading Style Sheets)，樣式定義如何顯示HTML元素，樣式通常又會存在於樣式表中。也就是說把HTML元素的樣式都統一收集起來寫在一個地方或一個CSS檔案裡。
-
CSS 指層疊樣式表 (Cascading Style Sheets)
-
樣式定義如何顯示 HTML 元素
-
樣式通常儲存在樣式表中
-
把樣式新增到 HTML 4.0 中，是為了解決內容與表現分離的問題
-
外部樣式表
可以極大提高工作效率 -
外部樣式表通常儲存在 CSS 檔案中
-
多個樣式定義可層疊為一
-
樣式對網頁中元素位置的排版進行畫素級精確控制
2.1 css的優勢
樣式表定義如何顯示 HTML 元素
樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字型標籤和顏色屬性所起的作用那樣。樣式通常儲存在外部的 .css 檔案中。通過僅僅編輯一個簡單的 CSS 文件，外部樣式表使你有能力同時改變站點中所有頁面的佈局和外觀。
| 1 2 3 4 5 6 7 8 9 |
網頁的表現統一，容易修改
|
2.2 如何使用CSS？
我們通常會把樣式規則的內容都儲存在CSS檔案中，此時該CSS檔案被稱為外部樣式表，然後在HTML檔案中通過link標籤引用該CSS檔案即可。這樣瀏覽器在解析到該link標籤的時候就會載入該CSS檔案，並按照該檔案中的樣式規則渲染HTML檔案。
2.3樣式解決了一個很大的問題
HTML 標籤原本被設計為用於定義文件內容，如下例項：
| 1 2 3 |
|
樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字型標籤和顏色屬性所起的作用那樣。樣式通常儲存在外部的 .css 檔案中。通過僅僅編輯一個簡單的 CSS 文件，外部樣式表使你有能力同時改變站點中所有頁面的佈局和外觀。
為了解決這個問題，全球資訊網聯盟（W3C），這個非營利的標準化聯盟，肩負起了 HTML 標準化的使命，並在 HTML 4.0 之外創造出樣式（Style）。
當代瀏覽器都支援 CSS .
2.4 樣式層疊次序
當同一個 HTML 元素定義了多個樣式時，應該使用哪個樣式？
一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
| 1 2 3 4 5 6 7 |
|
因此，內聯樣式（在 HTML 元素內部）擁有最高的優先權，這意味著它將優先於以下的樣式宣告：<head> 標籤中的樣式宣告，外部樣式表中的樣式宣告，或者瀏覽器中的樣式宣告（預設值）。
三，CSS概念
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，是一種用來表現HTML（標準通用標記語言的一個應用）或者XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化，用來控制網頁資料的表現，可以使網頁的表現與資料內容分離。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
四，CSS發展歷程
1990年，Tim Berners-Lee和Robert Cailliau共同發明了Web。1994年，Web真正走出實驗室。
從HTML被髮明開始，樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為使用者提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。
隨著HTML的成長，為了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。於是CSS便誕生了。
1994年哈坤·利提出了CSS的最初建議。而當時伯特·波斯（Bert Bos）正在設計一個名為Argo的瀏覽器，於是他們決定一起設計CSS。
其實當時在網際網路界已經有過一些統一樣式表語言的建議了，但CSS是第一個含有“層疊”豐意的樣式表語言。在CSS中，一個檔案的樣式可以從其他的樣式表中繼承。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承或“層疊”作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合每個人的愛好。
哈坤於1994年在芝加哥的一次會議上第一次提出了CSS的建議，1995年的www網路會議上CSS又一次被提出，博斯演示了Argo瀏覽器支援CSS的例子，哈肯也展示了支援CSS的Arena瀏覽器。
同年，W3C組織（World WideWeb Consortium）成立，CSS的創作成員全部成為了W3C的工作小組並且全力以赴負責研發CSS標準，層疊樣式表的開發終於走上正軌。有越來越多的成員參與其中，例如微軟公司的托馬斯·萊爾頓(Thomas Reaxdon)，他的努力最終令Internet Explorer瀏覽器支援CSS標準。哈坤、波斯和其他一些人是這個專案的主要技術負責人。1996年底，CSS初稿已經完成，同年12月，層疊樣式表的第一份正式標準（Cascading style Sheets Level 1）完成，成為w3c的推薦標準。
1997年初，W3C組織負責CSS的工作組開始討論第一版中沒有涉及到的問題。其討論結果組成了1998年5月出版的CSS規範第二版。
五，CSS工作原理
CSS是一種定義樣式結構如字型、顏色、位置等的語言，被用於描述網頁上的資訊格式化和現實的方式。CSS樣式可以直接儲存於HTML網頁或者單獨的樣式單檔案。無論哪一種方式，樣式單包含將樣式應用到指定型別的元素的規則。外部使用時，樣式單規則被放置在一個帶有副檔名_css的外部樣式單文件中。
樣式規則是可應用於網頁中元素，如文字段落或連結的格式化指令。樣式規則由一個或多個樣式屬性及其值組成。內部樣式單直接放在網頁中，外部樣式單儲存在獨立的文件中，網頁通過一個特殊標籤連結外部樣式單。
名稱CSS中的“層疊（cascading）”表示樣式單規則應用於HTML文件元素的方式。具體地說，CSS樣式單中的樣式形成一個層次結構，更具體的樣式覆蓋通用樣式。樣式規則的優先順序由CSS根據這個層次結構決定，從而實現級聯效果。
六，CSS語言特點
6.1 豐富的樣式定義
CSS提供了豐富的文件樣式外觀，以及設定文字和背景屬性的能力；允許為任何元素建立邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內容間的距離；允許隨意改變文字的大小寫方式、修飾方式以及其他頁面效果。
6.2 易於使用和修改
CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文件的header部分，也可以將樣式宣告在一個專門的CSS檔案中，以供HTML頁面引用。總之，CSS樣式表可以將所有的樣式宣告統一存放，進行統一管理。
另外，可以將相同樣式的元素進行歸類，使用同一個樣式進行定義，也可以將某個樣式應用到所有同名的HTML標籤中，也可以將一個CSS樣式指定到某個頁面元素中。如果要修改樣式，我們只需要在樣式列表中找到相應的樣式宣告進行修改。
6.3 多頁面應用
CSS樣式表可以單獨存放在一個CSS檔案中，這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬於任何頁面檔案，在任何頁面檔案中都可以將其引用。這樣就可以實現多個頁面風格的統一。
6.4 層疊
簡單的說，層疊就是對一個元素多次設定同一個樣式，這將使用最後一次設定的屬性值。例如對一個站點中的多個頁面使用了同一套CSS樣式表，而某些頁面中的某些元素想使用其他樣式，就可以針對這些樣式單獨定義一個樣式表應用到頁面中。這些後來定義的樣式將對前面的樣式設定進行重寫，在瀏覽器中看到的將是最後面設定的樣式效果。
6.5 頁面壓縮
在使用HTML定義頁面效果的網站中，往往需要大量或重複的表格和font元素形成各種規格的文字樣式，這樣做的後果就是會產生大量的HTML標籤，從而使頁面檔案的大小增加。而將樣式的宣告單獨放到CSS樣式表中，可以大大的減小頁面的體積，這樣在載入頁面時使用的時間也會大大的減少。另外，CSS樣式表的複用更大程式的縮減了頁面的體積，減少下載的時間。
七，CSS基礎語法分類
css語法可以分為兩部分：
- 1，選擇器
- 2，宣告
宣告由屬性和值組成，多個宣告之間用分號分隔。
八，CSS註釋
| 1 |
|
九，css和html的區別
CSS和HTML都是前端技術的核心語言，那麼這兩者分別是幹什麼的？又有什麼區別呢？
9.1 html（結構）
全稱Hyper Text Markup Language（超文字標記語言），該語言是用於定義文件內容結構
功能：
1.該語言寫的程式碼通常會被瀏覽器解析執行
2.超文字：不止包括文字，還有圖片、連結、音樂...
3.一個頁面就是一篇文件，而一篇文件最核心的就是內容，不同含義
註釋格式：<!--註釋內容-->
9.2 css（佈局）
全稱Cascading Style Sheets （層疊樣式表）
功能：
1.用於定義html文件的樣式（外觀）
2.頁面表現的基礎，可以控制佈局，控制元素的渲染
註釋格式：/*註釋內容*/
總的來說就是一句話：html是網頁的結構，CSS是網頁的樣式。打個比方，如果把整個網頁比喻成一個人，那麼HTML就是骨頭，CSS就是衣服。
十，當你已經學習了css，下一步學習什麼呢？
下一步應該學習 JavaScript 。
10.1 JavaScript
| 1 2 3 4 5 |
|
許多 HTML 開發者都不是程式設計師，但是 JavaScript 卻擁有非常簡單的語法。幾乎每個人都有能力將小的 JavaScript 片段新增到網頁中。
如果希望瞭解更多的javascript，怎麼請參考下面部落格