第1章利用CSS設(shè)計(jì)頁(yè)面排版

上傳人：6*** IP屬地：湖北上傳時(shí)間：2023-02-04 格式：PPT 頁(yè)數(shù)：72 大小：666KB 積分：28 舉報(bào) 版權(quán)申訴

已閱讀5頁(yè)，還剩67頁(yè)未讀，繼續(xù)免費(fèi)閱讀

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

文檔簡(jiǎn)介

主講教師：CSS+DIV網(wǎng)頁(yè)布局技術(shù)教程項(xiàng)目一：利用CSS設(shè)計(jì)頁(yè)面排版引言HTML語(yǔ)言是所有網(wǎng)頁(yè)制作的基礎(chǔ)。CSS可以讓頁(yè)面變得更簡(jiǎn)潔，更容易保護(hù)。在本項(xiàng)目中，通過1個(gè)項(xiàng)目導(dǎo)入、3個(gè)工作任務(wù)實(shí)踐、1個(gè)上機(jī)實(shí)訓(xùn)，向讀者傳遞網(wǎng)頁(yè)中字體樣式、顏色、段落格式的重要性，展示出CSS字體和文字屬性設(shè)計(jì)出精美的網(wǎng)頁(yè)正文版式。任務(wù)一：使用繼承制作網(wǎng)頁(yè)本節(jié)內(nèi)容CSS基本語(yǔ)法CSS的概念CSS選擇器繼承1.土的固體顆粒CSS的概念CSS（CascadingStyleSheet），中文譯為層疊樣式表，它用于控制網(wǎng)頁(yè)式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。CSS是1996年由W3C審核通過，并且推薦使用的。簡(jiǎn)單地說，CSS的引入就是為了使得HTML語(yǔ)言能夠更好地適應(yīng)頁(yè)面的美工設(shè)計(jì)。它以HTML語(yǔ)言為基礎(chǔ)，提供了豐富的格式化功能，如字體、顏色、背景和整體排版等，并且網(wǎng)頁(yè)設(shè)計(jì)者可以針對(duì)各種可視化瀏覽器設(shè)置不同的樣式風(fēng)格，包括顯示器、打印機(jī)、打字機(jī)、投影儀和PDA等。CSS的引入隨即引發(fā)了網(wǎng)頁(yè)設(shè)計(jì)一個(gè)又一個(gè)新高潮，使用CSS設(shè)計(jì)的優(yōu)秀頁(yè)面層出不窮。2.

CSS基本語(yǔ)法1．土的三相比例指標(biāo)換算公式CSS代碼可以放在HTML文件的<style>標(biāo)簽內(nèi)，也可以放在網(wǎng)頁(yè)標(biāo)簽的style屬性中，但推薦用法是放在單獨(dú)的樣式表文件中，然后通過<link>標(biāo)簽或者@import命令導(dǎo)入網(wǎng)頁(yè)文檔。CSS樣式表文件是一個(gè)文件文件，擴(kuò)展名為.css，可以使用任何文本編輯器打開，并進(jìn)行編輯。CSS代碼被分割為一個(gè)個(gè)樣式，它也是CSS代碼的最小單元。每一個(gè)CSS樣式都必須由兩部分組成：選擇器（selector）和聲明（declaration）。聲明又包括屬性（prperty）和屬性值（value）。在每個(gè)聲明之后要用分號(hào)表示一個(gè)聲明的結(jié)束。其中，在樣式的最后一條聲明中可以省略分號(hào)。但建議使用分號(hào)結(jié)束聲明?；菊Z(yǔ)法如下。Selector{Propery:value;}例如：body{padding:0px;}上面的樣式定義了body元素的兩個(gè)屬性，即設(shè)置頁(yè)面字體大小和顏色，如圖1-7所示。圖1-7CSS樣式構(gòu)成一個(gè)或多個(gè)樣式就構(gòu)成了一個(gè)樣式表，如一個(gè)樣式表文件所包含的所有樣式就可以稱為一個(gè)樣式表，即上部樣式表，一個(gè)<style>標(biāo)簽包含的所有樣式也可以稱一個(gè)樣式表，即內(nèi)部樣式表。一個(gè)網(wǎng)頁(yè)文檔中可以定義或者綁定多個(gè)樣式表，上部樣式表和內(nèi)部樣式表可以同時(shí)存在于一個(gè)網(wǎng)頁(yè)文檔中，它們之間通過一定的優(yōu)先級(jí)作用于匹配對(duì)象。其中，body是選擇器，表示元素本身，即<body>標(biāo)簽；padding是屬性，表示補(bǔ)白（也稱內(nèi)邊距），0px表示屬性值。這條件樣式所呈現(xiàn)的效果是清除頁(yè)面與瀏覽器邊框之間的距離，實(shí)現(xiàn)頁(yè)面與瀏覽器邊框無縫顯示。一個(gè)樣式不是僅可以包含一個(gè)聲明，而是可以包含無限個(gè)聲明。聲明之間使用分號(hào)隔開，例如：body{font:14px;color:#000;}body{color:#000;background:#fff;margin:0;padding:0;font-family:Georgia,Palatino,serif;}每一條css樣式定義由兩部分組成，形式如下：[code]選擇器{樣式}[/code]在{}之前的部分就是“選擇器”?！斑x擇器”指明了{(lán)}中的“樣式”的作用對(duì)象，也就是“樣式”作用于網(wǎng)頁(yè)中的哪些元素。CSS包括的選擇器分別有標(biāo)簽選擇器、ID選擇器、類型選擇器、偽類選擇器、后類選擇器、子選擇器、通用選擇器、相鄰選擇器及屬性選擇器。3.CSS選擇器標(biāo)簽選擇器一個(gè)完整的HTML頁(yè)面是有很多不同的標(biāo)簽組成，而標(biāo)簽選擇器，則是決定哪些標(biāo)簽。采用相應(yīng)的CSS樣式，在style.css文件中對(duì)p標(biāo)簽樣式的聲明如下：p{font-size:12px;background:#900;color:090;}復(fù)制代碼則頁(yè)面中所有p標(biāo)簽的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)，這在后期維護(hù)中，如果想改變整個(gè)網(wǎng)站中p標(biāo)簽背景的顏色，只需要修改background屬性就可以。CSSID選擇器ID選擇器使用“#”前綴標(biāo)識(shí)符進(jìn)行標(biāo)識(shí)，后面緊跟著指定元素的ID名稱。語(yǔ)法如下：*#intro{font-weight:bold;}與類選擇器一樣，ID選擇器中可以忽略通配選擇器。前面的例子也可以寫作：#intro{font-weight:bold;}這個(gè)選擇器的效果將是一樣的。第二個(gè)區(qū)別是ID選擇器不引用class屬性的值，毫無疑問，它要引用id屬性中的值。以下是一個(gè)實(shí)際ID選擇器的例子：<pid="intro">Thisisaparagraphofintroduction.類選擇器類選擇器允許以一種獨(dú)立于文檔元素的方式來指定樣式。使用以下語(yǔ)法向這些歸類的元素應(yīng)用樣式，即類名前有一個(gè)點(diǎn)號(hào)（.），然后結(jié)合通配選擇器：*.important{color:red;}如果用戶只想選擇所有類名相同的元素，可以在類選擇器中忽略通配選擇器，這沒有任何不好的影響：.important{color:red;}該選擇器可以單獨(dú)使用，也可以與其他元素結(jié)合使用。要應(yīng)用樣式而不考慮具體設(shè)計(jì)的元素，最常用的方法就是使用類選擇器。在使用類選擇器之前，需要修改具體的文檔標(biāo)記，以便類選擇器正常工作。為了將類選擇器的樣式與元素關(guān)聯(lián)，必須將class指定為一個(gè)適當(dāng)?shù)闹?。?qǐng)看下面的HTML代碼：<h1class="important">Thisheadingisveryimportant.</h1><pclass="important">Thisparagraphisveryimportant.在上面的代碼中，兩個(gè)元素的class都指定為important：第一個(gè)標(biāo)題（h1元素），第二個(gè)段落（p元素）。偽類選擇器偽類選擇器包括偽類選擇器和偽類對(duì)象選擇器，以冒號(hào)（:）作為前綴，冒號(hào)后緊跟偽類或偽對(duì)象名稱，冒號(hào)前后沒有空格，否則將解析為包含選擇器。偽類的語(yǔ)法如下：selector:pseudo-class{property:value}CSS類也可與偽類搭配使用。selector.class:pseudo-class{property:value}1）錨偽類在支持CSS的瀏覽器中，鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動(dòng)狀態(tài)，已被訪問狀態(tài)，未被訪問狀態(tài)，和鼠標(biāo)懸停狀態(tài)。a:link{color:#FF0000} /*未訪問的鏈接*/a:visited{color:#00FF00} /*已訪問的鏈接*/a:hover{color:#FF00FF} /*鼠標(biāo)移動(dòng)到鏈接上*/a:active{color:#0000FF} /*選定的鏈接*/2）偽類與CSS類偽類可以與CSS類配合使用：a.red:visited{color:#FF0000}<aclass="red"href="css_syntax.asp">CSSSyntax</a>假如上面的例子中的鏈接被訪問過，那么它將顯示為紅色。CSS2-:first-child偽類用戶可以使用:first-child偽類來選擇元素的第一個(gè)子元素。這個(gè)特定偽類很容易遭到誤解，所以有必要舉例來說明?？紤]以下標(biāo)記：<div>Thesearethenecessarysteps:<ul><li>IntertKey</li><li>Turnkeyclockwise</li><li>Pushaccelerator</li></ul>Donotpushthebrakeatthesametimeastheaccelerator.</div>在上面的例子中，作為第一個(gè)元素的元素包括第一個(gè)p、第一個(gè)li和strong和em元素。指定以下規(guī)則：p:first-child{font-weight:bold;}li:first-child{text-transform:uppercase;}第一個(gè)規(guī)則將作為某元素第一個(gè)子元素的所有p元素設(shè)置為粗體。第二個(gè)規(guī)則將作為某個(gè)元素（在HTML中，這肯定是ol或ul元素）第一個(gè)子元素的所有l(wèi)i元素變成大寫。請(qǐng)?jiān)L問該鏈接，來查看這個(gè)

:first-child實(shí)例的效果。3）CSS2-:lang偽類:lang偽類使你有能力為不同的語(yǔ)言定義特殊的規(guī)則。后代選擇器后代選擇器也稱為包含選擇器，用來選擇特定元素或元素組的后代，后代選擇器用兩個(gè)常用選擇器，中間加一個(gè)空格表示。其中前面的常用選擇器選擇父元素，后面的常用選擇器選擇子元素，樣式最終會(huì)應(yīng)用于子元素中。如：<style>.father.child{color:#0000CC;}</style><pclass="father">黑色<labelclass="child">藍(lán)色也是藍(lán)色</label>這里定義了所有class屬性為father的元素下面的class屬性為child的顏色為藍(lán)色。后代選擇器是一種很有用的選擇器，使用后代選擇器可以更加精確的定位元素。子選擇器請(qǐng)注意這個(gè)選擇器與后代選擇器的區(qū)別，子選擇器（childselector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一個(gè)后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進(jìn)行選擇，而子選擇器是通過“>”進(jìn)行選擇，我們看下面的代碼：ExampleSourceCodeCSS：#linksa{color:red;}#links>a{color:blue;}HTML：<pid="links"><ahref="#">Div+CSS教程</a>><ahref="#">CSS布局實(shí)例</a><ahref="#">CSS2.0教程</a>將會(huì)看到第一個(gè)鏈接元素“Div+CSS教程”會(huì)顯示成藍(lán)色，而其它兩個(gè)元素會(huì)顯示成紅色。當(dāng)然，或許瀏覽器并不支持這樣的CSS選擇符。通用選擇器通用選擇器用*來表示。例如：*{font-size:12px;}表示所有的元素的字體大小都是12px；同時(shí)通用選擇器還可以和后代選擇器組合。例如：p*{……}表示所有p元素后代的所有元素都應(yīng)用這個(gè)樣式。但是與后代選擇器的搭配容易出現(xiàn)瀏覽器不能解析的情況，比如像這樣子：所有的文本都被定義成紅色所有這個(gè)段落里面的子標(biāo)簽都會(huì)被定義成藍(lán)色所有這個(gè)段落里面的子標(biāo)簽都會(huì)被定義成藍(lán)色所有這個(gè)段落里面的子標(biāo)簽都會(huì)被定義成藍(lán)色所有這個(gè)段落里面的子標(biāo)簽都會(huì)被定義成藍(lán)色這個(gè)例子里面p標(biāo)簽里面嵌套了一個(gè)p標(biāo)簽，這個(gè)時(shí)候樣式可能會(huì)出現(xiàn)與預(yù)期結(jié)果不相同的結(jié)果。群組選擇器當(dāng)幾個(gè)元素樣式屬性一樣時(shí)，可以共同調(diào)用一個(gè)聲明，元素之間用逗號(hào)分隔。如：p,td,li{line-height:20px;color:#c00;}#mainp,#siderspan{color:#000;line-height:26px;}.www_52css_com,#mainpspan{color:#f60;}.text1h1,#siderh3,.art_titleh2{font-weight:100;}相鄰?fù)x擇器除了上面的子選擇器與后代選擇器，用戶可能還希望找到兄弟兩個(gè)當(dāng)中的一個(gè)，如一個(gè)標(biāo)題h1元素后面緊跟了兩個(gè)段落p元素，我們想定位第一個(gè)段落p元素，對(duì)它應(yīng)用樣式。我們就可以使用相鄰?fù)x擇器。下面的代碼：ExampleSourceCodeCSSh1+p{color:blue}HTML<h1>一個(gè)非常專業(yè)的CSS站點(diǎn)</h1>Div+CSS教程中，介紹了很多關(guān)于CSS網(wǎng)頁(yè)布局的知識(shí)。CSS布局實(shí)例中，有很多與CSS布局有關(guān)的案例。用戶將會(huì)看到第一個(gè)段落Div+CSS教程中，介紹了很多關(guān)于CSS網(wǎng)頁(yè)布局的知識(shí)。文字顏色將會(huì)是藍(lán)色。而第二段則不受此CSS樣式的影響。屬性選擇器您可以用判斷html標(biāo)簽的某個(gè)屬性是否存在的方法來定義css屬性選擇器，是根據(jù)元素的屬性來匹配的，其屬性可以是標(biāo)準(zhǔn)屬性也可以是自定義屬性；!ie6，0010當(dāng)然，也可以同時(shí)匹配多個(gè)屬性；[attr][title]{margin-left:10px}//選擇具有title屬性的所有元素；[attr=val][title='this']{margin-right:10px}//選擇屬性title的值等于this的所有元素[attr^=val][title^='this']{margin-left:15px}//選擇屬性title的值以this開頭的所有元素[attr$=val][title$='this']{margin-right:15px}//選擇屬性title的值以this結(jié)尾的所有元素[attr*=val][title*='this']{margin:10px}//選擇屬性title的值包含this的所有元素[attr~=val][title~='this']{margin-top:10px}//選擇屬性title的值包含一個(gè)以空格分隔的詞為this的所有元素，即title的值里必須要有this這個(gè)單詞并且this要與其他單詞之間有空格分隔[attr|=val][title|='this']{margin-bottom:10px}//選擇屬性title的值等于this，或值以this-開頭的所有元素在CSS語(yǔ)言中中的繼續(xù)并沒有像C++和Java等語(yǔ)言中的那么復(fù)雜，簡(jiǎn)單地說就是將各個(gè)HTML標(biāo)記看作一個(gè)個(gè)容器，其中被包含的小容器會(huì)繼承所包含它的大容器的風(fēng)格樣式。1）父子關(guān)系所有的CSS語(yǔ)句都是基于各個(gè)標(biāo)訊之間的父子關(guān)系的，為了更好地理解父子關(guān)系，首先從HTML文件的組織結(jié)構(gòu)入手。4.繼承2）CSS繼續(xù)的運(yùn)用通過上面講解，已經(jīng)對(duì)各個(gè)標(biāo)記之間的父子關(guān)系有所了解。下面進(jìn)一步了解CSS繼承的運(yùn)用。CSS繼承指的是子標(biāo)民會(huì)繼續(xù)父標(biāo)記的所有樣式風(fēng)格，并可以在父標(biāo)記樣式風(fēng)格的基礎(chǔ)上再加以修改，產(chǎn)生新的樣式，而子標(biāo)記的樣式風(fēng)格完全不會(huì)影響父標(biāo)記。任務(wù)實(shí)踐范琳啟動(dòng)Dreamweaver，在主頁(yè)中新建一個(gè)網(wǎng)頁(yè)，使用CSS的繼承，加入嵌套選擇器，在不修改源代碼的情況，對(duì)深層的<li>進(jìn)行控制，顯示效果如圖1-11所示。圖1-11合理利用CSS的繼承任務(wù)二：設(shè)計(jì)百度Logo….本節(jié)內(nèi)容定義字體大小字體定義英文大小寫1.字體在HTML語(yǔ)言中，文字的字體通過<fontface="字體名稱">來設(shè)置，而在CSS中了體則是通過font-family屬性來控制的，下面是該屬性的語(yǔ)句。P{Font-family:黑體,Arial,宋體,sans-serift;}以上語(yǔ)句聲明了HTML頁(yè)面中標(biāo)記的字體名稱，并且同時(shí)聲明了3個(gè)字體名稱，分別是黑體、Arial和宋體。整名代碼告訴瀏覽器首先在用戶的計(jì)算機(jī)中尋找“黑體”，如果該用戶計(jì)算中沒有黑體，則接著尋找“Arial”字體，如果黑體與Arail都沒有，再尋找“宋體”。如果font-famil中所聲明的所有字體都沒有，則使用瀏覽器的默認(rèn)字體顯示。font-famil屬性可以同時(shí)聲明任意種字體，字體之間用逗號(hào)隔開。另外，一些字體的名稱中間會(huì)出現(xiàn)空格，例如TimesNewRoman，這時(shí)需要用雙引號(hào)將其引起來，如“TimesNewRoman”。通常在正文中使用的是易讀性較強(qiáng)的serif字體，用戶長(zhǎng)時(shí)間閱讀下不容易疲勞。而標(biāo)題和表格則采用較醒目的sans-serif字體，它們需要顯著和醒目，但不必長(zhǎng)時(shí)間盯著這些文字來閱讀。Web設(shè)計(jì)及瀏覽器設(shè)置中也推薦遵循些原則。CSS使用font-size屬性來定義字體大小，該屬性用法如下。font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length其中xx-small（最?。-small（較?。?、small（小）、medium（正常）large（大）、x-large（較大）、xx-large（最大）表示絕對(duì)字體尺寸，這些特殊值將根據(jù)對(duì)象字體進(jìn)行調(diào)整。Larger（增大）和smaller（減少）這對(duì)特殊值能夠根據(jù)父對(duì)象中的字體尺寸進(jìn)行相對(duì)增大或者縮小處理，使用成比例的en單位進(jìn)行計(jì)算。Length可以是百分?jǐn)?shù)，或者浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值，但不可為負(fù)值。其百分經(jīng)取值是基于父對(duì)象中字體的尺寸來計(jì)算，與em單位計(jì)算方法相同。2.定義字體大小CSS提供他很多單們，它閃都可被歸為兩大類：絕對(duì)單位和相對(duì)單位。相對(duì)單位所定義的字體是固定的，大小顯示效果不會(huì)受外界因素影響，例如in（imch，英寸）、cm（centimerter，厘米）、mm（millimeter，毫米）、pt（point，印刷的點(diǎn)數(shù)）、pc（pica，1pc=12pt）。此外，xx-small、x-small、small、medium、large、x-large、xx-large這些關(guān)鍵字也是絕對(duì)單位。文字的各種顏色配合其他頁(yè)面元素組成了整個(gè)五彩繽紛的頁(yè)面，在CSS中文字顏色是通過color屬性來定義的字體顏色，該屬性用法如下。color:color在設(shè)置某一段落文字的顏色時(shí)，通?？梢杂?lt;span>標(biāo)記，將需要的部分進(jìn)行單獨(dú)標(biāo)注，然后再設(shè)置標(biāo)記的顏色屬性。3.定義字體顏色CSS使用font-weight屬性來定義字體粗細(xì)，該屬性用法如下。font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900font-weight屬性取值比較特殊，其中normal關(guān)鍵字表示默認(rèn)值，即正常字體，相當(dāng)于取值為400。bold關(guān)鍵字表示粗體，相當(dāng)于取值700，或者使用標(biāo)簽定義的字體效果。Bolder（較粗）和lighter（較細(xì)）相對(duì)于normal字體粗細(xì)而言。另外也可以設(shè)置值為100、200、300、400、500、600、700、800、900，它們分別表示字體的粗細(xì)，是對(duì)字體粗細(xì)的一種量化方式。值越大就表示越粗，越小就表示越細(xì)。4.定義字體粗細(xì)CSS使用font-style屬性來定義字體傾斜效果，該屬性用法如下。font-style:normal|italic|obliue其中，normal表示默認(rèn)值，即正常的字體，italic表示斜體，oblique表示傾斜的字體。Italic和oblique兩個(gè)取值只能在英文等西方文字中有效。5.定義斜體字體CSS使用text-decoration屬性來定義字體下劃線、刪除線和頂劃線效果，該屬性用法如下。text-decoration:none||underline||overline||line-through||blink其中，none表示默認(rèn)值，即無裝飾字體，underline表示下劃線效果，line-through表示刪除線效果，overline表示頂劃線效果，blink表示閃爍效果。6.定義下劃線、刪除線和頂劃線CSS使用font-variant屬性來定義字體大小效果，該屬性用法如下。font-variant:normal|small-caps其中，normal表示默認(rèn)值，即正常字體，small-caps表示小型的大寫字母字體。CSS還定義了一個(gè)text-transform屬性，該屬性也能夠定義字體大小寫效果，不過該屬性主要定義單詞大小寫樣式，用法格式如下。text-transform:none|capitalize|uppercase|lowercase其中，none表示默認(rèn)值，無轉(zhuǎn)換發(fā)生。capitalize表示將每個(gè)單詞的第一個(gè)字母轉(zhuǎn)換成大寫，其余無轉(zhuǎn)換發(fā)生，uppercase表示把所有字母都轉(zhuǎn)換成大寫，lowercase表示把所有字母都轉(zhuǎn)換成小寫。7.定義英文大小寫傅云青使用CSS設(shè)置字體設(shè)計(jì)百度Logo，如圖1-24所示。任務(wù)實(shí)踐圖1-24百度Logo效果圖任務(wù)三：排版新聞文稿…本節(jié)內(nèi)容定義文本垂直對(duì)齊方式定義文本對(duì)齊方式首字母放大1.定義文本對(duì)齊方式在傳統(tǒng)布局中，一般使用HTML的align屬性來定義對(duì)象水平對(duì)齊，這種用法在過渡型文檔類型中依然可以使用。CSS使用text-algn屬性來定義文本的水平對(duì)齊方式，該屬性的用法如下。text-align:left|right|center|justify該屬性取值包括4個(gè)，其中l(wèi)eft表示默認(rèn)值，左對(duì)齊，right表示右對(duì)齊，center表示居中對(duì)齊，justify表示兩端對(duì)齊。2.定義文本垂直對(duì)齊方式在傳統(tǒng)的布局中，一般元素不支持垂直對(duì)齊效果，不過在表格中可以實(shí)現(xiàn)。CSS使用verical-align屬性來定義文本垂直對(duì)齊問題，該屬性垂直居中顯示。verical-align:auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom|length其中，auto屬性值將根據(jù)layout-flow屬性的值對(duì)齊對(duì)象內(nèi)容；baseline表示默認(rèn)值，表示將支持valign特性的對(duì)象內(nèi)容與基線齊；sub表示垂直對(duì)齊文本的下標(biāo)；supper表示垂直對(duì)齊文本的上標(biāo)；top表示將支持valign特性的對(duì)象的內(nèi)容與對(duì)象頂端對(duì)齊；text-top表示將支持valign特性的對(duì)象的文本與對(duì)象頂端對(duì)齊；middle表示將支持valign特性的對(duì)象內(nèi)容與對(duì)象中部對(duì)齊；bottom表示將支持valign特性的對(duì)象的內(nèi)容與對(duì)象底端的對(duì)齊；text-bottom表示將支持valign特性的對(duì)象的文本與對(duì)象頂端對(duì)對(duì)齊；length表示由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值或者百分?jǐn)?shù)，可為負(fù)數(shù)，定義由基線算起的偏移量，基線對(duì)于數(shù)值來說為0，對(duì)于百分?jǐn)?shù)來說就是0%。3.定義行間距行間距是段落文本行之間的距離。CSS使用line-height屬性定義行高，該屬性的用法如下。line-height:normal|length其中，normal表示默認(rèn)值，一般為1.2em，length表示百分比數(shù)字，或者由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值，允許為負(fù)值。4.定義字間距CSS使用letter-spacing屬性定義字間距，使用word-spacing屬性定義詞間距。這兩個(gè)屬性的取值都是長(zhǎng)度值，由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成，既可以是絕對(duì)數(shù)值又可以是相對(duì)數(shù)值，默認(rèn)值為normal，表示默認(rèn)間隔。定義詞間距時(shí)，以空格為基準(zhǔn)進(jìn)行高節(jié)，如果多個(gè)單詞被連在一起，則被word-spacing視為一個(gè)單詞；如果漢字被空格分隔，則分隔的多個(gè)漢字就被視為不同的單詞，word-spacing屬性此時(shí)有效。5.定義縮進(jìn)CSS使用text-indent屬性定義首行縮進(jìn)，該屬性用法如下。text:indent:lengthlength表示百分比數(shù)字，或者由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值，允許為負(fù)值。建議在設(shè)置縮進(jìn)單位時(shí)，以em為設(shè)置單位，它表示一個(gè)字距，這樣比較精確確定首行縮進(jìn)效果。6.首字母放大在許多報(bào)刊或雜志文章中，開篇第1個(gè)字都很大，這種首字放大的效果往往能在第一時(shí)間就吸引讀者的眼球。在CSS中首字放大的效果是通過第1個(gè)字進(jìn)行單獨(dú)設(shè)置樣式來實(shí)現(xiàn)的。任務(wù)實(shí)踐李露使用CSS文本設(shè)置樣式、段落排版功能，編輯網(wǎng)頁(yè)新聞稿件，如圖1-35所示。圖1-35新聞網(wǎng)頁(yè)最終顯示效果上機(jī)實(shí)訓(xùn)：制作百度搜索粘性土的稠度本節(jié)內(nèi)容無粘性土的密實(shí)度土的物理力學(xué)基本指標(biāo)土的擊實(shí)原理實(shí)訓(xùn)步驟本節(jié)內(nèi)容實(shí)訓(xùn)內(nèi)容和要求實(shí)訓(xùn)背景實(shí)訓(xùn)素材李露是某網(wǎng)站的編輯，接到主管任務(wù)制作百度搜索，并進(jìn)行段落排版。要示調(diào)整段落格式以及設(shè)置標(biāo)題、正文文本字體，如圖1-36所示。圖1-36百度搜索界面實(shí)訓(xùn)背景

搜索引擎一直是網(wǎng)上沖浪必不可少的工具，而搜索引擎在顯示搜索結(jié)果時(shí)如何能讓用戶一目了解找到關(guān)鍵字，是每一個(gè)搜索網(wǎng)站在排版時(shí)必須考慮的，而各種搜索結(jié)果恰恰都是以文字段落為主。作為國(guó)內(nèi)搜索引擎之一的百度一直保持著友好的用戶界面。由于CSS提供了段落排版功能，如文本對(duì)齊、行間中、字間距、縮進(jìn)等。利用這些功能，用戶可以對(duì)網(wǎng)頁(yè)中的新聞文檔進(jìn)行排版，方便、快捷。因此，李露決定使用CSS的排版功能來模擬百度搜索顯示界面。實(shí)訓(xùn)內(nèi)容和要求（1）首先建立段落HTML結(jié)構(gòu)，考慮到標(biāo)題、正文和百度快照分別在不同的行，因此每個(gè)顯示結(jié)果分為3段，并分別加上CSS標(biāo)記，代碼如下所示。<pclass="title">中國(guó)春節(jié)網(wǎng)<pclass="content">歡迎光臨中國(guó)春節(jié)網(wǎng),您現(xiàn)在的位置是中國(guó)春節(jié)網(wǎng)首頁(yè)!"年"獸的傳說熬年的傳說萬年創(chuàng)建歷法說中國(guó)古代歷法發(fā)展春節(jié)傳統(tǒng)和現(xiàn)代元宵燈節(jié)源于何時(shí)?猜燈謎的來由十二生肖的源流、排列與信仰祭灶掃塵貼春聯(lián)年畫倒貼福字除夕夜...<pclass="link">/46K2016-12-18-百度快照實(shí)訓(xùn)步驟另外考慮到標(biāo)題部分有鏈接，因此需要HTML語(yǔ)言<a>標(biāo)記，并且顯示關(guān)鍵字的樣式必須區(qū)別于其他文字，因此，“春節(jié)”單獨(dú)用標(biāo)記分離，“百度快照”也同樣進(jìn)行分離，并標(biāo)上各自的標(biāo)記類型，代碼如下所示。<pclass="title"><ahref="#">中國(guó)<spanclass="search">春節(jié)網(wǎng)</a><pclass="content">歡迎光臨中國(guó)<spanclass="search">春節(jié)網(wǎng),您現(xiàn)在的位置是中國(guó)<spanclass="search">春節(jié)網(wǎng)首頁(yè)!"年"獸的傳說熬年的傳說萬年創(chuàng)建歷法說中國(guó)古代歷法發(fā)展<spanclass="search">春節(jié):傳統(tǒng)和現(xiàn)代元宵燈節(jié)源于何時(shí)?猜燈謎的來由十二生肖的源流、排列與信仰祭灶掃塵貼春聯(lián)年畫倒貼福字除夕夜...<pclass="link">/46K2016-12-18-<spanclass="quick">百度快照此時(shí)的顯示效果如圖1-37所示，僅僅區(qū)分出了各個(gè)段落，并沒有美觀的界面。圖1-37段落基本結(jié)構(gòu)（2）定義各個(gè)段落的字體和文字大小、段落與段落間的距離和標(biāo)題與內(nèi)容之間的距離等，代碼如下所示。p{ margin:0px; font-family:Arial; /*定義所有字體*/}p.title{ padding-bottom:0px; font-size:16px;}p.content{ padding-top:3px; /*標(biāo)題與內(nèi)容的距離*/ font-size:13px; /*內(nèi)容的字體大小*/ line-height:18px;}p.link{ font-size:13px; padding-bottom:25px;}在以上代碼中，第1個(gè)p標(biāo)記定義了所有段落的字體以及各個(gè)段落之間的距離（margin）為0像素，接著用不同的類別分別定義標(biāo)題、內(nèi)容和百度快照的字體大小、間距等樣式風(fēng)格，顯示效果如圖1-38所示。圖1-38各段落調(diào)整（3）在調(diào)整好段落內(nèi)部的結(jié)構(gòu)以及段落與段落之間的距離后，下面設(shè)置文字顏色，主要是關(guān)鍵字的顏色與網(wǎng)址鏈接的顏色，另外還要給“百度快照”單獨(dú)設(shè)置顏色和下劃線，代碼如下所示。p.link{ font-size:13px; c

人人文庫(kù)> 全部分類> 教育資料 > 輔導(dǎo)培訓(xùn)

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝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ù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
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ì)自己和他人造成任何形式的傷害或損失。

第1章利用CSS設(shè)計(jì)頁(yè)面排版

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

第1章利用CSS設(shè)計(jì)頁(yè)面排版

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔