Day8:網頁開發學習之路-div與span(一)

2022 iThome 鐵人賽

DAY 8

自我挑戰組

網頁開發（html.css）系列第 8 篇

14th鐵人賽

claireyang

2022-09-08 13:08:52

2665 瀏覽

分享至

在網頁當中很常(看)使用到標籤之一就是div，div被視為一個區塊
也是一個無預設的標籤，什麼是無預設的標籤呢??
舉例來說，<h3>就是屬於有預設的標籤，當你使用<h3>標籤文字會自動粗體、放大
而div就和一般的文字一樣

<body>
    <h3>我是一個h3</h3>
    <div>我是一個div</div>
</body>

div

div在網頁中會自動換行，適合做大範圍的排版
若要針對div做一些樣式的改變，可以在div標籤中使用style=" "為div設置樣式
文字字型(font-family)、顏色(color)、背景顏色(background-color)、外框(border)都可以調整，style可以加上1~多項條件
如果有多項條件，中間可以使用;隔開，也可使用class 或 id 屬性為div設置樣式

<body>
    <h3>我是一個h3</h3>
    <div>我是一個div</div>
    <!--外框顏色、粗細調整-->
    <div style="border: 2px blue solid">我是一個div</div>
    <!--字體大小-->
    <div style="font-size: 20px">我是一個div</div>
    <!--字體顏色-->
    <div style="color: red">我是一個div</div>
    <!--背景顏色、字體大小-->
    <div style="background-color: aquamarine; font-size: large">
      我是一個div
    </div>
 </body>

div

顏色在VSCode當中只要輸入color:或background-color:就會有很多顏色可以直接選擇
也可以輸入色號或是使用RGB來產生自己想要的顏色，色號或RGB可以參考以下網站
顏色選擇器網站
htmlcolorcodes

另外一種使用class 或 id 屬性為div設置樣式，是在div標籤裡面加上class="自己取名字"

 <div class="div1">我是一個div</div>

然後在<head>裡面加上<style>標籤，.div1(這是class的名字)，後面接{放入想在設定的樣式條件}
完整的內容如下

<head>
   <title>My First HTML web page</title>
   <style>
     .div1 {
       border: 2px blue solid;
     }
     .div2 {
       font-size: 20px;
     }
     .div3 {
       color: red;
     }

     .div4 {
       background-color: aquamarine;
       font-size: large;
     }
   </style>
 </head>
 <body>
   <h3>我是一個h3</h3>
   <div>我是一個div</div>
   <!--外框顏色、粗細調整-->
   <div class="div1">我是一個div</div>
   <!--字體大小-->
   <div class="div2">我是一個div</div>
   <!--字體顏色-->
   <div class="div3">我是一個div</div>
   <!--背景顏色、字體大小-->
   <div class="div4">我是一個div</div>
 </body>

這樣子顯示出來的效果是和前面把style加在div裡面是一樣的
只是在<head>裡面加上<style>標籤的方式，會讓你的程式碼看起來乾淨一點
寫在div裡面如果style很多，就會看起來有點阿雜....