CSS學習: 基礎

來源:互聯網
上載者:User
CSS:Cascading Style Sheet 層疊樣式表, 簡稱樣式表
樣式就是對網頁中的元素屬性的整體概括.
層疊就是當HTML應用多個CSS檔案時, 如果CSS檔案之間所定義的樣式發生了衝突, 將依據層次的先後來處理其樣式對內容的控制.

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>
<p class=blue>

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內來使用.
不經常用到.

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。