close
前端工程師該如何套用CSS樣式到Span區塊呢?
| 目錄 1. <Span> 與 <Div> 的異同 2. Div 與 Span 標籤概述 2-1. Div 標籤概述 2-2. Span 標籤概述 |
CSS 的 <span> 和<div> 標籤可以將 HTML 的內容分為不一樣的區域。但是<span> 與<div> 標籤的區塊特性差異在於:<span> 的區域只會佔用其容器所需要的空間 (容器有多大，就佔多少空間)，可區塊型的 <div> 標籤是不管容器內的容量有多少，都必會佔去一行空間。多個 <span> 區域是可以在同一行同時出現的， 所以 前端工程師能夠用<span>針對很細微的區域做調整，甚至可以用 <span> 來調整行內單一文字的樣式。可多個 <div> 區塊是無法在同一行同時出現，會佔用掉多行的空間 (有幾個 <div> ...</div> ，就會佔去幾行空間) 。但是有個特例,如果 DIV 標籤有套用到像是 「浮動 float」 的指令，則不再此限。
如何將 CSS 樣式套用至 <span> 區塊?
通常要讓 <span> 區塊都會加個 「class 選擇器」 或是 「id 選擇器」 來套用 CSS 樣式，其語法格式會是 「 <span class="CSS 的 class 名稱">...</div> 」 或是 「 <span id="CSS 的 id 名稱">...</div> 」。「class 選擇器」 以及 「id 選擇器」 的說明，請見此兩篇： < CSS 的 ID 選擇器宣告法>、<CSS 的 Class 選擇器宣告法>舉例來說，我們已經定義了以下的 CSS 樣式：
.span-1 {
color: blue;
font-family:微軟正黑體;
font-size: 20pt;
}
.span-2 {
color: red;
font-family:新細明體;
font-size: 16pt;
}
.block-3 {
color: green;
font-family: 標楷體;
font-size: 18pt;
}
要如何使用 <span> 來套用其 CSS 樣式，其 HTML 碼如下所示：
<body>
<span class="span-1">這裡是網頁第一個<span class="span-2">span</span>的內容</span>
<span class="span-2">這裡是網頁第二個<span class="span-1">span</span>的內容
<div class="block-3">這是在第二個span內插入的div</div>
<span class="span-2">內容</span></span>
<span class="block-3">這裡是網頁div的內容
<span class="block-1">這是在網頁div內插入的span</span>區塊</div>
</doby>
則結果如下所示(左邊為 HTML、右邊為顯示結果)：在以上的例子中，我們可以知道：
1. <span> 是屬於行內元素 (Inline Element) 的容器，所以不會像 <div> 一樣獨自占用一行，而是容器內有多少東西就佔多少空間。如以上的例子中，第一個 span 容器和第二個 span 容器中間是沒有空格或是換行的。而第二個 span 容器中間有插入一個 div 容器，雖然 div 容器是置於第二個 span 容器中，但因為 div 容器的區塊特性，還是會自動換新的一行。且這一行也不允許有其它的容器出現。
2. 被 <span> 容器包起來的區塊裡面都可以插入 <div> 、<h1> 、<p> 等容器內，且不會自動換行。
3. <span> 適合做行內樣式的微調，如只需要修改行內的一兩個字的場合，就可以使用 <span> 容器包起來並用 CSS 定義其樣式
推薦閱讀:
這個APP讓網路行銷課程添了新的里程碑!快來了解它不然變邊緣人
今天上的網路設計課程讓我大開眼界!快來看今天我學到什麼新技術!
拼湊”不存在的”假臉孔有啥了不起?現在人工智慧已經能合成貓了!
文章標籤
全站熱搜
留言列表
SEO (1)
