網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)教程

1、網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)CSS層疊樣式表王建民1、css簡(jiǎn)介 css 是 cascading style sheet 的縮寫。譯作層疊樣式表單。是用于(增強(qiáng))控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。 可以用以下三種方式將樣式表加入到網(wǎng)頁(yè)。1.1 鏈入外部樣式表文件 可以先建立外部樣式表文件（.css），然后使用html的link對(duì)象。示例如下：文檔標(biāo)題 而在xml中，你應(yīng)該如下例所示在聲明區(qū)中加入： 1.2 定義內(nèi)部樣式塊對(duì)象你可以在你的html文檔的和標(biāo)記之間插入一個(gè).塊對(duì)象。 定義方式請(qǐng)參閱樣式表語(yǔ)法。示例如下： 文檔標(biāo)題請(qǐng)注意，這里將style對(duì)象的type屬性設(shè)置為text/c

2、ss，是允許不支持這類型的瀏覽器忽略樣式表單。 1.3 內(nèi)聯(lián)定義 內(nèi)聯(lián)定義即是在對(duì)象的標(biāo)記內(nèi)使用對(duì)象的style屬性定義適用其的樣式表屬性。示例如下： 這一行字是灰色的 1.4 css注釋 語(yǔ)法：/*/ 范例1：/*這里寫注釋*/ 范例2：/*這里寫注釋1這里寫注釋2這里寫注釋3*/ 2.1基本規(guī)則 selector property:value 參數(shù)說明： selector - 選擇符 property:value - 樣式表定義。屬性和屬性值之間用冒號(hào)(:)隔開。多個(gè)定義之間用分號(hào)(;)隔開。 范例：H2 color:gray; 其中H2是選擇符，color是屬性，gray是值，整個(gè)clo

3、r:gray是一個(gè)聲明，而H1 color:gray就是一條規(guī)則。 2.2分組 讓同一條規(guī)則應(yīng)用于多個(gè)元素，也就是多個(gè)選擇符，或者要將更多的樣式應(yīng)用于一個(gè)或一組元素。 2.2.1分組選擇符 范例1：H2,P color:gray; 范例2：body, table, th, td, h1, h2, h3, h4, p, strong, em, b, icolor:gray; 2.2.2分組聲明 范例1：H1font:18pt helvetica;H1color:purple;H1background:blue; 范例2：H1font:18pt helvetica;color:purple;bac

4、kground:gray; 范例3：H1,H2,H3 clor:gray;background:white; 2.3 類和ID選擇符 html標(biāo)記： css范例：.warning font-weight:bold; html標(biāo)記： css范例：#first-line font-weight:bold; 類和ID間的區(qū)別在于，首先，類可以給任何數(shù)量的元素分配相同的名稱，而分配給多個(gè)元素ID名稱不能相同。其次，ID對(duì)元素應(yīng)用何種樣式聲明都比類具有更高的優(yōu)先級(jí)。 2.4上下文選擇 html標(biāo)記： css范例：h1 em color:gray; 范例可翻譯為：任何h1中的em元素顏色為灰色。 規(guī)則：有

5、多個(gè)選擇符組成，選擇符之間由空格間隔。 2.5 通用選擇符 css范例：* color:black; 所有的元素為黑色。 Css范例：body * ul color:gray; Body 元素下的ul 元素不為灰色，而其兩級(jí)以下的ul元素為黑色。 2.6 相鄰兄弟選擇符 css范例：h1 + p color:silver; 緊跟在h1后面的p元素的顏色為銀色。不包含嵌套在h1中的p元素。 Css范例：h2 + * color:silver; 緊跟在h2后面的所有元素為銀色。不包含嵌套在h2中的元素 。2.7屬性選 擇符 css范例1：ahref text-decoration:none;有hr

6、ef屬性的a標(biāo)記元素?zé)o下劃線。 css范例2：class color:gray;任何有class屬性的標(biāo)記元素為灰色。 Html范例：Class屬性可以有多個(gè)值，每個(gè)值之間用空格間隔。 css范例3：pclass=”footer example”;color:blackclass屬性的多個(gè)值完全匹配。 css范例4：pclass=”example”;color:black其中一個(gè)class屬性值要匹配。 Html范例： Css范例5：imgalt=”photo”class=”pic” margin:20px; 2.8 子選擇符 css范例1：bodyp corlor:green;body的下一

7、級(jí)p元素的顏色為綠色。 Css范例2：div olli em color:purpleDiv的下一級(jí)ol下的li的em元素為紫色。 Css范例3：bodyolli color:silver;Body中下一級(jí)ol下的li元素為銀色。 2.9偽類和偽元素 語(yǔ)法：選擇符:偽類 屬性:值或選擇符:偽元素 屬性:值 范例：A:linkcolor:purple;A:visitedcolor:red;A:active color:yellow; 偽類(pseudo-class)和偽元素(pseudo-element)選擇符。他們?cè)试S將樣式應(yīng)用于文檔中不存在的結(jié)構(gòu)上，或者是通過當(dāng)前元素狀態(tài)甚至是文檔自身的狀態(tài)

8、而推斷的某些東西上。最常用到的是 :link、 :visited 、 :active 、 :hover 這幾個(gè)偽類,與:first-letter、:first-line這兩個(gè)偽元素。2.10繼承 css的一個(gè)重要特征就是繼承，它依賴于祖先、后代的關(guān)系，繼承其實(shí)是一種機(jī)制，它允許樣式不僅應(yīng)用于某個(gè)特定的元素，而且應(yīng)用于其后代。 Html范例： Css范例：h1 color:gray;H1文本和em文本都是灰色，因?yàn)轭伾当籩m元素繼承了。繼承具有局限性，有些屬性是不能繼承的，例如：border、margin、padding、background屬性。 2.11特殊性 html范例：h1的顏色em

9、的顏色 css范例：.grape color:purple;h1 color:green;h1元素將顯示為紫色。特殊性描述了不同規(guī)則的相對(duì)權(quán)重，更具規(guī)范，一個(gè)簡(jiǎn)單的選擇符具有特殊性1，類選擇符具有特殊性10，而ID選擇符具有特殊性100，被繼承的值具有特殊性0。權(quán)重越大的樣式將被優(yōu)先使用。 2.12 層疊 css范例：h1color:red; h1color:blue; 層疊規(guī)則：1、找出所有包含與給定元素匹配的選擇符的聲明。2、按應(yīng)用于給定元素的所有聲明的顯式權(quán)重排序。然后按照聲明的起源排序，起源有三種：制作者、讀者和用戶代理。3、按應(yīng)用于給定元素的所有聲明的特殊性排序，高特殊性比低特殊性有

10、更高的權(quán)重。4、按應(yīng)用于給定元素的所有聲明出現(xiàn)的順序排序。越考后的聲明其權(quán)重越大。 2.13 元素的分類 在css中元素被分為三類： 塊級(jí)元素：諸如段落、標(biāo)題、列表、表格、div和body等元素，每個(gè)塊級(jí)元素都從新的一行開始顯示，而且其后的元素也從新的一行開始顯示。 內(nèi)聯(lián)元素：如a、em元素及大多數(shù)的替換元素，如圖形和表單的輸入元素。它們不必在新的一行顯示，也不強(qiáng)迫其他元素在新的一行顯示。而且可以作為任何其他元素的子元素。 列表項(xiàng)元素：在html中只有l(wèi)i元素。 2.13.1 display display：block | inline | list-item | none block:塊對(duì)象

11、的默認(rèn)值。將對(duì)象強(qiáng)制作為塊對(duì)象呈遞，為對(duì)象之后添加新行。 inline:內(nèi)聯(lián)對(duì)象的默認(rèn)值。將對(duì)象強(qiáng)制作為內(nèi)聯(lián)對(duì)象呈遞，從對(duì)象中刪除行。 list-item: 將塊對(duì)象指定為列表項(xiàng)目。并可以添加可選項(xiàng)目標(biāo)志。 none:隱藏對(duì)象。與 visibility 屬性的hidden值不同，其不為被隱藏的對(duì)象保留其物理空間 3.1 顏色 使用rgb值的范例：div color:rgb(132,20,180); div color:rgb(12%,200,50%); 使用十六進(jìn)制為值的范例：div color:#FF0000; div color:#F00; 使用顏色名稱為值的范例：div color: r

12、ed; 網(wǎng)絡(luò)安全色：RGB顏色值為0或0以及20或51倍數(shù)的值。對(duì)于十六進(jìn)制，相對(duì)應(yīng)的值為：00、33、66、99、cc和ff，即0和33的倍數(shù)。 3.2 長(zhǎng)度單位 絕對(duì)長(zhǎng)度單位：pt、pc、in、cm、mmpt：磅是標(biāo)準(zhǔn)的印刷上的量度。72英寸為1磅。pc：另一種印刷術(shù)語(yǔ)，1pc等于12pt應(yīng)避免使用pt作為單位，cm、mm、百分比和像素對(duì)于pt來說顯示效果都要好些。在網(wǎng)頁(yè)設(shè)計(jì)中使用絕對(duì)單位是比較危險(xiǎn)的。 相對(duì)長(zhǎng)度單位：em、ex、pxem：元素的字體高度。相對(duì)于元素而變化。ex：字母的“X”高度。許多用戶代理都設(shè)定1em等于2expx：規(guī)范中假設(shè)90px等于1in。最好的度量是相對(duì)度量，尤

13、其是em和px。 3.3 百分比值 范例：h1 font-size:18pt;h1.tall font-height:150%;具有tall類屬性h1元素的行高是普通行高的1.5倍。 3.4其他單位 角度：deg、grad、rad 時(shí)間：s、ms 頻率：Hz、kHz 4、文本屬性1 text-align：文本對(duì)齊屬性，適用塊級(jí)元素。取值：left | right | center | justify text-indent：文本縮進(jìn)屬性，適用塊級(jí)元素。取值：長(zhǎng)度 text-overflow：處理益處容器的文本，適用塊級(jí)元素。取值：clip | ellipsis white-space：處理文本

14、中的空格，適用塊級(jí)元素。取值：pre | nowrap | normal line-height: 指定文本行基線間的距離，適用所有元素。取值： | | | normal4、文本屬性2 vertical-align：垂直方向?qū)R文本，適用于內(nèi)聯(lián)元素。取值：baseline | sub | super | bottom | text-bottom | middle | top | text-top | word-spacing：英文單詞之間的間隔距離，適用所有元素。取值： | normal letter-spacing：字母之間的間隔距離，適用所有元素。取值： | normal text-dec

15、oration：文本修飾，適用所有元素。取值：none | underline | overline | | line-throng | blink 5、字體屬性 font-family：字體系列屬性，適用所有元素。取值：系列字體名稱。用逗號(hào)間隔。 font-weight：字體加粗，適用所有元素。取值：normal | bold | bolder | lighter | 100 | 200 | | 900 font-size：字體尺寸，適用所有元素。取值： | | small | large等 font-style：字體樣式，適用所有元素。取值：italic | oblique | norma

16、l font：字體屬性的縮寫，適用所有元素。取值： | ?/? 6、顏色和背景 color：設(shè)置顏色屬性，適用所有元素，取值： background : 背景設(shè)置，適用所有元素，取值：background-color | background-image | background-repeat | background-attachment | background-position background-color：背景顏色，取值： | transparent background-image：背景圖像，取值： | none background-repeat：平鋪背景圖像，取值：repea

17、t | no-repeat | repeat-x | repeat-y background-attachment：設(shè)置或檢索背景圖像是隨對(duì)象內(nèi)容滾動(dòng)還是固定的，取值：scroll | fixed background-position：背景圖像位置，適用于塊級(jí)元素，取值： | 1，2 | length | left | center | right | top | center | bottom 7、框和邊框 三維圖示MarginBorderPaddingContent7.1 基本元素框 width：基本元素框的寬度，適用于塊級(jí)元素和替換元素。取值： | | auto height：基本元素

18、框的高度，適用于塊級(jí)元素和替換元素。取值： | | auto 7.2邊界和內(nèi)補(bǔ)白 Margin：邊界，適用于所有元素。取值： | | auto1,4 可以分別設(shè)置：Margin-top、margin-right、margin-bottom、margin-left屬性 Padding：內(nèi)補(bǔ)白，適用所有元素。取值： | 1,4 可以分別設(shè)置：padding-top、padding -right、padding -bottom、padding -left 屬性7.3邊框1 Border：邊框，適用于所有元素。取值： | | 1,4可以分別設(shè)置：Border-top、border-right、bord

19、er-bottom、border-left border-style：邊框樣式。取值：none | dotted | dashed | solid | double | groove | ridge | inset | outset可分別設(shè)置：border-top-style、border-right-style、border-bottom-style、border-left-style7.3邊框2 border-color：邊框顏色。取值：1,4可分別設(shè)置：border-top-color、border-right- color、border-bottom- color、border-lef

20、t- color border-width：邊框?qū)挾?。取值：thin | medium | thick | 1,4可分別設(shè)置：border-top-width、border-right- width、border-bottom- width、border-left- width7.4 已知的模型盒問題 css范例：div.content margin:2px;padding:50px;width:400px;background:red; 正確理解：該div的總寬度應(yīng)該是2+50+400+50+2=504px 然而，在IE4.0到5.5以前版本的瀏覽器中解釋為：2+50+400+50+2=400px7.5 解決已知的模型盒問題 解決辦法： div.content margin:2px; padding:50px; width:504px; voice-family:”; voice-fanily:inherit; width:400px; background:red; IE4.0到5.5無(wú)法識(shí)別其中綠色的兩行規(guī)則，將不在閱讀之后的定義，而最新的瀏覽器可以繼續(xù)閱讀，并執(zhí)行真實(shí)值。 對(duì)于Opera7.0以前版本的瀏覽器，雖然可以正確的解釋模型盒，但卻有和IE