第4章 設(shè)計(jì)文本樣式_第1頁(yè)
第4章 設(shè)計(jì)文本樣式_第2頁(yè)
第4章 設(shè)計(jì)文本樣式_第3頁(yè)
第4章 設(shè)計(jì)文本樣式_第4頁(yè)
第4章 設(shè)計(jì)文本樣式_第5頁(yè)
已閱讀5頁(yè)，還剩37頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第4章設(shè)計(jì)文本樣式掌握使用CSS設(shè)置文本顏色、字型、大小、大小寫、粗體和斜體等樣式掌握使用CSS設(shè)置文本行高、縮進(jìn)和對(duì)齊方式等掌握使用CSS設(shè)置字符間距和單詞間距學(xué)習(xí)目標(biāo)010203本章任務(wù)任務(wù)1：設(shè)計(jì)字體樣式任務(wù)2：設(shè)計(jì)文本樣式任務(wù)3：案例實(shí)戰(zhàn)——文本頁(yè)面的排版任務(wù)1設(shè)計(jì)字體樣式任務(wù)描述本案例我們通過(guò)設(shè)計(jì)字體樣式在網(wǎng)頁(yè)中展示這首李白的《靜夜思》，效果如圖5-1-1。圖5-1-1：《靜夜思》文字排版任務(wù)實(shí)現(xiàn)任務(wù)分析1.標(biāo)題文字居中顯示，設(shè)置字體類型。2.正文內(nèi)容設(shè)置字體類型、字體大小和字體顏色。3.各部分內(nèi)容之間用水平線分隔。實(shí)現(xiàn)思路本案例主要內(nèi)容包括：突出顯示的標(biāo)題、字體類型、字體大小、字體顏色等。任務(wù)實(shí)現(xiàn)如何定義字體？使用font-family屬性來(lái)定義字體類型使用font屬性也可以定義字體類型font-family用法：font-family：namename表示字體名稱，可指定多種字體，多個(gè)字體將按優(yōu)先順序排列，以逗號(hào)隔開，如果字體名稱包含空格，則應(yīng)使用引號(hào)括起。定義字體類型font是一個(gè)復(fù)合屬性，該屬性能夠設(shè)置多種字體屬性，用法如下：font：font-style||font-variant||font-weight||font-size||line-height||font-family屬性值之間以空格分割。font屬性至少應(yīng)設(shè)置字體大小和字體類型，且必須放在后面，否則無(wú)效。案例設(shè)置字型：部分代碼如下：.font2{font-family:隸書,華文行楷,宋體;}.font3{font-family:Calibri,"TimesNewRoman",Arial;}</style></head><body><h2>設(shè)置字型</h2><pclass="font1">設(shè)置文本為微軟雅黑</p><pclass="font2">文本按照隸書、華文行楷、宋體的順序設(shè)置</p><pclass="font3">TheorderoffontisCalibri,TimesNewRoman,Arial</p></body>定義字體類型案例<head><title>設(shè)置字型</title><styletype="text/css">.font1{font-family:微軟雅黑;}如何定義字體大??？HTML5之前：使用<font>標(biāo)記，它有大小7個(gè)級(jí)別的字號(hào)，具有很大的局限性HTML5之中：使用font-size屬性設(shè)置字體大小font-size語(yǔ)法：font-size:長(zhǎng)度|絕對(duì)尺寸|相對(duì)尺寸|百分比定義字體大小長(zhǎng)度：用長(zhǎng)度值指定文字大小，不允許負(fù)值。長(zhǎng)度單位有px（像素）、pt（點(diǎn)）、pc（皮卡）、in（英寸）、cm（厘米）、mm（毫米）、em（字體高）和ex（字符X的高度），其中px、em和ex是CSS相對(duì)長(zhǎng)度單位，in、cm、mm、pt（1pt=1/72in）和pc（1pc=12pt）是css絕對(duì)長(zhǎng)度單位。絕對(duì)尺寸：每一個(gè)值都對(duì)應(yīng)一個(gè)固定尺寸，可以取值為xx-small（最?。?、x_x0002_small（較小）、small（小）、medium（正常）、large（大）、x-large（較大）和xx-large（最大）。相對(duì)尺寸：相對(duì)于父對(duì)象中字體尺寸進(jìn)行相對(duì)調(diào)節(jié)，可選參數(shù)值為smaller和

larger。百分比：用百分比指定文字大小，相對(duì)于父對(duì)象中字體的尺寸。設(shè)置字體尺寸：部分代碼如下：.fs3{font-size:14px;}.fs4{font-size:12pt;}.fs5{font-size:larger;}.fs6{font-size:150%;}</style></head><body><h2>字體尺寸（h2標(biāo)題），父對(duì)象為瀏覽器窗口</h2><pclass="fs1">x-large大小的文字</p><pclass="fs2">medium大小的文字</p><p>未使用樣式，默認(rèn)大小的文字</p><pclass="fs3">14px大小的文字</p><pclass="fs4">12pt大小的文字</p><pclass="fs5">larger大小的文字</p><pclass="fs6">150%大小的文字</p></body>定義字體大小案例<head><title>設(shè)置字體尺寸</title><styletype="text/css">.fs1{font-size:x-large;}.fs2{font-size:medium;}如何定義字體顏色？使用color屬性來(lái)設(shè)置color還會(huì)應(yīng)用到元素的所有邊框，除非被其它邊框顏色屬性覆蓋color語(yǔ)法：color:color_name|HEX|RGB|RGBA|HSL|HSLA|transparent常用：color:color_name|RGB|

transparent定義字體顏色color_name是顏色英文名稱，例如green表示綠色、red表示紅色、gold表示金色。RGB是指用RGB函數(shù)表示顏色，所有瀏覽器都支持該方法，RGB顏色值規(guī)定形式為RGB(red,green,blue)，red、green和blue分別表示紅、綠、藍(lán)光源的強(qiáng)度，可以為0-255之間的整數(shù)，或者是0%-100%之間的百分比值，例如RGB(255,0,0)和RGB(100%,0%,0%)都表示紅色。表示透明。設(shè)置字體顏色：部分代碼如下：font-size:18px;/*字體大小*/}.hex1{color:#808000;}/*HEX#RRGGBB形式*/.hex2{color:#F0F;}.rgb1{color:RGB(0,145,153);}/*RGB*/.rgba1{color:RGBA(0,145,153,0.5);}/*RGBA*/.rgb2{color:RGB(80%,50%,50%);}/*RGB*/.rgba2{color:RGBA(80%,50%,50%,0.5);}/*RGBA*/.hsl{color:HSL(159,100%,69%);}/*HSL*/.hsla{color:HSLA(159,100%,69%,0.8);}/*HSLA*/.trans{color:transparent;}/*transparent*/</style></head>定義字體顏色案例<head><styletype="text/css">body{color:orange;/*color_name*/font-weight:bold;/*字體加粗*/<body><pclass="hex1">顏色為HEX形式，橄欖綠#808000</p><pclass="hex2">顏色為HEX形式，紫紅色#F0F</p><pclass="rgb1">顏色為RGB形式，RGB(0,145,153)</p><pclass="rgba1">顏色為RGBA形式，RGBA(0,145,153,0.5)</p><pclass="rgb2">顏色為RGB形式，RGB(80%,50%,50%)</p><pclass="rgba2">顏色為RGBA形式，RGBA(80%,50%,50%,0.5)</p><pclass="hsl">顏色為HSL形式，HSL(159,100%,69%)</p><pclass="hsla">顏色為HSLA形式，顏色為HSLA(159,100%,69%,0.8)</p><pclass="trans">顏色為transparent完全透明</p><p>顏色繼承body的顏色，橙色orange</p></body>如何定義字體粗細(xì)？使用font-weight屬性來(lái)定義字體粗細(xì)語(yǔ)法：font-weight:normal|bold|bolder|lighter|100|200....900語(yǔ)法說(shuō)明normal：正常的字體。相當(dāng)于數(shù)字值400bold：粗體。相當(dāng)于數(shù)字值700。bolder：定義比繼承值更重的值lighter：定義比繼承值更輕的值100-900：用數(shù)字表示字體粗細(xì)定義字體粗細(xì)設(shè)置字體粗細(xì)效果：部分代碼如下：.fw4{font-weight:400;}.fw5{font-weight:500;}.fw6{font-weight:600;}.fw7{font-weight:700;}.fw8{font-weight:800;}.fw9{font-weight:900;}.fw10{font-weight:normal;}.fw11{font-weight:bold;}.fw12{font-weight:bolder;}.fw13{font-weight:lighter;}</style></head><p><spanclass="fw1">100</span><spanclass="fw2">200</span><spanclass="fw3">300</span>定義字體粗細(xì)案例<head><styletype="text/css">.fw1{font-weight:100;}.fw2{font-weight:200;}.fw3{font-weight:300;}<spanclass="fw4">400</span><spanclass="fw5">500</span><spanclass="fw6">600</span><spanclass="fw7">700</span><spanclass="fw8">800</span><spanclass="fw9">900</span></p><p><spanclass="fw10">normal</span><spanclass="fw11">bold</span><spanclass="fw12">bolder</span><spanclass="fw13">lighter</span></p><pclass="fw10">這段文字是normal文字，但有時(shí)我們會(huì)對(duì)其中某些文字進(jìn)行強(qiáng)調(diào)，可將其設(shè)置為<spanclass="fw11">粗體bold</span>，這時(shí)它明顯比其它文字粗一些。</p><pclass="fw11">這段文字是bold文字，整段文字都是粗體，但有時(shí)我們需要其中某些文字恢復(fù)正常粗細(xì)，可將其設(shè)置為<spanclass="fw13">正常normal</span>，這時(shí)其它文字明顯比它粗一些。</p>如何定義斜體字體？使用font-style屬性來(lái)定義字體粗細(xì)語(yǔ)法：font-style：normal|italic|oblique語(yǔ)法說(shuō)明normal表示默認(rèn)值，即正常的字體italic表示斜體oblique表示傾斜的字體定義斜體字體設(shè)置字體尺寸：部分代碼如下：<styletype="text/css">.fs1{font-style:normal;}.fs2{font-style:italic;}.fs3{font-style:oblique;}</style></head><body><ul><liclass="fs1">正常字體normal</li><liclass="fs2">斜體italic</li><liclass="fs3">傾斜的字體oblique</li></ul></body></html>定義斜體字體案例<!DOCTYPEhtml><html><head><title>字體風(fēng)格</title>如何定義字體大小寫？使用font-variant屬性來(lái)定義字大小寫語(yǔ)法：font-variant：normal|small-caps語(yǔ)法說(shuō)明normal表示默認(rèn)值，即正常的字體small-caps表示小型的大寫字母字體定義字體大小寫使用小型大寫字母：部分代碼如下：<styletype="text/css">.fv1{font-variant:normal;}.fv2{font-variant:small-caps;}</style></head><body><pclass="fv1">GonewiththeWind</p><pclass="fv2">GonewiththeWind</p></body>定義斜體字體案例<!DOCTYPEhtml><html><head><title>小型大寫字母</title>任務(wù)實(shí)現(xiàn)參考代碼任務(wù)描述任務(wù)分析任務(wù)2設(shè)計(jì)文本樣式任務(wù)描述本案例主要內(nèi)容包括：突出顯示的標(biāo)題、導(dǎo)航條、正文內(nèi)容以及被文字環(huán)繞的圖像、頁(yè)腳等，設(shè)計(jì)文本樣式來(lái)完成如下圖5-2-1的頁(yè)面效果。圖5-2-1：設(shè)計(jì)文本樣式任務(wù)實(shí)現(xiàn)任務(wù)分析實(shí)現(xiàn)思路背景色和不同部分前景色的設(shè)置頁(yè)眉部分的標(biāo)題文字居中顯示、具備一定的字符間距以及陰影導(dǎo)航部分連接沒(méi)有下劃線正文部分文字采用統(tǒng)一的行高、顏色和縮進(jìn)，圖像浮動(dòng)在左邊頁(yè)腳部分文字用灰色略小文字顯示，并設(shè)置居中各部分內(nèi)容之間用水平線分隔任務(wù)實(shí)現(xiàn)定義文本水平對(duì)齊（1）text-align屬性語(yǔ)法：text-align：left|right|center|justify（2）語(yǔ)法說(shuō)明left：內(nèi)容左對(duì)齊。center：內(nèi)容居中對(duì)齊。right：內(nèi)容右對(duì)齊。justify：內(nèi)容兩端對(duì)齊，適用于文字中有空格的情況，例如英文文本。定義文本水平對(duì)齊案例<head><title>對(duì)齊方式</title><styletype="text/css">p{font-size:14px;}.ta1{text-align:left;}.ta2{text-align:center;}.ta3{text-align:right;}.ta4{text-align:justify;}</style></head><body><pclass="ta1">左對(duì)齊</p><pclass="ta2">居中對(duì)齊</p><pclass="ta3">右對(duì)齊</p><pclass="ta1">左對(duì)齊之段落：Ihaveadreamthatonedaythisnationwillriseupandliveoutthetruemeaningofitscreed:"Weholdthesetruthstobeself-evident,thatallmenarecreatedequal."</p><pclass="ta4">兩端對(duì)齊段落：Ihaveadreamthatonedaythisnationwillriseupandliveoutthetruemeaningofitscreed:"Weholdthesetruthstobeself-evident,thatallmenarecreatedequal."</p></body>示例定義文本垂直對(duì)齊vertical-align屬性語(yǔ)法：vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|百分比|長(zhǎng)度語(yǔ)法說(shuō)明：baseline：默認(rèn)值，與基線對(duì)齊。sub：垂直對(duì)齊文本的下標(biāo)。super：垂直對(duì)齊文本的上標(biāo)。top：頂端與行中最高元素的頂端對(duì)齊。text-top：頂端與行中最高文本的頂端對(duì)齊。middle：垂直對(duì)齊元素的中部。bottom：底端與行中最低元素的底端對(duì)齊。text-bottom：底端與行中最低文本的底端對(duì)齊。百分比：用百分比指定由基線算起的偏移量，基線為0%。長(zhǎng)度：用長(zhǎng)度值指定由基線算起的偏移量，基線為0定義文本垂直對(duì)齊案例案例設(shè)置垂直對(duì)齊方式圖5-2-3部分代碼<head><styletype="text/css">p{font-size:18px;font-weight:bold;}span{font-size:13px;}.va1{vertical-align:baseline;}.va2{vertical-align:sub;}.va3{vertical-align:super;}.va4{vertical-align:top;}.va5{vertical-align:text-top;}.va6{vertical-align:middle;}.va7{vertical-align:bottom;}.va8{vertical-align:text-bottom;}.va9{vertical-align:10px;}.va10{vertical-align:20%;}</style></head><body><p>參考文字<spanclass="va1">baseline基線對(duì)齊</span></p><p>參考文字<spanclass="va2">sub下標(biāo)對(duì)齊</span></p><p>參考文字<spanclass="va3">super上標(biāo)對(duì)齊</span></p><p>參考圖文<imgsrc="images/panda.png"title="參考圖片"/><spanclass="va4">top頂部對(duì)齊</span></p><p>參考圖文<imgsrc="images/panda.png"title="參考圖片"/><spanclass="va5">text-top頂端對(duì)齊</span></p><p>參考文字<spanclass="va6">middle居中對(duì)齊</span></p><p>參考文字<spanclass="va7">bottom底部對(duì)齊</span></p><p>參考文字<spanclass="va8">text-bottom底部對(duì)齊</span></p><p>參考文字<spanclass="va9">10px數(shù)值對(duì)齊</span></p><p>參考文字<spanclass="va10">20%數(shù)值對(duì)齊</span></p></body>定義字符間距l(xiāng)etter-spacing

基本語(yǔ)法：letter-spacing:normal|長(zhǎng)度|百分比語(yǔ)法說(shuō)明：normal：默認(rèn)間隔。長(zhǎng)度：用長(zhǎng)度值指定間隔，可以為負(fù)值。百分比：CSS3新增，用百分比指定間隔，可以為負(fù)值，但目前主流瀏覽器均不支持百分比屬性值。案例設(shè)置字符間距定義字符間距案例<head><styletype="text/css">.ls1{letter-spacing:normal;}.ls2{letter-spacing:0.25em;}.ls3{letter-spacing:-1px;}</style></head><body><p>原文：Confidenceofsuccessisalmostsuccess.</p><pclass="ls1">normal字符間距：Confidenceofsuccessisalmostsuccess.</p><pclass="ls2">0.25em字符間距：Confidenceofsuccessisalmostsuccess.</p><pclass="ls3">-1px字符間距：Confidenceofsuccessisalmostsuccess.</p></body>單詞間距word-spacing

基本語(yǔ)法：word-spacing:normal|長(zhǎng)度|百分比語(yǔ)法說(shuō)明：normal：默認(rèn)間隔。長(zhǎng)度：用長(zhǎng)度值指定間隔，可以為負(fù)值。百分比：CSS3新增，用百分比指定間隔，可以為負(fù)值，但目前主流瀏覽器均不支持百分比屬性值。字距和詞距一般很少使用，使用時(shí)應(yīng)慎重考慮用戶的閱讀體驗(yàn)和感受。對(duì)于中文用戶來(lái)說(shuō)，letter-spacing屬性有效，而word-spacing:屬性無(wú)效。注意案例設(shè)置行高單詞間距案例<head><styletype="text/css">p{font-size:13px;}.lh1{line-height:normal;}.lh2{line-height:24px;}.lh3{line-height:188%;}.lh4{line-height:1.5;}</style></head><body><pclass="lh1">（line-height:normal;所有段落文字的大小均為13px）我與父親不相見已二年余了，我最不能忘記的是他的背影。</p><pclass="lh2">（line-height:24px;）那年冬天，……………</p><pclass="lh3">（line-height:188%;）回家變賣典質(zhì)，…………</p><pclass="lh4">（line-height:1.5;）到南京時(shí)，………..</p></body>定義行高line-height

基本語(yǔ)法：line-height:normal|長(zhǎng)度|百分比|數(shù)值語(yǔ)法說(shuō)明：normal：默認(rèn)行高。長(zhǎng)度值：用長(zhǎng)度值指定行高，不允許負(fù)值。如“l(fā)ine-height:18px”設(shè)定行高為18px。百分比：用百分比指定行高，其百分比取值是基于字體的高度尺寸。如“l(fā)ine-height:150%”設(shè)定行高為字體尺寸的150%，即1.5倍行距。數(shù)值：用乘積因子指定行高，不允許負(fù)值。如“l(fā)ine-height:2”設(shè)定行高為字體大小的2倍，相當(dāng)于2倍行距。定義行高案例案例設(shè)置行高：圖5-2-6部分代碼<head><styletype="text/css">p{font-size:13px;}.lh1{line-height:normal;}.lh2{line-height:24px;}.lh3{line-height:188%;}.lh4{line-height:1.5;}</style></head><body><pclass="lh1">（line-height:normal;所有段落文字的大小均為13px）我與父親不相見已二年余了，我最不能忘記的是他的背影。</p><pclass="lh2">（line-height:24px;）那年冬天，……………</p><pclass="lh3">（line-height:188%;）回家變賣典質(zhì)，…………</p><pclass="lh4">（line-height:1.5;）到南京時(shí)，………..</p></body>定義縮進(jìn)text-indent屬性語(yǔ)法：text-indent:[長(zhǎng)度值|百分比]&&hanging?&&each-line?語(yǔ)法說(shuō)明：長(zhǎng)度值：用長(zhǎng)度值指定文本的縮進(jìn)，可以為負(fù)值。如“text-indent:2em”表示縮進(jìn)兩個(gè)字體高百分比：用百分比指定文本的縮進(jìn)，可以為負(fù)值。如“text-indent:20%”each-line：CSS3新增屬

溫馨提示

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

評(píng)論

0/150

提交評(píng)論