Cours de HTML

CSS, 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.

Exemple

CSS : div>div {font-size:85%;}
HTML :
<div>
Ce paragraphe a la taille par défaut
<div>
Le texte est plus petit
<div>
Encore plus petit
<div>
Encore plus petit
<div>
</div></div></div></div></div>

résultat

Ce paragraphe a la taille par défaut

Le texte est plus petit

Encore plus petit

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>

CSS dans l'en-tête <head>
<style>
les css
</style>
</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...

list-style-position

Précise le retrait des puces.

inside : puces et numérotation dans le corps de la liste.
outside : retrait des puces à gauche et numérotation, par défaut

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.

a:link : Mise en page du lien par défault
a:visited: lien visité
a:hover : lien survolé
a:active : lien cliqué

Exemple de lien

CSS a.lien{
color: #fff ;
text-decoration:none;
background-color:#793d0c;
border:#341b08 1px solid;
padding:5px;
}
a.lien:hover{
color:#000;
text-decoration:none;
background-color:#b6621f;
border:#FC6 1px dashed;
}

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 :

exemple de tableau basique

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 :

exemple de tableau avec bordures fusionnées

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;}

Suite > >