H5筆記06 CSS3文字屬性

2021-10-23 06:45:43 字數 3974 閱讀 9186

屬性

版本簡介

text-indent

css1

檢索或設定物件中的文字的縮排

letter-spacing

css1

檢索或設定物件中的文字之間的間隔

word-spacing

css1

檢索或設定物件中的單詞之間插入的空格數。

vertical-align

css1/css2

設定或檢索物件內容的垂直對其方式

white-space

css1

設定或檢索物件內空格的處理方式

direction

css2

檢索或設定文字流的方向

unicode-bidi

css2

用於同乙個頁面裡存在從不同方向讀進的文字顯示。與direction屬性一起使用

line-height

css1

檢索或設定物件的行高。即字型最底端與字型內部頂端之間的距離

屬性版本

簡介text-overflow

css3

設定或檢索是否使用乙個省略標記(...)標示物件內文字的溢位

text-align

css1/css3

設定或檢索物件中文字的對齊方式

text-transform

css1/css3

檢索或設定物件中的文字的大小寫

text-decoration

css1/css3

復合屬性。檢索或設定物件中的文字的裝飾,如下劃線、閃爍等

text-decoration-line

css3

檢索或設定物件中的文字裝飾線條的位置。

text-decoration-color

css3

檢索或設定物件中的文字裝飾線條的顏色。

text-decoration-style

css3

檢索或設定物件中的文字裝飾線條的形狀。

text-shadow

css3

設定或檢索物件中文字的文字是否有陰影及模糊效果

text-fill-color

css3

設定或檢索物件中的文字填充顏色

text-stroke

css3

復合屬性。設定或檢索物件中的文字的描邊

text-stroke-width

css3

設定或檢索物件中的文字的描邊厚度

text-stroke-color

css3

設定或檢索物件中的文字的描邊顏色

tab-size

css3

檢索或設定物件中的製表符的長度

word-wrap

css3

設定或檢索當當前行超過指定容器的邊界時是否斷開轉行

[text-overflow]屬性

(作用):設定內容溢位狀態下的文字處理方式。

(取值):

①clip:預設值當物件內文字溢位時不顯示省略標記(...),而是將 溢位的部分裁切掉。

②ellipsis: 當物件內文字溢位時顯示省略標記(...)。

注意:該屬性需要和over-flow:hidden屬性(超出處理)還有white-space:nowrap(禁止換行)配合使用,否則無法看到效果

[text-align]屬性

作用:設定文字對齊方式

取值:left:預設值內容左對齊。

center:內容居中對齊。

right:內容右對齊。

start:內容對齊開始邊界。(css3)

end:內容對齊結束邊界。(css3)

說明:在從左向右書寫的文字中,左是開始,右是結束(漢語、英語) left=start right=end

在從右向左書寫的文字中,右是開始,左是結束(維語) left=end right=start

[text-transform]屬性

作用:設定文字的大小寫等形式的轉換

取值:none: 預設值無轉換

capitalize:將每個單詞的第乙個字母轉換成大寫

uppercase: 轉換成大寫

lowercase: 轉換成小寫

full-width: 將左右字元設為全形形式(css3)不支援。

full-size-kana:將所有小假名字元轉換為普通假名(css3)不支援。例如:土耳其語。

[text-decoration]屬性

作用:設定文字修飾線。

取值:[ text-decoration-line ]:(不支援)指定文字裝飾的種類。相當於css1時的text-decoration屬性

[ text-decoration-style ]:(不支援)指定文字裝飾的樣式。

[ text-decoration-color]:(不支援)指定文字裝飾的顏色。

blink:指定文字的裝飾是閃爍。 僅opera和firefox

例如:text-decoration : overline css1例項

text-decoration : #f00 double overline css3例項

備註:目前主要瀏覽器都沒有實現上述屬性,但是依然可以使用css1的例項方式

[text-shadow]屬性作用:設定文字的陰影效果

取值:none:預設值(無陰影)

①:第1個長度值用來設定物件的陰影水平偏移值。可以為負值

②:第2個長度值用來設定物件的陰影垂直偏移值。可以為負值

③:如果提供了第3個長度值則用來設定物件的陰影模糊值。不允許負值 0:不模糊,10px:模糊程度10畫素

設定物件的陰影的顏色。

◆備註:使用下面兩個屬性需要使用瀏覽器私有字首

[text-fill-color]屬性作用:文字填充顏色,指定文字填充部分的顏色;取值: 顏色

[text-stroke]屬性作用:文字邊框顏色,指定文字描邊部分的顏色;

取值:[ text-stroke-width ]: 設定或檢索物件中的文字的描邊厚度

[ text-stroke-color ]: 設定或檢索物件中的文字的描邊顏色

[tab-size]屬性作用:設定乙個tab縮排鍵,在頁面中的顯示長度。

取值: 預設值:8

長度或者整數值

整數值 : z-index:1 此處的1就是整數值,不需要單位,類似倍數。

長度: margin:10px 此處的10px是長度值。

注意:該屬性只在標籤之內(預格式化狀態)顯示才會有效。因為瀏覽器會自動忽略空白字元。

opera和火狐瀏覽器需要使用瀏覽器私有字首。

[word-wrap]屬性作用:溢位文字(特指類英文文字)的處理方式。

取值:normal:(預設值)允許內容頂開或溢位指定的容器邊界。

break-word:內容將在邊界內換行。如果需要,單詞內部允許斷行。

H5筆記04 表單form

html5中表單提交的新方式 表單元素可以不用被標籤包圍。只需要給標籤設定乙個id,然後把要關聯起來的表單元素加上form id 即可 經測試ie無效 type email 限制使用者輸入必須為email型別 type url 限制使用者輸入必須為url型別 type date 限制使用者輸入必須為...

H5筆記 可以省略結束標籤的元素

整理了一下可以省略結束標籤的元素 1 空元素語法的元素 area base br col command embed hr img input keygen link mata param source wbr 2 可以省略結束標籤的元素 colgroup dt dd li optgroup p r...

H5筆記1 本地儲存localStorage

在很久很久以前,客戶端儲存資訊用的都是cookie。但是cookie在儲存空間上,有一些限制。瀏覽器cookie個數 每個網域名稱 單個cookie容量限制 microsoft 50個4kb左右 包括name value和等號 firefox 50個4kb左右 包括name value和等號 ope...