iT邦幫忙

2022 iThome 鐵人賽

DAY 8
0
自我挑戰組

網頁開發(html.css)系列 第 8

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

  • 分享至 

  • xImage
  •  

在網頁當中很常(看)使用到標籤之一就是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很多,就會看起來有點阿雜..../images/emoticon/emoticon70.gif

另外一個span也是很常看到的,和div差異是不會自動換行,比較適合做進行細部美化
至於span詳細的使用,就明天再繼續吧~


上一篇
Day7:網頁開發學習之路-表單製作(二)
下一篇
Day9:網頁開發學習之路-div與span(二)
系列文
網頁開發(html.css)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言