1.id and CSS selector
1.id selector
The id selector in HTML and CSS is connected, and the id attribute is represented in HTML, and the id selector in CSS is defined by #.
Examples:
2.class selector
In the same way, it is represented as a class attribute in HTML, and as a class selector in CSS
Examples:
Note that if there is no .center{} in <head></head>, and only write class="center" in <body>, the text will not be centered. How to say it is similar to the structure in C language Body, only defined in the front, can be used in the back.
In addition, there is another form of expression, which is to specify specific HTML elements to use class. Compared with the previous form of expression, in fact, if only the elements in <p></p> are specified to use class, you only need to use the .center above. {} becomes p.center{}, an example is as follows:
2.css background
CSS background properties are used to define the background of HTML elements
CSS properties define the background effect:
(1).background-color: background color
Examples:
(2).background-image: background image
The style is very fixed, fill in the url of the picture in url()
It is worth mentioning that a problem encountered in writing, I added <base href="https://adworld.xctf.org.cn/static/img/"> to the head of the HTML, this thing is set The default link of the link in the entire HTML document, that is to say, if you use a relative path, you can only use the image under the link defined above. After many attempts, it seems that you can only fill in the relative path here. If you use the absolute path, it is OK. It doesn't work. (One more sentence here, the tag link of <base> is a web link, you can’t write D:/these directly)
(3).background-repeat attribute
As we all know, repeat is the meaning of repeat. When we insert a background image, when the image is not enough to fill the entire background, it will repeat continuously, repeating horizontally and vertically.
Examples:
The commands in background-repeat are to improve this situation. Commands such as background-repeat: no-repeat only fill an original image, background-repeat: repeat-x only repeat horizontally, background-repeat: repeat -y is to repeat only vertically.
(4).background-attachment attribute
This thing is to set whether the background image moves with the rest of the page.
The rest of the background-position, background-size, etc. will not be written. The basic attribute name already tells us what it does.
This note is attached to the CSS text attribute table at the end