分類彙整:CSS 語法 – 網頁設計

CSS選取器 教學:CSS 語法「群組化」

CSS選取器 - css 群組化

常常我們的 CSS選取器 中會有好幾個地方需要使用到相同的設定時,一個一個分開寫會是一件滿累人的工作,重覆性太高且顯得冗長,更不好管理….在 CSS語法的基本設定中,就可以把這幾個相同設定的CSS選擇器合併在一起,原本可能是寫了 7~8 行相同的語法,合在一起後就只要短短的一小行,怎麼看都讓人心曠神怡啊~ 繼續閱讀

in CSS 語法 - 網頁設計

【好站分享】「Flexbox Froggy」學習 Flexbox 的遊戲網站

首頁為第一關畫面

最近小編發現了一個不錯的遊戲網站 – 「 Flexbox Froggy 」,所以來跟大家分享一下~
遊戲的主旨很簡單,就是利用輸入正確 Flexbox 語法指令, 來幫助畫面中的青蛙們回到荷葉上;很重要的一點:有繁體中文版耶~!
當然,語法指令還是需要用英文輸入的啦… 繼續閱讀

in CSS 語法 - 網頁設計, Free Resource 好康報報, Good Design 好站報報

Google Fonts 線上字體推出 5 款免費的中文網頁字型

思源黑體

Google 繼發表了開源的(免費的)思源黑體字型之後,又另外推出了 5 款免費的 中文網路字型,分別是:楷體、圓體、仿宋體、黑體、明體 5 種字體。比起我們這幾年一直在使用的 微中正黑體 是不是好看多了!感謝 Google 願意提供這麼多免費的開源字體給我們使用,感謝!感謝! 繼續閱讀

in CSS 語法 - 網頁設計, Free Resource 好康報報

CSS教學分享文 – 重複背景圖之語法練習

步驟一:HTML架構

今天要來分享的 CSS 語法練習,其實是之前有一篇「固定背景圖教學文」的延伸版,要教大家利用上一篇的網頁版型,來做重複背景圖片的語法練習。
如果是第一次加入的新朋友,要請您先參考上一篇之後,再來 follow 本篇教學才會比較銜接得上喔!請大家先準備好兩張素材圖片,我們就要進入正式的練習囉!
Ready~~~ Go!… 繼續閱讀

in CSS 語法 - 網頁設計

【設計資源】 – Google Fonts 免費雲端字庫-實作篇

步驟一:新建HTML

大家好,上次已經有介紹過「 Google Fonts 」這個雲端字庫的免費資源,這次的教學分享,小編會利用一個簡單的網頁版型來作示範,實際教大家如何將雲端上面的字體套用到自己的網頁裡。
不論是「 Google Fonts 」或是 CSS 語法的初學者,都別錯過這次練習的好機會喔… 繼續閱讀

in CSS 語法 - 網頁設計, Free Resource 好康報報, Good Design 好站報報

【設計資源】 – Google Fonts 免費雲端字庫-導覽篇

google fonts index

在之前的設計資源分享文,我們跟大家介紹了新開放下載使用的思源宋體,以及「Google Noto Fonts」這個可免費下載字體的網站。
今天要跟大家進一步介紹的網站,是不僅可以下載字體到自己電腦裏頭使用,另外,還可以透過 CSS 語法功能,立即套用到網頁上的雲端字體庫 – 「Google Fonts」… 繼續閱讀

in CSS 語法 - 網頁設計, Free Resource 好康報報, Good Design 好站報報