承接我們在上一篇文章【使用HTML5+CSS3來架網站】中的基礎網頁範例,在這一篇文章中,針對初學者再來示範HTML5和CSS3的分工方式--由HTML負責文字內容,而CSS3來負責調整文字的外觀。回憶一下前一篇文章的網頁輸出的樣子:

cash06

  就是一個完全沒有經過修飾的一段h1標記(用來強調是網頁標題的文字)內容,以粗體大字的方式呈現在網頁的左上角處。如果我們想要調整這個標題的話,很簡單,只要再加上一個專門用來調整每一個標記外觀的CSS3檔案即可。為了簡化起見,我們還是回到主控台的檔案管理員中,新增另外一個檔案,叫做main.css,如下所示:

htmlcss01

  然後,在main.css中,就可以針對我們的h1標記,做一些你想要做的CSS屬性設定,這些屬性的功能內容,在各大CSS的相關網頁中都可以查詢得到,我們以後再逐一加以詳述:

h1 {
	text-align: center;
	border:1px solid gray;
	font-family:微軟正黑體;
	border-radius: 5px;
	box-shadow: 2px 2px 2px gray;
	width:300px;
	background:#ccffcc;
	margin:5px auto;
}

  上述的內容,主要就是把文字排列設定為置中,然後設定外框線的型式、字型樣式、設定圓角的幅度、為整段加上陰影、寬度設定為300像素,再設定一個背景顏色以及上邊界5px並左右置中。

  但是光這樣子還沒完成,因為我們並未在HTML檔案中指定要參考這個檔案,所以,同上一篇文章的index.html檔案,但是我們要多加一行指令上去,如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>歡迎光臨</title>
</head>
<body>
<h1>這是我的第一個網頁</h1>
</body>
</html>

  在程式碼第5行的位置加上<link rel=…>這行指令,告訴瀏覽器當在顯示index.html這個檔案時,記得要去參考main.css這個檔案,那裡面會有告訴瀏覽器如何顯示網頁的相關指令。也是一樣,就這麼簡單。完成後的結果如下所示:

htmlcss02

  這樣子大家是不是就比較有概念了呢?!所有在HTML檔案中的標記內容,只要在CSS檔案中特別指出來,然後再加上一些屬性的設定,就可以讓這些標誌的內容自由地呈現出想要的樣子,甚至製作成動畫也沒問題。我們在下一篇文章就會加以介紹。

(233)

%d 位部落客按了讚: