Traduction
Tutoriel CSS3 - 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.
Pour appliquer de nombreuses propriétés à un même élément il faut définir des classes.
.titre {text-align : center ; text-shadow : 2px 2px 2px grey ; color : navy ; font-size : 1.6em;
border : 2px solid black; line-height : 1.8em; height : auto ; }
Cette classe peut s'appliquer à n'importe quel élément HTML.
Notez le point
j'ai appliqué la même classe à deux éléments différents.
Texte mis mis en forme via la classe générique "titre"
p.remarque {color : olive ; font-size : 1.1em; }
Tentative de mise en forme avec la classe 'remarque'
La classe "remarque" ne s'applique pas au DIV !
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" donc des "petits enfants" de BODY.
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 et 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 éléments 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 :
Dans l'exemple tout le texte de la page sera en TNR (Times New Roman) ou à défaut une autre police avec empattements ('serif' en anglais).
Par contre le texte inclus dans le conteneur PRE sera affiché en Arial (ou à défaut une autre police sans empattements).
Il peut y avoir une ambiguïté entre les différentes règles de style s'appliquant à un même élément. Par exemple plusieurs règles CSS définissent une couleur de texte pour l'élément P.
Lorsqu'un élément HTML est concerné par plusieurs règles de style pour la même propriété,
c'est la règle la plus proche qui s'applique.
Donc la règle de style dans l'instruction HTML est prioritaire sur celle définie dans le bloc STYLE
qui est elle-même prioritaire sur celle définie dans la feuille de style externe
qui est elle-même prioritaire sur celle prévue par le navigateur.
La couleur par défaut du texte d'un élément P est noire (règle de style du navigateur).
Extrait de la feuille de style externe du site : p {color : navy; }
Extraits de la feuille de style interne de la page :
p {color : olive; }
p.important {color : red;};
Extrait du code HTML :
< p style ="color : purple;"> Je porte une soutane violette ! <p >
Le texte du paragraphe ci-dessus sera t-il en noir ou bleu marine ou olive ou violet ?
La règle de style la plus proche est celle qui est dans l'instruction (via l'attribut style) donc le texte
sera colorié en violet !
Tous les autres paragraphes de la page le texte sera colorié en "olive" sauf si la classe 'important' est affectée à P.
Les règles contenues dans la feuille de style externe se propagent aux pages liées à ce fichier (instruction LINK).
Les règles contenues dans la feuille de style interne profitent à tous les éléments du document HTML.
Extrait de la feuille de style externe d'un site :
...
h1{font-size : 1.4em ; color : white ; background : skyblue ;
line-height : 1.6em; margin-top : 10px;}
h2{font-size : 1.3em ; color : white ; background : turquoise ;
line-height : 1.4em; margin-top : 10px;}
...
Or dans un document HTML de ce site nous voulons une mise en forme plus simple pour ces 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 pour ces deux éléments (font-size, margin-top, line-height) s'appliqueront en cascade aux
éléments H1 & H2 de la page.
Quid de règles de style contradictoires mais dans la même source, par exemple des règles toutes situées dans la feuille de style interne de la page ?
Illustrons par un exemple.
p {color : navy ; ... }
.remarque {color : olive ; ... }
#premier {color : red; ... }
Le premier et deuxième paragraphes sont coloriés en bleu marine.
Le troisième paragraphe est en "olive".
Le quatrième paragraphe est en rouge.
Le style défini par une classe est prioritaire par rapport à celui défini par le sélecteur.
Le style de l'ID est prioritaire sur celui de la classe.
Attention ce que je viens de dire est remis en cause si vous associez à une propriété le mot clé !important
Notez bien la règle de style : p{background-color: red !important; ...
Les trois paragraphes seront remplis de rouge !
La propriété background-color: red !important est exceptionnellement prioritaire sur le style de l'ID et le style de la classe.
Ce mot clé doit être utilisé de façon exceptionnelle ; pour un dépannage.
Exemple : vous avez souvent modifié une feuille de style et vous pensez que la propriété width applicable au sélecteur H1 peut être présente plusieurs fois et avec des valeurs différentes. Mais vous renoncez à localiser toutes ces règles de style tant la lecture du fichier .css est fastidieuse.
...
h1{width : 80% ; ...
...
section h1 {width : 90% ; ...
nav h1 {width : 70%; ...
...
Il peut y avoir d'autres largeurs définis pour le sélecteur H1.
Si vous souhaitez que les éléments H1 fassent tous 80% de large, il faut modifier la première règle de style : rajouter "!important".
Il s'agit d'une solution de dépannage.
Il est déconseillé d'utiliser des règles de style en ligne car la mise à jour du code devient très fastidieuse.
Pour gérer les exeptions utilisez plutôt les classes, les ID.
Il faut privilégier les fichiers CSS (feuille de style externe) par rapport aux feuilles de style internes.
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, ...
L'élément 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'une boite via le CSS.
Pour modifier la valeur de l'attribut SRC de l'élément IMG il faudrait recourir au JS ...
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.
#boite {width : 300px ; height : 400px; margin :auto;
background-image :url(../images/burkini.jpg); background-size: cover;}
#boite:hover {background-image :url(../images/bikini2.jpg);
background-size: cover; border : 10px solid gold; }
#boite:active {background-image :url(../images/jolie_fille.jpg);background-size: cover;
box-shadow : 10px 10px 10px gray; border : none; border-radius : 50px; }
Quant au HTML :
<div id ="boite" > <div>
Sur survol ou sur clic la valeur de la propriété background-image de l'objet identifié "boite" change !
Si j'avais utilisé la balise IMG pour insérer l'image initiale, j'aurais dû réaliser l'animation en JS.
La propriété background-size permet d'adapter l'image à la boite.
Voir dans le sommaire de ce tuto : raccourci 'background' enrichi