Les CSS permettent de gérer deux aspects relativement distincts de la présentation de vos pages :
Ce deuxième point est sans aucun doute le plus complexe à maîtriser. Pour vous permettre d'en faire le tour et de réaliser les designs évolutifs que permettent les CSS, nous allons aborder les notions nécessaires une par une :
Par défaut, les éléments HTML sont affichés selon l'un des modes suivants :
Occupe toute la largeur disponible. Lorsque 2 éléments blocs se suivent dans une page, ils sont positionnés (par défaut) l'un sous l'autre.
Exemple typique d'élément bloc : l'élément <p> (le paragraphe).
N'occupe que la largeur indispensable à l'affichage du contenu et ne provoque pas de retour à la ligne. Lorsque 2 éléments en-ligne se suivent dans une page, ils sont positionnés l'un à côté l'autre (si la largeur de page le permet).
Exemple typique d'élément en-ligne : l'élément <img> (image).
Certains éléments ne servent qu'à apporter des informations invisibles pour l'internaute.
Exemple typique d'élément non affiché : l'élément <meta>.
Les éléments de type "block" sont généralement ceux que l'on utilise pour la mise en page, alors que les éléments "inline" sont surtout utilisés pour attribuer un style à une portion de texte.
D'une façon générale, un élément en-ligne peut s'emboîter dans un élément bloc, alors que l'inverse n'est pas vrai.
Vous pouvez par contre emboîter sans problème un élément block dans un autre élément block ou un élément inline dans un autre élément inline.
Ces règles générales comportent quelques exceptions dont vous trouverez une liste sur alsacreations.
Il peut être parfois bien pratique (voire même indispensable !) de changer la façon dont un élément s'affiche. La propriété CSS " display" permet de basculer d'un mode d'affichage à l'autre trés simplement en écrivant :
display:block
display:inline
ou
display:none
Le "flux", c'est l'ordre d'affichage des divers éléments qui composent une page Internet.
Par défaut, les navigateurs présentent les éléments dans l'ordre où ils se trouvent dans le code source. Les mots sont placés les uns derrière les autres, jusqu'à atteindre la largeur de la page. Quand il n'est plus possible de s'étendre en largeur, le navigateur retourne à la ligne et recommence ses alignements.
Lorsque le navigateur rencontre un élément "block", il retourne à la ligne, affiche l'élément bloc puis retourne à nouveau à la ligne pour disposer le reste du contenu.
Si l'utilisateur modifie la largeur de la page, le navigateur recalcule la disposition de tous les éléments contenus dans la page afin de s'adapter à la nouvelle largeur disponible (à moins que la largeur de page ne soit fixée par des instructions particulières).
Cette description du flux correspond au schéma "standard" d'une page Web. Les CSS permettent de gérer une trés grande variété d'exceptions à ce schéma de principe et vous permettront par exemple :
ATTENTION : si vous spécifiez des valeurs décimales, vous devez utiliser la notation anglaise (un point à la place de la virgule). Exemple : "1.4em" et non pas "1,4em".
La façon la plus courante d'attribuer une dimension à un bloc consiste à utiliser les propriétés width et height.
Comme la plupart des propriétés CSS, width et height acceptent de nombreuses façon de se voir attribuer une valeur.
Lorsque l'on souhaite positionner deux blocs côte-à-côte, il n'est généralement pas intéressant de combiner une dimension en pourcentage avec une dimension fixe.
Cette combinaison va en effet inévitablement provoquer une mauvaise utilisation de l'espace disponible sur la page dans la mesure ou la somme des deux tailles de blocs ne sera presque jamais égale à 100%.
Si on souhaite avoir une largeur fixe pour un premier bloc et une largeur variable pour un bloc situé à ses côtés, on utilisera plutôt le "dimensionnement implicite" expliqué ci-dessous.
Il est parfaitement possible de définir la taille d'un bloc sans faire appel aux propriétés width et height. Il suffit pour cela de définir la position de chaque bord du bloc en utilisant les propriétés top (sommet du bloc), left (bord gauche du bloc), bottom (base du bloc) et right (bord droit du bloc).
Lorsque vous attribuez à un élément une bordure (avec la propriété border, vous visualisez immédiatement les dimensions de cet élément.
Les propriétés margin et padding vont vous permettre de jouer sur les marges externes et internes de l'élément par rapport à ses dimensions de départ.
En attribuant une valeur au padding (marge interne), vous augmentez la distance entre le contenu de l'élément et sa bordure. Si votre élément à des dimensions fixées (cas de certains éléments de type "bloc"), le fait d'augmenter le "padding" à pour effet de diminuer la zone intérieure "utile" de l'élément.
En attribuant une valeur au margin (marge externe), vous "éloignez" l'élément de ses voisins à l'intérieur du flux.
Exemples :
Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.
CSS
.encadre {
border:1px solid black;
}
.exemple_padding {
padding:8px;
}
.exemple_margin {
margin:8px;
}
HTML
<p>avant<span class="encadre">encadrée<span>après</p>
<p>avant<span class="encadre exemple_padding">encadrée avec padding <span>après</p>
<p>avant<span class="encadre exemple_margin">encadrée avec margin<span>après</p>
avantencadréeaprès
avantencadrée avec paddingaprès
avantencadrée avec marginaprès
Le postionnement des blocs à lieu tout seul demanderait un nombre élevé d'heures de cours. Il y a plusieurs méthodes utilisant le CSS pour positionner les blocs.
Il y a trois méthodes pour cela :
position avec les attributs absolute et relative.float avec les attributs right, left et none.flex qui permet une gestion des boites très flexible...Pour ceux que ça intéresse, allez sur la page : Initiation au positionnement CSS
Retour à la partie 1 : le langage HTML