Dans ce chapitre, nous expliquerons comment implémenter CSS dans un document HTML, c'est-à-dire lier la description de style d'un élément directement à l'élément lui-même, une balise HTML.
Cette tâche peut être accomplie de trois manières :
- Écrivez une description de style directement dans l'élément lui-même. Cette méthode n'est efficace que s'il n'y a qu'un seul élément de ce type dans le document HTML qui nécessite une description de style distincte.
- Rédigez une description de style pour tous les éléments identiques du document HTML. Cette méthode se justifie si le style de la page est fondamentalement différent de la conception globale du site (un groupe de pages interconnectées).
- Insérer la description du style des éléments HTML dans fichier séparé CSS. Cela vous permettra de gérer le design de l'ensemble du site, chaque page du site dans laquelle est indiquée une référence à un fichier CSS. Cette méthode constitue l’utilisation la plus efficace d’une feuille de style en cascade.
Examinons de plus près chaque option tout en nous familiarisant avec les règles de la syntaxe d'écriture CSS.
L'attribut de style.
Presque toutes les balises HTML ont un attribut style, ce qui indique qu'une certaine description de style est appliquée à cette balise.
C'est écrit ainsi :
style="">
Tout ce qui sera écrit entre les guillemets d'attribut style et sera une description de style pour cet élément, dans ce cas l'élément
Eh bien par exemple :
style="couleur : #ff0000 ; taille de police : 12px"> c'est un paragraphe avec un style personnel
Dans ce cas, nous avons précisé que ce paragraphe devait être affiché en rouge et avoir une taille de police de 12 pixels. Dans les chapitres suivants, je parlerai en détail de ce qui est écrit entre guillemets, mais nous parlons maintenant de la façon d'appliquer CSS à n'importe quelle balise HTML.
En utilisant le même principe, vous pouvez spécifier un style individuel pour presque chaque élément HTML.
style="couleur de fond : #c5ffa0">
style="couleur : #0000ff ; taille de police : 18px">Tout sur les éléphants
Acheter un éléphant
style="couleur : #ff0000 ; taille de police : 14px">
style="couleur : #0000ff ; taille de police : 16px">Louer un éléphant
style="couleur : #ff0000 ; taille de police : 14px">
Mais je vais répéter cette méthode Implémentation CSS bon seulement si vous devez définir un certain style pour un petit nombre d’éléments HTML.
Étiqueter (à ne pas confondre avec l'attribut du même nom) dans lequel sont décrits les éléments dont nous avons besoin.
Jetez un œil à l'exemple, il y aura des commentaires ci-dessous.
Tout sur les éléphants
Sur ce site vous trouverez toutes les informations sur les éléphants.
Acheter un éléphant
Avec nous, vous pouvez acheter les meilleurs éléphants à des prix compétitifs !!
Louer un éléphant
Seulement ici, vous pouvez louer des éléphants !!
Comme le montre l'exemple, nous avons obtenu exactement le même résultat que dans le premier cas, seulement maintenant nous n'attribuons pas de style à chaque élément individuellement, mais le plaçons dans le « en-tête » du document, indiquant ainsi que tous les titres ,
- les paragraphes seront bleus
- rouge. Imaginez à quel point notre travail serait plus facile s'il y avait une centaine de paragraphes de ce type et une quinzaine de titres sur une page, et que le document lui-même pèserait moins en « supprimant » toutes les descriptions de style répétitives pour chaque élément individuel.
Maintenant les commentaires promis :
Étiqueter il existe une déclaration directe des styles de certains éléments HTML selon la syntaxe suivante :
Si plusieurs propriétés d'un élément sont spécifiées dans un bloc de déclaration de style, elles sont séparées par un point-virgule.
CSS dans un fichier externe séparé.
En bref, nous arrivons au principal avantage, à mon avis, du CSS, à savoir la possibilité de mettre toutes les informations liées à la conception du site dans un fichier externe séparé.
Alors, ouvrez le bloc-notes (ou un autre éditeur) et écrivez-y le texte suivant :
Corps (couleur d'arrière-plan : #c5ffa0)
a (couleur : #000060 ; poids de la police : gras ;)
a: survol (couleur : #ff0000 ; poids de la police : gras ; décoration du texte : aucun)
h1 (couleur : #0000ff ; taille de police : 18px)
h2 (couleur : #ff00ff ; taille de police : 16px)
p (couleur : #600000 ; taille de police : 14px)
Je vais essayer de vous raconter en détail ce que nous avons écrit sur cette chose étrange dans les chapitres suivants de ce manuel.
Tous! Le fichier de description de style a été créé ! Il ne reste plus qu'un tout petit peu, à savoir forcer pages requises notre site Internet pour obtenir des informations sur ce fichier.
Cela se fait en utilisant la balise (connexion). Étiqueter polyvalent et sert à « lier » un document HTML avec des fichiers externes supplémentaires qui assurent son bon fonctionnement. Étiqueter est une sorte de lien, destiné uniquement non pas aux utilisateurs, mais aux programmes de navigation (navigateurs). Parce que contient exclusivement des informations de service ; elles sont situées en tête du document HTML entre les balises ; et n'est pas affiché à l'écran par les navigateurs.
Étiqueter a des attributs :
href- Chemin d'accès au fichier.rapport- Définit la relation entre le document actuel et le fichier référencé.
- icône de raccourci - Spécifie que le fichier inclus est un fichier .
- feuille de style- Spécifie que le fichier inclus contient une feuille de style.
- application/rss+xml - Fichier dans Format XML pour décrire le fil d'actualité.
Puisque nous incluons une feuille de style en cascade en tant que fichier externe, notre lien de service prend la forme suivante :
Je le répète, pour certainement dissiper d'éventuels malentendus. Attribut rapport attribuer une valeur feuille de style Puisque nous connectons une feuille de style en cascade en tant que fichier externe, nous indiquons le chemin d'accès au fichier CSS (dans cet exemple, le fichier s'appelle monstyle.css et se trouve à côté du document HTML dans lequel ce lien est écrit), nous indiquons également que ce fichier est du texte et contient une description de style type="texte/css"
Maintenant, nous insérons cette ligne dans les en-têtes de page de notre site et apprécions le résultat.
fichier monstyle.css
corps (couleur d'arrière-plan : #c5ffa0)
a (couleur : #000060 ; poids de la police : gras ;)
a: survol (couleur : #ff0000 ; poids de la police : gras ; décoration du texte : aucun)
h1 (couleur : #0000ff ; taille de police : 18px)
h2 (couleur : #ff00ff ; taille de police : 16px)
p (couleur : #600000 ; taille de police : 14px)
fichier index.html
Menu:
Tout sur les éléphants.
Achetez un éléphant.
Louez un éléphant.
Tout sur les éléphants
Sur ce site vous trouverez toutes les informations sur les éléphants.
Fichier éléphant.html
Menu:
Tout sur les éléphants.
Achetez un éléphant.
Louez un éléphant.
Acheter un éléphant
Avec nous, vous pouvez acheter les meilleurs éléphants à des prix compétitifs !!
Fichier éléphant1.html
Menu:
Tout sur les éléphants.
Achetez un éléphant.
Louez un éléphant.
Louer un éléphant
Seulement ici, vous pouvez louer des éléphants !!
Dans l'exemple ci-dessus, "site sur les éléphants", sur à l'heure actuelle, il y a trois pages, chacune étant associée à un seul fichier CSS externe - mystyle.css. Ainsi, nous l'avons considérablement « déchargé » et avons rendu la conception de l'ensemble du site « adaptée aux mobiles ». Imaginez combien de kilo-octets nous gagnerions si ce site avait une centaine de pages à part entière !? Et aussi, combien de temps gagnerions-nous si nous devions changer quoi que ce soit dans sa conception !?
Dans ce chapitre, nous avons examiné trois façons d'intégrer du CSS dans un document HTML. Lequel vaut-il mieux utiliser ?
- Utiliser l'attribut style pour n'importe quel élément, si cet élément avec un style différent des autres éléments est le seul sur l'ensemble du site.
- Utiliser la balise
Créez un tableau CSS et connectez-le aux pages HTML