|
Introduction Aux Feuilles De Style
- Bloc Résumé
- De très nombreuses ressources existent sur les styles et fameuses FeuillesDeStyleEnCascade. Aussi considérez cette page initiée en juillet 2004 comme une simple remise à niveau personnelle. Actuellement en construction pour l'élaboration d'une formation destinée à tous les publics découvrant le merveilleux monde des feuilles de style en cascade et du design liquide CSS
 . Cette page ouverte à toutes vos modifications est le fruit d'une compilation de nombreuses publications éparses dont les excellentes publications d'EricMeyer. Elle peut toujours se compléter par vos contributions ou de très nombreux liens externes comme ceux que vous trouverez en bas de page et sur la page dédiée RessourcesCSS. N'hésitez pas à participer -- ChristopheDucamp
Introduction : De la séparation du contenu et de la présentation
La plupart des traitements de texte actuels permettent de modifier le texte et l'ensemble du document par le biais des styles. Les styles rassemblent tous les attributs (tels que taille, format...) que vous pouvez appliquer à des types de texte similaires (titres, pied de page, légendes). Supposons que vous souhaitiez mettre tous vos titres en Verdana italique avec une taille de 16 points. Vous assignez à ce moment là tous les attributs à un style que vous nommerez Titre. Et lorsque vous saisissez le titre d'une section, il vous suffit alors de lui attribuer le style section Titre pour appliquer les attributs au texte en une seule opération. Plus tard, si vous décidez que les titres des sections doivent être en Times 14 points, il vous suffira simplement de modifier la définition du style Section Titre. Votre traitement de texte remplace alors tout le texte marqué par le style Titre dans votre document.
Les CSS fonctionnent sur le même principe : vous configurez votre CSS à un emplacement central qui affecte l'ensemble des balises HTML d'une page Web ou de l'ensemble d'un site. CSS fonctionne avec HTML mais ce n'est pas du HTML. CSS est constituée d'un code dissocié améliorant les possibilités du HTML en vous permettant de redéfinir la manière dont fonctionnent les balises HTML existantes.
Une simple ligne de code comme suit définit l'ensemble de vos paragraphes encadrés par les balises <p> et </p> en leur attribuant une police et une couleur (rouge)
p {font-family:Verdana, Arial, sans-serif; color: red}
Les styles et feuilles de style en cascade CSS constituent une norme publiée par le W3C destinée à contrôler la présentation visuelle des pages web. Pour faire court, les CSS permettent aux professionnels du web d'ajouter de la couleurs, des styles de typo, du positionnement et encore énormément d'autres choses pour remplir des pages HTML et XTHML.
Le principal avantage de l'utilisation de CSS est la dissociation complète du contenu (ou structure) d'un document de sa présentation. Une page ou un site web peut être entièrement modifiée par la simple modification d'une feuille de style plutôt que de mettre à jour tout le balisage HTML des documents HTML utilisés par le site.
Les autres bénéfices essentiels de CSS :
- Accessibilité accrue quel que soit le type de terminal et pour tous les types d'utilisateurs
- Performance améliorée
- Travail de production diminué
Pour résumer, CSS est une composante essentielle pour pallier les limites du html et construire le web du futur. Désormais ouverte aux masses, CSS sait aussi fournir aux professionnels une énorme amélioration dans de nombreux domaines. Dans les sections suivantes, nous essaierons de couvrir quelques définitions essentielles, quelques pratiques courantes sur les balises, le contrôle de la typo et de la mise en page. Cette page est aussi et surtout une invitation à vous faire essayer les exemples. Utilisez votre éditeur HTML préféré ou le CityDesk
'Note pour CityDesk :Utilisez le dossier StyleSheets fourni par défaut pour y stocker tous vos essais de fichiers en leur adjoignant l'extension ".css".
Règles de style et Structure : Définition
  source icono bugalood
Une CSS comprend une ou plusieurs règles décrivant comment les éléments d'une page correspondant à des marqueurs HTML spécifiques devraient être affichés. Chaque règle d'une feuille de style en cascade comprend deux parties :
- le sélecteur (HTML, classe ou ID) : un caractère alphanumérique qui identifie une règle
- la déclaration qui se compose
- d'une propriété : elle identifie ce qu'il faut définir
- d'une valeur de cette propriété (ce peut être un mot-clé comme oui ou non, un pourcentage, un nombre. dépend uniquement de la propriété à laquelle cette valeur est assignée)
La syntaxe de base d'une 'règle CSS est ainsi :
sélecteur {propriété:valeur; }
exemple :
h1 {font-size: 12px; }
Dans cet exemple h1 est le sélecteur, font-size est la propriété et la valeur est 12px.Notez que la déclaration (propriété + valeur) est toujours séparée par deux points (":"). Une déclaration peut contenir plusieurs paires de propriété/valeur. Chacune de ces paires doit se terminer par un point virgule (";").
Les Sélecteurs
Les sélecteurs identifient les éléments auxquels s'appliquent un style. Nous étudierons dans les sous-parties suivantes :
- le sélecteur html
- le sélecteur contextuel
- le sélecteur de classe
- le sélecteur d'ID
- le sélecteur de pseudo-classe ou pseudo-élément
Définir un sélecteur html
Tous les sélecteurs HTML peuvent être définis dans l'en-tête du document (balises <style> et </style> ou dans un fichier CSS externe importé ou lié au document HTML. Pour dédinir un sélecteur :
1.Commencez par le sélecteur HTML dont vous voulez définir les propriétés et ajoutez une accolade "{" pour ouvrir la règle :
p {
2.Saisissez la ou les définitions de propriété(s)
color: #666666; font-size: 1em; line-height: 15px; font-family: Verdana, Arial, Sans-Serif;
3.' Fermez la liste de définition par une accolade fermante "}"
Nous pourrons étudier plus tard la liste exhaustive des propriétés associées aux balises. A titre personnel, je garde sous le coude l'excellent mémento de poche d'EricMeyer disponible chez O'Reilly CSS précis et concis  ISBN 2-84177-156-3. Notez que cette version de poche et très économique ISBN 0596007779 a été Css Pocket Reference remise à jour en anglais depuis juillet 2004. Si vous lisez l'anglais, pour moins de 10 USD ce peut être aussi un excellent investissement pour compléter l'apprentissage en ligne.
Définir un sélecteur contextuel
Le sélecteur contextuel spécifie les attibuts de style pour les éléments HTML liés au contexte dans lequel ils apparaissent. Le sélecteur contextuel suivant spécifie que tout texte en gras à l'intérieur d'un élément de liste s'affiche en rouge :
li b {color: purple;}
Définir un sélecteur de classe
Le sélecteur de classe vous permet de définir un style indépendant applicable à toute balise HTML. Contrairement au sélecteur HTML qui définit automatiquement un type particulier de balise HTML, chaque classe se voit attribuer un nom unique spécifié ensuite dans la ou les balises HTML qui l'exploitent par le biais de l'attribut style. De la même manière que précédemment, les règles de classe peuvent être placées soit entre les balises <style> et </style> dans l'en-tête du document ou dans un fichier CSS externe importé ou lié au document HTML.
Aussi, vous pouvez regrouper des éléments spécifiques HTML dans une classe à l'aide de l'attribut "class" :
<h1 class="alerte">Danger de Mort !</h1>
<p class="alerte">Soyez Prudent...</p>
Pour spécifier un style pour les éléments d'une classe particulière (comme ici la classe alerte), on ajoute simplement le nom de la classe au sélecteur HTML en la séparant par un point :
h1.alerte {color: red;}
Autre cas :
alerte est ici dans ce cas une classe indépendante que vous pouvez employer avec n'importe quelle balise HTML.
.alerte {color: red;}
Une classe peut être directement associée à un sélecteur HTML auquel cas on parle de classe dépendante. Autrement dit, le sélecteur de classe ne peut être employé qu'avec une balise HTML particulière.
blockquote.alerte {font-size: 4em; color: red; }
Sélecteur ID
Tout comme le sélecteur de classe le sélecteur d'ID peut servir à créer des styles uniques indépendants de toute balise HTML. Il peut être ainsi assigné à toute balise HTML appropriée. La syntaxe générale pour affecter un identifiant unique à un élément HTML particulier, il suffit de spécifier la valeur de l'ID et la faire précéder d'un signe dièse "#"
En conjonction avec ce document HTML.
<div id="texteprincipal">Au commencement ....</div>
Pour appliquer un style à l'élément identifié, souvenez-vous de placer le signe "#" au lieu du "." dans votre règle :
#texteprincipal {font-weight: bold; }
#pieddepage {font-size: small; }
Vous étudierez que les ID sont la pierre angulaire du Dynamic HTML. Autrement dit, contrairement à un sélecteur de classe, une ID ne doit normalement s'utiliser qu'une fois par page pour définir un élément unique en tant qu'objet. Définissez les ID entre les balises <style> et </style> de l'en-tête du document ou dans un fichier CSS externe importé ou lié au document HTML.
Vous constaterez dans de nombreux exemples, que l'utilisation des ID fait partie du savoir de base pour construire la structure d'un document CSS.
Sélecteur de pseudo-classe ou pseudo-élément
Les spécifications CSS1 définissent certaines pseudo-classes de l'élément ancre ("a") pour définir les différents états d'un lien hypertexte.
a:link {color: #00f}
a:visited {color: #0f0}
a:hover {color: #c0f}
a:active {color: #f00}
De même les pseudo-éléments sont des sous-ensembles d'éléments existants pour lesquels des styles peuvent être spécifiés :
p:first-letter {color: red}
p:first-line {color: #ff0; font-size: 400%; }
Les Fondamentaux CSS
Avan d'écrire une CSS, vous avez besoin de savoir comment les navigateurs l'appliquent au XHTML. Quelques concepts fondamentaux CSS doivent être abordés. Des forces basiques qu'OwenBriggs compare à la loi gravitationnelle de Newton. Pour CSS, les concepts fondamentaux sont :
- Eléments de blocs et en ligne : comment les styles s'appliquent.
- Héritage et Cascade : former les règles de cheminement à suivre qui affectent les styles
- Le Modèle de Boîte : une introduction à un outil visuel très primaire pour comprendre la force CSS
Cette section est développée en détail dans FondamentauxCSS.
3 manières pour ajouter une feuille de style à un document
Rappelons-le, les CSS permettent de gérer l'apparence des documents. Le principal bénéfice de CSS est qu'en modifiant la définition d'une seule règle centralisée, on intervient sur l'apparence de toutes les balises contrôlées par cette règle. Aussi nous verrons dans cette section où placer la règle et ses répercussions.
La règle en ligne :
Dans une balise HTML se trouvant dans le corps du document pour affecter une seule balise au document.
ex : <h1 style="color: purple; font-size: 20pt;">Ici un titre violet de grande taille</h1>
La règle imbriquée ou intégrée :
Placée dans l'en-tête du document en utilisant l'élément Style à placer entre les marqueurs <head> et </head>pour affecter l'ensemble d'une page web.
ex :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr">
<head>
<title>Styles Imbriqués</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
h1 {color:purple; }
p {font-size: 10pt; color:gray;}
</style>
</head>
...
</html>
N'hésitez pas à visiter le cours de Pascale pour observer une feuille de style de base commentée que vous pouvez naturellement utiliser en style imbriqué !
La règle externe :
Placée dans un document externe lié ou importé dans les documents HTML pour affecter l'ensemble d'un site web.
La position d'une règle et sa relation avec le document ainsi que les autres règles CSS déterminent l'effet produit par la règle sur le document.
2 méthodes existent pour établir un lien vers la feuille externe : l'élément LINK ou la directive @import
ex avec link :
<head>
<link rel="stylesheet" type="text/css" href="monstyle.css" >
</head>
exemple avec la directive @import:
<head>
<style type="text/css">
<!-
@import=url(monstyle.css);
-->
</style>
</head>
Astuces:
/*Ceci est un commentaire qui me sera bien utile pour m'y retrouver plus tard.
Et soyez rassuré le navigateur ne lira pas le contenu placé à l'intérieur de ces balises ! */
A ce stade, vous devriez être capable de construire vous-même quelques exemples de règles de style simples dans CityDesk. Nous avons évoqué les fondamentaux de la syntaxe CSS. N'hésitez pas à lire les liens externes en bas de page pour en savoir plus et à vous entraîner. Dans les sections suivantes, nous verrons comment attacher une feuille de style à un document ou à un site, aborderons quelques règles sur la typographie, parlerons des boîtes.
Quelles valeurs spécifier ?
Il est temps de faire une pause. Cette section extraite allègrement du précis sur les CSS d'EricMeyer a pour intention de décrire succintement la syntaxe requise pour définir les propriétés CSS. Pour une liste plus exhaustive reportez-vous à la aux spécifications originales CSS1 du W3C (cf liens sur la traduction en bas de page) qui indiquent cinq types de valeurs de propriétés :
- mots-clés
- valeurs de longueur
- valeurs en pourcentage
- couleurs
- URL
Mots clés
Ce sont des valeurs explicites telles que dotted pour border-style et xxlarge pour font-size. Comme les noms de propriétés, les mots-clés ne sont pas sensibles à la casse.
Valeurs de longueur
Une valeur de longueur s'exprime sous forme d'un nombre positif ou négatif suivi immédiatement (sans espace) d'une abréviation sur deux lettres spécifiant les unités utilisées. Une valeur de 0 (zéro) n'a pas besoin d'être suivie d'unités. Les unités de longueur se divisent en deux types : les unités absolues et les unités relatives qui sont mesurées par rapport à d'autres éléments. Les styles CSS prennent en charge les unités suivantes :
- Le Pouce (in) : unité de mesure anglo-saxonne. Un pouce = 2.54 cm. A utiliser avec précaution même si l'on utilise cette unité pour déterminer la taille des moniteurs... Selon EricMeyer, la correspondance entre les pouces et les dimensions d'un périphérique d'affichage est en général vague car la plupart des systèmes n'ont aucune idée de la relation de leur zone d'affichage avec les mesures du monde réel comme le pouce.
- Le centimètre (cm) : système métrique utilisé dans le monde entier. Un centimètre = 0.394 pouce. Même problème d'équivalence que le pouce pour la création à l'écran.
- Le millimètre (mm) : 10 mm dans un cm. Même problème que ci-dessus
- Le point (pt) : Unité de mesure typographique standard utilisée par les imprimantes, composeuses et plus récemment par les traitements de texte et mise en page. 72 points dans un pouce : ainsi une lettre capitale définie à 12 points représente un sixème de pouce. Par exemple {font-size: 18pt;} est équivalent à {font-size: 0.25in;}, en supposant une équivalence correcte des dimensions par rapport à l'environnement de l'afficheur.
- Le pica (pc) : Autre unité de mesure typographique. Un pica vaut 12 points. Autrement dit, vous avez 6 picas dans un pouce. Ainsi, une lettre capitale dans le corps du texte définie à un pica a une hauteur égale au sixième d'un pouce. Par exemple, {font-size: 1.5 pc;} définit le texte à la même taille que la précédente déclaration en points en supposant une correspondance correcte.
- hauteur-em (em) : La hauteur x de la police décrit la hauteur de tout caractère en minuscule n'ayant pas de hampe ascendante (par exemple d) ou de hampe descendante (comme "p"). La majorité des polices ne donnant pas d'information sur leur hauteur-x, la plupart des navigateurs procèdent (mal) par approximation en posant que 1ex égale 0.5em. Le navigateur IE5/Mac représente l'exception.
- Le pixel (px) : le pixel est un petit carré à l'écran défini de façon abstraite par les CSS. Selon les spécifications, un pixel a une taille telle que 90 pixels égale 1 pouce. La plupart des navigateurs ignorent ceci en faveur d'un adressage des pixels sur le moniteur. Les facteurs d'échelle entrent en jeu lors de l'impression, même si leur fiabilité est douteuse.
Valeurs en pourcentage
Nombre positif ou négatif suivi du symbole "%". Valeur toujours calculée par rapport à une autre valeur. Par exemple {line-height: 150%} définit la séparation entre les lignes à 150% de la hauteur courante de la ligne.
Couleurs
Ce chapitre pourrait constituer un livre à lui tout seul. Les experts pourront consulter l'ouvrage de Joe Forkan ( ISBN 2880465427) mais ce n'est pas l'objet de cette page ! Sachez simplement qu'il existe en CSS cinq manières de spécifier les valeurs d'une couleur :
- #RRVVBB
- #RVB
- #rgb(rrr.rr%,vvv.vv%,bbb.bb%)
- rgb (rrr,vvv,bbb)
- keyword : l'un des 16 mots-clés reconnus pour désigner une couleur empruntée à la palette VGA originale de Windows : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow
Pour une utilisation simplifiée, plusieurs outils sont à votre disposition :
URL
Les URL ne sont pas souvent utilisées dans les feuilles de style, mais si vous comptez les utiliser pour pointer un fichier, un graphique, la syntaxe est :
url(url)
La norme CSS définit les URL comme relatives à la feuille de style. Utilisez de préférence des URL absolues car NN4 inteprète l'URL comme relative au document stylisé.
Priorité dans les styles
Le fait de pouvoir défiinir les règles de style de plusieurs façons différentes est une source de conflit potentiel : votre document XHTML peut simultanément importer des styles depuis un fichier externe, utiliser la feuille de style interne ou les styles définis loaclement. En cas de conflit, les règles les plus spécifiques ont priorité sur les règles les moins spécifiques.
Les formats indépendants (id) ont priorité sur les sous-classes de format, qui sont eux-mêmes prioritaires sur les sélecteurs d'éléments. Le sélecteur !important ayant quant à lui priorité sur touts les autres.
Exemple :
<style type="text/css">
h1 {font-weight:bold; color:red !important;}
/* color-red est marqué !important. Sa déclaration de style est ainsi rendue importante dans le processus
de la cascade et supplante toutes les autres déclaration. */
</style>
Classification des éléments
Cette section décrira les trois types d'élements qui se classent en 3 types :
- éléments de blocs
- Tous les éléments tels que paragraphes, titres, listes, tableaux, div's, et body. Les éléments remplacés tels que les images et entrées de formulaire peuvent aussi être des éléments de blocs même si ce n'est généralement pas le cas. Les éléments de bloc s'affichent habituellement sur une ligne débutant sur une nouvelle ligne forçant tout élément qui les suit à faire de même. Ils peuvent être les enfants d'autres éléments de blocs.
- éléments en ligne
- Eléments tels que l'ancre ("a"), em, span et la plupart des éléments remplacés tels que les images et entrées de formulaire. Ils ne forcent pas le retour ligne avant ou après l'élément. Peuvent être les enfants de n'importe quel autre des éléments suivants : bloc en ligne ou de type liste.
- éléments de listes
- Eléments qui en HTML incluent le seul élément "li". Spécifiquement définis pour obtenir des effets de présentation tels que des marqueurs (puce, lettre, nombre) et dans le cas d'une liste ordonnée, donner une idée numérique de l'ordre de celle-ci. Ainsi les éléments de liste dans une telle liste peuvent être numérotées automatiquement en fonction du contexte propre du document.
Typographie et Contrôle de votre Texte
La section TypographieCss aborde le contrôle de la typographie et l'espacement entre les paragraphes.
Boîtes CSS
Extrêmement flexibles, les modèles CSS de boîtes sont très puissants. Si vous êtes webdesigner, vous connaissez sûrement la mise en page avec des tables. Un premier aperçu a été donné dans les FondamentauxCSS. Cette section développée dans ModèlesDeBoîtes vous initiera aux premiers pas pour vous emmener vers un design sans tableau.
Autres Liens Ressources en français
| 
