尤 川豪   ·  3月前
Exp. 1,209  ·  152 貼文  ·  114 留言

自學網頁の嬰兒教材:第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,讓文字不要貼著邊邊,看起來比較舒服)

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

  分享   共 1,569 次點閱
共有 0 則留言
您的留言