Maintenant, nous commençons à expliquer les connaissances de base du CSS :
Avant de parler des connaissances de base, nous devons savoir comment rédiger des commentaires en CSS
/*Contenu des commentaires*/
Police : police
Quelles opérations avons-nous sur les polices :
Couleur de la police Taille de la police taille de la police style font-family Italic font-style font-weight underline text-decoration line-height
Expliquons à travers des exemples :
<!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>Texte texte
Alignement du texte 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>Arrière-plan
Arrière-plan couleur background-color Image d'arrière-plan 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>Taille
largeur largeur Hauteur 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
l'attribut raccourci margin définit toutes les marges dans une seule propriété d'instruction. Cet attribut peut avoir de 1 à 4 valeurs. <<>
Marge : 10px 5px 15px 20px
La distance supérieure est de 10px
>
La marge inférieure est 15px
La marge gauche est de 20px
la propriété raccourcie de remplissage définit toutes les propriétés de remplissage dans une seule instruction. Cet attribut peut avoir de 1 à 4 valeurs.
remplissage : 10px 5px 15px 20px ; 🎜>Le remplissage gauche est de 20px
Remarque : si aucun des 4 paramètres n'est écrit, la valeur par défaut est 0px
border border
Définir l'épaisseur et la couleur de la bordure
border:1px solid red La ligne de bordure est une ligne continue de 1 pixel, et la ligne est rouge
<!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>Après avoir couru comme ça, les mots sont dans Comment déplacer le texte dans le coin supérieur gauche du div vers le milieu Ajoutez simplement deux styles au CSS du div text-align: center; line-height: 150px;
.
section suivante