Summary 1: Background Image merging, hack, browser kernel prefix, pseudo class after before

Directory: 1. Background Image merging and CSS Spirit2. Basic PS shortcut keys 3. Basic hack technology writing. Why not? 4. kernel prefix 5. pseudo class afterbefore

1. Background Image merging and CSS Spirit

Two background image merging methods are available: ① You can combine the background image into an image by PS, and then use background-position to locate the background image. ② If you don't know the PS, you can use the CSS background image merging tool to directly select the image and generate an image in the corresponding format online, which is convenient and quick.   Background Syntax: Background-color: red | # RGB; Background-position: X axis coordinate Y axis coordinate | left | right | center | top .. Background-size: 100px | 30% | cover | contain;Online Testing Background-repeat: repeat | no-repeat | repeat-x | repeat-Y Background-origin: border | padding | content Background-clip: border-box | padding-box | content-box Background-attachment: fixed | scroll Background-image: url Abbreviated form:Background: color url () positon repeat; Note:If only one value is set for the attribute value of background-size, the second value is set"Auto". Cover:To extend the background image to a large enough size, so that the background image completely overwrites the background area. Contain:Extend the image size to the maximum size so that its width and height fully adapt to the content area. Technical advantages of background image merging:The background image merging technology can reduce requests to the server, save time and bandwidth, and greatly improve website acceleration. It can achieve rounded corners on both sides and infinitely extending in the middle. it overwrites the parent label through the sub-tab background, nesting the three layers, intercepting the middle part of the image and the left and right sides, calculating the position of the image, and then using position to locate the image.

2. Basic PS shortcut keys

Ctrl + w disable Ctrl + r Ctrl ++ zoom in Ctrl +-zoom out Ctrl + 1 to 100% views Ctrl + 0 restore to the best view Ctrl + d cancel Selection Ctrl + t deformation during deformation, press shift to keep the width and height unchanged, and press Enter to exit deformation. Alt + Delete foreground color Filling Ctrl + Delete background color Filling Ctrl + z undo Ctrl + Alt + z undo multiple times Switch space to mobile status Ctrl + g layer Group

3. Why is there no need to write hack technology?

CSS hack:The process of writing different CSS codes for different browsers CSS Hack has three forms,CSS attribute prefix,Selector prefixAndIE condition annotation Method ① Attribute Prefix: IE6:_Height: 20px; IE7:+Height: 20px; IE6/IE7:*Height: 20px; IE6.7.8.9.10: height: 20px\ 9; IE8.9.10.11: height: 20px\ 0; IE9.10: height: 20px\ 9 \ 0; Advantages and disadvantages of Hack: We try to avoid using CSS hack. However, in some cases, we have to use hack to ensure downward compatibility with the user experience. For example, IE8 and earlier versions are not supported. With CSS3, our project page uses a large number of new CSS3 attributes for normal rendering in IE9/Firefox/Chrome. In this case, if css3pie or htc is not used Or conditional comments or other methods, you may have to get the exclusive hack of IE8-out. Although hack is good for page consistencyExcessive abuse may cause html Messy documents, increasing management and maintenance burden. I believe that as long as everyone works together, Use less, use hack with cautionIn the future, browser vendors will be prompted to keep increasing standards. And smoothly transits to the mainstream era of standard browsers. Abandoning the old IE hack will surely reduce the complexity of our coding and reduce our useless work.

Kernel prefix

Browser	Kernel prefix	Kernel
FF	-Moz	Gecko
IE	-Ms	Trident
Chrome	-Webkit	Blink
Opera	-O -Webkit	Persto Changed to blink.
Safria	-Webkit	Webkit

Pseudo class after before

: Before AND: after are used in the specified element.Content(Rather than the element itself) insert a row element that contains the content specified by the content attribute before or after. : Before: add content before the element  This pseudo element allows the Creator to insert the generated content at the beginning of the element content. By defaultA pseudo element is a row element.However, attributes can be used.DisplayChange this. : After: add content after the element.  This pseudo element allows the Creator to insert the generated content at the end of the element content. By defaultA pseudo element is a row element.However, attributes can be used.DisplayChange this.

Effect:

[Html]View plaincopyprint?

1. Simple code implementation
2. <Html>
3. <Head>
4. <MetaCharset = "UTF-8">
5. <Title>Testing</Title>
6. <Style>
7. . Wrap: before {
8. Content :'';
9. Width: 100px;
10. Height: 50px;
11. Display: block;
12. Background: # F00;
13. }
14. . Wrap: after {
15. Content :'';
16. Width: 100px;
17. Height: 50px;
18. Display: block;
19. Background: # Fa0;
20. }
21. </Style>
22. </Head>
23. <Body>
24. <DivClass = "wrap"></Div>
25. <Script></Script>
26. </Body>
27. </Html>

Pseudo-class floating:

. Clearfix: after {content: "\ 200B"; display: block; height: 0; clear: both ;} . Clearfix {* zoom: 1 ;}