網(wǎng)頁設計基礎教程

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

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

3、r:gray是一個聲明，而H1 color:gray就是一條規(guī)則。 2.2分組 讓同一條規(guī)則應用于多個元素，也就是多個選擇符，或者要將更多的樣式應用于一個或一組元素。 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標記： css范例：.warning font-weight:bold; html標記： css范例：#first-line font-weight:bold; 類和ID間的區(qū)別在于，首先，類可以給任何數(shù)量的元素分配相同的名稱，而分配給多個元素ID名稱不能相同。其次，ID對元素應用何種樣式聲明都比類具有更高的優(yōu)先級。 2.4上下文選擇 html標記： css范例：h1 em color:gray; 范例可翻譯為：任何h1中的em元素顏色為灰色。 規(guī)則：有

5、多個選擇符組成，選擇符之間由空格間隔。 2.5 通用選擇符 css范例：* color:black; 所有的元素為黑色。 Css范例：body * ul color:gray; Body 元素下的ul 元素不為灰色，而其兩級以下的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標記元素無下劃線。 css范例2：class color:gray;任何有class屬性的標記元素為灰色。 Html范例：Class屬性可以有多個值，每個值之間用空格間隔。 css范例3：pclass=”footer example”;color:blackclass屬性的多個值完全匹配。 css范例4：pclass=”example”;color:black其中一個class屬性值要匹配。 Html范例： Css范例5：imgalt=”photo”class=”pic” margin:20px; 2.8 子選擇符 css范例1：bodyp corlor:green;body的下一

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

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

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

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

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

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

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

14、中的空格，適用塊級元素。取值：pre | nowrap | normal line-height: 指定文本行基線間的距離，適用所有元素。取值： | | | normal4、文本屬性2 vertical-align：垂直方向對齊文本，適用于內聯(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：字體系列屬性，適用所有元素。取值：系列字體名稱。用逗號間隔。 font-weight：字體加粗，適用所有元素。取值：normal | bold | bolder | lighter | 100 | 200 | | 900 font-size：字體尺寸，適用所有元素。取值： | | small | large等 font-style：字體樣式，適用所有元素。取值：italic | oblique | norma

16、l font：字體屬性的縮寫，適用所有元素。取值： | ?/? 6、顏色和背景 color：設置顏色屬性，適用所有元素，取值： background : 背景設置，適用所有元素，取值：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：設置或檢索背景圖像是隨對象內容滾動還是固定的，取值：scroll | fixed background-position：背景圖像位置，適用于塊級元素，取值： | 1，2 | length | left | center | right | top | center | bottom 7、框和邊框 三維圖示MarginBorderPaddingContent7.1 基本元素框 width：基本元素框的寬度，適用于塊級元素和替換元素。取值： | | auto height：基本元素

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

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

20、t- color border-width：邊框寬度。取值：thin | medium | thick | 1,4可分別設置：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的總寬度應該是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無法識別其中綠色的兩行規(guī)則，將不在閱讀之后的定義，而最新的瀏覽器可以繼續(xù)閱讀，并執(zhí)行真實值。 對于Opera7.0以前版本的瀏覽器，雖然可以正確的解釋模型盒，但卻有和IE