Définir un style c'est associer un sélecteur de style à des directives (???)
Un sélecteur de style est un nom de :
- balise (/ex :
div): le style s'applique alors toutes les fois où cette balise est utilisée,
- identifiant d'une balise (id="nom_Identifiant"), le style s'appliquera alors uniquement à cet balise identifiée
(/ex : pour la balise identifiée : <header id="titre"> on aura le sélecteur #titre {..} ),
- classe/nom de style réutilisable plusieurs fois dans le code html
(/ex. : .remarque {...} est appliqué à des div, des p, des articles, etc. ...).
La syntaxe est simple : on écrit le sélecteur puis la liste des directives css entre {}
Voir l'exemple ci-dessous : selecteur successivement : balise, identifiant, classe/nom de style.
html {background:#aaa url("images/fondPage.jpg") fixed no-repeat;
font: tahoma, arial, 8px;}
#titrePpal {background:#77ff9a; text-align:center }
.contenu {background:rgba(255, 255, 255, 0.7); width:95%; margin:auto; margin-top:3px;}
et on les utilise comme suit :
Le résultat :
Menu de navigation
Contennu de la page
- <html>
- <header id="titrePpal">The Titre principal</header>
- <nav class="contenu">Menu de navigation</nav>
- <div class="contenu">Contennu de la page</div>
- </html>
Les directives css "pour commencer"
| balise | Description | Observations | exemple |
|---|
| background | Fond de page, d'espace de texte | outil multiple et très puissant pour assurer la déco, à approfondir | {background: orange;} : test mis en forme |
| color | couleur du texte | on peut utiliser un nom de couleur ou un code | {color: #ff8c00;} : test mis en forme |
| margin | marge extérieure | très utilisé | |
| border | bordure de l'espace de texte | épaisseur de chaque bord, type de ligne, couleur | {border: 1px solid black;} : test |
| font-weight | "poids" de la police | Gras ou non | {font-weight: bolder;} : test |
| font-family | Famille de police | Liste de polices, la première, trouvée sur le navigateur, est prise | {font:14px Forte,arial;} : Test |
Cette liste est très petite et très imcomplète, voir une liste plus complète dans "Les directives CSS" du menu.
Avec du style on peut faire de super présentation de contenu, naviguer sur le web pour s'enrendre compte
Les styles sont placés dans la feuille HTML de trois façons possibles, plus ou moins souples.
- Styles internes, embarqués dans les balises :
<p style="background:#ff8c00">...</style>
- avantage : visible dans le code (mouais, c'est bon au développement)
- inconvénient : (gros) changer le style=changer pour chaque page ... un travail de romain
- Style embarqué, déclaré avec une balise
<style>...</style> :
- avantage : visible dans le code (mouais, c'est bon au développement)
- inconvénient : (très gros) changer le style=changer pour chaque balise ... un travail de fou(rmi)
- Style externalisé/importé : on utilise une balise link
<link rel="stylesheet" href="monstyle.css" type="text/css">
- avantage : tous! : le style est séparé du code, il est utilisable dans toutes les pages et dclaré qu'une seule fois on peut même faire plusieurs fichiers spécialisés par espace et design
- inconvénient : aucun ou presque : c'est moins facile de jongler avec plusieurs fichiers simultanément
Yo Man! La dernière solution est bien sûr la meilleure, mais pour les cours, j'utilise aussi les autres (hé hé, faites c'que j'dis, pas c'que j'fais!).
Les styles sont interprétés en cascade. Càd que le dernier style évoqué est celui qui est appliqué.
On peut aussi utiliser plusieurs styles dans le paramètre class de la balise, afin de mieux gérer l'aspect des pages et de diminuer la taille du fichier des styles (et faciliter sa compréhension)
De la même façon, on peut imposer une succession de styles pour l'application de la définition. Ainsi :
Style qui n'est appliqué qu'aux ancres qui se trouvent dans une liste.
li a {...}
Style qui n'est appliqué qu'aux ancres qui se trouvent dans la balise identifiée par le nom "titrePpal".
#titrePpal a {...}
Style appliqué aux i inclus dans b (l'inverse n'est pas vrai) même si une autre balise est entre b et i.
b i {...}
début <b>texte avant <i>style b->i appliqué</i> <u><i>style b->i appliqué</i></u> texte après</b> fin ;
<i><b>style non appliqué : i->b</b></i>
Style appliqué aux i inclus immédiatement dans b mais pas si une autre balise est entre b et i.
<style> b>i {...}</style>
<b><i>b->i = style appliqué</i></b> et
<b><u><i>b->u->i = style non appliqué</i></u></b>
Pour d'autres exemples, faire des tests, aller sur internet pour voir des exemples pratiques, afficher le code de cette page (en particulier le menu), faites vous votre expérience.