2.CSS常用語法

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>

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

css檔

h1{
    color:blueviolet;
    font-size: 18 px;
}

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

標題成功變色

h1{
    color:blueviolet;
    font-size: 18 px;
}

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

3–-

記得設定值後面都要加分號
Image Not Showing Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →

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;
}

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Lorem ipsum 亂數假文、隨機假文

測試版面的多行文字

p 段落輸入lorem + enter

6 -擬態選擇器

使用者操作網頁游標移到字時有互動效果

滑鼠滑到文字會變色變大

常用在a標籤上

HTML:hover

hover->擬態滑鼠到該處時的變化

a{
    color:black;
    font-size: 20px;
}
a:hover{
    color:deeppink;
    font-size: 50px;
}

Image Not Showing Possible Reasons
The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported
Learn More →

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

滑鼠按住該處文字會變色

a:active{
    color:blue;
}

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

完整程式碼

<!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 類別選擇器–

標籤選擇器固定段落都設定一樣
擬態選擇器 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)

font-family 設定字型

預設字型verdana

font-size 字體大小

預設16px

line-hight 行距

預設1.5倍
可寫倍數: 1/1.5/1.7/2 ect.
(如果字型設定16 行距設定1.5 寬度就是16*1.5=24 24px )
也可寫px :16px/18px/24px

text-align 文字靠左靠右

預設靠左

text-indent: 32px; 文字開頭縮排

如字型16 則32px呈現空2格

text-decoration: underline;文字下底線

text-decoration: line=through; 文字刪節線

letter-spacing: 2px;字與字之間距離

9 HTML標籤上加入線條–

線條border

線條粗細boder:1 px
線條樣式：solid/dashed/dotted
線條顏色：blue

h1{
    border:1px solid blue;
}

在文字附近個別加入線條
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;
}

1.HTML CSS 簡介

2.插入CSS檔案 寫一個H1讓文字變色

html檔

css檔

標題成功變色

3–-

4–-

5–HTML標籤選擇器

HTML

CSS格式設定

Lorem ipsum 亂數假文、隨機假文

6 -擬態選擇器

滑鼠滑到文字會變色變大

Image Not Showing Possible Reasons The image file may be corruptedThe server hosting the image is unavailableThe image path is incorrectThe image format is not supported Learn More →

滑鼠按住該處 文字會變色

完整程式碼

7 類別選擇器–

8 CSS優化文字排版–

文字段落的設定

9 HTML標籤上加入線條–

加入圖片 圖片加上虛線

2.9完整程式碼

Read more

3.使用CSS變更HTML標籤特性

1. VS Code網頁編輯器、HTML基礎教學

Javascript學習

2. let const var 介紹

2.插入CSS檔案寫一個H1讓文字變色

Image Not Showing Possible Reasons
The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported
Learn More →

滑鼠按住該處文字會變色

加入圖片圖片加上虛線