CSS, les bases
Les CSS (Cascading Style Sheets)
Les CSS ou feuilles de style en cascade sont un ensemble de règles qui permettent d'attribuer à toutes les balises un certain nombre de propriétés de mise en page, aussi bien pour les couleurs, les caractères qui le positionnement et les images. Le premier avantage des CSS par rapport aux attributs de style intégrés aux balises est de bien séparer le contenu du contenant. En effet le code HTML structure les informations et la CSS décrit son aspect formel. De plus, si on veut modifier des styles sur un site, on ne modifie que la feuille de style et non pas toutes les pages, cela fait gagner du temps.
Le mot cascade dans feuille de style de cascade exprime bien le principe des CSS : un parent définit le style de ses enfants. Les modifications d'un parent ont une influence sur le style des enfants.
Mais les css sont conçues pour que le concepteur du site gère au mieux se style, sans contraintes. Tout d'abord il existe des style apr défaut, selon les balises, H1, H2, H3, CITE, LI, A,...
CSS dans l'en-tête
La feuille se style, lorsqu'elle est courte, et dans le cas d'un mini site peut se rédiger dans l'en-tête du html, donc entre les deux balises <head></head>
La syntaxe employée est la suivante : sélecteur{propriété:valeur;}
On peut placer un commentaire dans sa feuille css, de cette façon : /* mon commentaire*/
CSS dans un fichier
Les feuilles de style se rédigent le plus souvent dans un document séparé dont l'extension est : .css. Ce fichier est placé soit à la racine du site, soit dans un dossier script. Il se rédige avec un éditeur de texte ou avec l'aide d'un logiciel comme Dreamweaver (payant), CSS Editor (payant), Eclipse (payant), free CSS Toolbox(gratuit).
Dans le html, entre les balises <head></head>, une ligne de code est inséré pour lier le document html aux css:
<link href="mesCSS.css" rel="stylesheet" type="text/css" />
Class et id
Pour agir sur un élément précis on peut employer une class. Par exemple si on veut que dans un tableau certaines cellules soient bleues et les autres vertes, on assigne une class à certaines td. Remoting du classa est préconisé pour une valeur exceptionnelle d'une balise et répétée dans la page.
Pour un élément unique dans la page comportant une valeur différente, par exemple un seul paragraphe différent, on emploie alors l'id.
Les paragraphes
La police de caractère, font
On peut regrouper dans la propriété font ses différentes sous-propriétés :
- font-family : familles de caractères : Verdana, Geneva, sans-serif/"Times New Roman", Times, serif/"Palatino Linotype", "Book Antiqua", Palatino, serif...on écrit entre guillemets la police précise, puis ensuite des polices courantes de remplacement
- font-size : taille en pixels, en pourcentage, en em /small,x-small, xx-smal,medium, large, larger, x-large, xx-large.
- font-stretch: règle l'étirement de la police :normal, condensed, expanded...
- font-style: précise si la police est en italique, oblique ou normal.
- font-variant: avec cette propriété on peut obtenir des petites capitales: small-caps
- font-weight: règle l'épaisseur du trait, de 100 à 900 ou bold.
La mise en page des paragraphes
- text-align: aligne le paragraphe, à droite : right, à gauche : left, centré :center, justifié : justify ,ou le même alignement que son parent : inherit.
- text-indent : règle la tabulation de la première ligne d'un paragraphe : en pixel ou en em
- text-transform : précise la casse : première lettre en majuscule : capitalize, texte en majuscules : uppercase, texte en minuscules : lowercase, normal :none, inherit pour héritage de son parent.
- line-height :règle l'interlignage : en pixels, em ou pourcentage, inherit ou normal.
- white-space :gère les espace et les passage la ligne : nowrap :pas de retour à la ligne (sauf internet explorer 6), pre : texte tel qu'il a été écrit (sauf internet explorer 6).
- word-spacing :règle l'espace entre les mots : en pixels, em ou pourcentage, inherit ou normal.
- letter-spacing :règle l'espace entre les lettres et les mots: en pixels, em ou pourcentage, inherit ou normal.
- text-decoration: règle les soulignements de texte : underline :soulignement, overline : surlignement, line-through : texte barré, blink : clignotement (sauf IE), none : sans rien/
La décoration
Les couleurs
Deux propriétés permettent d'ajouter des couleurs à votre site :
color
La propriété color donne la couleur au texte. Il se rédige de cette manière, pour un titre coloré par exemple : h1 { color:#0033FF;}
border
La propriété border permet d'ajouter une bordure, on peut préciser son épaisseur et son style.
Elle se rédige de cette façon : élément {border:couleur style épaisseur;}. Les différents styles sont les suivants:
- solid : trait continu
- dotted : trait pointillé
- dashed : petits tirets
- double : trait double et plein
- groove : trait en relief
- ridge : effet 3D
- inset: rentrante
- outset : sortante
- none : pas de bordure ou transparente
- hidden : pas de bordure ou transparente pour les tableaux
L'épaisseur peut être thin : fine, medium : moyenne, thick : large ou de l'épaisseur en pixel que l'on souhaite.
La bordure peut s'appliquer au contour général mais également à un seul côté, deux ou trois, selon votre convenant.
On agit alors sur la border-left (bordure gauche), border-top (bordure haute), border-right (bordure droite, border-bottom (bordure inférieure.
Nous avions vu une propriété de bordure employée dans les tableaux : border-collapse:collapse; à employer à la place du cellspacing=0 qui a l'incovénient de s'insérer dans le html.
background
- background-color : donne une couleur au fond
- background-image : donne une image de fond, elle se rédige de cette façon :
élément {background-image:url(images/monimage.jpg);} - background-repeat : précise le mode de répétition de l'image : repeat, repeat-x, repeat-y, no-repeat;
- background-attachment : effet de filigrane : scroll ou fixed
- background-position : si vous imposez avec background-repeat que l'image ne soit affichée qu'une fois, vous pouvez fixer la position d'arrière-plan exacte où le graphique doit être placé dans la page : vous précisez les coordonnées du point supérieur gauche.
- background : vous pouvez regrouper en une seule mention vos propriétés, par exemple :
élément {background: url(images/monimage.jpg) no-repeat #ccff42;}
La transparence
Pour rendre un élément, un bloc, un fond transparent, on fait appel à plusieurs propriétés. En effet, afin qui l'affichage se passe bien dans Internet Explorer, dans mozilla et Firefox, voici comment procéder pour obtenir une transparence de 50%:
- Pour Mozilla (<= 1.6) et une partie des navigateurs Gecko : -moz-opacity:0.5;
- Pour mozilla firefox et les navigateurs le supportant : opacity: 0.5; qui est la norme CSS 3.
- Pour l'antiquité IE : filter:alpha(opacity=50);
Ce qui donne :
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);
Les listes à puce
Il existe des propriétés qui permettent de régler les listes à puce. On peut également regrouper les différentes propriétés sous une seule : list-style.
list-style-type
Il précise le type de puce:
- circle : pour ul contour de cercle
- disc : pour ul cercle plein
- square : pour ul puce rectangulaire
- none : pas de puce
- decimal : pour listes ol: numérotation 1.,2.,3.,4. etc...
- decimal-leading-zero : pour listes ol: numérotation 01.,02.,03.,04. etc...
- lower-roman : pour listes ol: numérotation i.,ii.,iii.,iv. etc...
- upper-roman : pour listes ol: numérotation I.,II.,III.,IV. etc...
- lower-greek : pour listes ol: numérotation avec l'alphabet grec: α., β., γ., δ. etc...
- hebrew : pour listes ol: numérotation avec l'alphabet hébreu
- circle :pour listes ol: numérotation avec l'alphabet grec: α., β., γ., δ. etc...
- lower-alpha : pour listes ol: numérotation a.,b.,c.,d. etc...
- upper-alpha : pour listes ol: numérotation A.,B.,C.,D. etc...
- inside : puces et numérotation dans le corps de la liste.
- outside : retrait des puces à gauche et numérotation, par défaut
- a:link : Mise en page du lien par défault
- a:visited: lien visité
- a:hover : lien survolé
- a:active : lien cliqué
list-style-position
Précise le retrait des puces.
list-style-image
Précise le retrait des puces. Cela s'écrit de cette manière : list-style-image:url(monimage.jpg);
Les liens
Des css permettent de régler les hyperliens, de leur donner une couleur, d'attribuer ou non un soulignement et même un fond de couleur.
Les tableaux
Les tableaux, si on ne place pas de feuilles de style, sont transparents.
On place en premier une bordure autour du tableau et on précise la place qu'il occupera en largeur (en pourcentage):
table { border: medium solid #000000; width: 50%; }
Ensuite, on indique les bordures des cellules : td, th { border: thin solid #6495ed; width: 50%; }
Voici ce qui donnera ce tableau :
Si on désire que les bordures de tour de tableau et de cellules soient confondues, on rajoutera border-collapse: collapse dans les styles de table. L'aspect du tableau pourra alors être le suivant :
On peut régler ensuite la police de caractère, son alignement dans la cellule avec text-align et l'espace dans la cellule avec padding.
Centrage d'un tableau dans une page
Si la taille du tableau est inférieure à 100% de la fenêtre d'affichage, il est souvent souhaité qu'il soit centré dans la page. Avec MSIE, Netscape 6 et +, ou Mozilla, Firefox ou Opera 5 et +, l'attribut margin: auto, à inclure dans les styles CSS de table, centre automatiquement le bloc.
Pour les autres, l'astuce consiste alors d'encadrer le tableau par des balises <div style="text-align:center"></div>.
La mise en page
Les dimensions
width
Cette propriété règle la largeur d'un élément, en pixel, em ou pourcentage.
height
Cette propriété règle la hauteur d'un élément, en pixel, em ou pourcentage.
margin
Cette propriété règle la marge autour d'un élément, en pixel, em ou pourcentage. On peut régler la marge de manière identique, des quatre côtés, ou régler uniquement la margin-top, margin-right, margin-bottom ou margin-left. Lorsque l'on règle la margin on indique les dimensions en partant de la margin top et dans les sens des aiguilles d'une montre, ensuite, la margin right, la margin-bottom, puis la margin-left.
padding
Cette propriété règle la marge à l'intérieur d'un élément, en pixel, em ou pourcentage. On peut régler la marge de manière identique, des quatre côtés, ou régler uniquement le padding-top, padding-right, padding-bottom ou padding-left, tout comme on le fait pour la margin.
Les balises <span></span>
Les balises <span> et </span> sont employées pour appliquer un style à un morceau de paragraphe. Par exemple : mon texte modifié sera rédigé ainsi : span.blink {text-decoration:blink; font-style:normal; color:#000;}