12 Chapter 12-1 12-2 12-3
HTML5 & CSS3 色彩 背景與漸層屬性 12-1 (color property) CSS 3 color HTML opacity HTML CSS Color Module Level 3 W3C CSS 3 http://www.w3.org/tr/css3-color/ 12-1-1 color ( ) (foreground color) (background color) color HTML color: rgb(rr, gg, bb) #rrggbb rgba(rr, gg, bb, alpha) color rgba(rr, gg, bb, alpha) CSS 3 aqua black blue fuchsia gray green lightgreen lime maroon navy olive orange purple red silver teal white yellow 1 ( ) h1 {color:red} ( CSS 3 ) 2-11 ~ 2-13 12-2
12 rgb(rr, gg, bb) (red) (green) (blue) 1 100% 0% 0% h1 {color:rgb(100%, 0%, 0%)} (red) (green) (blue) 0 ~ 255 256 100% 0% 0% 255 0 0 h1 {color:rgb(255, 0, 0)} #rrggbb # 255 0 0 ff 00 00 h1 {color:#ff0000} 12-3
HTML5 & CSS3 色彩 背景與漸層屬性 rgba(rr, gg, bb, alpha) CSS 3 alpha 0.0 ~ 1.0 ~ 1 0.5 h1 {color:rgba(255, 0, 0, 0.5)} 1 ( ) 04 05 05 0.5 01:<body> 02: <h1 style="color:orange"> </h1> 03: <h1 style="color:#00ff00"> </h1> 04: <h1 style="color:rgb(255, 0, 0)"> </h1> 05: <h1 style="color:rgba(255, 0, 0, 0.5)"> </h1> 06:</body> <\Ch12\color1.html> a b c d a c b d 0.5 12-4
12 12-1-2 opacity ( ) CSS 3 opacity HTML 0.0 ~ 1.0 ~ opacity: <body> <img src="fig1.jpg" width="200"> <img src="fig1.jpg" width="200" style="opacity:0.5"> <h1 style="color:navy"> </h1> <h1 style="color:navy; opacity:0.5"> </h1> </body> <\Ch12\color2.html> a b c d a b 0.5 c 1 d 1 0.5 12-5
HTML5 & CSS3 色彩 背景與漸層屬性 12-2 (background property) CSS 3 background-color HTML background-image HTML background-repeat HTML background-position HTML background-attachment HTML background-clip HTML background-origin HTML background-size HTML background CSS Backgrounds and Borders Module Level 3 W3C (CR) CSS 3 http://www.w3.org/tr/css3-background/ 12-2-1 background-color ( ) background-color HTML transparent ( ) background-color: transparent 12-6
12 1 0.5 CSS 3 <body style="background-color:burlywood"> <h1 style="color:white; background-color:rgba(255, 255, 255, 0.5)"> </h1> </body> <\Ch12\bg1.html> b a a b 1 0.5 background-color 01:<!doctype html> 02:<html> 03: <head> 1 2 04: <meta charset="utf-8"> 3 05: <title> CSS </title> 06: <style> 07: 1.heading {color:white; background-color:orange} 08: 2.odd {color:black; background-color:#ffffdd} 09: 3.even {color:black; background-color:#ffff99} 10: </style> 11: </head> <\Ch12\bg2.html>( 1/2) 12-7
HTML5 & CSS3 色彩 背景與漸層屬性 12: <body> 13: <table> 4 14: <tr class="heading"> 15: <th> </th> 16: <th> </th> 17: </tr> 5 18: <tr class="odd"> 19: <td> </td> 20: <td> </td> 21: </tr> 6 22: <tr class="even"> 23: <td> </td> 24: <td> </td> 25: </tr> 7 26: <tr class="odd"> 27: <td> </td> 28: <td> </td> 29: </tr> 8 30: <tr class="even"> 31: <td> </td> 32: <td> China Blue</td> 33: </tr> 9 34: <tr class="odd"> 35: <td> </td> 36: <td> </td> 37: </tr> 10 38: <tr class="even"> 39: <td> </td> 40: <td> </td> 41: </tr> 42: </table> 43: </body> 44:</html> 4 heading 5 odd 6 even 7 odd 8 even 9 odd 10 even <\Ch12\bg2.html>( 2/2) 12-8
12 a b c a heading b odd c even 07 ~ 09 heading odd even 14 heading <tr> class "heading" 18 26 34 odd <tr> class "odd" 22 30 38 even <tr> class "even" HTML CSS 07 ~ 09 12-9
HTML5 & CSS3 色彩 背景與漸層屬性 12-2-2 background-image ( ) background-image HTML none ( ) background-image:url( ) none 07 rose.gif rose.gif 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title> CSS </title> 06: </head> 07: <body style="background-image:url(rose.gif)"> 08: </body> rose.gif 09:</html> <\Ch12\bg3.html> 12-10
12 <p> <h1> <tr> <td> <div> HTML <bg2.html> 07 ~ 09 bg01.gif bg02.gif bg03.gif 07:.heading {color:white; background-image:url(bg01.gif)} 08:.odd {color:black; background-image:url(bg02.gif)} 09:.even {color:black; background-image:url(bg03.gif)} <\Ch12\bg2a.html> line.png (24bit PNG ) <!doctype html> <html> <head> <meta charset="utf-8"> <title> CSS </title> </head> <body style="background-color:orange; background-image:url(line.png)"> </body> </html> <\Ch12\bg4.html> 12-11
HTML5 & CSS3 色彩 背景與漸層屬性 line.png CSS 3 line.png bg02.gif bg02.gif <body> <h1 style="background-image:url(line.png), url(bg02.gif)"> </h1> </body> <\Ch12\bg5.html> 12-12
12 12-2-3 background-repeat ( ) background-image HTML background-repeat repeat space round CSS 3 background-repeat:repeat no-repeat repeat-x repeat-y space round repeat flower.gif <div> <div style="background-image:url(flower.gif); background-repeat:repeat"> </div> <\Ch12\bg6.html> 12-13
HTML5 & CSS3 色彩 背景與漸層屬性 no-repeat <div style="background-image:url(flower.gif); background-repeat:no-repeat"> </div> repeat-x <div style="background-image:url(flower.gif); background-repeat:repeat-x"> </div> 12-14
12 repeat-y <div style="background-image:url(flower.gif); background-repeat:repeat-y"> </div> space repeat CSS 3 space <div style="background-image:url(flower.gif); background-repeat:space"> </div> 12-15
HTML5 & CSS3 色彩 背景與漸層屬性 round CSS 3 repeat space <div style="background-image:url(flower.gif); background-repeat:round"> </div> 12-2-4 background-position ( ) HTML backgroundposition 0% HTML background-position:[ left center right] [ top center bottom] CSS 3 12-16
12 background-position px pt pc em ex in cm mm HTML <body> a b <pre style="background-image:url(bg06.gif); background-repeat:no-repeat; background-position:9cm 3cm"> c </pre> </body> <\Ch12\bg7.html> a bg06.gif b c <pre> 9 3 12-17
HTML5 & CSS3 色彩 背景與漸層屬性 HTML <body> a b <pre style="background-image:url(bg06.gif); background-repeat:no-repeat; background-position:70% 0%"> c </pre> </body> <\Ch12\bg7a.html> a bg06.gif b c <pre> 70% 0% 12-18
left center right top center bottom left center right top center bottom HTML center 12 left top center top right top left center left bottom center center center bottom right bottom right center center <body> <pre style="background-image:url(bg06.gif); background-repeat:no-repeat; background-position:right top"> <pre>... </pre> </body> <\Ch12\bg7b.html> 12-19
HTML5 & CSS3 色彩 背景與漸層屬性 12-2-5 background-attachment ( ) background-attachment scroll fixed local CSS 3 scroll inline frame scroll inline frame local inline frame background-attachment:scroll fixed local <body> <pre style="background-image:url(bg06.gif); background-repeat:no-repeat; background-position:right top; background-attachment:fixed"> ( Logo ) </pre> </body> <\Ch12\bg8.html> 12-20
12 <pre> 1 2 1 2 CSS 3 12-21
12 ( ) 1. A. color:red B. color:rgba(100%, 100%, 20%, 0.5) C. color:#ffccaa D. color:rgb(256, 0, 0) ( ) 2. A. color HTML B. background-color C. background-color transparent D. background-image HTML ( ) 3. bg01.gif A. p {background-image:bg01.gif} B. p {background-image:url(bg01.gif)} C. p {background:bg01.gif} D. p {background-image=url(bg01.gif)} ( ) 4. A. linear-gradient() B. radial-gradient() C. repeating-linear-gradient() D. repeating-radial-gradient() ( ) 5. background-repeat A. repeat B. no-repeat C. repeat-x D. repeat-y ( ) 6. HTML A. background-position:center bottom B. background-position:right bottom C. background-position:center center D. background-position:center left ( ) 7. A. background-repeat B. background-position C. background-attachment D. background-watermark ( ) 8. pre {background:url("bg02.gif") no-repeat center center} A. B. C. D. 12-35
11 <ex11-1.html> <.html> <style> h1 {text-align:center; font-family: ; color:maroon} p {text-indent:1cm; line-height:150%; font-family: ; font-size:22px; background-color:#ffffcc}.format1 {text-decoration:underline; font-style:italic; color:blue}.format2 {text-decoration:overline; font-weight:bold; color:green} </style>