---
title: 2.CSS常用語法
tags: JavaScript工程師養成直播班
---
## 1.HTML CSS 簡介
HTML:結構 h1 p
CSS：樣式
## 2.插入CSS檔案 寫一個H1讓文字變色
在html內 加上 <link rel="stylesheet" href="style.css" >
快速輸入 link:css +enter
```
<link rel="stylesheet" href="style.css">
```
* rel->樣式
* href->位置
### html檔
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>標題</h1>
</body>
</html>
```
### css檔
```
h1{
color:blueviolet;
font-size: 18 px;
}
```
### 標題成功變色
```
h1{
color:blueviolet;
font-size: 18 px;
}
```
## 3---
- 記得設定值後面都要加分號
## 4---
CSS除錯 低級錯誤
* 檔案載入錯誤 路徑錯誤
* 單字拼錯
* 格式錯誤 分號
用chrome 檢查工具
* 打開檢查 於style區域查看
## 5--HTML標籤選擇器
### HTML
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>標題</h1>
<h1>我是標題</h1>
<h1>他是標題</h1>
<h1>你是標題</h1>
<p>123</p>
<p>456</p>
<p>789</p>
<p>101112</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt sequi voluptatibus eum corrupti quas? Omnis saepe numquam perspiciatis aliquam nobis laborum molestiae eligendi odit, itaque explicabo ad maxime dolore ducimus!</p>
<a href="#">連結</a>
</body>
</html>
```
### CSS格式設定
```
h1{
color:blueviolet;
font-size: 80px;
}
p{
color:crimson;
font-size: 30px;
}
a{
color:gold;
font-size: 20px;
}
```
### Lorem ipsum 亂數假文、隨機假文
測試版面的多行文字
* p 段落 輸入lorem + enter
## 6 -擬態選擇器
使用者操作網頁 游標移到字時 有互動效果
#### 滑鼠滑到文字會變色變大
常用在a標籤上
:::danger
HTML:hover
:::
hover->擬態 滑鼠到該處時的變化
```
a{
color:black;
font-size: 20px;
}
a:hover{
color:deeppink;
font-size: 50px;
}
```
----
### 滑鼠按住該處 文字會變色
```
a:active{
color:blue;
}
```
### 完整程式碼
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>標題</h1>
<p>101112</p>
<a href="#">連結</a>
</body>
</html>
```
```
h1{
color:blue;
}
h1:hover{
color:orangered;
}
a{
color:black;
font-size: 20px;
}
a:hover{
color:deeppink;
font-size: 50px;
}
a:active{
color:blue;
}
```
## 7 類別選擇器--
:::danger
標籤選擇器 固定段落都設定一樣
擬態選擇器 a:hover a:active 使用者體驗增加 互動性
類別選擇器 不同行段 可以自訂效果
:::
要自訂樣式時可以用 **類別選擇器**
客製化樣式 段落有不同樣式
自訂樣式 自己命名
```
類別選擇器
class="自己命名" (Html)
.自己命名{} (Css)
```
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>段落一</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis doloribus nostrum maiores porro placeat, rerum praesentium autem, aut sint, asperiores reiciendis expedita animi iure! Quaerat autem quae nemo totam optio.</p>
<a href="#" class="pink">連結</a>
<p class="style1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi odit maxime fugit dolor corrupti porro architecto debitis, nesciunt sint amet! Enim porro maxime tenetur itaque perspiciatis blanditiis est quidem similique!</p>
<p class="pink">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore hic optio eos doloremque aliquid? Rem accusamus debitis, quas iusto assumenda cupiditate unde ut delectus odit sint beatae quisquam! Iure, asperiores!</p>
<p class="orange">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus facilis, nulla sequi expedita distinctio voluptatum repudiandae rem, explicabo, delectus ex alias vel cum excepturi. Ducimus illum similique dolorem beatae optio.</p>
<ul>
<li>項目一</li>
<li class="orange">項目二</li>
</ul>
</body>
</html>
```
```
p{
color:blue;
}
.style1{
font-size: 20px;
}
.orange{
color:orange;
}
.pink{
color: pink;
}
```
## 8 CSS優化文字排版--
#### 文字段落的設定
- px 像素網頁 (預設是16)
- 1.5(18*1.5=27)
:::danger
font-family 設定字型
- 預設字型verdana
:::
:::danger
font-size 字體大小
- 預設16px
:::
:::danger
line-hight 行距
- 預設1.5倍
- 可寫倍數: 1/1.5/1.7/2 ect.
(如果字型設定16 行距設定1.5 寬度就是16*1.5=24 24px )
- 也可寫px :16px/18px/24px
:::
:::danger
text-align 文字靠左靠右
- 預設靠左
:::
:::danger
text-indent: 32px; 文字開頭縮排
- 如字型16 則32px呈現空2格
:::
:::danger
text-decoration: underline;文字下底線
:::
:::danger
text-decoration: line=through; 文字刪節線
:::
:::danger
letter-spacing: 2px;字與字之間距離
:::
## 9 HTML標籤上加入線條--
線條border
:::warning
線條粗細boder:1 px
線條樣式：solid/dashed/dotted
線條顏色：blue
:::
```
h1{
border:1px solid blue;
}
```
:::warning
在文字附近個別加入線條
border-top 上
border-left 左
border-right 右
border-bottom 下
:::
```
h1{
border-left:10px solid blue;
border-top: 10px solid indianred;
border-bottom: 10px solid orchid;
border-right: 10px solid purple;
}
```
### 加入圖片 圖片加上虛線
```
html程式碼
<img src="https://png.pngtree.com/png-vector/20190130/ourmid/pngtree-mbe-cartoon-cute-shiba-inu-dog-animal-material-materialshiba-inucute-dogcartoon-png-image_630667.jpg" alt="">
```
```
css程式碼
img{
border: 10px dashed orangered;
}
```
### 2.9完整程式碼
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="2.9.css">
</head>
<body>
<h1>大標題</h1>
<img src="https://png.pngtree.com/png-vector/20190130/ourmid/pngtree-mbe-cartoon-cute-shiba-inu-dog-animal-material-materialshiba-inucute-dogcartoon-png-image_630667.jpg" alt="">
</body>
</html>
```
```
h1{
border-left:10px solid blue;
border-top: 10px solid indianred;
border-bottom: 10px solid orchid;
border-right: 10px solid purple;
}
img{
border: 10px dashed orangered;
}
```
Sign in with Wallet
Connect another wallet