更新日期: 2022 年 11 月 6 日
想成功地套用CSS樣式到網頁上，除了瞭解權重(specificity)之外，CSS繼承(inheritance)也是一個很重要的觀念，可以讓你更清楚樣式套用的優先程度，讓你期望的樣式順利的顯示。
如果你只知道CSS權重，卻沒有CSS繼承的概念，會讓你在使用CSS時，總是有種只知其一，不知其二，好像少了什麼東西的感覺，常常弄不懂樣式到底要怎麼寫，才可以如你所願的展現出來。
本文將帶你瞭解繼承的邏輯是什麼，以及2個繼承的重要特性，讓你簡單弄懂CSS世界中的繼承是什麼。
…
更新日期: 2022 年 11 月 1 日
使用CSS製作網頁動畫，Transition、Transform、Animation這3個有關CSS動畫的屬性肯定是很常碰到，然後也很容易在不同的屬性名稱、屬性值之間搞混，尤其Transition、Transform，甚至還有Translate，一堆T開頭的英文名稱，好像就讓腦容量滿載了，還沒製作動畫前，腦袋就動不起來了。
為了能夠讓腦袋動起來，學習CSS動畫的操作前，先來看看動畫是如何產生的，對於理解你理解CSS各種屬性的使用，會更有概念。
動畫，其實就是一堆靜止圖像，連續變化而產生的。
也許，你可能就有過自製動畫的經驗，在書本上畫上各種圖案，快速翻動，就變成了一個小動畫，例如下方的影片，就是手繪影格的實例。
更新日期: 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 的語法，這個屬性使用起來，你會更得心應手。
…
更新日期: 2022 年 9 月 11 日
人類生而不平等，CSS樣式也是。
如果將CSS擬人化，CSS世界內的樣式們可分為6種階級，階級高的樣式權重大，瀏覽器優先採用，階級低的樣式權重小，則會被覆蓋掉，無法嶄露頭角。
CSS全名為「Cascading Stylesheets，階層樣式表」，名稱中的階層(Cascading)便明白的告訴你，樣式們是有層級、有階級的，樣式生而不平等。
在樣式並非各個平等的情況下，便衍生出那個樣式比較重要、權力比較高，得以優先展現在網頁上。而這樣的比較便是CSS權重，英文為specificity，直譯過來是指樣式的獨特性，也稱之為優先等級，本文統一以「權重」稱之，取樣式們之間的權力與重要性比較的特性。
…
更新日期: 2022 年 9 月 11 日
CSS選擇器，是讓你設計的樣式可以套用到HTML上的重要工具，瞭解選擇器中的逗號、空格、加號等符號能讓你更加靈活運用選擇器。
選擇器的存在，就好像讓HTML與CSS檔案由原本兩個不同頻率的人，在選擇器的協助下得以到同一個頻道上，彼此溝通，相互合作。讓HTML中的標籤知道去CSS檔案中的哪個地方套取樣式 ； CSS檔案檔案中的樣式，也知道樣式們要各自放到哪個HTML標籤去。
當你學會基本的元素選擇器(element selector)、類別選擇器(class selector)、ID選擇器(ID selector)，準備一展身手，好好的運用CSS在網頁上時，你可能會發現，咦，選擇器怎麼好像有點複雜，那些逗號、空格及其它讓人困惑的符號是怎麼一回事?
就讓本文為你解惑，帶你一探CSS選擇器中的逗號、空格、>、~、+符號功用，還有怎麼閱讀選擇器可以讓你不再迷失在選擇器大海中。