CSS missing articles and CSS missing articles

Source: Internet
Author: User

CSS missing articles and CSS missing articles
Previous: I have already introduced some basic knowledge points about CSS. CSS is used to set samples for the page. In general, in a website, CSS should be independently enclosed in a single. CSS external file. Style settings are not difficult in general, but they need to be careful and patient. When I used to make simple static pages, I often encountered bugs, such as clearing floating pages and layout of the holy cup. These knowledge points are not difficult, but they are trivial, and I have not yet been able to fully organize them. Later, I will make a specific analysis based on the specific problem. Today, I will mainly look at the last summary and check for missing information, if you are interested, you can communicate with each other below. 1. fireworks tools

-- This tool is used to compile web pages based on the design drawing, and picpick is commonly used. I use this tool. Below is a brief introduction to this tool.

1.1 normal switch

K V H Z U T I G
Slice Xiao Hei Xiaoshou Zoom Graphics Text Color Extraction Color Filling

1.2 temporary Switch

Ctrl -- Xiao Hei Ctrl + space -- zoom in
Space-hand Ctrl + Alt + space -- zoom out
Normal zoom-in and zoom-out will be automatically moved to the middle of the image. The temporary zoom-in and zoom-out are still in the original position, which is convenient to use (Ctrl + N New; Ctrl + O open)

1.3 Other skills

Unnecessary guides are automatically deleted after being dragged back to the ruler;

Ctrl + plus sign or scroll wheel to enlarge the image Ctrl + minus sign or scroll wheel to zoom out the image (inconvenient)

1.4 lock the image before measuring the image:

2. Two website construction strategies

Progressive enhancement-progressive enhancement: At the beginning, only the least features of the site are built, and then the function is continuously added to various browsers.

Elegant downgrade-graceful degradation: Build the complete functions of the site from the very beginning, and then test and fix the problems in the browser.

3. Introduction to common la s

1) Fixed Layout

2) Responsive Layout

3) stream Layout Fluid Layout

4) Grid Layout

5) Waterfall flow Layout Waterfall Layout

6) Holy Grail Layout

4. Set the website icon

4.1 Enable Logging;

4.2 place the icon in the root directory (or another directory) and insert it between the

4.3 shortcut

4.4 websites using web icons: http://www.bitbug.net/

5. Pay attention to the reference sequence when referencing a style file: base is a public style, index is a specific style, and the style of a specific webpage should be placed behind the public style to overwrite it.
Link label   Learn more
Charset Character encoding method of the linked document Almost no mainstream browsers support this attribute
Href Location of the linked document  
Hreflang Language of the text in the linked document  
Rel Link between the linked document and the current document Commonly used stylesheet and shortcut icon (sizes-the size of the website icon, applies only to rel = "icon ")
Rev Opposite to rel, reversed relationship Almost no mainstream browsers support this attribute
Target Window or framework in which the linked document is loaded Almost no mainstream browsers support this attribute
Type Link Document Type  
6. Hierarchy

6.1 remember to add positioning; otherwise, the z-index will not take effect.

The box behind 6.2 will hold down the front box, and the box with a high z-index will hold down the box with a low z-index; the higher the box is than its own z-index, the closer it will be, in addition to looking at themselves, they also need to look at their parent level. The higher the parent level, the higher the child level.

Summary:The level should not only compare the child level, but also compare the parent level (fight dad ). In theory, there is no maximum value for z-index, but it is actually the 32 power of 21474836472. If the minimum value is not 0, a negative number can be obtained.

7. CSS3 rounded corner (border-radius)

7.1 CSS3 attribute, used to add a rounded border to an element:

Border-top-left-radius: 2px;

Border-top-right-radius: 2px;

Border-bottom-right-radius: 2px;

Border-bottom-left-radius: 2px;

7.2 Abbreviation: border-radius: 2px; sequence is set clockwise from the upper left corner (upper left right bottom left)

8. Absolute positioning can change the display mode of elements, but relative positioning cannot be 9. translucent effect:

Background: rgba (0, 0,. 2 );

Red green blue alpha (red value green value blue value transparency)

The color value ranges from 0 ~ 255; Transparency value range: 0 ~ 1; if it is a zero point, the preceding Zero can be omitted.

 

 

Supplement 1: Emmet syntax

Http://docs.emmet.io/cheat-sheet/

Supplement 2: webpage Performance Optimization

Css Compression

Http://tool.oschina.net/jscompress/

Web page performance test

Http://www.webpagetest.org/

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.