標籤：html css
1.簡介
層疊樣式表是一種用來表現HTML（標準通用標記語言 (SGML)的一個應用）或XML（標準通用標記語言 (SGML)的一個子集）等檔案樣式的電腦語言。
CSS目前最新版本為CSS3，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支援幾乎所有的字型字型大小樣式，擁有對網頁對象和模型樣式編輯的能力，並能夠進行初步互動設計，是目前基於文本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者最佳化寫法，針對各類人群，有較強的易讀性。
2.基礎文法
CSS 規則由兩個主要的部分構成：選取器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
每條聲明由一個屬性和一個值組成。
selector {property: value}
在下面例子中，h1 是選取器，color 和 font-size 是屬性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
3.選取器類型
a).標記選取器：選取器通常是某個 HTML 標籤，比如 p、h1、em、a，甚至可以是 html 本身。
html {color:black;}h1 {color:blue;}h2 {color:silver;}
b).類別選取器：類別選取器通常以.號開頭，在HTML檔案中通過class屬性來引用。
.important {color:red;}<h1 class="important">This heading is very important.</h1>
c).ID選取器：通常以#開頭，在HTML檔案中通過id屬性來引用，與類別選取器不同，ID選取器在文檔中只能使用一次。
#mostImportant {color:red; background:yellow;}<h1 id="mostImportant">This is important!</h1>
d).屬性選取器：通常以中括弧括起，如果希望選擇有某個屬性的元素，而不論屬性值是什麼，可以使用簡單屬性選取器。它有多種用法：
[attribute]用於選取帶有指定屬性的元素。
[attribute=value]用於選取帶有指定屬性和值的元素。
[attribute~=value]用於選取屬性值為一用空格分隔的字詞列表，其中一個等於value。
[attribute|=value]用於選取屬性值為一用連字號分隔的字詞列表，且由value開始。
[attribute^=value]匹配屬性值以指定值開頭的每個元素。
[attribute$=value]匹配屬性值以指定值結尾的每個元素。
[attribute*=value]匹配屬性值中包含指定值的每個元素。
4.css在html文檔中的使用
a).直接樣式表：由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。
<p style="color: sienna; margin-left: 20px">This is a paragraph</p>
b).內部樣式表：當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標籤在文檔頭部定義內部樣式表，就像這樣:
<head><style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}</style></head>
c).外表樣式表：當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個檔案來改變整個網站的外觀。每個頁面使用 <link> 標籤連結到樣式表。<link> 標籤在（文檔的）頭部：
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
CSS基礎文法
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
