Webelix.net :: CSS - Méthode externe (linking)

Vous êtes ici : Home Page

Cours

CSS

Methode externe

Imprimer

Informations Membres

	[195] Posts sur le forum
	[177] Membres inscrits

Il y a en ligne :

0 Membre

1 Invité

Membre en ligne:
Aucun

Partenariat

Vous pouvez aider ce site à évoluer, en contribuant à son développement. Proposez vos idées de cours et/ou dossiers. Rendez-vous dans « Partenariat » pour en savoir plus.

Nom de domaine

Partenaires

Méthode externe (linking)

C'est-à-dire un fichier séparé qui portera l'extension .css et contiendra toutes les règles du CSS que vous avez choisi de définir et utilisées dans votre site (du moins sur les pages portant le code approprié de liaison), sachant aussi que les tags HTML suivants ne pouvent être utilisés :

html - head - title - meta - script - base - basefont

Ensuite dans chaque page où vous souhaitez en profiter, entre les tags <HEAD> et </HEAD> placer une simple ligne de code qui servira d'appel (trait d'union) et dont voici le modèle :

Utiliser la valeur d'une sélecteur contenu dans le fichier "essai04.css" a pour effet de répercuter les effets de sa définition sur les pages qui contiennent cet élément, avec toujours priorité au CSS sur le HTML qui pourrait se trouver en place.

link avertit le navigateur de la nature de ce lien.
rel="stylesheet" lui indique qu'il trouve une feuille de style externe.
L'attribut type="text/css" précise qu'il s'agir de texte et du genre CSS (Cascading Style Sheets).
L'attribut de lien href="....." donne le chemin d'accès et le nom du fichier qui contient les règles à appliquer.

Il est facile de comprendre que le "style à la volée" ("mise en forme rapide") ne peut être retenu pour tout un site, pas plus d'ailleurs qu'un "style interne" reproduit chaque page.
Bien sûr c'est possible mais on s'éloigne alors du véritable CSS tel qu'il a été conçu et c'est un peu comme rouler sans arrêt en seconde avec une voiture.

Code source dans HEAD:

<link rel="stylesheet" type="text/css" href="/css/essai04.css">

Ci-après vous trouvez le détail du fichier "essai04.css" placée pour cet exemple dans le répertoire "css" de la racine du site.
Vous devez impérativement le créer sur une feuille blanche (à l'exclusion de tout logiciel éditeur HTML) comme par exemple le "bloc-notes" ou "Wordpad".

Fichier externe "essai04.css" :

/* code appliqué page 04
h3 {
 font-family: arial, verdana, sans-serif;
 font-size: 14pt;
 color: red;
 background-color: #FFFFFF;
}
h6 {
 font-family: arial, verdana, sans-serif;
 font-size: 10pt;
 color: green;
 background-color: #FFFFFF;
}

Remarquez surtout que les règles sont présentées sans aucun code d'introduction, avec possibilité de placer un commentaire souvent fort utile (sera vu plus loin) et l'utilisation de la propriété "font-family" où les valeurs sont séparées par une simple virgule, arial étant proposé en premier et si le visiteur ne possède pas cette police, alors arial est sollicité... le nombre des polices est à la discrétion du webmaster mais en placer trois semble suffisant.

Codes source dans BODY:

<h3> Ici H3 est le sélecteur HTML de ce paragraphe de texte </h3>

<h6>Ici H6 est le sélecteur de ce paragraphe en vert :
Enfin un gain de poids non négligeable est souvent obtenu par ce langage,
bien que le détail du contenu soit aussi un élément qui va plus ou moins modifier ce gain. </h6>

Résultats de ces exemples :

Ici H3 est le sélecteur HTML de ce paragraphe de texte

Ici H6 est le sélecteur de ce paragraphe en vert : Enfin un gain de poids non négligeable est souvent obtenu par ce langage, bien que le détail du contenu soit aussi un élément qui va plus ou moins modifier ce gain.

Remarque :

Il s'agit d'une démonstration de base simpliste pour découvrir comment les feuilles de style cohabitent avec les tags HTML et vous devriez réaliser un essai sur votre ordinateur avec les codes donnés dans cette page et ensuite les modifier pour visualiser les différences et résultats obtenus.
Pour cet exemple le fichier "essai04.css" se trouve dans le même dossier du répertoire du site que les fichiers qui font appel à lui.
Sinon vous devez utiliser une adresse HREF absolue du genre "http://www.webelix.net/css/essai04.css".

- Opérer par exemple une modification dans le fichier "essai.css" se répercutera aussitôt sur toutes les pages concernées du site lui faisant référence.

- L'affichage reste identique pour chaque visiteur, quelle que soit la configuration en taille et en couleurs de son navigateur (s'il a coché ses paramètres correctement (!!) en acceptant les valeurs proposées dans le contenu des fichiers, sinon il devra se contenter des valeurs par défaut de son navigateur, et je dirai "dommage".)

- Vous obtiendrez souvent un gain de poids non négligeable, bien que le détail du contenu soit aussi un élément majeur qui va plus ou moins modifier ce gain (votre page contient beaucoup d'images et peu de texte, ou vice-versa.)

- Enfin le risque d'erreurs lors des modifications est réduit presque à zéro.

Soyons d'accord, il ne sera souvent utilisé que la "Méthode interne" ou du "style à la volée" consistant à placer du CSS dans l'en-tête du code source ou encore auprès du mot ou ensemble à traiter, pour les besoins des démonstrations c'est évident. OK !

Les 6 dernières pages de Cours et Dossiers ajoutées

Informations Générales

Informations Membres

Partenariat

Nom de domaine

Partenaires

Méthode externe (linking)