版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
商業(yè)網(wǎng)頁設(shè)計(jì)與制作第五講文字和圖像的排版商業(yè)網(wǎng)頁設(shè)計(jì)與制作第五講文字和圖像的排版文字的排版CSS文字樣式準(zhǔn)備網(wǎng)頁設(shè)置字體文字大小行高文字顏色與背景顏色文字加粗、傾斜與大小寫文字的裝飾效果文字的水平對(duì)齊方式文字布局段落的垂直對(duì)齊方式文字的排版CSS文字樣式文字的排版CSS文字樣式準(zhǔn)備網(wǎng)頁(無樣式）<body><h1>HeadLine</h1><pclass="p1">heInternetSocietymissionistoachieveaworldinwhicheveryoneeverywhereisconnectedtoanopenanduniversallyaccessibleInternet.</p><pclass="p2"><spanclass="firstLetter">T</Span>heInternetSociety’smissionistoachieveaworldinwhicheveryoneeverywhereisconnectedtoanopenanduniversallyaccessibleInternet.Sinceitsinceptionin1992,ISOChasbeenattheforefrontofglobalInterneteducationbybringingessentialinformationandtrainingtopeoplethroughouttheworld.TheInternetSociety’smissionistoachieveaworldinwhicheveryoneeverywhereisconnectedtoanopenanduniversallyaccessibleInternet.Sinceitsinceptionin1992,ISOChasbeenattheforefrontofglobalInterneteducationbybringingessentialinformationandtrainingtopeoplethroughouttheworld.</p></body>文字的排版CSS文字樣式文字的排版CSS文字樣式設(shè)置字體CSS中字體是通過font-family屬性控制的。如
font-family:Arial,”TimesNewRoman”;
font-family屬性可以同時(shí)聲明多種字體，字體間用逗號(hào)分隔開。另外一些字體的名稱中間會(huì)有空格出現(xiàn)，這時(shí)需要用雙引號(hào)將其引起來。文字的排版CSS文字樣式文字的排版CSS文字樣式文字大小CSS中文字大小是通過font-size屬性控制的。如 font-size:12px;長(zhǎng)度單位PX，表示在瀏覽器上的1個(gè)像素的大小，這個(gè)是跟瀏覽器的分辨率有關(guān)，是個(gè)相對(duì)單位。
長(zhǎng)度單位em和ex，也是相對(duì)單位。1em相對(duì)表示的是其父元素中字母m的標(biāo)準(zhǔn)寬度，1ex相對(duì)表示的是其父元素中字母x的標(biāo)準(zhǔn)高度。當(dāng)父元素的文字大小變化時(shí)，使用這兩個(gè)單位的子元素的大小會(huì)同比例變化。文字的排版CSS文字樣式文字的排版CSS文字樣式行高CSS中文本行的行高是通過line-height屬性控制的。如 line-height:18px; line-height:1.5;請(qǐng)思考；對(duì)于文本字大小是12px的文本行來說，兩種表示有什么不同？要實(shí)現(xiàn)首字母下沉，請(qǐng)問用哪種方式設(shè)置行高？文字的排版CSS文字樣式文字的排版CSS文字樣式文字顏色與背景顏色CSS文字顏色是通過color屬性控制的。如 color:blue; color:#0000ff; color:#00f; color:rgb(0,0,255);CSS背景顏色是通過background-color屬性控制的。文字的排版CSS文字樣式文字的排版CSS文字樣式文字加粗、傾斜與大小寫
CSS中文字加粗是通過font-weight屬性控制的。如 font-weight:normal; font-weight:bold;CSS中文字傾斜是通過font-style屬性控制的。如 font-style:normal; font-style:oblique font-style:italic;文字的排版CSS文字樣式文字的排版CSS文字樣式文字加粗、傾斜與大小寫CSS中英文字母大小寫是通過text-transform屬性控制的。如 text-transform:capitalize; text-transform:uppercase; text-transform:lowercase;文字的排版CSS文字樣式文字的排版CSS文字樣式文字的裝飾效果CSS中文字的裝飾效果是通過text-decoration屬性控制的。如 text-decoration:underline; /*下劃線*/ text-decoration:overline; /*頂劃線*/ text-decoration:line-through; /*刪除線*/ text-decoration:blink; /*閃爍*/文字的排版CSS文字樣式文字的排版CSS文字樣式文字的水平對(duì)齊方式CSS文字的水平對(duì)齊方式是通過text-align屬性控制的。如 text-align:center;CSS中段首縮進(jìn)是通過text-indent屬性控制的。如 text-indent:2em文字的排版CSS文字樣式文字的排版CSS文字樣式文字布局課堂練習(xí)；文字的排版CSS文字樣式文字的排版CSS文字樣式段落的垂直對(duì)齊方式 css中的vertical-align屬性只適用表格單元格中對(duì)象豎直方向的對(duì)齊屬性，而對(duì)于一般的塊級(jí)元素如div等都不起作用。
捷克的設(shè)計(jì)師給出一個(gè)比較完善的解決方案，用嵌套的三層div加以實(shí)現(xiàn)。代碼文字的排版CSS文字樣式圖像的排版CSS圖像樣式基本設(shè)置背景圖像標(biāo)題的圖像替換CSS圖像陰影圖像的排版CSS圖像樣式圖像的排版CSS圖像樣式基本設(shè)置：包括設(shè)置圖像的邊框、內(nèi)外邊距和大小等，如： img{ border:1pxgreydashed; margin:10px10px10px0; padding:5px; float:left; height:100px; width:90px; }圖像的排版CSS圖像樣式圖像的排版CSS圖像樣式背景圖像設(shè)置背景圖像，如
Body{ background-image:url(bg.gif); }用這種方式設(shè)置背景圖像，圖像會(huì)自動(dòng)沿著水平和豎直方向平鋪。圖像的排版CSS圖像樣式圖像的排版CSS圖像樣式背景圖像控制圖像平鋪方向，可以通過background-repeat屬性來實(shí)現(xiàn)，屬性值有repeat、repeat-x、repeat-y和no-repeat。如Body{ background-image:url(bg.gif);
background-repeat：repeat-x; }圖像的排版CSS圖像樣式圖像的排版CSS圖像樣式背景圖像同時(shí)設(shè)置背景圖像和背景顏色，這樣背景圖像覆蓋的地方就顯示背景圖像，其他地方就按照設(shè)置的北京顏色顯示。如Body{ background-image:url(bg.gif);
background-repeat：repeat-x;
background-color:#3399ff; }圖像的排版CSS圖像樣式圖像的排版CSS圖像樣式標(biāo)題的圖像替換h1{background:url(bg-h1-bak.gif)no-repeat;height:60px;}h1span{ display:none;}<body><h1><span>HeadLine</span></h1>……</body>圖像的排版CSS圖像樣式h1{<body>圖像的排版CSS圖像樣式標(biāo)題圖像與背景融合
在圖像處理軟件中，先把標(biāo)題圖像的背景色設(shè)置為單一顏色，然后再導(dǎo)出為透明的GIF格式圖像，然后用新的圖像替代原來的背景圖像。如圖像的排版CSS圖像樣式圖像的排版CSS圖像樣式標(biāo)題的對(duì)齊方式
如果希望標(biāo)題能夠居中或右對(duì)齊，可以用background-position屬性進(jìn)行設(shè)置。如 h1{ background:url(bg-h1.gif)no-repeat; height:60px; background-position:right; }background-position的屬性值有l(wèi)eft、right、top、bottom、center圖像的排版CSS圖像樣式圖像的排版CSS圖像陰影基本設(shè)置柔邊陰影IE6兼容圖像的排版CSS圖像陰影圖像的排版CSS圖像陰影基本設(shè)置.shadow{background:url(images/bottom-right.gif)no-repeatbottomright;float:left;float:left;}img{border:1px#000solid;padding:4px;margin:-6px6px6px-6px;}<body><h1>HeadLine</h1><divclass="shadow"> <imgsrc="cup.gif"/></div>……</body>圖像的排版CSS圖像陰影.shadow{<body>圖像的排版CSS圖像陰影使用滑動(dòng)門技術(shù)<body><h1>HeadLine</h1><divclass="shadow"> <imgsrc="cup.gif"/></div>……</body>.shadow{float:left;background:url(images/bottom-right.gif)no-repeatbottomright;}.shadowdiv{background:url(images/top-left.gif)no-repeatlefttop;padding:06px6px0;}.shadowimg{border:1pxsolid#000;padding:4px;}圖像的排版CSS圖像陰影<body>.shadow{圖像的排版CSS圖像陰影柔邊陰影效果圖像的排版CSS圖像陰影圖像的排版CSS圖像陰影IE6兼容的方案圖像的排版CSS圖像陰影商業(yè)網(wǎng)頁設(shè)計(jì)與制作第五講文字和圖像的排版商業(yè)網(wǎng)頁設(shè)計(jì)與制作第五講文字和圖像的排版文字的排版CSS文字樣式準(zhǔn)備網(wǎng)頁設(shè)置字體文字大小行高文字顏色與背景顏色文字加粗、傾斜與大小寫文字的裝飾效果文字的水平對(duì)齊方式文字布局段落的垂直對(duì)齊方式文字的排版CSS文字樣式文字的排版CSS文字樣式準(zhǔn)備網(wǎng)頁(無樣式）<body><h1>HeadLine</h1><pclass="p1">heInternetSocietymissionistoachieveaworldinwhicheveryoneeverywhereisconnectedtoanopenanduniversallyaccessibleInternet.</p><pclass="p2"><spanclass="firstLetter">T</Span>heInternetSociety’smissionistoachieveaworldinwhicheveryoneeverywhereisconnectedtoanopenanduniversallyaccessibleInternet.Sinceitsinceptionin1992,ISOChasbeenattheforefrontofglobalInterneteducationbybringingessentialinformationandtrainingtopeoplethroughouttheworld.TheInternetSociety’smissionistoachieveaworldinwhicheveryoneeverywhereisconnectedtoanopenanduniversallyaccessibleInternet.Sinceitsinceptionin1992,ISOChasbeenattheforefrontofglobalInterneteducationbybringingessentialinformationandtrainingtopeoplethroughouttheworld.</p></body>文字的排版CSS文字樣式文字的排版CSS文字樣式設(shè)置字體CSS中字體是通過font-family屬性控制的。如
font-family:Arial,”TimesNewRoman”;
font-family屬性可以同時(shí)聲明多種字體，字體間用逗號(hào)分隔開。另外一些字體的名稱中間會(huì)有空格出現(xiàn)，這時(shí)需要用雙引號(hào)將其引起來。文字的排版CSS文字樣式文字的排版CSS文字樣式文字大小CSS中文字大小是通過font-size屬性控制的。如 font-size:12px;長(zhǎng)度單位PX，表示在瀏覽器上的1個(gè)像素的大小，這個(gè)是跟瀏覽器的分辨率有關(guān)，是個(gè)相對(duì)單位。
長(zhǎng)度單位em和ex，也是相對(duì)單位。1em相對(duì)表示的是其父元素中字母m的標(biāo)準(zhǔn)寬度，1ex相對(duì)表示的是其父元素中字母x的標(biāo)準(zhǔn)高度。當(dāng)父元素的文字大小變化時(shí)，使用這兩個(gè)單位的子元素的大小會(huì)同比例變化。文字的排版CSS文字樣式文字的排版CSS文字樣式行高CSS中文本行的行高是通過line-height屬性控制的。如 line-height:18px; line-height:1.5;請(qǐng)思考；對(duì)于文本字大小是12px的文本行來說，兩種表示有什么不同？要實(shí)現(xiàn)首字母下沉，請(qǐng)問用哪種方式設(shè)置行高？文字的排版CSS文字樣式文字的排版CSS文字樣式文字顏色與背景顏色CSS文字顏色是通過color屬性控制的。如 color:blue; color:#0000ff; color:#00f; color:rgb(0,0,255);CSS背景顏色是通過background-color屬性控制的。文字的排版CSS文字樣式文字的排版CSS文字樣式文字加粗、傾斜與大小寫
CSS中文字加粗是通過font-weight屬性控制的。如 font-weight:normal; font-weight:bold;CSS中文字傾斜是通過font-style屬性控制的。如 font-style:normal; font-style:oblique font-style:italic;文字的排版CSS文字樣式文字的排版CSS文字樣式文字加粗、傾斜與大小寫CSS中英文字母大小寫是通過text-transform屬性控制的。如 text-transform:capitalize; text-transform:uppercase; text-transform:lowercase;文字的排版CSS文字樣式文字的排版CSS文字樣式文字的裝飾效果CSS中文字的裝飾效果是通過text-decoration屬性控制的。如 text-decoration:underline; /*下劃線*/ text-decoration:overline; /*頂劃線*/ text-decoration:line-through; /*刪除線*/ text-decoration:blink; /*閃爍*/文字的排版CSS文字樣式文字的排版CSS文字樣式文字的水平對(duì)齊方式CSS文字的水平對(duì)齊方式是通過text-align屬性控制的。如 text-align:center;CSS中段首縮進(jìn)是通過text-indent屬性控制的。如 text-indent:2em文字的排版CSS文字樣式文字的排版CSS文字樣式文字布局課堂練習(xí)；文字的排版CSS文字樣式文字的排版CSS文字樣式段落的垂直對(duì)齊方式 css中的vertical-align屬性只適用表格單元格中對(duì)象豎直方向的對(duì)齊屬性，而對(duì)于一般的塊級(jí)元素如div等都不起作用。
捷克的設(shè)計(jì)師給出一個(gè)比較完善的解決方案，用嵌套的三層div加以實(shí)現(xiàn)。代碼文字的排版CSS文字樣式圖像的排版CSS圖像樣式基本設(shè)置背景圖像標(biāo)題的圖像替換CSS圖像陰影圖像的排版CSS圖像樣式圖像的排版CSS圖像樣式基本設(shè)置：包括設(shè)置圖像的邊框、內(nèi)外邊距和大小等，如： img{ border:1pxgreydashed; margin:10px10px10px0; padding:5px; float:left; height:100px; width:90px; }圖像的排版CSS圖像樣式圖像的排版CSS圖像樣式背景圖像設(shè)置背景圖像，如
Body{ background-image:url(bg.gif); }用這種方式設(shè)置背景圖像，圖像會(huì)自動(dòng)沿著水平和豎直方向平鋪。圖像的排版CSS圖像樣式圖像的排版CSS圖像樣式背景圖像控制圖像平鋪方向，可以通過background-repeat屬性來實(shí)現(xiàn)，屬性值有repeat、repeat-x、repeat-y和no-repeat。如Body{ background-image:url(bg.gif);
background-repeat：repeat-x; }圖像的排版CSS圖像樣式圖像的排版CSS圖像樣式背景圖像同時(shí)設(shè)置背景圖像和背景顏色，這樣背景圖像覆蓋的地方就顯示背景圖像，其他地方就按照設(shè)置的北京顏色顯示。如Body{ background-image:url(bg.gif);
background-repeat：repeat-x;
background-color:#3399ff; }圖像的排版CSS圖像樣式圖像的排版CSS圖像樣式標(biāo)題的圖像替換h1{background:url(bg-h1-bak.gif)no-repeat;height:60px;}h1span{ display:none;}<body><h1><span>HeadLine</span></h1>……</body>圖像的排版CSS圖像樣式h1{<body>圖像的排版CSS圖像樣式標(biāo)題圖像與背景融合
在圖像處理軟件中，先把標(biāo)題圖像的背景色設(shè)置為單一顏色，然后再導(dǎo)出為透明的GIF格式圖像，然后用新的圖像替代原來的背景圖像。如圖像的排版CSS圖像樣式圖像的排版CSS圖像樣式標(biāo)題的對(duì)齊方式
如果希望標(biāo)題能夠居中或右對(duì)齊，可以用background-position屬性進(jìn)行設(shè)置。如 h1{ backg
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 租房合同安全用電免責(zé)條款
- 2025年度活體生物制品質(zhì)量控制與檢測(cè)合同
- 2025年度高新技術(shù)研發(fā)項(xiàng)目中介合同協(xié)議書
- 2025年度防水材料綠色供應(yīng)鏈管理與采購合同
- 2025年度金牌人力資源外包服務(wù)合同協(xié)議書
- 2025年度醫(yī)療設(shè)施裝修協(xié)議合同范本（2024版）
- 室內(nèi)工作租賃合同
- 酒店員工勞動(dòng)合同范本簡(jiǎn)單
- 2025年質(zhì)押存單擔(dān)保合同
- 2025年法律責(zé)任險(xiǎn)合同
- 醫(yī)院人體器官捐獻(xiàn)及獲取流程
- 結(jié)腸造瘺還納手術(shù)配合
- 2024年云南省中考物理真題含解析
- 2025年中國(guó)艾草行業(yè)市場(chǎng)現(xiàn)狀、發(fā)展概況、未來前景分析報(bào)告
- (閩教版)六年級(jí)下英語教學(xué)計(jì)劃
- 人教版英語高考試卷與參考答案(2024年)
- 河砂、碎石生產(chǎn)質(zhì)量保證措施方案
- 三位數(shù)除以兩位數(shù)過關(guān)練習(xí)口算題大全附答案
- 紅樓夢(mèng)服飾文化
- 湖北省2024年村干部定向考試真題
- 2024年沙石材料運(yùn)輸合同
評(píng)論
0/150
提交評(píng)論