CSS3學習第一步
CSS引用
一般來說,使用link來引用css樣式:
<!DOCTYPE html>
<html lang="en">
<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>CSS3學習第一步</title>
<link rel="stylesheet" href="./css/a.css" type="text/css">
</head>
<body>
<h1>CSS3學習第一步</h1>
</body>
</html>
a.css
body{
background: red;
}
也可以使用內聯樣式和行內樣式,不過不推薦使用:
<!DOCTYPE html>
<html lang="en">
<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>CSS3學習第一步</title>
<link rel="stylesheet" href="./css/a.css" type="text/css">
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1 style="font-size: 10px">CSS3學習第一步</h1>
</body>
</html>
內樣樣式和行內樣式會使用html的代碼變得臃腫,後期維護變得困難.
@import
當有多個樣式有關聯時,可以使用@import進行樣式的導入:
@import url(./a1.css);
body{
background: red;
}
a1.css
h1 {
color: blue;
font-size: 10px;
}
vscode添加sass
下載easy sass插件,新建a2.scss,然後保存:
h1 {
color: white;
font-size: 10px;
}
這裏生成了兩個文件a2.css,a2.min.css:
h1 {
color: white;
font-size: 10px;
}
h1{color:white;font-size:10px}
可以看到,a2.min.css裏面講所用的空格和換行都去掉了.這是因爲,在加載css時候,css裏面的空格也會因爲加載時的帶寬.weebpack,gulp也是這裏操作的.
vscode同步瀏覽器刷新
下載live server插件,然後在右鍵菜單中選擇open with live server這個相當於在vscode中開了一個小服務器,在保存的時候直接刷新,可以看到瀏覽器中新窗口中地址爲127.0.0.1:5000.這樣就不用每次保存再去刷新網頁.
