前端工程師專欄今天要來和大家談談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 比較少用。分別解釋如下：
- in：英吋，在 96 dpi 的系統上 1 in = 96 px。
- cm：公分，在 96 dpi 的系統上 1 cm = 37.795275593333 px。
- mm：公釐，在 96 dpi 的系統上 1 mm = 3.7795275593333 px。
- pt：印表機的每個「點」，定義為 1 pt ＝ 1/72 in，如果在 72 dpi 的系統上 1 px = 1 pt，但如果在 96 dpi 的系統上 1 px = 0.75 pt ( 72/96 = 0.75 )。
- pc：picas，定義為 1 pc ＝ 12 pt。
- in：英吋，在 96 dpi 的系統上 1 in = 96 px。
See the Pen #demo-cm、pt、in、pc、mm by Tedutw (@Tedutw) on CodePen.
large, medium, small
字體大小的屬性有七種如下：
- xx-small：對應 h6 的標籤文字大小，為 medium 字體的 3/5 倍。
- x-small：沒有對應的標籤文字大小，為 medium 字體的 3/4 倍。
- small：對應 h5 的標籤文字大小，為 medium 字體的 8/9 倍。
- medium：對應 h4 的標籤文字大小，，根據 W3C 的規範，以 medium 預設 16px 為基礎
- large：對應 h3 的標籤文字大小，為 medium 字體的 6/5 倍。
- x-large：對應 h2 的標籤文字大小，為 medium 字體的 3/2 倍。
- 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 培訓中心推「找到工作再付學費」專案，要試試嗎？
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
你是前端工程師嗎? 四種如何將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教育培訓企業
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
接續上一篇前端工程師專欄~這一篇要來談的是<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教育培訓企業
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
前端工程師專欄又來啦!! 這一篇專欄要和大家介紹CSS的父子繼承關係!! 還沒聽過的話趕緊看下去!!
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
今天的前端工程師專欄要和大家分享<Div>及<Span>標籤應用!! 超實用!! 快學起來!! 前端工程師們在撰寫 HTML 網頁時，可以用 <div> 或是 <span> 標籤包住多種圖文、表格等等的元素，則這些被包起來的元素就被視為一個區塊。 <div> 與 <span> 的用法很類似，都能將 HTML 的內容分為不同的區域。差別在於被 <span> 標籤包起來的元素，被瀏覽器視為一行；而被 <div> 包起來的元素，則被視為一個區塊。 <div> 或是 <span> 的元素沒有特定的含意，如果與 CSS 一同使用， <div> 可針對比較大的區塊內容定義其樣式；<span> 則是為行內部分內容或細節設定樣式。
目錄 1. 概述 2. Div 與 Span 標籤概述 2-1. Div 標籤概述 2-2. Span 標籤概述 |
Div 這個標籤可以解釋為區塊，目的是將內容分為不同的區塊 (block)，而每一個 Div 區塊可以根據 CSS 中宣告的樣式而定義其外觀。用 DIV 標籤包起來 (格式大致上是這樣<div>...</div>) 的元素，會被瀏覽器會視為一塊物件。你可以用 div 將網頁內容的各元素 (圖、文、表格等等) 包起來，再針對各區塊，去做 CSS 的排板。Div 是一個區塊級容器 (block-level container)，這代表在<div>與</div> 標籤後會換行。 如何將 CSS 樣式套用至 <div> 區塊? 通常要讓 <div> 區塊都會加個 「class 選擇器」 或是 「id 選擇器」 來套用 CSS 樣式，其語法格式會是 「 <div class="CSS 的 class 名稱">...</div> 」 或是 「 <div id="CSS 的 id 名稱">...</div> 」。「class 選擇器」 以及 「id 選擇器」 的說明，請見此兩篇： <CSS 的 ID 選擇器宣告法>、<CSS 的 Class 選擇器宣告法> 舉例來說，我們已經定義了以下的 CSS 樣式 .block-1 {
color: blue;
font-family:微軟正黑體;
font-size: 20pt;
}
.block-2 {
color: red;
font-family:新細明體;
font-size: 16pt;
}
.block-3 {
color: green;
font-family: 標楷體;
font-size: 18pt;
}
前端工程師要怎麼使用 <div> 來套用其 CSS 樣式，其 HTML 碼如下所示:<body>
<div class="block-1">這裡是網頁<h1>第一個區塊</h1>的內容</div>
<div class="block-2">這裡是網頁<span class="block-3">第二</span>個 <span class="block-1">區</span>塊的內容</div>
<div class="block-3">這裡是網頁<h3>第三個區塊</h3>的內容</div>
</doby>
則結果如下所示(左邊為 HTML、右邊為顯示結果)： 在以上的例子中，我們可以知道： 1. <div> 是一個獨立的區塊容器 (block-level container)，所以會獨自占用一行。就像以上的例子中，左邊的 HTML 碼沒有使用 <br> 來斷行，而是讓三個 <div> 藉由其區塊的特性而自動分行 2. 每個 DIV 包起來的區塊裡面都可以各自加入 <h1>、 <h3> 或 <span> 等標籤做規劃。如以上的例子中，第一個區塊 (<div class=".block-1">) 中就包含了 <h1> 標籤；第二個區塊 ( <div class=".block-2"> ) 中就包含了兩個 <span> 標籤、第三個區塊 (<div class=".block-3">) 中就包含了 <h3> 標籤 3. SPAN 包起來元素，有別於 DIV 區塊，被瀏覽器視為一行。如以上的例子中，第二個區塊 ( <div class=".block-2"> ) 中就包含了兩個 <span> 標籤，但都在同一行內 其他閱讀前端工程師專欄:<Div>及<Span>標籤應用(上)-Span篇HTML5教學----CSS基礎語法:一次搞懂區塊與邊框HTML5教學教你如何做出逼真的書本翻頁動畫!!Python課程結合醫療,是病人的大福音!進入微軟面試前,履歷上你應該要先上Java課程! 網路行銷課程讓你用社交軟體就可以輕鬆荷包賺滿滿!美國NASDAQ上市公司、外商IT教育培訓企業
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
學會學好Python就是你邁向高新科技一族的基石!! 想知道為甚麼就快往下讀~
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
前端工程師專欄再度登場~ 今天要來和大家分享四種將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教育培訓企業
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
前端工程師看了上篇也一定要看的下篇今天在這邊奉上!! 上下兩篇要一起學起來喔~
目錄 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>標籤應用一次跟你說清楚!! (上)HTML5教學----CSS基礎語法:一次搞懂區塊與邊框HTML5教學教你如何做出逼真的書本翻頁動畫!!Python課程結合醫療,是病人的大福音!進入微軟面試前,履歷上你應該要先上Java課程! 網路行銷課程讓你用社交軟體就可以輕鬆荷包賺滿滿!美國NASDAQ上市公司、外商IT教育培訓企業
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
你是一位前端工程師嗎? 你還不懂甚麼是CSS繼承關係嗎? 那就趕快往下看~學好學滿吧!!
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
前端工程師連這個都不懂就太掉漆了!! <Div>及<Span>標籤應用一次跟你說清楚!! 快筆記!! 前端工程師們在撰寫 HTML 網頁時，可以用 <div> 或是 <span> 標籤包住多種圖文、表格等等的元素，則這些被包起來的元素就被視為一個區塊。 <div> 與 <span> 的用法很類似，都能將 HTML 的內容分為不同的區域。差別在於被 <span> 標籤包起來的元素，被瀏覽器視為一行；而被 <div> 包起來的元素，則被視為一個區塊。 <div> 或是 <span> 的元素沒有特定的含意，如果與 CSS 一同使用， <div> 可針對比較大的區塊內容定義其樣式；<span> 則是為行內部分內容或細節設定樣式。
目錄 1. 概述 2. Div 與 Span 標籤概述 2-1. Div 標籤概述 2-2. Span 標籤概述 |
Div 這個標籤可以解釋為區塊，目的是將內容分為不同的區塊 (block)，而每一個 Div 區塊可以根據 CSS 中宣告的樣式而定義其外觀。用 DIV 標籤包起來 (格式大致上是這樣<div>...</div>) 的元素，會被瀏覽器會視為一塊物件。你可以用 div 將網頁內容的各元素 (圖、文、表格等等) 包起來，再針對各區塊，去做 CSS 的排板。Div 是一個區塊級容器 (block-level container)，這代表在<div>與</div> 標籤後會換行。 如何將 CSS 樣式套用至 <div> 區塊? 通常要讓 <div> 區塊都會加個 「class 選擇器」 或是 「id 選擇器」 來套用 CSS 樣式，其語法格式會是 「 <div class="CSS 的 class 名稱">...</div> 」 或是 「 <div id="CSS 的 id 名稱">...</div> 」。「class 選擇器」 以及 「id 選擇器」 的說明，請見此兩篇： <CSS 的 ID 選擇器宣告法>、<CSS 的 Class 選擇器宣告法> 舉例來說，我們已經定義了以下的 CSS 樣式 .block-1 {
color: blue;
font-family:微軟正黑體;
font-size: 20pt;
}
.block-2 {
color: red;
font-family:新細明體;
font-size: 16pt;
}
.block-3 {
color: green;
font-family: 標楷體;
font-size: 18pt;
}
前端工程師要怎麼使用 <div> 來套用其 CSS 樣式，其 HTML 碼如下所示: <body>
<div class="block-1">這裡是網頁<h1>第一個區塊</h1>的內容</div>
<div class="block-2">這裡是網頁<span class="block-3">第二</span>個 <span class="block-1">區</span>塊的內容</div>
<div class="block-3">這裡是網頁<h3>第三個區塊</h3>的內容</div>
</doby>
則結果如下所示(左邊為 HTML、右邊為顯示結果)： 在以上的例子中，我們可以知道： 1. <div> 是一個獨立的區塊容器 (block-level container)，所以會獨自占用一行。就像以上的例子中，左邊的 HTML 碼沒有使用 <br> 來斷行，而是讓三個 <div> 藉由其區塊的特性而自動分行 2. 每個 DIV 包起來的區塊裡面都可以各自加入 <h1>、 <h3> 或 <span> 等標籤做規劃。如以上的例子中，第一個區塊 (<div class=".block-1">) 中就包含了 <h1> 標籤；第二個區塊 ( <div class=".block-2"> ) 中就包含了兩個 <span> 標籤、第三個區塊 (<div class=".block-3">) 中就包含了 <h3> 標籤 3. SPAN 包起來元素，有別於 DIV 區塊，被瀏覽器視為一行。如以上的例子中，第二個區塊 ( <div class=".block-2"> ) 中就包含了兩個 <span> 標籤，但都在同一行內 其他閱讀前端工程師一定要懂的<Div>及<Span>標籤應用一次跟你說清楚!! (下)HTML5教學----CSS基礎語法:一次搞懂區塊與邊框HTML5教學教你如何做出逼真的書本翻頁動畫!!Python課程結合醫療,是病人的大福音!進入微軟面試前,履歷上你應該要先上Java課程! 網路行銷課程讓你用社交軟體就可以輕鬆荷包賺滿滿!美國NASDAQ上市公司、外商IT教育培訓企業
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
你聽過很多人提過Pyhton卻不知道他是甚麼可以用來幹嘛嗎? 那麼今天的文章你一定要好好看一下!!
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
不想當個掉漆的前端工程師就快把這篇學起來~ 一次搞清楚Class和ID!!在這篇中提到：Class 及 ID 都是使用者設定的選擇器 (selector)。Class 選擇器的說明如這篇，身為前端工程師的你快學起來吧!! ID 選擇器的說明如下ID 選擇器Class 的宣告法，是先放一個井字號 (#)，之後再列出選擇器名稱。格式如下：
ID 名稱{
屬性：設定值；
...
}舉例來說，如我們要定義導覽列的顏色為代號「#0000FF」的顏色時，宣告的
CSS 如下：
#navbar {
color:#0000FF;
}要將以上的樣式套用在 HTML 內，我們用以下的 HTML 碼：
<p class="navbar">這是用 id 選擇器定義 navbar 文字顏色為「#0000FF」純藍色的例子。</p>以上宣告顯示如下：
這是用 id 選擇器定義 navbar 文字顏色為「#0000FF」純藍色的子。
|
▶ 參考資料：
HTML和CSS的網頁顏色代碼對照表Class 跟 ID 的不同之處在這兩個之間最大的不同就是在於 ID 選擇器在一個 HTML 文件中只能夠被使用一次，而 Class 選擇器在一個 HTML 文件中則可以被使用多次。
另外，是 ID 選擇器可以被
Javascript 中的 GetElementByID 函數所運用，而 Class 選擇器不能被 Javascript 運用到。
至於何時要用 ID 、何時要用 Class，並沒有絕對的規則。但是大多的時候，Class 選擇器的使用頻率較高，因為 Class 選擇器在一個 HTML 文件中，可以被使用多次。但是當你要用
Javascript 的 GetElementByID 函數時，你就應該要用 ID 選擇器。
Class 名稱及 ID 名稱，大寫與小寫是不同的，不能互用。例如：.navbar 及 .NavBar，是代表兩個不同的 Class 選擇器。 今天的分享喜歡嗎? 喜歡的話也幫我分享給你的前端工程師好友吧!!
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
