Day07–CSS
1, Content supplement
- Because only text forms paragraphs, block level elements cannot be placed in p labels. Similarly, there is an h tag.
- Links can no longer be placed
- a block level elements can be placed in the tag
2, Three features of CSS
1. Lamination
characteristic:
(1) In case of style conflict, the principle followed is the principle of proximity, which is implemented next to the structure;
(2) When styles do not conflict, they do not cascade.
2. Inheritance
Children can inherit the properties of the parent class:
(1) Font size font family font style font weight
(2) Color text align text decoration text indent
(3) Line height starting with line -
3. Priority
Represented by a four digit number, it is more like four levels. The value is from left to right, the largest on the left, one level is greater than one level, there is no base between digits, and levels cannot be exceeded
(1) The weight values of the label selector are 0,0, 0,1
(2) Weight values of class selector: 0,0, 1,0
(3) Weight value of id selector 0,1, 0,0
(4) Weight values of inline styles: 1,0, 0,0
(5) Inherited or * weight value 0,0, 0,0
(6)! The weight value of important is infinite
(7) Weights can be superimposed, such as 0001 + 0001 = 0002
(8) The inherited weight is 0
be careful:
(1) When power is the same, the principle of proximity shall be adopted
(2) When the weight is different, it depends on the weight
3, CSS background
- Background color
- Background image
- Background repeat
repeat: the background image is tiled vertically and horizontally. default.
No repeat: the image background is not tiled
repeat-x: the background image is tiled horizontally
repeat-y: the background image is tiled vertically
- Background position
(1) When an attribute value writes a location noun, write two, and there is no order between them.
(2) When the attribute value writes a location noun, if only one location noun is written, the other is centered by default.
(3) When the attribute value is written with the specific value px, the x-axis must be written first and then the y-axis. The order cannot be reversed.
- Background attachment
(1) Property value scroll fixed
- background: transparent url(image.jpg) repeat-y scroll 50% 0;
Background: background color background picture address background tile background scroll background position
- background: rgba (0,0, 0,0.3)
0.3 represents transparency
alpha value range: 0-1
1. CSS priority question 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="Keyword 1,Keyword 2,Keyword 3" />
<meta name="description" content="Description of the site" />
<title>Question 1</title>
<style type="text/css">
#father #son{
color:blue;
}
#father p.c2{
color:black;
}
div.c1 p.c2{
color:red;
}
#father{
color:green !important;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
What color is this line of font?
</p>
</div>
</body>
</html>
Code demonstration results
2. CSS priority question 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="Keyword 1,Keyword 2,Keyword 3" />
<meta name="description" content="Description of the site" />
<title>Question 2</title>
<style type="text/css">
#father{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<div id="father">
<p>What color is this line of font?</p>
</div>
</body>
</html>
Code demonstration results:
3. CSS priority question 3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="Keyword 1,Keyword 2,Keyword 3" />
<meta name="description" content="Description of the site" />
<title>Question 3</title>
<style type="text/css">
div p{
color:red;
}
#father{
color:red;
}
p.c2{
color:blue;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p class="c2">
What color is this line of font?
</p>
</div>
</body>
</html>
Code demonstration results:
4. CSS priority question 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="Keyword 1,Keyword 2,Keyword 3" />
<meta name="description" content="Description of the site" />
<title>Question 4</title>
<style type="text/css">
div div{
color:blue;
}
div{
color:red;
}
</style>
</head>
<body>
<div>
<div>
<div>
What color is this line of font?
</div>
</div>
</div>
</body>
</html>
Code demonstration results:
5. CSS priority question 5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div div div div div div div div div div div div{
color:red;
}
.me{
color:blue;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="me">What color is this line of text</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Code demonstration results:
6. CSS priority question 6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.c1 .c2 div{
color: blue;
}
div #box3 {
color:green;
}
#box1 div {
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
written words
</div>
</div>
</div>
</body>
</html>
Code demonstration results:
