CSS3 's Chapter3

The common styles of CSS are divided into several categories:

1. Font style (Font,color, text-decoration, Text-shadow)
2. Element style (width,height,margin,padding,opacity, box model)
3. Border style (border, Border-radius, Box-shadow)
4. Paragraph styles (line-height, text-align, Text-indent, letter-spacing)
5. Background style (background, background-size)
6. List Style (List-style)
7. Deform Style (transform)
8. Transition Animation (Transition)
9. Custom Animation (animate)

Font style:

• • Font name--font-family
    

    To set the text name, you can use multiple names, or use commas
    Separated, the browser uses the available fonts in order of precedence.

    P {font-family: ' Arial ' ,' boldface ' 

  • Font size--font-size
    

    p {font-size:14px;}    

  • Font Bold--font-weight

    P {Font-weight:bold | | normal | | Bolder | | Lighter | | Length;}

  • Font Italic--font-style

  • Font abbreviations

    p{    font-style:italic;    Font-weight:bold;    font-size:14px;    line-height:22px;    Font-family: the song Body;} p {font:italic bold 14px/22px arial}

  • Font Color--color

    P{color: #FF0000 | | rgba (255,0,0,.5) | | red | | RGB (255,0,0);

  • Text Trim Line--text-decoration

    p{  Text-decoration:none | | underline | | blink | | overline | | line-  through}

  • Text Shadow--text-shadow

    H-shadow	Necessary. The position of the horizontal shadow. Negative values are allowed.
    V-shadow	Necessary. The position of the vertical shadow. Negative values are allowed.
    Blur	Optional. Blur the distance.
    Color	Optional. The color of the shadow.

    h1{    text-shadow:2px 2px #ff0000;}

  • Embedded Fonts--@font-face

    @font-face {     font-family: custom font name;     Src:url (the relative or absolute path of the font file on the server)  format (font type);}

Element style:

• • Width and Height--width,height
    

    p {     width:300px;     height:200px;}

  • Margin--margin

    　　

    margin-top	Set margin   on top;
    margin-bottom	set margin below
    margin-left	set margin on the left
    margin-right	set margin to the right

     div {
     margin:0 auto; 
     margin:2px 2px 2px 2px; 
     magin:2px 5px 3px; 
     magin:2px; 
    } 

  • Internal margin--padding
    

    Padding-top	Set the padding on the top edge
    Padding-bottom	Set the padding below
    Padding-left	Set the padding on the left side
    Padding-right	Set the padding on the right side

    
    

    div {     padding:0 auto;  padding:2px 2px 2px 2px;    padding:2px 5px 3px;    padding:2px;}

  • Transparency--opacity
    Number value is a decimal between 0.0-1.0
    

    div{opacity:.5;}                           

  • Box model
    The box model refers to each element in the CSS layout, which is treated as a box in the browser's interpretation.
    The final width of the element = left border Width + Left padding + content width + right padding + right border width
    The final height of the element = Top Border width + top padding + content height + bottom padding + lower border width
    

Border Style:

• • Border Line--border-style
    

    div{
    Border-style:none | Hidden | Dotted | Dashed | Solid | Double   | groove | ridge | inset  | outset}

  • Border Width--border-width
    

    div{    Order-width:medium | thin | thick | length}

  • Border Color--border-color
    

    div{     border-color:red;}

  • Abbreviation
    

    div {     width:300px;     height:100px;     Border-style:solid;     border-width:1px;     Border-color: #FF0000; }div {    width:300px;     height:100px;     border:1px solid #FF0000;}

  • Fillet effect--border-radius
    

    div{         border-radius:50%         border-radius:10px;        border-radius:5px 4px 3px 2px;    }

  • Border picture--border-image
    

    div {     border:10px solid gray;     Border-image:url (test.png) 10px; }

　　　　　

CSS3 's Chapter3