Dreamweaver 入門(mén):使用CSS設(shè)置頁(yè)面格式(2)_Dreamweaver教程
<head>
<style>
p{
font-size:80px
}
</style>
</head>
內(nèi)聯(lián)樣式是在 HTML 文檔中的特定標(biāo)簽實(shí)例中定義的。例如,<p style="font-size: 9px"> 僅對(duì)用含有內(nèi)聯(lián)樣式的標(biāo)簽設(shè)置了格式的段落定義字體大小。
Dreamweaver 會(huì)呈現(xiàn)您所應(yīng)用的大多數(shù)樣式屬性并在"文檔"窗口中顯示它們。您也可以在瀏覽器窗口中預(yù)覽文檔以查看樣式的應(yīng)用情況。有些 CSS 樣式屬性在 Microsoft Internet Explorer、Netscape Navigator、Opera 和 Apple Safari 中呈現(xiàn)的外觀不相同。
選擇"文件">"新建"。
在"新建文檔"對(duì)話(huà)框中的"類(lèi)別"列中選擇"基本頁(yè)",在"基本頁(yè)"列中選擇"CSS",然后單擊"創(chuàng)建"。

空白樣式表將出現(xiàn)在"文檔"窗口中。"設(shè)計(jì)"視圖和"代碼"視圖按鈕已被禁用。CSS 樣式表是純文本文件,其內(nèi)容將不會(huì)用于在瀏覽器中查看。
將該頁(yè)保存("文件">"保存")為 cafe_townsend.css。
保存樣式表時(shí),請(qǐng)確保將其保存到 cafe_townsend folder 文件夾(您的 Web 站點(diǎn)的根文件夾)中。
在樣式表中鍵入以下代碼:
p{
font-family: Verdana, sans-serif;
font-size: 11px;
color: #000000;
line-height: 18px;
padding: 3px;
}
當(dāng)您鍵入代碼時(shí),Dreamweaver 將使用代碼提示為您建議一些選項(xiàng),以幫您完成輸入。當(dāng)看到希望 Dreamweaver 為您完成鍵入的代碼時(shí),請(qǐng)按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
不要忘記在每行結(jié)尾處的屬性值后面加上一個(gè)分號(hào)。
完成后的代碼類(lèi)似于下面的示例:

若要顯示該指南,請(qǐng)選擇"幫助">"參考",然后從"參考"面板的彈出式菜單中選擇"O'Reilly CSS 參考"。保存樣式表。
附加樣式表
當(dāng)您將樣式表附加到 Web 頁(yè)面中時(shí),在樣式表中定義的規(guī)則將應(yīng)用到頁(yè)面上的相應(yīng)元素。例如,當(dāng)您將 cafe_townsend.css 樣式表附加到 index.html 頁(yè)時(shí),將根據(jù)您定義的 CSS 規(guī)則設(shè)置所有段落文本(用 HTML 代碼中的標(biāo)簽設(shè)置格式的文本)的格式。
在"文檔"窗口中,打開(kāi) Cafe Townsend 的 index.html 文件。(假如該文件已打開(kāi),則請(qǐng)單擊它的選項(xiàng)卡。)
選擇在教程:向頁(yè)面添加內(nèi)容中粘貼到頁(yè)面中的第一段文本。

在"屬性"檢查器中查看,并確保使用段落標(biāo)簽設(shè)置了該段落的格式。
假如"屬性"檢查器中的"格式"彈出式菜單顯示"段落",則已使用段落標(biāo)簽設(shè)置了段落的格式。假如"屬性"檢查器中的"格式"彈出式菜單顯示"無(wú)"或其它內(nèi)容,則選擇"段落"來(lái)設(shè)置段落的格式。

對(duì)第二段重復(fù)第 3 步。
在"CSS 樣式"面板("窗口">"CSS 樣式")中,單擊位于面板右下角的"附加樣式表"按鈕。

在"附加外部樣式表"對(duì)話(huà)框中,單擊"瀏覽"并瀏覽到上一節(jié)創(chuàng)建的 cafe_townsend.css 文件。
單擊"確定"。
"文檔"窗口中的文本將根據(jù)外部樣式表中的 CSS 規(guī)則來(lái)設(shè)置格式。
- 用Dreamweaver在網(wǎng)頁(yè)中插入Flash按鈕
- 在Dreamweaver中編寫(xiě)CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁(yè)時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁(yè)的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開(kāi)發(fā)效率
- 在DreamWeaver中編寫(xiě)CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁(yè)
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- Dreamweaver 8來(lái)構(gòu)建符合標(biāo)準(zhǔn)的Web站點(diǎn)
- 用Dreamweaver 8 搞定“web標(biāo)準(zhǔn)”
- DW網(wǎng)頁(yè)設(shè)計(jì)教程-多彩文字鏈接
- Dreamweaver MX進(jìn)階教程(八) 操作框架
- Dreamweaver MX進(jìn)階教程(九)使用用于框架的“行為”
- Dreamweaver MX進(jìn)階教程(十)制作居中的網(wǎng)頁(yè)
- 去除DW MX 2004表格寬度輔助
- Dreamweaver MX進(jìn)階教程(七)創(chuàng)建基于框架的網(wǎng)頁(yè)
- Dreamweaver網(wǎng)頁(yè)制作教程:菜單概述
- Dreamweaver MX進(jìn)階教程(十一)使用“層”布局網(wǎng)頁(yè)
猜你也喜歡看這些
- Dreamweaver MX 2004中文版完全自學(xué)手冊(cè)
- DIV.CSS應(yīng)用視頻教程(DIV+CSS)
- 北風(fēng)網(wǎng)資深web講師李炎恢講師Dreamweaver系列課程(已完結(jié)|45課時(shí))陸續(xù)更新中
- Dreamweaver8中文版職業(yè)應(yīng)用視頻教程(打包下載)
- CSS設(shè)計(jì)徹底研究視頻教程
- Dreamweaver MX 2004 官方簡(jiǎn)體中文版教程
- Dreamweaver 8完美網(wǎng)頁(yè)設(shè)計(jì): 網(wǎng)頁(yè)特效篇
- Dreamweaver 8 ASP動(dòng)態(tài)網(wǎng)頁(yè)編程完全自學(xué)手冊(cè)
- 呂聰賢dreamweaver教程
- 新編Dreamweaver MX2004 中文版輕松入門(mén)視頻教程 2CD
- 相關(guān)鏈接:
復(fù)制本頁(yè)鏈接| 搜索Dreamweaver 入門(mén):使用CSS設(shè)置頁(yè)面格式(2)
- 教程說(shuō)明:
Dreamweaver教程-Dreamweaver 入門(mén):使用CSS設(shè)置頁(yè)面格式(2)
。