CSS基礎3 文字屬性 偽類 偽元素

2021-07-30 20:48:41 字數 1345 閱讀 2477

功能

屬性名描述

縮排文字

text-indent

設定行的縮排大小,值可以為正值或負值,單位可以用em、px或百分比(%)

水平對齊

text-align

取值left、right、center、justify(兩端對齊,如下圖2)

垂直對齊

vertical-align

設定文字的垂直對齊方式,取值bottom、top、middle、baseline

字間距word-spacing

設定字(單詞)之間的標準間隔,預設是normal(或0)

字母間隔

letter-spacing

設定字元或字母之間的間隔

字元轉換

text-transform

設定文字中字母的大小寫,取值none、uppercase、lowercase、capitalize

文字修飾

text-decoration

取值none(去掉下劃線)、underline(下劃線)、overline(上劃線)、line-through(刪除線)、blink(閃爍)

空白字元

white-space

取值 normal(忽略多餘)、pre(正常顯示)、nowrap(文字不換行,除非遇到

標籤);

水平對齊例子:

圖一為預設水平對齊方式;圖二新增水平對齊樣式為兩端對齊text-align: justify;

偽類名描述

:active

向被啟用的元素新增樣式

:hover

滑鼠懸浮在元素上方時,向元素新增樣式

:link

向未被訪問的鏈結新增樣式,僅適用於超連結

:visited

向已被訪問的鏈結新增樣式,僅適用於超連結

:focus

向擁有鍵盤輸入焦點的元素新增樣式

:checked

向已被選中的元素新增樣式

:disabled

向被禁用的元素新增樣式

偽元素描述

:first-line

向文字的首行新增特殊樣式

:first-letter

向文字的第乙個字母或漢字新增特殊樣式

:before

在元素之前新增內容

:visited

在元素之後新增內容

css偽類和偽元素屬性

對css中基本選擇器和屬性選擇器以及偽類選擇器做了總結,但是提到偽類,與之相對應的必然是偽元素。那麼,二者到底有什麼不能說的秘密呢?接下來 先歸類下兩者 偽類的種類 偽元素的種類 兩者的使用方法 css3為了區分兩者,已經明確規定了偽類用乙個冒號來表示,而偽元素則用兩個冒號來表示。pseudo cl...

css偽類,偽元素

偽類作用於整個元素,比如 a link a hover div first child 儘管這些條件都不是基於dom的,但結果沒乙個都是作用於乙個完整的元素,比如整個鏈結,段落,div等等 偽元素作用於元素一部分,比如 p first line p first letter 偽元素作用於元素的一部分...

CSS偽類 偽元素

css偽類用於向某些選擇器新增特殊的效果。錨偽類a link 未訪問的鏈結 a visited 已訪問的鏈結 a hover 滑鼠移動到鏈結上 a active 選定的鏈結 注意 1 在 css 定義中,a hover 必須被置於 a link 和 a visited 之後,才是有效的。2 在 cs...