《網頁設計制作》項目55.1CSS列表屬性5.2CSS精靈技術5.3CSS復合選擇器5.4CSS超級鏈接屬性5.5CSS特性目

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

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：列表項目符號位于列表文本以內。outside：列表項目符號位于列表文本以外。<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列表樣式復合屬性list-style復合屬性list-style:列表項目符號

列表項目符號的位置

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

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

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

邊框屬性

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

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

用于選擇父元素第一個子標簽。:last-child

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

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

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

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

text-decoration:underline;/*鼠標懸停時出現下劃線*/}a:active{color:#F00;}

</style>未訪問和訪問后鼠標懸停鼠標點擊不動例如：5.4鏈接偽類控制超鏈接1、使用超鏈接的4種偽類時，對排列順序是有要求的。通常按照