網頁開發

3個要點弄懂HTML的Form表單

Form表單

最後更新時間: 2022 年 9 月 11 日

<form>表單標籤是Html的各類標籤中比較複雜的部分,剛開始接觸時,你可能覺得大概就跟其他的標籤一樣,一個一個放上去便可以成功的在網頁上展示出一個表單,但真的開始去做時,很容易一不小心就被一堆不同的標籤(tag)、屬性(attribute)、值(value)弄得頭暈,然後再被一堆看起來都一樣的值搞混。

會產生這樣的狀況,是由於HTML為了讓表單可以滿足各類型資料的需求,使表單具有顯示各種輸入格式的功能,例如有些表單可以填入文字,有些只能填入數字、E-mail、日期,有些則可能要勾取選項,還分複選跟單選,而這些各式各樣的格式,需要不同的標籤及屬性來建立,如此一來,便提高表單建立上的複雜性。

東西一多,就複雜了,就好比買一杯咖啡給一位同事,跟包辦公司100位分屬5個單位的同仁的咖啡,還分冷熱、大小杯,複雜程度難以相比,後者可說是個工程了。

回歸正題,表單除了要能填寫外,寫好的資料還需要送到後端,把資料遞交出去,所以標籤的屬性又牽涉到後端,例如method與action。

CSS繼承(inheritance):1個可能被你忽略的重要觀念

CSS繼承

最後更新時間: 2022 年 9 月 11 日

想成功地套用CSS樣式到網頁上,除了瞭解權重(specificity)之外,CSS繼承(inheritance)也是一個很重要的觀念,可以讓你更清楚樣式套用的優先程度,讓你期望的樣式順利的顯示。

如果你只知道CSS權重,卻沒有CSS繼承的概念,會讓你在使用CSS時,總是有種只知其一,不知其二,好像少了什麼東西的感覺,常常弄不懂樣式到底要怎麼寫,才可以如你所願的展現出來。

本文將帶你瞭解繼承的邏輯是什麼,以及2個繼承的重要特性,讓你簡單弄懂CSS世界中的繼承是什麼。

CSS Transition屬性的4個操作

CSS Transition

最後更新時間: 2022 年 9 月 11 日

使用CSS製作網頁動畫,Transition、Transform、Animation這3個有關CSS動畫的屬性肯定是很常碰到,然後也很容易在不同的屬性名稱、屬性值之間搞混,尤其Transition、Transform,甚至還有Translate,一堆T開頭的英文名稱,好像就讓腦容量滿載了,還沒製作動畫前,腦袋就動不起來了。

為了能夠讓腦袋動起來,學習CSS動畫的操作前,先來看看動畫是如何產生的,對於理解你理解CSS各種屬性的使用,會更有概念。

動畫,其實就是一堆靜止圖像,連續變化而產生的。

也許,你可能就有過自製動畫的經驗,在書本上畫上各種圖案,快速翻動,就變成了一個小動畫,例如下方的影片,就是手繪影格的實例。

2個要點了解CSS圓角屬性border-radius操作

2個要點了解CSS圓角屬性border-radius操作

最後更新時間: 2022 年 9 月 11 日

CSS調整邊框圓角的屬性border-radius,可以讓你的網頁元素的四個角產生圓弧。

例如一個長寬50px的方形,利用border-radius:50%便可以變身成為一個半徑為25px,直徑為50px的圓形。

div{
  width:50px;
  height:50px;  
  background-color:#ffd28d;
  border-radius:50%;
}

See the Pen by Ory (@SLSuccess) on CodePen.

使用 border-radius 你需要掌握的2個要點是圓的半徑,以及圓的位置。

進入正題之前,如果你想要快速的製作出不同的border-radius圖形,不想探究如何操作,你可以在網路上搜尋各種 border-radius 產生器,例如border-radius.com這個網站,試著在方形的四個角,填入不同的數值,來取得你要的圖形。

然而,如能夠仔細的了解 border-radius 的語法,這個屬性使用起來,你會更得心應手。

CSS權重(specificity):熟悉這6個樣式級別,讓你的樣式被採用

CSS權重熟悉這6個樣式級別,讓你的樣式被採用

最後更新時間: 2022 年 9 月 11 日

人類生而不平等,CSS樣式也是。

如果將CSS擬人化,CSS世界內的樣式們可分為6種階級,階級高的樣式權重大,瀏覽器優先採用,階級低的樣式權重小,則會被覆蓋掉,無法嶄露頭角。

CSS全名為「Cascading Stylesheets,階層樣式表」,名稱中的階層(Cascading)便明白的告訴你,樣式們是有層級、有階級的,樣式生而不平等。

在樣式並非各個平等的情況下,便衍生出那個樣式比較重要、權力比較高,得以優先展現在網頁上。而這樣的比較便是CSS權重,英文為specificity,直譯過來是指樣式的獨特性,也稱之為優先等級,本文統一以「權重」稱之,取樣式們之間的權力與重要性比較的特性。