Hi, guys, after a week's study, I learned a lot this time
Let's have a look!!
catalogue
Block element and inline element, inline block element
Three style sheets
They are internal style sheet, external style sheet and inline style sheet
1, In short, the internal style sheet is written in the HTML file and included in it with < style > tags. It is called the internal style sheet. The interior can be understood as the interior of HTML
2, External style sheet is to create a new CSS file, which is different from HTML, and will explain the referenced CSS file in the HTML file
For example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Internal and external style sheets for internal rows</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 style="color: aquamarine; font-size: 16px;">Use when there are few styles in the inline style sheet</h1> </body> </html>
href is the way of reference
3, In line style sheet is to write CSS with attribute style in the tag
This applies when you have less CSS code
These three style sheets are easy to understand
Block element and inline element, inline block element
1, A block element is a tag that occupies a large block. Tags such as < div > < p > < H1 > < H6 > occupy a whole line
2, In line elements can be on the same line as adjacent in line elements without exclusive row
The difference between block elements and in-line elements is in addition to area:
① In addition, the width and height of in-line elements cannot be adjusted, while block elements can
② In line elements cannot include block elements, but block elements can (but text block elements such as < H1 > < p > cannot put other block elements)
③ Block elements cannot walk with block elements, while inline elements can
3, There is also an inline block element < input > < img > < td > between the block element and the inline element, which is characterized by:
① Can walk with inline elements
② Adjustable range, width and height
In line elements and block elements can be converted into in line block elements by:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Block inline inline block element</title>
</head>
<style>
h1 {
display:inline-block;
}
</style>
<body>
<h1>Block to line block</h1>
</body>
</html>
Display mode display downlink inward block ， block to inline (online) to inline block
Compound selector
We'll talk a lot about compound selectors
There are 6 kinds of selectors including intersection and union descendant sub element attribute pseudo element, but it is not difficult to understand
Intersection selector
In fact, it is very simple to understand.
As we said before, there are tag selectors, id selectors, class selectors, etc., so a tag can have tag name, class name and id name.
Therefore, when it is difficult for us to select a label, we can write its label signature and class name, and cross select this label.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Intersection selector</title>
<style>
p.class {
color:blue;
}
</style>
</head>
<body>
<p class=class>overlapping</p>
</body>
</html>The method is to combine the tag name with the class name or id name.
Union selector
If you want to select more tags, you can use the union selector
The method is to separate each tag name or class name id name with a comma and one more space to complete the continuous selection.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Union selector</title>
<style>
h1, em, span#2 {
font-family:"Microsoft YaHei ";
}
</style>
</head>
<body>
<h1 class=1>and</h1>
<em>collection</em>
<span id=2>selector</span>
</body>
</html>Descendant Selectors
Descendant selectors apply to labels with parent-child divisions
When you want to select one of the children other than the parent, you need to use the descendant selector
As long as the parent label name is written out, and then the child label name is written in a blank space, it can be selected
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div div#class {
color:red;
}
</style>
</head>
<body>
<div>
<div id=class>after</div>
<div>generation</div>
</div>
</body>
</html>Child element selector
There are a few differences between child element selectors and descendant selectors:
If there are children after the child, the descendant selector will select all children after the child
The child element selector will only select the current child, and will not select the lower child
The method is parent name > child name
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div > div#class {
color:red;
}
</style>
</head>
<body>
<div>
<div id=class></div>
</div>
</body>
</html>attribute selectors
Select the right tag according to whether the attribute is written in your tag
The content can be seen in the following code. It is recommended that everyone give it a try
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>attribute selectors </title>
<style>
a[title] {
color: azure;
}
input[type=text] {
color: #0000FF;
}
div[class^=font] { /* Angle brackets indicate what to start with */
color: #7FFFD4;
}
div[class$=value] { /* $It means that you can be selected at what end. a-value is not necessarily required in class
Yes, avalue */
color: red;
}
/* *Indicates that any position can be selected as long as there is a specified letter in class */
</style>
</head>
<body>
<input type="text" value=first>
<input type="text" value=second>
<input type="password" value=21212>
<div class="font1">1</div>
<div class="font2">2</div>
<div class="gont3">3</div>
<div class="font4">4</div>
<div class="hont5">5</div>
<div class="a-value">a</div>
<div class="b-value">b</div>
<div class="a-name">c</div>
</body>
</html>Pseudo element selector
It's similar to the name of the pseudo class selector, but it's more detailed, so it can target one of the words in the text part of the label, so it makes sense to say why it's called a pseudo element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* The pseudo element selector can select any element in it*/
p::first-letter { /* Select the first word of the paragraph */
font-family: "agency fb";
}
p::first-line {
color: #0000FF;
}
p::selection { /* The word selected by the user on the web page turns red */
color: #FF0000;
}
div::before { /* before And after are words inserted before or after div */
content: I;
}
</style>
</head>
<body>
<p>Bili Bili animation</p>
<div>this year</div>
</body>
</html>
Background picture
The following is about the background picture.
background color
First, we can set the width and height of the block element to create an area, and then we can set the background color for this area.
The details are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
height:200px
font-align:center
background-color:pink;
font-size:22px;}
</style>
</head>
<body>
<div>2022 Happy New Year!</div>
</body>
</html>There is also the transparency of background color
You can write directly like text transparency
background: rgba(250,0,0,0.5);
Reference of pictures
How to quote pictures? Background imgae is used
The url brackets should indicate the path of the picture
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
background-image: url(img/3.jpg); /* The picture path should be under the parent file of this file */
</style>
</head>
<body>
<div></div>
</body>
</html>
Tiling of pictures
What is tile?
If the background size you set is larger than the picture, the place that should not be covered by the picture will be covered by the picture
How specific can you try it yourself
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
background-repeat: no-repeat; /*repeat It means tile. It means repeat-x,repeat-y */
}
</style>
</head>
<body>
<div></div>
</body>
</html>Repeat means tiling. You can choose repeat-x, which means tiling in the horizontal direction and repeat-y in the vertical direction
Picture fixation
What is picture fixation? That is to say, when you watch a website going down, the picture will not move and be fixed according to your decline
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
background-attachment: fixed; /* scroll Yes scrolling fixed yes locking */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Picture orientation
When you want to put the picture in the specific position of the background, you need to use the location code of the picture
There are two types of setting positions, one is the location word, and the other is the specific coordinates
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
background-postion:right bottom}
</style>
</head>
<body>
<div></div>
</body>
</html>When using position, there are two positions. Both positions can be filled with location words, coordinates, or one location word and one coordinate
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
background-postion:30px centre}
</style>
</head>
<body>
<div></div>
</body>
</html>Would it be troublesome to set it one by one?
So there will be short form mode
Comprehensive mode
If you want to set the background color, background picture setting, background picture tiling, fixing and orientation at one time
background is about to be used
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
background: #000000 url(img/QQQ.jpg) no-repeat fixed 40px 20px; /* The abbreviations of picture definitions are in the order above*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>The order is written in the order we said above
Zoom of picture
Picture scaling is not very complicated, just a little knowledge
Since the text has font size, the picture must also have background size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
background-size: 100px; /* The scaling of the picture only writes the scale of the abscissa table
Writing two numbers is to put them directly, which will distort or write percentage*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Picture filling
There are two kinds of filling in the picture, and the background size is still used
cover means that the picture will be scaled up and down to fill the whole background area, so sometimes the picture will overflow and the overflow part will be rounded off
contain means that the picture will be scaled to the same scale, and the picture will be completely filled into the background area, but it will not be filled, and the background color will appear
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Multi background picture
As the name suggests, multi background is to fill several background pictures in one background
The format is probably like the integrated mode
But put the background color last and separate the picture definitions with commas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
background:url(img/1.jpg) no-repeat top center,url(img/2.jpg) no-repeat scroll right bottom red;
</style>
</head>
<body>
<div></div>
</body>
</html>OK! That's all for today. Maybe it's a little too much
Happy new year to readers!!