HackMD
HTML CSS 學習第二篇 : CSS常用語法
1. CSS選擇器
在HTML新增link可使css加入效果，在css中寫入語法，h1,p，可以使標題與段落，各自加上想要的效果，如文字變色，文字大小。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS練習</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<h1>我是標題</h1>
<p>我是段落</p>
</body>
</html>
CSS
h1{
color:red;
font-size:36px;
}
p{
color:blue;
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
2.CSS類別選擇器
在p段落中，我加上了類別選擇器(class)，可以去做命名的動作，這樣我可以分別把同是p段落的語法加上不同的改變效果。
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS練習</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<h1>我是標題</h1>
<p class="style1">我是段落</p>
<p class="style2">我是段落</p>
</body>
</html>
CSS
h1{
color: red;
font-size: 36px;
}
.style1{
color: sandybrown;
}
.style2{
color: seagreen;
}
附上程式碼與範例圖
程式碼
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
3.擬態選擇器 :hover
當我要使連結在鼠標滑動過去時，有所變化的話，我們可以使用CSS的擬態選擇器。
- :hover
- :active
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS練習</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<h1>我是標題</h1>
<a href="#">我是連結</a>
</body>
</html>
CSS
h1{
color: red;
font-size: 36px;
}
a{
color: green;
font-size: 25px;
}
a:hover{
color: pink;
font-size: 30px;
}
a:active{
color:purple;
font-size: 40px;
}
以下設定是，鼠標滑過去，會放大字型與變成粉色，當我按下該連結時，會變成紫色與字型再次放大。
附上程式碼與範例圖
程式碼
4.使用CSS優化文字排版
當我在網頁段落內容中的文字，想要去做排版的動作時，可以使用"line-height"這個語法，去做行高的設定。
常用排版語法有下列
- line-height (設定行高)
- text-align:left (靠左對齊)、right (靠右對齊)
- text-indent:32px (開頭空兩個字元)
- letter-spacing:5px; (字與字的間距)
以下只展現設定行高的設定。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS練習</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<h1>我是標題</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas itaque tenetur provident veritatis quo! Ducimus cupiditate distinctio animi veritatis ea! Repudiandae, aspernatur eveniet cumque quas corrupti assumenda expedita corporis. Vel perferendis earum totam debitis nihil, fuga recusandae quasi voluptates ab iste ratione nostrum odio consectetur doloribus alias eos sapiente nobis!</p>
</body>
</html>
CSS
h1{
color: red;
font-size: 36px;
}
p{
color: royalblue;
font-size: 20px;
line-height: 1.5;
}
附上程式碼與範例圖
程式碼
5.在HTML標籤中加入線條
有時候我們想要讓HTML的標籤中，加入線條時，我們可以這樣做，不只可以加在文字上，也可以加在圖片，或是其他HTML標籤上。
- border:solid 2px red;
這個意思是，HTML標籤四周加上，實心2px紅色的線。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS練習</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<h1>我是標題</h1>
<img src="https://www.google.com.tw/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" >
</body>
</html>
CSS
h1{
color: blue;
font-size: 36px;
border: solid 5px red;
}
img{
border-top:solid 5px red ;
border-bottom: solid 5px orange;
border-left:solid 5px yellow;
border-right:solid 5px green ;
}
附上程式碼與範例圖
程式碼
傅小羊
Sun, May 3, 2020 2:30 PM
