PIXNET Logo登入

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

跳到主文

歡迎光臨Java工程師在痞客邦的小天地

部落格全站分類:職場甘苦

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 3月 14 週四 201908:00
  • 前端工程師專欄:<Div>及<Span>標籤應用(上)-Div篇

前端工程師專欄:<Div>及<Span>標籤應用(上)-Div篇
今天的前端工程師專欄要和大家分享<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) 人氣(2)

  • 個人分類:
▲top
  • 3月 13 週三 201923:39
  • 這年頭想當高薪的科技新貴就一定要知道Python到底是甚麼!!

這年頭想當高薪的科技新貴就一定要知道Python到底是甚麼!!
學會學好Python就是你邁向高新科技一族的基石!! 想知道為甚麼就快往下讀~
 
(繼續閱讀...)
文章標籤

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類:
▲top
  • 3月 13 週三 201908:00
  • 前端工程師專欄: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> 內就已經宣告的。再下來分別是匯入套用和外部連接套用的樣式表。若有多個樣式表被匯入或被連接,越後被匯入或越後被連接的,優先權就越高。優先權由最高到最低的順序如下:
 
  • 行內套用的樣式表 (Inline stylesheet)

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

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

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

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

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

    Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(5)

    • 個人分類:
    ▲top
    • 3月 12 週二 201920:00
    • 前端工程師一定要懂的<Div>及<Span>標籤應用一次跟你說清楚!! (下)

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

    Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(1)

    • 個人分類:
    ▲top
    • 3月 12 週二 201908:00
    • 身為前端工程師一定要懂的CSS繼承關係

    身為前端工程師一定要懂的CSS承繼關係
    你是一位前端工程師嗎? 你還不懂甚麼是CSS繼承關係嗎? 那就趕快往下看~學好學滿吧!!
    (繼續閱讀...)
    文章標籤

    Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(0)

    • 個人分類:
    ▲top
    • 3月 11 週一 201917:00
    • 前端工程師一定要懂的<Div>及<Span>標籤應用一次跟你說清楚!! (上)

    前端工程師一定要懂的<Div>及<Span>標籤應用一次跟你說清楚!! (上)
    前端工程師連這個都不懂就太掉漆了!! <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) 人氣(1)

    • 個人分類:
    ▲top
    • 3月 11 週一 201907:00
    • 每個人都Python Python的掛在嘴邊, 他到底是甚麼?

    每個人都Python Python的掛在嘴邊, 他到底是甚麼?
    你聽過很多人提過Pyhton卻不知道他是甚麼可以用來幹嘛嗎? 那麼今天的文章你一定要好好看一下!!
     
    (繼續閱讀...)
    文章標籤

    Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(16)

    • 個人分類:
    ▲top
    • 3月 08 週五 201913:00
    • 前端工程師分不出這個就掉漆了!! Class和ID哪裡不一樣?

    前端工程師分不出這個就掉漆了!! Class和ID哪裡不一樣?
    不想當個掉漆的前端工程師就快把這篇學起來~ 一次搞清楚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) 人氣(17)

    • 個人分類:
    ▲top
    • 3月 08 週五 201910:00
    • 前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼

    前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼
    讓前端工程師輕鬆學會顏色代碼相關知識就是這一篇啦!! 詳細的解說一定不能錯過!!
    網頁顏色是在全球資訊網(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; }  
     
    其他閱讀
     

    前端工程師和後端工程師的差異,想學網頁的你也一定要知道!


     


    網頁設計課程必學CSS基礎一:要怎麼在HTML中導入化妝師CSS?


     


    HTML5教學----CSS基礎語法:字型與文字排列相關順序


     


    網路行銷課程用兩招讓你輕鬆了解黑帽白帽SEO的不同!


     


    人工智慧進駐白色巨塔,預測敗血症高達八成五準確率!


     


    實體商店的大福音!!用人工智慧幫你自動偵測缺貨標錯價!


     


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


     

     


    (繼續閱讀...)
    文章標籤

    Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(12)

    • 個人分類:
    ▲top
    • 3月 07 週四 201920:00
    • 前端工程師基本功!! CSS語法格式詳細介紹在這裡!!

    前端工程師基本功!! CSS語法格式詳細介紹在這裡!!
    你是菜鳥前端工程師嗎? 那麼今天就來打打基礎吧!! 這篇要介紹的是CSS的語法基礎格式, 一定要學起來啊!!
    在這篇中提到:CSS 的用處好比 HTML 的化妝師,此篇再加以說明 CSS 的特性。
    (繼續閱讀...)
    文章標籤

    Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(13)

    • 個人分類:
    ▲top
    «1...76777895»

    個人資訊

    Java瑪奇朵
    暱稱:
    Java瑪奇朵
    分類:
    職場甘苦
    好友:
    累積中
    地區:

    熱門文章

    • (34)日本首座自駕車公園盛大完工~人工智慧讓自駕車不再是夢!!
    • (1,219)HTML5教學教你如何做出逼真的書本翻頁動畫!!
    • (10,704)想做出精美的翻頁效果? HTML5教學6種變化直接告訴你!!
    • (25)你玩過人工智慧合成人臉,但你聽過貓也可以合成嗎? 貓咪合成後竟變這樣?
    • (61)Python不是大蟒蛇也不唸“派桑”~那到底怎麼唸呢?
    • (17)前端工程師和後端工程師的差別是什麼?
    • (2)UI設計課沒教的事:五個關於黑色的設計用法與意義~(上)
    • (25)一張圖秒懂Python,人工智慧和機器學習之間的關係!!
    • (1,310)人工智慧破解馬賽克!!64倍解析還原成無碼真心不騙!!
    • (48)AI人工智慧命名各種傻眼:甜點篇

    文章分類

    • SEO (1)
    • SEO (30)
    • 設計 (1)
    • 設計 (36)
    • 網路行銷 (1)
    • 網路行銷 (1)
    • 網路行銷 (1)
    • 網路行銷 (15)
    • 前端工程師CSS基礎課程 (36)
    • 11月第四週分享 (5)
    • 11月第三週分享 (5)
    • 11月第二週分享 (5)
    • 11月第一週分享 (5)
    • 第五週學習 (5)
    • 第四週學習 (5)
    • 第三週學習 (5)
    • 第一週學習 (5)
    • 第二週學習 (5)
    • 程式設計課程相關 (444)
    • Java課程心得 (7)
    • 吃喝電玩 (7)
    • 未分類文章 (1)

    最新文章

    • 人工智慧如何在戰火連天的烏俄地區幫助烏克蘭?
    • 討論度爆棚元宇宙時裝周竟犯這種失誤?完美步上20年前的後塵?
    • Google一出手就要打趴YouTube零廣告第三方撥放器?
    • 2022討論度最高的七大面向突破不可不知!!
    • 前端工程師開發網頁好助手非Emmet莫屬?為什麼?
    • Python和Java搞清楚差別了嗎?到底該怎麼選擇呢?
    • 日本最新發明讓你在虛擬的元宇宙裡也能體驗觸覺和痛覺!!
    • 人工智慧專業操盤手幫你選好潛力股和加密貨幣~真的能信嗎?
    • 台大打造人工智慧眼科診斷軟體,助糖尿病友預防視網膜病變!!
    • 使命必達的人工智慧機器人也要丟飯碗了?!人類不用再怕被取代了?

    動態訂閱

    文章精選

    文章搜尋

    誰來我家

    參觀人氣

    • 本日人氣:
    • 累積人氣: