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 你需要掌握的2個要點是圓的半徑,以及圓的位置。

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

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

免費閱讀萬本電子書?購買HyRead閱讀器前該懂的6個優缺點

HyRead Gaze Note and Pocket

HyRead的電子書閱讀器可以買嗎?

如果是幾年前,我的回答是否定的,但最近開始使用HyRead的閱讀器後,咦~是我誤會了什麼嗎?還是HyRead這幾年真的有進步?

好好的體驗後,發現其實還挺好用的,閱讀時的翻書速度滿快的,與之前覺得他翻書速度很慢的印象不同,畢竟閱讀器最大功能就是看書,翻書必須流暢才可以,整個對這品牌的閱讀器有所改觀。