'CSS Website Layout Record' Study Notes (1)_html/css_WEB-ITnose

Start today and study front-end technology seriously, hahaha~~~Come on~~~

Recommend this "CSS Website Layout Record" (2nd Edition) to beginners , although this book is a bit old, it is still a classic.

Note: The CSS described here are all CSS 2.0 versions.

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 specifications developed by W3C (World Wide Web Consortium) and other standardization organizations, including a series of standards, including HTML, XHTML, JavaScript, CSS, etc.

The purpose of Web standards is to create a unified technical standard for the Web presentation layer to display information content 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 purpose is to 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 displays information to users and provides users with interactive behaviors. To simply understand, presentation is style. On a technical level, it is a bunch of program code, and what the presentation layer brings is what is seen visually.

At present, the Web standards formulated by W3C are just such a collection of presentation layer technologies, and are currently the only cross-platform and cross-client technology.

1.2 The composition of Web standards

　Web standards are a set of standards composed of three parts: Structure, Presentation and Behavior.

1.2.1 Structure

　 Structure is used to organize and classify the information used in web pages. The main Web standard technologies used for structured design include HTML, XML, and XHTML.

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

　This is the most basic description language of the Web. HTML text is descriptive text composed of HTML command tags. HTML tags can describe text, graphics, animations, sounds, tables, links, etc. The structure of HTML includes two parts: Head and Body. The header describes the information required 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 and meet its powerful expansibility. To meet the needs of network information release, it was later gradually used for the conversion and description of network data.

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

　Simply put, the purpose of establishing XHTML is to realize 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 display, the Web standard technology used for performance is mainly CSS technology.

CSS (Cascading Style Sheets) Cascading Style Sheets
The purpose of W3C in creating the CSS standard is to use CSS to describe the layout design of the entire page, separate from the structure responsible for HTML. Using CSS layout combined with the information structure described by XHTML can help designers separate presentation and content, making it easier to build and maintain sites.

1.2.3 Behavior

　 Behavior refers to the definition of a model within the entire document and the writing of interactive behaviors. It is used to write documents that users can interactively operate. Web standard technologies that express behavior mainly include: DOM and ECMAScript.

　1. DOM (Document Object Model) document object model

　According to W3C DOM Specification, DOM is an interface that allows the browser to communicate with the Web content structure, making it possible to access standard components on the page. Gives web designers and developers a standard way to access data, scripts, and presentation objects in the site.

　2. ECMAScript scripting language (expanded scripting language of JavaScript)

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

1.3 The difference between CSS layout and table layout

　From the current Web standards, the most ideal technical structure is to use HTML or XHTML to When designing web pages, it is recommended to use XHTML to write the structure in a more rigorous language, and use CSS to complete the layout of the web page.

1.3.1 Advantages of CSS

CSS is the basis for controlling the layout style of web pages, and is a style design language that can truly separate web page performance and content. Compared with traditional HTML's control over styles, CSS can precisely control the position of objects in web pages at the pixel level, supports almost all fonts and font size styles, and has the ability to control the style of web page object box models, and can Carry out preliminary page interaction design. To sum up, CSS has the following main advantages:

Perfect browser support: Web pages designed with CSS styles have the closest style performance on many platforms and browsers.

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

The style design control function is powerful: the position layout of web page objects can be controlled with pixel-level precision, etc.

Superior inheritance performance (cascading processing): CSS code has basic characteristics similar to OOP object-oriented in the browser's parsing order. The browser can proceed in the order in which the same element is defined based on the CSS level. Apply multiple styles.

1.3.2 Traditional table layout and CSS layout

　In fact, the traditional table layout method only takes advantage of the table element of HTML The zero border feature. Since the table element can be displayed with the cell borders and spacing set to 0, that is, no borders are displayed, each element in the web page can be divided according to the layout and placed into each cell of the table, thereby achieving A complex typesetting combination effect.

The most common form of table layout code is to embed some design code between HTML tags, such as width="100%", border="0", etc., and this hybrid writing of a large amount of style design code Mixed into table cells, their readability is greatly reduced and maintenance costs are high.

The core of the table layout is to design a table structure that can meet the format requirements, and load the content into each cell. The spacing and spaces are implemented through many transparent gifs as placeholders. The final structure is a complex The form, and such a complex form design makes the web page file huge, which is not conducive to design and modification, and ultimately causes the browser to download and parse too slowly.

Using CSS layout can fundamentally change this situation. The thinking method of CSS layout is no longer put into the design of the table element, but is replaced by another element div in HTML. A div can be understood as a layer or a block. A div is a simpler element than a table. The function of div is only to mark a piece of information for later style definition.

When using divs, there is no 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. Listed below are some div style design codes:

>

1 [html] 2 3 /* 表示页面中定义了一个div，并使用content这个class名称 */4 <div class="content">....</div>

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

1.4 Transition to Web Standards

 1 [CSS]  2  3 .content { 4  float: right; /* 表示div浮动在当前位置的右侧 */ 5  margin: 10px 20px 10px 10px; /* 设置外边距属性 */ 6  text-align: center; /* div里的文字居中显示 */ 7  line-height: 160%; /* div中的文字行高为原高的160% */ 8  width: 50%; /* 表示这个div的宽度为所处的上一层位置的50% */ 9  background-color: blue; /* 表示div的背景色为蓝色 */10 }

　

The purpose of Web standards is to achieve the separation of web page structure, performance, and behavior, achieve the best architecture, and provide Website usability and user experience. It is the most ideal choice to build a website using the following standards and methods.

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 ​​used to replace HTML and help move to XML. XHTML is not designed for final performance. It is mainly used for structural design of web page content. Its rigorous grammatical structure is conducive to browser parsing. It is a design language oriented towards document structure.

Currently, XHTML usage standards mainly include three application methods: Transitional, Strict and Frameset. Transitional mode: a loose transitional XHTML application that allows users to use some HTML tags to write XHTML documents. This method is recommended.

Strict mode: A strict application mode. No style tags and attributes can be used in XHTML.

Frameset method: The application method for frame web pages.

1.4.2 Give full play to the role of CSS

　1. Reasonable CSS file structure

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

　

2. Advantages of inheritance and reuse

The advantage of using CSS lies in its good reuse characteristics. A piece of CSS design code can be used by multiple areas at the same time. In addition to the reuse function, CSS can also implement an inheritance mechanism similar to that in object-oriented programming. Through the inheritance mechanism, the style structure of the website can be further improved.

　3. Design cross-platform code

CSS also has shortcomings. Due to the different rendering methods between different brands of browsers and different versions, their respective analysis of CSS is also different. There are certain differences. For these reasons, CSS design should also have certain cross-platform compatibility features, and the use of uncommon attributes should be minimized when coding. If you want to be compatible with older versions of browsers, you should also pay attention to leaving certain CSS hack codes.

CSS hack can be simply translated as CSS hacker program. This is similar to expecting the browser to receive the code, which 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) satisfy user needs to the maximum extent. The purpose of CSS style design with good usability is to create a better interactive website through good design so that users can use it.

　5. Use DOM-based scripting language to write interactions

　DOM is also produced to realize cross-platform and cross-browser applications of scripting language. For now, most browsers support the standard DOM. Using a DOM-compliant scripting language, you basically no longer need to detect different versions of the browser and write several different sets of code. As long as the browser is DOM-compliant, the same code can complete all supported operations. The current JavaScript is a scripting language that conforms to the DOM standard.

1.5 Frequently Asked Questions

1.5.1 Are tables still useful after using web standards?

　1. About Tables

After using Web standards, it does not mean that the use of tables is excluded. It is just that using tables as web page layout and layout page elements is unreasonable. Table format is used to display data. of. The function of the table is not to layout the web page, the layout task should be left to CSS.

　2. About other elements

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

Auxiliary layout design elements

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

Structural elements or information elements

Refers to elements such as table, ul, pre, code, etc. They are elements for information display and control.

a. meta elements

Use them to implement some special functions.

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

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

1.5.3 Why not use XML directly

　XML is the description format of future data. For now, it is not suitable for direct application XML is used to build websites because it is technically difficult.

1.5.4 What is website reconstruction

　Website reconstruction can be understood as changing the old HTML table layout and using new conformity Web standard website structure and code writing methods. In a deeper sense, we hope to provide an interface that increases website efficiency through Web standards. This benefit can be simply understood as two aspects: scalability and maintainability.

To be continued....