標籤: css

Flex 空間計算規則

此篇是延續先前的 Flex 的文章(圖解:CSS Flex 屬性一點也不難),本篇則是著重在 flex 中的 flex-grow、flex-shrink 和 flex-basis 這三個屬性,如果對於 Flex 基礎尚不熟悉的可先閱讀前一篇文章。 首先,回顧下先前的三個屬性介紹: flex 是縮寫,裡面依序包含三個屬性 flex-grow、flex-shrink 和 flex-basis。 fl

CSS Border 運用技巧(手繪框線、三角形、空間運用)

CSS Border 大部份來說是用在裝飾上,卡片的邊線、hover 的視覺效果、物件之間的間隔等等,這些視覺效果除了 Border 以外亦有其它方式可以達到;雖然如此,Border 的使用率還是比較高,因為相對來說更為簡單方便,不過也別這樣小看它,透過一些小技巧時,Border 還有很多靈活運用的方式。 基本觀念介紹先了解 Border 基本的觀念,有助於接下來的靈活運用。 Border 具有空

CSS 技巧:精簡語法操作暗色主題 - CSS Dark Mode

Mac 暗色主題推出後,就讓黑色控非常喜愛,而且這樣的暗色佈景使用起來更不傷眼。以我來說是比較喜歡在亮色的佈景下工作的,但暗主題的對於長期需要在電腦面前工作來說,真的相對輕鬆很多。雖然如此,也並非所有的介面都是有提供暗主題,以網頁來說就需要開發者另外定義暗主題才會進行切換(不使用任何瀏覽器插件的情況下)。 好在,暗色主題的語法相當容易,以下介紹如何作切換,並且會提供一個小技巧,只要透過短短的幾行就

圖解:CSS Flex 屬性一點也不難

前幾篇有介紹過 CSS Grid Layout 的使用方法,當我們學習排版類型的 CSS 時,最好的方式是先作分類,以 Flex 與 Grid Layout 來說都有共同的特徵,就是他們有分為外容器屬性與內元件屬性。

CSS3 Grid Layout

CSS gird layout 在最近 Chrome 更新已經慢慢開始支援 (就是還很久才會完全支援的意思),這和 Bootstrap 或是 960 Grid 沒有任何關係,而是新的 CSS 語法。

CSS Grid 屬性介紹

CSS gird 在最近 Chrome 更新已經慢慢開始支援 (就是還很久才會完全支援的意思),開始之前還是來介紹一些語法。 與 CSS Flex 一樣,CSS Grid 用兩個部分來看比較快,一個是屬於外部容器的屬性,另一個是屬於內部容器的屬性;從外開始向內看可以加快理解的速度。

鐵人賽 30 - CSS 鐵人賽的結束與接下來的研究

相較於 Javascript 來說,CSS 的演進速度算是非常緩慢的,主要原因當然是瀏覽器的相容性,瀏覽器不太能因為新的特色加入而毀了以前所建置的網站。 在這個相對穩定的程式語言,精通一個的手法就可以活用的相當久,像是 Sass 來說,到目前為止他還是相當流行的前置語言。

鐵人賽 29 - CSS 實戰小技巧 - 不使用 important 的高優先值技巧

在維護舊的專案很多必須放下自尊,用一些手段來維持成果的運作,但有些作法如果過於殘暴可能會影響到未來的維護,CSS !important 就是一個很好用的手段,他可以直接將 CSS 的優先值拉到最高,並且超過標籤的 style 屬性樣式,那麼在未來就變成要修正這一段樣式無法再用 style 的方式覆蓋。 這邊介紹一招只需要用 className 就能夠大幅提升優先值的手法,讓想快速結束這回合,但又怕傷了未來萌新的善良人參考。