Let’s start to explain the basic knowledge of css:
Before talking about the basic knowledge, we need to know how to write comments in css
/*Comment content*/
Font: font
##What operations do we have on fonts:
Font color color
Font size size Font style font-family Italic font-style font-weight underline text-decoration line-height
We will explain through examples:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
font-size: 20px; /*字体大小*/
color: red; /*字体颜色*/
font-weight: bold; /*字体粗细*/
font-style: oblique;
/*italic:斜体。对于没有斜体变量的特殊字体，将应用 oblique
normal:默认值。正常的字体
oblique倾斜的字体
*/
text-decoration:none; /*none : 默认值。无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线
*/
font-family:隶书; /*什么样的字体。宋体，隶书等*/
}
</style>
</head>
<body>
中华名族伟大复兴
</body>
</html>texttext
Text alignment text-align
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
text-align:center;
}
</style>
</head>
<body>
中华名族伟大复兴
</body>
</html>Background
Background color background-color Background image background-image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color:red;
background-image:url("1.jpg");
}
</style>
</head>
<body>
中华名族伟大复兴
</body>
</html>## Size
Width width Height height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background-color: red;
width: 100px;
height:100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
margin and padding
margin shorthand properties set all margins in one statement Attributes. This attribute can have 1 to 4 values.
##margin:10px 5px 15px 20px;
The top margin is 10px
The right margin is 5px
Out Out Out Out Out Out Out Being Out Out Out Out Out ’ s ’ ’ Out Out – ‐ ‐Downside and Bottom Margins to Be 15px
‐ ‐ The Left Margin to be 20px This attribute can have 1 to 4 values.
padding:10px 5px 15px 20px;
The top padding is 10px
The right padding is 5px
The bottom padding is 15px
Left The padding is 20px
Note: If none of the 4 parameters are written, the default is 0px
border border
Set the thickness and color of the borderborder:1px solid red; The border line is a solid line of 1 pixel, and the line is red
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div{
margin-left:50px;
margin-top:50px;
background-color:#ccc;
width:150px;
height:150px;
border:1px solid red;
}
</style>
</head>
<body>
<div>测试</div>
</body>
</html>After running like this, the words are in How to move the text in the upper left corner of the div to the middle? It’s actually very simple.
Just add two sentences of style to the css of the div
text-align: center;
line-height: 150px;
Next Section