CSS 常見外觀(文字)樣式屬性的用法彙總

2021-09-27 13:07:49 字數 1274 閱讀 4513

color

color: #f00;用於設定文字的顏色

屬性值描述

color_name

顏色名稱,例如:red、green、yellow 等

hex_number

十六進製制的顏色值,例如:#ff0000、#00ff00、#0000ff 等

rgb_number

通過 rgb **表示的顏色,可以是具體值也可以用百分比,例如: rgb(255,0,0) 或 rgb(100%,0%,0%)

在實際開發中多數情況是使用 十六進製制的寫法,十六進製制的顏色值可以簡寫,例如:#ff0000 可簡寫成 #f00

text-align

text-align: left;用於設定文字內容的水平對齊方式;是元素中的內容不是元素本身

屬性值說明

left

左對齊(預設值)

right

右對齊center

居中對齊

text-indent

text-indent: 0;用於設定文字塊中首行文字的縮排

其屬性值可為px(畫素)、em(字元寬度的倍數)、%(相對於瀏覽器視窗寬度的百分比),允許使用負值;預設值為 零

在實際開發中多數使用 em 作為單位

letter-sapcing

letter-spacing: normal;用於設定字元間的間距(水平方向)

屬性值可以是 px、rem、em,允許為負值;預設值為 normal

line-height

line-height: normal;用於設定行高;行高是指上下文本行的基線間的垂直距離;其屬性值可以是數值、px(畫素)、em、%(百分比);預設值為 normal;實際開發中用的最多的是畫素,一般行高比字型大小大 8 個畫素左右即可

如果想讓單行文字垂直居中,直接將行高設定為盒子的高即可;當單行文字的行高小於盒子的高度時文字會偏上,大於盒子的高度時文字會偏下

text-decoration

text-decoration: none;decoration(裝飾、修飾),為文字新增修飾;

屬性值說明

none

預設值,無修飾的標準文字

underline

為文字新增下劃線效果

overline

上劃線line-through

穿過文字的一條線(中劃線)

在實際開發中多用來消除超連結預設的下劃線

CSS 文字外觀屬性

pn1 pn2 pn3 p7text shadow 4px 5px 5px pink,4px 5px 5px skyblue 多重陰影之間加逗號隔開 這段文字顏色設定為紅色 這段中文的字間距設定為20px 這段英文的字間距設定為20px i like you,but just like you 這段...

CSS字型樣式屬性和外觀樣式屬性

1css字型樣式屬性 1.1font size 字型大小大小 font size屬性用於設定字型大小,該屬性的值可以使用相對長度單位,也可以使用絕對長度單位。其中,相對長度單位比較常用,推薦使用畫素單位px,絕對長度單位使用較少。具體如下 1.2 font family 字型 font family...

css外觀屬性和字型樣式屬性

1.color 文字顏色,屬性值三種寫法1.直接寫顏色值,red,blue,green.2.顏色的十六進製制值 ff00000 推薦寫法 3.rgb 比如紅色rgb 255,0,0 2.line height 行間距,也就是行與行之間的距離。行間距的單位用畫素px 3.text align 水平方向...