更新日期: 2022 年 11 月 6 日
<form>表單標籤是Html的各類標籤中比較複雜的部分，剛開始接觸時，你可能覺得大概就跟其他的標籤一樣，一個一個放上去便可以成功的在網頁上展示出一個表單，但真的開始去做時，很容易一不小心就被一堆不同的標籤(tag)、屬性(attribute)、值(value)弄得頭暈，然後再被一堆看起來都一樣的值搞混。
會產生這樣的狀況，是由於HTML為了讓表單可以滿足各類型資料的需求，使表單具有顯示各種輸入格式的功能，例如有些表單可以填入文字，有些只能填入數字、E-mail、日期，有些則可能要勾取選項，還分複選跟單選，而這些各式各樣的格式，需要不同的標籤及屬性來建立，如此一來，便提高表單建立上的複雜性。
東西一多，就複雜了，就好比買一杯咖啡給一位同事，跟包辦公司100位分屬5個單位的同仁的咖啡，還分冷熱、大小杯，複雜程度難以相比，後者可說是個工程了。
回歸正題，表單除了要能填寫外，寫好的資料還需要送到後端，把資料遞交出去，所以標籤的屬性又牽涉到後端，例如method與action。
…
更新日期: 2022 年 11 月 6 日
想成功地套用CSS樣式到網頁上，除了瞭解權重(specificity)之外，CSS繼承(inheritance)也是一個很重要的觀念，可以讓你更清楚樣式套用的優先程度，讓你期望的樣式順利的顯示。
如果你只知道CSS權重，卻沒有CSS繼承的概念，會讓你在使用CSS時，總是有種只知其一，不知其二，好像少了什麼東西的感覺，常常弄不懂樣式到底要怎麼寫，才可以如你所願的展現出來。
本文將帶你瞭解繼承的邏輯是什麼，以及2個繼承的重要特性，讓你簡單弄懂CSS世界中的繼承是什麼。
…CSS繼承(inheritance):1個可能被你忽略的重要觀念 Read More »
更新日期: 2022 年 11 月 1 日
使用CSS製作網頁動畫，Transition、Transform、Animation這3個有關CSS動畫的屬性肯定是很常碰到，然後也很容易在不同的屬性名稱、屬性值之間搞混，尤其Transition、Transform，甚至還有Translate，一堆T開頭的英文名稱，好像就讓腦容量滿載了，還沒製作動畫前，腦袋就動不起來了。
為了能夠讓腦袋動起來，學習CSS動畫的操作前，先來看看動畫是如何產生的，對於理解你理解CSS各種屬性的使用，會更有概念。
動畫，其實就是一堆靜止圖像，連續變化而產生的。
也許，你可能就有過自製動畫的經驗，在書本上畫上各種圖案，快速翻動，就變成了一個小動畫，例如下方的影片，就是手繪影格的實例。
CSS Transition屬性的4個操作 Read More »
更新日期: 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 的語法，這個屬性使用起來，你會更得心應手。
…2個要點了解CSS圓角屬性border-radius操作 Read More »
更新日期: 2022 年 9 月 11 日
人類生而不平等，CSS樣式也是。
如果將CSS擬人化，CSS世界內的樣式們可分為6種階級，階級高的樣式權重大，瀏覽器優先採用，階級低的樣式權重小，則會被覆蓋掉，無法嶄露頭角。
CSS全名為「Cascading Stylesheets，階層樣式表」，名稱中的階層(Cascading)便明白的告訴你，樣式們是有層級、有階級的，樣式生而不平等。
在樣式並非各個平等的情況下，便衍生出那個樣式比較重要、權力比較高，得以優先展現在網頁上。而這樣的比較便是CSS權重，英文為specificity，直譯過來是指樣式的獨特性，也稱之為優先等級，本文統一以「權重」稱之，取樣式們之間的權力與重要性比較的特性。
…CSS權重(specificity)：熟悉這6個樣式級別，讓你的樣式被採用 Read More »