-
div+css視頻教程之創建CSS
- 2015-07-27 14:24 來源:未知
創建CSS
如何插入樣式表
當讀到一個樣式表時,瀏覽器會根據它來格式化 HTML 文檔。插入樣式表的方法有三種:
外部樣式表
當樣式需要應用于很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。<link> 標簽在(文檔的)頭部:
外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標簽。樣式表應該以 .css 擴展名進行保存。下面是一個樣式表文件的例子:
內部樣式表
當單個文檔需要特殊的樣式時,就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表,就像這樣:
由于要將表現和內容混雜在一起,內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法,例如當樣式僅需要在一個元素上應用一次時。
要使用內聯樣式,你需要在相關的標簽內使用樣式(style)屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距:
如果某些屬性在不同的樣式表中被同樣的選擇器定義,那么屬性值將從更具體的樣式表中被繼承過來。
例如,外部樣式表擁有針對 h3 選擇器的三個屬性:
如何插入樣式表
當讀到一個樣式表時,瀏覽器會根據它來格式化 HTML 文檔。插入樣式表的方法有三種:
外部樣式表
當樣式需要應用于很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。<link> 標簽在(文檔的)頭部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
瀏覽器會從文件 mystyle.css 中讀到樣式聲明,并根據它來格式文檔。<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標簽。樣式表應該以 .css 擴展名進行保存。下面是一個樣式表文件的例子:
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
不要在屬性值與單位之間留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ,它僅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
內部樣式表
當單個文檔需要特殊的樣式時,就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表,就像這樣:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
內聯樣式<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
由于要將表現和內容混雜在一起,內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法,例如當樣式僅需要在一個元素上應用一次時。
要使用內聯樣式,你需要在相關的標簽內使用樣式(style)屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
多重樣式This is a paragraph
</p>
如果某些屬性在不同的樣式表中被同樣的選擇器定義,那么屬性值將從更具體的樣式表中被繼承過來。
例如,外部樣式表擁有針對 h3 選擇器的三個屬性:
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而內部樣式表擁有針對 h3 選擇器的兩個屬性:color: red;
text-align: left;
font-size: 8pt;
}
h3 {
text-align: right;
font-size: 20pt;
}
假如擁有內部樣式表的這個頁面同時與外部樣式表鏈接,那么 h3 得到的樣式是:text-align: right;
font-size: 20pt;
}
color: red;
text-align: right;
font-size: 20pt;
即顏色屬性將被繼承于外部樣式表,而文字排列(text-alignment)和字體尺寸(font-size)會被內部樣式表中的規則取代。text-align: right;
font-size: 20pt;
最新更新
unittest的TestCase類提供的判斷方法
python基礎教程之unittest模塊(單元測試)
python基礎教程之Python的特點(優點和缺點
python基礎教程之Python是什么,Python簡介
python基礎教程之編譯型語言和解釋型語言
python基礎教程之編程語言是什么
python基礎教程之Python assert斷言函數及用法
python基礎教程之Python 文件 truncate() 方法
python基礎教程之Python 文件 write() 方法
python基礎教程之Python 文件 writelines() 方法
基于UDP的服務器端和客戶端
再談UDP和TCP
在socket編程中使用域名
網絡數據傳輸時的大小端問題
socket編程實現文件傳輸功能
如何優雅地斷開TCP連接?
圖解TCP四次握手斷開連接
詳細分析TCP數據的傳輸過程
圖解TCP數據報結構以及三次握手(非常詳
TCP協議的粘包問題(數據的無邊界性)
sql語句大全之Microsoft SQL Server 2012安裝說明
sql語句大全之隨機姓名生成方法
sql語句大全之SQL干貨筆記
access數據庫之隨說秋色園從Access升遷到
access數據庫之微信公眾平臺開發(26) ACCE
access數據庫之ACCESS TOKEN
access數據庫之當爬蟲被拒絕時(Access Deni
access數據庫之當爬蟲被拒絕時(Access Deni
access數據庫之使用PowerDesigner生成Access數據
access數據庫之讓ADO.NET Entity Framework 支持