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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.