CSS常用文字樣式總結

2022-10-05 00:51:21 字數 1883 閱讀 6970

css文字樣式是相對於內容進行的樣式修飾。由於在層疊關係中,內容要高於背景。所以文字樣式相對而言更加重要。有些人對文字和字型樣式之間的不同不太了解,簡單地講,文字是內容,而字型則用於顯示這個內容。本文將詳細介紹文字相關樣式。

首行縮排

定義首行縮排是將段落的第一行縮排,這是常用的文字格式化效果。一般地,中文寫作時開頭空兩格,類似於此。

[注意]該屬性可以為負值

text-indent

值: | | inherit

初始值: 0

應用於: 塊級元素(包括block和inline-block)

繼承性: 有

百分數: 相對於包含塊的寬度

應用懸掛縮排

xml/html code複製內容到剪貼簿

首字下沉

xml/html code複製內容到剪貼簿

水平對齊

定義水平對齊是影響乙個元素中的文字的水平對齊方式。

text-align

值: left | center | right | justify | inherit

初始值: left

應用於: 塊級元素(包括block和inline-block)

繼承性: 有

兩端對齊

當水平對齊方式為兩端對齊時,word-spacing可能會調整,以便文字在整行中正好放下。如果為letter-spacing指定乙個長度值,則letter-spacing不會兩端對齊影響,除非letter-spacwww.cppcns.coming值為normal。

ie相容

對於ie7-瀏覽器來說,使用text-align不僅會改變文字的水平對齊方式,也會改變後代塊級元素的水平對齊方式

css code複製內容到剪貼簿

xml/html code複製內容到剪貼簿

程式設計客棧

字間隔字間隔是指單詞間距,用來設定文字或單詞之間的程式設計客棧間距。實際上,"字"表示的是任何非空白符字元組成的串,並由某種空白符包圍

[注意]單詞之間用空格分開,單詞之間的間距 = word-spacing + 空格大小

[注意]字間隔可為負值

word-spacing

值: | normal | inherit

初始值: normal(預設為0)

應用於: 所有元素

繼承性: 有

字母間隔

字母間隔是指字元間距

[注意]字母間隔可為負值

letter-spacing

值: | normal | inherit

初始值: normal(預設為0)

應用於: 所有元素

繼承性: 有

文字轉換

文字轉換用於處理英文的大小寫轉換

text-transform

值: uppercase(全大寫) | lowercase(全小寫) | capitalize(首字母大寫) | none | inherit

初始值: none

應用於: 所有元素

繼承性: 有

文字修飾

定義文字修飾用於為文字提供修飾線

[注意]文字修飾線的顏色與文字顏色相同

text-decoration

值: none | [underline(下劃線) || overline(上劃線) || lineogmtby-through(中劃線)] | inherit

初始值: none

應用於: 所有元素

繼承性: 無

繼承  文字修飾屬性無法繼承,意味著子元素文字上的任何修飾線與父元素的顏色相同。子元素文字上的修飾線實際上是父元素的,只是正好"經過"而已。

[注意]互不衝突的文字修飾線可出現多條

本文標題: css常用文字樣式總結

本文位址: /web/css/23798.html

CSS文字,文字常用樣式

字型屬性 font family 如果電腦沒有第乙個字型,就切換到下乙個 bodyfont size 字型大小 瀏覽器字型預設大小一般16px px是絕對大小,不會隨瀏覽器變化變化 em相對單位 rem主要應用移動端 color 三種顏色表示 color rgb 0 255 10進製 color r...

css樣式文字 初總結

1.規定文字塊中首行文字的縮排。text indent 可能的值 length 一般可以為所有塊級元素應用,如果想把乙個行內元素的第一行 縮排 可以用左內邊距或外邊距創造這種效果。2.元素中的文字的水平對齊方式。text align 可能的值 left,預設值 center right justif...

常用css樣式總結

1.超出顯示省略號 title 超出兩行顯示.overflow hidden text overflow ellipsis display webkit box webkit line clamp 2 webkit box orient vertical 2.內容局左居中對齊 tip content...