CSS3的新增文本屬性ppt課件

1、CSS3的新增文本屬性主講：叢浩LAMP兄弟連叢浩conghaolampbrother本章內(nèi)容CSS1&2中的文本屬性(W3C規(guī)范)CSS3 新增的文本屬性CSS3文本屬性實例CSS1&2中的文本屬性CSS3 新增的文本屬性留意：先要事先引入css文件，例text-overflow屬性屬性作用：設(shè)定內(nèi)容溢出形狀下的文本處置方式。作用：設(shè)定內(nèi)容溢出形狀下的文本處置方式。取值：取值：clip： 默許值默許值當對象內(nèi)文本溢出時不顯示省略標志當對象內(nèi)文本溢出時不顯示省略標志.，而是將，而是將溢出的部分裁切掉。溢出的部分裁切掉。 ellipsis： 當對象內(nèi)文本溢出時顯示省略標志當對象內(nèi)文本溢出時顯示省

2、略標志.。 留意留意:該屬性需求和該屬性需求和over-flow:hidden屬性屬性(超出處置超出處置)還有還有white-space:nowrap(制止換行制止換行)配合運用，否那么無法看到效果配合運用，否那么無法看到效果text-align屬性屬性作用作用:設(shè)定文本對齊方式設(shè)定文本對齊方式取值：取值：left ：默許值：默許值 內(nèi)容左對齊。內(nèi)容左對齊。center：內(nèi)容居中對齊。：內(nèi)容居中對齊。right： 內(nèi)容右對齊。內(nèi)容右對齊。justify： 內(nèi)容兩端對齊。寫本文檔時僅內(nèi)容兩端對齊。寫本文檔時僅Firefox能看到正確效果能看到正確效果start： 內(nèi)容對齊開場邊境。內(nèi)容對齊開場邊

3、境。CSS3 end： 內(nèi)容對齊終了邊境。內(nèi)容對齊終了邊境。CSS3 text-transform屬性屬性作用：設(shè)定文本的大小寫等方式的轉(zhuǎn)換取值：none：默許值 無轉(zhuǎn)換 capitalize： 將每個單詞的第一個字母轉(zhuǎn)換成大寫 uppercase：轉(zhuǎn)換成大寫 lowercase：轉(zhuǎn)換成小寫 full-width：將左右字符設(shè)為全角方式CSS3不支持 full-size-kana：將一切小假名字符轉(zhuǎn)換為普通假名CSS3不支持 例如：土耳其語。text-decoration屬性屬性作用：設(shè)定文本修飾線。作用：設(shè)定文本修飾線。取值：取值： text-decoration-line ：不支持：不支持

4、 指定文本裝飾的種類。相當于指定文本裝飾的種類。相當于CSS1時的時的text-decoration屬性屬性 text-decoration-style ：不支持：不支持指定文本裝飾的款式。指定文本裝飾的款式。 text-decoration-color：不支持：不支持指定文本裝飾的顏色。指定文本裝飾的顏色。 blink： 指定文字的裝飾是閃爍。指定文字的裝飾是閃爍。 僅僅opera和和firefox例如例如:text-decoration : overline CSS1實例實例text-decoration : #F00 double overline CSS3實例實例備注：目前主要閱讀器都

5、沒有實現(xiàn)上述屬性，但是依然可以運用備注：目前主要閱讀器都沒有實現(xiàn)上述屬性，但是依然可以運用CSS1的的實例方式實例方式text-decoration-line屬性屬性作用：設(shè)定文本修飾線的位置。作用：設(shè)定文本修飾線的位置。取值：取值：none：默許值：默許值 指定文字無裝飾指定文字無裝飾 underline： 指定文字的裝飾是下劃線指定文字的裝飾是下劃線 overline： 指定文字的裝飾是上劃線指定文字的裝飾是上劃線 line-through： 指定文字的裝飾是貫穿線指定文字的裝飾是貫穿線備注備注:目前大部分閱讀器未實現(xiàn)該屬性。目前大部分閱讀器未實現(xiàn)該屬性。 text-decoration-

6、color屬性屬性作用：設(shè)定文本修飾線的顏色作用：設(shè)定文本修飾線的顏色取值：取值：指定顏色。指定顏色。備注備注:目前大部分閱讀器未實現(xiàn)該屬性。目前大部分閱讀器未實現(xiàn)該屬性。 text-decoration-style屬性屬性作用：設(shè)定文本修飾線的款式。作用：設(shè)定文本修飾線的款式。取值：取值：solid：默許值：默許值 實線實線 double： 雙線雙線 dotted： 點狀線條點狀線條 dashed： 虛線虛線 wavy： 波浪線波浪線備注備注:目前大部分閱讀器未實現(xiàn)該屬性。目前大部分閱讀器未實現(xiàn)該屬性。 text-shadow屬性屬性作用作用:設(shè)定文本的陰影效果設(shè)定文本的陰影效果取值：取值：

7、none：默許值：默許值無陰影無陰影 ： 第第1個長度值用來設(shè)置對象的陰影程度偏移值?？梢詾樨撝祩€長度值用來設(shè)置對象的陰影程度偏移值?？梢詾樨撝?： 第第2個長度值用來設(shè)置對象的陰影垂直偏移值?？梢詾樨撝祩€長度值用來設(shè)置對象的陰影垂直偏移值?？梢詾樨撝?： 假設(shè)提供了第假設(shè)提供了第3個長度值那么用來設(shè)置對象的陰影模糊值。不允許個長度值那么用來設(shè)置對象的陰影模糊值。不允許負值負值 0:不模糊，不模糊，10px：模糊程度：模糊程度10像素像素設(shè)置對象的陰影的顏色。設(shè)置對象的陰影的顏色。 text-fill-color屬性屬性作用作用:文本填充顏色，指定文字填充部分的顏色文本填充顏色，指定文字填充部

8、分的顏色取值取值: 顏色顏色備注:運用該屬性需求運用閱讀器似有前綴text-stroke屬性屬性作用作用:文本邊框顏色，指定文字描邊部分的顏色文本邊框顏色，指定文字描邊部分的顏色取值取值: text-stroke-width ： 設(shè)置或檢索對象中的文字的描邊厚度設(shè)置或檢索對象中的文字的描邊厚度 text-stroke-color ： 設(shè)置或檢索對象中的文字的描邊顏色設(shè)置或檢索對象中的文字的描邊顏色 備注:運用該屬性需求運用閱讀器似有前綴text-stroke-width屬性屬性作用作用:指定文字描邊部分的寬度，指定文字描邊部分的寬度，text-stroke的派生屬性的派生屬性取值取值:長度長度

9、備注:運用該屬性需求運用閱讀器似有前綴text-stroke-color屬性屬性作用作用:指定文字描邊部分的顏色，指定文字描邊部分的顏色，text-stroke的派生屬性的派生屬性取值取值:顏色顏色備注:運用該屬性需求運用閱讀器似有前綴實例：描邊字效果描邊字效果：實例：鏤空字效果鏤空字效果：tab-size屬性屬性作用作用:設(shè)定一個設(shè)定一個tab縮進鍵，在頁面中的顯示長度?？s進鍵，在頁面中的顯示長度。取值取值:默許值：默許值：長度或者整數(shù)值長度或者整數(shù)值整數(shù)值整數(shù)值 : z-index:1 此處的此處的1就是整數(shù)值，不需求單位，類似倍數(shù)。就是整數(shù)值，不需求單位，類似倍數(shù)。長度長度: margin:10px 此處的此處的10px是長度值。是長度值。留意留意:該屬性只在該屬性只在標簽之內(nèi)標簽之內(nèi)(預格式化形狀預格式化形狀)顯示才會有效。由于閱顯示才會有效。由于閱讀器會自動忽略空白字符。讀器會自動忽略空白字符。 opera和火狐閱讀器需求運用閱讀器私有前綴。和火狐閱讀器需求運用閱讀器私有前綴。word-wrap屬性作用作用: