《網(wǎng)頁(yè)設(shè)計(jì)制作》課件-項(xiàng)目3_第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)制作》課件-項(xiàng)目3_第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)制作》課件-項(xiàng)目3_第3頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)制作》課件-項(xiàng)目3_第4頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)制作》課件-項(xiàng)目3_第5頁(yè)
已閱讀5頁(yè)，還剩68頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

《網(wǎng)頁(yè)設(shè)計(jì)制作》項(xiàng)目33.1引入CSS3.2CSS選擇器3.3CSS字體樣式屬性3.4CSS文本外觀(guān)屬性3.5CSS背景屬性3.6CSS邊框?qū)傩阅?/p>

錄【任務(wù)目標(biāo)】1.

了解CSS基本概念2.

掌握CSS的作用3.

掌握CSS規(guī)則4.

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

錄【任務(wù)目標(biāo)】1.

了解CSS選擇器的含義2.

掌握CSS選擇器的類(lèi)別3.

掌握CSS選擇器的用法3.2CSS選擇器3.2CSS選擇器標(biāo)簽選擇器是指用HTML標(biāo)簽名稱(chēng)作為選擇器，按標(biāo)簽名稱(chēng)分類(lèi)，為頁(yè)面中某一類(lèi)標(biāo)簽指定統(tǒng)一的CSS樣式。其基本語(yǔ)法格式如下：標(biāo)簽名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}標(biāo)簽選擇器標(biāo)簽選擇器通配符選擇器類(lèi)選擇器id選擇器3.2CSS選擇器類(lèi)選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類(lèi)名，其基本語(yǔ)法格式如下：類(lèi)選擇器標(biāo)簽選擇器類(lèi)選擇器通配符選擇器id選擇器.類(lèi)名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}3.2CSS選擇器通配符選擇器id選擇器使用“#”進(jìn)行標(biāo)識(shí)，后面緊跟id名，其基本語(yǔ)法格式如下：#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}id選擇器標(biāo)簽選擇器類(lèi)選擇器id選擇器3.2CSS選擇器通配符選擇器通配符選擇器用“*”號(hào)表示，它是所有選擇器中作用范圍最廣的，能匹配頁(yè)面中所有的元素。其基本語(yǔ)法格式如下：通配符選擇器標(biāo)簽選擇器類(lèi)選擇器id選擇器*{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}3.1引入CSS3.2CSS選擇器3.3CSS字體樣式屬性3.4CSS文本外觀(guān)屬性3.5CSS背景屬性3.6CSS邊框?qū)傩阅?/p>

錄學(xué)習(xí)HTML時(shí)，可以使用文本樣式標(biāo)簽及其屬性控制文本的顯示樣式，但是這種方式繁瑣且不利于代碼的共享和移植。為此，CSS提供了相應(yīng)的文本設(shè)置屬性。為什么使用CSS文本樣式屬性？3.3CSS字體樣式屬性字體樣式屬性3.3CSS字體樣式屬性1font-size屬性用于設(shè)置字號(hào)。2font-family屬性用于設(shè)置字體。3font-weight屬性用于定義字體的粗細(xì)。4

font-style屬性用于定義字體風(fēng)格。5

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

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

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

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

錄3.6CSS邊框?qū)傩赃吙驅(qū)傩詾榱朔指铐?yè)面中不同的盒子，常常需要給元素設(shè)置邊框效果。設(shè)置內(nèi)容樣式屬性常用屬性值邊框樣式border-style:上邊[右邊下邊左邊];none無(wú)（默認(rèn)）、solid單實(shí)線(xiàn)、dashed虛線(xiàn)、dotted點(diǎn)線(xiàn)、double雙實(shí)線(xiàn)邊框?qū)挾萣order-width:上邊[右邊下邊左邊];像素值邊框顏色border-color:上邊[右邊下邊左邊];顏色值、#十六進(jìn)制、rgb(r,g,b)、rgb(r%,g%,b%)綜合設(shè)置邊框border:四邊寬度四邊樣式四邊顏色;

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

3.6CSS邊框?qū)傩赃吙驅(qū)傩詎one：沒(méi)有邊框solid：邊框?yàn)閱螌?shí)線(xiàn)dashed：邊框?yàn)樘摼€(xiàn)dotted：邊框?yàn)辄c(diǎn)線(xiàn)double：邊框?yàn)殡p實(shí)線(xiàn)邊框樣式（border-style）屬性值border-style綜合屬性

border-style:solid;/*四邊均為實(shí)線(xiàn)*/

border-style:soliddotted;/*上下實(shí)線(xiàn)、左右點(diǎn)線(xiàn)*/border-style:soliddotteddashed;/*上實(shí)線(xiàn)、左右點(diǎn)線(xiàn)、下虛線(xiàn)*/3.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）屬性值在設(shè)置邊框?qū)挾葧r(shí)，必須同時(shí)設(shè)置邊框樣式，如果未設(shè)置樣式或設(shè)置為none，則不論寬度設(shè)置為多少都無(wú)效。注意：常用取值單位為像素。3.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綜合屬性3.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）屬性值顏色值，例：red、green#十六進(jìn)制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)rgb(r%,g%,b%)實(shí)際工作中最常用#十六進(jìn)制色值，例：#ccc3.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）屬性值border-color:#f00;/*四邊均為紅色*/border-color:#f00#00f;/*上下紅色、左右藍(lán)色*/border-color:#f00#00f#0f0;/*上紅色、左右藍(lán)色、下綠色*/border-color綜合屬性3.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）屬性值CSS3在原邊框顏色屬性（border-color）的基礎(chǔ)上派生了4個(gè)邊框顏色屬性。border-top-colorsborder-right-colorsborder-bottom-colorsborder-left-colors3.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）屬性值例如對(duì)段落文本<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;}3.6CSS邊框?qū)傩赃吙驅(qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾?/p>

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論