iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
Modern Web

30天淺嘗主流前端設計系列 第 12

DAY12 進入CSS!! CSS的基本介紹4~~~

  • 分享至 

  • xImage
  •  

DAY12 進入CSS!!CSS的基本介紹4~~

今天要開始介紹css中的各種屬性!

  • color:
    這個就是很常見的設定顏色的屬性,在前面舉的例子中我們很常用color:red來設定顏色為
    紅色,但他還有其他種表達的方式,大家都知道所有的顏色都是從三原色也就是RGB中組合出來
    的,所以另外一種表示方式就是在color後面改為rgb(r%,g%,b%),中間放的就是你要的顏色的rgb比例~
    第二種表達方式也是跟rgb有關,也是我最習慣的方式,就是將rgb的比例先轉為0~255的數字,
    再轉為十六進位表示法,再以#開頭依序打上rgb的十六進位表示法,例如紅色就是#ff0000~
    將設定的屬性改為background-color就能改成設定背景的色彩喔!色彩的設定是一樣的~

  • opacity:
    我們可以利用這個參數來設定元素的透明度,無論是文字還是圖片都可以使用這個屬性,用法是在後面加上: 0.0~1.0的值~

  • font家族~:
    這裡我要介紹幾個跟文字很有關係的屬性,有font-family(字型),font-size(大小),font-weight(粗細), 第一種字型就是設定字體的意思,預設通常為新細明體,其他就要看使用者有沒有安裝~
    大小有許多設定方式跟顏色很像我這邊只介紹一種比較萬用的,就是以一般常見的單位來設定如:
    px(像素),cm(公分)等。粗細的話就是分為100~900總共9個等級,而預設的粗細是400(normal),以此類推可以
    使文字更細或更粗!~

  • text-indent:
    意思是文字的第一行進行多少的縮排,用法是在這個設定這個屬性的值為多少長度(如文字大小般設定),如: 1cm,10px...

-text-align:
這個是設定文字對齊方式的屬性,使用方法是將屬性的值設定為如:left(靠左對齊),
right(靠右對齊),center(置中對齊),當然還有其他的對齊方式~~~

-letter-spacing,word-spacing
前者是設定各個字母間的間距大小,後者是設定各個單字間的間距大小,有看出差別嗎我舉個例子:如how are you
透過前者設定一個空白單位的話就是 h o w a r e y o u,透過後者則是how are you這樣,
使用方法是將屬性的值設定為如:1cm,10px等長度單位,而這個值就是間距的距離~~

今天的課程就到這邊結束~~ 關於css我應該會用蠻多的篇幅去介紹因為有很多我覺得重要的屬性!!


上一篇
DAY11 進入CSS!! CSS的基本介紹3~
下一篇
DAY13 進入CSS!! CSS的基本介紹5~~
系列文
30天淺嘗主流前端設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言