Maison > Article > interface Web > Comment insérer du style CSS dans HTML

Comment insérer du style CSS dans HTML

青灯夜游original: 2021-09-14 16:53:3414745parcourir

Comment insérer des styles CSS dans HTML : 1. Utilisez l'attribut style pour insérer du code CSS dans une balise HTML spécifique ; 2. Mettez le code CSS dans la paire de balises de style dans la partie d'en-tête du document ; codez dans un fichier CSS externe, utilisez la balise link pour l'introduire dans le document html.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

1. Inline

Utilisez l'attribut style pour définir des styles CSS dans des balises HTML spécifiques.

Il est recommandé de ne pas utiliser de CSS en ligne car chaque balise HTML doit être stylisée séparément et la gestion du site Web peut devenir très difficile si vous utilisez uniquement du CSS en ligne. Toutefois, cela peut être utile dans certaines situations. Par exemple, dans les situations où vous n'avez pas accès aux fichiers CSS ou où vous devez uniquement appliquer des styles à un seul élément. Un exemple de page HTML avec CSS en ligne est le suivant :

<body style="background-color:black;">
    <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
</body>

2. En ligne

Le style CSS en ligne consiste à placer le code CSS dans la section 93f0f5c25f18dab9d176bd4f6de5d30e Le CSS en ligne doit être placé entre les balises c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927.

Les classes et les identifiants peuvent être utilisés pour référencer du code CSS, mais ils ne sont actifs que sur cette page spécifique. Les styles CSS intégrés de cette manière sont téléchargés à chaque chargement de la page, ce qui peut améliorer les vitesses de chargement. L'utilisation de feuilles de style en ligne est utile dans certaines situations, comme par exemple pour envoyer à quelqu'un un modèle de page. Il est beaucoup plus facile de voir un aperçu puisque tout se trouve sur une seule page.

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

3. Lien externe

Le lien externe consiste à utiliser l'élément de balise de lien pour référencer le fichier CSS externe (fichier .css) dans la page HTML. La référence doit être placée dans la section 93f0f5c25f18dab9d176bd4f6de5d30e la page.

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Explication de chaque attribut :

L'attribut href définit l'adresse du fichier de feuille de style externe, qui peut être une adresse relative ou une adresse absolue. L'attribut
rel définit le document associé, c'est-à-dire ici la feuille de style associée. L'attribut
type définit le type de fichier importé. Comme l'élément style, text/css indique un fichier texte CSS.

Généralement, lors de la définition de la balise 2cdf5bf648cf2f33323966d7f58a7f3f, 3 attributs de base doivent être définis, parmi lesquels href est un attribut incontournable.

Vous pouvez également ajouter l'attribut title dans l'élément link pour définir le titre de la feuille de style facultative. Autrement dit, lorsqu'un document Web importe plusieurs feuilles de style, vous pouvez sélectionner le fichier de feuille de style à appliquer via la valeur de l'attribut title. .

Conseils : dans le navigateur Firefox, vous pouvez sélectionner l'option "Affichage -> Style de page" dans le menu, puis la valeur de l'attribut de titre sera affichée dans le sous-menu. Il vous suffit de sélectionner différentes valeurs d'attribut de titre, qui. peuvent être appliqués de manière sélective. Le navigateur IE ne prend pas en charge cette fonctionnalité.

De plus, l'attribut title est lié à l'attribut rel Selon le plan de l'organisation W3C, les futurs documents Web utiliseront plusieurs éléments 2cdf5bf648cf2f33323966d7f58a7f3f fichiers de thème, et même inclut des fichiers supplémentaires supplémentaires pour une personnalisation personnelle. Après avoir importé autant de fichiers de types et de noms différents, vous pouvez utiliser l'attribut title pour sélectionner. À ce stade, le rôle de l'attribut rel devient évident. Il peut spécifier le type de fichier importé appliqué lors de l'affichage initial du fichier de la page Web. Actuellement, il ne peut être associé qu’au type de feuille de style CSS.

Les styles externes sont la meilleure solution pour les applications CSS. Un fichier de feuille de style peut être référencé par plusieurs pages Web, et un fichier de page Web peut importer plusieurs feuilles de style en utilisant à plusieurs reprises l'élément de lien pour importer différents fichiers de feuille de style.

Recommandations associées : "Tutoriel vidéo CSS"

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!

html5 firefox css css3 html href 样式表

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Que dois-je faire si les modifications du fichier CSS ne prennent pas effet ?Article suivant：Que dois-je faire si les modifications du fichier CSS ne prennent pas effet ?

Articles Liés

Voir plus