·  7月前
Exp. 38  ·  1 貼文  ·  4 留言

關於第一課HTML的作業

川豪你好,真的很謝謝你整理提供的教材 :)

這是我第一課的作業:https://jsfiddle.net/yyj1017/w3xL2765/71/ 參考文章:https://www.storm.mg/article/793743

在寫作業的時候有遇到一些問題: 想請問若是要在Paragraph裡面同一段文字中做出不同Style(color/font-size),該怎麼做才是正確的呢?像是在參考文章中的內文首段,第一個字很大,內文裡面有連結的地方也呈現了不同的顏色。 我試著從Inspect找,但目前還沒找出解答,真的很不好意思問你這麼基礎的問題!

  分享   共 689 次點閱
共有 10 則留言
尤川豪   ·  7月前
Exp. 1,872  ·  241 貼文  ·  178 留言

你好~我看到你的作業囉,寫得非常好,已經超出第一課要求的進度了!

學習目標都有達成~不用擔心!

你提到的問題在第二課、第三課都會提到,可以先讀讀看!

包住特定元素,但是不要讓它換行的話,可以用 <span> 元素

連結的元素變色,則是在 css 內用 a 元素設定即可~

繼續加油摟~期待看到你之後的作業!

 
tales   ·  7月前
Exp. 56  ·  0 貼文  ·  5 留言

哈囉, 透過 CSS 的 ::first-letter,你可以直接選取首字,而不需要額外使用 HTML 標籤, https://css-tricks.com/almanac/selectors/f/first-letter/

這是一種稱作虛元素( pseudo-element )的選取器,理解起來有一點抽象, 但是也能在不少地方發揮作用,屬於稍微進階一點點的 CSS 技巧

另外還有一種叫做 initial-letter 的屬性可以用: https://css-tricks.com/almanac/properties/i/initial-letter/

但是瀏覽器大多都還不支援,所以建議用 ::first-letter 即可

關於 ::first-letter 的瀏覽器相容性報表: https://caniuse.com/#feat=css-first-letter

 
尤川豪   ·  7月前
Exp. 1,872  ·  241 貼文  ·  178 留言

謝謝!

   ·  7月前
Exp. 38  ·  1 貼文  ·  4 留言

謝謝你們的解答~~今天開始進入第二課CSS!

 
尤川豪   ·  7月前
Exp. 1,872  ·  241 貼文  ·  178 留言

加油加油~

期待看到你之後的作業~!

   ·  6月前
Exp. 38  ·  1 貼文  ·  4 留言

川豪你好,我的第二課作業完成了~~

作業:https://jsfiddle.net/yyj1017/za6Lo3vg/70/

參考文章:https://www.storm.mg/article/793743

也謝謝tales教我的::first-letter,很好用!

但有個問題是第一個字因為比較大,影響到了第一行跟第二行之間的行距。請問該怎麼做才能完全跟參考文章一樣呢?

另外有一些寫作業時的小疑問,如果不看靠肉眼去判斷數值這樣是對的嗎?(例如font-size, line-height等等)還有也會想說html/css格式該怎麼樣寫才是最精簡最正確的,不知道有沒有一個檢視的辦法?

謝謝你們!

 
尤川豪   ·  6月前
Exp. 1,872  ·  241 貼文  ·  178 留言

你好,看到你寫的「化妝品廣告刊登前要先審查嗎?大法官曾判定違憲 食藥署要修法」作業了

還原度非常高,幾乎跟原本網頁長得一樣,寫得非常好!

關於你的問題

第一個字因為比較大,影響到了第一行跟第二行之間的行距。請問該怎麼做才能完全跟參考文章一樣呢?

原網頁看起來第一個字佔了兩行,請參考

如果不看靠肉眼去判斷數值這樣是對的嗎?

請參考 Google Chrome 的開發者工具 https://developers.google.com/web/tools/chrome-devtools/?hl=zh-tw

html/css格式該怎麼樣寫才是最精簡最正確的,不知道有沒有一個檢視的辦法?

沒有標準答案,每個人、每間公司作法不同

請 google 關鍵字:

  • html best practice
  • html code convention

附上 google 的推薦寫法給你參考:https://google.github.io/styleguide/htmlcssguide.html

下次建議發一篇新的貼文交作業唷!可以讓比較多人看到,一起來給你意見

加油摟,期待看到你的下一份作業!

   ·  6月前
Exp. 38  ·  1 貼文  ·  4 留言

好的!謝謝你這麼仔細回答我的問題~~~ 新年快樂 :)

Kevin Hou   ·  6月前
Exp. 156  ·  2 貼文  ·  12 留言

亂入補充個人意見,關於 "......格式該怎麼樣寫才是最精簡最正確的"
我自己連CSS格式都不太懂還是能排版啊,全都是用 Bootstrap 做的跟 CSS 語法相關度很低,HTML 後來也都用 emmet 幫我自動補完了,所以真的不見得有"絕對正確"的格式或做法,都是參考各家思想後的取捨。
想要一開始就符合市面上常見的做法 (例如公司有所規範,但個人認為這是公司端該事先規劃好的事情,初學者不該煩惱這個),可以在編輯器裡面用 linter (語法檢查工具) 試試,這類工具會根據規則集 (也就可以採用各種最佳實務),讓程式自動化提醒你何時該用什麼格式,就像開自動導航在寫程式一樣。
但不建議像我一樣一開始就取 Bootstrap 跟 emmet 這兩條捷徑啦哈哈,想真的搞懂前端還是要踏實地研究 HTML/CSS 原理的。

   ·  6月前
Exp. 38  ·  1 貼文  ·  4 留言

感謝前輩的補充 :)

您的留言
Exp. 38  ·  1 貼文  ·  4 留言
  查看個人檔案