Getting started with DIV + CSS and divcss

Getting started with DIV + CSS and divcss

When I was playing csdn for a while, I felt amazing when I added qq and Weibo to my webpage. After learning about cool, I started my true B/S journey.

At the beginning, I didn't know what <div> was or what CSS was used for. After I typed it, I looked back and saw it again. BS is entering the door. I am not correct you.

CSS

Css includes various style attributes to control fonts, colors, alignment, and margins. These are only webpage styles.

. Css style attributes are classified into two categories.

Layout attribute: It is composed of attributes that affect the position of elements on the webpage (such as padding.

The formatting attribute is composed of the visual display attributes (such as the font type, size, and color) that affect the elements in the website.

CSS Cascade

The stacked style sheet in the css style sheet represents the style sheet rule application and the HTML document element, that is, the style in the css style sheet forms a hierarchical structure, and more specific styles cover general styles. The priority of style rules is determined by the css hierarchy to achieve the leveling effect. It can also be seen as a similar inheritance relationship. Child classes inherit the features of the parent class. The basic style rules apply to the whole style sheet, but can be overwritten by more specific style rules.

Let's take a simple example. Can you guess the color of the text below?

<span style="font-family:KaiTi_GB2312;font-size:18px;"><div style="color:green">this text is green.<p style="color:blue"> this text is blue.</p><p> this text is stil green.</p></div></span>

The result is as follows:

In this example, the color green applies to the <div> label through the style attribute color. Therefore, the <div> label is green. Because the <p> label is a sub-label of the <div> label, the green text style is passed to the text in <p>

. However, the first <p> label overwrites the color Style and changes it to blue. The final result is that the first text is blue, and the second text is the transmitted green.

DIV + CSS

If three or more webpages use similar formats and fonts, we may want to create a style sheet for them and apply the style directly to the HTML of the webpage. The div + css used by cool is similar to the game we used to wear clothes for the villain. Div builds basic components for us, and css determines the style of each component. Div will tell us that there are hats, jackets, jewelry, and shoes. Css is the clothes and hats of various styles. In more professional terms, div + css is used to separate the structure and performance.

Css Box Model

A webpage is divided into several blocks to control the page framework. These blocks are designed for network placement and element services. This introduces each element in the "Box Model" HTML to be considered as a "box", whether this element is a paragraph, <div> or image. The box has consistent attributes. It is an illustration of the box model. It describes the possible borders, fills, and margins of each HTML block-level element, as well as how the border fills and margins are applied. In other words, the content and border of all elements are filled.

Differences between Table and div + css

There is also a type of application table in HTML. Table labels are tables used to display data, rather than layout webpages,

Although it is easy to deploy a webpage, if a large webpage uses a table nested table for layout

The page display is extremely unfavorable, because a table is displayed only after it is fully read, and large tables need to be read.

It takes time to complete, which is not conducive to users' reading. users' waiting time for webpages is very short, and your webpages are displayed slowly and slowly.

When you come, the user will usually tell you "don't let me wait ".

The biggest advantage of DIV + CSS layout is that the webpage layout is more modified. If you want to change the webpage layout someday, you only need

Modify your CSS file, and there is no need to recompile the webpage layout of a large nested table as before,

This greatly facilitates the maintenance and optimization of web pages.
Note that the table layout is discussed above. Instead of denying the role of table labels.

The above is some understanding of HTML content. BS is just getting started.