Comment inclure du CSS dans les pages HTML-tutoriel CSS-php.cn

Comment inclure du CSS dans les pages HTML

WBOY

Libérer： 2023-09-19 18:57:02

avant

781 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

Sortie

Cela donne le résultat suivant -

如何在 HTML 页面中包含 CSS

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>

Copier après la connexion

Sortie

Cela donne le résultat suivant -

如何在 HTML 页面中包含 CSS

Exemple

Liens externes

Fichier HTML

Réel time Demo

<!DOCTYPE html>
<html>
<head>
<link rel=&rdquo;stylesheet&rdquo; type=&rdquo;text/css&rdquo; href=&rdquo;style.css&rdquo;>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>

Copier après la connexion

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;
}

Copier après la connexion