Maison >interface Web >tutoriel HTML >Comment ajouter du CSS en HTML ?

Comment ajouter du CSS en HTML ?

王林original: 2024-09-04 16:52:24948parcourir

Les feuilles de style en cascade, communément appelées CSS, permettent aux développeurs Web de styliser les pages Web selon leur choix. De simples pages HTML sans aucun format de style défini en CSS sembleraient très laides et ennuyeuses aux utilisateurs finaux. Le CSS est donc un composant essentiel des sites Web modernes pour leur donner une apparence belle, attrayante et attrayante. Traditionnellement, CSS était uniquement responsable du contrôle de l’apparence et de la convivialité du site Web. Néanmoins, les mises à niveau continues et les nouveaux CSS permettent aux développeurs et concepteurs Web de contrôler la réactivité du site Web pour les pages Web afin d'avoir une interface utilisateur distincte pour les écrans d'ordinateurs portables, de tablettes et de mobiles.

Étant donné que CSS est nécessaire pour chaque site Web, il doit être flexible et facile à définir selon les exigences du concepteur. De plus, comme cela peut être très granulaire, les définitions CSS doivent être réutilisables pour que les mêmes formats de style soient appliqués ensemble à plusieurs composants. Heureusement, les capacités de CSS répondent à ces exigences.

Méthodes pour ajouter du CSS en HTML

Vous pouvez ajouter du CSS à une page Web en utilisant une ou toutes les options suivantes. Explorons maintenant ces trois méthodes en détail.

1. CSS en ligne

Avec le CSS en ligne, les concepteurs HTML peuvent définir des informations de style dans la balise de l'élément HTML à l'aide de l'attribut « style ». Il présente plusieurs avantages et inconvénients, dont nous discuterons prochainement avec plusieurs exemples. Le CSS en ligne est la méthode la plus basique pour appliquer le CSS. Cette méthode nous permet de styliser un seul élément HTML à la fois. Il ne permet aucune réutilisation du style. Les informations de style sont définies dans la balise d'ouverture de l'élément HTML et sont fournies sous forme de valeur à l'attribut « style ».

Dans l'exemple ci-dessous, nous modifions la couleur de police des éléments h1, h6 et p à l'aide du CSS en ligne.

Code :

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">I am a Blue H1 heading</h1>
<h1 style="color:blue;">I am a Blue H6 heading</h1>
<p style="color:blue;">I am a Blue Paragraph</p>
</body>
</html>

Sortie :

Comment ajouter du CSS en HTML ?

Dans l'exemple ci-dessus, nous voulions uniquement changer la couleur de police des balises H1, H6 et P en bleu. Même si nous voulions appliquer les mêmes informations de style, nous n'avons pas pu les réutiliser et avons dû les définir trois fois individuellement pour chaque élément. En raison de son manque de réutilisabilité et de sa consommation de temps accrue, les concepteurs de sites Web ne préfèrent pas utiliser Inline CSS lors du style d'un site Web comportant plusieurs pages. De plus, créer un site Web réactif pour mobile serait presque impossible avec les définitions de style en ligne.

2. CSS interne

Dans le CSS interne, les concepteurs HTML peuvent définir des informations de style dans le champ balises dans le ≪/tête> section de la page HTML à l’aide de références de classe et d’identifiant. Nous explorerons en profondeur le CSS interne dans la section suivante de ce didacticiel. Comme indiqué précédemment, le CSS interne est défini dans le même fichier HTML que le code HTML sur lequel il est appliqué. Le code HTML est dans le corps, tandis que le CSS est dans le