DIV CSS Getting Started_html/css_WEB-ITnose-HTML Tutorial-php.cn

When I was playing csdn a while ago, I thought it was amazing to add QQ and Weibo to the web page. After learning brisket, I have begun my true journey of learning B/S.

At the beginning, I didn’t know what

was or what CSS was used for. After typing, I looked back and I seemed to understand a little bit more. BS is coming in, please correct me if I am wrong.

CSS

Overall, CSS includes a variety of style attributes for controlling fonts, colors, alignment and margins. These are just some aspects of web page style

. CSS style properties are divided into two categories.

Layout attributes: It consists of attributes that affect the position of elements on the web page (such as margins, padding, etc.).

Formatting attributes, consisting of attributes that affect the visual display of elements in the website (such as font type, size, color, etc.).

Cascading of CSS

Cascading in a css style sheet represents the way the style sheet rules are applied to the elements of the HTML document , that is, the styles in the CSS style sheet form a hierarchical structure, and more specific styles cover general styles. The priority of style rules is determined by the hierarchical structure of CSS to achieve the leveling effect. It can also be seen as a relationship similar to inheritance, where the subclass inherits the characteristics of the parent class. Basic style rules apply to the entire stylesheet, 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>

Copy after login

The result is like this

Therefore, the

tag is originally green. Since the

tag is a child of the

tag, the green text style is passed to the text

. However, the first

tag overrides the color style, changing it to blue. The final result is that the first text is blue, and the second text is green.

DIV CSS
If there are three or more web pages using similar formats and fonts, we may want to create a style sheet for them and apply the styles directly to the web pages. HTML. The div css used in the brisket is very similar to the game we once played of dressing the little man. div will create basic components for us, and css determines the style of each component. The div will tell us that there are hats, coats, jewelry, and shoes. css is the clothes and hats of various styles and colors. In more professional terms, it is to use div css to separate structure and performance.

. These blocks are used to place elements that are not connected to the Internet. This introduces the "box model" where every element in HTML is considered a "box", whether the element is a paragraph,

or an image. Boxes have consistent properties. The following figure is an illustration of the box model, describing the possible borders, padding, and margins for each HTML block-level element, and how the borders, padding, and margins are applied. In other words, all elements have some padding between their content and borders.

It is for data, not for laying out web pages.

Although it is sometimes very simple to lay out web pages, if a large web page is laid out with tables nested in tables, it will be very difficult for the web

The display of the page is extremely disadvantageous, because a table will not be displayed until it is completely read. It takes time to read a large table

, which is not conducive to the user's reading and the user's understanding of the web page. The waiting time is very short. When your web page displays

very slowly, users usually tell you "Don't make me wait".

The biggest advantage of DIV CSS layout is the changeability of web page layout. If you want to change the web page layout one day, you only need to change your CSS file

, and there is no need to re-compile a web page layout with large tables and nested tables as before.

It greatly facilitates the maintenance and optimization of web pages.
Note that what we discussed above is table layout. Rather than negating the role of the table tag.

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

Related labels：

DIV+CSS 入门

source：php.cn

Previous article：Only one of the two buttons in the div is displayed under IE8_html/css_WEB-ITnose Next article：Three selectors of CSS_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn