css color, text (unfinished)

Color representation:

1, the color name indicates: red

  <div class:"hhh"></div>

  ------

  <style>

    .hhh {

      width:222:

      background-color:red:

    }

  </style>

2,16 hexadecimal (value 0-9, AF) commonly

  <div class:"hhh"></div>

  ------

  <style>

    .hhh {

      width:222:

      background-color: #: 000000: (# to begin, there must be a value of six, the first two values ​​represent red, green intermediate, and finally blue: the three primary colors)

    }

  </style>

 

3, rgb (each with a color value range: 0-255)

  background-color:rgb(0,0,0)

4.raba (transparency strip) (final transparency value in the range 0-1, approximately the smaller the number transparent)

  background-color:rgb(0,0,0,0.5)

 

CSS Text settings

  Color color, the text, such as color: red

  font-size, set the text size, such as font-size: 12px

  font-famliy, set the text font, such as font-famliy: "Microsoft elegant black."

  font-style, font set inclined, as font-style: italic variable inclination

  font-weight, set the text is bold, font-weight: bold

  

  line-height, set the text line height, such as line-height: 24px

  text-decoration, set the text underlined .text-decoration: none, usually for cancellation underlined hyperlinks

  text-indent, provided maiden indented text, such as text-indent: 21px. # Received line locked 21px

  Alignment text-align, set the text, such as text-align: center # center

<div class=“hhh”>1111</div>
<style>

  .hhh {

    color:red

    font-size:22px     

    font-family: "Times New Roman"

    font-style:italic

    font-weight:bold

    line-height:35px

    text-indent:22px 

    text-align: center right and right Bureau

}       

</style>

Cancel underscore

<a hred=“www.4399.com”>Game</a>

----------------------

<style>

  a{

    text-decoration:none

  }

</style>

 

 

[CSS border properties border, three elements can not be lost]

<style>

  .hhh {

    width:200px

    height:200px

    boder: 1px solid red border setting, a first value is the line thickness

                      The second type is a line, solid line solid, botted dotted, dashed dotted line

                      The third color may be red, can be # 000000

                        

    border-top: 1px solid red separately provided on the frame

    border-bottom: 1px solid red    separately under the border sorrowful

    left-border: 1px Solid Red } separate left border and right empathy

</style>      

  Border fillet settings

  

<style>

  .hhh {

    weight:220px;

    height:222px;

    borde:1px solid red; 

    border-radius: 50%; create a border, border, then variable radius fillets

    ### border-radius: 10px, 22px, 56px, 77px ;, fillet arc are provided, the first one is the upper left, the second upper right, clockwise

</style>

 

Set the shadow effect

<style>

  .hhh {

    width:222px

    height:212px

    border:1px solid red

    box-shadow: 10px 10px 10px 10px inset a first x-axis offset value, positive negative left and right; the second y-axis positive offset at the negative fuzzy third value, the fourth diffusion, fifth value It is the color. Sixth value (optional) inset into the inner shadow 

    }

</style> 

  

  Set the Background Style

<style>

  .hhh {

    width:222px  

    height:221px

    background-color:red

    background-image: url (./ xxx.jpg) write picture address set the background image

    background-size: 100% 100%} higher horizontal image size setting

    background-position: 592px 259px, select the display position of the picture content

    background-repeat:no-repeat

    ## background: url (./ xxx.jpg) no-repeat general combinations write

</style>

Guess you like

Origin www.cnblogs.com/simplecat/p/11354991.html