Div+css Getting Started

Before a while playing csdn, on the page added QQ and Weibo, and so on, feel very magical. After learning the beef brisket, also began to really learn B/s tour.

At first, I didn't know what the <div> was. What the CSS used to do, knocked back to look, it seems to understand some. BS is in the door, write not to you to correct.

CSS

In general, CSS includes a variety of style attributes that control fonts, colors, alignment, and margins, which are just page styles

Some aspects of it. CSS style attributes fall into two main categories.

Layout properties consist of attributes that affect the position of elements on the page, such as padding on them, and so on.

Formatting properties, consisting of attributes that affect the visual display of elements in a Web site, such as font type, size, color, and so on.

CSS Cascading

Cascading in a CSS style sheet represents how a style sheet rule is applied to an HTML document element, that is, a style in a CSS style sheet forms a hierarchy, and a more specific style overrides a common style. The precedence of a style rule is that the CSS has a more hierarchical structure, which allows for the effect of the exercise level. It can also be seen as an inheritance-like relationship in which subclasses inherit the characteristics of a parent class. Basic style rules apply to the entire style sheet, but can be overridden by more specific style rules.

Let's take a look at 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 this.

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

。 The first <p> tag, however, overrides the color style and changes it to blue. The final result is that the first paragraph of text is blue, and the second text is the green that is passed.

Div+css

If you have three or more pages that use similar formatting and fonts, we might want to create a style sheet for them and apply the style directly to the HTML in the page. The div+css used in the beef brisket is much like the game we have played before to dress the villain. The DIV will give us a basic component, and CSS determines what the style of each part is. The div will tell us that there are hats, coats, jewellery and shoes. CSS is a variety of styles and colors of clothing and hats. In a more professional terminology, the application of DIV+CSS allows for separation of structure and performance.

CSS Box Model

A webpage is broken down into chunks to control the page frame. These chunks are meant to be placed on the network and not on the element service. This introduces that each element in the "box model" HTML is considered a "box", regardless of whether the element is a paragraph,<div> or an image. The box has consistent properties. is a diagram of a box model that describes the possible borders, padding, and margins of each HTML block-level element, and how the border fills and margins are applied. In other words, there are padding between the content and the border of all elements.

the difference between table and DIV+CSS

There is also a category of applications in HTML table,table tags are tables, which are used to display data, not to layout pages,

While it is sometimes easy to lay out a Web page, a large web page, if it is laid out in table-nested tables,

The display of the page is extremely detrimental because a table is displayed only after it has been fully read, and the large table is read

After the need for time, not conducive to the user's reading, the user's waiting time for the Web page is very short, your page is very slow to show

When you come, users will usually tell you "Don't Let me Wait".

The biggest advantage of div+css layout is that the change of page layout, the day you want to change the layout of the page, only need more

Change your CSS file, instead of having to re-compile a large table-nested table page layout as before,

Greatly facilitates the maintenance and optimization of Web pages.
Note that we are talking about the table layout above. Instead of denying the role of the table tag.

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

Div+css Getting Started