CSS 外部樣式表(External style sheet)
CSS樣式可獨立設定副檔名為css的檔案，然後在HTML文件使用<link>來參照
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01</title>
<link rel="stylesheet" href="stytle.css">
<!-- 連結CSS外部樣式表，檔名為stytle.css。通常link標籤放至於<head>中，<title>後 -->
</head>
外部樣式表檔名可以任意命名以副檔名css結尾的名稱
*{
margin: 0;
padding: 0;
}
/* 以上為重置CSS */
h1{
color: gray;
font-size: 60px;
}
nav{
background-color: #000;
text-align: center; /* 文本水平對齊方式*/
font-size: 0; /* 文字大小*/
}
nav a{
color: white;
display: inline-block; /* 簡單來說為排列方式以inline的方式呈現,但擁有block的屬性,可以設定寬高,上下外距等屬性
如 <img>等... */
text-decoration: none; /* 文字底線 */
background-color: red;
font-size: 6px;
padding: 6px 20px;
transition: 0.5s;
}
nav a:hover{
background-color: #fa0;
}
/* 以上為滑鼠移至連結的動作 */
p{
color: #999;
margin-bottom: 30px;
}