css外觀屬性(自學筆記)

2021-10-23 07:31:05 字數 2105 閱讀 2321

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-indent無法作用於行內元素

text-decoration通常我們用於給連線修改裝飾效果

屬性值描述

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對齊屬性 屬性值如下 注意 是讓盒子裡邊的內容水平居中,而不是讓盒子居...