關於 CSS
在 Web 中 HTML 屬於網頁的結構,其中有 h1~6、p、a ...等等的語法,而 CSS 它是屬於樣式,就是幫 HTML 結構做一些樣式的變化,像是文字大小、顏色、排版等等功用,來美化整個網頁。
如何設定 CSS 樣式
首先我們需要 HTML 結構,這邊先寫個簡單的 HTML,然後套用 CSS 來做樣式變化,以下範例是網頁上寫一個 h1 的結構標題,在標題文字上把顏色變成藍色,字體大小改成 40px 大小。
如何套用 CSS 樣式,我們要先建立一個 CSS 檔案,下面範例的 CSS 檔案是 style.css,接下來是幫 index.html 載入 style.ccs
語法設定:
要在 < head > 裡面寫入這一行, < link rel="stylesheet" href="style.css" >
< link > 是載入一個連結, rel="stylesheet" 是載入主要針對的樣式, href="style.css" 是載入檔案的位置
這樣就能套用 CSS 樣式了。
HTML: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CSS 常用語法</title>
</head>
<body>
<h1>標題</h1>
</body>
</html>
CSS: style.css
// style.css <-- CSS 檔
h1 {
color: blue;
font-size: 40px;
}
畫面:
CSS 寫法詳解
這裡我們直接用程式碼做寫法講解,h1 是選擇器,color 跟 font-size 是屬性,blue 是 color 屬性設定,40px 是 font-size 屬性設定。
// CSS 寫法
h1 {
color: blue;
font-size: 40px;
}
// CSS 寫法詳解 (對照上面程式碼)
選擇器 {
屬性: 設定;
屬性: 設定;
}