CSS的基本使用，CSS使用
推薦一個前端學習網站：http://www.w3school.com.cn/index.html，此文為其上CSS基礎知識的精鍊。作為一個後台開發人員，懂點基本的前端知識就夠了，其餘的就碰到了再學。
CSS簡介 CSS的全稱是Cascading Style Sheets(層疊樣式表)，CSS出現的目的是為了將html中內容與展現進行分離，通過CSS，html將更加註重內容本身。使用CSS，將允許你在全域範圍內定義展現的樣式，在使用時直接引用標記即可，好處有點類似於程式設計語言中的函數，一處定義，處處使用，通過修改定義處的CSS，可以起到修改全域樣式的作用。
基礎文法CSS的基礎文法 CSS 規則由兩個主要的部分構成：選取器，以及一條或多條聲明。 selector {declaration1; declaration2; ... declarationN } 選取器通常是您需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成。 屬性（property）是您希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。 下面這行代碼的作用是將 h1 元素內的文字顏色定義為紅色，同時將字型大小設定為 14 像素。在這個例子中，h1 是選取器，color 和 font-size 是屬性，red 和 14px 是值。
h1 {color:red; font-size:14px;} 你應該在每行只描述一個屬性，這樣可以增強樣式定義的可讀性，就像這樣：
p { text-align: center; color: black; font-family: arial; } 需要注意的，css本身對大小寫是不敏感的，但是在html中引用css的class和id時，對其的名稱是大小寫敏感的。
h1,h2,h3,h4,h5,h6 { color: green; }
body { font-family: Verdana, sans-serif;} 通過 CSS 繼承，子項目將繼承最進階元素（在本例中是 body）所擁有的屬性（這些子項目諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子項目都應該顯示 Verdana 字型，子項目的子項目也一樣。 CSS同樣也支援特殊定製。比方說，你希望段落的字型是 Times。沒問題。建立一個針對 p 的特殊規則，這樣它就會擺脫父元素的規則：
body { font-family: Verdana, sans-serif; } p { font-family: Times, "Times New Roman", serif; }
li strong { font-style: italic; font-weight: normal; }請注意標記為 <strong> 的藍色代碼的上下文關係：<p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用</strong></p><ol><li><strong>我是斜體字。這是因為 strong 元素位於 li 元素內。</strong></li><li>我是正常的字型。</li></ol>
#red {color:red;}#green {color:green;} 下面的 HTML 程式碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。
<p id="red">這個段落是紅色。</p><p id="green">這個段落是綠色。</p>除了在每個標記下使用id選取器控制樣式，id選取器還可以結合派生選取器做到進一步的精細控制。
#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;} 上面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是表格單元，儘管它也可能是一個表格或者其他區塊層級元素。它甚至可以是一個內嵌元素。 即使被標註為 sidebar 的元素只能在文檔中出現一次，這個 id 選取器作為派生選取器也可以被使用很多次：
#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}
#sidebar h2 {font-size: 1em;font-weight: normal;font-style: italic;margin: 0;line-height: 1.5;text-align: right;}
.center {text-align: center} 在上面的例子中，所有擁有 center 類的 HTML 元素均為置中。 在下面的 HTML 程式碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選取器中的規則。
<h1 class="center"> This heading will be center-aligned</h1><p class="center"> This paragraph will also be center-aligned.</p>class 也可被用作派生選取器：
.fancy td {color: #f60;background: #666;} 在上面這個例子中，類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是一個表格或者一個 div） 元素也可以基於它們的類而被選擇：
td.fancy {color: #f60;background: #666;} 在上面的例子中，類名為 fancy 的表格單元將是帶有灰色背景的橙色。
<td class="fancy">作為派生選取器和基於類選擇用法不同，派生選取器作為範圍更大，而基於類的做法必須要在每一個具體的元素下使用該類才會生效。如上例基於類做法中，即使其他表格單元被fancy所修飾表格包含，也不具有此樣式。
<p style="color: sienna; margin-left: 20px"> This is a paragraph</p>
<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style></head>
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /></head>瀏覽器會從檔案 mystyle.css 中讀到樣式聲明，並根據它來格式文檔。外部樣式表可以在任何文字編輯器中進行編輯。檔案不能包含任何的 html 標籤。樣式表應該以 .css 副檔名進行儲存。下面是一個樣式表檔案的例子：
hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}
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
