CSS的基本文法:
CSS文法包括三部分:選擇符, 樣式屬性, 屬性值
基本文法: selector {proterty:value; property:value...property:value}
selector:選擇符, 所有的HTML標記都可以作為選擇符, 如body, p, table等.
property: 屬性
value:屬性值
CSS選擇符類型:
1. 類選擇符: 用類選擇符可以把相同的元素分類定義成不同的樣式. 在自訂類名稱前加一個句點(.)
如:p.red{color:red}
p.blue{color:blue}
這裡的p(HTML標記)是可以省略的, 省略以後沒有適用範圍的限制. .red{color:red}
.blue{color:blue}
在HTML裡引用:
<p class=red>2. ID選擇符 在HTML文檔中, 需要唯一標識一個元素時, 就會賦予它一個id標識, 以便在對整個文檔進行處理時能夠很快地找到這個元素, 而ID選擇符就是用來對這個元素定義單獨的樣式. (只在特殊情況下使用)
文法: 標記名 #標識名{樣式屬性:取值; 樣式屬性:取值...}
#salary{color:red}
<p id="salary">
<!段落p中所有ID為salary的元素均顯示為紅色>
#salary{color:red}
<id="salary">
<!頁面中所有ID為salary的元素均顯示為紅色>
3. 包含選擇符
包含選擇符是對某種元素內含項目關聯性(如元素1裡包含元素2)定義的樣式表. 這種方式只對在元素1裡的元素2定義, 對單獨的元素1或元素2無定義.table b{font-size:11px}
<!--設定表格b內的字型大小,對錶格外的字型大小沒有影響>
4. 偽類
最廣泛的偽類是連結的4個狀態:
a:link 未連結狀態
a:visited 已訪問連結狀態
a:hover 滑鼠指標懸停在連結上的狀態
a:active 被啟用(在按一下滑鼠與釋放之間發生的事件)的連結狀態
在HTML頁面內, 使用<a>標記來標識連結元素.
插入CSS樣式表:
插入CSS樣式表到HTML檔案有4種方法: 外部式樣表, 內部式樣表, 嵌入式樣表, 匯入式樣表
按其在HTML檔案中的位置,分為: 頭部, 主體, 外部
CSS檔案定義在HTML檔案頭部的方法: 內部樣式表
CSS檔案定義在HTML檔案主體的方法: 內建樣式表
CSS檔案定義在HTML檔案外部的方法: 鏈入外部式樣表, 匯入外部式樣表
1. 鏈入外部式樣表
先把樣式表儲存為一個單獨的檔案, 然後在HTML檔案中使用<link>標記連結, 同時這個<link>標記必須放到HTML代碼的<head>地區內.<head>
<link rel="外部式樣表名稱" type="text/css" href="式樣表檔案地址">
</head>
type="text/css" 指明該檔案的類型是樣式表檔案
外部式樣表檔案內不能含有任何HTML標籤,如<head>,<style>等.
特點: 一個外部式樣表檔案可以應用於多個HTML檔案, 當改變這個樣式表檔案時, 所有網頁的樣式都隨之改變.
適用於製作大量相同樣式的網頁中.
2. 內部樣式表
通過<style>標記把樣式表的內容直接定義在HTML檔案的<head>標記內.
<head>
<style type="text/css">
<!--
選擇符{樣式屬性:取值; 樣式屬性:取值;}
選擇符{樣式屬性:取值; 樣式屬性:取值;}
-->
</style>
</head>
<style>標記用來說明所要定義的樣式
<!--與-->標記的加入是為了防止一些不支援CSS的瀏覽器, 將<style>與</style>之間的CSS代碼當成普通的字串顯示在網頁中.
選擇符, 也就是樣式的名稱, 可以選用HTML標記的所有名稱.
特點: 將所有的樣式表資訊都列於HTML檔案的頭部, 這些樣式表可以在整個HTML檔案中調用.
適用於對網頁一次性加入樣式表.
3. 內建樣式表
在HTML代碼的主體, 即<body>標記中直接加入式樣表的方法. 可以很直觀地對某個元素直接定義樣式. <head>
</head>
<body>
<HTML 標記 style="樣式屬性:取值; 樣式屬性:取值;>
</body>
HTML標記就是頁面中標記HTML元素的標記, 例如body,p等.
特點: 這樣樣式表, 效果只能控制某個標記.
適用於指定網頁中某小段文字的顯示風格或某個元素的樣式.
4. 匯入外部樣式表
在樣式表的<style>地區內引用一個外部的樣式檔案, 和鏈入外部樣式表方法相似, 但匯入時需要使用@import做聲明. @import一般放在head內來使用.
不經常用到.
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
