1、YCF正版可修改PPT（中職）Web前端設計基礎 項目九-1電子課件CSS 3修飾表格表單項目九授課教師：姓名WEB前端設計基礎Contents1.項目描述2.知識準備3.項目實施4.項目拓展5.項目小結6.技能訓練一 項目描述本項目學習要點使用CSS設置邊框圓角效果；使用CSS美化表格表單。使用CSS美化背景；使用CSS美化邊框；二 知識準備使用CSS美化背景；使用CSS修飾表格。使用CSS美化邊框；使用CSS設置圓角邊框；使用CSS設置圖片邊框；使用CSS設置邊框陰影；使用CSS美化背景1設置背景顏色在CSS 3中，設置背景顏色的屬性是background-color，格式如下： back

2、ground-color:transparent | color;transparent是默認值，表示透明。color表示顏色，其設置方法有很多種：英文單詞、十六進制、RGB、HSL、HSLA、GRBA，設置方法已經在前面介紹過。使用CSS美化背景1設置背景顏色【例9-1】為網頁以及段落設置背景顏色實例，代碼如下所示（示例文件9-1.html）。CSS設置背景顏色bodybackground-color: CadetBlue;pbackground-color:rgb(154,205,50);color:#ffffff;line-height: 30px;text-align: center;

3、風高秋月白，雨霽晚霞紅設置的整個網頁的背景顏色為軍校藍色，標簽選擇器為“body”，用于聲明整個網頁。設置段落p的樣式：設置背景色，這里使用的是RGB表示顏色的方法；第12行設置文字顏色為白色，這里用16進制數表示的顏色的方法；第13行設置行高為30像素；第14行設置了文字對齊方式為水平居中。在chrome瀏覽器中預覽使用CSS美化背景2設置背景圖片在CSS 3中，設置背景圖片的屬性是background-image，與背景顏色相同，背景圖片既可以對整個網頁進行設置，也可以對某些HTML元素進行設置，除此之外，還可以通過CSS樣式對圖片的排列方式等進行控制。格式如下：background-im

4、age:none | url(url);默認值為none（無背景圖），需要背景圖時則要用url進行導入，url可以應用相對地址，也可以用絕對地址。使用CSS美化背景2設置背景圖片如果圖片因為某些原因不能正常顯示，則將以背景顏色替代。如果圖片太小不能鋪滿全屏，則會重復出現直至鋪滿。但是這種方式往往不適用于大多數情況，所以需要使用下面這些屬性：background-repeat:repeat | repeat-x | repeat-y | no-reapeatbackground-repeat用于設置圖片的重復方式，格式如下：使用CSS美化背景2設置背景圖片background-repeat各屬性

5、值和說明如表所示。屬性值說明repeat背景圖片水平方向和垂直方向都平鋪repeat-x背景圖片水平方向平鋪repeat-y背景圖片垂直方向平鋪ro-reapeat背景圖片不平鋪重復的背景圖片是從元素的左上角開始平鋪，直到水平或者垂直方向全部頁面都被背景圖片覆蓋為止。使用CSS美化背景2設置背景圖片background-attachment設置好背景圖片后，如果文字部分較長，則會出現滾動條，當拖動滾動條向下瀏覽文字的時候，初始可見的背景圖片就會看不到了。要解決這個問題，就要使用background-attachment屬性，該屬性用來設置背景圖片是否隨著文檔一起滾動，格式如下：各屬性值和說明如

6、表所示。background-attachment:scroll | fixed屬性值說明scroll默認值，當頁面滾動時，背景圖片隨頁面一起滾動fixed背景圖片固定在頁面的可見區域里使用CSS美化背景2設置背景圖片background-position默認情況下，背景圖片的位置是從元素的左上角開始的，但實際的網頁設計中，可以根據需要，直接指定圖片的出現位置，這就用到了background-position，該屬性用于指定背景圖片在元素中的位置，屬性值的設置可以分為四類：絕對定位位置、百分比定義位置、垂直對齊值和水平對齊值。格式如下：background-position: | | top

7、| center | bottom | left | right使用CSS美化背景2設置背景圖片background-position各屬性值和說明如表所示。屬性值說明設置圖片與邊框在水平和垂直方向的距離長度，后跟長度單位以頁面元素框的寬度和高度的百分比放置圖片top背景圖片頂部居中顯示center背景圖片居中顯示bottom背景圖片底部居中顯示left背景圖片左部居中顯示right背景圖片右部居中顯示使用CSS美化背景2設置背景圖片background-positionbackground-position屬性后面也可以有垂直對齊值和水平對齊值兩個屬性值，這樣可以同時決定水平與垂直位置。例

8、設置圖片位置在右上角的代碼為：background-position:top right;例 設置圖片位置在水平20像素、垂直30像素的代碼為：background-position:20px 30px;使用CSS美化背景2設置背景圖片background-sizebackground-size屬性用來控制圖片的大小，格式如下：各屬性值和說明如表所示。background-size:|auto1,2|cover|contain;屬性值說明由浮點數和單位標識符組成的長度值取值為0%-100%之間的值cover保持背景圖像本身的寬高比例，將圖片縮放到正好覆蓋所定義的背景區域contain保持圖像本

9、身的寬高比，將圖片縮放到寬度或高度正好適應背景區域使用CSS美化背景2設置背景圖片background-origin在默認情況下，background-position屬性總是以元素左上角原點作為背景圖像的起始點，而用background-origin可以改變這種定位方式，格式如下：各屬性值和說明如表所示。Background-origin:border | padding |content;屬性值說明Border-box從border區域開始顯示背景padding-box從Padding區域開始顯示背景content-box從Content區域開始顯示背景使用CSS美化背景2設置背景圖片ba

10、ckground-clip該屬性指定背景的繪制區域，格式如下：各屬性值和說明如表所示。background-clip:border-box | padding-box | content-box;屬性值說明border-box背景繪制在邊框方框內（含邊框）padding-box背景繪制在邊框方塊內（不含邊框）content-box背景繪制在內容方框內使用CSS美化背景2設置背景圖片【例9-2】為網頁以及網頁元素設置背景圖片實例，代碼如下所示（示例文件9-2.html）。bodybackground-color: black;background-image: url(images/03.jpg

11、);background-size:400px 500px;background-position:0px 200px;background-repeat: repeat-x;background-attachment: fixed; divcolor: #ffffff;width: 300px;border: 10px dashed #ffb90f;padding:35px;margin: 150px;background-image:url(images/04.jpg);background-size:cover;background-clip:padding-box;設置了整個頁面的背景

12、樣式，設置標簽選擇器為“body”的樣式，用于聲明網頁的整個主體部分：設置了背景顏色設置為黑色，當背景圖片覆蓋不到時，網頁將以黑色顯示；設置了背景圖片；設置了圖片大小為寬400像素、高500像素；設置了圖片位置距水平原點0像素、距垂直原點200像素；設置了圖片重復方式為橫向重復，即背景圖片在網頁中只在橫向重復平鋪；設置了圖片滾動為不隨文字滾動，所以當下拉滾動條的時候，背景圖片的位置并不發生變化。設置了div的樣式，該樣式應用于網頁中所有的div標簽：分別設置了文字顏色為白色、寬度為300像素、邊框為10像素的#ffb90f顏色虛線、內邊距為35像素、外邊距為150像素、背景圖片。設置了圖片大小

13、為cover，即圖片保持寬高比例，自動適應背景區域，所以瀏覽時會看到兩個div中背景圖片的拉伸程度是不同的。設置了圖片的剪裁區域為padding-box，即從padding區域開始顯示背景。使用CSS美化背景2設置背景圖片【例9-2】為網頁以及網頁元素設置背景圖片實例，代碼如下所示（示例文件9-2.html）。虞美人春花秋月何時了，往事知多少。小樓昨夜又東風，故國不堪回首月明中。雕欄玉砌應猶在，只是朱顏改，問君能有幾多愁，恰似一江春水向東流。水調歌頭明月幾時有？把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間？轉朱閣，低綺戶，照無眠。不應有恨

14、，何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長久，千里共嬋娟。在chrome瀏覽器中預覽使用CSS美化背景2設置背景圖片【例9-2】為網頁以及網頁元素設置背景圖片實例，代碼如下所示（示例文件9-2.html）。如果將CSS代碼中的background-clip屬性值設置為border-box（從邊框區域開始）或者content-box（從內容區域開始），其瀏覽效果分別如圖所示。使用CSS美化背景2設置背景圖片【例9-2】為網頁以及網頁元素設置背景圖片實例，代碼如下所示（示例文件9-2.html）。如果將CSS代碼中的background-clip語句改為:backgroun

15、d-origin: border-box;（背景圖片從border區域開始），或者background-origin: padding-box;（背景圖片從padding區域開始），其瀏覽效果分別如圖所示。使用CSS美化邊框邊框就是元素的邊線，每個頁面元素的邊框可以從三個方面來描述：寬度、樣式和顏色，這三個方面決定了邊框的外觀，在CSS3中分別使用border-style、border-width和border-color三個屬性來設置。而邊框有上下左右四條，如果需要四條邊框設置不同的樣式，還需要分別指定。這些屬性和說明如表所示。分類屬性說明邊框樣式border-style所有邊框的樣式bor

16、der-top-style上邊框樣式border-right-style右邊框樣式border-bottom-style下邊框樣式border-left-style左邊框樣式邊框顏色border-color所有邊框的顏色border-top-color上邊框顏色border-right-color右邊框顏色border-bottom-color下邊框顏色border-left-color左邊框顏色邊框寬度border-width所有邊框的寬度border-top-width上邊框顏色border-right- width右邊框顏色border-bottom- width下邊框顏色border-

17、left- width左邊框顏色簡寫屬性border把四個邊的三個屬性一起設置border-top把上邊框的三個屬性一起設置border-right把右邊框的三個屬性一起設置border-bottom把下邊框的三個屬性一起設置border-left把左邊框的三個屬性一起設置使用CSS美化邊框1.邊框樣式類屬性設置邊框樣式類屬性，格式如下：border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;其屬性值和說明如表所示。屬性值說明none無邊框dotted點線式dashed破折線solid 直線do

18、ubled雙線groove槽線式ridge脊線式inset內嵌效果outset突起效果例如設置所有邊框樣式都是實線型的代碼為：border-style:solid;例如設置上邊框樣式為雙線型的代碼為：border-top-style:doubled;使用CSS美化邊框2.邊框顏色設置邊框顏色的格式如下：border-color:color;color表示顏色，其顏色值通過十六進制和RGB等方式設置。例如設置所有邊框顏色為紅色的代碼為：border-color:red;例如設置下邊框顏色為灰色的代碼為：border-bottom-color:#eeeeee;使用CSS美化邊框3.邊框寬度設置邊框

19、寬度的格式如下：border-width:medium | thin|think | ;其屬性值和說明如表所示。例如設置所有邊框都為細邊框的代碼為：border-width:thin;例如設置左邊框寬度為5像素的代碼為：border-left-width:5px;屬性值說明medium默認值，中等寬度thin細邊框think粗邊框length自定義寬度使用CSS美化邊框4.邊框的簡寫屬性border等簡寫屬性集合了上面介紹的三種屬性，格式如下：border:border-width | border-style | border-color;三個屬性的順序可以自由調換。例如設置所有邊框為10像

20、素的紫色虛線的代碼為：border:dashed purple 10px;例如設置上邊框為加粗的紅色雙線：border-top:double red think;使用CSS美化邊框【例9-3】制作不同樣式的邊框實例，代碼如下所示（示例文件9-3.html）。 不同的邊框類型 p.none border-style:none;border-color: black;border-width: 1px;p.dotted border-style:dotted;border-color: pink;border-width: 2px;p.dashed border-style:dashed;bord

21、er-color: orange;border-width: 3px;p.solid border-style:solid;border-color: yellow;border-width: 4px;p.double border-style:double;border-color: green;border-width: 5px;p.groove border-style:groove;border-color: blue;border-width: 6px;p.ridge border-style:ridge;border-color: purple;border-width: 7px;p.inset border-style:inset;border-color:ivory;border-width: 8px;p.outset border-style:outset;border-color: red;border-width: 9px;p.difference border-top-style:outset;