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

This article introduces the relevant knowledge of "what are the basic grammars of stylesheets in css". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

A small instance of class (class) and id

In the previous section, we learned how to define styles for specific tags, for example, we changed the font size of all headings 1 on the page to 12 pixels using "H2 {font-size: 12px;}". So what if I don't want all title 1 styles to be modified? Then class and id can help you.

To learn about class and id, let's take a look at two web pages.

There is no page when you join CSS, but the page after you join CSS. Their source code is as follows:

The code is as follows:

How miserable I am! Used to demonstrate CSS!

I am the title 1 at the top of the page

I am title 1 on the left side of the page, which is used for navigation

I am the headline 1 of the news on the right side of the page

I am the content of the news.

The code is as follows:

How miserable I am! Used to demonstrate CSS!

I am the title 1 at the top of the page

I am title 1 on the left side of the page, which is used for navigation

I am the headline 1 of the page news.

I am the content of the news.

The usage of class and id

The above example implements three different headings 1 using class and id. Let's talk about the specific application rules of class and id.

Specify the class and id of the label

First of all, we will define class (class) or id in the section.

The definition method of class: specify the label. Class name {style}

How to define id: specify the label # id name {style}

Then we add the class (class) or id attribute to the tag of the class we want to apply:

The application method of class:

The application method of id:

The class (class) and id defined in this way can only act on the specified tag. In the above example, we defined three classes, named "dabiaoti", "daohang", and "xinwen", all of which act on the H2 tag. When we try to apply the style of "xinwen" to a

When tagging (I am the content of the news.

You will see that there is no change in its style This is a wrong CSS application.

Note: class name and id name cannot start with a number.

Class or id that does not specify a label

In the process of web design, you may not want the classes you define to be limited to a single tag. Taking the example above, you might want the xinwen class to be applied to paragraph tags

. Then you just need to change the definition part of the h2.xinwen to .xinwen, that is, remove H2. Of course, classes that do not contain a label signature in this definition are no longer limited to a particular tag. Take a look at our revised web page, "News content" also applies the style of the xinwen class.

The difference between class and id

At this point, you may have to ask, class and id seem to have except one. Apart from the difference between and #, it seems to be exactly the same in definition and application. However, this is not the case. The same id can only be applied once in a page, while class is used to describe elements that appear multiple times. This is easy to understand from their names. Id is the provincial certificate number of a similar element, which must be unique, while class is a combination of elements with common attributes.

If you try to use the same id multiple times in one side, the page usually displays normally. But this will bring inconvenience to the later maintenance, and may also cause other problems. So we must distinguish between id and class and apply them reasonably.

This is the end of the introduction to "what is the basic syntax of stylesheets in css". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.