《Web編程基礎(chǔ)》課件第3章 CSS樣式

目標(biāo)-1-了解CSS的特點(diǎn)及優(yōu)勢(shì)掌握CSS的基本語(yǔ)法及樣式規(guī)則掌握類選擇器和ID選擇器的定義方式掌握CSS選擇符的組合定義掌握CSS的繼承特性掌握樣式表的引用方式及優(yōu)先級(jí)掌握偽類及偽對(duì)象的使用方式掌握CSS樣式中常用的屬性設(shè)置CSS的概念CSS（CascadingStyleSheets，層疊樣式表）-2-單純使用HTML在排版和界面效果上具有局限性CSS解決了網(wǎng)頁(yè)界面排版的難題HTML的標(biāo)簽：定義網(wǎng)頁(yè)的內(nèi)容CSS：網(wǎng)頁(yè)內(nèi)容如何顯示樣式規(guī)則樣式規(guī)則樣式表由樣式規(guī)則組成，這些規(guī)則用于定義文檔的樣式，即告訴瀏覽器如何顯示文檔。樣式規(guī)則由三個(gè)部分構(gòu)成：選擇符（selector），屬性（properties）和屬性的取值（value）。

selector是選擇符，最普通的選擇符就是HTML標(biāo)簽的名稱。property1、property2和propertyN為屬性名；value是為對(duì)應(yīng)屬性名指定的值；每對(duì)屬性名/屬性值后一般要跟一個(gè)分號(hào)（括號(hào)內(nèi)只有一對(duì)名/值的情況除外）示例：3.1CSSBaseEG1.html-3-selector{property1：value;property2：value;......propertyN：value;}選擇符選擇符用于指定需要修飾的元素常用的選擇符主要有三類HTML選擇符ID選擇符類選擇符-4-HTML選擇符HTML選擇符

使用HTML標(biāo)簽作為選擇符，指定頁(yè)面中此類元素的樣式任何HTML標(biāo)簽都可以作為選擇符-5-P{text-indent:3em}Table{border:1pxsolidred}<p>標(biāo)簽的樣式<table>標(biāo)簽的樣式類選擇符類選擇符使用類選擇符，可以把相同的元素分類定義為不同的樣式示例：3.2ClassCssEG1.html也可以不指定HTML元素，直接用“.”加上類名稱，這樣可以使不同的元素共享同樣的樣式，提高了代碼的靈活度和復(fù)用度示例：3.3ClassCssEG2.html-6-selector.classname{property1：value;...}.classname{property1：value;...}ID選擇符ID選擇符

通過ID選擇符為某個(gè)單一元素定義單獨(dú)的樣式示例：3.4CSSBaseEG2.html-7-#IDName{property1：value;...}IDName指定元素的ID組合選擇符選擇符的組合當(dāng)有多個(gè)選擇符需要設(shè)置相同的屬性和屬性值時(shí)，可以用逗號(hào)將選擇符隔開進(jìn)行組合定義，即一次性設(shè)置多個(gè)選擇符的屬性和屬性值，這樣可以減少樣式重復(fù)定義示例：3.5SelectorGroupEG.html包含選擇符是另外一種形式的組合定義-8-selector1,selector2,...{property1：value;...}tablea{font-size:12px}table和a之間沒有通過逗號(hào)隔開，該樣式定義的是：在表格內(nèi)的鏈接的文字大小為12象素，而表格外的鏈接的文字仍為默認(rèn)大小樣式表的繼承樣式表的繼承是指內(nèi)部元素自動(dòng)具有外部元素的樣式示例：3.6inherEG.html-9-<div><p> ABCD</p></div><p>元素為<div>元素的內(nèi)部元素，所以文字“ABCD”將使用<div>上規(guī)定的樣式。當(dāng)內(nèi)部元素與外部元素的統(tǒng)一樣式不一致時(shí)，將采用內(nèi)部樣式使用樣式表-1CSS的使用方式有以下幾種：內(nèi)嵌樣式（InlineStyle）內(nèi)部樣式表（InternalStyleSheet）外部樣式表（ExternalStyleSheet）

內(nèi)嵌樣式內(nèi)嵌樣式是指將CSS語(yǔ)句混合在HTML標(biāo)簽中使用的方式，CSS語(yǔ)句只對(duì)其所在的標(biāo)簽有效，內(nèi)嵌樣式通過所在標(biāo)簽的style屬性聲明示例代碼如下：-10-<h1style="color:green;font-size:38px;font-family:impact">CSS樣式</h1>使用樣式表-2內(nèi)部樣式表

內(nèi)部樣式表是指在HTML的<style>標(biāo)簽中聲明樣式的方式。內(nèi)部樣式表通過<style>標(biāo)簽聲明，只對(duì)所在的網(wǎng)頁(yè)有效示例：3.1CSSBaseEG1.html外部樣式表外部樣式表是指將CSS樣式表保存成一個(gè)獨(dú)立的文件，然后將該文件引用到網(wǎng)頁(yè)中的方式。樣式表文件名采用后綴“css”示例：3.7EsscssEG.html樣式表引入的優(yōu)先級(jí)當(dāng)在同一個(gè)網(wǎng)頁(yè)中同時(shí)使用多種方式引入CSS樣式時(shí)，樣式采用的優(yōu)先級(jí)從高到低依次是內(nèi)嵌→內(nèi)部→外部→瀏覽器缺省-11-這種方式適合于多個(gè)網(wǎng)頁(yè)需要引用大量相同的CSS樣式的情況。偽類偽類偽類通過在原有的樣式選擇符后添加偽類名稱來(lái)定義selector:選擇符pseudo-class:偽類名稱例如：表示<a>元素在鼠標(biāo)經(jīng)過時(shí)使用的樣式-12-selector:pseudo-class{property1:value;...}偽類用于指定元素在某種狀態(tài)下的樣式a:hover{color:red}使用偽類錨標(biāo)簽的偽類錨標(biāo)簽有四種狀態(tài)的偽類，分別為未被訪問前、鼠標(biāo)懸停時(shí)、被用戶激活時(shí)（鼠標(biāo)已點(diǎn)擊但未釋放）、被訪問過后。示例：3.8PseudoClassEG.html結(jié)合類選擇符將錨偽類和類選擇符結(jié)合使用，可以在同一個(gè)頁(yè)面做出多組不同的鏈接效果示例：3.9PseudoAndClassEG.html偽類名說明link設(shè)置對(duì)象在未被訪問前的樣式hover設(shè)置對(duì)象在其鼠標(biāo)懸停時(shí)的樣式active設(shè)置對(duì)象在被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間）時(shí)的樣式visited設(shè)置對(duì)象在其鏈接地址已被訪問過時(shí)的樣式-13-偽對(duì)象偽對(duì)象與偽類的方式類似，偽對(duì)象通過對(duì)插入到文檔中的虛構(gòu)元素進(jìn)行觸發(fā)從而實(shí)現(xiàn)設(shè)定的樣式首行偽對(duì)象首行偽對(duì)象（first-line）設(shè)置對(duì)象內(nèi)的第一行的樣式示例：代碼3-10FirstLineEG.html首字母?jìng)螌?duì)象首字母?jìng)螌?duì)象（first-letter）設(shè)置對(duì)象內(nèi)第一個(gè)字母的樣式示例：代碼3-11FirstLetterEG.html-14-selector:first-line{property:value...}selector:first-letter{property:value...}偽對(duì)象用于設(shè)置元素某一部分的樣式CSS文本樣式屬性文本屬性文本屬性主要用于塊標(biāo)簽中文本的樣式設(shè)置，常用的屬性有縮進(jìn)、對(duì)齊方式、行高、文字和字母間隔、文本轉(zhuǎn)換和文本修飾等。示例：3.12TextCssEG.html文本屬性功能取值方式text-indent實(shí)現(xiàn)文本的縮進(jìn)長(zhǎng)度（length）：可以用絕對(duì)單位（cm，mm，in，pt，pc）或者相對(duì)單位（em，ex，px）；百分比（%）：相對(duì)于父標(biāo)簽寬度的百分比text-align設(shè)置文本的對(duì)齊方式left：左對(duì)齊；center：居中對(duì)齊；right：右對(duì)齊；justify：兩端對(duì)齊line-height設(shè)置行高數(shù)字或百分比，具體可參考文本縮進(jìn)的取值方式word-spacing文字間隔，用來(lái)修改段落中文字之間的距離缺省值為0。word-spacing的值可以為負(fù)數(shù)。當(dāng)word-spacing的值為正數(shù)時(shí)，文字之間的間隔會(huì)增大，反之，word-spacing的值為負(fù)數(shù)時(shí)，文字間距就會(huì)減少letter-spacing字母間隔，控制字母或字符之間的間隔取值同文字間隔類似text-transform文本轉(zhuǎn)換，主要是對(duì)文本中字母大小寫的轉(zhuǎn)換uppercase：將整個(gè)文本變?yōu)榇髮?；lowercase：將整個(gè)文本變?yōu)樾?；capitalize：將整個(gè)文本的每個(gè)文字的首字母大寫text-decoration文本修飾，修飾強(qiáng)調(diào)段落中一些主要的文字none、underline（下劃線）、overline（上劃線）、line-through（刪除線）和blink（閃爍）-15-CSS文字樣式屬性文字屬性CSS中通過一系列的文字屬性來(lái)設(shè)置網(wǎng)頁(yè)中文字的顯示效果，主要包括文字字體、文字加粗、字號(hào)、文字樣式。示例：3.13FontCssEG.html文字屬性功能取值方式font-family設(shè)置文字字體文字字體取值可以為：宋體、ncursive、fantasy、serif等多種字體font-weight文字加粗normal：正常字體；bold：粗體；bolder：特粗體；lighter：細(xì)體font-size文字字號(hào)absolute-size：根據(jù)對(duì)象字體進(jìn)行調(diào)節(jié)；relative-size：相對(duì)于父對(duì)像中字體尺寸進(jìn)行相對(duì)調(diào)節(jié)；length：百分比。由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值，不可為負(fù)值。其百分比取值是基于父標(biāo)簽中字體的尺寸font-style文字樣式normal：正常的字體；italic：斜體；oblique：傾斜的字體-16-CSS背景樣式屬性背景屬性CSS中通過一系列的文字屬性來(lái)設(shè)置網(wǎng)頁(yè)中文字的顯示效果，主要包括文字字體、文字加粗、字號(hào)、文字樣式。示例：3.14BackGroundEG.html背景屬性功能取值方式background-color設(shè)置對(duì)象的背景顏色屬性的值為有效的色彩數(shù)值background-image設(shè)置背景圖片可以通過為url指定值來(lái)設(shè)定絕對(duì)或相對(duì)路徑指定網(wǎng)頁(yè)的背景圖像background-repeat背景重復(fù)，設(shè)置一個(gè)指定的背景圖象如何被重復(fù)repeat：背景圖像平鋪（有橫向和縱向兩種取值：repeat-x：圖象橫向重復(fù)；repeat-y：圖象縱向重復(fù)）；norepeat：背景圖像不平鋪background-attachment背景附加，設(shè)置指定的背景圖像是跟隨內(nèi)容滾動(dòng)，還是固定不動(dòng)scroll：背景圖像是隨內(nèi)容滾動(dòng)；fixed：背景圖像固定即內(nèi)容滾動(dòng)圖像不動(dòng)background-position背景位置，確定背景的水平和垂直位置左對(duì)齊（left）、右對(duì)齊（right）、頂部（top）、底部（bottom）和值（自定義背景的起點(diǎn)位置，可對(duì)背景的位置做出精確的控制）background該屬性是復(fù)合屬性即上面幾個(gè)屬性的隨意組合，它用于設(shè)定對(duì)象的背景樣式該屬性的取值實(shí)際上對(duì)應(yīng)上面幾個(gè)具體屬性的取值-17-CSS定位樣式屬性定位屬性定位屬性主要從定位方式、層疊順序、與父標(biāo)簽的相對(duì)位置等三個(gè)方面來(lái)設(shè)置。示例：3.15PositionCssEG.html定位屬性功能取值方式position定位方式，設(shè)置對(duì)象的是否定位，以及定位的方式static：無(wú)特殊定位；relative：對(duì)象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置；absolute：將對(duì)象從文檔流中拖出，使用left，right，top，bottom等屬性進(jìn)行絕對(duì)定位z-index設(shè)置對(duì)象的層疊順序auto：遵循其父對(duì)象的定位；自定義數(shù)值：無(wú)單位的整數(shù)值，可為負(fù)值top、right、bottom、left父對(duì)象的相對(duì)位置auto：無(wú)特殊定位，自定義數(shù)值：由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值，或者百分?jǐn)?shù)。必須定義position屬性值為absolute或者relative此取值方可生效-18-如果兩個(gè)絕對(duì)定位對(duì)象的z-index具有同樣的值，那么將依據(jù)它們?cè)贖TML文檔中聲明的順序來(lái)決定其層疊順序。CSS邊框樣式屬性邊框?qū)傩赃吙驅(qū)傩杂脕?lái)設(shè)置對(duì)象邊框的顏色、樣式和寬度。邊框顏色用于設(shè)定邊框的顏色（border-color）。顏色的設(shè)置有4個(gè)參數(shù)，根據(jù)賦值個(gè)數(shù)的不同，會(huì)有以下幾種情況：如果在設(shè)定顏色時(shí)提供四個(gè)顏色參數(shù)，將按上

右

下

左的順序作用于四個(gè)邊框。如果只提供一個(gè)顏色參數(shù)，則應(yīng)用于四個(gè)邊框。如果提供兩個(gè)參數(shù)，第一個(gè)用于上、下邊框，第二個(gè)用于左、右邊框。如果提供三個(gè)參數(shù)，第一個(gè)用于上邊框，第二個(gè)用于左、右邊框，第三個(gè)用于下邊框。邊框樣式用于設(shè)定邊框的樣式（border-style）。邊框樣式同樣有4個(gè)參數(shù)，賦值方式與邊框顏色相同。-19-CSS樣式屬性-6邊框?qū)挾扔糜谠O(shè)定邊框的寬度（border-wi