Please pay attention to the official account: automated testing practice
css common properties
-
width
_ -
height
_ -
colorfont
color -
border
_ -
background
_
lesson3.html
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <title>Css</title> <meta name="keywords" content="key1, key2"> <meta name="description" content=""> <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body> <div id="div"> <span> 这是一个span标签
</span> </div>
</body>
</html>index.css
/*
px:意为像素;
*/
div#div{
color:red;
width: 100px;
height: 100px;
background: pink;
}In the above code, you will find that we only target the `div` layer, but the `span` tag below also has the same style, which is `css has inheritance`.
Now we pinpoint the spanlayer and change the font color to green:
index.css
/*
px:意为像素;
*/
div#div{
color:red;
width: 100px;
height: 100px;
background: pink;
}
div#div span{
color: green;
}We found that the font color changed to the precisely set color, but the style was still inherited.
Border, the border has four attributes: up, down, left and right. If you don't need to set it or the four borders are the same, you only need to write one border:
/*
px:意为像素;
*/
div#div{
color:red;
width: 100px;
height: 100px;
background: pink;
border: 1px solid #0000ff;
}or
/*
px:意为像素;
*/
div#div{
color:red;
width: 100px;
height: 100px;
background: pink;
border-top: 1px solid #0000ff;
border-bottom: 2px solid #000fff;
border-left: 3px solid #00000f;
border-right: 4px solid #000000;
}Before we were backgroundall simple colors, what should we do if we want to use pictures? backgroundA few spellings we need to know first
-
background-color
background color -
background-imagebackground-
image -
background-repeat
If the image is small, the image will be tiled on the page repeatedly. This property can be used to set the image effect:- background-repeat：repeat-X; 图片在水平方向重复 - background-repeat: repeat-Y; 图片在垂直方向重复 - background-repeat：no-repeat； 图片只显示一次 -
background-position
image position.
background-positon: center center;Centering; the
backgroung-position: 0px 0px;first value is the horizontal value, and the second value is the vertical value;
Project structure:
/*
px:意为像素;
*/
div#div{
color:red;
width: 100px;
height: 100px;
background-image: url("../imgs/pic.png");
border: 1px solid #0000ff;
}continue tomorrow...