網頁開發

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

CSS繼承

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

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

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

CSS Transition屬性的4個操作

CSS Transition

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

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

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

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

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

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

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圖形,你可以很便利的在網路上找到各種 border-radius 產生器,例如border-radius.com這個網站,試著在方形的四個角,填入不同的數值,來取得你要的圖形。然而,如能夠仔細的了解 border-radius 的語法,這個屬性使用起來,你會更得心應手。

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

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

最後更新時間: 2022 年 1 月 7 日

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

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

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

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

CSS組合選擇器:5個選擇器符號功用介紹

CSS組合選擇器:5個選擇器符號功用介紹

最後更新時間: 2021 年 8 月 16 日

CSS選擇器,是讓你設計的樣式可以套用到HTML上的重要工具,瞭解選擇器中的逗號、空格、加號等符號能讓你更加靈活運用選擇器。

選擇器的存在,就好像讓HTML與CSS檔案由原本兩個不同頻率的人,在選擇器的協助下得以到同一個頻道上,彼此溝通,相互合作。讓HTML中的標籤知道去CSS檔案中的哪個地方套取樣式 ; CSS檔案檔案中的樣式,也知道樣式們要各自放到哪個HTML標籤去。

當你學會基本的元素選擇器(element selector)、類別選擇器(class selector)、ID選擇器(ID selector),準備一展身手,好好的運用CSS在網頁上時,你可能會發現,咦,選擇器怎麼好像有點複雜,那些逗號、空格及其它讓人困惑的符號是怎麼一回事?

就讓本文為你解惑,帶你一探CSS選擇器中的逗號空格、>、~、+符號功用,還有怎麼閱讀選擇器可以讓你不再迷失在選擇器大海中。