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

下載本文檔

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

文檔簡介

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

larger。百分比：用百分比指定文字大小，相對于父對象中字體的尺寸。設(shè)置字體尺寸：部分代碼如下：.fs3{font-size:14px;}.fs4{font-size:12pt;}.fs5{font-size:larger;}.fs6{font-size:150%;}</style></head><body><h2>字體尺寸（h2標題），父對象為瀏覽器窗口</h2><pclass="fs1">x-large大小的文字</p><pclass="fs2">medium大小的文字</p><p>未使用樣式，默認大小的文字</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屬性來設(shè)置color還會應(yīng)用到元素的所有邊框，除非被其它邊框顏色屬性覆蓋color語法：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分別表示紅、綠、藍光源的強度，可以為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>如何定義字體粗細？使用font-weight屬性來定義字體粗細語法：font-weight:normal|bold|bolder|lighter|100|200....900語法說明normal：正常的字體。相當于數(shù)字值400bold：粗體。相當于數(shù)字值700。bolder：定義比繼承值更重的值lighter：定義比繼承值更輕的值100-900：用數(shù)字表示字體粗細定義字體粗細設(shè)置字體粗細效果：部分代碼如下：.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>定義字體粗細案例<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文字，但有時我們會對其中某些文字進行強調(diào)，可將其設(shè)置為<spanclass="fw11">粗體bold</span>，這時它明顯比其它文字粗一些。</p><pclass="fw11">這段文字是bold文字，整段文字都是粗體，但有時我們需要其中某些文字恢復正常粗細，可將其設(shè)置為<spanclass="fw13">正常normal</span>，這時其它文字明顯比它粗一些。</p>如何定義斜體字體？使用font-style屬性來定義字體粗細語法：font-style：normal|italic|oblique語法說明normal表示默認值，即正常的字體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>字體風格</title>如何定義字體大小寫？使用font-variant屬性來定義字大小寫語法：font-variant：normal|small-caps語法說明normal表示默認值，即正常的字體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ù)實現(xiàn)參考代碼任務(wù)描述任務(wù)分析任務(wù)2設(shè)計文本樣式任務(wù)描述本案例主要內(nèi)容包括：突出顯示的標題、導航條、正文內(nèi)容以及被文字環(huán)繞的圖像、頁腳等，設(shè)計文本樣式來完成如下圖5-2-1的頁面效果。圖5-2-1：設(shè)計文本樣式任務(wù)實現(xiàn)任務(wù)分析實現(xiàn)思路背景色和不同部分前景色的設(shè)置頁眉部分的標題文字居中顯示、具備一定的字符間距以及陰影導航部分連接沒有下劃線正文部分文字采用統(tǒng)一的行高、顏色和縮進，圖像浮動在左邊頁腳部分文字用灰色略小文字顯示，并設(shè)置居中各部分內(nèi)容之間用水平線分隔任務(wù)實現(xiàn)定義文本水平對齊（1）text-align屬性語法：text-align：left|right|center|justify（2）語法說明left：內(nèi)容左對齊。center：內(nèi)容居中對齊。right：內(nèi)容右對齊。justify：內(nèi)容兩端對齊，適用于文字中有空格的情況，例如英文文本。定義文本水平對齊案例<head><title>對齊方式</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">左對齊</p><pclass="ta2">居中對齊</p><pclass="ta3">右對齊</p><pclass="ta1">左對齊之段落：Ihaveadreamthatonedaythisnationwillriseupandliveoutthetruemeaningofitscreed:"Weholdthesetruthstobeself-evident,thatallmenarecreatedequal."</p><pclass="ta4">兩端對齊段落：Ihaveadreamthatonedaythisnationwillriseupandliveoutthetruemeaningofitscreed:"Weholdthesetruthstobeself-evident,thatallmenarecreatedequal."</p></body>示例定義文本垂直對齊vertical-align屬性語法：vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|百分比|長度語法說明：baseline：默認值，與基線對齊。sub：垂直對齊文本的下標。super：垂直對齊文本的上標。top：頂端與行中最高元素的頂端對齊。text-top：頂端與行中最高文本的頂端對齊。middle：垂直對齊元素的中部。bottom：底端與行中最低元素的底端對齊。text-bottom：底端與行中最低文本的底端對齊。百分比：用百分比指定由基線算起的偏移量，基線為0%。長度：用長度值指定由基線算起的偏移量，基線為0定義文本垂直對齊案例案例設(shè)置垂直對齊方式圖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基線對齊</span></p><p>參考文字<spanclass="va2">sub下標對齊</span></p><p>參考文字<spanclass="va3">super上標對齊</span></p><p>參考圖文<imgsrc="images/panda.png"title="參考圖片"/><spanclass="va4">top頂部對齊</span></p><p>參考圖文<imgsrc="images/panda.png"title="參考圖片"/><spanclass="va5">text-top頂端對齊</span></p><p>參考文字<spanclass="va6">middle居中對齊</span></p><p>參考文字<spanclass="va7">bottom底部對齊</span></p><p>參考文字<spanclass="va8">text-bottom底部對齊</span></p><p>參考文字<spanclass="va9">10px數(shù)值對齊</span></p><p>參考文字<spanclass="va10">20%數(shù)值對齊</span></p></body>定義字符間距l(xiāng)etter-spacing

基本語法：letter-spacing:normal|長度|百分比語法說明：normal：默認間隔。長度：用長度值指定間隔，可以為負值。百分比：CSS3新增，用百分比指定間隔，可以為負值，但目前主流瀏覽器均不支持百分比屬性值。案例設(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

基本語法：word-spacing:normal|長度|百分比語法說明：normal：默認間隔。長度：用長度值指定間隔，可以為負值。百分比：CSS3新增，用百分比指定間隔，可以為負值，但目前主流瀏覽器均不支持百分比屬性值。字距和詞距一般很少使用，使用時應(yīng)慎重考慮用戶的閱讀體驗和感受。對于中文用戶來說，letter-spacing屬性有效，而word-spacing:屬性無效。注意案例設(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;）到南京時，………..</p></body>定義行高line-height

基本語法：line-height:normal|長度|百分比|數(shù)值語法說明：normal：默認行高。長度值：用長度值指定行高，不允許負值。如“l(fā)ine-height:18px”設(shè)定行高為18px。百分比：用百分比指定行高，其百分比取值是基于字體的高度尺寸。如“l(fā)ine-height:150%”設(shè)定行高為字體尺寸的150%，即1.5倍行距。數(shù)值：用乘積因子指定行高，不允許負值。如“l(fā)ine-height:2”設(shè)定行高為字體大小的2倍，相當于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;）到南京時，………..</p></body>定義縮進text-indent屬性語法：text-indent:[長度值|百分比]&&hanging?&&each-line?語法說明：長度值：用長度值指定文本的縮進，可以為負值。如“text-indent:2em”表示縮進兩個字體高百分比：用百分比指定文本的縮進，可以為負值。如“text-indent:20%”each-line：CSS3新增屬

溫馨提示

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

評論

0/150

提交評論