娶了UI設計師的Python工程師-北歐生活

前端工程師不藏私分享給你設定背景圖樣的小撇步!背景設定快學完啦! 除了 純色背景 之外， 前端工程師 也可以選擇使用背景圖樣設定(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-image-conten

背景顏色設定對前端工程師來說也超重要!所有技能都學完了,你就能獲得滿滿的競爭力! 使用背景顏色設定 (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 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 bo

固定CSS背景對前端工程師來說根本也是必須的技能之一!想要弄好背景這學不好就完啦! 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. 背景固定

像前端工程師般設定背景重複顯示一點也不難呀!快點繼續看下去! 前端工程師 利用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 中常見的邊框 (border) 屬性，分別介紹如下： 目錄   border-width: 邊線的寬度   border-style：邊框樣式   border-color：邊線的顏色   border-top/left/bottom/right: 上/左/下/右框線   border: 四邊框線   border-width: 邊線的寬度 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 ，字體單位可以分為兩大類：絕對 (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 區都設定

即使不是前端工程師也能超容易就學會的字體單位,看完這篇絕對讓你入門超順手! 在 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：

原來朋友口中一直提到的前端工程師的盒子就是這個!今天終於能了解完整! 複習：在盒子模式中，內容 (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 一樣，已身為前端工程師的同學特別強調，順序很重要。列舉如下：