2019年3月29日 星期五

前端工程師必學的課程:CSS background-attachment設定!

前端工程師必學的CSS課程:背景固定模式設定!
前端工程師必學的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. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)



相關閱讀:
怎麼用程式語言框住文字訊息與圖片?上HTML5教學就會了!
HTML5教學讓網路資訊動起來
HTML5教學與CSS語法:打造美感文字與字形
基礎HTML5教學小訣竅一-初學者可用的免費好上手編輯器!!
今天上的網路設計課程讓我大開眼界!快來看今天我學到什麼新技術!
Python課程帶來的科技日趨進步,多虧這群辛勞的”訓練員”!
 別懷疑!人工智慧寫作能力可能比你我還要厲害!!

2019年3月28日 星期四

前端工程師設計網頁小妙招:CSS 背景圖樣設定

設計豐富好看的網頁好難!?前端工程師用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位址");}

以上的範例中有兩個不同的 DIV 區塊,由第一個 DIV 區塊可以看到 background-image 預設的背景圖片,若背景圖片尺寸小於 DIV 區塊時,圖片則會自動重複到填滿整個區域。而第二個 DIV 區塊則使用了 background-repeat 來限制圖片顯示狀態只能沿著垂直方向重複。相關設定請參閱3. 背景重複設定 (background-repeat)

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


推薦閱讀:
網路行銷又添一利器(上):趕快來學免費的HTML5教學
教你為網站妝模作樣的CSS網頁設計課程
HTML5教學與CSS語法:打造美感文字與字形
原來個人獨一無二的3D虛擬人偶也能是網路行銷課程很好的題材!
不用怕HTML5教學太難~我們從簡單的學起
Python課程讓我明白,人生中誰都逃不過AI的法眼!
AI人工智慧創造多元就業機會,學Python課程不怕找不到工作! 

2019年3月27日 星期三

前端工程師設計網頁小撇步:CSS背景重複顯示設定基本語法!

前端工程師用CSS背景重複顯示設定就搞定!小撇步報你知
小圖片自動佈滿整個網頁背景怎麼做到的!?前端工程師用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)



相關閱讀:
複製貼上快速搞定!給前端工程師的十六進位代碼常用顏色表!
想成為前端工程師必備知識:Class選擇器宣告法
前端工程師如何將CSS樣式表套用至HTML?
Python人工智慧出台灣奇蹟
上HTML5教學的必經之路1:先掌握初學者的敲門磚!
上Python課程的你,明年必看春節強檔-艾莉塔 戰鬥天使
Python課程新產物----AI門診你聽過嗎? 最新科技確診只要2秒!! 

2019年3月26日 星期二

前端工程師如何用CSS背景顏色基本語法決定網頁風格!?

前端工程師輕鬆用CSS背景顏色基本語法設定網頁風格!
前端工程師輕鬆用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?
前端工程師基礎CSS精選懶人包
前端工程師必學-CSS 常見邊框屬性解釋
神奇的「KISS 原則」網路行銷課程壓軸登場
網路行銷課程爆紅APP-打造屬於你的超Q人偶,一起跟好友互動!
SEO優化課程教你如何迅速設定好網頁的robots meta!!
HTML5教學讓你讀電子書更加賞心悅目!

2019年3月25日 星期一

前端工程師設計網頁必學:CSS背景位置設定


前端工程師設計網頁小撇步:CSS background-position
前端工程師設計網頁小撇步:CSS background-position

CSS background-position (CSS背景位置設定) 用來定義背景圖片位置,是 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的繼承關係:前端工程師的必備知識之一
前端工程師必學-CSS 常見邊框屬性解釋
前端工程師如何將CSS樣式表套用至HTML?
前端工程師的基本知識:ID選擇器宣告法
達內教育集團與HP.Intel攜手引領數位化職業教育
HTML5教學的必經之路3:標籤演變過程你要趕上呀!
不上Python課程不知道的事:Google到底在想什麼-上

2019年3月22日 星期五

前端工程師小知識:CSS盒子模式(下)

前端工程師必學的CSS盒子模式少不了邊框和留白!

前端工程師必學的CSS盒子模式少不了邊框和留白!

 

來複習一下,上一篇提到在盒子模式中,內容 (content) 是最內層的部分,接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。
相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。 今天就來說說邊框和留白的部分。

邊框

Border 是邊框,介於外側的邊界 (margin) 與內側的留白 (padding) 之間。不須特別設定, CSS 碼如下:
border: 邊界值 實線或是虛線 顏色;
邊框設定範例如下:
border: 1px solid #000000;

如以上範例,前端工程師可得到一個外層包了一層黑色 (色碼為 #000000) 實線 (solid)、寬度1px的框。 border的數值 前端工程師 只需要用空格分開即可,屬性不需要一個一個下,如:border-width、border-style、border-color 等等。

留白


padding(留白)外側緊鄰邊框 (border)、內側緊鄰內容 (content)。如果沒有設定 padding,內容的部分就會黏著邊框。padding 就會吃到背景色。

以下是沒有設定 padding 的例子,可以看見內容的字緊鄰黑色的邊框


以下是有設定 padding 的例子, 可以看見內容的字與邊框有一段距離.這一段距離就是所謂的「padding」。padding會吃到背景色。


Padding 的上下左右調整,語法跟 Margin 一樣,順序很重要。列舉如下:

padding:[上面留白值] [右邊留白值] [下面留白值] [左邊留白值]

padding:[上面留白值] [左邊與右邊留白值] [下面留白值]

padding:[上面與下面留白值] [左邊與右邊留白值] 

padding:[上面與下面與左邊與右邊留白值] 

相關閱讀:
前端工程師小知識:CSS盒子模式(上)
前端工程師小知識-CSS字體相對單位
前端工程師小知識-CSS字體絕對單位
什麼?現在可以精準醫療慢慢進步?難道我錯過Python課程了?
還不知道前端工程師該具備什麼能力?這篇可以輕鬆幫助到你!
哈佛公布全球前十大AI人工智慧企業領導人,百度第三!! 誰是冠軍?
網路行銷課程告訴你什麼才是人人喜愛的好文章!!

2019年3月21日 星期四

前端工程師小知識:CSS盒子模式(上)

前端工程師的CSS盒子模式是一個很重要的觀念,是用來描述一個元素是如何組成的。

前端工程師的CSS盒子模式是一個很重要的觀念,是用來描述一個元素是如何組成的。

在盒子模式,內容 (content) 是最內層的,再來依序是留白 (padding)、邊框 (border)和邊界 (margin)。邊界用來設定各個元素之間的距離。
CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下:
目錄
1. 邊界 (margin)
2. 邊框 (border)
3. 留白 (padding)

邊界

如我們在盒子模式那一頁看到的,邊界 (margin) 是在邊框之外,並且是用來設定各個元素之間的距離。一個盒子有四個邊,所以 前端工程師 可以對這四個邊逐一設定:
  1. margin-top (上邊界)
  2. margin-right (右邊界)
  3. margin-bottom (下邊界)
  4. 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 Margin-2 by Tedutw (@Tedutw) on CodePen.

在這裡,邊界的表現跟最前面的例子一樣:上邊界為 50px,左邊界和右邊界為 10%,下邊界為 auto。

使用這種簡化的表示方法,重點在於數字的順序:第一個值是上邊界的值,第二個值是右邊界的值,第三個值是下邊界的值,而第四個值是左邊界的值。

這種簡化 CSS 的一行文標示方法,還有其他的方式,介紹如下:

margin:上 右 下 左; (四個值)

如上方例子所示

margin:上 左右 下; (三個值)

margin: [上面邊界值] [右邊與左邊邊界值] [下面邊界值] 




margin:上下 左右; (二個值)

margin: [上面與下面邊界值] [右邊與左邊邊界值] 




margin:上下左右; (一個值)

margin: [上下左右邊界值] 

推薦閱讀:
前端工程師小知識:CSS盒子模式(下)
前端工程師小知識-CSS字體相對單位
前端工程師小知識-CSS字體絕對單位
嘿!快瞧瞧是怎樣的人工智慧機器讓這個零售業龍頭安心不少!?
原來個人獨一無二的3D虛擬人偶也能是網路行銷課程很好的題材!
史上最年輕Python工程師,他是怎麼辦到的?
JK羅琳就快被Python課程取代寫出哈利波特續集!?

2019年3月20日 星期三

前端工程師小知識-CSS字體相對單位

上篇介紹了前端工程師不可不知的小知識CSS字體絕對單位,這篇則要說說CSS的相對單位!

上篇介紹了前端工程師不可不知的小知識CSS字體絕對單位,這篇則要說說CSS的相對單位!


CSS 字體單位可以分為兩類:絕對 (absolute) 單位及相對 (relative) 單位

目錄
相對單位
em
rem
%
larger, smaller

相對單位

em

em 是CSS的相對單位,每個子元素透過「倍數」乘以它的父元素 (上一層元素) 的值。如以下例子:在預設字體為 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.


%


% 是相對單位,跟 em 一樣都為每個元素乘以其上一層元素 (就是父元素) 的值,差別只是 em 是倍數單位;而 % 就是百分比單位。如在預設字體為 16px 的前題下,如果我們每一層 div 區都設定為 150%,則第一層子元素就是 16px x 150% = 24px;第二層子元素就是上一層元素的 150%,為 24px x 150% = 36px;由此類推...到第五層就會是 16px x 150% x 150% x 150% x 150% x 150% = 121.5px。

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


larger / smaller


larger 和 smaller 就是以上一層 (父層) 的固定百分比為單位,larger 為父層的 120%,smaller 為父層的 80%。

See the Pen #demo-larger, smaller by Tedutw (@Tedutw) on CodePen.

推薦閱讀:
前端工程師小知識-CSS字體絕對單位
前端工程師必學-CSS 常見邊框屬性解釋
CSS的繼承關係:前端工程師的必備知識之一
HTML5教學告訴你使用語意標籤的最大的目的
HTML5教學讓你的電子書讀起來不再卡卡der!!
網美們愛用的IG,竟然是訓練AI人工智慧的好幫手?!
人工智慧真帶來了便利!MIT的這個APP,造就多少人的便利啊!