iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 12
1
自我挑戰組

迷路的前端工程系列 第 12

第十二日:顏色

  • 分享至 

  • xImage
  •  

第十一日回顧:
在昨天,介紹了關於一些文字的設定,而今天要介紹如何調整元素的顏色,廢話不多說,讓我們馬上開始吧

一開始,我們先來講一個一直沒提的東西,寬度與高度

div { height: 200px; width: 200px;}

我們可以透過以上的指令來建立一個 200*200 的區塊,不過要注意的是只有塊狀元素可以調整,行內元素的寬與高要調整需要其他的手段,這我們將在過幾天後提到

現在我們有了一個容器,接下來來為他上色:

div{ background-color: red;}

這樣我們就可以把紅色設為此區塊的背景顏色了,而若是要調整文字的顏色則是去掉 background-color

p{ color:blue;}

而若是一時之間想不到對應的色名我們也可以透過直接賦予 RGB 值來進行設定:

div{ background-color: rgb(255,255,255);

我們也可以透過新增一個透明度來造成更加豐富的效果

div{ background-color: rgba(255,255,255,0.5);

要注意的是透明度接受的值介於 0~1 之間,不要填寫超過了

之後在進入 CSS 預處理章節後我們就可以把喜歡的顏色 rgb 值設^為一個變數,想要用時直接呼叫,會方便許多,今天內容到此結束~

小抱怨專區:
連假第一天過得有點頹廢啊,還好多東西還有弄,果然明天的事明天說


上一篇
第十一日:文字大小
下一篇
第十三日:定位
系列文
迷路的前端工程16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言