HTML+CSS Débuter facilement avec des connaissances de base en CSS

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;

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

HTML+CSS Débuter facilement avec des connaissances de base en CSS

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]