css學習25 設定文字樣式

2021-10-19 09:08:57 字數 3457 閱讀 9336

1、應用基本文字樣式

1.1 對齊文字

對齊屬性:

屬性說明

值text-align

指定文字塊的對齊方式

start,end,left,right,center,justify

text-justify

如果text-align屬性使用了justify值,則該值會用來指定對齊文字的規則

見下表text-align屬性相當簡單,不過,需要注意的重要一點是:可以將文字對齊到顯式命名的某個邊界(使用left或者right值),或者對齊到語言本來使用的邊界(使用start和end值)。在處理從右到左的語言時,這是乙個非常重要的區別。

text-justify屬性的值:值說明

auto

瀏覽器選擇對齊規則,這是最簡單的方法,不過,不同瀏覽器之間的呈現方式會有微小差別

none

禁用文字對齊

inter-word

空白分布在單詞之間,適用於英語等詞間有空的語言

inter-ideograph

空白分布在單詞、表意字之間,且文字兩端對齊,適用於漢語、日文和韓文等語言

inter-cluster

空白分布在單詞、字形集的邊界,適用於泰文等無詞間空格的語言

distribute

空白分布在單詞、字形集的邊界,但連續文字或者草體除外

kashida

通過拉長選定字元調整對齊方式(僅適用於草體)

1.2 處理空白

空白在html文件中通常是被壓縮或者直接忽略掉。這允許你將html文件的布局跟頁面的外觀分離。

whitespace屬性控制瀏覽器對空白字元的處理方式。值說明

normal

預設值,空白符被壓縮,文字行自動換行

nowrap

空白符被壓縮,文字行不換行

pre空白符被保留,文字只在遇到換行符的時候換行,這跟pre元素(參見第8章)的效果一樣

pre-line

空白符被壓縮,文字會在一行排滿或遇到換行符時換行

pre-wrap

空白符被保留,文字會在一行排滿或遇到換行符時換行

1.3 指定文字方向

direction屬性告訴瀏覽器文字塊的版塊方向。

值:ltr,rtl

1.4 指定單詞,字母,行之間的間距

屬性說明

值letter-spacing

設定字母之間的間距

normal長度值

word-spacing

設定單詞之間的間距

normal長度值

line-height

設定行高

normal長度值,數值,%

1.5 控制斷詞

word-wrap屬性告訴瀏覽器當乙個單詞的長度超出包含塊的寬度時如何處理。值說明

normal

單詞不斷開,即使無法完全放入包含塊元素

break-word

斷開單詞,使其放入包含塊元素

p元素使用了normal值,意思是瀏覽器不會斷開長單詞,即使長單詞溢位p元素。

1.6 首行縮排

text-indent屬性用於指定文字塊首行縮排,值可以是長度值,%。

text-indent

: 15%;

2、文字裝飾與大小寫轉換

text-decoration和text-transform兩個屬性分別允許我們裝飾文字和轉換文字大小寫。

屬性說明

值text-decoration

為文字塊應用裝飾效果

none,underline,overline,line-through,blink

text-transform

為文字塊轉換大小寫

none,capitalize,uppercase,lowercase

3、建立文字陰影

text-shadow為文字塊應用陰影,值h-shawod,v-shadow,blur,color

h-shadow和v-shadow值分別指定陰影的水平偏移和垂直偏移。它們的值用長度值表示,允許負值。blur值也是乙個長度值,定義了陰影的模糊程度,該值可選。color值指定陰影的顏色。

text-shadow

: 0.1em 0.1em 1px lightgrey;

4、使用字型

屬性說明

值font-family

指定文字塊採用的字型名稱

見下表font-size

指定文字塊的字型大小

見下表font-style

指定字型樣式

normal,italic,oblique

font-variant

指定字型是否以小型大寫字母顯示

normal,smallcaps

font-weight

設定字型粗細

normal,bold,bolder,lighter,100~900之間的數字

font

在一條宣告中設定字型的簡寫屬性

見後的表

格式:font: font-style font-variant font-weight font-size font-family

4.1 選擇字型

font-family屬性指定使用的字型,按照優先順序排列。瀏覽器從字型列表中的第一種開始嘗試,直到發現合適的字型為止。這種方法很有必要,因為你可以使用使用者安裝在電腦上的字型,而由於作業系統和偏好不同,不同使用者安裝的字型會有所不同。

當然還有最後的保障:css定義了幾種任何情況下都可以使用的通用字型。有幾大類字型,稱為通用字型系列,瀏覽器在呈現這些字型時可能有差異。

通用字型系列

serif

sans-serif

cursive

fantasy

monospace

4.2 設定字型大小

font-size屬性的值:值說明

xx-small

設定字型大小。瀏覽器會決定每個值代表具體大小。不過,從上到下逐漸增大是***的

x-small

small

medium

large

x-large

xx-large

smaller

設定字型相對于父元素字型的大小

larger

使用css長度值精確設定字型大小

<%>

將字型大小表示為父元素字型大小的百分數

4.3 設定字型樣式的粗細

可以使用font-weight屬性設定字型粗細——增加字型「重量」會使文字更粗。font-style屬性允許我們在正常字型、斜體和假斜體(傾斜字型)三種字型之間選擇。斜體和假斜體有明顯區別,但這是技術上的,通常從文字外**來差別很小。

font-weight

: medium;

5、使用web字型
#font-face

css設定文字樣式

載入 img src alt 未載入成功 title 滑鼠放在上提示 文字樣式 行高 line height 文字縮排 text indent 字型大小 font size 字型型別 font family 字型傾斜 font style italic 字型不傾斜 font style normal...

CSS樣式 文字樣式

文字擷取 employorganizalistctrl listtext 文字對齊方式 text align justify 文字超出固定高度 顯示滾動條 overflow scroll 顯示邊框 border 1px dashed ff6b6b 虛線 border top style 1px so...

CSS樣式 文字

css文字屬性可定義文字外觀。通過文字屬性,可以改變文字的顏色,字元間距,對齊文字,裝飾文字,對文字縮排 color aquamarine 顏色是繼承效果 text align center 文字對齊方式 text indent 2 em 首行文字縮排2個畫素 text transform capi...