color屬性用於定義文字的顏色,其取值方法有如下三種
預定義的顏色值,如:red 、green、blue等
十六進製制1
如:#ff0000(#f00)、#29d794等;連續的兩位上的字元相同可以縮寫,只寫乙個如:#ff00dd可以縮寫成#f0d
rgb**:如紅色可以表示成rgb(255,0,0)或rgb(100%,0%,0%)
如果使用rgb**的百分比顏色值,取值為0時,也不能省略%號,必須寫成0%。
line-height用於設定行與行之間的距離,即字元的垂直間距,簡稱行高;
其取值單位有三種分別為畫素px、相對值em、和百分比。
具體如下:值描述
length
設定固定的行間距
%基於當前字型尺寸的百分比行間距。
normal
預設。設定合理的行間距。
number
設定數字,此數字會與當前的字型尺寸相乘來設定行間距,即number為當前font-size的倍數。
設定方式
line-height
計算後的line-height
子元素繼承的line-height
length
20px
不用計算
20px
%120%
自身font-size (16px) * 120% = 19.2px
繼承父元素計算後的line-height值 19.2px,而不是120%
normal
1.2自身font-size (16px) * 1.2 = 19.2px
繼承1.2,line-height = 自身font-size(32px) * 1.2 = 38.4px
純數字1.5
自身font-size (16px) * 1.2 = 19.2px
繼承1.5,line-height = 自身font-size(32px) * 1.5 = 48px
那麼,哪一種是最好的方式呢? 一般來數,設定行高的值為 純數字 是最推薦的方式,因為其會隨著對應的 font-size 而縮放。
圖中兩條紅線之間的距離就是行高(line-height),上一行的底線和下一行的頂線之間的距離就是行距,而同一行頂線和底線之間的距離是font-size的大小,行距的一半是半行距,半行距、font-size、line-height之間的關係看的右下角就一目了然了~
半行距 = (line-height - font-size)/2真正理解行高同理能知道行距
其屬性值:
text-align運用在塊級元素中text-align會使其包含行內元素對齊
css的樣式
.test
img.test div
.test p
span
h1結構 我是div
我是塊級元素p
我是行級元素span
最終樣式
如上圖所示:
html首行縮排2字元,可以使用css屬性中的【text-indent】進行設定。
p
說明: text-indent表示段落首行縮排,2em表示縮排2字元;text-decoration通常我們用於給連線修改裝飾效果text-indent無法作用於行內元素。
屬性值描述
none
無裝飾underline
下劃線line-through
貫穿文字中間的刪除線
overline
上劃線十六進製制(簡寫為hex或下標16)在數學中是一種逢16進1的進製。一般用數字0到9和字母a到f(或a-f)表示,其中:a-f表示10~15,這些稱作十六進製制數字。 ↩︎
CSS外觀屬性
作用 color屬性用於定義文字的顏色,其取值方式有如下3種 表示表示 屬性值預定義的顏色值 red,green,blue,還有我們的御用色 pink 十六進製制 ff0000,ff6600,29d794 rgb rgb 255,0,0 或rgb 100 0 0 注意 我們實際工作中,用 16進製制...
CSS外觀屬性
color屬性用於定義文字的顏色,其取值方式有如下3種 1.預定義的顏色值,如red,green,blue等。2.十六進製制,如 ff0000,ff6600,29d794等。實際工作中,十六進製制是最常用的定義顏色的方式。3.rgb 如紅色可以表示為rgb 255,0,0 或rgb 100 0 0 ...
CSS外觀屬性
作用 color屬性用於定義文字的顏色 取值方式 注意 我們實際工作中,用16進製制的寫法是最多的,而且我們更喜歡簡寫方式比如 f00代表紅色 作用 text align屬性用於設定文字內容的水平對齊,相當於html中的align對齊屬性 屬性值如下 注意 是讓盒子裡邊的內容水平居中,而不是讓盒子居...