Sprite and unit of CSS, CSS sprite Unit

Sprite and unit of CSS, CSS sprite Unit

 
(1). css sprite Technology

 
For example:   
Improvement:   
Summary:
I cannot stick to a certain tip (I need the least number of requests) and undermine the overall balance.
 
 
 
(2). Absolute unit and relative unit
 
input,textarea,selectThese control elements have the text size and are not directly inherited by default.bodyAnd other parent labels. Therefore, we need to reset it. Otherwise, 16 pixels of text will scare users.
 
Initially, some large websites were set up as follows:
Codeinput, textarea, select { font-size: 12px; }

After reading this, Weibo still looks like this (// zxx: countless times It turns out that if you want to give an example, Weibo looks for a correct image ):
 
However, this setting is not good. Why? Let's see the next story of the crab and the octopus! It is not flexible and cannot automatically adapt to it. It will only become a trapped beast, allowing us to slaughter people.
This is a good practice:
Codeinput, textarea, select { font-size: 100%; }

There is no doubt that this best practice has nothing to do with any shit experience. Why? You will know when you use it.
By the way, when I think of other things temporarily, I see many people write two-layer tag buttons, there will be code similar to the following:
Code.redbtn { height: 24px; ... }.redbtn .btn { height: 24px; ... }

If you do not write a heightheightIf you have a sense of security, you can write like this:
Code.redbtn { height: 24px; ... }.redbtn .btn { height: 100%; ... }

Actually, there isheightIt is redundant. This is enough:
Code.redbtn { ... }.redbtn .btn { height: 24px; ... }

Remember, if the height of the internal and external labels is the same, do not show the same value at the same time.

Question about css sprite ??

Because the smallest unit in web design is usually pixel .. therefore, it is entirely possible to achieve the desired effect by precisely controlling the display coordinates of the background image .. lz can define a class .. for example ". bg_sprite "..
. Bg_sprite {background-image: url (/whole graph address); background-repeat: no-repeat}
Reference this class... then define the background coordinates one by one in the element... the following are key attributes ..
# Ico1 {width: container size; height: container height; background-position: X coordinate Y coordinate}
# Ico2 {width: container size; height: container height; background-position: X coordinate Y coordinate}
# IO3 {width: container size; height: container height; background-position: X coordinate Y coordinate}
. Nav {width: container size; height: container height; background-position: X coordinate Y coordinate}
......
Note .. the container size must be limited to the position of the background image element .. also .. the XY axis is calculated relative to the upper left corner of the entire image .. so the value must be clear .. description ..
You can search for css sprite ..
Also .. if you want to define the background attribute of list or dl .. the container is not used .. you need to vertically arrange the elements in the background image .. and the spacing should be large .. this will not cause background image interference due to insufficient length ..




How to merge css sprite?

Css genie.
For example, many background-image background images are set in your css. These images are single. When a webpage is loaded, each image initiates a request. This is a very old practice... in the past, all the web pages were pursuing this. The smaller the images, the better. Now, we can put all these small images in a large image (through ps and other image programs ), use the background-position when writing css background settings to reduce the number of requests. Just practice it yourself... you can refer to Baidu's related knowledge or refer to the practices of many large websites.