版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
CSS樣式表-樣式控制WEB基礎(chǔ)單元目標(biāo)背景樣式的控制文本樣式的控制圖像樣式的控制網(wǎng)頁(yè)中的導(dǎo)航超級(jí)鏈接的控制鼠標(biāo)指針的控制列表的控制表格的控制表單元素的控制常用的樣式屬性屬性CSS名稱說明顏色color文本屬性font-size字體大小font-family字體text-align文本對(duì)齊邊框?qū)傩詁order-style邊框樣式border-width邊框?qū)挾萣order-color邊框顏色定位屬性(position)top頂部邊距（上邊距）left左邊距width寬度height高度z-indexz軸索引號(hào)，用于層背景樣式的控制1 背景顏色2
背景圖像3
背景圖像平鋪背景顏色
在HTML中，設(shè)置網(wǎng)頁(yè)的背景顏色利用的是<body>標(biāo)記中的bgcolor屬性，而在CSS中不但可以設(shè)置網(wǎng)頁(yè)的背景顏色，還可以設(shè)置文字的背景顏色。在CSS中，網(wǎng)頁(yè)元素的背景顏色使用background-color屬性來設(shè)置，屬性值為某種顏色。背景圖像
設(shè)置背景圖像，使用background-image屬性實(shí)現(xiàn)。仍然以上面的實(shí)例為基礎(chǔ)，在CSS樣式部分，增加如下樣式代碼： body{ background-image:url(bg.gif); }背景圖像平鋪
在默認(rèn)情況下，圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪。如果不希望平鋪，或者只希望沿著一個(gè)方向平鋪，可以使用background-repeat屬性來控制。該屬性可以設(shè)置為以下4種之一：repeat：沿水平和豎直兩個(gè)方向平鋪，這也是默認(rèn)值。no-repeat：不平鋪，即只顯示一次。repeat-x：只沿水平方向平鋪。repeat-y：只沿豎直方向平鋪。課堂練習(xí)制作網(wǎng)頁(yè)背景圖像效果步驟1、打開網(wǎng)頁(yè)素材。2、添加樣式表并設(shè)置背景圖像的效果。文本樣式的控制1 創(chuàng)建基礎(chǔ)頁(yè)面2 設(shè)置文字的字體3
設(shè)置文字的傾斜效果4 設(shè)置文字的加粗效果5 轉(zhuǎn)換英文字母大小寫6 控制文字的大小7 設(shè)置文字裝飾效果8 設(shè)置段落首行縮進(jìn)9 設(shè)置字詞間距10 設(shè)置段落內(nèi)部的文字行高11 設(shè)置段落之間的距離12 控制文本的水平位置13 設(shè)置文字與背景的顏色
創(chuàng)建基礎(chǔ)頁(yè)面
創(chuàng)建一個(gè)基本的網(wǎng)頁(yè)
在HTML中，設(shè)置文字的字體需要通過<font>標(biāo)記的face屬性。而在CSS中，則使用font-family屬性。針對(duì)上述網(wǎng)頁(yè)，在樣式部分增加對(duì)<p>標(biāo)記的樣式設(shè)置如下：
h1{font-family:黑體;}p{font-family:Arial,"TimesNewRoman";}設(shè)置文字的字體
設(shè)置文字的傾斜效果
CSS中的font-style屬性正是用來控制字體傾斜的，它可以設(shè)置為“正常”、“意大利體”和“傾斜”3種樣式，分別如下： font-style:normal; font-style:italic; font-style:oblique;設(shè)置文字的傾斜效果
正常字體與“意大利體”，及“傾斜體”的對(duì)比
然而遺憾的是，實(shí)際上大多數(shù)操作系統(tǒng)和瀏覽器還不能很好地實(shí)現(xiàn)非常精細(xì)的文字加粗設(shè)置，通常只能設(shè)置“正?！焙汀凹哟帧眱煞N粗細(xì)，分別如下。
font-weight:normal /*正常*/font-weight:bold /*加粗*/設(shè)置文字的加粗效果
轉(zhuǎn)換英文字母大小寫
例如下面3個(gè)文字段落分別可以實(shí)現(xiàn)單詞的首字母大寫、所有字母大寫和所有字母小寫。p.one{text-transform:capitalize;} /*單詞首字母大寫*/p.two{text-transform:uppercase;} /*全部大寫*/p.three{text-transform:lowercase;} /*全部小寫*/控制文字的大小
p{font-family:Arial,"TimesNewRoman";
font-size:12px;}字號(hào)單位可以是像素，也可以是em，1em=16px設(shè)置文字裝飾效果
text-decoration屬性設(shè)置設(shè)置值說明none正常顯示underline為文字加下劃線line-through為文字加刪除線overline為文字加頂線blink文字閃爍，僅部分瀏覽器支持設(shè)置段落首行縮進(jìn)
Text-indent屬性是以各種長(zhǎng)度為屬性值，為了縮進(jìn)兩個(gè)字的距離。例如，對(duì)網(wǎng)頁(yè)代碼的p2段落進(jìn)行如下設(shè)置： #p2{ text-indent:2em; }設(shè)置段落首行縮進(jìn)
這里再舉一個(gè)不太常用的例子，如果希望首行不是縮進(jìn)，而是凸出一定距離，也稱為“懸掛縮進(jìn)”，請(qǐng)看如下代碼： #p2{ padding-left:2em; text-indent:-2em; }設(shè)置字詞間距
在CSS中，可以通過letter-spacing和word-spacing這兩個(gè)屬性分別控制字母間距和單詞間距。例如下面的代碼： #p1{ font-style:italic; text-transform:capitalize; word-spacing:10px; letter-spacing:-1px; }設(shè)置段落內(nèi)部的文字行高
在HTML中是無(wú)法控制段落中行與行之間的距離的。在CSS中，使用line-height可以控制行的高度，通過它就可以調(diào)整行與行之間的距離。設(shè)置值說明長(zhǎng)度數(shù)值，可以使用前面所介紹的尺度單位倍數(shù)font-size的設(shè)置值的倍數(shù)百分比相對(duì)于font-size的百分比設(shè)置段落之間的距離
下面介紹如何控制段落之間的距離。例如為<p>標(biāo)記增加一條CSS樣式，目的是給兩個(gè)段落分別增加1像素粗細(xì)的紅色實(shí)線邊框，代碼如下：p{ border:1pxredsolid; margin:5px0px;}控制文本的水平位置
text-align屬性設(shè)置設(shè)置值說明Left左對(duì)齊，也是瀏覽器默認(rèn)的right右對(duì)齊center居中對(duì)齊justify兩端對(duì)齊設(shè)置文字與背景的顏色
文字的各種顏色配合其他頁(yè)面元素組成了整個(gè)五彩繽紛的頁(yè)面，在CSS中文字顏色是通過color屬性設(shè)置的。下面的幾種方法都是將文字設(shè)置為藍(lán)色，它們是完全等價(jià)的定義方法。 h3{color:blue;} h3{color:#0000ff;} h3{color:#00f;} h3{color:rgb(0,0,255);} h3{color:rgb(0%,0%,100%);}設(shè)置文字與背景的顏色
第1種方式是使用顏色的英文名稱作為屬性值。第2種方式是最常用一個(gè)6位的十六進(jìn)制數(shù)值表示。第3種方式是第2種方式的簡(jiǎn)寫方式，形如#aabbcc的顏色值，就可以簡(jiǎn)寫為#abc。第4種方式是分別給出紅綠藍(lán)3種顏色分量的十進(jìn)制數(shù)值。第5種方式是分別給出紅綠藍(lán)3種顏色分量的百分比。
圖像樣式的控制1 設(shè)置圖像邊框2
樣式表的邊框?qū)傩?
設(shè)置不同方向的邊框?qū)傩?
對(duì)象縮放5 圖文混排6 圖像的對(duì)齊方式7 圖文的垂直對(duì)齊方式設(shè)置圖像邊框
在HTML中可以直接通過<img>標(biāo)記的border屬性值為圖像添加邊框，屬性值為邊框的粗細(xì)，以像素為單位，從而控制邊框的粗細(xì)。當(dāng)設(shè)置該值為0時(shí)，則顯示為沒有邊框。代碼如下所示： <imgsrc="img.jpg"border="0"> <imgsrc="img.jpg"border="2">然而使用這種方法存在很大的限制，即所有的邊框都只能是黑色，而且風(fēng)格十分單一，都是實(shí)線，只是在邊框粗細(xì)上能夠進(jìn)行調(diào)整。如果希望更換邊框的顏色，或者換成虛線邊框，僅僅依靠XHTML是無(wú)法實(shí)現(xiàn)的。樣式表的邊框?qū)傩?/p>
在CSS中可以通過邊框?qū)傩詾閳D像添加各式各樣的邊框。border-style用來定義邊框的樣式，如虛線、實(shí)線或點(diǎn)畫線等。在CSS中，一個(gè)邊框由3個(gè)要素組成。border-width（粗細(xì)）：可以使用各種CSS中的長(zhǎng)度單位，最常用的是像素。border-color（顏色）：可以使用各種合法的顏色來定義方式。border-style（線型）：可以在一些預(yù)先定義好的線型中選擇。課堂練習(xí)制作圖像邊框效果步驟1、打開網(wǎng)頁(yè)素材。2、添加樣式表并設(shè)置圖像的邊框效果。設(shè)置不同方向的邊框?qū)傩?/p>
如果希望分別設(shè)置4條邊框的不同樣式，在CSS中也是可以實(shí)現(xiàn)的，只需要分別設(shè)定border-left、border-right、border-top和border-bottom的樣式即可，依次對(duì)應(yīng)于左、右、上、下4條邊框。在使用時(shí)，依然是每條邊框分別設(shè)置粗細(xì)、顏色和線型這3項(xiàng)。例如，設(shè)置右邊框的顏色，那么相應(yīng)的屬性就是border-right-color，因此這樣的屬性共有12（4
×
3
=
12）個(gè)。對(duì)象縮放
如果可以通過設(shè)置寬度width和高度height屬性來控制對(duì)象的寬度和高度，取值單位可以是像素也可以是百分比。圖文混排
Word中文字與圖像有很多排版的方式，在網(wǎng)頁(yè)中同樣可以通過CSS設(shè)置實(shí)現(xiàn)各種圖文混排的效果。文字環(huán)繞圖像的方式在實(shí)際頁(yè)面中的應(yīng)用非常廣泛，如果再配合內(nèi)容、背景等多種手段便可以實(shí)現(xiàn)各種絢麗的效果。在CSS中主要是通過給圖像設(shè)置float屬性來實(shí)現(xiàn)文字環(huán)繞。課堂練習(xí)制作圖文混排效果步驟1、打開網(wǎng)頁(yè)素材。2、添加樣式表并設(shè)置圖文混排的效果。課堂練習(xí)制作圖文混排效果步驟1、打開網(wǎng)頁(yè)素材。2、添加樣式表并設(shè)置圖文混排的效果。圖像的對(duì)齊方式
圖像水平對(duì)齊的方式與上一章中文字水平對(duì)齊的方式基本相同，分為左、中、右3種。不同的是圖像的水平對(duì)齊通常不能直接通過設(shè)置圖像的text-align屬性，而是通過設(shè)置其父元素的該屬性來實(shí)現(xiàn)的，如下例所示。<pstyle="text-align:left;"><imgsrc="cup.gif"></p>圖文的垂直對(duì)齊方式
默認(rèn)的縱向?qū)R方式圖文的垂直對(duì)齊方式
默認(rèn)的縱向?qū)R方式由此可以得出結(jié)論，在默認(rèn)情況下，行內(nèi)的圖像的最下端，將與同行的文字的基線對(duì)齊。圖像與文字基線對(duì)齊圖文的垂直對(duì)齊方式
要改變這種對(duì)齊方式，需要使用vertical-align屬性。此外，最經(jīng)常用到應(yīng)該是如何居中對(duì)齊。這時(shí)可以將vertical-align屬性設(shè)置為middle。這個(gè)屬性值的嚴(yán)格定義是，圖像的下端與文字的基線加上文字高度的一半所在水平線對(duì)齊。
網(wǎng)頁(yè)中的導(dǎo)航在一個(gè)網(wǎng)站中，所有頁(yè)面都會(huì)通過超鏈接相互鏈接在一起，這樣才會(huì)形成一個(gè)有機(jī)的網(wǎng)站。因此在各種網(wǎng)站中，導(dǎo)航都是網(wǎng)頁(yè)中最重要的組成部分之一。因此，也出現(xiàn)了很多各式各樣非常美觀、實(shí)用性很強(qiáng)的導(dǎo)航樣式，如圖所示的是Microsoft公司關(guān)于Office的網(wǎng)站，上部的導(dǎo)航條和Office2007軟件風(fēng)格非常一致。網(wǎng)頁(yè)中的導(dǎo)航
網(wǎng)頁(yè)中的導(dǎo)航下圖所示的是MicrosoftWindowsMobile，它的導(dǎo)航使用的是菜單方式。對(duì)于一些內(nèi)容非常多的大型網(wǎng)站，導(dǎo)航就顯得更重要。
超級(jí)鏈接的控制網(wǎng)頁(yè)中的鏈接<ahref=“sample.html”>這是一個(gè)超鏈接</a>偽類<style> A{text-decoration:none;}
A:link{color:black; text-decoration:underline;}
A:hover{color:red;}
A:visited{color:black;}</style>
課堂練習(xí)制作網(wǎng)頁(yè)交互按鈕效果步驟1、制作網(wǎng)頁(yè)中的內(nèi)容。2、添加樣式表。課堂練習(xí)制作網(wǎng)頁(yè)交互按鈕效果步驟1、制作網(wǎng)頁(yè)中的內(nèi)容。2、添加樣式表。
鼠標(biāo)指針的控制列表的控制1 設(shè)置列表的項(xiàng)目符號(hào)2
設(shè)置圖像項(xiàng)目符號(hào)設(shè)置列表的項(xiàng)目符號(hào)
通常的項(xiàng)目列表主要采用<ul>或者<ol>標(biāo)記，然后配合<li>標(biāo)記列出各個(gè)項(xiàng)目，簡(jiǎn)單的列表代碼如下，其效果如圖所示。設(shè)置列表的項(xiàng)目符號(hào)
通過使用list-style-type屬性來控制列表的項(xiàng)目符號(hào)類型。disc:CSS1實(shí)心圓 circle:CSS1空心圓square:CSS1實(shí)心方塊 decimal:CSS1阿拉伯?dāng)?shù)字
lower-roman:CSS1小寫羅馬數(shù)字upper-roman:CSS1大寫羅馬數(shù)字lower-
溫馨提示
- 1. 本站所有資源如無(wú)特殊說明，都需要本地電腦安裝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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 冷庫(kù)溫控設(shè)備校準(zhǔn)監(jiān)管細(xì)則
- 冷庫(kù)消防控制室監(jiān)管辦法
- 冷鏈廢棄包裝處置管控標(biāo)準(zhǔn)
- 親子有效溝通培訓(xùn)課件
- 供應(yīng)鏈管理就業(yè)趨勢(shì)分析
- 婦科質(zhì)控護(hù)士年終總結(jié)匯報(bào)
- 《機(jī)電一體化系統(tǒng)設(shè)計(jì)》課件-任務(wù)1 MCD自由落體運(yùn)動(dòng)實(shí)現(xiàn)
- 生日祝福相冊(cè)動(dòng)畫展示模板
- 肥厚性心肌病的高危因素
- 實(shí)數(shù)第03講 七年級(jí)數(shù)學(xué)下冊(cè)人教版教學(xué)
- 2025屆江蘇省南通市高三下學(xué)期3月二?；瘜W(xué)試題（含答案）
- 班主任安全管理分享會(huì)
- 消防救援預(yù)防職務(wù)犯罪
- 畢業(yè)論文答辯的技巧有哪些
- 酒店安全風(fēng)險(xiǎn)分級(jí)管控和隱患排查雙重預(yù)防
- 2018年風(fēng)電行業(yè)事故錦集
- 一體化泵站安裝施工方案
- 《重點(diǎn)新材料首批次應(yīng)用示范指導(dǎo)目錄（2024年版）》
- 防水班組安全晨會(huì)（班前會(huì)）
- 全國(guó)職業(yè)院校技能大賽高職組（研學(xué)旅行賽項(xiàng)）備賽試題及答案
- 廣州數(shù)控GSK 980TDc車床CNC使用手冊(cè)
評(píng)論
0/150
提交評(píng)論