HTML and CSS study notes (3)

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:

Insert picture description here

Insert picture description here

2.class selector

In the same way, it is represented as a class attribute in HTML, and as a class selector in CSS

Examples:

Insert picture description here

Insert picture description here

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:

Insert picture description here

2.css background

CSS background properties are used to define the background of HTML elements

CSS properties define the background effect:

Insert picture description here

(1).background-color: background color

Examples:

Insert picture description hereInsert picture description here

Insert picture description here

(2).background-image: background image

The style is very fixed, fill in the url of the picture in url()
Insert picture description here

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:

Insert picture description here

Insert picture description here
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.

Insert picture description here

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

Insert picture description here

Guess you like

Origin blog.csdn.net/weixin_50998641/article/details/114211560