Study Notes on CSS website layout recording (1)

Start today and study the front-end technologies carefully ~~~ Come on ~~~

We recommend this "CSS website layout record" (version 2nd) to beginners. Although this book has been a little older, it is very classic.

Note: The CSS described here is CSS 2.0.

 

Chapter 1 Overview of Web standards and CSS layout

1.1 History and Development of Web standards

1.1.1 Web standards

Web standards are a set of standards developed by W3C (World Wide Web Consortium) and other standardization organizations. They contain a series of standards, including HTML, XHTML, JavaScript, and CSS.

The purpose of Web standards is to create a unified technical standard for the Web presentation layer, so as to display information to end users through different browsers or terminal devices.

1.1.2 Web presentation layer technology

　　The Web itself is composed of a very complex technical architecture, but its ultimate goal is to target users of browsers or applications, it also provides a visual and easy-to-operate information interaction platform for the latter. The presentation layer technology refers to the technology that displays information to users and provides interactive behavior to users. Simply put, the expression is the style, the technology layer is a bunch of program code, and the presentation layer brings visual things.

At present, the W3C Web standards are a collection of such a presentation layer technology and the only cross-platform cross-Client technology.

1.2 composition of Web standards

　　The Web standard consists of three parts: Structure, Presentation, and Behavior ).

1.2.1 Structure)

　　Structure is used to sort and classify the information used in the webpage. Standard Web technologies used for structural design mainly include HTML, XML, and XHTML.

1. HTML (Hyper Text Mark-up Language) Hypertext Markup Language

　　This is the most basic Web Description Language. HTML text is a descriptive text composed of HTML command labels. HTML labels can describe text, graphics, animations, sounds, tables, links, and so on. The structure of HTML consists of the header and Body. The header describes the information required by the browser. The subject contains the specific content to be displayed.

　　2. XML (The Extensible Markup Language) Extensible Markup Language

XML was originally designed to make up for the shortcomings of HTML and meet the needs of network information publishing with its powerful expansion. Later, XML was gradually used to convert and describe network data.

　　3. XHTML (The Extensible HypterText Markup Language) Extensible Hypertext Markup Language

XHTML is a more rigorous and pure HTML Version. To put it simply, the purpose of creating XHTML is to achieve the transition from HTML to XML.

1.2.2 Presentation)

　　Presentation technology is used to control the display of structured information, including layout, color, size, and other style controls. In the current Web presentation, the standard Web technology used for presentation is mainly CSS technology.

CSS (Cascading Style Sheet) stacked Style sheet
　　W3C creates the CSS standard to describe the layout design of the entire page with CSS, which is separate from the structure in which HTML is responsible. The combination of CSS layout and the information structure described in XHTML can help designers to separate the presentation and content, making site construction and maintenance easier.

1.2.3 Behavior (Behavior)

　Behavior refers to defining a model in the entire document and writing interactive behaviors. It is used to compile documents that users can perform interactive operations. The Web standard technologies used to present behaviors mainly include DOM and ECMAScript.

1. DOM (Document Object Model) Document Object Model

　　According to W3C DOM specification, DOM is an interface for communication between the browser and the Web content structure so that standard components on the page can be accessed. It provides Web designers and developers with a standard method to access data, scripts, and presentation layer objects on the site.

　　2. ECMAScript scripting language (JavaScript extension scripting language)

It is a standard scripting language (JavaScript) developed by Computer Manufacturers Association (CMA) to implement interactive operations on objects on a specific interface.

1.3 differences between CSS layout and table layout

　　According to the current Web standards, the most ideal technical structure uses HTML or XHTML to design webpages. We recommend that you use XHTML to write structures in more rigorous languages, CSS is used to display the webpage layout.

1.3.1 advantages of CSS

1.3.2 traditional table layout and CSS layout

　　In fact, the traditional table layout only utilizes the zero border feature of the HTML table element. When a table element is displayed, the cell's border and spacing are set to 0, that is, the border is not displayed. Therefore, you can divide the elements in the webpage according to the layout, they are placed in cells of the table to achieve a complex typographical combination.

The most common table layout code is to embed some design code between HTML tags, such as width = "100%" and border = "0, this hybrid writing of a large number of style design code is mixed in table cells, greatly reducing the readability and high maintenance costs.

The core of table layout is to design a table structure that meets the layout requirements. Content is loaded into each cell, and spacing and spaces are implemented through many transparent gif spaces, the final structure of a complex table, and such a complex table design makes the volume of webpage files huge, is not conducive to design and modification, and eventually leads to a slow speed of Browser Download and resolution.

CSS layout can fundamentally change this situation. The Thinking Method of CSS layout is no longer put into the design of the table element. Instead, it is replaced by another element div in HTML. Div can be understood as a layer or a block. div is a simpler element than a table. The div function is only used to mark a piece of information for later style definitions.

When using a div, you do not need to organize the layout through cells in the table. With the powerful style definition function of CSS, you can control the page layout and style more easily than tables. A part of div style design code is listed below:

　　XHTML section:

    ....

　　CSS section:

   { :;  :;  :;  :;  :;  :;  }

The. content {} area defines a style name named content in CSS, which is used to control the style of all objects whose class is content on the page.

1.4 transition to Web standards

　　The purpose of Web standards is to achieve the separation of Web Page structure, performance, and behavior, achieve the best architecture, and provide website availability and user experience. Using the following standards and methods for website construction is the most ideal choice.

1.4.1 transition from HTML to XHTML

　　Why use XHTML?

　　In fact, XHTML is the next version of HTML, which is used to replace HTML and help transform to XML. XHTML is not designed for ultimate performance. It is mainly used for Structure Design of webpage content. Its rigorous syntax structure is conducive to browser parsing. It is a document-oriented design language.

Currently, XHTML standards mainly include Transitional, Strict, and Frameset.

• Transitional: a loosely Transitional XHTML application that allows users to write XHTML documents using some HTML tags. This method is recommended.
• Strict mode: a Strict type of application. XHTML cannot use any style representation labels and attributes.
• Frameset: Applicable to framework web pages.

1.4.2 play the role of CSS

1. Reasonable CSS file structure

　　Although CSS achieves the separation of style design and content, CSS files should have good hierarchies and specifications to further improve the maintainability of style design.

　　2. Advantages of inheritance and reuse

The advantage of using CSS lies in its excellent reuse feature. A piece of CSS design code can be used in multiple regions at the same time. In addition to the reuse function, CSS can also implement inheritance mechanisms similar to those in object-oriented programming. The Inheritance Mechanism can further improve the style structure of websites.

　　3. Design cross-platform code

CSS also has some disadvantages. Due to the different rendering methods of browsers of different brands and different versions, there are also some differences in CSS parsing. For these reasons, CSS design should also have a certain degree of cross-platform compatibility, so we should try to reduce the use of uncommon attributes when coding. If you want to be compatible with older browsers, you should also note that some CSS hack code is left.

CSS hack can be simply translated into CSS hacking programs. This is similar to expecting the browser to receive the encoding, which can effectively fix the browser parsing problem.

　　4. CSS style design with good availability

Availability is designed to meet the user needs of interactive products (software and websites) to the maximum extent. The purpose of CSS style design with good availability is to create a better interactive website for users to use.

　　5. Use a DOM-based scripting language to write interactions

DOM is also generated to implement cross-platform and cross-Browser Scripting applications. Currently, most browsers support standard DOM. Using a DOM-compliant scripting language, you do not need to check different versions of the browser and write several different sets of code. As long as the DOM-compliant browser is used, the same Code can complete all supported operations. Currently, JavaScrit is a scripting language that complies with DOM standards.

1.5 FAQs

1.5.1 is the table still used after the Web standard is used?

1. About the table

　　After the Web standard is used, it does not mean to exclude the use of tables, but to use tables as Web page layout. The layout of page elements is unreasonable and the table type is used to display data. The function of a table is not webpage layout. The layout task should be handed over to CSS for processing.

　　2. About Other Elements

Based on experience, some elements in the XHTML standard are divided into three categories.

• Auxiliary layout design elements

It refers to div, span, and other elements. Their main function is to layout the entire page.

• Structured or information elements

Table, ul, pre, code, and other elements. They are information display and control elements.

• A. meta Element

They can be used to implement some special functions.

1.5.2 Can I continue to use HTML to design webpages?

　　The answer is yes. XHTML is recommended only because the HTML design format cannot meet the website architecture principles of performance and content separation. If you continue to use HTML to build a website, there is no difference in the final goal.

1.5.3 why not use XML directly

　　XML is the description format of future data. Currently, it is not suitable to directly use XML to build websites, because it is technically difficult.

1.5.4 what is website Reconstruction

　　Website reconstruction can be understood as a change to the old HTML table layout method, using a new website structure and code writing method that conforms to Web standards. In a deeper sense, we hope to use Web standards to provide an interface to increase website benefits. This benefit can be simply understood as two aspects: scalability and maintainability.

 

To be continued .......