範例檔案下載，解壓密碼demo1234
1.(常用)在網頁中加入 CSS 設定的方式：外部樣式表 (external style sheet)
外部樣式表是將 CSS 設定寫在另外一個檔案中，再從 HTML 頁面中引入，如下
<link rel="stylesheet" type="text/css" href="./css/style.css">
2.CSS 的虛擬碼
selector {
property: value;
}
意義：
Selector：該 CSS 設定的目標標籤，ex:body
Property：該 CSS 設定的特性，像是顏色、大小、位置等，ex:background-color
Value：該 CSS 設定的值，ex:blue
body {
background-color:yellow;
}
那我們將1.跟2.的重點彙整成一個圖片來說明：
檔案名稱：page01.html
檔案內容：
<!DOCTYPE html>
<html>
<head>
<title>網頁標題</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<h1>這是一級標題</h1>
<p>這是一個段落</p>
</body>
</html>
檔案名稱：style.css
檔案內容：
body {
background-color:yellow;
}
3.關於字體 (Font)的CSS範例
結果：
檔案名稱：page02.html
檔案內容：
<!DOCTYPE html>
<html>
<head>
<title>網頁標題</title>
<link rel="stylesheet" type="text/css" href="./css/page2.css">
</head>
<body>
<h1>Page Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing ...</p>
</body>
</html>
檔案名稱：page02.css
檔案內容：
h1 {
font-family: sans-serif;
text-align: center;
}
p {
font-family: serif;
font-size: large;
}
接下來，將sans-serif;與serif;交換
檔案名稱：page02_1.html
檔案內容：
<!DOCTYPE html>
<html>
<head>
<title>網頁標題</title>
<link rel="stylesheet" type="text/css" href="./css/page2_1.css">
</head>
<body>
<h1>Page Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing ...</p>
</body>
</html>
檔案名稱：page02_1.css
檔案內容：
h1 {
font-family: serif;
text-align: center;
}
p {
font-family: sans-serif;
font-size: large;
}
4.關於Box Model的CSS範例
接下來要談到Box Model。那要借用chrome的開發者工具，其設定如下
資料來源：
01.CSS 入門教學
01.CSS 入門教學
沒有留言:
張貼留言