Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what is the css site layout". In the daily operation, I believe many people have doubts about what is the css site layout. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what is the css site layout?" Next, please follow the editor to study!

Chapter 1 Overview of Web Standard and CSS layout

1.1 History and Development of Web Standard

1.1.1 Web standard

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

The purpose of the Web standard is to create a unified technical standard for the Web presentation layer to present information content to end users through different browsers or terminal devices.

1.1.2 Web presentation layer technology

Web itself is composed of a set of very complex technical architecture, but its ultimate goal is to face the users of browsers or applications and provide the latter with a visual and easy-to-operate information interaction platform. The presentation layer technology refers to the technology that presents information to the user and provides the user with interactive behavior. Simply understand that the performance is the style, the technical level is a pile of program code, and the presentation layer brings what is visually seen.

At present, the Web standard formulated by W3C is a collection of such presentation layer technologies, and it is also the only cross-platform and cross-client technology at present.

1.2 composition of the Web standard

Web standard consists of three parts: structure (Structure), representation (Presentation) and behavior (Behavior).

1.2.1 structure (Structure)

The structure is used to organize and classify the information used in the web page. There are mainly several Web standard technologies used in structured design: HTML, XML, XHTML.

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

This is the most basic description language of Web. HTML text is a descriptive text composed of HTML command tags. HTML tags can describe text, graphics, animation, sounds, tables, links, and so on. The structure of HTML consists of two parts: head (Head) and main body (Body). The header describes the information needed by the browser, and the body 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, with its strong expansion to meet the needs of network information release, and then gradually used in the conversion and description of network data.

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

XHTML is a more rigorous and purer version of HTML. To put it simply, the purpose of establishing XHTML is to achieve the transition from HTML to XML.

1.2.2 performance (Presentation)

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

CSS (Cascading Style Sheets) cascading style sheet

The W3C created the CSS standard to describe the layout of the entire page in CSS, separate from the structure that HTML is responsible for. The combination of CSS layout and the information structure described by XHTML can help designers separate the performance from the content, and make the construction and maintenance of the site easier.

1.2.3 behavior (Behavior)

Behavior refers to the definition of a model within the whole document and the writing of interactive behavior, which is used to write documents in which users can operate interactively. The main Web standard technologies for expressing behavior are: DOM and ECMAScript.

1. DOM (Document Object Model) document object model

According to the W3C DOM specification, DOM is a communication interface between browsers and Web content structures, allowing access to standard components on a page. Give Web designers and developers a standard way to access data, scripts, and presentation layer objects in the site.

2. ECMAScript scripting language (JavaScript's extended scripting language)

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

1.3 differences between CSS layout and table layout

According to the current Web standard, the most ideal technical structure is to use HTML or XHTML to design web pages. It is recommended to use XHTML to write the structure in a more rigorous language, and to use CSS to complete the layout of web pages.

1.3.1 benefits of CSS

CSS is a kind of style design language that controls the layout style of web pages and can really separate the performance of web pages from the content. Compared with the style control of traditional HTML, CSS can accurately control the position of objects in the web page at the pixel level, support almost all fonts and font styles, and have the ability to control the style of the web object box model, and be able to carry out preliminary page interaction design. To sum up, CSS has the following main advantages:

Perfect browser support: the web page designed with CSS style is the most similar to the style under many platforms and browsers.

The performance is separated from the structure; in the CSS design code, through the internal import (Import) feature of CSS, the design code can be separated twice according to the design requirements.

Style design control function is powerful: the location of web objects typesetting, can carry out pixel-level accurate control and so on.

Superior inheritance performance (cascading): CSS code has basic object-oriented characteristics similar to OOP in the parsing order of browsers, and browsers can apply multiple styles according to the level of CSS and the order in which the same element is defined.

1.3.2 traditional table layout and CSS layout

In fact, the traditional table layout only takes advantage of the zero border feature of the table element of HTML. Because the table element can be displayed, the border and spacing of the cell are set to 0, that is, the border is not displayed, so each element in the web page can be divided according to the layout and put into each cell of the table respectively, thus realizing the complex typesetting combination effect.

The most common table table layout code is to embed some design code between HTML tags, such as width= "100%", border= "0" and so on. A large amount of styling code written in this hybrid style is mixed in the table cells, which makes it much less readable and expensive to maintain.

The core of table layout is to design a table structure that can meet the layout requirements. The content is loaded into each cell, and the spacing and spaces are occupied by many transparent gif. The final structure is a complex table. Such a complex table design makes a large amount of web files, which is not conducive to design and modification, and finally leads to the browser download and parsing speed is too slow.

Using CSS layouts can fundamentally change this situation. The way of thinking about CSS layout is no longer included in the design of table elements, but is replaced by another element in HTML, div. Div can be understood as a layer or a block, and div is a simpler element than a table. The function of div is only to mark out a piece of information for later style definition.

When using div, you do not need to organize the layout through its internal cells like a table. Through the powerful style definition function of CSS, you can control the layout and style of the page more simply and freely than tables. A portion of the div style design code is listed below:

XHTML section:

The code is as follows:

/ * indicates that a div is defined in the page and the class name content is used * /

....

CSS section:

The code is as follows:

[CSS]

.content {

Float: right; / * indicates that div floats on the right side of the current position * /

Margin: 10px 20px 10px 10px; / * set the outer margin attribute * /

Text-align: text in center; / * div is centered * /

Line-height: 160%; / * the text line height in div is 160% of the original height * /

Width: 50%; / * indicates that the width of the div is 50% of the width of the upper layer * /

Background-color: blue; / * indicates that the background color of div is blue * /

}

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

1.4 transition to Web Standard

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

1.4.1 from HTML to XHTML

Why use XHTML

In fact, XHTML is the next version of HTML, a set of transitional markup languages that replace HTML and help move to XML. XHTML is not designed for final performance, it is mainly used for structural design of web content, its rigorous syntax structure is conducive to browser parsing, it is a document structure-oriented design language.

At present, the standard of XHTML mainly includes three application modes: Transitional, Strict and Frameset.

Transitional approach: a loose transitional XHTML application that allows users to write XHTML documents using partial HTML tags. This method is recommended.

Strict way: a strict application, XHTML can not use any style of tags and attributes.

Frameset mode: the application mode for frame web pages.

1.4.2 play the role of CSS

1. Reasonable CSS file structure

Although CSS separates the style design from the content, the CSS file itself should also have a good hierarchical structure and specifications in order to further improve the maintainability of the style design.

two。 Advantages of inheritance and reuse

The advantage of using CSS lies in its good reuse feature, and a piece of CSS design code can be used by multiple regions at the same time. In addition to reuse functions, CSS can also implement an inheritance mechanism similar to that in object-oriented programming, which can further improve the style and structure of the website.

3. Design cross-platform code

CSS also has its drawbacks. Due to the different rendering methods between different brands of browsers and different versions, there are some differences in the parsing of CSS. For these reasons, CSS design should also have a certain cross-platform compatibility, coding should minimize the use of obscure attributes, if you want to be compatible with the old version of the browser, you should also pay attention to leaving some CSS hack code.

CSS hack can be simply translated into a CSS hacker program. This is similar to expecting the browser's code to be received, and can effectively fix the browser's parsing problem.

4. CSS style Design with good usability

The goal of usability is to make interactive products (software, websites) provide maximum satisfaction to the needs of users. The purpose of CSS style design with good usability is to create a better interactive website for users to use.

5. Use DOM-based scripting languages to write interactions

DOM is also created to achieve cross-platform and cross-browser applications of scripting languages. Currently, most browsers support standard DOM. Using a scripting language that conforms to DOM, basically no longer need to test different versions of the browser to write several different sets of code, as long as the browser conforms to DOM, the same code can complete all the supported operations. JavaScrit is currently a scripting language that conforms to the DOM standard.

1.5 FAQ

1.5.1 is the form still useful after using the Web standard

1. About forms

After using the Web standard, 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, the table format is used to display data. The function of the table is not to lay out the web page, the layout task should be left to CSS.

two。 About other elements

According to the experience, some elements in the XHTML standard are divided into three categories.

Auxiliary layout design elements

Refers to elements such as div, span, etc., whose main function is to lay out the entire page.

Structured element or information element

It refers to elements such as table, ul, pre, code, etc., which are elements of information display and control.

A, meta element

They can be used to achieve some special functions.

1.5.2 can I continue to use HTML to design web pages?

The answer is yes. Only XHTML is recommended because the design form of HTML can no longer meet the site architecture principle of separation of performance and content. If you continue to use HTML to build your site, there will be no difference in terms of ultimate goal.

1.5.3 Why not use XML directly

XML is the description format of future data. At present, it is not suitable to use XML to build a website directly, because it is technically difficult.

1.5.4 what is website refactoring

Web site refactoring can be understood as changing the old HTML table layout and using a new website structure and coding method that conforms to Web standards. In a deeper sense, we hope to provide an interface to increase the efficiency of the website through the Web standard, which can be simply understood as two aspects: scalability and maintainability.

At this point, the study on "what is the layout of the css website" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.