首先,打開Adobe Dreamweaver CS6(簡稱DWCS6),我們可以在左側的“文件”欄目中選擇“新建”,然后選擇“HTML”文件。新建完成后,我們就可以開始編寫CSS樣式了。
在DWCS6中,可以直接在HTML文檔內嵌入CSS樣式表。為了更好的管理和避免代碼沖突,一般還是建議將CSS樣式單獨放在一個.CSS文件中。
在創建CSS樣式之前,我們需要在頭部區域中添加一個樣式表鏈接,指向單獨的.CSS文件,代碼如下:
<head> <link href="style.css" rel="stylesheet" type="text/css"> </head>在新建的.CSS文件中,我們可以開始添加CSS樣式,以H1標題為例,代碼如下:
p { font-size: 16px; color: #333; }解釋一下以上代碼含義:我們定義了一個p標簽選擇器,即該樣式適用于所有的p標簽,接下來另起一行,設置該標簽字體大小為16像素,顏色為#333。 當然,我們還可以定義其他樣式,如字體、背景顏色、邊框等。下面是一個CSS樣式表的例子:
h1 { font-size: 32px; color: #0066cc; text-align: center; } p { font-size: 16px; color: #333; line-height: 1.4; } .container { width: 960px; margin: 0 auto; background-color: #f2f2f2; border: 1px solid #ccc; padding: 20px; }以上CSS樣式規則示例中,我們定義了h1、p、.container三個選擇器,分別為頁面中的H1標題、段落和容器添加了不同的樣式規則。 在DWCS6中,除了手動編寫CSS樣式外,我們還可以利用預定義好的CSS樣式模板來快速創建樣式。只需在“樣式”面板中選擇“樣式模板”,然后選擇需要的模板即可。 總之,DWCS6可以快速的創建CSS樣式表,使網頁看起來更加清新、美觀。希望以上內容對您有所幫助。
上一篇dw中css樣式種類
下一篇dw中css樣式怎么弄