iT邦幫忙

2023 iThome 鐵人賽

DAY 5
0

今天來介紹設定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;
}
  • 方法一--class和id
    根據是class還是id,使用.或者#當開頭,再給它命名。

接下來根據class還是id,使用class=””或是id=””的格式使用

Css的class和id差別在id有唯一性,不能重複使用,class能重複使用。

  • 方法二

直接設定全部的某元素,例如:h3背景都是綠色的。
就用h3加上{},括號中放入css就好了。
如果想讓兩個以上的某元素套用css,例如:h3、h4套用背景都是橘色的,寫h3,h4再加上{},這樣就能節省撰寫空間了。

明天沿用此程式碼繼續介紹css的語法。


上一篇
第四天--F12看網頁程式和Ctrl+F搜尋功能
下一篇
第六天--繼續介紹css
系列文
基礎前端+後端網站分享之留言板製作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言