Traduction
Tutoriel CSS - sommaire
Tutoriel CSS3 - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Le CSS qui régit la mise en forme peut être écrit sous forme de règles de style dans la partie HEAD de la page et plus précisément à
l'intérieur de la balise double SCRIPT. On parle alors de feuille de style interne.
Je rappelle qu'une feuille de style est un groupe de règles de style.
Imaginez que votre site comprenne une centaine de pages mais et que chaque page contient une feuille de style.
Imaginez maintenant que votre supérieur vous demande de modifier la largeur de toutes les pages afin qu'elles s'affichent proprement même sur de petits écrans.
Vous allez devoir modifier 100 pages !!! Un travail fastidieux qu'il aurait été facile d'éviter ...
Les règles de style applicables à toutes les pages du site doivent être écrites dans une feuille de style externe c'est à dire dans un fichier d'extension .css et qui ne contient que du code CSS.
Pour que la feuille de style externe soit prise en compte au niveau de chaque page il faudra écrire dans la partie HEAD de chaque page un
lien vers le fichier .css
Imaginons que la feuille de style externe ait pour nom "mon_style.css" et que ce fichier soit dans le même dossier que la page web.
Il faudra écrire dans chaque page web (partie HEAD) : <link rel = stylesheet href ="mon_style.css" />
Exemple : dans tous les paragraphes le texte doit être justifié.
Donc dans la feuille de style il y a la règle de style suivante : p {text-align : justify; }
Mais exceptionnellement et pour une poignée de paragraphes on souhaite un texte centré.
Il suffit d'écrire du CSS dans ces balises P via l'attribut style pour gérer ces exceptions.
Ainsi le code pour l'élément P concerné devient :
Notez l'emploi de l'attribut STYLE ayant pour valeur une ou plusieurs règles de style.
Lorsque le style est écrit dans la balise on dit qu'elle est "en ligne". Attention dans ce cas il n'y a pas d'accolades.
Cette méthode est à éviter car elle revient à mélanger le code CSS et HTML dans une même instruction. De plus la maintenance du code sera fastidieuse.
Pour gérer les exceptions il est préférable d'utiliser les classes.
Ainsi pour reprendre le thème il suffirait de créer une règle dans la feuille de style : p.special {text-align : center; }
Et pour appliquer cette classe à un élement P il suffit d'écrire : < p class ="special" >
Une feuille de style (interne ou externe) est un ensemble de règles de style.
Le sélecteur indique les parties du document concernées par la règle.
Chaque déclaration est de type : propriété : valeur(s) ;
N'oubliez pas le caractère de ponctuation ; pour séparer chaque déclaration.
body {font-size : 12px; width : 900px ; margin : 10px auto 10px auto ; }
Cette mise en forme s'applique à la balise BODY c'est à dire la page.
Les caractères du texte auront une taille de 12 pixels ; la page aura une largeur de 900 pixels (l'écran d'un ordinateur portable fait souvent 1400 pixels).
Attention jamais d'espace entre le nombre (de pixels) et la chaine "px" !
Grâce à la troisième déclaration la page sera centrée horizontalement dans l'écran.
margin est un "raccourci" qui remplace quatre propriétés : margin-top, margin-right, margin-bottom et margin-left.
Donc il faut associer à cette "méga-propriété" quatre valeurs OU une valeur si les quatre marges sont identiques OU deux valeurs si les marges verticales
et horizontales sont identiques. Donc ici j'aurais pu écrire plus simplement : margin : 10px auto
La valeur auto pour les marges gauche et droite indique que c'est au navigateur de les calculer pour que la page soit centrée horizontalement.
Si la largeur de l'écran est 1366 il va opérer le calcul : 1366-900 = 466 donc marge gauche = marge droite = 466/2 = 233 !
h1, h2 {font-size : 130% ;}
Cette mise en forme s'applique aux éléments H1 & H2.
L'unite de mesure employée est relative. La taille du texte contenu dans H1 ou H2 sera égale à 120% de celle du parent (BODY) donc 12 pixels.
Autre solution : h1, h2 {font-size : 1.3em ;}
Une règle de style commence obligatoirement par un sélecteur. Le sélecteur précise les éléments de la page ciblés par la mise en forme (décrite à la suite du sélecteur).
h1 : cible toutes les balises H1 de la page.
*: cible toutes les balises ; * est le sélecteur universel !
h1, h2, h3 : cible les éléments H1 et h2 et H3.
div p : cible les balises P comprises dans le conteneur DIV. On dit que div p est un sélecteur de descendants.
div > p : ne pas confondre avec la règle précédente ; ne cible que les balises P "enfants" (descendants directs) de P. On dit que div > p est un sélecteur d'enfants.
.info: cible n'importe quelle balise ayant l'attribut class ="info"
p.remarque: cible les balises P ayant l'attribut class avec la valeur "remarque".
Dans les deux cas on parle de sélecteur de classe.
#entete, #pied: cible deux éléments de la page ! l'élément ayant l'attribut id ="entete" et celui ayant l'attribut id ="pied". On parle de sélecteur d'identifiant
img + p : cible les éléments P qui suivent directement une balise IMG. On dit que img + p est un sélecteur de voisin direct.
img [alt] {... } : cible toutes les images ayant l'attribut alt et quelque soit la valeur de cet attribut. On dit que img [alt] est un sélecteur d'attribut simple.
img [alt="mollusques"] : cible toutes les images ayant l'attribut alt avec la valeur "mollusques". On dit que img [alt="mollusques"] est un sélecteur d'attribut par valeur exacte.
Grâce aux pseudo-classes la mise en forme d'un élément peut changer à l'occasion d'un évènement concernant cet élément : survol, clic.
Les pseudo-classes sont apparues avec la version 2 et elles sont très pratiques car elles évitent de recourir à la programmation javaScript pour produire des effets graphiques.
a:hover{color : red; } : Utilisation de la pseudo-classe :hover qui veut dire sur survol. Donc un lien hypertexte (balise A) survolé par la souris est écrit en rouge.
img {width : 100px ;}
img:active {width : 400px; } : Deux règles de style relatives aux images de la page ; elles sont affichées avec une largeur de 100 pixels normalement mais si clic sur l'une d'entre-elles alors la taille d'affichage de cette dernière est quadruplée !
Donc ici j'ai associé à la balise IMG la pseudo-classe :active (sur clic) pour construire le sélecteur.
Les pseudo-éléments permettent de cibler certaines fractions de texte pour une mise en forme spécifique.
p:first-letter {font-size : 200% ; Float : left ; } : La première lettre de chaque paragraphe va apparaitre sous forme d'une lettrine.
p:first-line {font-weight : bold ; } : la première ligne de chaque paragraphe sera en gras.
h1:before {content : "chapitre : " ;} : Le texte de chaque balise H1 sera précédé de "chapitre :"
.ordre:after{content : "!" ;} : le texte de chaque élément affecté de la classe "ordre" sera suivi d'un point d'exclamation.
Extraits de la partie BODY d'une page
Tous les éléments décrivant le contenu d'une page sont imbriqués dans BODY. On dit que tous ces éléments sont descendants de BODY.
Dans l'exemple ci-dessus les éléments DIV identifiés "entete", "menu" et "corps" ains que la balise H1 sont descendants directs (ou "enfants") de BODY.
Par contre les balises H2, les DIV identifiés "images", "css", "htlm" et "divers" sont incorporées dans le bloc "corps".
Ce sont donc des "enfants" de "corps" mais des descendants indirects de BODY (des "petits enfants").
Certaines propriétés CSS peuvent être héritées c'est à dire que définies au niveau d'un élément parent, elles se propagent aux descendants.
Connaissant le principe de l'héritage les règles de style peuvent être très succinctes !
Ne pas confondre héritage avec l'application en cascade ...
Extrait d'une feuille de style :
La deuxième règle de style est totalement inutile !
En effet les balises citées dans le sélecteur de la deuxième règle (h1,h2, ... ) sont forcément descendantes de BODY puisque BODY est l'élément racine.
Donc ces balises héritent de BODY puisque les deux propriétés CSS citées (font-family & font-size) sont héritables.
Attention certaines propriétés (peu nombreuses) ne peuvent être héritées par les descendants.
C'est le cas des propriétés de bordurage (border-width, border-style, border-color) ou le raccourci border mais aussi des
propriétés de dimension width & height et c'est heureux !
La propagation d'une propriété aux éléments descendants n'est pas forcément souhaitable.
Tout le texte de la page doit être dans une police avec serif (ou empattements) sauf les extraits de code (contenus dans la balise PRE).
Feuille de style correspondante :
La propriété CSS font-family a pour valeur : une liste de polices ou de famille de polices ou un mélange des deux.
Il existe 3 familles de polices : serif (avec empattements), sans-serif (sans empattements),cursive (ressemble à l'écriture manuscrite).
Dans l'exemple tout le texte de la page sera en TNR (Times New Roman) ou à défaut une autre police avec empattements.
Par contre le texte inclus dans le conteneur PRE sera affiché en Arial (ou à défaut une autre police sans empattements).
Je rappelle que CSS signifie "Cascading Style Sheets".
Il peut y avoir une ambiguïté entre les différentes règles de style s'appliquant à un même type de balise. Par exemple plusieurs règles de style définissent une couleur de texte pour la balise P.
Couleur par défaut (valeur initiale) pour la balise P : noire
Extrait de la feuille de style externe : p {color : navy; }
Extrait de la feuille de style interne (dans la page) : p {color : olive; }
Une instruction HTML dans BODY : < p style ="color : purple;"> Je porte une soutane violette ! <p >
Question : le texte "je porte une soutane violette !" sera t-il en noir ou bleu marine ou olive ou violet ?
Retenez : la règle en ligne est prioritaire sur la règle interne qui elle-même est prioritaire sur la règle externe qui est prioritaire
sur la valeur initiale. C'est ce qu'on appelle "la cascade".
Donc dans l'exemple le texte de la balise P sera violet.
Imaginons que dans un page il y ait un lien vers une feuille de style externe. Dans ce fichier CSS le style appliqué aux éléments H1 & H2 est le suivant :
Notez la couleur de fond et la couleur de texte de H1 & H2. Or dans une page je veux une mise en forme plus simple pour les titres : fond transparent et texte en noir.
Il suffit d'écrire, mais dans la feuille de style interne cette fois :
h1,h2 {background : none; color : black; }
Comme la feuille de style interne est prioritaire sur la feuille externe les boites H1 & H2 seront transparentes avec un texte noir.
Par contre les autres propriétés définies dans la feuille de style externe (font-size, margin-top, line-height) s'appliqueront en cascade aux
éléments H1 & H2.
Toutes les propriétés CSS peuvent prendre la valeur "none".
Il est déconseillé d'utiliser des règles de style en ligne car la mise à jour du code devient très fastidieuse.
Il faut privilégier les fichiers CSS par rapport aux feuilles de style internes.
Il est préférable, pour gérer les exceptions, d'utiliser des classes. La maintenance CSS sera fortement facilitée.
Dans les frameworks CSS l'affectation d'une classe à chaque balise est quasi systématique.
Je vous communique le code d'une page avec feuille de style interne et lien vers une feuille de style externe.
La page doit être centrée horizontalement avec une bordure mais un fond transparent.
Les boites titres sont centrées horizontalement et ombrées.
Notez le lien vers une feuille de style externe.
Notez que dans la feuille de style interne, certaines propriétés ont pour valeur "none".
Notez aussi les "conflits" entre les feuilles de style externe et interne condernant les mêmes balises (body, H1,H2,P)
Remplissez le questionnaire ci-dessous.
Voir la fin du chapitre !
HTML & CSS sont deux langages complémentaires ; pour maitriser CSS, il faut connaitre le HTML.
Si vous ne connaissez pas les balises HTML, vous ne pouvez pas imaginer les sélecteurs CSS !
Pour bien écrire le CSS il faut bien comprendre la distinction entre balises "inline" et balises "block".
En effet certaines propriétés CSS sont spécifiques aux éléments "block".
Pour prendre un seul exemple : le centrage horizontal d'un élément dans son conteneur n'est possible que si l'élément en question est
de type "block" ; voir plus loin.
Dans le cadre du positionnement normal dit "dans le flux" les éléments "inline" se positionnent côte à côte
tandis que les éléments "block" (ou boites) se positionnent les uns en dessous des autres.
En d'autres termes il n'y a pas de saut de ligne pour les éléments en ligne alors qu'il y en a toujours par défaut pour les éléments "block".
Les boites peuvent inclure des éléments "inline" et d'autres boites. Mais l'inverse n'est pas possible ; les éléments en ligne ne peuvent
contenir de boites !
Les balises de type "inline" sont : a, span, b, i, em, strong, del, td, th, img, ...
Les éléments de type "block" sont : h1 à h6, div, p, ol, ul, li, table, tr, ...
La balise IMG est nativement de type "inline" a qui on peut attribuer une largeur ou une hauteur (ou les deux).
Mais souvent on veut qu'une image s'affiche telle une boite (avec centrage horizontal dans son parent, par exemple).
Le centrage horizontal (margin : auto) d'un élément dans son parent ne peut s'appliquer qu'à un élément "block".
Il faut donc transformer alors les éléments IMG en "block" : display : block.
Ici une image avec la classe "grande" sera une boite centrée horizontalement dans son parent avec une largeur égale à 50% de celle du parent.
Quant à une image avec la classe "miniature", elle sera un élément "inline" positionné à gauche dans son parent avec une largeur de 15%
de celle de son conteneur.
Dans le code HTML on trouvera alors deux syntaxes différentes :
Quoique beaucoup plus rare on peut transformer un élément nativement bloc, tel la balise DIV en élément en ligne.
Exemple : div.pub {display : inline ; } . Donc pas de saut de ligne avant et après un DIV class ="pub"
Il faut mieux utiliser la balise SPAN qui est nativement de type "inline".
Pour afficher une image dans une page web, on pense à l'élément IMG mais sachez qu'il y a une autre solution.
On peut en effet associer à une boite la propriété background-image
Sachez que vous ne pouvez pas modifier via le CSS la valeur de l'attribut "src" de l'élément IMG.
Mais vous pouvez modifier la valeur de la propriété "background-image" d'un DIV.
Modification interactive d'image via CSS
Survolez puis cliquez sur l'image ci-dessous et observez les changements opérés.
Sur survol : changement d'image et ajout d'un bordurage.
Sur clic : changement d'image et ajout d'un ombrage et de coins arrondis.
Tout est dans le CSS.
Sur survol ou sur clic la valeur de la propriété background-image de l'élément DIV change !
Si j'avais utilisé la balise IMG pour insérer l'image initiale, j'aurais dû réaliser l'animation en JavaScript (pour modifier la valeur de l'attribut SRC de cet élément).
La propriété background-size permet d'adapter l'image à la boite DIV.
Voir dans le sommaire de ce tuto : raccourci 'background' enrichi
Le rendu dans le navigateur :
La page n'a pas de bordure mais un fond.
Les titres n'ont pas de couleur de fond mais une bordure.
Un titre affecté de la classe 'special' : fond gris ; texte en blanc ; pas de bordure.
Couleur de texte pour une balise P : "navy".
Donc pour la même propriété la règle interne prioritaire sur la règle externe.
Le texte du paragraphe affecté de la classe 'important' : rouge avec graisse.
Donc pour une même propriété la classe est prioritaire sur la règle générale.
Attention ne croyez pas que les enfants de BODY héritent de "background : pink" ; leur fond est rose car la valeur initiale
de la propriété background_color est "none / transparent".
Par contre ils héritent des propriétés color, font-size.