iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
自我挑戰組

html與css粗淺新手入門教學系列 第 2

html字體的變化

讓網頁出現文字後想要改變文字的大小、顏色、字型...這時候就需要用到css了,你可以再新建一個檔案並存為css檔,並且與這個html檔連結,這裡使用html檔內嵌css的方式
在head裡新增style元素,寫在style裡的內容就會被定義為css
https://ithelp.ithome.com.tw/upload/images/20210902/20140086We2i8uesEv.jpg
為了明確區分我想定義的文字,我在文字外包一層div,並以class取名為class1
https://ithelp.ithome.com.tw/upload/images/20210902/20140086LZFMp4j4hX.jpg
接下來在style中呼叫class1(.在css中可以作為class的代號),將class1中的字體大小定義為50px
https://ithelp.ithome.com.tw/upload/images/20210902/20140086yEWEK5qkJj.jpg
照上篇中的方法開啟網頁就可以看到他的效果
https://ithelp.ithome.com.tw/upload/images/20210902/2014008619Yxk8dwuD.jpg
可以在做網頁的過程中邊檢查邊調整需要的參數,學會方法以後只要知道其他的語法就能任意改變字體外型了!
以下示範一些文字變化(綠色的文字為註解,不會被當作機器碼)
https://ithelp.ithome.com.tw/upload/images/20210902/20140086154VMnk090.jpg
https://ithelp.ithome.com.tw/upload/images/20210902/20140086NUXsp1E8zr.jpg
https://ithelp.ithome.com.tw/upload/images/20210902/20140086xxChxY2EsG.jpg
https://ithelp.ithome.com.tw/upload/images/20210902/20140086xcL6b5Y5pA.jpg
https://ithelp.ithome.com.tw/upload/images/20210902/20140086edhlml1TTd.jpg
https://ithelp.ithome.com.tw/upload/images/20210902/20140086s25tn5IkJO.jpg
https://ithelp.ithome.com.tw/upload/images/20210902/20140086r6RZg2pPc9.jpg
https://ithelp.ithome.com.tw/upload/images/20210902/20140086L5KZBYMKz4.jpg


上一篇
html的開始、讓網頁出現文字
下一篇
html清單
系列文
html與css粗淺新手入門教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言