CSS外觀屬性

2021-09-27 06:35:00 字數 1565 閱讀 3764

color屬性用於定義文字的顏色,其取值方式有如下3種

1.預定義的顏色值,如red,green,blue等。

2.十六進製制,如#ff0000,#ff6600,#29d794等。實際工作中,十六進製制是最常用的定義顏色的方式。

3.rgb**,如紅色可以表示為rgb(255,0,0)rgb(100%,0%,0%)

line-height屬性用於設定行間距,就是行與行之間的距離,即字元的垂直間距,一般稱為行高。line-height常用的屬性值單位有三種,分別為畫素px,相對值em和百分比%,實際工作中使用最多的是畫素px

text-align屬性用於設定文字內容的水平對齊,相當於html中的align對齊屬性。其可用屬性值如下:

left:左對齊(預設值)

right:右對齊

center:居中對齊

text-indent屬性用於設定首行文字的縮排,其屬性值可為不同單位的數值、em字元寬度的倍數、或相對於瀏覽器視窗寬度的百分比%,允許使用負值, 建議使用em作為設定單位。

1em 就是乙個字的寬度 如果是漢字的段落, 1em 就是乙個漢字的寬度

letter-spacing屬性用於定義字間距,所謂字間距就是字元與字元之間的空白。其屬性值可為不同單位的數值,允許使用負值,預設為normal。

word-spacing屬性用於定義英文單詞之間的間距,對中文字元無效。和letter-spacing一樣,其屬性值可為不同單位的數值,允許使用負值,預設為normal。

word-spacing和letter-spacing均可對英文進行設定。不同的是letter-spacing定義的為字母之間的間距,而word-spacing定義的為英文單詞之間的間距。

文字顏色到了css3我們可以採取半透明的格式了語法格式如下:

color

:rgba

(r,g,b,a) a 是alpha 透明的意思 取值範圍 0~1之間 color

:rgba

(0,0,0,0.3)

以後我們可以給我們的文字新增陰影效果了 shadow 影子

text-shadow

:水平位置 垂直位置 模糊距離 陰影顏色;

[外鏈轉存失敗(img-hcypyguy-1568858190107)(media/1498467502625.png)]

前兩項是必須寫的。 後兩項可以選寫。

[外鏈轉存失敗(img-xcclbhlq-1568858190111)(media/1498467519665.png)]

sublime可以快速提高我們**的書寫方式

生成標籤 直接輸入標籤名 按tab鍵即可 比如 div 然後tab 鍵, 就可以生成

如果想要生成多個相同標籤 加上 * 就可以了 比如 div*3 就可以快速生成3個div

如果有父子級關係的標籤,可以用 > 比如 ul > li就可以了

如果有兄弟關係的標籤,用 + 就可以了 比如 div+p

如果生成帶有類名或者id名字的, 直接寫 .demo 或者 #two tab 鍵就可以了

CSS外觀屬性

作用 color屬性用於定義文字的顏色,其取值方式有如下3種 表示表示 屬性值預定義的顏色值 red,green,blue,還有我們的御用色 pink 十六進製制 ff0000,ff6600,29d794 rgb rgb 255,0,0 或rgb 100 0 0 注意 我們實際工作中,用 16進製制...

CSS外觀屬性

作用 color屬性用於定義文字的顏色 取值方式 注意 我們實際工作中,用16進製制的寫法是最多的,而且我們更喜歡簡寫方式比如 f00代表紅色 作用 text align屬性用於設定文字內容的水平對齊,相當於html中的align對齊屬性 屬性值如下 注意 是讓盒子裡邊的內容水平居中,而不是讓盒子居...

css外觀屬性

一 color 文字顏色 1 作用 color屬性用於定義文字顏色。2 取值方法 表示屬性值 預定義的顏色值 red green blue pink 十六進製制 ff0000,ff6600,29d794 rgb rgb 255,0,0 或rgb 100 0 0 3 注意 我們實際工作中,用16進製制...