尤川豪   ·  5月前
Exp. 1,633  ·  213 貼文  ·  146 留言

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

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

  分享   共 2,136 次點閱
共有 7 則留言
   ·  3週前
Exp. 31  ·  0 貼文  ·  5 留言

哈瞜,謝謝你的教材,這是我完成的作業 https://jsfiddle.net/mooju7463/yu24wnfp/79/ 原文:https://www.storm.mg/article/860547

想請問以這份作業來說在CSS當中 我第一個標題h1的所有css調整都run不動,當我為一開始的國際 影音 科學新知的標題做padding後,h1的css調整就run過了,這是什麼原因阿?

第一個人字,嘗試第一個字放大的效果還是失敗了 initial-letter這個與法好像無法使用,其他的做法也不行 ,請問哪邊做錯了呢? 謝謝你的幫助!

 
尤川豪   ·  2週前
Exp. 1,633  ·  213 貼文  ·  146 留言

你好,我看到你的「海平面升高7公尺」作業了,內容沒問題,學習目標都有達成,別擔心

關於你的問題

  1. 看起來就是過程中有打錯字 之後誤打誤撞變正確而已

  2. 參考 https://devs.tw/post/157

黃俊豪  ·  2週前
Exp. 12  ·  0 貼文  ·  2 留言

Hello版主,這是我的第二份作業:https://jsfiddle.net/n19911028/p0fvL4ka/66/ 參考文章為:https://www.storm.mg/lifestyle/1126813
覺得比較可惜的點一直沒辦法像參考文章那樣只將第一個字放大

 
尤川豪   ·  1週前
Exp. 1,633  ·  213 貼文  ·  146 留言

「低頭族」作業,寫得很好,別擔心!目標有順利完成!

關於第一個字,參考:https://devs.tw/post/157

JiaSin Choong  ·  1週前
Exp. 12  ·  0 貼文  ·  2 留言

版主你好,我完成了我的第二份作業:https://jsfiddle.net/elichoong/qhyvLmgx/108// 參考文章:https://www.storm.mg/lifestyle/1142662?srcid=gAAAAABcrrWh8uGS0EtBCAqM7QOgoMmRPOfMXH8ok51gga2jFHqvqjc9BhPyoluweYoIRvYvyNb8HAkPmOmA2zPJ1-0GiVzePeR7TTRGZZWWTxXK0X0jW9c%253D

參考了前面的留言,不知道為什麼第一個字放大之後無法佔據兩行的空間,只能像我做的這樣在第一行放大,有點苦惱QQ

 
尤川豪   ·  1週前
Exp. 1,633  ·  213 貼文  ·  146 留言

別擔心,作業寫得很好!目標都有完成!

關於第一個字的問題,我也沒在實務上做過這種效果。

想要研究的話,可以 po 到發問區,大家一起討論討論!

tales   ·  10小時前
Exp. 50  ·  0 貼文  ·  4 留言

你好,使用 ::first-letter 選取到段落中的首字之後,便可以將這個字設定為任意屬性,就像是另外將這個字包在一個標籤中再用 CSS 定義一樣

範例頁面中的首字佔用兩行的效果,是將首字設定為 float: left 。一旦加上了 float 的屬性,這個字就成為了浮動元素,不會與其他行內元素排列,會像是在水中的氣泡一樣浮動到母元素的頂端, float 是 left 就往左靠, 是 right 就往右靠,直到它碰到另一個浮動元素為止

而其他非浮動元素會繞過浮動元素,所以實際上這不是讓首字佔據兩排,而是

  1. 讓首字浮到左上方
  2. 其他的文字按照正常的方式繼續排列
  3. 其他文字繞開浮在左上方的浮動元素
  4. 左上方的浮動元素佔用的空間剛好等於兩行,所以排列到第三行的文字不會碰到浮動元素,不需要繞開它

所以看起來就像是首字一次佔據兩行。

然而設定為浮動元素之後,就會有一些副作用,比方說

  1. 母元素會當作裡面沒這個東西(無法使用浮動元素撐開母元素的尺寸)
  2. 非浮動元素會繞開浮動元素的這個特性,對其母元素之外的東西也有作用 (就是所謂的 "清除浮動" 問題)

所以 float 用在像是首字放大這種地方還好,用在其他排版目的上就要小心,能不用就儘量不要用,避免麻煩。

您的留言