HTML5網(wǎng)頁前端設計（第3版）- 微課視頻版 課件 CH03 CSS基礎_第1頁
HTML5網(wǎng)頁前端設計（第3版）- 微課視頻版 課件 CH03 CSS基礎_第2頁
HTML5網(wǎng)頁前端設計（第3版）- 微課視頻版 課件 CH03 CSS基礎_第3頁
HTML5網(wǎng)頁前端設計（第3版）- 微課視頻版 課件 CH03 CSS基礎_第4頁
HTML5網(wǎng)頁前端設計（第3版）- 微課視頻版 課件 CH03 CSS基礎_第5頁
已閱讀5頁，還剩172頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第3章CSS基礎主講人：XX老師本章學習目標了解CSS的基本語法規(guī)則；了解CSS的常見取值與單位；熟悉CSS樣式表的層疊優(yōu)先級；掌握CSS樣式表的三種使用方式；掌握CSS常用選擇器的使用；掌握CSS常用樣式的使用；掌握CSS的四種定位方法。目錄3.1CSS樣式表3.2CSS選擇器3.3語法規(guī)則3.4CSS取值與單位3.5CSS常用樣式3.6CSS定位 3.1CSS樣式表3.1.1內(nèi)聯(lián)樣式表3.1.2內(nèi)部樣式表3.1.3外部樣式表3.1.4樣式表層疊優(yōu)先級3.1.1內(nèi)聯(lián)樣式表內(nèi)聯(lián)樣式表又稱為行內(nèi)樣式表，通過使用style屬性為各種HTML元素標簽添加樣式，其作用范圍只在指定的HTML元素內(nèi)部。3.1.1內(nèi)聯(lián)樣式表基本語法格式如下：如果有多個屬性需要同時添加，可用分號隔開，顯示如下：例如，為某個標題標簽<h1>設置樣式：<元素名style="屬性名稱:屬性值"><元素名style="屬性名稱1:屬性值1;屬性名稱2:屬性值2;...屬性名稱N:屬性值N"><h1style=”color:blue;background-color:yellow”>標題一</h1>該聲明表示設置當前<h1>和</h1>標簽之間的文本字體顏色為藍色，背景色為黃色。3.1.1內(nèi)聯(lián)樣式表為方便理解本節(jié)例題，表3-1列出了部分常用CSS屬性和參考值。3.1.1內(nèi)聯(lián)樣式表【例3-1】內(nèi)聯(lián)樣式表的用法示例

3.1.2內(nèi)部樣式表內(nèi)部樣式表通常位于<head>和</head>標簽內(nèi)部，通過使用<style>和</style>標簽標記各類樣式規(guī)則，其作用范圍為當前整個文檔。3.1.2內(nèi)部樣式表語法格式如下：例如：<style>

選擇器{屬性名稱1:屬性值1;屬性名稱2:屬性值2;...屬性名稱N:屬性值N}</style>這里的選擇器可用于指定樣式的元素標簽，例如body、p、h1-h6等均可。h1{color:red}該語句可以作用于整個文檔，因此文檔中所有的h1標題都將變?yōu)榧t色字體。注：在HTML4.01版本中會看到將<style>首標簽寫成<styletype=”text/css”>的形式，在HTML5中已簡化為<style>。3.1.2內(nèi)部樣式表如果屬性內(nèi)容較多，也可以分行寫：例如：<style>

選擇器{

屬性名稱1:屬性值1;

屬性名稱2:屬性值2;...

屬性名稱N:屬性值N}</style>其中最后一個屬性值后面是否添加分號為可選內(nèi)容。一般來說屬性之間的分號用于間隔不同的屬性聲明，因此最后一個屬性值無需添加分號。但是為了方便后續(xù)添加新的屬性，也可以為最后一個屬性值添加分號，這種做法不影響CSS樣式表的正常使用。3.1.2內(nèi)部樣式表【例3-2】內(nèi)部樣式表的用法示例3.1.3外部樣式表外部樣式表為獨立的CSS文件，其后綴名為.css或.CSS，在網(wǎng)頁文檔的首部<head>和</head>標簽之間使用<link>標簽對其進行引用即可作用于當前整個文檔。3.1.3外部樣式表在HTML5中，對于獨立CSS文件的引用語法格式如下：例如，引用本地css文件夾中的test.css文件：<linkrel="stylesheet"href="樣式文件URL"><linkrel="stylesheet"href="css/test.css">外部CSS文件中的內(nèi)容無需使用<style></style>標簽進行標記，其格式和內(nèi)部樣式表<style>標簽內(nèi)部的內(nèi)容格式完全一樣。3.1.3外部樣式表【例3-3】外部樣式表的用法示例

3.1.4樣式表層疊優(yōu)先級內(nèi)聯(lián)樣式表、內(nèi)部樣式表和外部樣式表可以在同一個網(wǎng)頁文檔中被引用，它們會被層疊在一起形成一個統(tǒng)一的虛擬樣式表。如果其中有樣式條件沖突，CSS會選擇優(yōu)先級別高的樣式條件渲染在網(wǎng)頁上。3.1.4樣式表層疊優(yōu)先級三種樣式表的優(yōu)先級別排序如表3-2所示。3.1.4樣式表層疊優(yōu)先級【例3-4】樣式表優(yōu)先級測試3.2CSS選擇器3.2.1元素選擇器3.2.2ID選擇器3.2.3類選擇器3.2.4屬性選擇器3.2.1元素選擇器在CSS中最常見的選擇器就是元素選擇器，即采用HTML文檔中的元素名稱進行樣式規(guī)定。元素選擇器又稱為類型選擇器，可以用于匹配HTML文檔中某一個元素類型的所有元素。3.2.1元素選擇器例如，匹配所有的段落元素<p>，并將其背景顏色聲明為灰色：p{background:gray}在之前3.1節(jié)

中的各例題使用的均為元素選擇器。3.2.2ID選擇器ID選擇器使用指定的id名稱匹配元素。如果需要為特定的某個元素進行樣式設置，可以為其添加一個自定義的id名稱，然后根據(jù)id名稱進行匹配。3.2.2ID選擇器ID選擇器和元素選擇器語法結(jié)構(gòu)類似，但是聲明時需要在id名稱前面加#號。其語法規(guī)則如下：例如，為某個段落元素<p>添加id="test"：然后匹配上述id="test"的段落元素<p>，并將其字體顏色聲明為紅色：#id名稱{屬性名稱1:屬性值1;屬性名稱2:屬性值2;...屬性名稱N:屬性值N}<pid="test">這是一個段落</p>#test{color:red}3.2.2ID選擇器【例3-5】ID選擇器的簡單應用3.2.3類選擇器類選擇器可以將不同的元素定義為共同的樣式。類選擇器在聲明時需要在前面加“.”號，為了和指定的元素關(guān)聯(lián)使用，需要自定義一個class名稱。3.2.3類選擇器其語法規(guī)則如下：例如，設置一個類選擇器用于設置字體為紅色：將其使用在不同的元素上，可以顯示統(tǒng)一的效果：.class名稱{屬性名稱1:屬性值1;屬性名稱2:屬性值2;...屬性名稱N:屬性值N}<h1class="red">這是標題，字體顏色是紅色</h1><pclass="red">這是段落，字體顏色也是紅色</p>.red{color:red}3.2.3類選擇器類選擇器也可以將相同的元素定義為不同的樣式。例如，設置兩個類選擇器，分別用于設置字體為紅色和藍色：將其使用在相同的段落元素<p>中，可以顯示不同的樣式效果：.red{color:red}.blue{color:blue}<pclass="red">這是段落1，字體顏色是紅色</p><pclass="blue">這是段落2，字體顏色是藍色</p>3.2.3類選擇器類選擇器也可以為同一個元素設置多個樣式。例如，設置兩個類選擇器，分別用于設置字體為紅色和設置背景顏色為藍色：將其使用在同一個段落元素<p>中，可以同時應用這兩種樣式效果：.red{color:red}.bgblue{background-color:blue}<pclass="redbgblue">本段落的字體顏色是紅色，背景顏色是藍色</p>3.2.3類選擇器【例3-6】類選擇器的簡單應用

3.2.4屬性選擇器從CSS2開始引入了屬性選擇器，屬性選擇器允許基于元素所擁有的屬性進行匹配。3.2.4屬性選擇器其語法規(guī)則如下：例如，只對帶有href屬性的超鏈接元素<a>設置CSS樣式：a[href]{color:red;}元素名稱[元素屬性]{屬性名稱1:屬性值1;屬性名稱2:屬性值2;...屬性名稱N:屬性值N}上述代碼表示將所有帶有href屬性的超鏈接元素<a>設置字體顏色為紅色。3.2.4屬性選擇器也可以根據(jù)具體的屬性值進行CSS樣式設置，例如：a[href=""]{color:red;}上述代碼表示將href屬性值為的超鏈接設置為紅色字體樣式。3.2.4屬性選擇器如果不確定屬性值的完整內(nèi)容，可以使用[attribute~=value]的格式查找元素，表示在屬性值中包含value關(guān)鍵詞。例如：a[href~="baidu"]{color:red;}上述代碼表示將所有href屬性值中包含baidu字樣的超鏈接設置為紅色字體樣式。3.2.4屬性選擇器還可以使用[attribute|=value]的格式查找元素，表示屬性值中以單詞value開頭。例如：img[alt|="flower"]{border:1pxsolidred;}上述代碼表示為所有alt屬性值以flower字樣開頭的圖像元素設置1像素寬的紅色實線邊框效果。3.2.4屬性選擇器【例3-7】屬性選擇器的簡單應用

3.3語法規(guī)則3.3.1注釋語句3.3.2@charset3.3.3!important3.3.1注釋語句在內(nèi)部樣式表和外部樣式表文件中均可以使用/*注釋內(nèi)容*/的形式為CSS進行注釋，注釋內(nèi)容不會被顯示出來。該注釋以“/*”開頭，以“*/”結(jié)尾，支持單行和多行注釋。3.3.1注釋語句例如：p{color:red;/*字體設置為紅色*/background-color:yellow;/*背景設置為黃色*/}/*這是一個多行注釋注釋可以存在于CSS樣式表的任意位置*/3.3.2@charset該語法在外部樣式表文件內(nèi)使用，用于指定當前樣式表使用的字符編碼。3.3.2@charset例如：@charset"utf-8";該語句表示外部樣式表文件使用了utf-8的編碼格式，一般寫在外部樣式表文件的第一行，并且需要加上分號結(jié)束。3.3.3!important!important用于標記CSS樣式的使用優(yōu)先級。3.3.3!important其語法規(guī)則如下：例如：選擇器{樣式規(guī)則!important;}p{background-color:red!important;background-color:blue;}上述代碼表示優(yōu)先使用background-color:red語句，即段落元素的背景顏色設置為紅色。3.4CSS取值與單位3.4.1數(shù)字3.4.2長度3.4.3角度3.4.4時間3.4.5文本3.4.6顏色3.4.1數(shù)字

數(shù)字取值是在CSS2中規(guī)定的，有三種取值形式如表3-3所示。3.4.2長度長度取值<length>是在CSS2中規(guī)定的，表示方法為數(shù)值接長度單位?？捎糜诿枋鑫谋尽D像或其他各類元素的尺寸。3.4.2長度長度取值的單位可分為相對長度單位和絕對長度單位。相對單位的長度不是固定的，是根據(jù)參照物換算出實際長度，又可分為文本相對長度單位和視口相對長度單位。絕對長度單位的取值是固定的，例如厘米、毫米等，該取值不根據(jù)瀏覽器或容器的大小發(fā)生改變。3.4.2長度

長度單位的具體情況如表3-4所示。3.4.3角度角度取值<angle>是在CSS3中規(guī)定的，可用于描述元素變形時旋轉(zhuǎn)的角度。3.4.4時間

時間取值<time>是在CSS3中規(guī)定的，可用于描述元素變形時旋轉(zhuǎn)的角度。3.4.5文本文本常見有三種取值形式，如表3-7所示。3.4.6顏色

CSS顏色可以用于設置HTML元素的背景顏色、邊框顏色、字體顏色等。本節(jié)主要介紹了網(wǎng)頁中顏色顯示的原理—RGB色彩模式，和三種常用的顏色表示方式。3.4.6顏色1.RGB色彩模式RBG色彩模式是一種基于光學原理的顏色標準規(guī)范，也是目前運用最廣泛的工業(yè)界顏色標準之一。顏色是通過對紅、綠、藍光的強弱程度不同組合疊加顯示出來的，而RGB三個字母正來自于紅（Red）、綠（Green）、藍（Blue）三個英文單詞首字母組合而成，代表了這三種顏色光線疊加在一起形成的各式各樣的色彩。3.4.6顏色1.RGB色彩模式目前的顯示器大多是采用了RGB色彩模式，是通過屏幕上的紅、綠、藍三色的發(fā)光極的亮度組合出不同的色彩。因此網(wǎng)頁上的任何一種顏色都可以由一組RGB值來表示。RGB色彩模式規(guī)定了紅、綠、藍三種光的亮度值均用整數(shù)表示，其范圍是[0,255]共有256級，其中0為最暗，255為最亮。因此紅、綠、藍三種顏色通道的取值能組合出256X256X256=16,777,216種不同的顏色。目前主流瀏覽器能支持其中大約16000多種色彩。3.4.6顏色2.常見顏色表示方式在CSS中常用的顏色表示方式有：使用RGB顏色的方式：例如rgb(0,0,0)表示黑色、rgb(255,255,255)表示白色等；RGB的十六進制表示法：例如#000000表示黑色、#FFFFFF表示白色等；直接使用英文單詞名稱：例如red表示紅色、blue表示藍色等。3.4.6顏色【例3-8】CSS顏色的簡單應用

3.5CSS常用樣式3.5.1CSS背景3.5.2CSS框模型3.5.3CSS文本3.5.4CSS字體3.5.5CSS超鏈接3.5.6CSS列表3.5.7CSS表格3.5.1CSS背景本節(jié)將介紹如何在網(wǎng)頁上應用背景顏色和背景圖像。和CSS背景有關(guān)的屬性如表3-9所示。3.5.1CSS背景1.背景顏色background-colorCSS中的background-color屬性用于為所有HTML元素指定背景顏色。例如：如需要更改整個網(wǎng)頁的背景顏色，則對<body>元素應用background-color屬性。例如：p{background-color:gray}/*將段落元素的背景顏色設置為灰色*/body{background-color:cyan}/*將整個網(wǎng)頁的背景顏色設置為青色*/3.5.1CSS背景1.背景顏色background-colorbackground-color屬性的默認值是transparent（透明的），因此如果沒有特別規(guī)定HTML元素的背景顏色，那么該元素就是透明的以便使其覆蓋的元素為可見。3.5.1CSS背景1.背景顏色background-color【例3-9】CSS屬性background-color的簡單應用

3.5.1CSS背景2.背景圖像background-imageCSS中的background-image屬性用于為元素設置背景圖像。例如：如果引用本地其他文件夾中的圖片，給出對應的文件夾路徑即可。例如：如需要更改整個網(wǎng)頁的背景圖像，則對<body>元素應用background-image屬性。例如：p{background-color:gray}/*將段落元素的背景顏色設置為灰色*/p{background-image:url(image/flower.jpg)}body{background-image:url(image/flower.jpg)}3.5.1CSS背景2.背景圖像background-image【例3-10】CSS屬性background-image的簡單應用

3.5.1CSS背景3.背景圖像平鋪方式background-repeatCSS中的background-image屬性用于設置背景圖像的平鋪方式。如果不設置該屬性，則默認背景圖像會在水平和垂直方向上同時被重復平鋪（如例3-10的運行效果）。該屬性有四種不同的取值，如表3-10所示。3.5.1CSS背景3.背景圖像平鋪方式background-repeat【例3-11】CSS屬性background-repeat的簡單應用3.5.1CSS背景4.固定/滾動背景圖像background-attachmentCSS中的background-attachment屬性用于設置背景圖像是固定在屏幕上還是隨著頁面滾動。該屬性有兩種取值，如表3-11所示。3.5.1CSS背景4.固定/滾動背景圖像background-attachment【例3-12】CSS屬性background-attachment的簡單應用

3.5.1CSS背景5.定位背景圖像background-position默認情況下，背景圖像會放置在元素的左上角。CSS中的background-position屬性用于設置背景圖像的位置，可以根據(jù)屬性值的組合將圖像放置到指定位置上。該屬性允許使用兩個屬性值組合的形式對背景圖像進行定位。其基本格式如下：background-position:水平方向值

垂直方向值水平和垂直方向的屬性值均可使用關(guān)鍵詞、長度值或者百分比的形式表示。3.5.1CSS背景5.定位背景圖像background-position(1)關(guān)鍵詞定位在background-position屬性值中可以使用的關(guān)鍵詞共有5種，如表3-12所示。3.5.1CSS背景5.定位背景圖像background-position(1)關(guān)鍵詞定位使用關(guān)鍵詞組合的方式定位圖像，需要從表示水平方向和垂直方向的關(guān)鍵詞中各選一個組合使用，例如background-position:lefttop表示背景圖像在元素左上角的位置。關(guān)鍵詞指示的方向非常明顯，例如left和right就是水平方向?qū)Ｓ?，而top和bottom是垂直方向?qū)Ｓ?。因此關(guān)鍵詞的組合可以不分先后順序，例如lefttop和topleft就表達完全相同的含義。關(guān)鍵詞center既可表示水平居中也可表示垂直居中，組合使用時取決于另一個關(guān)鍵詞是水平還是垂直方向，center則用于補充對立方向。3.5.1CSS背景5.定位背景圖像background-position(1)關(guān)鍵詞定位關(guān)鍵詞定位的方式也可以簡寫為單個關(guān)鍵詞的形式，這種情況會默認另一個省略的關(guān)鍵詞為center。例如簡寫形式left就等價于leftcenter或centerleft，表示水平方向左對齊、垂直方向居中顯示。3.5.1CSS背景5.定位背景圖像background-position(2)長度值定位

長度值定位方法是以元素內(nèi)邊距區(qū)域左上角的點作為原點，然后解釋背景圖像左上角的點對原點的偏移量。例如background-position:100px50px指的是背景圖像左上角的點距離元素左上角向右100像素同時向下50像素的位置上。3.5.1CSS背景5.定位背景圖像background-position(3)百分比定位百分比數(shù)值定位方式更為復雜，是將HTML元素與其背景圖像在指定的點上重合對齊，而指定的點是用百分比的方式進行解釋的。例如background-position:0%0%指的是背景圖像左上角的點放置在HTML元素左上角原點上。而background-position:66%33%指的是HTML元素和背景圖像水平方向2/3的位置和垂直方向1/3的位置上的點對齊。3.5.1CSS背景5.定位背景圖像background-position(3)百分比定位一般來說使用百分比定位方式都是用兩個參數(shù)值組合定位的，第一個參數(shù)值表示水平方向的位置，第二個參數(shù)值表示垂直方向的位置。如果簡寫為一個參數(shù)值則只表示水平方向的位置，省略的垂直方向位置默認為50%。這種方法類似于關(guān)鍵詞定位法簡寫時使用center補全省略的關(guān)鍵詞。3.5.1CSS背景5.定位背景圖像background-position【例3-13】CSS屬性background-position的綜合應用

3.5.1CSS背景5.定位背景圖像background-position3.5.1CSS背景6.背景簡寫backgroundCSS中的background屬性可以用于概括其它五種背景屬性，將相關(guān)屬性值匯總寫在同一行。當需要為同一個元素聲明多項背景屬性時可以使用background屬性進行簡寫。聲明順序如下：[background-color][background-image][background-repeat][background-attachment][background-position]屬性值之間用空格隔開，如果其中某個屬性沒有規(guī)定可以省略不寫。3.5.1CSS背景6.背景簡寫background例如：上述代碼使用background屬性可以簡寫為：p{background-color:silver; background-image:url(image/football.png); background-repeat:no-repeat;}p{background:silverurl(image/football.png)no-repeat}3.5.2CSS框模型CSS框模型又稱為盒狀模型（BoxModel），用于描述HTML元素形成的矩形盒子。3.5.2CSS框模型每個HTML元素都具有元素內(nèi)容、內(nèi)邊距、邊框和外邊距。CSS框模型的結(jié)構(gòu)如下圖所示。3.5.2CSS框模型1.內(nèi)邊距padding(1)設置各邊內(nèi)邊距在CSS中，可以使用padding屬性設置HTML元素的內(nèi)邊距。元素的內(nèi)邊距也可以被理解為元素內(nèi)容周圍的填充物，因為內(nèi)邊距不影響當前元素與其他元素之間的距離，它只能用于增加元素內(nèi)容與元素邊框之間的距離。padding屬性值可以是長度值或者百分比值，但是不可以使用負數(shù)。3.5.2CSS框模型1.內(nèi)邊距padding(1)設置各邊內(nèi)邊距例如，為所有的段落元素<p>設置各邊均為20像素的內(nèi)邊距：使用百分比值表示的是該元素的上一級父元素寬度（width）的百分比。例如：p{padding:20px}<divstyle="width:100px"><pstyle="padding:20%">這是一個段落</p></div>3.5.2CSS框模型1.內(nèi)邊距padding(1)設置各邊內(nèi)邊距padding屬性也可以為元素的各邊分別設置內(nèi)邊距。例如：p{padding:10px20px020%}此時規(guī)定的屬性值按照上右下左的順時針順序為各邊的內(nèi)邊距進行樣式定義。因此本例表示上邊內(nèi)邊距為10像素；右邊內(nèi)邊距為20像素；下邊內(nèi)邊距為0；左邊內(nèi)邊距為其父元素寬度的20%。3.5.2CSS框模型1.內(nèi)邊距padding(2)單邊內(nèi)邊距如果只需要為HTML元素的某一個邊設置內(nèi)邊距，可以使用padding屬性的4種單邊內(nèi)邊距屬性，如表3-14所示。3.5.2CSS框模型1.內(nèi)邊距padding(2)單邊內(nèi)邊距例如，設置段落元素<p>的上邊內(nèi)邊距為20像素：p{padding-top:20px}3.5.2CSS框模型1.內(nèi)邊距padding【例3-14】CSS屬性padding的應用

3.5.2CSS框模型2.邊框border使用CSS邊框的相關(guān)屬性可以為HTML元素創(chuàng)建不同寬度、樣式和顏色的邊框。和CSS邊框有關(guān)的屬性如表3-15所示。3.5.2CSS框模型2.邊框border(1)邊框?qū)挾萣order-widthCSS中的border-width屬性用于定義HTML元素邊框的寬度。該屬性有四種取值，如表3-16所示。3.5.2CSS框模型2.邊框border(1)邊框?qū)挾萣order-width【例3-15】CSS屬性border-width的簡單應用

3.5.2CSS框模型2.邊框border(2)邊框樣式border-styleCSS中的border-style屬性用于定義HTML元素邊框的樣式。該屬性有10種取值，如表3-17所示。3.5.2CSS框模型2.邊框border(2)邊框樣式border-style【例3-16】CSS屬性border-style的簡單應用

3.5.2CSS框模型2.邊框border(3)邊框顏色border-colorCSS中的border-color屬性用于定義HTML元素邊框的顏色。其屬性值為正常的顏色值即可，例如red表示紅色邊框等。關(guān)于顏色的寫法可以參考本章3.4.6節(jié)，這里不再贅述。3.5.2CSS框模型2.邊框border(3)邊框顏色border-color【例3-17】CSS屬性border-color的簡單應用

3.5.2CSS框模型2.邊框border(4)邊框簡寫borderCSS中的border屬性可以用于概括其它3種邊框?qū)傩?，將相關(guān)屬性值匯總寫在同一行。當需要為同一個元素聲明多項邊框?qū)傩詴r可以使用border屬性進行簡寫。屬性值無規(guī)定順序，彼此之間用空格隔開，如果其中某個屬性沒有規(guī)定可以省略不寫。3.5.2CSS框模型2.邊框border(4)邊框簡寫border例如：上述代碼使用border屬性可以簡寫為：p{border-width:1px;border-style:solid;border-color:red}p{border:1pxsolidred}3.5.2CSS框模型3.外邊距margin(1)設置各邊外邊距在CSS中，可以使用margin屬性設置HTML元素的外邊距。元素的外邊距也可以被理解為元素內(nèi)容周圍的填充物，因為內(nèi)邊距不影響當前元素與其他元素之間的距離，它只能用于增加元素內(nèi)容與元素邊框之間的距離。margin屬性值可以是長度值或百分比，包括可以使用負數(shù)。3.5.2CSS框模型3.外邊距margin(1)設置各邊外邊距例如，為所有的標題元素<h1>設置各邊均為10像素的外邊距：和內(nèi)邊距padding屬性類似，使用百分比值表示的也是當前元素上級父元素的寬度（width）百分比。例如：h1{margin:10px}<divstyle="width:300px"><pstyle="margin:10%">這是一個段落</p></div>3.5.2CSS框模型3.外邊距margin(1)設置各邊外邊距magin屬性同樣也可以為元素的各邊分別設置外邊距。例如：p{margin:010%20px30px}此時規(guī)定的屬性值按照上右下左的順時針順序為各邊的外邊距進行樣式定義。因此本例表示上邊外邊距為0像素；右邊外邊距為其父元素寬度的10%；下邊外邊距為20像素；左外外邊距為30像素。3.5.2CSS框模型3.外邊距margin(1)設置各邊外邊距如果在設置外邊距時各邊有部分重復值，可以寫成簡寫的方式。簡寫為3個屬性值的樣式，則左右邊外邊距共用中間的屬性值。例如：p{margin:10px030px}本例表示上邊外邊距為10像素；左右邊外邊距為0；下邊外邊距為30像素。3.5.2CSS框模型3.外邊距margin(1)設置各邊外邊距簡寫為2個屬性值的樣式，則上下邊外邊距共用第一個屬性值、左右邊外邊距共用第二個屬性值。例如：p{margin:20px30px}本例表示上下邊外邊距為20像素；左右邊外邊距為30像素。3.5.2CSS框模型3.外邊距margin(2)單邊外邊距如果只需要為HTML元素的某一個邊設置外邊距，也可以使用margin屬性的4種單邊外邊距屬性，如表3-18所示。3.5.2CSS框模型3.外邊距margin(2)單邊外邊距例如，設置段落元素<p>的左邊外邊距為10像素：p{margin-left:10px}需要注意的是，不同的瀏覽器對于HTML元素的邊距設置雖然基本都是默認為8像素，但是有細微的差異。其中Edge和Netscape瀏覽器是對<body>標簽定義了默認外邊距margin屬性為8px；而Opera瀏覽器相反是把內(nèi)邊距padding的默認值定義成了8px。為了保證網(wǎng)頁的HTML元素兼容各種瀏覽器，建議自定義<body>標簽中的margin和padding屬性值。3.5.2CSS框模型3.外邊距margin【例3-18】CSS屬性margin的應用

3.5.2CSS框模型3.外邊距margin(3)外邊距合并外邊距合并又稱為外邊距疊加，指的是如果兩個元素的垂直外邊距相連接會發(fā)生重疊合并，其高度是合并前這兩個外邊距中的較大值。因此外邊距合并主要指的就是上下外邊距的合并，存在以下三種可能：當元素B出現(xiàn)在元素A下面時，元素A的下邊距會與元素B的上邊距發(fā)生重疊合并；當元素B包含在元素A內(nèi)部時，如果元素B的上/下內(nèi)邊距均為0，也會發(fā)生上/下外邊距合并現(xiàn)象；當空元素沒有邊框和內(nèi)邊距時，上下外邊距也會發(fā)生合并。需要注意的是，只有普通塊級元素的垂直外邊距才會發(fā)生合并，如果是特殊情況例如浮動框、行內(nèi)框或者絕對定位之間的外邊距是不會發(fā)生合并的。3.5.3CSS文本本節(jié)將介紹如何對網(wǎng)頁上的文本內(nèi)容進行修飾。和CSS文本有關(guān)的屬性如表3-19所示。3.5.3CSS文本1.文本縮進text-indentCSS中的text-indent屬性用于為段落文本設置首行縮進效果。例如，為段落元素<p>設置20像素的首行縮進：p{text-indent:20px}3.5.3CSS文本1.文本縮進text-indent【例3-19】CSS屬性text-indent的簡單應用

3.5.3CSS文本2.文本對齊text-alignCSS中的text-align屬性用于為文本設置對齊效果。該屬性有四種取值，如表3-20所示。3.5.3CSS文本2.文本對齊text-align【例3-20】CSS屬性text-align的簡單應用

3.5.3CSS文本3.文本裝飾text-decorationCSS中的text-decoration屬性用于為文本添加裝飾效果，例如下劃線、刪除線和上劃線等。該屬性有4種取值，如表3-21所示。3.5.3CSS文本3.文本裝飾text-decoration【例3-21】CSS屬性text-decoration的簡單應用3.5.3CSS文本4.文本轉(zhuǎn)換text-transformCSS中的text-transform屬性用于設置文本的大小寫。該屬性有4種取值，如表3-22所示。3.5.3CSS文本4.文本轉(zhuǎn)換text-transform【例3-22】CSS屬性text-transform的簡單應用3.5.3CSS文本5.字符間距l(xiāng)etter-spacingCSS中的letter-spacing屬性用于設置文本中字符的間距，其屬性值為長度值。例如，將標題元素<h1>設置成字間距為10像素的寬度：h1{letter-spacing:10px}3.5.3CSS文本5.字符間距l(xiāng)etter-spacing【例3-23】CSS屬性letter-spacing的簡單應用3.5.4CSS字體本節(jié)將介紹如何對字體進行樣式設置。和CSS字體有關(guān)的屬性如表3-23所示。3.5.4CSS字體1.字體系列font-family在CSS中，將字體分為兩類：一類是特定字體系列（family-name），還有一類是通用字體系列（genericfamily）。特定字體系列指的是擁有具體名稱的某一種字體，比如宋體、楷體、黑體、TimesNewRoman、Arial等；而通用字體系列指的是具有相同外觀特征的字體系列。3.5.4CSS字體1.字體系列font-family除了常見的各種特定字體外，CSS規(guī)定了五種通用字體系列：Serif字體Sans-serif字體Monospace字體Cursive字體Fantasy字體3.5.4CSS字體1.字體系列font-family【例3-24】CSS屬性font-family的簡單應用

3.5.4CSS字體2.字體風格font-styleCSS中的font-style屬性可以用于設置字體風格是否為斜體字。該屬性有3種取值，如表3-24所示。3.5.4CSS字體2.字體風格font-style【例3-25】CSS屬性font-style的簡單應用

3.5.4CSS字體3.字體變化font-variantCSS中的font-variant屬性可以用于設置字體變化。該屬性有兩種取值，如表3-25所示。如果當前頁面的指定字體不支持small-caps這種形式，則顯示為正常大小字號的大寫字母。3.5.4CSS字體3.字體變化font-variant【例3-26】CSS屬性font-variant的簡單應用

3.5.4CSS字體4.字體粗細font-weightCSS中的font-weight屬性用于控制字體的粗細程度。該屬性有5種取值，如表3-26所示。3.5.4CSS字體4.字體粗細font-weight【例3-27】CSS屬性font-weight的簡單應用

3.5.4CSS字體5.字體大小font-size在CSS中，font-size屬性用于設置字體大小。font-size的屬性值為長度值，可以使用絕對單位或相對單位。絕對單位使用的是固定尺寸，不允許用戶在瀏覽器中更改文本大小，采用了物理度量單位：例如cm、mm、px等；相對單位是相對于周圍的參照元素進行設置大小，允許用戶在瀏覽器中更改字體大小，字體相對單位有：em、ch等。例如：p{font-size:30px}h1{font-size:2em}h2{font-size:120%}3.5.4CSS字體5.字體大小font-size關(guān)于字體大小的設置，常見用法是使用px、em或百分比（%）來顯示字體尺寸。px：含義為像素，1px指的是屏幕上顯示的一個小點，它是絕對單位。em：含義為當前元素的默認字體尺寸，是相對單位。瀏覽器默認字體大小是16px，因此在用戶未作更改的情況下，1em=16px。%：含義為相對于父元素的比例，例如20%指的就是父元素寬度的20%，也是一個相對單位。3.5.4CSS字體5.字體大小font-size【例3-28】CSS屬性font-size的簡單應用

3.5.4CSS字體6.字體簡寫fontCSS中的font屬性可以用于概括其它五種字體屬性，將相關(guān)屬性值匯總寫在同一行。當需要為同一個元素聲明多項字體屬性時可以使用font屬性進行簡寫。聲明順序如下：[font-style][font-variant][font-weight][font-size][font-family]屬性值之間用空格隔開，如果其中某個屬性沒有規(guī)定可以省略不寫。3.5.4CSS字體6.字體簡寫font例如：上述代碼使用font屬性可以簡寫為：p{font-style:italic;font-weight:bold;font-size:20px;}p{font:italicbold20px}3.5.5CSS超鏈接HTML中的超鏈接元素<a>和其他元素類似，有一些通用CSS屬性可以設置，比如字體大小、字體顏色、背景顏色等。除此之外，超鏈接元素<a>還可以根據(jù)其所處的4種不同的狀態(tài)分別設置CSS樣式。3.5.5CSS超鏈接超鏈接的4種狀態(tài)如表3-27所示。為超鏈接設置不同狀態(tài)的CSS樣式時必須遵循兩條規(guī)則：一是a:hover的聲明必須在a:link和a:visited之后；二是a:active的聲明必須在a:hover之后。否則聲明有可能失效。3.5.5CSS超鏈接【例3-29】超鏈接不同狀態(tài)的簡單CSS應用

3.5.6CSS列表CSS對于HTML列表元素的樣式設置主要在于規(guī)定各項列表前面的標志（marker）類型。在之前第二章HTML5基礎中提到了三種列表類型：有序列表、無序列表和定義列表。其中有序列表默認的標記樣式為標準阿拉伯數(shù)字（1，2，3，4，...）；而無序列表默認的標記樣式是實心圓點。3.5.6CSS列表和列表有關(guān)的屬性如表3-28所示。3.5.6CSS列表1.樣式類型list-style-typeCSS中的list-style-type屬性可以用于設置列表的標志樣式。該屬性在CSS2版本已有21種取值內(nèi)容，如表所示。屬性值解釋none無標記符號disclist-style-type屬性的默認值，樣式為實心圓點circle空心圓square實心方塊decimal阿拉伯數(shù)字（1，2，3，4，...等）decimal-leading-zero帶有0開頭的阿拉伯數(shù)字（01，02，03，04，...等）upper-roman大寫羅馬數(shù)字（I，II，III，IV...等）lower-roman小寫羅馬數(shù)字（i，ii，iii，iv...等）upper-alpha大寫英文字母（A，B，C，D...等）lower-alpha小寫英文字母（a，b，c，d...等）upper-latin大寫拉丁文字母（A，B，C，D...等）lower-latin小寫拉丁文字母（a，b，c，d...等）lower-greek小寫希臘字母（alpha，beta，gamma...等）hebrew傳統(tǒng)的希伯來編號方式armenian傳統(tǒng)的亞美尼亞編號方式georgian傳統(tǒng)的喬治亞編號方式cjk-ideographicW3C組織稱其為簡單的表意數(shù)字，經(jīng)測試在安裝有中文字體的系統(tǒng)上運行可顯示漢字（一，二，三，四...等）hiragana日語平假名（日本字母的草體字）的編號katakana日語片假名的編號hiragana-iroha日語平假名-伊呂波型的編號katakana-iroha日語片假名-伊呂波型的編號3.5.6CSS列表1.樣式類型list-style-type【例3-30】CSS屬性list-style-type的應用

3.5.6CSS列表2.樣式圖片list-style-imageCSS中的list-style-image屬性可以用于設置列表的標志圖標。標志圖標可以是來源于本地或者網(wǎng)絡的圖像文件。如果已使用list-style-image屬性聲明了列表的標志圖標，則不能同時使用list-style-type屬性聲明列表的標志類型，否則后者將無顯示效果。3.5.6CSS列表2.樣式圖片list-style-image【例3-31】CSS屬性font-image的簡單應用

3.5.6CSS列表3.樣式位置list-style-positionCSS中的list-style-position屬性用于定義列表標志的位置，有3種屬性值如表3-30所示。3.5.6CSS列表3.樣式位置list-style-position【例3-32】CSS屬性list-style-position的簡單應用

3.5.6CSS列表4.樣式簡寫list-styleCSS中的list-style屬性可以用于概括其它3種字體屬性，將相關(guān)屬性值匯總寫在同一行。當需要為同一個列表元素聲明多項列表屬性時可以使用list-style屬性進行簡寫。聲明順序如下：[list-style-type][list-style-position][list-style-image]屬性值之間用空格隔開，如果其中某個屬性沒有規(guī)定可以省略不寫。3.5.6CSS列表4.樣式簡寫list-style例如：上述代碼使用list-style屬性可以簡寫為：ul{list-style-type:circle;list-style-position:outside}ul{list-style:circleoutside}3.5.7CSS表格本節(jié)將介紹如何對網(wǎng)頁上的表格進行修飾。和CSS表格有關(guān)的屬性如表3-31所示。3.5.7CSS表格除以上5種屬性設置外，在CSS中一些通用屬性設置同樣也可以用于表格元素。例如字體顏色（color）、背景（background）、文本對齊（text-align）、邊框（border）、內(nèi)邊距（padding）、寬度（width）和高度（height）等，這里不再展開詳細說明。3.5.7CSS表格1.折疊邊框border-collapse在默認情況下，表格的邊框如果設置為實線則會顯示為雙層線條的樣式效果。CSS中的border-collapse屬性用于設置是否將表格的雙層邊框折疊為單一線條邊框，該屬性有3種屬性值如表3-32所示。3.5.7CSS表格1.折疊邊框border-collapse【例3-33】CSS屬性border-collapse的簡單應用

3.5.7CSS表格2.邊框距離border-spacingCSS中的border-spacing屬性用于定義表格中雙線邊框的分割距離，該屬性有3種屬性值如表3-33所示。3.5.7CSS表格2.邊框距離border-spacing【例3-34】CSS屬性border-spacing的簡單應用

3.5.7CSS表格3.標題位置caption-sideCSS中的caption-side屬性用于定義表格中標題的位置，有3種屬性值如表3-34所示。3.5.7CSS表格3.標題位置caption-side【例3-35】CSS屬性caption-side的簡單應用

3.5.7CSS表格4.空單元格empty-cellsCSS中的empty-cells屬性用于定義表格中空單元格邊框和背景的顯示方式。該屬性有3種屬性值，如表3-35所示。3.5.7CSS表格4.空單元格empty-cells【例3-36】CSS屬性empty-cells的簡單應用

3.5.7CSS表格5.表格布局table-layoutCSS中的table-layout屬性用于規(guī)定表格的布局方式，包括固定表格布局和根據(jù)內(nèi)容調(diào)整布局。該屬性有3種屬性值，如表3-36所示。3.5.7CSS表格5.表格布局table-layout【例3-37】CSS屬性table-layout的簡單應用

3.6CSS定位3.6.1絕對定位3.6.2相對定位3.6.3層疊效果3.6.4浮動3.6CSS定位CSS定位可以將HTML元素放置在頁面上指定的任意地方。CSS定位的原理是把頁面左上角的點定義為坐標為(0,0)的原點，然后以像素為單位將整個網(wǎng)頁構(gòu)建成一個坐標系統(tǒng)。其中x軸與數(shù)學坐標系方向相同，越往右數(shù)字越大；y軸與數(shù)學坐標系方向相反，越

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論