CSS, block-level elements, and in-row Elements

I. Before CSS

Before CSS, the content and format of the webpage are connected.

The effect is:

If you want to make the news content different from the news category in font color, modify the corresponding code. If you have a lot of content and want to modify the style of many content, one modification is obviously not a good method. CSS is required.

Ii. What is CSS?

Cascading Style Sheet (CSS) is also called style sheet. It is used for webpage style design. Is a computer language used to express the format of HTML or XML files. You can set up a style sheet to control the display attributes of each sign in HTML. Allows users to control the appearance of webpages more effectively.

In the preceding example, the title and content are different in color.

First, add the reference "style"

In "CSS test. CSS", edit as follows:

The final result is as follows:

In this way, different labels can be set to achieve different effects and separate titles and content.

3. Block-level elements and intra-row Elements

Make the following changes to the preceding example:

The effect is

From the above example, we can see the differences between the in-row and block-level elements.

We can divide the form from top to bottom into one row, and discharge elements from left to right in each row. The basic difference between block elements and intra-row elements is that block elements generally start from new rows. In layman's terms, block-level elements are always arranged vertically in the same direction as their sibling blocks, and left and right are full; in the row, the elements are arranged horizontally in the same level as those of their sibling elements and displayed in one row.

Of course, the premise above is that if there is no floating, it is another situation. Float will be explained in detail later

 

I am a beginner in CSS. The above is purely my personal opinion. If anything is wrong, I hope you can correct me.