Can anyone explain the following code?

I am unable to understand especially in background property.

 .stars div a {
      background: transparent url(sprite_rate.png) 0 0 no-repeat;
      display: inline-block;
      height: 23px;
      width: 12px;
      text-indent: -999em;
      overflow: hidden;
  开发者_开发百科  }

background:

transparent hope it's clear :)

url(sprite_rate.png) a background image

0 0 a position in the container - left top corner

no-repeat the background image shouldn't repeat

display: inline-block;

a box behaving like an inline element, see http://www.w3schools.com/css/pr_class_display.asp

height: 23px;
width: 12px;

size of an element

text-indent: -999em;

kicks the element far beyond the visible area, http://www.w3schools.com/css/pr_text_text-indent.asp

overflow: hidden;

hides the content that doesn't fit in the element, http://www.w3schools.com/css/pr_pos_overflow.asp

The CSS background property is a shorthand property of the following properties below: The order of the property values for the CSS background property are:

background-color
background-image
background-repeat
background-attachment
background-position

It does not matter if one of the property values is missing, as long as the ones that are present are in this order.

In your case you're doing the following:

background: transparent url(sprite_rate.png) 0 0 no-repeat;

transparent

That means that the background color is transparent

url(sprite_rate.png)

The url of the background image is sprite_rate.png.

0 0

The left and top position is 0px.

no-repeat

The last parameter is no-repeat which means the image will not repeat on the x- and y- axis.

Here's link to all the properties in correct order:

http://www.w3schools.com/css/pr_background-color.asp

http://www.w3schools.com/css/pr_background-image.asp

http://www.w3schools.com/css/pr_background-position.asp

http://www.w3schools.com/css/pr_background-repeat.asp

You can read more about the background shorthand property at: http://www.w3schools.com/css/css_background.asp

The syntax for the background CSS shorthand property is:

background: { background-color background-image background-repeat background-attachment background-position | inherit } ;

It combines a large number of background properties into a single shorthand property. See:

• http://reference.sitepoint.com/css/background for more information.

The technique you're looking at is known as CSS Sprites. You can find more information about it here:

• http://www.alistapart.com/articles/sprites

Draws the top-left corner of sprite_rate.png over an otherwise transparent background without repeating (tiling) the image. It will be displayed inline (between text) but act as a block and will be 12 pixels wide and 23 pixels high. The first line of text will be indented so far to the left that most likely none of it will be visible, especially since overflow will be hidden (nothing outside the 12x23 rectangle will be rendered).

All of that could have been googled.