張家港中等專業學校
設為首頁 | 加入收藏 | 網站地圖
 學校首頁 | 學校介紹 | 新聞中心 | 教學管理 | 黨建工作 | 師生園地 | 教學部門 | 招生就業 | 專題網站 | 對外交流 
師生園地
 名師風采 
 課堂内外 
 班級網站 
 心理健康 
 優秀學子 
當前位置: 學校首頁>>師生園地>>課堂内外>>計算機世界>>正文
教你學用樣式表!
2004-02-19 10:23佚名   (閱讀次數:)
如何将CSS 加諸于網頁 您可以利用下列 3 種方式,将 CSS 指定的格調加諸于網頁上: 1. 在 HTML 檔案裡加一個超連結,連到外在的 CSS 檔 這個方法最方便管理整個網站的網頁風貌。它讓網頁的文字内容與版面設計分開。您隻要在一個 CSS 檔内(副檔名為 .CSS)定義好網頁的外觀風格,所有參考連結到此 CSS 檔的網頁,便會依照指示,反應出定義好的風格。 它的寫法是: < html>< head>< title> 本頁标題 < /title>< link rel="stylesheet" href="http://www.xyz.com/xyz.css" type="text/css">< /head> 此種方法 Navigator4 支援得仍十分 Buggy,請小心使用。 2. 在 HTML 檔案的 < head>.......< /head> 标簽間,加一段 CSS 的叙述文 這個方法适用于指定某個網頁,除了展現外在的 CSS 檔定義好的網頁風格外,同時還要展現本身 HTML 檔内加注的 CSS 。 如果内在加注的 CSS 叙述與外在連結的 CSS 叙述相沖突的話,網頁的展現将以内在加注的 CSS 叙述為主。 它的寫法是: < html>< head>< title> 本頁标題 < /title>< style type="text/css">< !-- body {font: 12pt} h1 {font: 16pt} p {font-weight: bold; color: green} -->< /style>< /head>< body> 開始本頁内容… < /body>< /html> 特别值得注意的是,為了防止不支援 CSS 的浏覽器誤将 标簽間的 CSS 風格叙述當成普通字串,而展現于網頁上,您最好将 CSS 的叙述文字插入 标簽之間。 3. 在 HTML 檔的字裡行間中,随時有需要,随時加一小段 CSS 的叙述指定 這個方法适用于指定網頁内的某一小段文字的呈現風格。 導覽器除了會展現出外在的 CSS 檔與此 HTML 檔 内定義的 CSS 風格(如果有的話),同時還會展現字裡行間的 CSS 風格。 如果字裡行間的 CSS 叙述與 内在定義的 CSS 或外在連結的 CSS 叙述相沖突的話,導覽器的展現将以字裡行間的 CSS 叙述為主。 它的寫法是: < html>< head>< title> 本頁标題 < /title>< /head>< body>< p style="color: red"> 開始本頁内容… < /p>< /body>< /html> 上述的 3 種 CSS,可以同時并用,也可以擇您所好,單一或成雙地使用。如果各 CSS 間的叙述相沖突,則内在定義的 CSS 會蓋過外在連結的 CSS ,字裡行間的 CSS 會蓋過 内在定義的 CSS 。 如何對多個頁面統一修改 最好的辦法是使用一個外聯的樣式表文件。 即把網頁中所有的樣式都定義在一個CSS文件中,然後在 ...中用: 的方法連接這個樣式文件, 以後隻需要修改這個文件裡面的樣式,就可以改變整個站點的風格了。 另外Dreamweaver2中在站點管理畫面,可以使用替換功能,把站點或着 目錄下面的全部文件中的某一個段文字替換成另外一段文字的。 CSS技術在網頁設計中的運用 多層模式表單(Cascading Style Sheet, CSS)是一種為超文本置标語言(HyperText Markup Language, HTML)提供增強補充服務的技術,可對每一個HTML的置标(tag)做精雕細刻的修飾。隻用HTML制作的網頁,對頁面内各部分的修飾能力有限且語句煩鎖,CSS正是彌補這一缺陷的有力技術,它語句、文法簡單,隻要在源碼中插入STYLE語句就可輕易實現頁面内任意文本顔色、背景、邊框、行距、字距的添删和修飾等功能,使網頁更加生動活潑,從而獲得滿意的效果。 ---- CSS在HTML中以STYLE标識出現,其格式為:一對代表CSS 技術的STYLE置标,内放被修飾的HTML置标,置标的CSS屬性放于緊随其後的一對大括号内,每個屬性賦值用":",多個屬性之間用";"隔開,例: < style> a{text-decoration:none; color:yellow} a:hover{text-decoration:underline; color:urple} p{font-size:20; background:red; color:blue} < /style> ---- 将如上代碼插入任一HTML文檔後,刷新顯示,則所有錨點變為普通字體,顔色為黃,但當鼠标移至其上時,則錨點的提示字符變為帶下劃線的紫色字體;整個文檔中被置标P包圍的文字将以紅底藍字、字體大小為20個象素的形式出現。如果其中某段文字需另加修飾,可以單獨的的形式出現,例如 < p style="font-size:30;font-weight:bolder;background:white;color:blue"> ................ < /p> ---- 則此段文字白底藍字,30個象素大小,且字體加粗。随後是一個帶有CSS技術的HTML文檔的完整例子: < html>< head>< title> 如何使用CSS < /title>< /head>< body>< style> a{text-decoration:none; background:red; color:yellow} a:hover{text-decoration:line-through; background:lime} h1{text-align:center; font-weight:900; border-style:ridge; border-width:medium; border-color:red} p.first{font-size:15; font-face:楷體; color:blue; border-style:dotted; border-width:thin; border-color:blue} p.second{font-size:20; word-spacing:10; background:aqua} < /style>< h1> 帶連框的題頭1 < /h1>< a href="mailto:wow20000@hotmail.com?subject=CSS"> 鼠标移至此處, 背景變化 < /a>< p> 未加CSS修飾的段落 < /p>< p class="first"> 指定CSS修飾的段落 < /p>< p class="second"> 指定另一種CSS修飾的段落 < /p>< /body>< /html> ---- 從上例的顯示可以看出,CSS是HTML的一個補充,幾乎可以對每一個HTML置标進行擴充,使網頁充滿活力,顯示出更加完美的效果。 學寫層疊樣式表 層疊樣式表(CSS)是W3C組織新近批準的一個輔助HTML設計的新特性,它能夠使你保持整個HTML的統一外觀。過去當你在設置文本時,為了保持整個段落都使用相同的外觀,你不得不為每一段設置屬性,很麻煩。如果你使用了CSS,那麼你可以在設置文本之前,就指定整個文本的屬性,比如顔色、字體大小等等,這樣,你就能獲得統一的文本外觀了。   一、層疊樣式表的分類   1. 外部樣式表   外部樣式表将管理整個Web頁的外觀,當你在設計HTML時,首先要對整個外觀定義一個CSS文件(擴展名為CSS),然後通過鍊接來使用,格式如下:            XXXXXX (網頁标題)         2. 内嵌樣式表   内嵌樣式表将影響某一個頁面的外觀,使用格式如下:            XXXXXX