Java瑪奇朵-非本科系的IT吃喝電玩日誌

這一篇的工程師專欄要來和大家談談CSS中的盒子模型~ 不要錯過嘍!!
盒子模式 (box model) 是在

CSS 中一個非常重要的觀念。它是

前端工程師用來描述一個元素是怎麼樣組成的。以下圖例是盒子模式的式樣：
 

在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。 相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下：
 


目錄 1. 邊界 (margin)


邊界
就像我們在盒子模式那一頁看到的圖例，邊界 (margin) 是在邊框之外，並且是用來設定各個元素之間的距離。一個盒子有四個邊，所以前端工程師們可以對這四個邊逐一設定：

margin-top (上邊界)

margin-right (右邊界)

margin-bottom (下邊界)

margin-left (左邊界)

有三種方式可以設定邊界，分別為長度、百分比、以及 'auto'。我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼)：
See the Pen Margin by Tedutw (@Tedutw) on CodePen.
在這裡，上邊界為 50px，左邊界和右邊界為 10%，下邊界為 auto。   這樣寫會不會太麻煩一些? 會！其實定義邊界尺寸的這四行 CSS 碼，是可以濃縮成一行的！以下會介紹：  
Margin 邊界簡化 (一行文) 表示法
所有四個邊的邊界可以同時由一個 margin 屬性設定，只有一行文。它的語法如下：  
margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值]
我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼)：  
See the Pen Margin-2 by Tedutw (@Tedutw) on CodePen.
在這裡，邊界的表現跟最前面的例子一樣：上邊界為 50px，左邊界和右邊界為 10%，下邊界為 auto。   使用這種簡化的表示方法，重點在於數字的順序：第一個值是上邊界的值，第二個值是右邊界的值，第三個值是下邊界的值，而第四個值是左邊界的值。   這種簡化 CSS 的一行文標示方法，還有其他的方式，介紹如下：   margin：上 右 下 左; (四個值)   如上方例子所示   margin：上 左右 下; (三個值)  
margin: [上面邊界值] [右邊與左邊邊界值] [下面邊界值]
 
See the Pen margin：上 左右 下; (三個值) by Tedutw (@Tedutw) on CodePen.
  margin：上下 左右; (二個值)  
margin: [上面與下面邊界值] [右邊與左邊邊界值]
 
See the Pen margin：上下 左右; (二個值) by Tedutw (@Tedutw) on CodePen.
  margin：上下左右; (一個值)  
margin: [上下左右邊界值]
 
See the Pen margin：上下左右; (一個值) by Tedutw (@Tedutw) on CodePen.

身為前端工程師的你當別人講到絕對單位和相對單位時你卻是一頭霧水嗎? 如果答案是"是"的話你就一定要看這一篇!!
在 CSS ，字體單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位這是

前端工程師的基本常識~
分別介紹如下：  


目錄 1. 絕對單位 px (pixel 畫素) cm / pt / in / pc / mm large, medium, small 

 

CSS字體單位----絕對單位

   

px (pixel 畫素)

px 為 CSS 最常使用的單位。無論字體大小、區塊或其他元素的尺寸設定，都少不了它的蹤影。一般認為：px 會依據螢幕解析度而有所變化、平時被歸類為相對尺寸。但為何在 CSS 裡面就變成絕對尺寸呢？因為在 CSS 裡面，絕對尺寸的定義是「不會繼承上層父元素的設定」的尺寸。在 CSS 中，無論設定多少 px，它就會精確的呈現，他都不會繼承沿襲上一層的父元素的尺寸。如以下例子所示，就是若前端工程師使用 px 這個單位來設定大小，那麼不管頁面上其他的尺寸設定，都不會影響到他。 而 px 的定義，理論上就是：一個像素 px 意思就是螢幕上最小的一點：16 px 就是 16 點大小。 See the Pen #demo-px by Tedutw (@Tedutw) on CodePen.      

 

cm、pt、in、pc、mm

這些單位比較適用於印刷的排版軟體，在 CSS 比較少用。分別解釋如下：

1. in：英吋，在 96 dpi 的系統上 1 in = 96 px。


2. cm：公分，在 96 dpi 的系統上 1 cm = 37.795275593333 px。


3. mm：公釐，在 96 dpi 的系統上 1 mm = 3.7795275593333 px。


4. pt：印表機的每個「點」，定義為 1 pt ＝ 1/72 in，如果在 72 dpi 的系統上 1 px = 1 pt，但如果在 96 dpi 的系統上 1 px = 0.75 pt ( 72/96 = 0.75 )。


5. pc：picas，定義為 1 pc ＝ 12 pt。


6. in：英吋，在 96 dpi 的系統上 1 in = 96 px。

See the Pen #demo-cm、pt、in、pc、mm by Tedutw (@Tedutw) on CodePen.        

 

large, medium, small

  字體大小的屬性有七種如下：

1. xx-small：對應 h6 的標籤文字大小，為 medium 字體的 3/5 倍。


2. x-small：沒有對應的標籤文字大小，為 medium 字體的 3/4 倍。


3. small：對應 h5 的標籤文字大小，為 medium 字體的 8/9 倍。


4. medium：對應 h4 的標籤文字大小，，根據 W3C 的規範，以 medium 預設 16px 為基礎


5. large：對應 h3 的標籤文字大小，為 medium 字體的 6/5 倍。


6. x-large：對應 h2 的標籤文字大小，為 medium 字體的 3/2 倍。


7. xx-large：對應 h1 的標籤文字大小，為 medium 字體的 2/1 倍。

由上方看出，除了 x-small 沒有對應的標籤文字大小外，其餘六種分別對應 h6~h1 的標籤文字大小。而 medium 根據 W3C 的規範，大小為預設的 16px 為基礎 (除非另有自行設定預設字體大小，則不再此限)。所有的 large 與 small 屬性都是使用固定的倍數乘上 medium 的大小。 See the Pen #demo-large, medium, small by Tedutw (@Tedutw) on CodePen.  
 
其他閱讀

前端工程師還分不清CSS字體單位有哪些嗎? (相對篇)
HTML5教學----CSS基礎語法:字型與文字排列相關順序
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
你知道SEO優化最佳幫手的正確打開方式嗎? 看這篇就對了!!
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？

前端工程師專欄今天要和大家分享的是CSS邊框屬性解釋~ 學過的或還沒學過的都趕緊往下看一下吧!! 
在 CSS 中常見的邊框 (border) 屬性，分別介紹如下列目錄：


目錄 border-width: 邊線的寬度 border-style：邊框樣式 border-color：邊線的顏色 border-top/left/bottom/right: 上/左/下/右框線 border: 四邊框線

border-width: 邊線的寬度

在CSS中border-width 屬性是前端工程師用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚)，或者是一個數值單位。

/*薄線寬*/.thin { border-width: thin; border-style:solid;}
/*中等線寬*/.medium { border-width: medium; border-style:solid;}
/*厚線寬*/.thick { border-width: thick; border-style:solid;}
/*自行設定線寬*/.number { border-style:solid; }

See the Pen #demo-border-width by Tedutw (@Tedutw) on CodePen.

border-width：邊線的樣式

border-style 屬性指定邊框的樣式。以下列出常見的 border-style 屬性以及顯示的結果：

/*實線的CSS*/.solid { border-style: solid; }
/*點線的CSS*/.dotted { border-style: dotted; }
/*虛線的CSS*/.dashed { border-style: dashed; }
/*雙線的CSS*/.double { border-style: double; }
/*凸線的CSS*/.ridge { border-style: ridge; }
/*凹線的CSS*/.groove { border-style: groove; }
/*嵌入線的CSS*/.inset { border-style: inset; }
/*浮出線的CSS*/.outset { border-style: outset; }

See the Pen #demo-border style by Tedutw (@Tedutw) on CodePen.

border-color: 邊線的顏色

border-color 屬性是前端工程師用來設定邊框的顏色。範例如下：

/*紅色邊框*/.red{ border-color: red;border-style:solid; }
/*藍色邊框*/.blue{ border-color: blue;border-style:solid; }

See the Pen #demo-border-color by Tedutw (@Tedutw) on CodePen.

border-top/left/bottom/right: 上/左/下/右框線

我們可以將上下左右的方向和樣式、寬度、及顏色合起來而成為一個屬性。舉個例來說，border-top-style 屬性就是用來設定上邊框的樣式。 以下舉幾個例子：  

/*上邊框為實線，下邊框為點線*/
.topbottom{border-top-style:solid; border-bottom-style:dotted;}
/*上邊框為實線，且寬度中等*/
.top{border-top-style:solid; border-top-width:medium;}
/*左邊框為實線，下邊框為紅色虛線*/
.leftbottom{border-left-style:solid; 
border-bottom-style:dashed; border-bottom-color:#00FF00;}

See the Pen #demo-border-top/left/bottom/right by Tedutw (@Tedutw) on CodePen.

border: 四邊框線

如果四邊的邊框屬性都一樣，那我們就可以在同一行用一個 border 屬性一次宣告邊框樣式、邊框寬度、以及邊框顏色，而不必四個邊都個別再描述一次。

container{...
border: 1px solid #000000;
...}

See the Pen 用一行來宣佈所有邊框的屬性 by Tedutw (@Tedutw) on CodePen.

上一篇給前端工程師的CSS盒子模型邊界篇大家都看了嗎? 今天要來說的是邊康留白篇~ 快學起來吧!!
盒子模式 (box model) 是在CSS 中一個很重要的觀念。它是前端工程師用來描述一個元素是如何組成的。以下是盒子模式的式樣：

在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。 相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下：


目錄 邊框 (border) 留白 (padding)


邊框
Border 指的是邊框，介於外側的邊界 (margin) 與內側的留白 (padding) 之間。前端工程師們不須要特別的設定，CSS 碼如下：  
border: 邊界值 實線或是虛線 顏色;
邊框設定範例如下：  
border: 1px solid #000000;
 
See the Pen margin：上下左右; (一個值) by Tedutw (@Tedutw) on CodePen.
以上面的範例來看，我們得到一個外層包了一層黑色 (色碼為 #000000) 實線 (solid)、寬度1px的框。 border的數值只需要用空格分開就可以了，屬性不需要一個一個個別的下，如:border-width、border-style、border-color 等等。  
留白
padding(留白)外側緊鄰邊框 (border)、內側緊鄰內容 (content)。如果沒有設定 padding，內容的部分就會黏著邊框。padding 就會吃到背景色。   以下是沒有設定 padding 的例子，可以看見內容的字緊鄰黑色的邊框  
See the Pen margin：上 左右 下; (三個值) by Tedutw (@Tedutw) on CodePen.
以下是有設定 padding 的例子, 可以看見內容的字與邊框有一段距離.這一段距離就是所謂的「padding」。padding會吃到背景色。  
See the Pen margin：上 左右 下; (三個值)-加上邊框 by Tedutw (@Tedutw) on CodePen.
Padding 的上下左右調整，語法跟 Margin 一樣，順序很重要。列舉如下：  
padding:[上面留白值] [右邊留白值] [下面留白值] [左邊留白值]
 
padding:[上面留白值] [左邊與右邊留白值] [下面留白值]
 
padding:[上面與下面留白值] [左邊與右邊留白值]
 
padding:[上面與下面與左邊與右邊留白值]

各位前端工程師~ 前端工程師專欄:CSS字體單位解釋(下)出來嘍~ 還沒看過上篇的繼的去看一下喔~
在CSS ，字體單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位： 分別介紹如下：  

正在準備成為前端工程師的你還不知道盒子模型是甚麼嗎? 今天讓你一次搞懂!! 快筆記下來吧~
盒子模式 (box model) 是在

CSS 中一個非常重要的觀念。它是

前端工程師用來描述一個元素是怎麼樣組成的。以下圖例是盒子模式的式樣：
 

在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。 相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下：
 


目錄 1. 邊界 (margin)


邊界
就像我們在盒子模式那一頁看到的圖例，邊界 (margin) 是在邊框之外，並且是用來設定各個元素之間的距離。一個盒子有四個邊，所以前端工程師們可以對這四個邊逐一設定：

margin-top (上邊界)

margin-right (右邊界)

margin-bottom (下邊界)

margin-left (左邊界)

有三種方式可以設定邊界，分別為長度、百分比、以及 'auto'。我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼)：
See the Pen Margin by Tedutw (@Tedutw) on CodePen.
在這裡，上邊界為 50px，左邊界和右邊界為 10%，下邊界為 auto。   這樣寫會不會太麻煩一些? 會！其實定義邊界尺寸的這四行 CSS 碼，是可以濃縮成一行的！以下會介紹：  
Margin 邊界簡化 (一行文) 表示法
所有四個邊的邊界可以同時由一個 margin 屬性設定，只有一行文。它的語法如下：  
margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值]
我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼)：  
See the Pen Margin-2 by Tedutw (@Tedutw) on CodePen.
在這裡，邊界的表現跟最前面的例子一樣：上邊界為 50px，左邊界和右邊界為 10%，下邊界為 auto。   使用這種簡化的表示方法，重點在於數字的順序：第一個值是上邊界的值，第二個值是右邊界的值，第三個值是下邊界的值，而第四個值是左邊界的值。   這種簡化 CSS 的一行文標示方法，還有其他的方式，介紹如下：   margin：上 右 下 左; (四個值)   如上方例子所示   margin：上 左右 下; (三個值)  
margin: [上面邊界值] [右邊與左邊邊界值] [下面邊界值]
 
See the Pen margin：上 左右 下; (三個值) by Tedutw (@Tedutw) on CodePen.
  margin：上下 左右; (二個值)  
margin: [上面與下面邊界值] [右邊與左邊邊界值]
 
See the Pen margin：上下 左右; (二個值) by Tedutw (@Tedutw) on CodePen.
  margin：上下左右; (一個值)  
margin: [上下左右邊界值]
 
See the Pen margin：上下左右; (一個值) by Tedutw (@Tedutw) on CodePen.

前端工程師專欄今天要來和大家談談CSS的字體單位~ 還沒學過或還搞不清楚的工程師們一定要學起來啊!!
在 CSS ，字體單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位這是

前端工程師的基本常識~
分別介紹如下：  


目錄 1. 絕對單位 px (pixel 畫素) cm / pt / in / pc / mm large, medium, small

 

CSS字體單位----絕對單位

   

px (pixel 畫素)

px 為 CSS 最常使用的單位。無論字體大小、區塊或其他元素的尺寸設定，都少不了它的蹤影。一般認為：px 會依據螢幕解析度而有所變化、平時被歸類為相對尺寸。但為何在 CSS 裡面就變成絕對尺寸呢？因為在 CSS 裡面，絕對尺寸的定義是「不會繼承上層父元素的設定」的尺寸。在 CSS 中，無論設定多少 px，它就會精確的呈現，他都不會繼承沿襲上一層的父元素的尺寸。如以下例子所示，就是若前端工程師使用 px 這個單位來設定大小，那麼不管頁面上其他的尺寸設定，都不會影響到他。 而 px 的定義，理論上就是：一個像素 px 意思就是螢幕上最小的一點：16 px 就是 16 點大小。 See the Pen #demo-px by Tedutw (@Tedutw) on CodePen.      

 

cm、pt、in、pc、mm

這些單位比較適用於印刷的排版軟體，在 CSS 比較少用。分別解釋如下：

1. in：英吋，在 96 dpi 的系統上 1 in = 96 px。


2. cm：公分，在 96 dpi 的系統上 1 cm = 37.795275593333 px。


3. mm：公釐，在 96 dpi 的系統上 1 mm = 3.7795275593333 px。


4. pt：印表機的每個「點」，定義為 1 pt ＝ 1/72 in，如果在 72 dpi 的系統上 1 px = 1 pt，但如果在 96 dpi 的系統上 1 px = 0.75 pt ( 72/96 = 0.75 )。


5. pc：picas，定義為 1 pc ＝ 12 pt。


6. in：英吋，在 96 dpi 的系統上 1 in = 96 px。

See the Pen #demo-cm、pt、in、pc、mm by Tedutw (@Tedutw) on CodePen.        

 

large, medium, small

  字體大小的屬性有七種如下：

1. xx-small：對應 h6 的標籤文字大小，為 medium 字體的 3/5 倍。


2. x-small：沒有對應的標籤文字大小，為 medium 字體的 3/4 倍。


3. small：對應 h5 的標籤文字大小，為 medium 字體的 8/9 倍。


4. medium：對應 h4 的標籤文字大小，，根據 W3C 的規範，以 medium 預設 16px 為基礎


5. large：對應 h3 的標籤文字大小，為 medium 字體的 6/5 倍。


6. x-large：對應 h2 的標籤文字大小，為 medium 字體的 3/2 倍。


7. xx-large：對應 h1 的標籤文字大小，為 medium 字體的 2/1 倍。

由上方看出，除了 x-small 沒有對應的標籤文字大小外，其餘六種分別對應 h6~h1 的標籤文字大小。而 medium 根據 W3C 的規範，大小為預設的 16px 為基礎 (除非另有自行設定預設字體大小，則不再此限)。所有的 large 與 small 屬性都是使用固定的倍數乘上 medium 的大小。 See the Pen #demo-large, medium, small by Tedutw (@Tedutw) on CodePen.  
 
其他閱讀

前端工程師專欄:CSS字體單位解釋(下)
HTML5教學----CSS基礎語法:字型與文字排列相關順序
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
你知道SEO優化最佳幫手的正確打開方式嗎? 看這篇就對了!!
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？

你是前端工程師嗎? 四種如何將CSS套入HTML中的方法你都會了嗎? 今天幫大家整理了一篇完整教學,有興趣的話往下看吧~
 
在這篇中提到：CSS 是前端工程師替 HTML 「化妝」用的，為 HTML 起裝飾作用。因為這樣所以 CSS 不能夠單獨使用，畢竟有了需要化妝的「客戶」HTML，CSS 才能發揮他的效用，才有生意上門嘛！HTML 負責確定網頁中有哪些內容，而 CSS 確定以何種外觀 (大小、粗細、顏色、對齊和位置) 展現這些元素。那要如何串接 CSS 的樣式到 HTML 檔案上，才能讓 CSS 發揮效用呢? 套用 CSS 樣式到 HTML 檔案上有四種方式，列舉如下：  
 


目錄 1. 概述 2. 將 CSS 套用入 HTML 文件中的四種方法 2-1. 行內套用 (Inline) 2-2. 嵌入套用 (Embed) 2-3. 外部連接 (External Link) 2-4. 外部匯入 (Import) 3. 優先順序


 
2-1. 行內套用 (Inline)
 
如果只有少部分的地方需要改變樣式的話，前端工程師可以在 HTML 檔案中對應的那一行內直接宣告 CSS 樣式。範例如下：
<p style='font-family:標楷體; font-size:14;'>
這是行內套用，樣式為標楷體，字體大小為 14。</p>
<p style='font-family:微軟正黑體; font-size:16;'>
這是行內套用，樣式為微軟正黑體，字體大小為 16。</p>
<p style='font-family:微軟正黑體; font-size:16; color:blue;'>
這是行內套用，樣式為微軟正黑體，字體小為 16。，顏色為藍色</p>
則結果如下所示(左邊為 HTML、右邊為顯示結果)：    
 
2-2. 嵌入套用 (Embed)
CSS 樣式可以嵌入於 HTML 文件中：通常是嵌入在 <head> 內，以 <style type="text/css"> 宣告 。如下圖所示：    
 
2-3. 外部連接 (External Link)
 
若網頁內容較多，則所套用的 CSS 樣式也會比較多，這時就可將所有的 CSS 碼另外集中在一個獨立的「.css」檔案中。並在 HTML 文件的 <head> 與 </head> 標籤中，輸入以下代碼來宣告：
<link rel="stylesheet" type="text/css" href="外部CSS檔案.css">
 
如此一來，「外部CSS檔案.css」這個檔案中所宣告的 CSS 樣式，則會被加入 HTML 網頁中，如下面範例所示： 註：左邊的格子顯示其 HTML 碼與 「外部CSS檔案.css」的 CSS 碼(須按左上方按鈕切換)；右方則為網頁顯示效果 在 HTML 中套用 CSS，最常見的就是這個方式。這個方法的優點是多個網頁可以共用同一個 CSS，這樣維護檔案相對比較容易    
 
2-4. 外部匯入 (Import)
 
跟使用外部連接 (External Link)的作用一樣，@import 這個指令，可讓外部網頁上的 CSS 樣式表檔案被匯入進 HTML 文件中。語法如下所示：
<style type="type/css">
<!--
@import url(https://外部網頁上的CSS檔案網址)；
-->
</style>

如以下範例所示，左方的 HTML 碼在 <style> 與 </style> 間加入了 @import 指令與 CSS 樣式表的網址： 既然套用外部 CSS 樣式表的方法已經有「2-3. 外部連接 (<link href="外部css檔案的路徑">的方法)」，那為何還多出一個「@import 指令」? 其時 @import 指令最初的用意，是為了能針對不同的瀏覽器 (如 IE、火狐...或是 Apple 的 Safari 等) 而運用不同的樣式。不過現在已經沒有這個必要。 那麽，以上 4 種套用方法，HTML 套用 CSS 樣式表的優先順位又是如何呢?    
 
優先順序
 
若一個 HTML 文件中，相同屬性卻包含多個 CSS 樣式表時，應該要套用哪一個呢? 基本原則是，越接近 HTML 本身的樣式，優先權越高。因此，「行內套用」的 CSS 樣式表，通常會有第一名的優先權，因為它最接近 HTML 的元素。而排名第二的是「嵌入套用」的樣式表 - 因為這一類的樣式表是在 HTML 的 <head> 內就已經宣告的。再下來分別是匯入套用和外部連接套用的樣式表。若有多個樣式表被匯入或被連接，越後被匯入或越後被連接的，優先權就越高。優先權由最高到最低的順序如下：
 

行內套用的樣式表 (Inline stylesheet)

嵌入套用的樣式表 (Embedded stylesheet)

匯入套用的樣式表 (Imported stylesheet)

外部連接套用的樣式表 (Linked stylesheet)

瀏覽器本身的樣式表 (Browser's own stylesheet)

 
 
其他閱讀
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
HTML5教學----CSS基礎語法:一次搞懂區塊與邊框
HTML5教學教你如何做出逼真的書本翻頁動畫!!
Python課程結合醫療,是病人的大福音!
進入微軟面試前,履歷上你應該要先上Java課程!
網路行銷課程讓你用社交軟體就可以輕鬆荷包賺滿滿!
美國NASDAQ上市公司、外商IT教育培訓企業
 

接續上一篇前端工程師專欄~這一篇要來談的是<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 定義其樣式
 
其他閱讀
前端工程師專欄:<Div>及<Span>標籤應用(上)-Div篇
HTML5教學----CSS基礎語法:一次搞懂區塊與邊框
HTML5教學教你如何做出逼真的書本翻頁動畫!!
Python課程結合醫療,是病人的大福音!
進入微軟面試前,履歷上你應該要先上Java課程!
網路行銷課程讓你用社交軟體就可以輕鬆荷包賺滿滿!
美國NASDAQ上市公司、外商IT教育培訓企業

前端工程師專欄又來啦!! 這一篇專欄要和大家介紹CSS的父子繼承關係!! 還沒聽過的話趕緊看下去!!