Les sites Web associent style et structure. Sur le Web actuel, il est recommandé de garder ces deux aspects d’un site séparés.
HTML a toujours été ce qui donne à un site sa structure. Aux débuts du Web, HTML contenait également des informations de style. Des éléments comme le Les balises ont été jonchées dans le code HTML, ajoutant des informations d'apparence aux informations structurelles. Le mouvement des standards Web nous a poussés à changer cette pratique et à insérer toutes les informations de style dans des feuilles de style CSS ou en cascade. Pour aller plus loin, il est actuellement recommandé d'utiliser une "feuille de style externe" pour les besoins en style de votre site Web. Avantages et inconvénients des feuilles de style externes
L'une des meilleures choses à propos des feuilles de style en cascade est que vous pouvez les utiliser pour maintenir la cohérence de l'ensemble de votre site. Pour ce faire, le moyen le plus simple consiste à créer un lien ou à importer une feuille de style externe. Si vous utilisez la même feuille de style externe pour chaque page de votre site, vous pouvez être sûr que toutes les pages auront le même style. Vous pouvez également faciliter les modifications pour l’avenir. Étant donné que chaque page utilise la même feuille de style externe, toute modification de cette feuille aura un impact sur chaque page du site. C'est beaucoup mieux que de devoir changer chaque page individuellement!
Avantages des feuilles de style externes
- Vous pouvez contrôler l'apparence de plusieurs documents à la fois.
- Ceci est particulièrement utile si vous travaillez avec une équipe de personnes pour créer votre site Web. Il peut être difficile de se rappeler de nombreuses règles de style, et même si vous avez un guide de style imprimé, il est inefficace et fastidieux de le parcourir en permanence pour déterminer si un exemple de texte doit être écrit en police Arial de 12 points ou de courrier à 14 points. En disposant de tout au même endroit, et puisque cet endroit est également le lieu où vous feriez des changements, vous pouvez rendre la maintenance beaucoup plus facile.
- Vous pouvez créer des classes de styles qui peuvent ensuite être utilisés sur de nombreux éléments HTML.
- Si vous utilisez souvent un certain style de police pour mettre l'accent sur divers éléments de votre page, vous pouvez utiliser un attribut de classe que vous avez défini dans votre feuille de style pour obtenir cet aspect, plutôt que de définir un style spécifique pour chaque instance de la page. accentuation.
- Vous pouvez facilement regrouper vos styles pour être plus efficace.
- Toutes les méthodes de regroupement disponibles dans CSS peuvent être utilisées dans des feuilles de style externes, ce qui vous offre davantage de contrôle et de flexibilité sur vos pages.
Inconvénients des feuilles de style externes
- Les feuilles de style externes peuvent augmenter le temps de téléchargement, surtout si elles sont extrêmement volumineuses. Étant donné que le fichier CSS est un document distinct qui doit être chargé, les performances de ce téléchargement seront affectées.
- Les feuilles de style externes grossissent très vite car il est difficile de savoir quand un style n'est plus utilisé car il n'est pas supprimé lorsque la page est supprimée. Une gestion correcte de vos fichiers CSS est importante, en particulier si plusieurs personnes travaillent sur le même fichier.
- Si vous ne possédez qu'un site Web d'une seule page, il peut ne pas être nécessaire d'avoir un fichier externe pour CSS, car vous n'avez que cette page à styler. De nombreux avantages des CSS externes sont perdus lorsque vous ne possédez qu'un seul site de page.
Comment créer une feuille de style externe
Les feuilles de style externes sont créées avec une syntaxe similaire à celle des feuilles de style au niveau du document. Cependant, tout ce que vous devez inclure est le sélecteur et la déclaration. Tout comme dans une feuille de style au niveau du document, la syntaxe d'une règle est la suivante:
sélecteur {propriété: valeur;}
Enregistrez ces règles dans un fichier texte portant l'extension .css. Ce n'est pas obligatoire, mais c'est une bonne habitude à prendre pour pouvoir reconnaître immédiatement vos feuilles de style dans une liste de répertoires.
Une fois que vous avez un document de feuille de style, vous devez le lier à vos pages Web. Ceci peut être fait de deux façons:
- Mise en relation
- Pour lier une feuille de style, vous utilisez la balise HTML. Cela a les attributs rel, type, et href. L'attribut rel indique ce que vous liez (dans ce cas une feuille de style), le type définit le type MIME pour le navigateur et href est le chemin d'accès au fichier .css.
- Importation
- Vous utiliseriez une feuille de style importée dans une feuille de style au niveau du document afin de pouvoir importer les attributs d'une feuille de style externe sans perdre les attributs spécifiques du document. Vous l'appelez de la même manière que lorsque vous appelez une feuille de style liée, à la différence près qu'elle doit être appelée dans une déclaration de style au niveau du document. Vous pouvez importer autant de feuilles de style externes que nécessaire pour gérer votre site Web.
Article original de Jennifer Krynin. Édité par Jeremy Girard le 8/8/17
