web前端學習筆記 文字屬性

2022-04-05 07:56:56 字數 1425 閱讀 3859

今天的web前端筆記主要講述文字屬性,希望能幫助到正在學習web前端開發的初學者們,廢話不多說了,一起來看看文字屬性的相關內容吧。

文字屬性

文字縮排

將web頁面上的乙個段落第一行縮排,這是一種最常用的文字格式化效果。有的**在段落的第乙個字母前放乙個很小的透明影象,這些影象將文字推到後面來製造一種縮排文字的感覺。另外一些**則使用完全標準的空格(spacer)標記。而在css中有一種更好地方法實現文字縮排。那就是text-indent屬性。

通過使用text-indent屬性,所有元素的第一行都可以縮排乙個給定長度,甚至該長度可以是負值。

/** text-indent的單位是em*/pp

*  用百分比實現文字縮排

p水平對齊

與text-indent相比,text-align是乙個更基本的屬性,它會影響乙個元素中的文字行相互之間的對齊方式。。

注意:將塊級元素或表元素居中,這要通過在這些元素上適當地設定左、右外邊距來實現。

行高line-height屬性是指文字行基線之間的距離,而不是字型的大小。它確定了將各個元素框的高度增加或者減少。

垂直對齊文字

在css中,vertical-algin屬性只應用於行內元素和替換元素。表單輸入元素和影象,verticl-align屬性不能繼承。

文字轉換

預設值none對文字不做任何改動,將使用源文件中原有的大小寫。顧名思義,uppercase和lowercase將文字轉化為全大寫或全小寫字元。

capitalize只對每個單詞的首個字母大寫。

文字裝飾

underline會對元素加下劃線;

overline會在元素頂端加上劃線;

line-through則在文字中間畫乙個貫穿線。等價於html中的s和strike;

blink會讓文字閃爍;

文字陰影

/** 要定義乙個相對於文字向右移5畫素向下偏移0.5的綠色陰影,而且不模糊可以寫作*/p{

text-shadow: green 50x0.5em;

文字方向

direcation屬性影響塊級元素中的文字書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及兩端對齊元素最後一行的位置。

對於行內元素,只有短unicode-bidi屬性設定為embed或bidi-override時才會應用direction屬性。

normal:元素不會對雙向演算法開啟附加的一層巢狀,對於行內元素,順序的隱式重排會跨元素邊界進行。

embed:如果是乙個行內元素,這個值對於雙向演算法會開啟附加的一層巢狀,這個巢狀層方向由direction屬性指定。

會在元素內部隱式的完成順序重排。

bidi-override:這會為行內元素建立乙個覆蓋,對於塊級元素,將為不在另一塊中的額行內後代建立乙個覆蓋。

這說明,順序重排字啊元素內部嚴格按direction屬性進行,忽略了雙向演算法的隱式部分。

Web前端 CSS文字屬性

2.文字樣式 1 設定字型大小font size 20px 2 設定字型粗細程度font weight normal 取值 1.normal 預設值 等價於400 2.bold 加粗 等價於7003 設定斜體font style italic 4 設定字型名稱font family arial,黑體...

前端學習筆記(四)html文字屬性

文字大小 font size 文字字型 font family 文字粗細 font weight 文字傾斜 font style 文字顏色 color 文字行高 line height 文字屬性font簡寫 按順序寫出所有屬性 1 text align 水平對齊方式。屬性值 2 vertical a...

CSS學習筆記(文字屬性)

字間距 letter spacing px 可以設定負值,當設定成負值時,字間距會比正常間距小 normal表示正常的字間距 行高 行高 可控制行與行之間的間距,但不是行間距,指的即一行的高度。line height px 合理的行高 norml 數字,百分比 對應於當前字型大小 行高經常用於使單行...