I always wanted to write an article in the CSS + Div series, but I always wanted to find a proper time and sort it out. I want to write another series, but now I don't think we should push anything. Some things can be done on the same day, but you may not want to do it anymore, maybe there is an illusion that it doesn't make much sense, so this CSS + Div controls the webpage style and layout. I don't think I can write it again in two days. Let us say: what can be done on the day will never be left to the next day.
We have gone through the basics, a little bit, and then combined with examples to analyze them slowly, hoping to help you. When learning CSS, we should try our best to compile CSS with reference to other websites. Let's take a look at Baidu's: by studying the CSS code of other websites, we can quickly feel the page design and get started more easily. This is called "standing on the shoulders of giants ."
Basic CSS syntax:
CSS selector: includes the tag selector, category selector, and Id selector. Let's first look at the tag selector:
Here, as long as the naming rules are met, the requirements can be easily met. Let's take a look at the code and effects:
<HTML xmlns = "http://www.w3.org/1999/xhtml">Effect:
This is very simple. Let's continue with the class selector, which we often call. Class.As we can see, H1 is changed to. class. If nothing else can be seen, let's see how to apply it in the Code:
<HTML>Each p Mark is controlled by a class. A class = "one" corresponds to a. One {}, and then an attribute is added to. One.
As we can see, this H3 is different from. Two, but the font is different, that is, the default H3 font is different from the class. The advantage of using class is that users can fully customize and use this class repeatedly. This is what our p Mark and H3 mark show.
Let's continue to look at the ID selector:
Similar to the tag selector and category selector we mentioned earlier. Look at the Code:
<HTML>This is different from the category selector in terms of "." and "#". Let's look at the effect.
The difference between ID and class is that ID cannot contain two identical IDs;This is an error because ID is not only applicable to CSS code, but also JavaScript code. In JavaScript code, if an ID appears in two tags at the same time, it will cause syntax confusion.
Selector declaration:
Collective declaration. Let's look at the Code:
<HTML>The effect is as follows:
One benefit of collective declaration is that when we need to display the same effect, collective declaration will help us a lot.
Let's look at the nesting of selector: the code is as follows:<HTML>Let's look at the effect:
We can see from the effect that the P mark in the selector has added our effect to the CSS, but the "mark" outside the p Mark does not take effect.
CSS inheritance:
<HTML>We can see from the code that the H1 contains red and underlined characters. H1 em is added with the color.
Effect: we can see that the EM color overwrites the H1 defined color, but inherits the underline directly. This is the benefit of inheritance. You can design a large scale from the parent tag, and then fill the child tag with a different sub-mark.
This is a very basic thing, but it must start from here if you want to have a solid foundation. I will continue to improve this blog later.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
