自學網頁の嬰兒教材:第2課 ── CSS 輕入門

第2課 課程目標

學會用id、class、元素名稱來指定特定元素

學會用CSS來替文字加上設計感,替文字變色、變大小、設計邊框、寬度、留白等等

第2課 課程內容

用jsfiddle來練習:

https://jsfiddle.net

這次要寫HTML跟CSS兩個區塊

請閱讀並練習這11份教學(不要緊張,內容很簡單):

CSS Syntax
CSS Colors
CSS Backgrounds
CSS Borders
CSS Margins
CSS Padding
CSS Height/Width
CSS Box Model
CSS Text
CSS Fonts
CSS Links

不習慣看英文,可以改看這裡:

CSS 基础语法
CSS id 选择器
CSS 类选择器
CSS 背景
CSS 框模型概述
CSS 内边距
CSS 边框
CSS 外边距
CSS 字体
CSS 文本
CSS 链接

把教學裡面的HTML、CSS程式碼,貼到 jsfiddle 裡面做練習,貼好之後按上面的 RUN 按鈕,就會在右下角的 Result 看到結果了。

讀完、練習完這11份教學裡面的程式碼,就算是學會CSS的基礎,能夠用CSS做美工、排版、設計了

第2課 作業

你在第1課的作業利用HTML,模仿端傳媒的文章,做了基本的文章排版。

這次的作業,請使用本次學到的內容,把上次的作業拿出來改,替文章加上各種色彩、字體大小、各種排版,讓文章看起來變漂亮。

(請至少替文章加上padding,讓文字不要貼著邊邊,看起來比較舒服)

完成這些,你就完成這次的課程目標了!

您好,本站內容已停止更新

我寫了一個新的平台網站,未來的新內容都會發佈在這裡:

https://devs.tw/series

請前往新網站,瀏覽更多的新內容。