網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性-CSS文本屬性_第1頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性-CSS文本屬性_第2頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性-CSS文本屬性_第3頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性-CSS文本屬性_第4頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性-CSS文本屬性_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

本章介紹CSS設(shè)置背景、文本、列表、圖像、表格、表單、鏈接等元素的屬性樣式。

CSS3的屬性CSS文本屬性目錄

CSS3的屬性5.1CSS背景屬性5.2CSS字體屬性5.3CSS文本屬性5.4CSS尺寸屬性5.5CSS列表屬性5.6CSS表格屬性5.7CSS內(nèi)容屬性5.8CSS屬性的應(yīng)用5.9實訓(xùn)——制作社區(qū)網(wǎng)頁面習(xí)題55.3CSS文本屬性5.3.1文本顏色屬性color語法：color:color示例代碼如下。div{color:red;}/*顏色值為顏色名稱*/div{color:#000000;}/*顏色值為十六進制值*/div{color:rgb(0,0,255);}/*顏色值為rgb函數(shù)值*/div{color:rgb(0%,0%,80%);}/*顏色值為rgb百分數(shù)*/5.3CSS文本屬性5.3.2文本方向?qū)傩詃irection語法：direction:ltr|rtl|inherit示例代碼如下。div{direction:rtl;unicode-bidi:bidi-override;}5.3CSS文本屬性5.3.3字符間隔屬性letter-spacing語法：letter-spacing:normal|length示例代碼如下。div{letter-spacing:5px;}div{letter-spacing:0.5pt;}5.3CSS文本屬性5.3.4行高屬性line-height語法：line-height:length|normal|inherit5.3CSS文本屬性5.3.5文本水平對齊方式屬性text-align語法：text-align:left|right|center|justify示例代碼如下。div{text-align:center;}5.3CSS文本屬性5.3.6為文本添加裝飾屬性text-decoration語法：text-decoration:none|underline|blink|overline|line-through示例代碼如下。div{text-decoration:underline;}a{text-decoration:underlineoverline;}

5.3CSS文本屬性5.3.7段落首行縮進屬性text-indent語法：text-indent:length示例代碼如下。div{text-indent:-5px;}div{text-indent:underline10%;}5.3CSS文本屬性5.3.8文本的陰影屬性text-shadow語法：text-shadow:x_position_lengthength|y_position_length|blur|color示例代碼如下。p{text-shadow:0px0px20pxyellow,0px0px10pxorange,red5px-5px;}p:first-letter{font-size:36px;color:red;text-shadow:red0px0px5px;}5.3CSS文本屬性5.3.9文本的大小寫屬性text-transform語法：text-transform:none|capitalize|uppercase|lowercase示例代碼如下。div{text-transform:uppercase;}5.3CSS文本屬性5.3.10元素內(nèi)部的空白屬性white-space語法：white-space:normal|pre|nowrap示例代碼如下。p{white-space:nowrap;}5.3CSS文本屬性5.3.11單詞之間的間隔屬性word-spacing語法：word-spacing:normal|length示例代碼如下。div{word-spacing:10;}div{word-spacing:10px;}5.3CSS文本屬性5.3.12文本的截斷效果屬性text-overflow語法：text-overflow:clip|ellipsis示例代碼如下。div{text-overflow:clip;white-space:nowrap;overflow:hidden;}5.3CSS文本屬性5.3.13文本的換行方式屬性word-break語法：word-break:normal|break-all|keep-all示例代碼如下。div{word-break:break-all;}5.3CSS文本屬性5.3.14單詞斷字屬性word-wrap語法：word-wrap:normal|break-word示例代碼如下。div{word-wrap:break-word;}5.3CSS文本屬性【例5-13】設(shè)置文本樣式案例，本例頁面5-13.html的顯示效果，如圖所示。5.3CSS文本屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>文本屬性</title><styletype="text/css">h1{font-family:微軟雅黑,黑體;/*設(shè)置字體類型*/font-size:36px;text-align:center;/*文本居中對齊*/color:#FF7F50;text-shadow:2px2px8pxchocolate;}h2{text-align:center;color:white;text-shadow:2px2px4px#000000;}.shadow{font-family:微軟雅黑,黑體;font-size:30px;text-align:center;color:coral;text-shadow:5px5px3px,10px10px5pxyellow,15px15px8px#FF7F50,0-35pxred;}p{font-family:Arial,"TimesNewRoman";font-size:12pt;/*設(shè)置字體大小*/background-color:#ccc;/*設(shè)置背景色為灰色*/text-indent:2em;/*段落首行縮進2個父元素的寬度*/}p.indent{text-indent:2em;line-height:200%;/*設(shè)置行高為字體高度的2倍*/}p.ellipsis{width:300px;/*設(shè)置裁切的寬度*/height:20px;/*設(shè)置裁切的高度*/overflow:hidden;/*溢出隱藏*/white-space:nowrap;/*強制文本在一行內(nèi)顯示*/text-overflow:ellipsis;/*當文本溢出時顯示省略標記（…）*/}5.3CSS文本屬性.red{color:rgb(255,0,0);/*紅色文本*/}.one{font-size:24px;text-decoration:underline;/*設(shè)置下劃線*/}.two{font-size:24px;text-decoration:overline;/*設(shè)置上劃線*/}.three{font-size:24px;text-decoration:line-through;/*設(shè)置貫穿線*/text-shadow:003px#FF0000;}</style></head><body><pid="p1">CSS文本屬性</p><h1>CSS文本屬性</h1><p>文本屬性包括文本對齊方式、行高、<spanclass="one">文本修飾</span>、段落首行縮進、首字下沉、文本截斷、文本換行、文本顏色及背景色等。<spanclass="two">字體屬性</span>主要涉及文字本身的效果，而<spanclass="three">文本屬性</span>主要涉及多個文字的排版效果。</p><pclass="indent">text-overflow屬性可以實現(xiàn)文本的截斷效果。本屬性需要配合overflow:hidden和white-space:nowrap才能生效。</p><h2>白色文本的陰影效果！</h2><pclass="ellipsis">要實現(xiàn)溢出文本顯示省略號的效果，除了使用text-overflow屬性以外，還必

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論