《網(wǎng)頁設計制作》課件（上）

《網(wǎng)頁設計制作》項目1

1.1圖像標簽1.2超級鏈接標簽1.3列表標簽目

錄【任務目標】1.

掌握圖像標簽的寫法1.熟悉圖像格式及用法3.

了解圖像存儲方法4.

掌握圖像路徑原理1.1圖像標簽1.1.1圖像格式1.1.1圖像格式網(wǎng)頁中常用圖像格式及用途如下圖像格式即圖像文件存放的格式，通常有JPEG、TIFF、RAW、BMP、GIF、PNG等圖像格式特點用途是否透明是否動畫JPG/JPEG通過有損壓縮來減少圖片的大小使用真彩色或平滑過渡式的照片和圖片否否GIF通過無損壓縮來減少圖片大小，最多只能支持256色線條圖（如最多含有256色）的剪貼畫以及使用大塊純色的圖片是是PNG無損壓縮來減少圖片大小，保留圖片中的透明區(qū)域，文件略大，有的Web瀏覽器不支持任何類型，任何顏色深度的圖片是是小圖片一般使用GIF或PNG-8，半透明圖一般使用PNG-24，照片等色彩豐富大圖一般使用JPG。1.1.2圖片標簽1.1.2圖片標簽圖片標簽及常用屬性——單標簽<imgsrc=""width=""height=""alt=""border=""

align=""

vspace=""

hspace=""title=""/>屬性用途src圖片路徑，站內(nèi)圖片一般放在img文件夾內(nèi)width圖片寬度，可以修改，但如果任意改大，或者不等比修改，會讓圖片變形height圖片高度，與寬度屬性類似alt圖片文字描述，在圖片不能顯示時會以文字形式描述圖片border圖片邊框，設置圖片邊框及寬度，顏色默認為黑色，需要使用CSS才能修改邊框顏色align圖片對齊，調(diào)整圖像位置vspace垂直邊距，圖片與其他內(nèi)容垂直方向距離hspace水平邊距，圖片與其他內(nèi)容水平方向距離title提示文字，鼠標懸停在圖片上時的提示文字1.1.2圖片標簽舉例：代碼效果如下圖圖片路徑圖片寬度（等比修改尺寸）文字描述左對齊垂直邊距5像素水平邊距5像素1.1.３圖片路徑1.1.3圖片路徑一、路徑分類絕對路徑：目錄（域名）的文件的完整路徑。目錄路徑：“D:\網(wǎng)頁設計制作\第二章\img\logo.gif”完整的網(wǎng)絡地址：。相對路徑：HTML網(wǎng)頁文件與目標文件（圖片或者其他文件）層級關(guān)系。注意：站內(nèi)圖片路徑一般使用相對路徑。1.1.3圖片路徑二、相對路徑的設置分類圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<imgsrc=“l(fā)ogo.gif”/>。圖像文件位于html文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如<imgsrc="img/img01/logo.gif"/>。圖像文件位于html文件的上一級文件夾：在文件名之前加入“../”，如果是上兩級，則需要使用“../../”，以此類推，如<imgsrc="../logo.gif"/>。1.1圖像標簽1.2超級鏈接標簽1.3列表標簽目

錄【任務目標】1.

掌握圖像標簽的寫法1.熟悉圖像格式及用法3.

了解圖像存儲方法4.

掌握圖像路徑原理1.1圖像標簽1.1.1圖像格式1.1.1圖像格式網(wǎng)頁中常用圖像格式及用途如下圖像格式即圖像文件存放的格式，通常有JPEG、TIFF、RAW、BMP、GIF、PNG等圖像格式特點用途是否透明是否動畫JPG/JPEG通過有損壓縮來減少圖片的大小使用真彩色或平滑過渡式的照片和圖片否否GIF通過無損壓縮來減少圖片大小，最多只能支持256色線條圖（如最多含有256色）的剪貼畫以及使用大塊純色的圖片是是PNG無損壓縮來減少圖片大小，保留圖片中的透明區(qū)域，文件略大，有的Web瀏覽器不支持任何類型，任何顏色深度的圖片是是小圖片一般使用GIF或PNG-8，半透明圖一般使用PNG-24，照片等色彩豐富大圖一般使用JPG。1.1.2圖片標簽1.1.2圖片標簽圖片標簽及常用屬性——單標簽<imgsrc=""width=""height=""alt=""border=""

align=""

vspace=""

hspace=""title=""/>屬性用途src圖片路徑，站內(nèi)圖片一般放在img文件夾內(nèi)width圖片寬度，可以修改，但如果任意改大，或者不等比修改，會讓圖片變形height圖片高度，與寬度屬性類似alt圖片文字描述，在圖片不能顯示時會以文字形式描述圖片border圖片邊框，設置圖片邊框及寬度，顏色默認為黑色，需要使用CSS才能修改邊框顏色align圖片對齊，調(diào)整圖像位置vspace垂直邊距，圖片與其他內(nèi)容垂直方向距離hspace水平邊距，圖片與其他內(nèi)容水平方向距離title提示文字，鼠標懸停在圖片上時的提示文字1.1.2圖片標簽舉例：代碼效果如下圖圖片路徑圖片寬度（等比修改尺寸）文字描述左對齊垂直邊距5像素水平邊距5像素1.1.３圖片路徑1.1.3圖片路徑一、路徑分類絕對路徑：目錄（域名）的文件的完整路徑。目錄路徑：“D:\網(wǎng)頁設計制作\第二章\img\logo.gif”完整的網(wǎng)絡地址：。相對路徑：HTML網(wǎng)頁文件與目標文件（圖片或者其他文件）層級關(guān)系。注意：站內(nèi)圖片路徑一般使用相對路徑。1.1.3圖片路徑二、相對路徑的設置分類圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<imgsrc=“l(fā)ogo.gif”/>。圖像文件位于html文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如<imgsrc="img/img01/logo.gif"/>。圖像文件位于html文件的上一級文件夾：在文件名之前加入“../”，如果是上兩級，則需要使用“../../”，以此類推，如<imgsrc="../logo.gif"/>。1.1圖像標簽1.2超級鏈接標簽1.3列表標簽目

錄【任務目標】1.

掌握超級鏈接標簽的寫法1.掌握超級鏈接href屬性3.

掌握超級鏈接target屬性4.

掌握路徑的含義及用法1.2超級鏈接標簽1.2超鏈接標簽一個網(wǎng)站通常由多個頁面構(gòu)成，進入網(wǎng)站時首先看到的是其首頁。列表頁內(nèi)容頁……首頁通過超鏈接，實現(xiàn)頁面之間的跳轉(zhuǎn)1.2超鏈接標簽創(chuàng)建超鏈接如何創(chuàng)建超鏈接？在HTML中創(chuàng)建超鏈接非常簡單，只需用<a></a>標簽環(huán)繞需要被鏈接的對象即可。<ahref="跳轉(zhuǎn)目標"target="目標窗口的彈出方式">

文本或圖像</a>基本語法格式1.2超鏈接標簽對超鏈接標簽的常用屬性解釋如下：href用于指定鏈接目標的url地址，當為<a>標簽應用href屬性時，它就具有了超鏈接的功能。target用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認值，意為在原窗口中打開，_blank為在新窗口中打開。創(chuàng)建超鏈接1.2超鏈接標簽多學一招：圖像超鏈接出現(xiàn)邊框解決辦法創(chuàng)建圖像超鏈接時，在某些瀏覽中，圖像會自動添加邊框效果，影響頁面的美觀。去掉邊框最直接的方法是將邊框設置為0【總結(jié)】<ahref="#"><imgsrc="圖像URL"border="0"/></a>1.2超鏈接標簽錨點鏈接如果網(wǎng)頁內(nèi)容較多，頁面過長。瀏覽網(wǎng)頁時就需要不斷地拖動滾動條，來查看所需要的內(nèi)容。效率較低不方便1.2超鏈接標簽為了提高信息的檢索速度HTML語言提供了一種特殊的鏈接——錨點鏈接，通過創(chuàng)建錨點鏈接，用戶能夠快速定位到目標內(nèi)容。錨點鏈接1.2超鏈接標簽創(chuàng)建錨點鏈接分為兩步1使用“<ahref="#id名">鏈接文本</a>”創(chuàng)建鏈接文本2使用相應的id名標注跳轉(zhuǎn)目標的位置錨點鏈接《網(wǎng)頁設計制作》項目22.1引入CSS2.2CSS選擇器2.3CSS字體樣式屬性2.4CSS文本外觀屬性2.5CSS背景屬性2.6CSS邊框?qū)傩阅?/p>

錄【任務目標】1.

了解CSS基本概念2.

掌握CSS的作用2.掌握CSS規(guī)則4.

掌握CSS引入方法2.1引入CSS2.1引入CSS什么是CSS什么是CSS？什么是CSSCSS英文全稱為“CascadingStyleSheet”，中文譯為“層疊樣式表”。CSS以HTML為基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設置不同的樣式。2.1引入CSSCSS3是CSS技術(shù)的升級版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案。CSS3的語法是建立在CSS原始版本基礎上的，因此舊版本的CSS屬性在CSS3版本中依然適用。什么是CSS32.1引入CSS2.1引入CSSCSS樣式規(guī)則CSS樣式的書寫規(guī)則是什么？CSS樣式修飾的網(wǎng)頁大家隨處可見網(wǎng)上購物熱門游戲熱點新聞2.1引入CSSCSS樣式規(guī)則選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}在上面的樣式規(guī)則中，選擇器用于指定CSS樣式作用的HTML對象，花括號內(nèi)是對該對象設置的具體樣式。其中，屬性和屬性值以“鍵值對”的形式出現(xiàn)，用英文“:”連接，多個“鍵值對”之間用英文“;”進行區(qū)分。2.1引入CSS引入CSS樣式表引入CSS樣式表的方式有哪些？2.1引入CSS行內(nèi)式也稱為內(nèi)聯(lián)樣式，是通過標簽的style屬性來設置元素的樣式，其基本語法格式如下:行內(nèi)式行內(nèi)式內(nèi)嵌式鏈入式<標簽名style="屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;">內(nèi)容</標簽名>2.1引入CSS內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的<head>頭部標簽中，并且用<style>標簽定義，其基本語法格式如下:內(nèi)嵌式行內(nèi)式內(nèi)嵌式鏈入式<head><styletype="text/css">選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}</style></head>2.1引入CSS鏈入式是將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中，通過<link/>標簽將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下:鏈入式行內(nèi)式內(nèi)嵌式鏈入式<head><linkhref="CSS文件的路徑"type="text/css"rel="stylesheet"/></head>2.1引入CSS2.2CSS選擇器2.3CSS字體樣式屬性2.4CSS文本外觀屬性2.5CSS背景屬性2.6CSS邊框?qū)傩阅?/p>

錄【任務目標】1.

了解CSS選擇器的含義2.

掌握CSS選擇器的類別2.掌握CSS選擇器的用法2.2CSS選擇器2.2CSS選擇器標簽選擇器是指用HTML標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統(tǒng)一的CSS樣式。其基本語法格式如下：標簽名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}標簽選擇器標簽選擇器通配符選擇器類選擇器id選擇器2.2CSS選擇器類選擇器使用“.”（英文點號）進行標識，后面緊跟類名，其基本語法格式如下：類選擇器標簽選擇器類選擇器通配符選擇器id選擇器.類名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}2.2CSS選擇器通配符選擇器id選擇器使用“#”進行標識，后面緊跟id名，其基本語法格式如下：#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}id選擇器標簽選擇器類選擇器id選擇器2.2CSS選擇器通配符選擇器通配符選擇器用“*”號表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：通配符選擇器標簽選擇器類選擇器id選擇器*{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}2.1引入CSS2.2CSS選擇器2.3CSS字體樣式屬性2.4CSS文本外觀屬性2.5CSS背景屬性2.6CSS邊框?qū)傩阅?/p>

錄學習HTML時，可以使用文本樣式標簽及其屬性控制文本的顯示樣式，但是這種方式繁瑣且不利于代碼的共享和移植。為此，CSS提供了相應的文本設置屬性。為什么使用CSS文本樣式屬性？2.3CSS字體樣式屬性字體樣式屬性2.3CSS字體樣式屬性1font-size屬性用于設置字號。2font-family屬性用于設置字體。3font-weight屬性用于定義字體的粗細。4

font-style屬性用于定義字體風格。5

font綜合屬性用于綜合設置字體樣式。6@font-face屬性是CSS3的新增屬性，用于定義服務器字體。7word-wrap屬性用于實現(xiàn)長單詞和URL地址的自動換行。2.3CSS字體樣式屬性font-size屬性font-size屬性用于設置字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位，具體如下表所示：font-size屬性相對長度單位說明em相對于當前對象內(nèi)文本的字體尺寸px像素，最常用，推薦使用絕對長度單位說明in英寸cm厘米mm毫米pt點2.3CSS字體樣式屬性font-family屬性font-family屬性用于設置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等。font-family屬性p{font-family:"微軟雅黑";}例如將網(wǎng)頁中所有段落文本的字體設置為微軟雅黑，可以使用如下CSS樣式代碼：2.3CSS字體樣式屬性font-weight屬性font-weight屬性用于定義字體的粗細，其可用屬性值如下表所示：font-weight屬性值描述normal默認值。定義標準的字符。bold定義粗體字符。bolder定義更粗的字符。lighter定義更細的字符。100~900（100的整數(shù)倍）定義由細到粗的字符。其中400等同于normal，700等同于bold，值越大字體越粗。2.3CSS字體樣式屬性font-style屬性font-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：font-style屬性normal：默認值，瀏覽器會顯示標準的字體樣式;italic：瀏覽器會顯示斜體的字體樣式;oblique：瀏覽器會顯示傾斜的字體樣式;2.3CSS字體樣式屬性font綜合屬性font屬性用于對字體樣式進行綜合設置，其基本語法格式如下：font屬性選擇器{font:font-stylefont-variantfont-weightfont-size/line-heightfont-family;}2.3CSS字體樣式屬性@font-face屬性@font-face屬性是CSS3的新增屬性，用于定義服務器字體。通過@font-face屬性，開發(fā)者可以在用戶計算機未安裝字體時，使用任何喜歡的字體。@font-face屬性@font-face{ font-family:字體名稱; src:字體路徑; }2.3CSS字體樣式屬性word-wrap:屬性word-wrap屬性用于實現(xiàn)長單詞和URL地址的自動換行。word-wrap:屬性選擇器{word-wrap:屬性值;}normal：只在允許的斷字點換行（瀏覽器保持默認處理）。break-word：在長單詞或URL地址內(nèi)部進行換行。2.1引入CSS2.2CSS選擇器2.3CSS字體樣式屬性2.4CSS文本外觀屬性2.5CSS背景屬性2.6CSS邊框?qū)傩阅?/p>

錄2.4CSS文本外觀屬性文本外觀屬性text-transformtext-decorationtext-indentwhite-spacecolorletter-spacingword-spacingline-heighttext-align2.4CSS文本外觀屬性文本外觀屬性colorletter-spacingword-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-aligncolor屬性用于定義文本的顏色，其取值方式有如下3種：預定義的顏色值，如red，green，blue等。十六進制，如#FF0000，#FF6600，#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。2.4CSS文本外觀屬性文本外觀屬性colorletter-spacingword-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-alignletter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白。letter-spacing屬性，其屬性值可為不同單位的數(shù)值，允許使用負值，默認為normal。color2.4CSS文本外觀屬性文本外觀屬性colorletter-spacingword-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-alignword-spacing屬性用于定義英文單詞之間的間距，對中文字符無效。word-spacing屬性用于定義英文單詞之間的間距，和letter-spacing一樣，其屬性值可為不同單位的數(shù)值，允許使用負值，默認為normal。color2.4CSS文本外觀屬性文本外觀屬性colorletter-spacingword-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-alignline-height屬性用于設置行間距，所謂行間距就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實際工作中使用最多的是像素px。color2.4CSS文本外觀屬性文本外觀屬性colorletter-spacingword-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-aligntext-transform屬性用于控制英文字符的大小寫。其可用屬性值如下：none：不轉(zhuǎn)換（默認值）。capitalize：首字母大寫。uppercase：全部字符轉(zhuǎn)換為大寫。lowercase：全部字符轉(zhuǎn)換為小寫。color2.4CSS文本外觀屬性文本外觀屬性colorletter-spacingword-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-aligntext-decoration屬性用于設置文本的下劃線，上劃線，刪除線等裝飾效果。其可用屬性值如下：none：沒有裝飾（正常文本默認值）。underline：下劃線。overline：上劃線。line-through：刪除線。color2.4CSS文本外觀屬性文本外觀屬性colorletter-spacingword-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-aligntext-align屬性用于設置文本內(nèi)容水平對齊，相當于html中的align對齊屬性。其可用屬性值如下：left：左對齊（默認值）right：右對齊。center：居中對齊。color2.4CSS文本外觀屬性文本外觀屬性colorletter-spacingword-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-aligntext-indent屬性用于設置首行文本的縮進。其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對于瀏覽器窗口寬度的百分比%，允許使用負值,建議使用em作為設置單位。color2.4CSS文本外觀屬性文本外觀屬性colorletter-spacingword-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-alignwhite-space屬性可設置空白符的處理方式。其屬性值如下：normal：常規(guī)（默認值），文本中的空格、空行無效，滿行（到達區(qū)域邊界）后自動換行。pre：預格式化，按文檔的書寫格式保留空格、空行原樣顯示。nowrap：空格空行無效，強制文本不能換行，除非遇到換行標簽<br/>。內(nèi)容超出元素的邊界也不換行，若超出瀏覽器頁面則會自動增加滾動條。color2.4CSS文本外觀屬性文本外觀屬性CSS3新增文本外觀屬性text-shadowtext-overflow2.4CSS文本外觀屬性文本外觀屬性CSS3新增文本外觀屬性text-shadowtext-overflowtext-overflow使用text-shadow屬性可以為頁面中的文本添加陰影效果。選擇器{ text-shadow:h-shadowv-shadowblurcolor;}2.4CSS文本外觀屬性文本外觀屬性CSS3新增文本外觀屬性text-shadowtext-overflowtext-overflowtext-shadowtext-overflow屬性用于標示對象內(nèi)溢出的文本。選擇器{text-overflow:屬性值;}text-overflow屬性的常用取值有兩個：clip：修剪溢出文本，不顯示省略標簽“…”。ellipsis：用省略標簽“…”標示被修剪文本，省略標簽插入的位置是最后一個字符。2.4CSS文本外觀屬性文本外觀屬性設置省略標簽標示溢出文本的具體步驟如下：1為包含文本的對象定義寬度。2應用“white-space:nowrap;”樣式強制文本不能換行。3應用“overflow:hidden;”樣式隱藏溢出文本。4應用“text-overflow:ellipsis;”樣式顯示省略標簽。2.1引入CSS2.2CSS選擇器2.3CSS字體樣式屬性2.4CSS文本外觀屬性2.5CSS背景屬性2.6CSS邊框?qū)傩阅?/p>

錄背景屬性2.5CSS背景屬性網(wǎng)頁能通過背景圖像給讀者留下更深刻的印象，如節(jié)日題材的網(wǎng)站一般采用喜慶祥和的圖片來突出效果，所以在網(wǎng)頁設計中，合理控制背景顏色和背景圖像至關(guān)重要。背景屬性2.5CSS背景屬性在CSS中，網(wǎng)頁元素的背景顏色使用background-color屬性來設置background-color:背景顏色屬性顏色值，例：red、yellow#十六進制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)實際工作中最常用#十六進制色值，例：#ccc背景屬性2.5CSS背景屬性在CSS中，還可以將圖像作為網(wǎng)頁元素的背景，通過background-image屬性實現(xiàn)。background-image:背景顏色屬性例如：body{background-color:#CCC;background-image:url(images/jianbian.jpg);}背景屬性2.5CSS背景屬性默認情況下，背景圖像會自動向水平和豎直兩個方向平鋪。如果不希望背景圖像平鋪，或者只沿著一個方向平鋪，可以通過background-repeat屬性來控制。background-repeat圖像平鋪屬性平鋪屬性值含義repeat沿水平和豎直兩個方向平鋪（默認值）no-repeat不平鋪（圖像位于元素的左上角，只顯示一次）repeat-x只沿水平方向平鋪repeat-y只沿豎直方向平鋪背景屬性2.5CSS背景屬性background-position圖像位置屬性位置屬性取值含義單位數(shù)值設置圖像左上角在元素中的坐標，例如background-position:20px20px;預定義的關(guān)鍵字水平方向值：left、center、right。垂直方向值：top、center、bottom。百分比0%0%：圖像左上角與元素的左上角對齊。50%50%：圖像50%50%中心點與元素50%50%的中心點對齊。20%30%：圖像20%30%的點與元素20%30%的點對齊。100%100%：圖像右下角與元素的右下角對齊，而不是圖像充滿元素。背景屬性2.5CSS背景屬性background-attachment圖像固定屬性固定屬性取值含義scroll圖像隨頁面元素一起滾動（默認值）。fixed圖像固定在屏幕上，不隨頁面元素滾動。背景屬性2.5CSS背景屬性background-size:屬性值1屬性值2;運用CSS3中的background-size屬性可以輕松控制背景圖像的大小。屬性值說明像素值設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會默認為auto；百分比以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會默認為auto；cover把背景圖像擴展至足夠大，使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中；contain把圖像擴展至最大尺寸，以使其寬度和高度完全適應內(nèi)容區(qū)域；背景屬性2.5CSS背景屬性background-origin:屬性值;運用CSS3中的background-origin屬性可以自行定義背景圖像的相對位置。在上面的語法格式中，background-origin屬性有三種取值，分別表示不同的含義，具體解釋如下。padding-box：背景圖像相對于內(nèi)邊距區(qū)域來定位。border-box：背景圖像相對于邊框來定位。content-box：背景圖像相對于內(nèi)容框來定位。背景屬性2.5CSS背景屬性background-clip:屬性值;在CSS樣式中，background-clip屬性用于定義背景圖像的裁剪區(qū)域在語法格式上，background-clip屬性和background-origin

屬性的取值相似，但含義不同，具體解釋如下。border-box：默認值，從邊框區(qū)域向外裁剪背景。padding-box：從內(nèi)邊距區(qū)域向外裁剪背景。content-box：從內(nèi)容區(qū)域向外裁剪背景。背景屬性2.5CSS背景屬性在CSS3中，通過background-image、background-repeat、background-position和background-size等屬性提供多個屬性值可以實現(xiàn)多重背景圖像效果，各屬性值之間用逗號隔開。例如：background-image:url(images/caodi.png),url(images/taiyang.png),url(images/tiankong.png);背景屬性2.5CSS背景屬性CSS中的背景屬性也是一個復合屬性，可以將背景相關(guān)的樣式都綜合定義在一個復合屬性background中。background:[background-color][background-image][background-repeat][background-attachment][background-position][background-size][background-clip][background-origin];背景屬性2.5CSS背景屬性通過引入RGBA模式和opacity屬性，對背景與圖片設置不透明度rgba(r,g,b,alpha);例如：p{background-color:rgba(255,0,0,0.5);}背景屬性2.5CSS背景屬性通過引入RGBA模式和opacity屬性，對背景與圖片設置不透明度opacity：opacityValue;opacity屬性用于定義標簽的不透明度，參數(shù)opacityValue表示不透明度的值，它是一個介于0~1之間的浮點數(shù)值。其中，0表示完全透明，1表示完全不透明，而0.5則表示半透明。2.1引入CSS2.2CSS選擇器2.3CSS字體樣式屬性2.4CSS文本外觀屬性2.5CSS背景屬性2.6CSS邊框?qū)傩阅?/p>

錄2.6CSS邊框?qū)傩赃吙驅(qū)傩詾榱朔指铐撁嬷胁煌暮凶樱３Ｐ枰o元素設置邊框效果。設置內(nèi)容樣式屬性常用屬性值邊框樣式border-style:上邊[右邊下邊左邊];none無（默認）、solid單實線、dashed虛線、dotted點線、double雙實線邊框?qū)挾萣order-width:上邊[右邊下邊左邊];像素值邊框顏色border-color:上邊[右邊下邊左邊];顏色值、#十六進制、rgb(r,g,b)、rgb(r%,g%,b%)綜合設置邊框border:四邊寬度四邊樣式四邊顏色;

圓角邊框border-radius:水平半徑參數(shù)/垂直半徑參數(shù);像素值或百分比圖片邊框border-images:圖片路徑裁切方式/邊框?qū)挾?邊框擴展距離重復方式;

2.6CSS邊框?qū)傩赃吙驅(qū)傩詎one：沒有邊框solid：邊框為單實線dashed：邊框為虛線dotted：邊框為點線double：邊框為雙實線邊框樣式（border-style）屬性值border-style綜合屬性

border-style:solid;/*四邊均為實線*/

border-style:soliddotted;/*上下實線、左右點線*/border-style:soliddotteddashed;/*上實線、左右點線、下虛線*/2.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）屬性值在設置邊框?qū)挾葧r，必須同時設置邊框樣式，如果未設置樣式或設置為none，則不論寬度設置為多少都無效。注意：常用取值單位為像素。2.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）屬性值border-width:5px;/*四邊寬度均為5像素*/border-width:5px3px;/*上下邊框5像素寬度、左右邊框3像素寬度*/border-width:5px3px4px;/*上邊框5像素寬、左右邊框3像素寬度、下邊框4像素寬度*/border-width綜合屬性2.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）屬性值顏色值，例：red、green#十六進制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)rgb(r%,g%,b%)實際工作中最常用#十六進制色值，例：#ccc2.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）屬性值border-color:#f00;/*四邊均為紅色*/border-color:#f00#00f;/*上下紅色、左右藍色*/border-color:#f00#00f#0f0;/*上紅色、左右藍色、下綠色*/border-color綜合屬性2.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）屬性值CSS3在原邊框顏色屬性（border-color）的基礎上派生了4個邊框顏色屬性。border-top-colorsborder-right-colorsborder-bottom-colorsborder-left-colors2.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）屬性值例如對段落文本<p>添加漸變邊框效果，示例代碼如下：p{

border-style:solid; border-width:10px; -moz-border-top-colors:#a0a#909#808#707#606#505#404#303; -moz-border-right-colors:#a0a#909#808#707#606#505#404#303; -moz-border-bottom-colors:#a0a#909#808#707#606#505#404#303; -moz-border-left-colors:#a0a#909#808#707#606#505#404#303;}2.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）邊框綜合屬性（border）border-top:上邊框?qū)挾葮邮筋伾?border-right:右邊框?qū)挾葮邮筋伾?border-bottom:下邊框?qū)挾葮邮筋伾?border-left:左邊框?qū)挾葮邮筋伾?border:四邊寬度樣式顏色;border:寬度,樣式,顏色注意：寬度、樣式、顏色順序任意，不分先后2.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）邊框綜合屬性（border）圓角邊框（border-radius）圓角邊框?qū)傩允荂SS3新增屬性，其基本語法格式如下。border-radius:參數(shù)1/參數(shù)22.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）邊框綜合屬性（border）圓角邊框（border-radius）值得一提的是，border-radius屬性同樣遵循值復制的原則，其水平半徑（參數(shù)1）和垂直半徑（參數(shù)2）均可以設置1-4個參數(shù)值，用來表示四角圓角半徑的大小。2.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）邊框綜合屬性（border）圓角邊框（border-radius）圖片邊框（border-radius）圓角邊框?qū)傩允荂SS3新增屬性，其基本語法格式如下。border-radius:參數(shù)1/參數(shù)22.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）邊框綜合屬性（border）圓角邊框（border-radius）圖片邊框（border-radius）在網(wǎng)頁設計中，有時需要對區(qū)域整體添加一個圖片邊框，運用CSS3中的border-image屬性可以輕松實現(xiàn)這個效果。border-image:border-image-sourceborder-image-slice/border-image-width/border-image-outsetborder-image-repeat;2.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）邊框綜合屬性（border）圓角邊框（border-radius）圖片邊框（border-radius）屬性說明border-image-source指定圖片的路徑border-image-slice指定邊框圖像頂部、右側(cè)、底部、左側(cè)內(nèi)偏移量。border-image-width指定邊框?qū)挾萣order-image-outset指定邊框背景向盒子外部延伸的距離。border-image-repeat指定背景圖片的平鋪方式《網(wǎng)頁設計制作》項目33.1盒子模型3.2元素分類與轉(zhuǎn)換3.3元素浮動與定位目

錄3.1盒子模型什么是盒子模型？認識盒子模型3.1盒子模型聯(lián)想一下生活中常見的盒子模型？它們的共同特點認識盒子模型3.1盒子模型以手機盒子為例，分析盒子模型認識盒子模型3.1盒子模型?所謂的盒子模型在HTML中就是一個盛裝

元素內(nèi)容的容器。?每個盒子模型都由元素的內(nèi)容、內(nèi)邊距

（padding）、邊框（border）和外邊距

（margin）組成。認識盒子模型3.1盒子模型<div>標簽div英文全稱為“division”，譯為中文是“分割、區(qū)域”。<div>標簽簡單而言就是一個塊標簽，可以實現(xiàn)網(wǎng)頁的規(guī)劃和布局。知識點講解1<div>標簽是一個塊容器標簽。2可以將網(wǎng)頁分割為獨立的部分，以實現(xiàn)網(wǎng)頁的規(guī)劃和布局。3大多數(shù)HTML標簽都可以嵌套在<div>標簽中，<div>中還可以嵌套多層<div>。4可以替代大多數(shù)的塊級文本標簽。3.1盒子模型盒子的寬與高盒子總寬度和總高度?網(wǎng)頁是由多個盒子排列而成?寬度和高度決定了盒子的大小高度寬度3.1盒子模型盒子總寬度和總高度

width

左內(nèi)邊距

右內(nèi)邊距邊框

左外邊距

右外邊距?每個盒子都有固定的大小

邊框盒子的寬與高3.1盒子模型結(jié)論盒子的總寬度=

width+左右內(nèi)邊距之和+左右邊框?qū)挾戎?左右外邊距之和盒子的總高度=height+上下內(nèi)邊距之和+上下邊框?qū)挾戎?上下外邊距之和盒子模型的總寬度與總高度盒子的寬與高3.1盒子模型多學一招：什么是實體化三屬性實體化指的是給標簽劃分區(qū)域（畫盒子），并通過寬度、高度、背景色這三種屬性，讓標簽實現(xiàn)現(xiàn)形，成為一個盒子。需要注意的是，寬度屬性width和高度屬性height僅適用于塊級元素，對行內(nèi)元素無效（<img/>和<input/>標簽除外）?！究偨Y(jié)】3.1盒子模型3.2元素分類與轉(zhuǎn)換3.3元素浮動與定位目

錄3.2元素類型與轉(zhuǎn)換元素的類型在頁面中以區(qū)域塊的形式出現(xiàn)。每個塊元素通常都會獨自占據(jù)一整行或多整行。可以對其設置寬度、高度、對齊等屬性。不占有獨立的區(qū)域。僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)。一般不可以設置寬度、高度、對齊等屬性。塊元素行內(nèi)元素3.2元素類型與轉(zhuǎn)換元素的類型<p><ul>常見的塊元素<h1>—<h6><ol><div><li>其中<div>標簽是最典型的塊元素。3.2元素類型與轉(zhuǎn)換元素的類型<a><em>常見的行內(nèi)元素<strong><span><b><u>其中<span>標簽最典型的行內(nèi)元素。3.2元素類型與轉(zhuǎn)換Span標簽和<div>標簽不同的是，<span>是行內(nèi)元素，僅作為只能包含文本和各種行內(nèi)標簽的容器，如加粗標簽<strong>、傾斜標簽<em>等。知識點講解1<span>標簽是一個行內(nèi)標簽。2<span>與</span>之間只能包含文本和各種行內(nèi)標簽。3

<span>標簽常用于定義網(wǎng)頁中某些特殊顯示的文本，配合class屬性使用。4當其他行內(nèi)標簽都不合適時，就可以使用<span>標簽。3.2元素類型與轉(zhuǎn)換元素類型的轉(zhuǎn)換displayinlineblockinline-blocknone此元素將顯示為行內(nèi)元素（行內(nèi)元素默認的display屬性值）。此元素將顯示為塊元素（塊元素默認的display屬性值）。此元素將顯示為行內(nèi)塊元素，可以對其設置寬高和對齊等屬性，但是該元素不會獨占一行。此元素將被隱藏，不顯示，也不占用頁面空間。3.1盒子模型3.2元素分類與轉(zhuǎn)換3.3元素浮動與定位目

錄3.3元素浮動與定位應用排列圖文排列論壇分享在使用div+css進行網(wǎng)頁布局時，經(jīng)常會使用一些屬性對標簽進行控制，常見的屬性有浮動屬性（float屬性）和定位屬性（position屬性）。標簽的浮動屬性初學者在設計一個頁面時，通常會按照默認的排版方式，將頁面中的元素從上到下一

一羅列。呆板不美觀為元素設置浮動，可以使頁面元素變得整齊有序。3.3元素浮動與定位標簽的浮動屬性什么是浮動？3.3元素浮動與定位標簽的浮動屬性所謂元素的浮動是指設置了浮動屬性的元素會脫離標準文檔流的控制，移動到其父元素中指定位置的過程。3.3元素浮動與定位標簽的浮動屬性基本語法格式選擇器{float:屬性值;}屬性值描述left元素向左浮動right元素向右浮動none元素不浮動（默認值）3.3元素浮動與定位標簽的浮動屬性為什么要清除浮動？3.3元素浮動與定位標簽的浮動屬性由于浮動元素不再占用原文檔流中的位置，所以會對頁面中其他元素的排版產(chǎn)生影響，如果要避免這種影響，就需要對元素清除浮動。3.3元素浮動與定位標簽的浮動屬性如何清除浮動？3.3元素浮動與定位標簽的浮動屬性運用clear屬性清除浮動基本語法格式選擇器{clear:屬性值;}屬性值描述left不允許左側(cè)有浮動元素（清除左側(cè)浮動的影響）right不允許右側(cè)有浮動元素（清除右側(cè)浮動的影響）both同時清除左右兩側(cè)浮動的影響常用屬性值3.3元素浮動與定位標簽的浮動屬性例如：運用clear屬性只能清除元素左右兩側(cè)浮動的影響。然而在制作網(wǎng)頁時，經(jīng)常會遇到一些特殊的浮動影響。3.3元素浮動與定位標簽的浮動屬性空標簽overflowafter偽對象在浮動元素之后添加空標簽，并對該標簽應用“clear:both”樣式，可清除浮動。這個空標簽可以為<div>、<p>、<hr/>等任何標簽。“overflow:hidden;”樣式，也可以清除浮動對該元素的影響，該方法彌補了空標簽清除浮動的不足。使用after偽對象也可以清除浮動，但是該方法只適用于IE8及以上版本瀏覽器和其他非IE瀏覽器。0102033.3元素浮動與定位標簽的定位屬性浮動布局雖然靈活，但是卻無法對元素的位置進行精確的控制。在CSS中，通過定位屬性可以實現(xiàn)網(wǎng)頁中元素的精確定位。3.3元素浮動與定位標簽的定位屬性什么是定位？3.3元素浮動與定位標簽的定位屬性在CSS中，通過CSS定位（CSSposition）可以實現(xiàn)網(wǎng)頁元素的精確定位。元素的定位屬性主要包括定位模式和邊偏移兩部分。3.3元素浮動與定位標簽的定位屬性選擇器{position:屬性值；}position屬性用于定義元素的定位模式，其基本語法格式如下：position屬性的常用值有四個，具體如下表所示。值描述static自動定位（默認定位方式）relative相對定位，相對于其原文檔流的位置進行定位absolute絕對定位，相對于其上一個已經(jīng)定位的父元素進行定位fixed固定定位，相對于瀏覽器窗口進行定位定位模式3.3元素浮動與定位標簽的定位屬性邊偏移通過邊偏移屬性top、bottom、left或right，來精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比，如下表所示。邊偏移屬性描述top頂端偏移量，定義元素相對于其父元素上邊線的距離bottom底部偏移量，定義元素相對于其父元素下邊線的距離left左側(cè)偏移量，定義元素相對于其父元素左邊線的距離Right右側(cè)偏移量，定義元素相對于其父元素右邊線的距離3.3元素浮動與定位標簽的定位屬性靜態(tài)定位是元素的默認定位方式，當position屬性的取值為static時，可以將元素定位于靜態(tài)位置。所謂靜態(tài)位置就是各個元素在HTML文檔流中默認的位置。任何元素在默認狀態(tài)下都會以靜態(tài)定位來確定自己的位置，所以當沒有定義position屬性時，并不說明該元素沒有自己的位置，它會遵循默認值顯示為靜態(tài)位置。在靜態(tài)定位狀態(tài)下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。3.3元素浮動與定位標簽的定位屬性相對定位是將元素相對于它在標準文檔流中的位置進行定位。定位前定位后3.3元素浮動與定位標簽的定位屬性距離左邊150px距離上圖100px在文檔流中的位置仍然保留著3.3元素浮動與定位標簽的定位屬性絕對定位是將元素依據(jù)最近的已經(jīng)定位（絕對、固定或相對定位）的父元素進行定位，若所有父元素都沒有定位，則依據(jù)body根元素（瀏覽器窗口）進行定位。定位前定位后3.3元素浮動與定位標簽的定位屬性距離左邊150px距離頂部100px在文檔流中的位置沒被保存3.3元素浮動與定位標簽的定位屬性固定定位是絕對定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設置為固定定位。3.3元素浮動與定位其他屬性overflow屬性overflow屬性可以解決溢出問題，其基本語法格式如下：選擇器{overflow:屬性值;}overflow屬性的常用值有四個，具體如下表所示。屬性值描述visible內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外（默認值）hidden溢出內(nèi)容會被修剪，并且被修剪的內(nèi)容是不可見的auto在需要時產(chǎn)生滾動條，即自適應所要顯示的內(nèi)容scroll溢出內(nèi)容會被修剪，且瀏覽器會始終顯示滾動條Z-index標簽層疊當對多個元素同時設置定位時，定位元素之間有可能會發(fā)生重疊，如右圖所示。定位導致重疊z-index可以調(diào)整重疊定位元素的堆疊順序，其取值可為正整數(shù)、負整數(shù)和0。z-index的默認值是0。解決重疊問題其他屬性

布局類型單列布局“單列布局”是網(wǎng)頁布局的基礎，所有復雜的布局都是在此基礎上演變而來的。

布局類型兩列布局“兩列布局”和“一列布局”類似，只是網(wǎng)頁內(nèi)容被分為了左右兩部分。對于一些大型網(wǎng)站，特別是電子商務類網(wǎng)站，由于內(nèi)容分類較多，通常需要采用“三列布局”的頁面布局方式。

布局類型三列布局

布局類型通欄布局設置為通欄后，無論頁面放大或縮小，該模塊都將橫鋪于瀏覽器窗口中。導航欄通欄頁面底部通欄無論布局類型是單列布局、兩列布局或者多列布局，為了網(wǎng)站的美觀，網(wǎng)頁中的一些模塊，例如頭部、導航、焦點圖或頁面底部等經(jīng)常需要通欄顯示。8.5網(wǎng)頁模塊命名規(guī)范制作網(wǎng)頁時，為什么要遵循命名規(guī)范？如果沒有統(tǒng)一的命名規(guī)范進行必要的約束，隨意地命名，就會使整個網(wǎng)站的后續(xù)工作很難進行。網(wǎng)頁模塊的命名規(guī)范8.5網(wǎng)頁模塊命名規(guī)范8.5網(wǎng)頁模塊命名規(guī)范用最少的字母達到最容易理解的意義。不能占用關(guān)鍵字（例如id=“h3”）。不能以數(shù)字開頭命名（例如id=“1nav”）。避免使用中文字符命名（例如id=“導航欄”）。命名需要遵循以下幾個原則：8.5網(wǎng)頁模塊命名規(guī)范駝峰式除了第一個單詞外后面的單詞首寫字母都要大寫（例如：partOne）。每一個單詞之間用“_”連接（例如：content_one）。帕斯卡網(wǎng)頁中，常用的命名方式8.5網(wǎng)頁模塊命名規(guī)范相關(guān)模塊命名相關(guān)模塊命名頭header內(nèi)容content/container導航nav尾footer側(cè)欄sidebar欄目column左邊、右邊、中間leftrightcenter登錄條loginbar標志logo廣告banner頁面主體main熱點hot新聞news下載download子導航subnav菜單menu子菜單submenu搜索search友情鏈接frIEndlink版權(quán)copyright滾動scroll標簽頁tab文章列表list提示信息msg小技巧tips欄目標題title加入joinus指南guild服務service注冊regsiter狀態(tài)status投票vote合作伙伴partner

8.5網(wǎng)頁模塊命名規(guī)范CSS文件命名CSS文件命名主要樣式master基本樣式base模塊樣式module版面樣式layout主題themes專欄columns文字font表單forms打印print

《網(wǎng)頁設計制作》項目4

4.1CSS列表屬性4.2CSS精靈技術(shù)4.3CSS復合選擇器4.4CSS超級鏈接屬性4.5CSS特性目

錄4.1CSS控制列表樣式建議定義無序或有序列表時，可以通過標簽的屬性控制列表的項目符號，但是這種方式實現(xiàn)的效果并不理想，因此需要使用CSS中的列表樣式屬性。list-style-type屬性list-style-image屬性list-style-position屬性list-style-type屬性用于控制無序和有序列表的項目符號。list-style-image屬性可以為各個列表項設置項目圖像，使列表的樣式更加美觀。list-style-position屬性用于控制列表項目符號的位置。4.1CSS控制列表樣式4.1CSS控制列表樣式list-style-type屬性list-style-image屬性list-style-position屬性列表類型屬性值顯示效果無序列表（ul）disc●circle○square■有序列表（ol）decimal阿拉伯數(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不顯示任何符號list-style-type的屬性值及顯示效果4.1CSS控制列表樣式因為各個瀏覽器對list-style-type屬性的解析不同。因此，在實際網(wǎng)頁制作過程中不推薦使用

list-style-type屬性。list-style-type屬性list-style-image屬性list-style-position屬性4.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>4.1CSS控制列表樣式list-style-type屬性list-style-image屬性list-style-position屬性例如：list-style-position屬性取值inside：列表項目符號位于列表文本以內(nèi)。outside：列表項目符號位于列表文本以外。<styletype="text/css">.in{list-style-position:inside;}.out{list-style-psition:outside;}li{border:1pxsolid#CCC;}</style>4.1CSS控制列表樣式list-style-image屬性2list-style-position屬性3list-style-type屬性1列表樣式復合屬性list-style復合屬性list-style:列表項目符號

列表項目符號的位置

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

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

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

邊框?qū)傩?/p>

內(nèi)/外邊距屬性背景屬性定位屬性布局屬性元素寬高屬性4.3CSS復合選擇器CSS優(yōu)先級網(wǎng)頁制作時，對統(tǒng)一元素，應用不同的背景，會出現(xiàn)什么情況？思考background-color:pink;background-color:blue;background-color:red;【結(jié)論】定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應用在同一元素上，這時就會出現(xiàn)優(yōu)先級的問題。4.3CSS復合選擇器CSS優(yōu)先級來看一個例子：<pclass="father"id="header"> <strongclass="blue">文本的顏色</strong></p>pstrong{color:black}/*權(quán)重為:1+1*/strong.blue{color:green;