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

Source: Internet
Author: User

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 ;}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.