Shulou(Shulou.com)06/03 Report--

This article focuses on "how to understand the basic syntax of stylesheets in css". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor learn "how to understand the basic syntax of stylesheets in css".

The web page before and after inserting the style sheet.

To better understand the role of stylesheets, let's first look at an application example of CSS. In this example, you can easily compare the difference between the two pages before and after using CSS, but of course, you may not understand the code in the CSS section now. Don't worry, this code will be introduced in later tutorials.

First of all, let's take a look at the pages that are not in CSS. There is only one paragraph on the page: "the webmaster of the rookie bar is a big fool! fools love to eat big watermelons!" . And because they are headings 1, 2, 3, 4 respectively, the font size on the page is also different, and there is automatic line wrapping of the title.

Its source code is as follows:

The code is as follows:

How miserable I am! Used to demonstrate CSS!

The stationmaster of

What a fool! idiot

Love to eat big watermelons!

Let's simply add a little bit of CSS to it to make me no longer stupid. Follow the instructions below to modify the code of the web page:

The code is as follows:

How miserable I am! Used to demonstrate CSS!

The stationmaster of

What a fool! idiot

Love to eat big watermelons!

Let's take a look at the web page after joining CSS. You can easily see the difference between the two pages. The size of the text in the page is uniform, and there is only a new line after title 1, and even some of the text is hidden. It's all thanks to the red part of the code above. They are CSS, so let's get a rough idea of what this code means.

Introduction to CSS Grammar

The sum added to the head section is recognized by the browser as the beginning and end of the CSS, respectively. The comment tag prevents browsers that do not support CSS from displaying CSS content on the page as the body of the page.

The above content does not define any style, its task is to tell the browser the location of the CSS code. The following is the key point, and it is the following part that has significantly changed the appearance of the page, which is the description part (definition part) of the CSS:

The code is as follows:

H2 {font-size: 12px;}

H3 font-size h5 {font-size: 12px; display:inline;}

……

What a fool! idiot

Usually, the description part of CSS consists of three parts, namely selector, attribute and attribute value. It is written as follows:

Selector {attribute: property value;}

For example:

The code is as follows:

H2 {font-size: 12px;}

In this example, the selector is the HTML tag you want to describe, and other selectors will be explained in later tutorials. The selector in the above example is the H2 tag. Attribute and attribute value indicate which attribute of H2 you want to describe and what the value of this attribute is. For example, in the above example, the H2 font size attribute is 12 pixels, written as font-size: 12px. Use a colon between the attribute and the attribute value ":" separate, with a semicolon ";" end, and don't forget to enclose it with a pair of curly braces "{}".

We can also define multiple styles for a selector at the same time, separated by semicolons. You can also define a set of styles for several tags at the same time, separated by commas. Maybe these two sentences are a bit eloquent, but in fact, the second line of code in the above example uses this feature of CSS. The statement "h3 font-size h5 {font-size: 12px; display:inline;}" defines two styles for both h3 and h5 tags. Of course, to make your CSS code easier to read and maintain, you can write these properties on a branch line:

The code is as follows:

H3,h5 {

Font-size: 12px

Display:inline

}

Note 1: now explain the last line of the above code, in which we do not see the selector, this is because the position where the CSS is inserted is different, it will act directly with the elements within the current tag. Different ways of inserting CSS will be discussed in subsequent tutorials.

Pay attention to the way 2:CSS is written, please decide according to your own preferences, but the ultimate goal is very clear, to improve the efficiency of maintaining CSS code.

CSS comment

Let's use an example to show how to insert comments in CSS:

The code is as follows:

In CSS, comments start with "/ *" and end with "* /", and the contents of comments are meaningless to browsers.

At this point, I believe you have a deeper understanding of "how to understand the basic syntax of stylesheets in css". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.