第五天--設定Css

2023 iThome 鐵人賽

DAY 5

自我挑戰組

基礎前端+後端網站分享之留言板製作系列第 5 篇

15th鐵人賽

aliecele

2023-09-19 08:59:26

238 瀏覽

分享至

今天來介紹設定Css。

Css是什麼呢?
Css能讓我們用來設置HTML的樣式，描述HTML該如何顯示。

Css如何知道那些html要設定樣式呢?
Class和id就是方法之一。

example.html程式碼

 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/example.css">
    <title>範例</title>
</head>

<body>
    <h1 class="red">Hello World(class)</h1>
    <h1 id="id_red">Hello World(id)</h1>
    <h1 class="red">class能重複使用</h1>
    <h3>h3的字都是綠色</h3>
    <h3>我也是h3的字(綠色)</h3>
    <h4>我是h4的字(橘色)</h4>
    <h5>我是h5的字(橘色)</h5>

    <p class="font_size">font size</p>
    <p>font size</p>
    <div class="ex">300px的寬和依照文本量的高，F12(或按右鍵的檢查)能看更詳細的數值</div>
</body>

</html>

example.css程式碼



.red{
    background-color:red;
}
#id_red{
  background-color:blue;
}
h3{
  background-color:green;
}
h4,h5{
  background-color:orange;
}

.font_size {
  font-size: 40px;
}

.ex {
  background-color: orange;
  width: 200px;
  border: 15px solid blue;
  padding: 50px;
  margin: 30px;
}