Int's blog

CSS: text-align

發表於 2022-07-30

text-align是css中用來對齊文字的屬性，可以將文字設定為靠左、靠右、置中等等。

left

靠左對齊。

1
2
3

h1 {
	text-align: left;
}

right

靠右對齊。

1
2
3

h1 {
	text-align: right;
}

center

置中。

1
2
3

h1 {
	text-align: center;
}

justify

將文字用不同空格隔開以達到整個文字區塊寬度相等(除了最後一行)。

1
2
3

h1 {
	text-align: justify;
}

justify-all

與jutify基本相同，但最後一行也會包括在內。

1
2
3

h1 {
	text-align: justify-all;
}

start

靠元素開頭對齊。

1
2
3

h1 {
	text-align: start;
}

end

靠元素結尾對齊。

1
2
3

h1 {
	text-align: end;
}

match-parent

與父元素相同的對齊方式，但如果父元素的元素方向和子元素不同會以父元素的為準。

1
2
3

h1 {
	text-align: match-parent;
}

上述提到的元素方向比較常見於因為float或flexbox所導致的軸線方向變換。

JQuery介紹

發表於 2022-07-29 更新於 2022-08-05

此文章為觀看六角學院「jQuery基礎教學」影片之筆記。

什麼是JQuery

JQuery是一個Javascript的函式庫，通常被用於網頁動畫呈現，優點是小、輕量、內容豐富且支援多個瀏覽器，所以很常被使用在網頁設計上。

載入方式

要把JQuery加入到自己的作品內有幾個方法:

官網下載

CDN

1	https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js

其他版本CDN

npm或yarn
1
npm install jquery
1
yarn install jquery

當然還有其他下載方法，詳細可以參考官網

範例程式

1
2
3

$(document).ready(function(){
	$('h1').hide();
})

在JQuery中使用了$()來代替listener，所以裡面會放置選擇器，再使用.functionname()來觸發目標函式以達到想要的效果。

常見函式

動態載入、改變屬性等等都是JQuery常見的用法，所以有時候觀看原始碼時會發現有些部分在HTML中工程師並沒有寫任何東西，那他可能是透過JQuery進行動態載入。例如常見的Nivo Slider都是使用JQuery作呈現。

APIS

關於JQuery的所有函式都可以在官網文件找到:傳送門

CSS: font

發表於 2022-07-28

字型在網頁設計中是必不可少的一部份，這篇會來簡單介紹字型的屬性以及一些注意事項。

預設字體

每種作業系統與瀏覽器都有自己的預設字體，這裡主要介紹Windows和Mac，因為這兩種作業系統在PC上的市佔率最高。

Windows: 常用中文字體有三種:新細明體(預設)、微軟正黑體、標楷體。英文有一種: Segoe UI。要特別注意雖然windows預設是新細明體，但在網頁設計上都會改成使用較好閱讀的微軟正黑，新細明體字體太細不適合閱讀，算是windows小雷的地方。
Mac: 中文: 蘋方(預設)

其他系統預設英文字體可以參考這篇

在讀設計稿時常常會遇到一個問題: 設計師用Mac/Windows內建字體設計，我的電腦沒有那個字體怎麼辦，這時候只要使用你的系統的預設字體即可，比如windows就用微軟正黑，Mac就用蘋方。

在css中載入字型

1
2
3

.body {
	font-family: 第一種字形, 第二種字形, "第三 種字形" 
}

想要在css中載入內建字體可以使用font-family，瀏覽器會從第一種字形開始套用，找不到就會套用第二種，以此類推，一般來說直接把字形名稱寫上去就好了，但如果遇到字體名稱有空格或無法載入就要加上單引號或雙引號。

載入外部字體

除了作業系統內建的字體我們也可以載入外部字體，最常用的就是Google Fonts，因為這樣就沒有跨作業系統而缺字體的問題。

一般來說中文會使用Noto Sans TC，這是Google與Adobe共同開發的開源字體，英文則會使用Roboto。
載入詳細步驟可以參考這篇

字重

font還有一個屬性叫做font-weight，可以調整字體的粗細，可以細分為100、200…到900這幾種，不過要注意有些字體只有支援少數幾種字重，比如說微軟正黑只有Light(100)、Normal(400)、Bold(900)三種，所以大家才會選擇使用Google Fonts的Noto Sans TC，因為他支援100~900的字重。

在觀看設計稿時也要特別注意設計師設計的字重，常見的有Medium、Regular(Normal)、Bold，Normal是預設，Medium與Bold轉換成數字分別對應到500與900。

更多關於字重的介紹可以看這篇

從Chrome開發人員工具觀看是否套用成功

Chrome提供了非常強大的網頁開發工具，我們在自己撰寫網頁時可以用這個工具來看各種檔案的屬性與載入成功與否等等，這裡會介紹如何觀看字型是否套用成功。

以這個例子來說，這是我自己撰寫的網站，我在英文字體的部分套用了Roboto字體，打開工具後我選取了Functional這個英文。

選取後點擊右下角的Computed，之後拉到最下面有一個Rendered Fonts。

上面會看到我現在使用的字體與字重(這裡是Roboto Medium)

css懶人包

這個懶人包包含了所有常見預設字體，依序為Mac->Windows->Android->IOS->通用字體，其中Arial與sans-serif為最常見也最多瀏覽器支援的字體，如果不想特別設計字體可以使用這個懶人包。

1
2
3

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
}

CSS: background-attachment

發表於 2022-07-27 分類於 css background

background-attachment可以設定背景圖片、文字與viewport的關係，有三個屬性。

fixed

1
2
3

.box{
	background-attachment: fixed;
}

背景會被固定在viewport上，意及不管怎麼滾動網頁，背景圖都不會改變。

local

1
2
3

.box{
	background-attachment: local;
}

外層網頁在滾動的時候內層背景與內文會跟著滾動，滾動內層元素的時候背景與內文也會跟著移動(背景被固定在內文的位置)。

scroll

1
2
3

.box{
	background-attachment: scroll
}

滾動外層網頁時的效果和local相同，但滾動內層的時候只有內文會滾動，背景圖會被固定在viewport上(背景被固定在元素上)。

範例

建議使用0.5x觀看

從上到下分別是fixed、local、scroll，最後一個則是因為有兩張背景圖，所以分別設定了scroll和local兩個屬性，這理想示範的是可以同時為不同背景設定不同屬性。

CSS: background-clip

發表於 2022-07-26 分類於 css background

background-clip可以設定背景圖片會延伸到哪裡，和origin不同，origin是設定起點，從上次的範例就可以看出來，圖片下方還是會延伸到border底下。

上次的範例

background-clip有四種屬性:

border-box

1
2
3

.box {
	background-clip: border-box;
}

border-box會讓圖片延伸到border底下。

padding-box

1
2
3

.box {
	background-clip: padding-box;
}

padding-box會讓圖片延伸到padding底下，但border底下不會有圖片，會留白。

content-box

1
2
3

.box {
	background-clip: content-box;
}

content不會讓圖片超出content box的範圍，所以如果你的元素有padding和border，這兩個地方都會留白。

text

.box {
	background-clip: text;
	-webkit-background-clip: text;
  	color: transparent;
}

text不會讓圖片超出文字的部分，比較像是幫文字填色，但填的是圖片，要特別注意使用時要加上後面兩行，color的用意是避免圖片載入失敗，此時會導致text沒有顏色，加上color以避免這個情況，至於webkit是chrome的寫法，其他瀏覽器要稍微注意語法的支援。

範例

建議使用0.5x觀看

CSS: background-origin

發表於 2022-07-25 更新於 2022-07-26 分類於 css background

background-origin可以設定背景圖片的起點位置，分為以下三種:

border-box

border-box會讓圖片從border正下方開始延伸，意即border會覆蓋在圖片上。

padding-box

padding-box會讓圖片從padding開始延伸，所以border底下會留白，這個也是background-origin的預設值。

content-box

content-box會讓圖片從content開始延伸，所以border和padding的部分會留白。

範例

結語

要注意的是如果沒有下no-repeat，看起來會沒有差別，不過一般來說都會設定no-repeat就是。

CSS: background-size

發表於 2022-07-24 分類於 css background

background-size顧名思義，可以調整圖片的大小，除了可以用數字來調整外，還包含以下幾個值:

contain

1
2
3

.box{
	background-size: contain;
}

讓圖片盡可能填滿整個元素，並且用不裁切或擠壓到的方式，如果填不滿就會用repeat的方式填滿(除非你把repeat設為no-repeat，關於repeat可以看這篇)

cover

1
2
3

.box{
	background-size: cover;
}

把圖片盡量縮小成可以完全塞進去元素的大小，如果圖片會超出去元素，多的部分就會被裁掉。

auto

1
2
3

.box{
	background-size: auto;
}

在不改變圖片的任何屬性的情況下用圖片填滿背景。

範例

除了以上三個屬性，還可以使用px、%、em等等單位，之後再配合background-position來調整位置，比較常見的作法是使用cover搭配background-posiiotn: center，如此就可以把圖片居中，並顯示出正中間的圖案。

CSS: background-position

發表於 2022-07-23 分類於 css background

關於其他background的屬性都有提到，想要調整background的位置就要利用background-position這個屬性，除了各種數字單位外還可以使用top、bottom、left、right、center。

可以看到在box1我使用了center，所以背景圖片會居中，如果使用了top、bottom、left、right就會分別靠上、靠下、靠左、靠右。

也可以像box2那樣，寫了bottom和right之後分別寫上數字，此時圖片就會位於從右數來35%的位置，從下數來45%的位置。

CSS: background-repeat

發表於 2022-07-22 分類於 css background

當用圖片當作背景圖案填滿元素時，除非刻意事先裁切圖片大小，不然不可能圖片會和元素大小一樣，更何況會有RWD的需求，在不同裝置上元素大小都可能會不同，那這時候圖片無法填滿的地方會怎麼呈現？ CSS會有一個屬性叫做background-repeat，並且預設值為repeat，所以就會出現下面的情況。

可以看到圖片用重複出現的方式填滿整個box，那如果不想要重複怎麼辦？這時候我們就可以利用background-repeat來做調整。

repeat

1
2
3

.box {
	background-repeat: repeat;
}

這是預設值，會沿著x軸與y軸重複(意即橫的跟直的方向都會用重複圖片的方式填滿)

repeat-x

1
2
3

.box {
	background-repeat: repeat-x;
}

只會沿著x軸(橫向)重複圖片，直的方向不會，直的填不滿會留白。

repeat-y

1
2
3

.box {
	background-repeat: repeat-y;
}

只會沿著y軸(直向)重複圖片，橫的方向不會，橫的填不滿會留白。

no-repeat

1
2
3

.box {
	background-repeat: no-repeat;
}

不重複任何圖片，填不滿的地方會留白。

結語

一般來說都會使用no-repeat並搭配background-position和background-size來調整圖片，通常不太會用repeat，又或者只會用到repeat-x來做出色塊重複的效果，單純的repeat或repeat-y很少使用。

CSS: background-image

發表於 2022-07-21 分類於 css background

background-image可以為元素的背景設定圖像，通常是放上外部的圖片，不過除了圖片也能用其他的顏色函式(例如rgba、linear-gradient等)為背景上色，並且可以疊加。

linear-gradient

linear-gradient函式可以做出顏色漸層，搭配background-image就可以做出以下效果:

設定幾個顏色就會有幾個顏色由上到下依序等分漸層，如果你設定了to left、to right或是to bottom(如box2)，就會從指定的方向漸層(範例中為向左漸層)，如果設定數字，就會在指定的位置才開始出現漸層，以box2為例，紅色我設定為75%，所以從右邊向左邊漸層，到75%的地方才會開始出現漸層，同時也能使用角度來設定方向(如box3)。

圖層疊加

背景圖片也能疊加，可以圖片與圖片疊，也可以圖片與顏色疊加

他會從最後一個開始，一層一層疊上去。

結語

通常使用了background-image都還會配合background-position和background-size來調整位置，可以看考上一篇background