HTML+CSS Easy to get started with basic knowledge of CSS
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 colorFont 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; /*字體粗細(xì)*/
font-style: oblique;
/*italic:斜體。對于沒有斜體變量的特殊字體，將應(yīng)用 oblique
normal:默認(rèn)值。正常的字體
oblique傾斜的字體
*/
text-decoration:none; /*none : 默認(rèn)值。無裝飾
blink : 閃爍
underline : 下劃線
line-through : 貫穿線
overline : 上劃線
*/
font-family:隸書; /*什么樣的字體。宋體，隸書等*/
}
</style>
</head>
<body>
中華名族偉大復(fù)興
</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>
中華名族偉大復(fù)興
</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>
中華名族偉大復(fù)興
</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;
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 divtext-align: center; line-height: 150px; 
