一.在學習css之前你應該掌握哪些基礎知識
1.什麼是網頁,什麼是超文字語言(html)。
2.會使用Dreamweaver等常用的網頁編輯器。
Dreamweaver是現今最好的網站編輯工具之一,而Dreamweaver8增加的對CSS的支援更是你容易得來使用CSS,用它來給製作網頁的CSS樣式表會更簡單、更方便。本教程教你如何利用Dreamweaver8在頁面中加入CSS,你不用死記硬背的記程式碼標記,也不用去看很厚的CSS手冊,你就可以輕鬆自如的在網頁中運用CSS。不過首先你要對CSS有一定的瞭解。因此,本教程的前面4章為CSS理論知識,主要是對CSS的全面介紹,希望讀者看後對CSS的語法、結構、應用有一個全面的瞭解;後面4章為DW實戰,主要是教你如何利用Dreamweaver8靈活運用CSS在網頁中。閱讀此文前,你需要對HTML有一定的瞭解,並會使用Dreamweaver。
二.認識CSS
CSS就是Cascading StyleSheets,中文翻譯為“層疊樣式表”,簡稱樣式表,它是一種製作網頁的新技術。
網頁設計最初是用HTML標記來定義頁面文件及格式,例如標題<h1>、段落<p>、表格<table>、連結<a>等,但這些標記不能滿足更多的文件樣式需求,為了解決這個問題,在1997年W3C(TheWorld Wide WebConsortium)頒佈HTML4標準的同時也公佈了有關樣式表的第一個標準CSS1,自CSS1的版本之後,又在1998年5月釋出了CSS2版本,樣式表得到了更多的充實。W3C把DHTML(DynamicHTML)分為三個部分來實現:指令碼語言(包括JavaScript、Vbscript等)、支援動態效果的瀏覽器(包括InternetExplorer、Netscape Navigator等)和CSS樣式表。
注意:CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape4.0)以上的瀏覽器支援,有些效果需要更高版本的瀏覽器支援。
三.怎樣使用CSS
如果你使用的是Dreamweaver MX2004以上的版本,在定義文字字型、顏色、大小等屬性的時候,檢視一下程式碼你會發現有這樣的一部分在head區域:
<style type="text/css">
<!--
E2 {
font-size: 16pt;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
color: #FF3300;
}
-->
</style>
那麼恭喜你,你已經使用了CSS設計網頁。
那麼除了這種呼叫CSS的方法外,還有別的嗎?回答是“當然有了”,下面是系統介紹
標記加註法(in-line):
如果只有一個HTML標記需要設定樣式,則可在該標記內,加上屬性
style=" "
以個別修訂樣式。
頁面內嵌法:
<style type="text/css"> <!-- body { background : white; color : black ; } --> </style>
外部呼叫法:
<link rel="stylesheet" rev="stylesheet" href="css/"type="text/css" media="all" />
<link rel="stylesheet" rev="stylesheet" href="css/"type="text/css" media="all" />
雙表法呼叫樣式表:
<link rel="stylesheet" rev="stylesheet" href="css/"type="text/css" media="all" />
<style type="text/css" media="all">@import url(css/ );</style>
1. 基本語法
CSS的定義是由三個部分構成:選擇符(selector),屬性(properties)和屬性的取值(value)。
基本格式如下:
selector {property: value}
(選擇符 {屬性:值})
選擇符是可以是多種形式,一般是你要定義樣式的HTML標記,例如BODY、P、TABLE……,你可以通過此方法定義它的屬性和值,屬性和值要用冒號隔開:
body {color: black}
選擇符body是指頁面主體部分,color是控制文字顏色的屬性,black是顏色的值,此例的效果是使頁面中的文字為黑色。
如果屬性的值是多個單片語成,必須在值上加引號,比如字型的名稱經常是幾個單詞的組合:
p {font-family: "sans serif"}
(定義段落字型為sans serif)
如果需要對一個選擇符指定多個屬性時,我們使用分號將所有的屬性和值分開:
p {text-align: center; color: red}
(段落居中排列;並且段落中的文字為紅色)
為了使你定義的樣式表方便閱讀,你可以採用分行的書寫格式:
p
{
text-align: center;
color: black;
font-family: arial
}
(段落排列居中,段落中文字為黑色,字型是arial)
2. 選擇符組
你可以把相同屬性和值的選擇符組合起來書寫,用逗號將選擇符分開,這樣可以減少樣式重複定義:
h1, h2, h3, h4, h5, h6 { color: green }
(這個組裡包括所有的標題元素,每個標題元素的文字都為綠色)
p, table{ font-size: 9pt }
(段落和表格裡的文字尺寸為9號字)
效果完全等效於:
p { font-size: 9pt }
table { font-size: 9pt }
3. 類選擇符
用類選擇符你能夠把相同的元素分類定義不同的樣式,定義類選擇符時,在自定類的名稱前面加一個點號。假如你想要兩個不同的段落,一個段落向右對齊,一個段落居中,你可以先定義兩個類: