生活必備咖啡因程式碼-店長Yui大小事

3月 07 週四 201921:05
前端工程師入門:網頁顏色代碼對照表

前端工程師必須記的顏色代碼對照表!!

連顏色都不放過?前端工程師的技能:網頁顏色代碼對照表
網頁顏色是在全球資訊網(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 宣告語法如下：
/* In your .css stylesheet */ h1 { color: #CD5C5C ; } p { color: #000000; }

推薦閱讀:

網頁設計學習零負擔-簡易的HTML5教學

HTML5教學教你網頁設計標籤的活用

你也能成為HTML5教學的化妝師

厭世代正風行?來上Java課程可以幫你扭轉困境!

高薪像做夢?!Java課程讓你夢想成真!

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

搶救低薪大作戰,再不來上Java課程就來不及了!

(繼續閱讀...)

uidesignxiaoshow 發表在痞客邦留言(0) 人氣(41)

個人分類：好物分享

▲top

3月 04 週一 201900:14
前端工程師一定要知道的''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>
父選擇器子選擇器 {
屬性：設定值；
...
}

(繼續閱讀...)

uidesignxiaoshow 發表在痞客邦留言(0) 人氣(9)