布萊恩的創業小窩

設定背景顏色原來對前端工程師來說超必須!這篇文章讓你超容易入門! 使用背景顏色設定 (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

前端工程師不能不知道的CSS背景常識之一,就是背景圖樣!要怎麼搞定它?這篇文章大解密! 除了 純色背景 之外， 前端工程師 也可以選擇使用背景圖樣設定(background-image)屬性，使用圖片取代純色作為網頁的背景。若網頁的主題不複雜的話，高質感的圖片可以讓網頁整體看起來更加豐富！使用圖片當背景需要注意網頁在不同的平台(如電腦、手機等裝置)，顯示出來的效果是不一樣的！最後必須要確認背景圖片是否能夠與網頁主體和諧搭配得巧妙，且也要避免出現喧賓奪主的失誤。 背景圖樣設定 (background-image)屬性跟 背景顏色設定 (background-color) 屬性一樣，能夠設定的範圍除了網頁背景外， 前端工程師 也可以用之來設計網頁內元素，如表格、DIV 區塊、H1-H6 等的背景圖樣，更可與 背景重複屬性(background-repeat) 、 背景固定模式屬性 (background-attachment) 、 背景圖片位置屬性 (background-position) 搭配做網頁設計。 CSS background-image 基本語法如下： background-image: url("圖片URL位址"); 其中 url 小括號內有三種可以使用的參數，分別為 none（預設值，不顯示圖樣）、inherit（繼承自上一層的圖片）以及本例的「 url("圖片URL位址") 」圖片網址這三種。以下有兩個範例分別為設定整個網頁的背景圖片以及網頁內元素的背景圖片。 CSS background-image 語法範例一、網頁背景 background-image: url("圖片URL位址"); See the Pen background-image-example by Tedutw ( @Tedutw ) on CodePen . CSS background-image 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景圖案設定 div(可替換成 h1、p 等網頁元素標籤){background-image: url("圖片URL位址");} See the Pen background

前端工程師課程今天破例,直接分享讓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背景的五種方法(一)背景固定模式設定 前端工程師設定CSS背景的五種方法(二)背景位置設定 前端工程

前端工程師課程教你如何設定背景的位置,讓它乖乖地待在你規定的地方! 前端工程師 可用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 bot

如何固定模式讓前端工程師教你!第一關讓你輕鬆過關,立馬進入狀況! 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. 背景固定模式設定 (b

前端工程師課程的盒子模型,終於分享第二篇了!之後靠著這兩篇我什麼都不怕! 複習：在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。 相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。這篇主要介紹邊框及留白： 目錄 1. 邊界 (margin) 2. 邊框 (border) 3. 留白 (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 的例子，可以看見內容的字緊鄰黑色的邊框 以下是有設定 padding 的例子, 可以看見內容的字與邊框有一段距離.這一段距離就是所謂的「padding」。padding會吃到背景色。 See the Pen margin：上 左右 下; (三個值)-加上邊框 by Tedutw ( @Tedutw ) on CodePen . Padding 的上下左右調整，語法跟 Margin 一樣，已身為前端工程師的同學特別強調，順序很重要。列舉如下：

盒子模型是前端工程師必了的知識之一!今天用兩篇文章讓你直接KO這盒子! 盒 子模式 (box model) 是在 CSS 中一個很重要的觀念。它是用來描述一個元素是如何組成的。上圖是盒子模式的式樣（請參考上圖）。 在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。其中，邊界是用來設定各個元素之間的距離的。 相關的 CSS 指令，由外至內依照順序為：邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下： 目錄 1. 邊界 (margin) 2. 邊框 (border) 3. 留白 (padding)   邊界 如我們在盒子模式那一頁看到的，邊界 (margin) 是在邊框之外，並且是用來設定各個元素之間的距離。一個盒子有四個邊，所以我們可以對這四個邊逐一設定為： margin-top (上邊界) margin-right (右邊界) margin-bottom (下邊界) 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 Marg in-2 by Tedutw (

想要將前端工程師的字體單位基礎打好,唯有把兩種字體單位學好學滿! 在 CSS ，字體單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位：（本篇介紹主要介紹 相對單位 ） 分別介紹如下： 目錄 1. 絕對單位   px (pixel 畫素)   cm / pt / in / pc / mm   large, medium, small 2. 相對單位   em   rem   %   larger, smaller   另一個 前端工程師 必知的字體單位：相對單位 em em 是相對單位，為每個子元素透過「倍數」乘以它的 父元素 (上一層元素) 的值。讓我們為 前端工程師 舉以下例子：在預設字體為 16px 的前題下，如果我們每一層 div 區都設定為 1.5em，則第一層子元素就是 16px x 1.5 = 24px；第二層子元素就是上一層元素的 1.5 倍，為 24px x 1.5 = 36px；由此類推...到第五層就會是 16px x 1.5 x 1.5 x 1.5 x 1.5 x 1.5 = 121.5px。 See the Pen #demo-em by Tedutw ( @Tedutw ) on CodePen . rem rem 是相對單位，跟 em 的差別是，em 是每個元素乘以其上一層元素 (就是父元素) 的值；而 rem 為每個元素透過「倍數」乘以「根」元素 (就是它的「最」上層元素，通常都是預設大小) 的 px 值。如下例所示：若預設字體大小為 16px，如果每一層 div 都使用 1.5rem，無論是第一層子元素還是第五層的子元素，大小永遠是 16px x 1.5 = 24px。 See the Pen #demo-rem by Tedutw ( @Tedutw ) on CodePen . % % 也是CSS字體類別中的相對單位，跟 em 一樣都為每個元素乘以其上一層元素 (就是父元素) 的值，差別只是 em 是倍數單位；而 % 就是百分比單位。如在預設字體為 16px 的前題下，如果我們每一層 div 區都設定為 150%，則第一

你是前端工程師嗎?那兩種主要的字體單位你絕對不能不知道!快來更深入了解! 在 CSS ，字體單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位：（本篇介紹主要介紹 絕對單位 ） 分別介紹如下： 目錄 1. 絕對單位   px (pixel 畫素)   cm / pt / in / pc / mm   large, medium, small 2. 相對單位   em   rem   %   larger, smaller   前端工程師 必知的字體單位：絕對單位 px (pixel 畫素) px 為 CSS 最常用的單位。無論字體大小、區塊或其他元素的尺寸設定，都少不了它的蹤影。一般認為：px 會依據螢幕解析度而變化、平時被歸類為相對尺寸。但為何在 CSS 裡面就變成絕對尺寸呢？因為在 CSS 裡面，絕對尺寸的定義是「 不會繼承上層父元素的設定 」的尺寸。在 CSS 中，無論設定多少 px，它就會精確的呈現，他都不會繼承沿襲上一層的父元素的尺寸。如以下例子所示，就是若使用 px 這個單位來設定大小，那麼不管頁面上其他的尺寸設定，都不會影響到他。 而 px 的定義，理論上就是：一個像素 px 意思就是螢幕上最小的一點：16 px 就是 16 點大小。 See the Pen #demo-px by Tedutw ( @Tedutw ) on CodePen . cm、pt、in、pc、mm 這些單位比較適用於印刷的排版軟體，在 CSS 比較少用。分別解釋如下： in：英吋，在 96 dpi 的系統上 1 in = 96 px。 cm：公分，在 96 dpi 的系統上 1 cm = 37.795275593333 px。 mm：公釐，在 96 dpi 的系統上 1 mm = 3.7795275593333 px。 pt：印表機的每個「點」，定義為 1 pt ＝ 1/72 in，如果在 72 dpi 的系統上 1 px = 1 pt，但如果在 96 dpi 的系統上 1 px = 0.75 pt ( 72/96 = 0.75 )。 pc：picas，定義為 1 pc ＝ 12 pt。 in