Les principaux avantages des feuilles de style en cascade

click fraud protection

Feuilles de style en cascade ont de nombreux avantages. Ils vous permettent d'utiliser la même feuille de style sur l'ensemble de votre site Web. Il y a deux façons de faire ça:

  • liaison avec l'élément LINK
  • importation avec la commande @import

Avantages et inconvénients des feuilles de style externes

L'une des meilleures choses à propos feuilles de style en cascade est que vous pouvez les utiliser pour garder votre site cohérent. La façon la plus simple de le faire est de lier ou d'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 la même modes.

Certains des avantages de l'utilisation de feuilles de style externes incluent que 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. De nombreuses règles de style peuvent être difficiles à retenir, et bien que vous ayez un guide de style imprimé, il est fastidieux d'avoir le feuilleter constamment pour déterminer si un exemple de texte doit être écrit en police Arial 12 points ou 14 points Courrier.

instagram viewer

Vous pouvez créer des classes de styles qui peuvent ensuite être utilisées sur de nombreux éléments HTML différents. Si vous utilisez souvent une police spéciale Wingdings pour mettre l'accent sur divers éléments de votre page, vous pouvez utiliser la police Wingdings classe que vous avez configurée dans votre feuille de style pour les créer plutôt que de définir un style spécifique pour chaque instance du accentuation.

Vous pouvez facilement regrouper vos styles pour être plus efficace. Toutes les méthodes de regroupement disponibles pour CSS peuvent être utilisées dans des feuilles de style externes, ce qui vous offre plus de contrôle et de flexibilité sur vos pages.

Cela dit, il existe également de très bonnes raisons de ne pas utiliser de feuilles de style externes. D'une part, ils peuvent augmenter le temps de téléchargement si vous vous connectez à beaucoup d'entre eux.

Chaque fois que vous créez un nouveau fichier CSS et que vous le liez ou l'importez dans votre document, cela nécessite que le navigateur Web effectue un autre appel au serveur Web pour obtenir le fichier. Et les appels de serveur ralentissent les temps de chargement des pages.

Si vous n'avez qu'un petit nombre de styles, ils peuvent augmenter la complexité de votre page. Parce que les styles ne sont pas visibles directement dans le HTML, quiconque regarde la page doit obtenir un autre document (le fichier CSS) pour comprendre ce qui se passe.

Comment créer une feuille de style externe

Les feuilles de style externes sont écrites de la même manière que les feuilles de style intégrées et en ligne. Mais tout ce que tu as besoin d'écrire c'est le style sélecteur et le déclaration. Vous n'avez pas besoin d'un élément ou d'un attribut STYLE dans le document.

Comme pour tous les autres CSS, la syntaxe d'une règle est:

sélecteur { propriété: valeur; }

Ces règles sont écrites dans un fichier texte avec l'extension.

.css
. Par exemple, vous pouvez nommer votre feuille de style.
styles.css. 

Lier des documents CSS

Pour lier une feuille de style, vous utilisez l'élément LINK. Cela a les attributs rel et href. L'attribut rel indique au navigateur ce que vous liez (dans ce cas une feuille de style) et l'attribut href contient le chemin d'accès au fichier CSS.

Il existe également un type d'attribut facultatif que vous pouvez utiliser pour définir le type MIME du document lié. Ce n'est pas obligatoire en HTML5, mais doit être utilisé dans les documents HTML 4.

Voici le code que vous utiliseriez pour lier une feuille de style CSS appelée styles.css:

Et dans un document HTML 4, vous écririez:

type="texte/css">

Importation de feuilles de style CSS

Les feuilles de style importées sont placées dans l'élément STYLE. Vous pouvez ensuite utiliser des styles intégrés si vous le souhaitez. Vous pouvez également inclure des styles importés dans des feuilles de style liées. Dans le document STYLE ou CSS, écrivez:

@import url(' http://www.yoursite.com/styles.css'); 
instagram story viewer