2018/09/29渡課
目錄
- 一.使用CSS美化之前HTML構建的個人簡介頁面，包括表格邊框，表格單元格背景，字型，輸入框樣式等，要求在外部CSS檔案中定義樣式，並嘗試如何優化類選擇器的定義。（不能實現的樣式，參考樣式手冊檢視後測試）
- 二.使用CSS美化之前HTML構建的框架錨點文章頁面，對於標題、文字內容等進行文字樣式的美化。
- 三.問題
一.使用CSS美化之前HTML構建的個人簡介頁面，包括表格邊框，表格單元格背景，字型，輸入框樣式等，要求在外部CSS檔案中定義樣式，並嘗試如何優化類選擇器的定義。（不能實現的樣式，參考樣式手冊檢視後測試）
.biaotou{
font-size: 20px;
font-weight: bold;
background-color: gray;
}
.xiaobiaotou{
font-size: 18px;
background-color: LightGray;
font-weight: bold;
}
input{
background-color: yellow;
border: 2px solid green;
}
二.使用CSS美化之前HTML構建的框架錨點文章頁面，對於標題、文字內容等進行文字樣式的美化。
<style type="text/css"> h1{ text-align: center; } a{ text-decoration: none; color: black; } li{ font-size: 20px; font-weight: bold;; } </style>
三.問題
a.CSS的版本進化歷史？
CSS歷史:
從1990年代初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+DIV的優點
採用CSS+DIV進行網頁重構相對與傳統的TABLE網頁佈局而具有以下3個顯著優勢：
1：表現和內容相分離
將設計部分剝離出來放在一個獨立樣式檔案中，HTML檔案中只存放文字資訊。這樣的頁面對搜尋引擎更加友好。
2：提高頁面瀏覽速度
對於同一個頁面視覺效果，採用CSS+DIV重構的頁面容量要比TABLE編碼的頁面檔案容量小得多，前者一般只有後者的1/2大小。瀏覽器就不用去編譯大量冗長的標籤。
3：易於維護和改版
你只要簡單的修改幾個CSS檔案就可以重新設計整個網站的頁面。
具體說明請見百度知道CSS發展史.
CSS2
樣式單自從CSS1的版本之後，又在1998年5月釋出了CSS2版本，樣式單得到了更多的充實。
CSS2.0是一套全新的樣式表結構，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一樣，CSS2.0推薦的是一套內容和表現效果分離的方式，HTML元素可以通過CSS2.0的樣式控制顯示效果，可完全不使用以往HTML中的table和td來定位表單的外觀和樣式，只需使用div和 Li此類HTML標籤來分割元素，之後即可通過CSS2.0樣式來定義表單介面的外觀。
CSS2.0提供給我們了一個機制，讓程式設計師開發時可以不考慮顯示和介面就可以製作表單和介面，顯示問題可由美工或是程式設計師後期再來編寫相應的 CSS2.0樣式來解決。不過由於CSS2.0目前尚未見過很好的編輯軟體，所以無法做到所見即所得，編寫起來不易。
CSS3
CSS3語言開發是朝著模組化發展的。 以前的規範作為一個模組實在是太龐大而且比較複雜，所以，把它分解為一些小的模組，更多新的模組也被加入進來。這些模組包括：
盒子模型
列表模組
超連結方式
語言模組
背景和邊框
文字特效
多欄佈局
CSS3選擇器
CSS3增加了更多的CSS選擇器，可以實現更簡單但是更強大的功能，比如:nth-child()等。
時間表
幾個模組現已完成，包括的SVG （可擴充套件向量圖形） ，媒介資源型別（Media Queries）和命名，而其他的模組開發工作則仍在進行中。如果要給出一個預定的日期的話，非常困難，不管怎樣，web瀏覽器將全面支援CSS3的各種新特點，一些新的探索已經開始了。針對不同瀏覽器，新的功能是逐漸應用的，仍然需要1-2年的時間，每一個新的模組才有可能被廣泛應用。
CSS3將給我帶來哪些新的影響
首先，我們希望，這是個正確的方式，CSS3將完全向後相容，所以沒有必要修改現在的設計來讓它們繼續運作。網路瀏覽器也還將繼續支援CSS2。對我們來說，CSS3主要的影響是將可以使用新的可用的選擇器和屬性，這些會允許你實現新的設計效果（譬如動態和漸變），而且可以很簡單的設計出現在的設計效果（比如說使用分欄）
b.CSS有哪些選擇器，其定義語法分別是什麼？
- 派生選擇器：派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式。通過合理地使用派生選擇器，我們可以使 HTML 程式碼變得更加整潔。
大標籤 小標籤{
樣式
}
- id 選擇器：id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 “#” 來定義。
#id{
樣式
}
- 類選擇器：在 CSS 中，類選擇器以一個點號顯示。
.class{
樣式
}
- 屬性選擇器：對帶有指定屬性的 HTML 元素設定樣式。可以為擁有指定屬性的 HTML 元素設定樣式，而不僅限於 class 和 id 屬性。
[屬性]
{
樣式
}