18CSS選擇器-將網頁裝潢設定在HTML標籤中
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>淡水商工</title>
<style>
body {
font-family: 微軟正黑體; /* 字型 */
background-image: url(brown.jpg); /* 背景圖 檔名 */
background-repeat:no-repeat; /* 背景圖不重複 */
background-size: 600px 800px; /* 背景圖寛高。若值為contain會設定維持長寬比,並顯示完整影像;若值為cover會設定圖等比例放大,以填滿顯示區域 */
}
h1 {
color: teal; /* 文字顏色 */
text-align: center; /* 文字置中 */
font-style: italic; /* 斜體 */
line-height: 60px; /* 行高 */
text-shadow: 5px 5px 10px gray; /* 設定文字陰影的樣式,參數分別意思為 水平方向的陰影大小、垂直方向的陰影大小、 */
/* 模糊淡化程度和陰影的顏色 */
}
h2 {
background-color: white; /* 背景色 */
color: #4f0087; /* 文字顏色 */
}
</style>
</head>
<body>
<h1>我最愛的三個科</h1>
<h2>資料科</h2>
<h2>園藝科</h2>
<h2>餐飲科</h2>
</body>
[補充]
在網頁的文字內容上有時需要劃線以標示重點等等,
可以使用html的 <u> 標籤,
或是CSS的text-decoration屬性。
不過CSS的變化會比較多,
請試看看 text-decoration屬性!
CSS的text-decoration
常見的設定值有
none:無底線,為預設值。
underline:文字下的底線。
overline:文字上的線。
line-through:穿過文字的線,可以看做是刪除線。