先由程式碼來看,
HTML 的程式碼:
doc3.html
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel= "stylesheet" href="style1.css">
</head>
<body>
<h3><font color="#000099" face ="微軟整正黑體"> 標籤1 </font></h3>
<p>正文1</p>
<h3><font color="#000099" face ="微軟整正黑體"> 標籤2 </font></h3>
<p>正文2</p>
正文3
</body>
</html>
再來看使用了 css 的程式碼
doc4.html
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<style>
h3{
font-family:"微軟整正黑體";
color:#000099;
}
</style>
<link rel= "stylesheet" href="style1.css">
</head>
<body>
<h3> 標籤1 </h3>
<p>正文1</p>
<h3> 標籤2 </h3>
<p>正文2</p>
正文3
</body>
</html>
利用 css 來將該網頁的 <h3> 標籤所框選的內容直接修改,
在程式碼的情況下程式將變得更加的清晰明瞭.
下圖示以上兩個程式碼執行顯示後的樣子.
沒有留言:
張貼留言