CSS基礎4 使用CSS格式化元素內容的文字

2022-07-27 17:18:22 字數 2147 閱讀 4082

css的文字屬性用於控制文字的段落格式,如設定首行縮排。段落對齊方式、字間距、行間距等。

1、設定文字首行縮排:text-indent

可選屬性值包含: 長度 / 百分比

2、設定文字對齊方式:text-align

可選屬性包含:left / right / center,分別表示相左對齊。向右對齊,居中對齊

3、設定文字修飾方式:text-decoration

可選屬性包含:none / underline (下劃線)  / overline(上劃線) / line-through(刪除線) / blink(閃爍) 

4、設定

文字陰影效果:text-shadow

可選屬性值包含: none  /  color

5、設定行高:line-height

屬性值能夠是數字,長度,百分比或者normal

6、設定字間距:letter-spacing

可選屬性值包含: none / auto  / 自己定義長度

7、設定詞間距:word-spacing

可選屬性值包含: none / 自己定義長度

8、設定文字大寫和小寫屬性:text-transform

可選屬性包含:capitalize 把每乙個單詞的首字母變成大寫

uppercase 把元素中的全部的字母變成大寫

lowercase  把元素中的全部字母變成小寫

9、設定空白顯示形式:white-space

要輸入空格的方式:乙個是" ;"。還有乙個是標記。

而css中white-space屬性類似於pre

可選屬性值包含:normal / pre / nowrap

10、設定

元素內容的字型顏色與背景

(1)設定元素的前景色:color  

取值:能夠是16進製制值、rgb()函式或者css承認的顏色名(如white)

(2)設定

背景色:background-color,取值同前景色

(3)設定

背景:background-image

(4)設定背景影象的鋪排:background-repeat

取值:repeat  /  no-repeat  /  repeat-x  /  repeat-y

(5)設定背景影象是歲物件內容滾動還是固定的:background-attachme

取值:sroll  /  fixed

(6)設定

背景顯示的位置:background-position

取值:百分比。自己定義長度(如100px,100px)   /  top  /  center  /  bottom  / left  /  right

11、設定列**式:list-style-type

屬性取值:disc 預設值。實心黑點

circle 空心圓圈

square 方形黑塊

decimal  十進位制數

lower-roman 小寫羅馬數字

upper-roman 大寫羅馬數字

lower-alpha 小寫字母

upper-alpha 大寫字母

none  無

也能夠用list-style-image把列表前面的符號換成圖形,若同一時候指定了list-style-type和list-style-image屬性,則僅僅有當瀏覽器不能顯示作為專案符號時,list-style-type才生效。

12、樣式

繼承:被用來節省為文件書中的每一級別元素指定的css樣式規則,如給設定乙個字型顏色,則這個顏色會被網頁內全部的元素繼承,除非其它元素有他們自己指定的樣式。

不能被繼承的屬性:margin 、 padding 、 border 、 background

CSS格式化排版

文字排版 字型 我們可以使用css樣式為網頁中的文字設定字型 字型大小 顏色等樣式屬性。這裡注意不要設定不常用的字型,因為如果使用者本地電腦上如果沒有安裝你設定的字型,就會顯示瀏覽器預設的字型。因為使用者是否可以看到你設定的字型樣式取決於使用者本地電腦上是否安裝你設定的字型。現在一般網頁喜歡設定 微...

css格式化排版

1,文字排版 字型 語法 body 這裡注意不要設定不常用的字型,因為如果使用者本地電腦上如果沒有安裝你設定的字型,就會顯示瀏覽器預設的字型。因為使用者是否可以看到你設定的字型樣式取決於使用者本地電腦上是否安裝了你設定的字型 2,文字排版 字型大小 顏色 語法 body 3,文字排版 粗體 語法 標...

css格式化排版

css格式化排版 1.文字排版 字型 我們可以使用css樣式為網頁中的文字設定字型 字型大小 顏色等樣式屬性。如 body 2.文字排版 字型大小 顏色可 以使用下面 設定網頁中文字的字型大小為12畫素,並把字型顏色設定為 666 灰色 body 3.文字排版 粗體 我們還可以使用css樣式來改變文...