Dreamweaver中CSS樣式表的應(yīng)用實(shí)例-Dreamweaver教程

2024-09-12 12:30:15

字體：大中小

供稿：網(wǎng)友

　　要想做出精美的網(wǎng)頁一定要用到css。層疊樣式表 (css) 是一系列格式規(guī)則，它們控制網(wǎng)頁內(nèi)容的外觀。css 樣式使您可以控制許多僅使用 html 無法控制的屬性。css的重要性就不多說了，要說清楚css可以寫成一本大書。本文的目的，是想通過一篇文章，把握css最基本最重要的應(yīng)用。

　　第一部分:要實(shí)現(xiàn)的目標(biāo):把一個(gè)網(wǎng)頁的文字變成好看的12象素(px)大小。

　　實(shí)現(xiàn)方法:通過“重定義html”標(biāo)簽，定義td(td是單元格的標(biāo)簽)的字體大小為12象素(px)。因?yàn)檎麄€(gè)網(wǎng)頁內(nèi)容放在表格中的，也是放在單元格中的，所以，可能通過重定義單元格樣式，改變所有放在單元格里的內(nèi)容。當(dāng)然，重定義表格標(biāo)簽table，也可以實(shí)現(xiàn)同樣的效果。

　　簡明步驟:打開樣式面板→在類型中選擇“重定義html”標(biāo)簽→選擇要重定義的標(biāo)簽，例如td→給所選標(biāo)簽(例如td)定義css→一個(gè)定義了標(biāo)簽的網(wǎng)頁就做好了。

　　1.打開一個(gè)網(wǎng)頁文檔。

　　2.打開樣式面板。

　　3.點(diǎn)擊“新建css樣式“按鈕。

　　4.在“類型”中，選擇“重定義html”標(biāo)簽。

　　5.選擇td標(biāo)簽。td標(biāo)簽代表單元格。

　　6.選擇分類中的“類型”。

　　7.設(shè)置字體:選擇字體，假如沒有需要的字體，可以編輯字體列表，見第二部分。

　　大小:設(shè)置字體大小，好看的中文字大小有12象素(px)和9點(diǎn)數(shù)(pt)兩種，兩者效果差不多。

　　行高:行高是一行文字與另一行文字之間的距離，為了方便閱讀，行高設(shè)置大點(diǎn)吧。可以設(shè)置在15像素到25像素之間。實(shí)例中使用20像素。

　　修飾:對于普通文本，選擇無。對于鏈接，可以選擇下劃線，上劃線加下劃線，無等幾種。

　　顏色:黑色最適合閱讀，其次就是灰色，白色。鏈接默認(rèn)的藍(lán)色，顏色太深，假如整個(gè)頁面都是鏈接，使用藍(lán)色根本起不到分辨的作用，并且十分難看。建議頁面不要使用默認(rèn)的藍(lán)色!

　　8.按“確定”按鈕后，一個(gè)應(yīng)用了css的網(wǎng)頁就做好了。

　　第二部分:編輯字體列表。

　　1.單擊字體欄的下拉箭頭，打開編輯字體列表。

　　2.在編輯字體列表窗口中，點(diǎn)擊加號按鈕。

　　3.選擇一種字體，如宋體，按左箭頭按鈕。

　　4.繼續(xù)添加字體，選擇一種字體，如arial，按箭頭按鈕添加。

　　說明:一個(gè)字體列表中有多種字體，比如“方正，宋體，黑體，華文中宋”，訪問者電腦從最開頭的方正字體開始執(zhí)行，假如沒有對應(yīng)的方正字體，就執(zhí)行宋體，沒有宋體，就執(zhí)行黑體，假如列表中的字體都沒有，就用系統(tǒng)默認(rèn)的字體替代。

　　|||

　　5.可以重復(fù)以上的步驟，添加其它組合的字體。

　　第三部分:重定義body標(biāo)簽，使表格之外的內(nèi)容應(yīng)用樣式。假如在一個(gè)網(wǎng)頁中，在表格之外還有內(nèi)容，就需要定義body標(biāo)簽。

　　1.定義了單元格而沒有定義body的網(wǎng)頁。

　　2.選擇重定義“body”標(biāo)簽。按照第一部分的方法，定義“body”標(biāo)簽。

　　3.定義了body的網(wǎng)頁。

　　第四部分:定義表單標(biāo)簽。假如在一個(gè)網(wǎng)頁中使用表單，就需要重定義這些表單標(biāo)簽。

　　1.定義input標(biāo)簽。

　　2.定義select標(biāo)簽。

　　3.定義textarea標(biāo)簽。

　　第五部分:定義層對應(yīng)的標(biāo)簽。層對應(yīng)的標(biāo)簽是div。

　　第六部分:定義錨標(biāo)簽。也就是有關(guān)鏈接的標(biāo)簽。錨對應(yīng)的標(biāo)簽是a。

　　1默認(rèn)錨標(biāo)簽的網(wǎng)頁，鏈接有下劃線，藍(lán)色。這種鏈接很難看!

　　2.在標(biāo)簽下拉欄中選擇a。

　　3.定義a的css樣式。大小選擇12象素;修飾選擇無;顏色選擇一種深灰色，就可以和采用黑色的文本區(qū)分開來。

　　4.重定義了錨標(biāo)簽的網(wǎng)頁。

　　第七部分:修改樣式表。

　　1.在css樣式面板中，單擊“編輯樣式”單選按鈕，再點(diǎn)擊右下角的“編輯樣式表”按鈕。

　　2.對css樣式做一些修改。實(shí)例中是把顏色變得更淡。

　　3.修改了樣式的網(wǎng)頁。

　　一個(gè)網(wǎng)頁需要定義的基本樣式就定義好了，網(wǎng)頁會直接應(yīng)用上新定義的樣式。根據(jù)需要，還可以定義其它標(biāo)簽的樣式，例如定義水平條的標(biāo)簽hr的顏色。

　　在創(chuàng)建css時(shí)，可以根據(jù)個(gè)人喜好，選擇一種應(yīng)用css的方式。假如希望用相同的樣式控制多個(gè)文檔的格式，使用“外部css樣式表”是最簡單的方法。假如喜歡步驟簡單，或者只有一個(gè)頁面需要應(yīng)用某個(gè)css樣式表，那就使用“僅對該文檔的css”。

　　主要內(nèi)容:

　　1.“僅對該文檔的css”的創(chuàng)建和應(yīng)用;

　　2.“外部css樣式表”的創(chuàng)建;

　　3.鏈接“外部css樣式表”文件;

　　4.“僅對該文檔的css”轉(zhuǎn)換成“外部css樣式表”;

　　5.“外部css樣式表”轉(zhuǎn)換成“僅對該文檔的css”;|||

　　6.使用“代碼片段”功能重復(fù)使用“僅對該文檔的css”。

　　在dreamweaver中創(chuàng)建css時(shí)，可以選擇“定義在該文檔”和“新建樣式表文件”之一創(chuàng)建css樣式表。“定義在該文檔”只作用在當(dāng)前文檔;“新建樣式表文件”創(chuàng)建出一個(gè)獨(dú)立的外部css樣式表文件，多個(gè)文檔可以鏈接到外部css樣式表文件。