CSS makes Web pages easier to design and maintain

Source: Internet
Author: User
Tags inheritance

 css syntax makes Web page content and visual rendering separate, on the one hand make the page maintenance work easier, not because the content or visual effect changes affect the other side, such a page design, also to search engine more friendly, easier to search the page content.
 
      css,cascading style sheets  threaded style sheet, Web page appearance control syntax

The

      World Wide Web was originally made up of the concept of a file, and it was hoped that through web pages and hyperlinks, it would be easier to connect files with knowledge. It is not difficult to see the nature of the WWW from the extensive use of the label of the concept of the file in HTML syntax (for example, the

of a representative paragraph representing a title).
&NBSP
      However, www is more attractive than other early internet media, because it can embed and present pictures directly on the page, which makes the WWW develop rapidly and makes the page visual decoration much more popular. But the Web page inherent file character, let the image typesetting design difficult to display hands and feet, so like the use of nested forms and images of the page into the popular, in order to achieve accurate element positioning and more exquisite visual effects. This Pandora box opened, causing a lot of uncontrolled chaos, so that the page original code difficult to read and maintenance.
 
      in order to improve the visual performance of the Web page, the world's first edition of the CSS in 1996 provides a solution. However, because CSS relies on browser support, so long since the implementation of CSS has been poor, to IE 6, Firefox and other mainstream browsers to support CSS, only gradually improved.
 
      CSS Syntax makes Web page content and visual rendering separate, on the one hand make the page maintenance work easier, not because the content or visual effect changes affect the other side, such page design, It is also more friendly to search engines and easier to search for page content. Second, CSS can also increase the page in different media rendering effect. The same page, can be based on different uses, such as screen display or printing, and automatically switch to different CSS syntax, so that rendering optimization. Also because of the more and more media read the page (such as mobile phone, PDA), CSS can be flexible to adjust the presentation, all more highlight the advantages of CSS in the Web page.
 
      selector    selector

To apply a style effect to HTML elements through CSS, you first have to point to a specific element, such as a title, paragraph, or hyperlink, and the specified method is called a selector.

The most basic selector, is the name of the specified HTML label element, along with the ID picker, category Picker, Virtual class, sub system, and so on, but these CSS selection methods, each browser has different support, such as IE6 does not support a child or a side of the selector.


Divist Abuse div Tags Designers

In fact, the use of CSS string and inheritance features, can create a precise, rich visual effects. But not just CSS, the abuse of grammar can improve.

In the past, nested table typesetting has been prevalent, resulting in Web source code difficult to read and maintain. However, if CSS designers do not make good use of string and inheritance, and a large number of Div block syntax for page layout, will make the page raw code filled with div tag, which is often the same as using nested tables, difficult to read, this designer is called "divist". CSS is not a panacea, you need to rely on the correct use of designers to achieve results.

Quirk Mode quirks pattern

When the browser is revised, usually reinforces the support for standard syntax for Web pages, but it also means that pages written in the past browser features have problems with rendering, and in order to maintain forward compatibility, browsers typically design standard patterns and "quirks" patterns to ensure that some old sites use looser, The grammar interpretation method with high fault-tolerant rate is presented.

Depending on the DOCTYPE and DTD declared by the Web page, the browser determines that page rendering will follow standard or quirk patterns.

Cascade Rule String Connection rules

CSS has threaded rules and degrees of clarity to handle style conflicts. Threaded rules are sorted by importance and decide which style to use.

In threaded rules, the most important is the user style labeled with "!import", followed by the author style sheet, which is also marked with "!import".

The author style sheet is more important than the user in the absence of a label "!import". By the importance of the rules, the browser can decide which style to render, and if the importance is consistent, the latter rule will overwrite the older rules.

Specificity Clear Degree

Because CSS has the properties of string and inheritance, an element may be assigned a different style. When this happens, the browser determines which style to render, depending on the degree of clarity.

Clarity stipulates that each selector has a count value, for example, the ID Picker's clarity is "0,1,0,0", and the class picker's clarity is "0,0,1,0", and when an element applies both, and some of the styles are conflicting, because the ID picker has a higher degree of clarity, it is based on its value.

CSS Hack CSS Tips

CSS in the browser support and implementation of different ways, even the existence of bugs, so that designers in the Cross-browser page design challenges. The techniques developed to solve these problems are called CSS Hack.

For example, IE 5 is implemented in the syntax of width, which differs from the standard set by the web, resulting in different results from other browsers. To solve this problem, and the so-called "box Model hack" skills, so that IE 5 and other browsers to render the same results.

Pseudo class Virtual Class

The most common type of virtual class is applied to the hyperlink syntax. For example, hyperlinks specify link colors (a:link), visited colors (a:visit), and mouse passes (a:hover).

In fact, virtual categories are not only used on hyperlinks, for example, a table or form input field, CSS can choose and specify a variety of states, but since IE 6 browsers only support a few virtual class syntax, even the most common hyperlinks also support incomplete (A:focus will not support), resulting in the use of limited people.

Inheritance inheritance

Inheritance is the principle that CSS is very efficient in design and can simplify the complexity of design. For example, after the "body" selector specifies the font and size, all elements that are contained underneath the "body" automatically inherit the style, and do not need one by one to specify the style for the elements of the child system.

Inherited attributes, which can also be overwritten by a specified value, so if the block requires a different font, you just need to reassign the new value to the block and you can use the new font. In this way, the number of picker can be greatly reduced.

float floating, the paper around the diagram

The function of the CSS is to make the block "float" by specifying the value of the "float" property, and move to the point by specifying the left and right position.

Although the plot is used in the graph, the text relations, but in the design practice, the more extensive application in the layout positioning. Another feature that is commonly used to locate a version is "position", which can specify any position in pixels precisely. By using "float" or "position", you can replace the precise positioning that you can achieve through a nested form in the past.


Related Article

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.