Comment ajouter des feuilles de style en cascade à votre site


Une fois que vous vous êtes familiarisé avec les principaux concepts HTML, il est temps d'ajouter du style à votre site Web.

À l'époque où HTML a été conçu pour la première fois, le style et la mise en forme des éléments étaient tous gérés dans le cadre du code HTML, à l'aide de la balise et de ses nombreux cousins. Tout cela a changé avec HTML 4.0, lorsque le World Wide Web Consortium (également connu sous le nom de W3C) a ajouté CSS au mélange. Les feuilles de style en cascade donnent au concepteur Web beaucoup plus de contrôle sur l'apparence de ses pages que le HTML seul.

Il existe trois méthodes de base pour définir les attributs de style:

1. Dans le corps de la page, communément appelé "style en ligne". Par exemple, si vous souhaitez faire apparaître un seul paragraphe dans votre page en texte rouge de 14 pixels, vous pouvez définir le style dans la balise de paragraphe elle-même comme suit:

Ceci est un paragraphe



2. Dans le haut de la page, communément appelé «feuille de style interne». Si vous vouliez que tous les paragraphes d'une page particulière s'affichent en texte rouge de 14 pixels, vous placeriez le code suivant en tête de cette page:


p {
taille de police: 14px;
couleur: # ff0000;
}


3. Dans un fichier séparé, communément appelé «feuille de style externe». Si vous vouliez qu'un certain nombre de pages de votre site Web comportent des paragraphes rouges de 14 pixels, vous devez d'abord créer un nouveau fichier appelé quelque chose comme stylesheet.css (le nom du fichier peut varier selon vos préférences, mais il doit utiliser le extension .css) et entrez le code suivant sur cette page:

p {
taille de police: 14px;
couleur: # ff0000;
}

Après avoir enregistré style.css, vous créerez un lien spécial à partir de toutes ces pages où vous souhaitez des paragraphes rouges de 14 pixels, en plaçant le code ci-dessous dans leurs sections d'en-tête:



En règle générale, vous devez conserver autant de données de votre feuille de style que possible dans une feuille de style externe. Non seulement cela permet d'économiser tout le temps qu'il vous faudrait pour disperser les définitions de feuilles de style dans votre site, mais cela réduit également les temps de chargement des pages si toutes les informations CSS de l'ensemble de votre site sont contenues dans un seul document. Lorsqu'un visiteur parcourt plusieurs pages de votre site, son ordinateur n'a besoin de charger la feuille de style qu'une seule fois.

Encore une autre façon de se connecter aux informations de feuille de style est l'instruction @import. @import vous permet de vous connecter à une feuille de style externe à partir d'une autre feuille de style. Il est utilisé comme suit:

@import url ("otherstyle.css");

L'instruction @import devrait être le premier élément de la feuille de style, sinon elle ne fonctionnera pas. Vous pouvez également utiliser @import dans l'en-tête d'un document HTML, avec les mêmes résultats que de placer un lien vers une feuille externe. Cette méthode est le plus souvent utilisée pour «pirater» ou tromper certains navigateurs; la plupart des versions de navigateur plus anciennes ignorent @import, vous pouvez donc utiliser cette méthode pour leur cacher les données de feuille de style tout en fournissant les données aux visiteurs avec des versions de navigateur plus récentes.

Comment créer un site web: TUTO HTML (Insérer Font Awesome Icons) (Mai 2020)



Tags Article: Comment ajouter des feuilles de style en cascade à votre site, HTML, HTML, XHTML, DHTML, FTP, JPEG, GIF, CSS, mode d'emploi, feuilles de style en cascade, W3C, World Wide Web Consortium, normes, scripts, code source, feuilles de style , Web, langues, liens, cours, fond d'écran, sites Web, conceptions de sites Web, aide