資深前端工程師淺談Box model(下集)

資深前端工程師淺談Box model(下集)
資深前端工程師淺談Box model(下集)

對資深工程師來說,box model是真的必須要會,本篇會以邊框及留白做詳細說明!

盒子模式 (box model) 是在 CSS 中一個很重要的觀念。它是用來描述一個元素是如何組成的。以下是盒子模式的式樣:

在此篇要跟大家分享是關於box model的邊框及留白部分!

邊框

Border 是邊框,介於外側的邊界 (margin) 與內側的留白 (padding) 之間。不須特別設定,CSS 碼如下:

border: 邊界值 實線或是虛線 顏色;

邊框設定範例如下:

border: 1px solid #000000;

See the Pen margin:上下左右; (一個值) by Tedutw (@Tedutw) on CodePen.

根據以上範例,我們藉由CSS碼得到一個外層包了一層黑色 (色碼為 #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:[上面與下面與左邊與右邊留白值] 

 

 

 

推薦文章:

資深前端工程師淺談Box model(上集)

 

前端工程師的御用愛將CSS,超好用四招搞定HTML!

 

為什麼ID選擇器對前端工程師如此重要?原因是…

 

程式課程選達內,美上市IT課程教育集團

 

台灣人工智慧實驗室研發偵測敗血症系統,準確率高達百分之八十!!

 

能跟你同手同腳的機器人,你知道是Python課程下的產物嗎?

 

AI人工智慧訓練師薪水多少? Python課程沒告訴你的軼事!!

資深前端工程師淺談Box model(上集)

資深前端工程師淺談Box model(上集)
資深前端工程師淺談Box model(上集)

資深前端工程師都愛用的box model,其實一點也不難!

盒子模式 (box model) 是在 CSS 中一個很重要的觀念。它是用來描述一個元素是如何組成的。以下是盒子模式的式樣:

CSS-box-model
在盒子模式中,內容 (content) 是屬於最內層的部分,接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。

至於相關的CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下:

目錄
1. 邊界 (margin)

邊界

就好比我們在盒子模式那一頁看到的,邊界 (margin) 是在邊框之外,並且是用來設定各個元素之間的距離。一個盒子有四個邊,所以我們可以根據前端工程師建議對這四個邊逐一設定:

  1. margin-top (上邊界)
  2. margin-right (右邊界)
  3. margin-bottom (下邊界)
  4. 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.

 

 

推薦文章:

資深前端工程師淺談Box model(下集)

為什麼ID選擇器對前端工程師如此重要?原因是…

那些前端工程師沒教你的CSS,今天一一告訴你!

達內教育開幕 培養台灣IT人才進入全球企業

Java課程讓我百萬年薪科技新貴之路只需要六個月!

百度CEO拿下全球AI人工智慧領導第三名,緊追蘋果微軟!!

網頁設計課程教你變身化妝師,幫自己的網站弄美美的!

 

 

前端工程師CSS實務教學應用-Span標籤(下)

前端工程師CSS實務教學應用-Span標籤(下)
前端工程師CSS實務教學應用-Span標籤(下)

前端工程師最注重實務與應用了!學會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 定義其樣式

 

 

推薦文章:

前端工程師CSS實務教學應用-Div標籤(上)

 

CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!

 

那些前端工程師不告訴你卻超好用的懶人包,今天不藏私大公開!

 

程式課程選達內,美上市IT課程教育集團

 

信不信由你,因為Java課程讓我獲得我想要的生活!

 

網路行銷課程教你從SEO優化方式看品牌價值

 

人人都在玩3D虛擬人偶APP,網路行銷課程告訴你為什麼!!

 

前端工程師CSS實務教學應用-Div標籤(上)

前端工程師CSS實務教學應用-Div標籤(上)

想要成為前端工程師,一定不能錯過今日的div實務教學!

撰寫 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> 標籤,但都在同一行內

 

推薦文章:

那些前端工程師沒教你的CSS,今天一一告訴你!

 

那些前端工程師不告訴你卻超好用的懶人包,今天不藏私大公開!

 

CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!

 

程式課程選達內,美上市IT課程教育集團

 

不管黑帽白帽,能幫我衝流量就是好帽-最有用的網路行銷課程

 

AI人工智慧進駐零售業;貨架管理快,狠,準!!!

 

學網路行銷課程最重要的是,永遠不要輕忽鄉民的力量!

前端工程師的御用愛將CSS,超好用四招搞定HTML!

前端工程師的御用愛將CSS,超好用四招搞定HTML!

前端工程師愛用的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> 內就已經宣告的。再下來分別是匯入套用外部連接套用的樣式表。若有多個樣式表被匯入或被連接,越後被匯入或越後被連接的,優先權就越高。優先權由最高到最低的順序如下:

 

 

推薦文章:

那些前端工程師不告訴你卻超好用的懶人包,今天不藏私大公開!

 

為什麼ID選擇器對前端工程師如此重要?原因是…

 

HTML5教學第一招-工欲善其事,必須要有免費的網頁編輯器

 

Java課程、UI課程、程式課程、網路行銷課程推薦

 

網路行銷課程-SEO優化特別篇(上):擴大關鍵字的同時也在擴大你的客群!!

 

阿凡達導演將AI漫畫班上大螢幕!!Python課程是幕後功臣?

 

有人問起Python課程的機器手,專玩疊疊樂的它可是榜上有名!

 

CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!

CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!

其實有很多想成為前端工程師都搞不定CSS的繼承關係,今天的文章就是要讓你一次搞定!

其實在一個 HTML 中,標籤之間都會有所謂的親子關係。舉例來說,表示網頁標題的「<title>」標籤一定都是在表示網頁開頭的「<head>」這個標籤之內。因此 <title> 被稱為 <head> 的子標籤、 <head> 被稱為 <title> 的父標籤。繼承的概念簡單來說就是:子標籤的 CSS 樣式一定會跟父標籤一樣,除非子標籤另有自訂的樣式。

舉例來說,如果已經有以下的 CSS 樣式:

p {font-family:微軟正黑體;color:blue;font-size:20px;} 
strong {font-size:36px;}

像是前端工程師在輸入如以下的 HTML 碼

<p>這是一個<strong>CSS樣式的繼承關係 </strong>的例子</p> 

則結果如下所示(左邊為 HTML、右邊為顯示結果):

IFrame

在以上的例子中,雖然我們並沒有像前端工程師指定 HTML 的 <strong> 標籤指定顏色與字體,可是最後結果如上方範例的右邊所呈現的 – 整行文字的顏色都是藍色的,且字體是微軟正黑體。這是因為 <strong> 是 <p> 的子標籤,因此我們可以推斷出 <strong> 標籤繼承了 <p> 的 CSS 樣式,而在 <p> 的樣式中,文字的顏色是設定為藍色、字體是設定為微軟正黑體。

 

 

推薦文章:

那些前端工程師沒教你的CSS,今天一一告訴你!

 

還在猶豫怎麼用Class選擇器?前端工程師分析給你聽!

 

本日HTML5教學,教你利用CSS當你的網頁化妝師!

 

學習Python課程永遠不嫌晚!!小小AI工程師驚豔世界!!(上)

 

你知道你現在擁有的虛擬3D人偶跟網路行銷課程有很大的關係嗎?

 

不舒服卻不知掛哪科?讓Python課程裡的蘭醫師協助你!

 

美國NASDAQ上市公司、外商IT教育培訓企業

那些前端工程師不告訴你卻超好用的懶人包,今天不藏私大公開!

那些前端工程師不告訴你卻超好用的懶人包,今天不藏私大公開!
那些前端工程師不告訴你卻超好用的懶人包,今天不藏私大公開!

前端工程師常用的顏色懶人包,你知道該怎麼用嗎?今天就跟著我們一起好好來學一學吧!

網頁顏色是在全球資訊網(world wide web,也就是 www)上設計網頁時,表示各種顏色的方法。通常使用三組十六進位數字表示,部分常用顏色 (如三原色:紅、藍、綠) 也可以用英語名稱 (red、blue、green)來表示。此外,尚有直接使用多組十進位表示的方法。本篇提到的是最常用的十六進位數字表示法。

十六進位數字表示方法

在 HTML 和 CSS 中使用 3 位元組,共 6 個十六進位數字表示一種顏色。每位元組從 00 到 FF,最前面以「#」開頭,接續「#」之後的前兩位數字為紅色的值,中間兩位是綠色的值,最後兩位是藍色的值。

根據維基百科敘述,由於網頁是基於電腦瀏覽器 (就是 IE、Chrome、Safari 等) 開發的媒體,所以顏色以光學三原色 RGB(紅、綠、藍)為主。 網頁顏色是以 16 進位代碼表示,一般以「#」號開頭,後面分別為紅、綠、藍的16位元進位數。FF 為最大數,例如白色是 R、G、B 三個顏色的最高值,在網頁程式碼便是:#FFFFFF。黑色是三個顏色為 0,在網頁程式碼便是:#000000。

範例如下:

#FF0000 – 這個 HTML 代碼是要宣告純粹紅色的最高值,所以前兩個數字為 F,因為不包含任何的藍色與綠色,所以後兩組的兩個數字為 0,宣告結果為:     

#00FF00 – 這個 HTML 代碼是要宣告純粹綠色的最高值,所以中間兩個數字為 F,因為不包含任何的紅色與藍色,所以前後兩組的兩個數字為 0,宣告結果為:     

#0000FF – 這個 HTML 代碼是要宣告純粹藍色的最高值,所以後兩個數字為 F,因為不包含任何的紅色與綠色,所以前兩組的兩個數字為 0,宣告結果為:     

#FFFF00 – 純紅色與純綠色的結合,所以前兩組的兩個數字為 F,宣告結果為:     

#CCEEFF – 取一些紅色與綠色的值,並設定藍色為最大值,出現了天空藍:     

十進位表示法

十進位表示法為「rgb(紅色值,綠色值,藍色值)」,數值從最小到最大範圍為 0-255。可以表示的顏色數總共有:256*256*256 = 16777216 種。

常用顏色懶人包,前端工程師複製貼上即可!

前端工程師常用顏色如下所示,如有需要宣告以下顏色時,複製其中的 16 進位代碼貼在自己的 HTML/CSS 即可。

 

#FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000
#FFB7DD #FF88C2 #FF44AA #FF0088 #C10066 #A20055 #8C0044
#FFCCCC #FF8888 #FF3333 #FF0000 #CC0000 #AA0000 #880000
#FFC8B4 #FFA488 #FF7744 #FF5511 #E63F00 #C63300 #A42D00
#FFDDAA #FFBB66 #FFAA33 #FF8800 #EE7700 #CC6600 #BB5500
#FFEE99 #FFDD55 #FFCC22 #FFBB00 #DDAA00 #AA7700 #886600
#FFFFBB #FFFF77 #FFFF33 #FFFF00 #EEEE00 #BBBB00 #888800
#EEFFBB #DDFF77 #CCFF33 #BBFF00 #99DD00 #88AA00 #668800
#CCFF99 #BBFF66 #99FF33 #77FF00 #66DD00 #55AA00 #227700
#99FF99 #66FF66 #33FF33 #00FF00 #00DD00 #00AA00 #008800
#BBFFEE #77FFCC #33FFAA #00FF99 #00DD77 #00AA55 #008844
#AAFFEE #77FFEE #33FFDD #00FFCC #00DDAA #00AA88 #008866
#99FFFF #66FFFF #33FFFF #00FFFF #00DDDD #00AAAA #008888
#CCEEFF #77DDFF #33CCFF #00BBFF #009FCC #0088A8 #007799
#CCDDFF #99BBFF #5599FF #0066FF #0044BB #003C9D #003377
#CCCCFF #9999FF #5555FF #0000FF #0000CC #0000AA #000088
#CCBBFF #9F88FF #7744FF #5500FF #4400CC #2200AA #220088
#D1BBFF #B088FF #9955FF #7700FF #5500DD #4400B3 #3A0088
#E8CCFF #D28EFF #B94FFF #9900FF #7700BB #66009D #550088
#F0BBFF #E38EFF #E93EFF #CC00FF #A500CC #7A0099 #660077
#FFB3FF #FF77FF #FF3EFF #FF00FF #CC00CC #990099 #770077

 

 

如何在HTML/CSS中宣告顏色代碼

HTML 宣告語法如下:
<!-- In your HTML document -->
<body>
  <h1 style="color:#CD5C5C">Indian Red Title Text</h1>
  <p style="color:#000000">Slate gray paragraph text</p>
</body>
CSS 宣告語法如下:
/* In your .css stylesheet */
h1 { color: #CD5C5C ; }
p { color: #000000; }

 

 

 

推薦文章:

如何成為前端工程師?首先你要先具備…

 

這招HTML5教學也太酷了,翻書跟翻臉一樣快耶!

 

HTML5教學法寶1-文字排版設定好,人人愛看少不了!

 

達內時代科技教育集團簡介

 

沃而瑪引進AI人工智慧,掃描貨價偵測價格標示樣樣來!!

 

搭上python課程熱潮,AI成為大銀幕主角

 

2018百度商業盛會暨品牌數字資產榜單出爐,達內教育再度入圍

還在猶豫怎麼用Class選擇器?前端工程師分析給你聽!

還在猶豫怎麼用Class選擇器?前端工程師分析給你聽!
還在猶豫怎麼用Class選擇器?前端工程師分析給你聽!

要成為專業前端工程師前,總是有很多技巧需要學習!這次要分享如何正確使用Class選擇器!

這篇中提到:Class 及 ID 都是使用者設定的選擇器 (selector)。ID 選擇器的說明如這篇,Class 選擇器的說明如下

Class 選擇器

前端工程師常用的Class 的宣告法,其實是先放一個英文半形句點,再列出選擇器名稱。格式如下:

Class 名稱 { 
屬性:設定值;
...
}

舉例來說,假設我們要定義導覽列的顏色為代號「#0000FF」的顏色時,宣告的 CSS 如下:

.navbar { 
color:#0000FF; 
...
}

要將以上的樣式套用在 HTML 內,我們用以下的 HTML 碼:

<p class="navbar">這是用 Class 選擇器定義文字顏色為「#0000FF」純藍色的例子。</p>

以上宣告顯示如下:

▶ 參考資料:HTML和CSS的網頁顏色代碼對照表

一個 Class 選擇器可以同時有好幾個不同的物件 (instance)。語法如下:

【型類選擇器】.【選擇器名稱】 { 
【型類選擇器】.【選擇器名稱】
...
}

舉例來說,若有以下的 CSS 宣告:

b.special {
   color:#0000FF;
}

i.special {
   color:#000000;
}

要將以上的樣式套用在 HTML 內,前端工程師建議用以下的 HTML 碼即可:

這個例子顯示出 <b class="special">同一個選擇器</b>可以<i class="special">有不同的 instance。</i>

以上宣告顯示如下:

這個例子顯示出同一個選擇器可以有不同的 instance。.

 

 

 

推薦文章:

HTML5教學第一招-工欲善其事,必須要有免費的網頁編輯器

 

HTML5教學第二招-出神入化,自己作表格就是不一樣

 

今日網頁設計課程,就是要讓你弄懂HTML與CSS的愛恨糾葛!

 

網路行銷課程教你保守派的黑帽SEO讓你穩定成長

 

阿凡達導演將AI漫畫班上大螢幕!!Python課程是幕後功臣?

 

SEO優化不只揚善,也要利用robots meta隱惡

 

中國IT教育領導品牌 達內教育集團第一家海外授權中心

為什麼ID選擇器對前端工程師如此重要?原因是…

為什麼ID選擇器對前端工程師如此重要?原因是...
為什麼ID選擇器對前端工程師如此重要?原因是…

為什麼身為前端工程師都要清楚怎麼用ID選擇器?看完此篇你就懂了!

這篇中提到:Class 及 ID 都是使用者設定的選擇器 (selector)。Class 選擇器的說明如這篇,ID 選擇器的說明如下

ID 選擇器

Class 的宣告法,是先放一個井字號 (#),之後再列出選擇器名稱。格式如下:

ID 名稱{ 
屬性:設定值;
...
}

舉例來說,如果要根據前端工程師的看法來要定義導覽列的顏色為代號「#0000FF」的顏色時,宣告的 CSS 如下:

#navbar {
color:#0000FF;
}

要將以上的樣式套用在 HTML 內的話,我們必須要用以下的 HTML 碼:

<p class="navbar">這是用 id 選擇器定義 navbar 文字顏色為「#0000FF」純藍色的例子。</p>

以上宣告顯示如下:

▶ 參考資料: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 選擇器。

原來前端工程師要會的不只是CSS碼,還要懂得Class和ID名稱的用法,要當好前端工程師果然沒那麼簡單啊!

 

 

 

推薦文章:

如何成為前端工程師?首先你要先具備…

 

HTML5教學法寶1-文字排版設定好,人人愛看少不了!

 

HTML5教學法寶2-區塊外框設定一把罩!

 

美國NASDAQ上市公司、外商IT教育培訓企業

 

擠進高薪科技大門-Java課程等你來瞭解!

 

黑白帽怎麼跟SEO的網路行銷課程有關係,難道是在討論SEO的衣櫥嗎?

 

煮咖啡也能跟AI結合?只要有Python課程,這些都能實現!

那些前端工程師沒教你的CSS,今天一一告訴你!

那些前端工程師沒教你的CSS,今天一一告訴你!
那些前端工程師沒教你的CSS,今天一一告訴你!

 

前端工程師都愛用的CSS,看完此篇你就懂一大半了!

這篇中提到:CSS 的用處好比 HTML 的化妝師,此篇再加以說明前端工程師常用的 CSS 的特性。

在了解.CSS 的語法格式之前,你應該要先知道.CSS 的特性如下:

• 若將網頁比喻成一本書的話,HTML 負責書中內容的圖文編輯, CSS 則是負責排版、制定字體大小顏色等美編的事宜。

• 除非 HTML 的標籤內有另外規定,否則所有圖文在網頁上呈現的方式,都會依照 CSS 所規定的樣子而定。

• 因為 CSS 碼的作用是輔助 HTML 碼在網頁上呈現的樣式,所以它是不能單獨存在的。

以下開始介紹 CSS 碼的語法。格式如下:

選擇器 { 
屬性:設定值;
...
}

如上方所示:CSS 碼由「選擇器」、「屬性」、「設定值」三個部分組成,說明如下:

選擇器 (Selector)

在一個選擇器中,可以包含多種屬性項目(數量沒有限制)。選擇器主要有以下三種:
一、型類 (Type) 選擇器
二、Class 選擇器
三、ID 選擇器

「型類 (Type)」選擇器是 HTML 標籤,如 <p> 和 <h1>。

▶ 參考資料:HTML的免費編輯器與基礎標籤

「Class」選擇器是使用者自訂的選擇器,詳細說明請見這篇

「ID」選擇器也是使用者自訂的選擇器,詳細說明請見這篇

屬性、設定值

選擇器之後用大括弧囊括了「屬性:設定值」兩個部分,功用為制定該 CSS 的樣式。舉例來說,若前端工程師要設定一個元素內的文字是紅色的,那就用以下的「屬性:設定值」:

選擇器 { 
color:red;
...
}

在以上的宣告內,color 是屬性,而 red 是設定值。有時候因為樣式的關係,一個屬性會有一個以上的設定值。

舉例來說制定邊界樣式的 margin 屬性,大多會有 4 個設定值。因為這些設定值分別代表上、下、左、右的邊界長度。

▶ 參考資料:CSS基礎語法大集合-與字型、文字排序有關的CSS碼

多個選擇器、卻有相同樣式的場合

有時多個選擇器反而會有相同的樣式,這時可以同時宣告它們。例如選擇器 <h3>和<p2>都有相同的樣式時,就可以用以下的方式來宣告:

h3 p { 
屬性:設定值; 
...
}

這種宣告方式,被稱為「grouping」。

後代選擇器 (Descendant selector)

偶爾會有一種特殊狀況:若 A 選擇器只有 under 在 B 選擇器之下時, A 選擇器才會出現所指定的樣式。若 A 選擇器不在 B 選擇器之下時,則會恢復原本的樣式。
例如<p2>只有在<li>之內的文字,才會呈現紅色的狀態時,就可以用以下的方式來宣告:

li p { 
color:red;
...
}

上面所宣告代表<p2>只有在<li>之內的文字,才會呈現紅色的狀態,若脫離了<li>則不會套用紅色字體的樣式

後代選擇器 (Descendant selector) 格式如下:</p>

父選擇器 子選擇器 { 
屬性:設定值;
...
}

推薦文章:

HTML5教學第一招-工欲善其事,必須要有免費的網頁編輯器

 

本日HTML5教學,教你利用CSS當你的網頁化妝師!

 

這招HTML5教學也太酷了,翻書跟翻臉一樣快耶!

 

Java課程、UI課程、程式課程、網路行銷課程推薦

 

信不信由你,因為Java課程讓我獲得我想要的生活!

 

學完Python讓你越級打怪(上)

 

2018品牌數字資產榜出爐,達內教育第三次上榜