Le langage CSS (Cascading Style Sheet) est un langage de mise en forme et de mise en page pour les documents HTML, XHTML, XML et Flex (dans une certaine mesure).
Le langage CSS est un langage très simple qui n'intègre pas de structure de contrôle complexe, pas de variables, il établi simplement des règles de mise en forme a appliquer à des parties précises du document.
Dans la majorité des cas (et selon les bonnes pratiques), le code CSS est placé dans un fichier CSS que l'on attache au document HTML avec une balise LINK placée dans le HEAD. L'intérêt principale c'est de pouvoir réutiliser plusieurs fois la même CSS dans plusieurs documents HTML, l'autre est de respecter la règle qui consiste à séparer le contenu (la page HTML) de sa mise en forme.
Si vous souhaitez aller plus loin dans cette séparation des attributions, le XSL va plus loin dans la mesure ou il sépare les données brutes (au format XML), la hiérarchisation sémantique de ces informations (fichiers XSL) et leur mise en forme graphique (fichier CSS).
Mettre du CSS dans HTML
Il existe plusieurs méthodes pour appliquer du CSS à un document web (Dans notre cas une page HTML):
- Dans un fichier CSS externe
- Dans le document
- Sur l'élément à skiner
Dans la mesure du possible, ayez toujours recourt à un fichier CSS externe (plus souple, ne surcharge pas le code HTML, réutilisable).
Fichier CSS
Les fichiers CSS sont de simples documents texte enregistrés avec l'extension *.css
Pour les attacher à un document web on utilise la balise LINK (judicieusement placée dans le HEAD) :
<link type="text/css" rel="stylesheet" media="all" href="dossier/fichier.css"/>
Pour plus d'information sur l'utilisation de la balise LINK, reportez vous au fichier "Les bases du HTML" dans la partie En-Tête.
Vous pouvez attacher plusieurs feuille de style à un même document HTML. C'est même recommandé dans le cadre de site web.
<link type="text/css" rel="stylesheet" media="all" href="style/layout.css"/> <link type="text/css" rel="stylesheet" media="all" href="style/skin-green.css"/>
Dans un soucis d'optimisation, vous pouvez positionner les chargements CSS et Javascript à la fin du body. Les pages s'afficherons plus rapidement.
Style de document
Ces styles ne s'appliquent que dans le document où ils sont déclarés.
Pour déclarer un style de document, on utilise la balise STYLE dans le head, le contenu de cette balise sera du langage CSS.
<style type="text/css"> /* Code CSS */ </style>
Style en ligne (ou style d'élément)
Les styles en lignes ne s'applique qu'a un seul élément.
Il surcharge grandement le code HTML inutilement et rendent la lecture difficile (le style est écrit sur une ligne).
Il ne respecte pas la charte consistant à dire "Structure HTML et Mise en forme CSS" car le CSS est appliqué via un attribut de balise.
<p style="/* code CSS */">Paragraphe</p>
Les styles en ligne sont généralement employés avec les scripts Javascripts (Dynamiquement donc).
Syntaxe
La syntaxe de CSS est très simple :
selecteur {
propriete1: valeur;
propriete2: valeur;
/* etc ... */
}
Par convention, le selecteur est écrit en minuscule.
Les espaces / tabulations dans le bloc CSS ne servent qu'a faciliter la lisibilité. l'exemple générique ci-dessus pourrait être rédigé de cette façon :
selecteur{propriete1:valeur;propriete2: valeur;/* etc... */}
Le point virgule indique la fin d'une régle, même si certains navigateurs sont tolérants, son absence rend la CSS non-valide (W3C)
Selecteur
Le sélecteur, c'est en quelques sorte la règle pour laquelle il faut appliquer le style qui sera spécifié entre les accolades. Parmis les différents sélecteurs possible il y a :
- BALISE : Simplement le nom de la balise
-
IDENTIFIANT : Un nom d'identifiant (définit dans le HTML avec l'attribut
id="identifiant") -
CLASSE : Un nom de classe (définit dans le HTML avec l'attribut
class="nom-de-la-classe")
Les sélecteurs permettent de modifier l'apparence et la présentation de la totalité du contenu HTML. Nous verrons également que les sélecteurs peuvent être cumulés, imbriqués, ordonnés pour conditionner l'application d'un style.
Propriété : valeur
Pour modifier l'aspect d'un élément, le CSS offre la possibilité de modifier une ou plusieurs propriétés, la ligne qui redéfinit une propriété est appelée une instruction et se termine par un point-virgule :
/* Modification de tous les paragraphes */
p {
color: red;
font-size: 32px;
background-color: green;
}
Dans cet exemple, le sélecteur c'est la balise P (les règles s'appliquent aux balises P et à leur contenu). 3 propriétés sont modifiés, la couleur (du texte) est en rouge, la taille du texte est fixée à 32 pixel et la couleur de fond est verte. C'est très beau :P
Un bon intégrateur web a généralement une connaissance encyclopédique des propriétés CSS qu'il maitrîse sur le bout des doigts.
De fait, une maitrîse de CSS repose à 99% sur la pratique.
Il est fortement recommandé de disposer d'un éditeur qui propose l'auto-complétion et la coloration du code CSS :P
http://www.jedit.org/ : Un editeur de texte très puissant pour MAC / PC / Linux
http://www.bluegriffon.org : Editeur spécialisé pour le développement Web (un projet affilié Mozilla)
http://www.eclipse.org/downloads/packages/eclipse-php-developers/heliossr1 : Eclipse pour les développeurs Web / PHP (une référence)
Valeurs possibles
Les valeurs possibles (pour une propriétés), on parle également de type de données
constantes
Premier cas le plus courant, la valeur possible pour une propriétés est une constante (un mot-clef). Pas d'autre solution que de les connaître.
p {
color: purple;
font-weight: bold;
font-style: italic;
text-align: justify;
text-decoration: line-through;
}
Dans cet exemple, purple, bold, italic, justify et line-through sont des mots clefs (ils apparaissent en couleur dans les éditeurs CSS).
couleurs
Il existe plusieurs façon de redéfinir une couleur :
- Avec les constantes de couleurs (comme dans l'exemple ci-dessus)… Hideux.
- Avec un code hexadécimal (le plus courant)
- Avec une fonction RGB (Les graphistes sont parfois plus à l'aise avec)
Hexadécimal
Une valeur hexadécimale est un nombre exprimé sur une base 16. Habituellement nous comptons sur une base 10 (de 0 à 9), les ordinateurs comptent sur une base 2 (de 0 à 1), les couleurs se calculent sur une base 16 (de 0 à F).
> 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
Une valeur hexadécimale (pour les couleurs) indique une suite de 3 chiffres hexadécimaux, une pour chaque couleur primaire : Rouge, Vert, Bleu (de la synthèse additive, et oui, l'écran, c'est de l'addition de spectre lumineux).
Pour faire un rouge pur par exemple, nous "ouvrons"le canal de rouge à fond (FF), et fermons le vert (00) et le rouge (00), ce qui donne :
/* paragraphe en rouge pur */
p {
color: #FF0000;
}
Il n'est pas évident de trouver le bonne couleur en tapant des valeurs hexadécimales directement, mais les éditeurs graphiques (Gimp, Photoshop, Flash, illustrator, etc.) disposent souvent d'un outils pipette qui échantillonne la couleur et propose différentes notations (CMJN, RGB et HEXA).
Les notations en hexadécimales sont précédés d'un caractère dièse #
RGB
Cette méthode permet de définir les intensités des 3 couleurs du spectre via la fonction rgb( valeurRouge, valeurVert, valeurBleu), chaque valeur est exprimée par un nombre situé entre 0 et 255 (notation que l'on retrouve également dans les éditeurs graphique):
/* paragraphe en rouge pur */
p {
color: rgb(255,0,0);
}
Taille
Les tailles sont des valeurs numériques suivient de l'unités (pixel, em, %, pt, etc.)
L'unité est "collé" après la valeur numérique
p {
font-size: 2em;
width: 400px;
background-color: #EEE;
}
Sauf si la valeur numérique est 0 (le Zéro c'est zéro, peu importe l'unité).
body {
margin: 0;
padding: 0;
}
Pour les feuilles de style déstinées à l'impression (media="print" dans la balise link), on utilisera des unités liées à l'impression (pt, pc).
http://www.alsacreations.com/tuto/lire/586-feuille-style-css-print-impression.html Un article qui détaille bien ce qu'il faut pour commencer à créer des feuilles de style pour l'impression
Les valeurs négatives
Par défaut, les valeurs numériques sont des valeurs positives, mais dans certains cas de figure, vous pouvez être ammené à utiliser des valeurs négatives.
/* paragraphe décalé sur la gauche */
p {
margin-left: -300px;
}
L'unités dépend de la propriétés, du media et des choix graphiques.
Pixel (px)
Unité lié à l'écran, la plus courante donc :P
/* paragraphe à 300 pixel de large */
p {
width: 300px;
font-size: 12px;
background-color: #EEEEEE;
}
L'unité pixel est souvent utilisé pour le layout (la mise en page des blocs)
Notations relatives : em et %
Très utilisées pour leurs souplesse, les notations relatives se base sur le conteneur parent, exemple :
/* Première lettre du paragraphe à 300% de la taille initiale du paragraphe */
p:first-letter {
font-size: 3em;
/* Evite l'interlignage disgracieux de la première ligne */
float: left;
}
D'ailleurs les intégrateurs on tendance à fixer une taille initiale au texte, puis d'exprimer les tailles de typos en em :
body {
font-size: 12px;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
p {
/* (soit 80% de la taille initiale) */
font-size: .8em;
}
http://www.yoyodesign.org/doc/w3c/css2/syndata.html#values : Documentation officiel sur les unités
http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html : Un article magnifique sur l'utilisation de l'unités EM pour la taille du texte (exaustif)
URL
Certaines propriétés prennent comme valeur des URL, pour les utiliser on utilise la fonction url("url")
L'URL est relative au fichier CSS !
body {
background-image: url("http://exemples.jacksay.com/textures/kitch-01.jpg");
}
L'habillage de site avec CSS repose quasi-intégralement sur la propriétés background-image et ces déclinaison.
Audio
Je n'aborde pas ce point très spécifique ici, mais les CSS permettent de gérer la restitution d'un contenu par un vocaliseur. Elle permettent de gérer la voix de lecture, le volume, les pauses, la fréquence, etc.
http://www.yoyodesign.org/doc/w3c/css2/aural.html : Documentation officielle pour les feuilles de style auditives
http://www.blog-and-blues.org/weblog/2005/02/28/404-medias-aural-speech-navigateur-vocal-lecteur-ecran : Article sur les contenus auditifs et les différents moyen de les tester
Ma feuille fait des cascade ?
CSS = Cascading Style Sheet
Dans les pluspart des cas, les styles d'un élément hérite de leur element parent :
body {
/* Nous fixons la couleur (du texte) en rouge */
color: #FF0000;
}
Dans une page composé de titre (H1) et de paragraphes (P) contenant à leur tour des textes mis en évidence (STRONG), la défnition de la couleur sur la body affectera EN CASCADE ces enfants (inculant P, H1 et STRONG).
Si nous ajoutons :
p {
color: #00FF00;
}
Les paragraphes (P) et ces enfants (STRONG) seront en vert.
Cette mécanique est au coeur du langage CSS est vous dispense d'écrire beaucoup de code (et donc évite de vous répéter).
voici l'ordre d'importance :
- * : sélecteur généraliste
- BALISE : sélecteur de balise
- BALISE BALISE : sélecteur d'imbrication de balise
- .class : les classes CSS
- BALISE.class : les classes spécifiques à une balise
- BALISE BALISE.class : Imbrication de balise avec des classes
- #ID : Les identifiants
- BALISE#ID : Balise identifiée
- BALISE BALISE#ID
- .class #ID
- .class BALISE#ID
- BALISE.class BALISE#ID
- style en ligne
http://openweb.eu.org/articles/cascade_css : Un article qui explique de façon exhaustive la mécanique de cascade en CSS