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

前端工程師們~ 今天的專欄要來和大家談的是背景固定模式設定!! 這基本功一定要會喔!!
CSS background-attachment 是

前端工程師用來決定背景圖片是否要跟著滑鼠滾動而上下移動的，有三種不同的呈現方案，第一種為當滑鼠上下滾動時，背景圖片與網頁主體跟著上下滾動；第二種為當滑鼠上下滾動時，背景圖片相對位置固定不動，呈現效果就像是網頁主體與背景是分開的，；第三種為當滑鼠上下滾動時，背景圖片絕對位置固定不動，似乎網頁主體是浮在背景圖之上的感覺。CSS background-repeat 一般來說與 背景圖樣設定 (background-image) 一起搭配設計。
 
CSS background-attachment 基本語法如下：
background-attachment: 顯示參數;
有三種可以使用的顯示參數可供前端工程師們決定背景圖與網頁主體該以何種方式來搭配顯示，分別為 scroll（預設值，背景圖案的「相對位置」不會隨著滾動機制而移動，而網頁主體則會跟著滾動）、fixed（背景圖案的「絕對位置」不會隨著滾動機制而移動，而網頁主體則還是會跟著滾動，彷彿網頁主體是浮在整張背景圖之上的感覺。多用於網頁背景圖為滿版的場合時使用）、local（背景圖案與網頁主體都會跟著滾動機制而滾動。以下是針對這三種參數的範例：
 
CSS background-attachment 各種參數的範例
See the Pen background-attachment-example by Tedutw (@Tedutw) on CodePen.

現在新一代的網頁多採滿版設計，其中的「background-attachment: fixed;」參數，常被當代的前端工程師搭配「background-repeat: no-repeat;」參數使用，做出網頁主體都浮在高質感的背景圖的效果。

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

其他閱讀
前端工程師專欄:CSS套入HTML中的四種方法~
前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
你知道SEO優化最佳幫手的正確打開方式嗎? 看這篇就對了!!
美國NASDAQ上市公司、外商IT教育培訓企業
 
 

 
這一篇要來告訴大家一個前端工程師一定要會的技巧!! 就是CSS的背景顏色設定!! 超實用一定要會喔!!
前端工程師使用背景顏色設定 (background-color)屬性，可以讓簡潔的純色背景襯托出網頁的主體、也可以決定網頁的風格。像是背景純黑的網頁與背景為粉紅色的網頁，風格就大不相同。其實 background-color 能夠使用的範圍除了網頁背景色外，也可以用來設計表格、DIV 區塊、span 等網頁元素的背景顏色。前端工程師可要好好利用喔~
 
CSS background-color 基本語法如下：
background-color: 顏色名稱或色碼 ;
background-color 可以使用的顏色值包含顏色的英文名稱、十六進位制色碼以及 RGB 色碼，挑選顏色請參考：網頁顏色代碼對照表。
 
CSS background-color 語法範例一、網頁背景
html{background-color: 顏色名稱或色碼 ;}
See the Pen background-color-bg-example by Tedutw (@Tedutw) on CodePen.

 
CSS background-color 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景顏色
div(可替換成 h1、p 等網頁元素標籤){background-color: 顏色名稱或色碼 ;}
See the Pen background-color-div-example by Tedutw (@Tedutw) on CodePen.
同樣的技巧還可以用在其他的網頁元素，若想採用圖片當成背景，請參閱：2. 背景圖樣設定 (background-image)。

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

 
 
其他閱讀
 
前端工程師專欄:CSS套入HTML中的四種方法~
前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
你知道SEO優化最佳幫手的正確打開方式嗎? 看這篇就對了!!
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
 
 
 
 

前端工程師專欄今天一次給妳四種不同的CSS背景重複顯示設定方法!! 快點筆記下來吧!!
CSS background-repeat 是

前端工程師用來設定背景圖片是否重覆顯示、重覆顯示的方向，一般來說與 背景圖樣設定 (background-image) 搭配一起使用。如果背景圖片是比較小的圖片，則可以使用 background-repeat 把小圖片自動佈滿整個網頁背景，是相當普遍的節省頻寬設計方式 (但是圖片圖樣要單純一些，以免視覺雜亂)；當背景圖片是一張具有顯示範圍較大的圖片，則可以用 background-repeat 的「no-repeat」指令將圖片限制只顯示一次。
 
CSS background-repeat 基本語法如下：
background-repeat: 重複參數;
有四種可以使用的重複參數供前端工程師們來決定重複方向或是是否重複，分別為 repeat（預設值，圖片會沿著 x 軸與 y 軸重複）、repeat-x（圖片會沿著x軸重複）、repeat-y（圖片會沿著y軸重複) 以及 no-repeat (不重複)。以下是針對這四種參數的範例：
 
CSS background-repeat 各種參數的範例
See the Pen background-repeat-example by Tedutw (@Tedutw) on CodePen.

其實除了上例的四個參數，還有一個 inherit 屬性，是繼承父層屬性的意思。但是因為部分瀏覽器 (如IE) 不支援，可能造成部分的人開啟網頁發生排版錯誤、或是圖片呈現錯誤。所以很少人使用，因此在此省略不介紹。

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

其他閱讀
前端工程師專欄:CSS套入HTML中的四種方法~
前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
人工智慧寫作能力勝過人類,文章新聞真假難辨!
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
 
 

前端工程師們~有人總是覺得自己網頁背景看起來有一點不對勁嗎? 那一定要檢查一下你的背景位置設定啊!!
CSS background-position 是讓

前端工程師用來定義背景圖片位置的，是 CSS background 的屬性之一，一般來說與 背景圖樣屬性 (background-image)、背景重複參數 (background-repeat)一起搭配做網頁設計，來決定網頁背景圖片顯示位置，可以調整背景圖片靠上(top)、下(bottom)、左(left)、右(right)或是置中(center)。設計時需下水平位置與垂直位置的參數，可以數字、百分比或方向等為單位，讓圖片能夠在正確的位置呈現。
各種方向參數：
水平方向：left - 靠左對齊、center - 置中對齊、right - 靠右對齊
垂直方向：top - 靠上對齊、center - 置中對齊、bottom - 靠下對齊
CSS background-position 基本語法如下：
background-position: 背景圖片水平位置參數 背景圖片垂直位置參數 ;
前端工程師通常使用水平方向與垂直方向的組合，來定義背景圖片呈現的位置。例如「background-position:left top;」這樣代表背景圖片靠左上角對齊。除此之外，還可以微調「靠左與靠上的距離或百分比」來設計，範例如以下所示：
background-position:right top;　// 靠右靠上對齊
background-position:right center;　// 靠右置中對齊
background-position:right;　// 靠右置中對齊(如果您僅定義了一個參數，那麽第二個參數將會默認為「center(置中)」。)
background-position:right bottom;　// 靠右靠下對齊
background-position:left top;　// 靠左靠上對齊
background-position:left center;　// 靠左置中對齊
background-position:left;　// 靠左置中對齊(如果您僅定義了一個參數，那麽第二個參數將會默認為「center(置中)」。)
background-position:left bottom;　// 靠左靠下對齊
background-position:top center;　// 靠上置中對齊
background-position:bottom center;　// 靠下置中對齊
background-position:center;　//背景圖片水平位置與垂直位置均置中對齊
background-position:30px 60px;　//靠左 30px 靠上 60 px 的位置(第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)
background-position:10% 50%;　// 靠左 10% 靠上 50% 的位置(第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)
background-position:10%;　// 效果同上一行，靠左 10% 靠上 50% 的位置 (如果您僅規定了一個值，另一個值默認為 50%。)
 

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

其他閱讀
前端工程師專欄:CSS套入HTML中的四種方法~
前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
你知道SEO優化最佳幫手的正確打開方式嗎? 看這篇就對了!!
美國NASDAQ上市公司、外商IT教育培訓企業
 

前端工程師專欄今天要來教你如何讓背景變漂亮!! 想知道的話快往下看吧!!

前端工程師必備技能!! 背景固定模式設定你會了嗎? 這一篇一次介紹給你三種模式設定!! 快來看看是哪三種吧!!
CSS background-attachment 是

前端工程師用來決定背景圖片是否要跟著滑鼠滾動而上下移動的，有三種不同的呈現方案，第一種為當滑鼠上下滾動時，背景圖片與網頁主體跟著上下滾動；第二種為當滑鼠上下滾動時，背景圖片相對位置固定不動，呈現效果就像是網頁主體與背景是分開的，；第三種為當滑鼠上下滾動時，背景圖片絕對位置固定不動，似乎網頁主體是浮在背景圖之上的感覺。CSS background-repeat 一般來說與 背景圖樣設定 (background-image) 一起搭配設計。
 
CSS background-attachment 基本語法如下：
background-attachment: 顯示參數;
有三種可以使用的顯示參數可供前端工程師們決定背景圖與網頁主體該以何種方式來搭配顯示，分別為 scroll（預設值，背景圖案的「相對位置」不會隨著滾動機制而移動，而網頁主體則會跟著滾動）、fixed（背景圖案的「絕對位置」不會隨著滾動機制而移動，而網頁主體則還是會跟著滾動，彷彿網頁主體是浮在整張背景圖之上的感覺。多用於網頁背景圖為滿版的場合時使用）、local（背景圖案與網頁主體都會跟著滾動機制而滾動。以下是針對這三種參數的範例：
 
CSS background-attachment 各種參數的範例
See the Pen background-attachment-example by Tedutw (@Tedutw) on CodePen.

現在新一代的網頁多採滿版設計，其中的「background-attachment: fixed;」參數，常被當代的前端工程師搭配「background-repeat: no-repeat;」參數使用，做出網頁主體都浮在高質感的背景圖的效果。

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

其他閱讀
前端工程師專欄:CSS套入HTML中的四種方法~
前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
你知道SEO優化最佳幫手的正確打開方式嗎? 看這篇就對了!!
美國NASDAQ上市公司、外商IT教育培訓企業
 
 

 
今天的前端工程師專欄要來跟大家分享CSS背景顏色設定~ 沒學過的快學起來!! 學過得當複習喔~
前端工程師使用背景顏色設定 (background-color)屬性，可以讓簡潔的純色背景襯托出網頁的主體、也可以決定網頁的風格。像是背景純黑的網頁與背景為粉紅色的網頁，風格就大不相同。其實 background-color 能夠使用的範圍除了網頁背景色外，也可以用來設計表格、DIV 區塊、span 等網頁元素的背景顏色。前端工程師可要好好利用喔~
 
CSS background-color 基本語法如下：
background-color: 顏色名稱或色碼 ;
background-color 可以使用的顏色值包含顏色的英文名稱、十六進位制色碼以及 RGB 色碼，挑選顏色請參考：網頁顏色代碼對照表。
 
CSS background-color 語法範例一、網頁背景
html{background-color: 顏色名稱或色碼 ;}
See the Pen background-color-bg-example by Tedutw (@Tedutw) on CodePen.

 
CSS background-color 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景顏色
div(可替換成 h1、p 等網頁元素標籤){background-color: 顏色名稱或色碼 ;}
See the Pen background-color-div-example by Tedutw (@Tedutw) on CodePen.
同樣的技巧還可以用在其他的網頁元素，若想採用圖片當成背景，請參閱：2. 背景圖樣設定 (background-image)。

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

 
 
其他閱讀
 
前端工程師專欄:CSS套入HTML中的四種方法~
前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
你知道SEO優化最佳幫手的正確打開方式嗎? 看這篇就對了!!
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
 
 
 
 
 
 

身為前端工程師一定要懂的CSS邊框屬性解釋, 今天通通幫你一次整理好!! 讓大家一目了然記得清楚~
在 CSS 中常見的邊框 (border) 屬性，分別介紹如下列目錄：


目錄 border-width: 邊線的寬度 border-style：邊框樣式 border-color：邊線的顏色 border-top/left/bottom/right: 上/左/下/右框線 border: 四邊框線

border-width: 邊線的寬度

在CSS中border-width 屬性是前端工程師用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚)，或者是一個數值單位。

/*薄線寬*/.thin { border-width: thin; border-style:solid;}
/*中等線寬*/.medium { border-width: medium; border-style:solid;}
/*厚線寬*/.thick { border-width: thick; border-style:solid;}
/*自行設定線寬*/.number { border-style:solid; }

See the Pen #demo-border-width by Tedutw (@Tedutw) on CodePen.

border-width：邊線的樣式

border-style 屬性指定邊框的樣式。以下列出常見的 border-style 屬性以及顯示的結果：

/*實線的CSS*/.solid { border-style: solid; }
/*點線的CSS*/.dotted { border-style: dotted; }
/*虛線的CSS*/.dashed { border-style: dashed; }
/*雙線的CSS*/.double { border-style: double; }
/*凸線的CSS*/.ridge { border-style: ridge; }
/*凹線的CSS*/.groove { border-style: groove; }
/*嵌入線的CSS*/.inset { border-style: inset; }
/*浮出線的CSS*/.outset { border-style: outset; }

See the Pen #demo-border style by Tedutw (@Tedutw) on CodePen.

border-color: 邊線的顏色

border-color 屬性是前端工程師用來設定邊框的顏色。範例如下：

/*紅色邊框*/.red{ border-color: red;border-style:solid; }
/*藍色邊框*/.blue{ border-color: blue;border-style:solid; }

See the Pen #demo-border-color by Tedutw (@Tedutw) on CodePen.

border-top/left/bottom/right: 上/左/下/右框線

我們可以將上下左右的方向和樣式、寬度、及顏色合起來而成為一個屬性。舉個例來說，border-top-style 屬性就是用來設定上邊框的樣式。 以下舉幾個例子：  

/*上邊框為實線，下邊框為點線*/
.topbottom{border-top-style:solid; border-bottom-style:dotted;}
/*上邊框為實線，且寬度中等*/
.top{border-top-style:solid; border-top-width:medium;}
/*左邊框為實線，下邊框為紅色虛線*/
.leftbottom{border-left-style:solid; 
border-bottom-style:dashed; border-bottom-color:#00FF00;}

See the Pen #demo-border-top/left/bottom/right by Tedutw (@Tedutw) on CodePen.

border: 四邊框線

如果四邊的邊框屬性都一樣，那我們就可以在同一行用一個 border 屬性一次宣告邊框樣式、邊框寬度、以及邊框顏色，而不必四個邊都個別再描述一次。

container{...
border: 1px solid #000000;
...}

See the Pen 用一行來宣佈所有邊框的屬性 by Tedutw (@Tedutw) on CodePen.

今天的前端工程師專欄要跟大家分享的是CSS盒子模型中的邊框留白部分~ 上一篇是邊界篇,也不要漏掉嘍!!
盒子模式 (box model) 是在CSS 中一個很重要的觀念。它是前端工程師用來描述一個元素是如何組成的。以下是盒子模式的式樣：

在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。 相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下：


目錄 邊框 (border) 留白 (padding)


邊框
Border 指的是邊框，介於外側的邊界 (margin) 與內側的留白 (padding) 之間。前端工程師們不須要特別的設定，CSS 碼如下：  
border: 邊界值 實線或是虛線 顏色;
邊框設定範例如下：  
border: 1px solid #000000;
 
See the Pen margin：上下左右; (一個值) by Tedutw (@Tedutw) on CodePen.
以上面的範例來看，我們得到一個外層包了一層黑色 (色碼為 #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:[上面與下面與左邊與右邊留白值]

看過CSS字體單位絕對篇的前端工程師們也不要錯過今天要談的下篇----相對篇喔~!!
在CSS ，字體單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位： 分別介紹如下：