第十一日回顧:
在昨天,介紹了關於一些文字的設定,而今天要介紹如何調整元素的顏色,廢話不多說,讓我們馬上開始吧
一開始,我們先來講一個一直沒提的東西,寬度與高度
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 值設^為一個變數,想要用時直接呼叫,會方便許多,今天內容到此結束~
小抱怨專區:
連假第一天過得有點頹廢啊,還好多東西還有弄,果然明天的事明天說