CSS sprites-Simple example allows you to quickly grasp the essence of CSS Sprites

This period of time has touched the concept of CSS sprites, one is in the use of CSS sliding door, the other is in the use of YSlow analysis site performance, so the concept of CSS sprites has a strong interest. On the internet to find a lot of information, but unfortunately most of them are a few words, many of which are direct translation of foreign materials, but also directly recommend foreign information site, helpless English has no clearance, basically did not understand what CSS sprites, not to mention how to use.

Finally, in the blue ideal of an article was inspired, pondering the long time, only to figure out the connotation of the inside, the following will be through my understanding to help others more quickly to master the CSS sprites.

A brief introduction to the concept, about its concept, the Internet is everywhere, here simply to mention.

What is CSS Sprites

CSS sprites literal translation is the CSS Wizard, but this translation is obviously not enough, in fact, by merging multiple images into a map, and then through the CSS of some technical layout to the Web page. The advantages of this is also obvious, because more pictures, will increase the HTTP request, undoubtedly prompted the performance of the site, especially the image of the site, if you can use CSS sprites reduce the number of pictures, will bring the speed of ascension.

Let's use an example to understand CSS sprites, inspired by the blue ideal of making a series of poker tutorials.

We just need to make a poker, take spades 10 for example.

The blue ideal can be directly fused to a large picture as a background, which is also a central idea of CSS sprites, is to merge multiple images into a diagram.

This is the integration of the figure, I believe that the PS familiar with the classmate should be very easy to understand, through PS we can combine multiple graphs as a graph.

Now we write the structure of the HTML:

<div class= "card" >
<div class= "front" >
<b class= "N1 N10" ></b>
<em class= "First Small_up1" ></em>
<span class= "A1 up1" ></span>
<span class= "A2 up1" ></span>
<span class= "A3 down1" ></span>
<span class= "A4 down1" ></span>

<span class= "B1 up1" ></span>
<span class= "B2 down1" ></span>

<span class= "C1 up1" ></span>
<span class= "C2 up1" ></span>
<span class= "C3 down1" ></span>
<span class= "C4 down1" ></span>
<em class= "Last Small_down1" ></em>
<b class= "N2 n10_h" ></b>
</div>
</div>

Here we analyze the emphasis points:

A: Card for this spades ten box or fast, the div to understand the students should be very clear about this.

II: I use span,b,em three kinds of tags represent three different types of pictures, span used to table the middle of the picture, B is used to denote the number, EM used to represent the small icon below the number.

Three: There are 2 kinds of declarations in class, one to locate the middle picture of the spades 10, one to define the direction (up, down).

The above is the basic concept of Div, this is not the point, but the div is not very clear to the students can understand.

Below we focus on the definition of CSS:

span{display:block;width:20px;height:21px; Osition:absolute;background:url (images/card.gif) no-repeat;}

This is the CSS definition of the span container, and the rest of the properties do not say, mainly on how to understand from this inside the CSS sprites.

Background image, we look at the address is the beginning of a large map of our integration, then how to display this large map of the specified location? Because we know that we do the spades 10, this big picture other images we do not need, this is used in the CSS Overflow:hidden;

But everyone is strange in the CSS definition of span there is no overflow:hidden ah, don't worry, we have in the definition card CSS inside set (this is the CSS inside the inheritance relationship):

. card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 Solid;}

Understand that this is not enough, but also to know width:125px;height:170px; This can be understood as a background image of the accurate cutting, of course, is not cut, but the rest of the extra part of the hidden, which is the magical effect of Overflow:hidden.

Through the above part of the explanation, you will be able to fully grasp the use of CSS sprites, through the so-called "cutting", and then through the positioning of the CSS technology to accurately spread these maps into the card inside!

PS:CSS positioning technology, you can refer to other materials, such as relative positioning and absolute positioning, here we can only try to use absolute positioning.

Finally, let's add:

Why take <span class= "A1 up1" ></span> such a structure?

Span this container is the main function is to store this large background picture, and in the inside to achieve "cutting", span inside the cut background is all content block inside universal!

Why is the following class declaring 2 properties?

Obviously, one is used to position the content block, and one is used to define the image in the content block, facing up and down, bearing!

Below we enclose the complete source of Spades 10:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> make a poker--spades 10</title>
<style type= "Text/css" ><!--
. card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 Solid;}
/* Middle Picture General settings */
span{display:block;width:20px;height:21px; Position:absolute;background:url (http://www.blueidea.com//articleimg /2009/02/6382/00.gif) No-repeat;}
/* Small Picture Universal settings */
b{display:block;width:15px;height:10px; position:absolute;font-size:10pt;text-align:center;font-weight:bold; Background:url (http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat; Overflow:hidden;}
/* Digital Universal settings */
em{display:block;width:15px;height:10px; position:absolute;font-size:10pt;text-align:center;font-weight:bold; Background:url (Http://www.blueidea.com//articleimg/2009/02/6382/00.gif) No-repeat;overflow:hidden;}
/* Coordinates point position */
. n1{left:1px;top:8px;}
. first{left:5px;top:20px;}
. a1{left:20px;top:20px;}
. A2{LEFT:20PX;TOP:57PX;}
. a3{left:20px;top:94px;}
. a4{left:20px;top:131px;}
. b1{left:54px;top:38px;}
. B2{LEFT:54PX;TOP:117PX;}
. c1{left:86px;top:20px;}
. C2{LEFT:86PX;TOP:57PX;}
. c3{left:86px;top:94px;}
. c4{left:86px;top:131px;}
. last{bottom:20px;right:0px;}
. n2{bottom:8px;right:5px;
}
/* Large Icon black Mei Fang four pictures-Upper direction */
. up1{background-position:0 1px;} /* Black peach */
/* Large Icon black Mei Fang four pictures-Next direction */
. down1{background-position:0 -19px;} /* Black peach */
/* Small Icons Black Mei Fang four pictures-Upper direction */
. small_up1{background-position:0 -40px;} /* Black peach */
/* Small Icon black Mei Fang four pictures-Next direction */
. small_down1{background-position:0 -51px;} /* Black peach */
/*a~k digital picture-upper left corner */
. n10{background-position:-191px 0px;left:-4px;width:21px;}
/*a~k Digital picture-lower right corner */
. n10_h{background-position:-191px-22px;right:3px;width:21px;}
/*a~k digital picture-upper left corner Red character */
. n10_red{background-position:-191px 0px;}
/*a~k Digital picture-lower right corner red character */
. n10_h_red{background-position:-191px-33px;}
-
</style>

<body>
<!--10 characters--
<div class= "card" >
<div class= "front" >
<b class= "N1 N10" ></b>
<em class= "First Small_up1" ></em>
<span class= "A1 up1" ></span>
<span class= "A2 up1" ></span>
<span class= "A3 down1" ></span>
<span class= "A4 down1" ></span>

<span class= "B1 up1" ></span>
<span class= "B2 down1" ></span>

<span class= "C1 up1" ></span>
<span class= "C2 up1" ></span>
<span class= "C3 down1" ></span>
<span class= "C4 down1" ></span>
<em class= "Last Small_down1" ></em>
<b class= "N2 n10_h" ></b>
</div>
</div>
</body>

CSS sprites-Simple example allows you to quickly grasp the essence of CSS Sprites