字間距 詞間距的使用 CSS入門基礎(010)

2021-10-11 18:41:03 字數 1469 閱讀 7288

今天我們接著分享文字樣式的內容。

letter-spacing字母間距:

在css中,我們可以使用letter-spacing屬性定義字間距。

語法:

letter-spacing:畫素值;
我們一般都是使用畫素值為單位的。

示例**:

i like coding.我喜歡程式設計。

i like coding.我喜歡程式設計。

i like coding.我喜歡程式設計。

letter-spacing控制的是字間距,每乙個中文文字算作乙個「字」,而每乙個英文本母也算作乙個「字」,這個需要大家留心記住。

word-spacing屬性:

用於定義單詞之間的距離,我們通常使用畫素值作為單位。

語法:

word-spacing:畫素值;
示例**:

i like coding.我 喜歡程式設計。

i like coding.我 喜歡程式設計。

i like coding.我 喜歡程式設計。

定義詞間距,以空格為基準進行調節。如果多個單詞被連在一起,則被視為乙個單詞;如果漢字被空格分隔,此時word-spacing屬性有效。

文字樣式的總結:

text-decoration,下劃線、刪除線、頂劃線

text-transform,文字變形,大小寫

font-variant,英文文字變為小型的大寫字母

text-indent,段落文字縮排

text-align,文字水平對齊方式

line-height,行高

letter-spacing,字距

word-spacing,詞距

text-decoration屬性值:none,underline,line-through,overline。

text-transform屬性值:none,uppercase,lowercase,capitalize。

font-variant屬性值:normal,small-caps。

text-indent屬性值:畫素值;

text-align屬性值:left,center,right。

line-height屬性值:畫素值;

letter-spacing屬性值:畫素值;

word-spacing屬性值:畫素值;

使用CSS設定行間距,字間距

字間距1 text indent設定抬頭距離css縮排 即對,對應div設定css樣式text indent 20px 縮排了20px 2 letter spacing來設定字與字間距 字元間距離,字型間距css樣式 即對對應div設定css屬性樣式為letter spacing 8px 字間距為8...

css 設定字間距 字母間距和漢子間距

下面是沒有設定間距的漢字和字母 順昌人 this is a test 下面是設定50px的word spacing字間距 順昌人 this is a test 下面是設定50px的letter spacing字母間距 順 昌 人 t h i s i s a t e s t 重要 letter spa...

css設定字間距和字母間距 中文漢字間距

下面是沒有設定間距的漢字和字母 順昌人 this is a test 下面是設定50px的word spacing字間距 順昌人this is a test 下面是設定50px的letter spacing字母間距 順 昌 人 t h i s i s a t e s t 重要 letter spac...