今天的前端工程師專欄要和大家分享<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)

學會學好Python就是你邁向高新科技一族的基石!! 想知道為甚麼就快往下讀~
Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(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) 人氣(5)
前端工程師看了上篇也一定要看的下篇今天在這邊奉上!! 上下兩篇要一起學起來喔~
目錄 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)

你是一位前端工程師嗎? 你還不懂甚麼是CSS繼承關係嗎? 那就趕快往下看~學好學滿吧!!
Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(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) 人氣(1)

你聽過很多人提過Pyhton卻不知道他是甚麼可以用來幹嘛嗎? 那麼今天的文章你一定要好好看一下!!
Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(16)
不想當個掉漆的前端工程師就快把這篇學起來~ 一次搞清楚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)
讓前端工程師輕鬆學會顏色代碼相關知識就是這一篇啦!! 詳細的解說一定不能錯過!!網頁顏色是在全球資訊網(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 宣告語法如下: <body> <h1 style="color:#CD5C5C">Indian Red Title Text</h1> <p style="color:#000000">Slate gray paragraph text</p> </body> CSS 宣告語法如下: h1 { color: #CD5C5C ; } p { color: #000000; } 其他閱讀 前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
網頁設計課程必學CSS基礎一:要怎麼在HTML中導入化妝師CSS?
HTML5教學----CSS基礎語法:字型與文字排列相關順序
網路行銷課程用兩招讓你輕鬆了解黑帽白帽SEO的不同!
人工智慧進駐白色巨塔,預測敗血症高達八成五準確率!
實體商店的大福音!!用人工智慧幫你自動偵測缺貨標錯價!
Java課程、UI課程、程式課程、網路行銷課程推薦
Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(12)

你是菜鳥前端工程師嗎? 那麼今天就來打打基礎吧!! 這篇要介紹的是CSS的語法基礎格式, 一定要學起來啊!!
在
這篇中提到:CSS 的用處好比 HTML 的化妝師,此篇再加以說明
CSS 的特性。
Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(13)