iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
自我挑戰組

node.js 前端後端全都要系列 第 3

Day3-文字藝術師:CSS

  • 分享至 

  • xImage
  •  

文字改變

在標籤中間,加上 style= 便可進行改變。

<p style="color:purple; font-size:18px;">紫色文字</p>

顏色可以用

  • rgb(紅,綠,藍)
  • hsl()
  • #顏色色碼

文字外框

可以在文字外加上外框與背景顏色,也一樣在style= 後加上即可。

<p style="background-color:purple; border:1px solid;">被1px大小圍起來、背景為紫色</p>

而如果要改變文字的排版,可以用padding 和 margin
padding 會改變外框與文字之間的距離。
margin 會改變外框外部在網頁中的距離。

與圖片的排版

若想要文字直接接在圖片的右邊或左邊,
可以用float讓圖片或其他需排版的文字(例如:左右的選單),來達成。

<img src="圖片名稱.jpg" width="寬度px" style="float:left;"/>

定位

position可以將圖片或文字框定位在畫面的某個位置。
固定定位 fixed 直接根據你給的位置做改變,且會跟著拉動而一起改變。

<div style="position:fixed; top:距離上方多遠; bottom:距離下方多遠; right:距離右邊多遠; left;距離左邊多遠"/>

相對定位 relative 根據你給的位置,從原本的位置偏移
絕對定位 absolute 若外層有做定位,則依據給予的改變,與外層一同改變。

引用CSS檔

最常使用的就是 link。

<link href="網址或位置" rel="stylesheet" />

即可直接引用CSS檔進來,更詳細的CSS選擇器可以參考:
https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048
https://www.runoob.com/cssref/css-selectors.html

參考連結(https://youtu.be/Ml78vnNTBLw)


上一篇
Day2-網頁的基本:HTML
下一篇
Day4-JavaScript
系列文
node.js 前端後端全都要25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言