《網(wǎng)頁設(shè)計(jì)制作》課件-項(xiàng)目5

《網(wǎng)頁設(shè)計(jì)制作》項(xiàng)目55.1CSS列表屬性5.2CSS精靈技術(shù)5.3CSS復(fù)合選擇器5.4CSS超級(jí)鏈接屬性5.5CSS特性目

錄5.1CSS控制列表樣式建議定義無序或有序列表時(shí)，可以通過標(biāo)簽的屬性控制列表的項(xiàng)目符號(hào)，但是這種方式實(shí)現(xiàn)的效果并不理想，因此需要使用CSS中的列表樣式屬性。list-style-type屬性list-style-image屬性list-style-position屬性list-style-type屬性用于控制無序和有序列表的項(xiàng)目符號(hào)。list-style-image屬性可以為各個(gè)列表項(xiàng)設(shè)置項(xiàng)目圖像，使列表的樣式更加美觀。list-style-position屬性用于控制列表項(xiàng)目符號(hào)的位置。5.1CSS控制列表樣式5.1CSS控制列表樣式list-style-type屬性list-style-image屬性list-style-position屬性列表類型屬性值顯示效果無序列表（ul）disc●circle○square■有序列表（ol）decimal阿拉伯?dāng)?shù)字1、2、3......upper-alpha大寫英文字母A、B、C......lower-alpha小寫英文字母a、b、c......upper-roman大寫羅馬數(shù)字I、II、III......lower-roman小寫羅馬數(shù)字i、ii、iii......<ul>、<ol>公共屬性none不顯示任何符號(hào)list-style-type的屬性值及顯示效果5.1CSS控制列表樣式因?yàn)楦鱾€(gè)瀏覽器對(duì)list-style-type屬性的解析不同。因此，在實(shí)際網(wǎng)頁制作過程中不推薦使用

list-style-type屬性。list-style-type屬性list-style-image屬性list-style-position屬性5.1CSS控制列表樣式基本格式ul{list-style-image:url(圖片路徑);}list-style-type屬性list-style-image屬性list-style-position屬性例如：<styletype="text/css">ul{list-style-image:url(images/1.png);}</style>5.1CSS控制列表樣式list-style-type屬性list-style-image屬性list-style-position屬性例如：list-style-position屬性取值inside：列表項(xiàng)目符號(hào)位于列表文本以內(nèi)。outside：列表項(xiàng)目符號(hào)位于列表文本以外。<styletype="text/css">.in{list-style-position:inside;}.out{list-style-psition:outside;}li{border:1pxsolid#CCC;}</style>5.1CSS控制列表樣式list-style-image屬性2list-style-position屬性3list-style-type屬性1列表樣式復(fù)合屬性list-style復(fù)合屬性list-style:列表項(xiàng)目符號(hào)

列表項(xiàng)目符號(hào)的位置

列表項(xiàng)目圖像;使用復(fù)合屬性list-style時(shí)，通常按上面語法格式中的順序書寫，各個(gè)樣式之間以空格隔開，不需要的樣式可以省略。在實(shí)際網(wǎng)頁制作過程中，為了更高效地控制列表項(xiàng)目符號(hào)，通常將list-style的屬性值定義為none，然后通過為<li>設(shè)置背景圖像的方式實(shí)現(xiàn)不同的列表項(xiàng)目符號(hào)。5.1CSS列表屬性5.2CSS精靈技術(shù)5.3CSS復(fù)合選擇器5.4CSS超級(jí)鏈接屬性5.5CSS特性目

錄5.2CSS精靈技術(shù)什么是CSS精靈技術(shù)？CSS精靈（也稱CSSSprites），是一種處理網(wǎng)頁背景圖像的方式。在網(wǎng)頁設(shè)計(jì)中，CSS精靈會(huì)將一個(gè)頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應(yīng)用于網(wǎng)頁，當(dāng)用戶訪問該頁面時(shí)，只需向服務(wù)器發(fā)送一次請(qǐng)求，網(wǎng)頁中的背景圖像即可全部展示出來。5.2CSS精靈技術(shù)CSS精靈技術(shù)需求是什么？網(wǎng)頁中的小圖片大家隨處可見上網(wǎng)導(dǎo)航信息查詢網(wǎng)上預(yù)訂5.2CSS精靈技術(shù)5.2CSS精靈技術(shù)當(dāng)用戶訪問一個(gè)網(wǎng)站時(shí)，網(wǎng)頁上的每張圖像都要經(jīng)過一次請(qǐng)求才能展現(xiàn)給用戶。然而，一個(gè)網(wǎng)頁中往往會(huì)應(yīng)用很多小的背景圖像作為修飾,服務(wù)器就會(huì)頻繁地接受和發(fā)送請(qǐng)求，這將大大降低頁面的加載速度。CSS精靈技術(shù)的需求5.2CSS精靈技術(shù)CSS精靈技術(shù)的工作原理只需發(fā)送一次請(qǐng)求將頁面內(nèi)所有零星圖像制作成一張精靈圖使用CSS定位屬性5.2CSS精靈技術(shù)如何制作一個(gè)簡單的精靈圖然后，通過使用CSS的background-position屬性進(jìn)行背景的精確定位注意控制圖片的坐標(biāo)位置5.2CSS精靈技術(shù)精靈圖5.1CSS列表屬性5.2CSS精靈技術(shù)5.3CSS復(fù)合選擇器5.4CSS超級(jí)鏈接屬性5.5CSS特性目

錄5.3CSS復(fù)合選擇器CSS層疊性和繼承性所謂層疊性是指多種CSS樣式的疊加。層疊性所謂繼承性是指書寫CSS樣式表時(shí)，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號(hào)。繼承性5.3CSS復(fù)合選擇器CSS層疊性和繼承性并不是所有的CSS屬性都可以繼承，例如，下面的屬性就不具有繼承性：

邊框?qū)傩?/p>

內(nèi)/外邊距屬性背景屬性定位屬性布局屬性元素寬高屬性5.3CSS復(fù)合選擇器CSS優(yōu)先級(jí)網(wǎng)頁制作時(shí)，對(duì)統(tǒng)一元素，應(yīng)用不同的背景，會(huì)出現(xiàn)什么情況？思考background-color:pink;background-color:blue;background-color:red;【結(jié)論】定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問題。5.3CSS復(fù)合選擇器CSS優(yōu)先級(jí)來看一個(gè)例子：<pclass="father"id="header"> <strongclass="blue">文本的顏色</strong></p>pstrong{color:black}/*權(quán)重為:1+1*/strong.blue{color:green;}/*權(quán)重為:1+10*/.fatherstrong{color:yellow}/*權(quán)重為:10+1*/p.fatherstrong{color:orange;}/*權(quán)重為:1+10+1*/p.father.blue{color:gold;}/*權(quán)重為:1+10+10*/#headerstrong{color:pink;}/*權(quán)重為:100+1*/#headerstrong.blue{color:red;}/*權(quán)重為:100+1+10*/對(duì)應(yīng)的權(quán)重值：5.3CSS復(fù)合選擇器CSS優(yōu)先級(jí)繼承樣式的權(quán)重為0。行內(nèi)樣式優(yōu)先。權(quán)重相同時(shí)，CSS遵循就近原則。CSS定義了一個(gè)!important命令，該命令被賦予最大的優(yōu)先級(jí)。在考慮權(quán)重時(shí)，初學(xué)者還需要注意一些特殊的情況，具體如下：CSS3是CSS的最新版本，在CSS3中增加了許多新的選擇器。運(yùn)用這些選擇器可以簡化網(wǎng)頁代碼的書寫，讓穩(wěn)當(dāng)?shù)慕Y(jié)構(gòu)更加簡單。CSS3新增的選擇器主要分類屬性選擇器、關(guān)系選擇器、結(jié)構(gòu)化偽類選擇器、偽元素選擇器4類CSS3有哪些新增選擇器？5.3CSS復(fù)合選擇器5.3CSS復(fù)合選擇器屬性選擇器屬性選擇器可以根據(jù)網(wǎng)頁標(biāo)簽的屬性及屬性值來選擇標(biāo)簽。屬性選擇器一般是一個(gè)標(biāo)簽后緊跟中括號(hào)“[]”，中括號(hào)內(nèi)部是屬性或者屬性表達(dá)式，知識(shí)點(diǎn)講解5.3CSS復(fù)合選擇器屬性選擇器屬性選擇器舉例說明E[att^=value]div[id^=section]表示匹配包含id屬性，且id屬性值是以“section”字符串開頭的div標(biāo)簽。E[att$=value]div[id$=section]表示匹配包含id屬性，且id屬性值是以“section”字符串結(jié)尾的div標(biāo)簽。E[att*=value]div[id*=section]表示匹配包含id屬性，且id屬性值包含“section”字符串的div標(biāo)簽。5.3CSS復(fù)合選擇器關(guān)系選擇器CSS3中的關(guān)系選擇器主要包括子代選擇器和兄弟選擇器，其中子代選擇器由符號(hào)“>”連接，兄弟選擇器由符號(hào)“+”和“~”連接知識(shí)點(diǎn)講解關(guān)系選擇器舉例說明子代選擇器h1>strong表示選擇嵌套在h1標(biāo)簽的子標(biāo)簽strong。臨近兄弟選擇器h2+p表示選擇h2標(biāo)簽后緊鄰的第一個(gè)兄弟標(biāo)簽p。普通兄弟選擇器p~h2表示選擇p標(biāo)簽所有的h2兄弟標(biāo)簽。5.3CSS復(fù)合選擇器結(jié)構(gòu)化偽類選擇器結(jié)構(gòu)化偽類選擇器可以減少文檔內(nèi)class屬性和id屬性的定義，使文檔變得更加簡潔。知識(shí)點(diǎn)講解結(jié)構(gòu)化偽類選擇器舉例說明:root

用于匹配文檔根標(biāo)簽，使用“:root選擇器”定義的樣式，對(duì)所有頁面標(biāo)簽都生效。:notbody*:not(h2)用于排除body結(jié)構(gòu)中的子結(jié)構(gòu)標(biāo)簽h2。:only-childli:only-child用于匹配屬于某父標(biāo)簽的唯一子標(biāo)簽（li），也就是說某個(gè)父標(biāo)簽僅有一個(gè)子標(biāo)簽（li）。:first-child

用于選擇父元素第一個(gè)子標(biāo)簽。:last-child

用于選擇父元素最后一個(gè)子標(biāo)簽。:nth-child(n)p:nth-child(2)用于選擇父元素第二個(gè)子標(biāo)簽。:nth-last-child(n)p:nth-last-child(2)用于選擇父元素倒數(shù)第二個(gè)子標(biāo)簽。:nth-of-type(n)h2:nth-of-type(odd)用于選擇所有h2標(biāo)簽中位于奇數(shù)行的標(biāo)簽。:nth-last-of-type(n)p:nth-last-of-type(2)用于選擇倒數(shù)第2個(gè)p標(biāo)簽:empty

用來選擇沒有子標(biāo)簽或文本內(nèi)容為空的所有標(biāo)簽。5.3CSS復(fù)合選擇器偽元素選擇器偽元素選擇器一般是一個(gè)標(biāo)簽后面緊跟英文冒號(hào)“:”，英文冒號(hào)后是偽元素名。知識(shí)點(diǎn)講解5.3CSS復(fù)合選擇器偽元素選擇器偽元素選擇器舉例說明:beforep:before表示在p標(biāo)簽的內(nèi)容前面插入內(nèi)容。:afterp:after表示在p標(biāo)簽的內(nèi)容后面插入內(nèi)容。5.1CSS列表屬性5.2CSS精靈技術(shù)5.3CSS復(fù)合選擇器5.4CSS超級(jí)鏈接屬性5.5CSS特性目

錄5.4鏈接偽類控制超鏈接在CSS中通過鏈接偽類可以實(shí)現(xiàn)不同的鏈接狀態(tài)定義超鏈接時(shí)，為了提高用戶體驗(yàn)，經(jīng)常需要為超鏈接指定不同的狀態(tài)，使得超鏈接在點(diǎn)擊前、點(diǎn)擊后和鼠標(biāo)懸停時(shí)的樣式不同。5.4鏈接偽類控制超鏈接什么是偽類？5.4鏈接偽類控制超鏈接偽類并不是真正意義上的類，它的名稱是由系統(tǒng)定義的，通常由標(biāo)簽名、類名或id名加“：”構(gòu)成。5.4鏈接偽類控制超鏈接超鏈接標(biāo)簽<a>的偽類含義a:link{CSS樣式規(guī)則;}未訪問時(shí)超鏈接的狀態(tài)a:visited{CSS樣式規(guī)則;}訪問后超鏈接的狀態(tài)a:hover{CSS樣式規(guī)則;}鼠標(biāo)經(jīng)過、懸停時(shí)超鏈接的狀態(tài)a:active{CSS樣式規(guī)則;}鼠標(biāo)點(diǎn)擊不動(dòng)時(shí)超鏈接的狀態(tài)超鏈接標(biāo)簽<a>的偽類5.4鏈接偽類控制超鏈接<styletype="text/css">a:link,a:visited{ color:#FC0;

text-decoration:none;/*清除超鏈接默認(rèn)的下劃線*/ margin-right:20px;}a:hover{ color:#0F0;

text-decoration:underline;/*鼠標(biāo)懸停時(shí)出現(xiàn)下劃線*/}a:active{color:#F00;}

</style>未訪問和訪問后鼠標(biāo)懸停鼠標(biāo)點(diǎn)擊不動(dòng)例如：5.4鏈接偽類控制超鏈接1、使用超鏈接的4種偽類時(shí)，對(duì)排列順序是有要求的。通常按照