你可以先通過這個連結學習一下HTML的入門例子.
CSS入門例子樣本 -- 可以嘗試編輯
好通過上面的例子有點感覺了吧?現在開始從頭學習入門啦:)
<1>開啟記事本:點擊"開始"－－選擇"程式"－－選擇"附件"－－選擇"記事本"(或者開啟你的EditPlus編輯器)
<2>輸入下面代碼(直接拷貝過去就可以啦)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>歡迎來到夢之都</title><linkrel="stylesheet"type="text/css"href="dreamdu.css"/></head><body><h1>歡迎來到夢之都<h1><p>這是我的第一個網頁,在這裡<ahref="http://www.dreamdu.com/css/">盡情學習CSS</a>吧!</p></body></html>
點擊"檔案"－－選擇"儲存"－－選擇檔案類型為"所有檔案"－－檔案名稱輸入"dreamdu.html"並選擇檔案儲存地址.(記住一定要把檔案的尾碼存為.html或.htm,否則網頁無法顯示)
<3>再建立一個檔案,輸入下面代碼(直接拷貝過去就可以啦)
/*段落樣式*/p{color:purple;font-size:12px;}/*標題樣式*/h1{color:olive;text-decoration:underline;}/*連結樣式*/a:link{color:#006486;}a:visited{color:#464646;}a:hover{color:#fff;background:#3080CB;}a:active{color:white;background:#3080CB;}
點擊"檔案"－－選擇"儲存"－－選擇檔案類型為"所有檔案"－－檔案名稱輸入"dreamdu.css"並選擇檔案儲存地址.(記住一定要把檔案的尾碼存為.css,而且要和dreamdu.html在同一個目錄下.)
<4>現在我們可以雙擊dreamdu.html這個檔案.看看效果吧.
怎麼樣?五顏六色的吧:)
現在解釋一下上面的例子HTML檔案就是一個文字檔,HTML檔案要在head處載入css樣式<link rel="stylesheet" type="text/css" href="dreamdu.css" />.
CSS檔案也是一個文字檔.
p{color:purple;font-size:12px;}
代表p標籤所包含的內容都是以紫紅色color: purple;,12px大小font-size: 12px;的字型顯示.
h1{color:olive;text-decoration:underline;}
代表h1標籤所包含的內容都是以橄欖色color: olive;,帶底線text-decoration: underline;的字型顯示.
a:link{color:#006486;}a:visited{color:#464646;}a:hover{color:#fff;background:#3080CB;}a:active{color:white;background:#3080CB;}
代表了HTML連結的樣式,這個有點複雜了,大家可以先看看效果,進階教程中我再分析此連結樣式(夢之都就是使用的這個連結樣式:)[大家可以下載夢之都的連結樣式參考一下http://www.dreamdu.com/style.css]).
幾個問題比如使用什麼編輯器呀? 怎麼顯示副檔名等.大家可以參看HTML,XHTML入門例子
來自：http://www.dreamdu.com/css/declaration/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
