Maison >interface Web >tutoriel CSS >Comment inclure du CSS dans les pages HTML
Comment inclure du CSS dans les pages HTML
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBavant
- 2023-09-19 18:57:02842parcourir
Nous pouvons inclure du CSS dans les pages HTML de trois manières. Ils sont -
-
Inline
Ici, nous spécifions le style CSS dans l'attribut style de l'élément. Cependant, il est recommandé de modulariser les fichiers via des liens internes ou externes de CSS.
-
À l'intérieur
Nous pouvons inclure notre spécification CSS à l'intérieur de la balise
-
Externe
Nous pouvons utiliser des liens vers des balises de fichiers .css qui peuvent être placées localement ou sur le serveur. En refactorisant le fichier à l'aide de ses liens externes, nous pouvons avoir un fichier CSS commun pouvant être utilisé sur plusieurs pages Web.
Syntaxe
La syntaxe pour inclure des fichiers CSS dans HTML est la suivante
/*inline*/ <element style="/*declarations*/"></element> /*internal*/ <head> <style> /*declarations*/ </style> </head> /*external*/ <head> <link rel="stylesheet" href="#location"> </head>
Exemple
L'exemple suivant montre comment inclure des fichiers CSS dans des pages HTML
Inline CSS
Live Demo
<!DOCTYPE html> <html> <head> </head> <body> <div style="background-color:mistyrose; height: 50px;"></div> <p style="letter-spacing: 16px; font-size: 1.3em;"> <u>Demo text here</u> </p> </body> </html>
Sortie
Cela donne le résultat suivant -
Exemple
Liens internes
Démo en direct
<!DOCTYPE html>
<html>
<head>
<style>
table, table *{
border: 5px double green;
margin: auto;
padding: 20px;
}
tr {
box-shadow: 0 0 0 3px red;
}
td {
border-color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>Sortie
Cela donne le résultat suivant -
Exemple
Liens externes
Fichier HTML
Réel time Demo
<!DOCTYPE html> <html> <head> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <div> <div></div> <div> <div></div> </div> <div></div> </div> </body> </html>
Fichier CSS
div {
margin: auto;
padding: 15px;
width: 33%;
border: 2px solid;
border-radius: 50%;
}
div > div {
border-color: green;
}
div > div > div {
border-color: red;
}Output
Cela donne la sortie suivante-
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!