今天要開始介紹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我應該會用蠻多的篇幅去介紹因為有很多我覺得重要的屬性!!