CSS constructs colors, backgrounds, and images

2. Set color
4. Background use
6. image use

   1. Set color

   Several legal definitions of red;

   ???? #f00;

   ???? #ff0000;

   ???? Red;

   ???? RGB (255,0,0);

   ???? RGB (100%,0%,0%);

   ?

   2.16 Binary ternary group

   ?

   ???? First byte: a red value;

   ???? Second byte: a value of green;

   ???? Third byte: the value of blue;

   ???? Simplified notation: #cccccc can be written #ccc, #ff6633可以写成 #f63

   ?

   3. Use of 17 named colors

   ???? Black???? 000000

   ???? Tibetan Blue (Navy) 000080

   ???? Green 008000

   ???? Sea Blue (Teal) 008080

   ???? Silver???? 0c0c0c

   ???? The Blue (blue) 0000ff

   ???? Sour Orange (lime) 00ff00

   ???? Light green (Aqua) 00ffff

   ???? Reddish purple color (maroon) 800000

   ???? Purple (purple) 800080

   ???? Olive green (Olive) 808000

   ???? Grey (gray)???????? 808080

   ???? Red???????????? ff0000

   ???? Magenta (fuchsia) ff00ff

   ???? Yellow (yellow)???????? FFFF00

   ???? Orange???????? ffa500

   ???? White???????? FFFFFF

   ?

   4. Use span to better control the text of local areas in text

   ???? <span> text content </span>

   ?

7. using the Display property to provide chunk conversions

   Inline is converted into inline,

   Block is converted into chunks,

   None of the hidden placeholders

   ?

   6. The production of background image gradient

   ???? Body {

   ???????? Background: #ccc url (bg.gif) repeat-x;

   }

   ?

   7. Add a background to a chunk

   ???? #branding {

   ???????? width:700px;

   ???????? height:200px;

   ???????? Background:url (branding.gif) no-repeat;

   }

   ?

   8. Add a small icon to the title

   ???? H1 {

   ???????? padding-left:20px;

   ???????? Background:url (bullet.gif) No-repeat left center;

   }

   If you want to use a percentage instead of a keyword, then 0 50% is vertically centered

   ?

   9. Dome Corner

   ???? <div class= "box" >

   ????????

   ???????? <p>Content</p>

   ???? </div>

   ?

   ????. box {

   ???????? width:418px;

   ???????? Background: #ccc url (bottom.gif) no-repeat left bottom;

   }

   ?

   . box H2 {

   ???? Background:url (top.gif) no-repeat left top;

   }

   ?

   If you do not want to touch the boundary, add padding.

   . box H2 {

   ???? padding:10px 20px 0 20px;

   }

   . Box P {

   ???? padding:0 20px 10px 20px;

   }

   ?

   10. Simple CSS Shading effect

   <div class= "Img-wrapper" >

   </div>

   ?

   . img-wrapper {

   Background:url (images/shadow.gif) No-repeat bottom right;

   Clear:right;

   Float:left;

   position:relative;

   margin:10px 0 0 10px;

   }
   

   . img-wrapper img {

   Display:block; /* This property is explained to the list */

   Margin: -5px 5px 5px-5px;

   position:relative;

   }

CSS constructs colors, backgrounds, and images