CSS Boulevard to simplicity-read CSS zen garden

CSS to simplicity

We only acknowledge that there are things that do exist one by one. All universal concepts that interfere with this specific existence of holes are useless cumbersome and nonsense and should be abolished. Do not add entities unless necessary.

--- Occam Razor

I looked for two theme studies over the weekend:CSSRegular Expression

After reading "CSS zen garden", the first time I read it, I felt that it was not enough. The second time I wrote down the key points:
 

1.HtmlThe purpose of a language is to represent a document in a structured manner.. Some basic HTML elements are abused in the page layout. For example, table is used to display two-dimensional data, rather than for page layout, because it has always performed well. Font is a document-level label, which is indeed overused.
 

2. HTML only pays attention to the document. As for the style, it is completely presented to CSS, so that the page is changed to two layers: The document layer represented by HTML, and the presentation layer represented by CSS, you can add a javascript layer for flexibility between the two layers.
 

3. Check the code that is frequently deleted by us in this line: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Document Type Declaration makes it necessary for browsers and users (including search engines) to know the HTML language type you are using. The subsequent title should summarize the content of the current page rather than the same system name.

4.Principle: Select HTML elements rather than HTML styles Based on the content and structure of the document.
In other words, the fewer HTML tags, the better.
For example, if p is used to contain paragraphs rather than line breaks, BLOCKQUOTE contains referenced statements instead of indentation.

5.Why is development based on web standards? Faster download of smaller files, better accessibility
(W3C content-accessibility guidelines)

6. There are few HTML elements available in the XHTML standard, and some of them are more explicit. If you do not find a proper tag to describe a structure, you can use span Div instead. Of course, avoid abuse of Div. It is not a good idea to nest too many layers.

7. The application style can be reused using class ID, while the latter is unique on a page.

8. add such an empty script on the <SCRIPT type = "text/JavaScript"> </SCRIPT> page to solve the short-term lack of document styles in IE.
 

9. If IMG is used on the page, our page will be restricted to this determined image. The recommended replacement solution is:
<Div id = "IMG"> <span> </div> An Important Role of the span tag is image replacement.

10. A standard-based design is very importantTargetIs to avoid unnecessary elements.

11.Content determines the styleIf the content itself is very complex and is enough to attract the attention of viewers, there is no need to add too many modifications.
 

12.IconIt is a simplified symbol used to identify a thing and concept, or to replace a long text with an abstract image.

13.LineThe function is to increase the page's rhythm and hierarchy, but too many lines will give the viewer a hint of the grid structure, whether your original intention is like this or not. Therefore, the line is only used in the most desired place.

14.Page whiteIt is a good idea. The text needs to breathe, and the viewer needs to think about it. The gap is not empty, and the information display method is more elegant, making the viewer feel relaxed.

15.Light and ShadowThe role is to enhance the sense of real-life distance and attention, and ultimately how to use the light source. Incorrect use of the light source will make the problem worse, such as inconsistent light effects.

16.Shape:The circle is often associated with women, warmth, comfort, and love. The circle is often associated with communities, groups, patience, sports, and safety. A triangle is often reminiscent of a male expression, such as strong, attacking, and sporty. The viewer's eyes are often pointed in the direction of edges and corners. Pointing to the top of the page indicates an attack, and pointing to the bottom of the page implies a negative meaning. Square implies that the power and foundation can make it look stable.

17.Color:Blue is a widely accepted color in the world. Both red and white are enhanced. Green makes people connect to money in the United States, and is not necessarily in other cultural environments. The orange logo reduces the price, which is also a worldwide consensus. Yellow represents warmth and optimism. Purple has always been a taboo for page color. Brown is a neutral color. Black represents heavy, white represents pure, but both colors have a hint of sorrow and death.
Different colors may also lead to different psychological associations of viewers. CSS now supports the color in the "17" column.

18.Pattern: It is a small visual element that is repeatedly filled into the specified area. The CSS background-repeat attribute can solve this problem flexibly.

19.Layout:The HTML document stream is displayed on the page in the declared order. Absolute can delete the position in the document from the original position and reposition it to any new position; float is not a positioning option, but a space is allocated to the element, and other elements in the document are automatically surrounded; the advantage of float is that it is retained in the document and its surrounding elements are clearly aware of its position.
Absolute positioning is the most direct, effective, and simple layout method. If you need to consider the footer or other elements to understand the layout of the surrounding elements, float is the best choice.
 

20. ie will double the horizontal margin of the floating element. the right option is to add the display: inline

21. If a page needs to be divided into three columns with a header and a tail, you can use wraper if the width and height of the three columns are different.
Float method, and then footer uses clear: both to clear the floating definition defined above.

22. Clever combination of layout, the only thing that may limit the work is creativity.

23. The liquid page width of the stream layout is specified by percentage. Therefore, when the browser size changes, the page width also changes. The page width remains unchanged when the layout is fixed.
 

24.Center page: Path 1: Set a div outside the element to be centered, Set width, and set margin-left margin-Right to auto
Path 2: set text-align as the center and apply it to the body. Unfortunately, we need to add a code with the left-aligned text because the content text is also centered.
Path 3: Use auto margin and text alignment in combination: Use Path 1 and set text-align to left
Path 4: Use absolute position for both the negative outer margin: Position: absolute left; 50% margin_left:-pixel. This is the best solution currently.

25.Logo: Why are many websites in the upper left corner? Because the viewer's eyes first fall here;
The content importance in the upper-right corner is slightly higher than that in the upper-left corner, but is higher than that in other parts.

26.Content overflow:When using float, you must clear the float at the same time. When using floating, content overflow is the most likely case. method to limit overflow: 1. clear floating 2. at the same time, it is better to use the overflow method. 3. skew may also cause content overflow. unit: Use em to replace PX

27.Image:There are many image formats, but there are only three suitable for the Web: gif jpeg png; JPEG does not support transparency. gif supports 1-bit transparency. PNG supports 8-bit transparency.

Movie for the weekend: "Boys are self-reliant, do not bully teenagers, poor boys" Starring: Beyond

Remember to change water for flowers on Monday!

Let life be beautiful like summer flowers and death like autumn leaves.