Je vous invite à consulter ces sites internet en complément :
Openweb http://openweb.eu.org/ : un site internet comprenant de nombreuses
ressources sur les normes XHTML/CSS et RSS. Un référence francophone
Alsacreations http://css.alsacreations.com/ : tutoriaux et exercices d'utilisation des CSS, pour approfondir ses connaissances.
Les langages dynamiques sont des technologies qui permettent de concevoir les
pages automatiquement. Ainsi, il devient possible, par exemple, d'integrer au site
internet des informations données par les visiteurs sans que le webmaster ai eu besoin d'aller modifier le code de ses pages.
Le dynamique est un outil qui permet de faire vivre le site internet, de pouvoir
afficher la présence humaine, par le biais d'un livre d'or, de commentaires sur les articles, ou sous
bien d'autres formes.
Pour les porfessionnels, le dynamique permet de dédier un espace à chaque client, ou plus simple, de mettre à jour plus rapidement les pages.
Sur Martiusweb, le langage dynamique utilisé est PHP, mais il existe aussi (par exemple) l'ASP, qui est sont équivalent par Microsoft ou PERL.
Un langage dynamique est interprété sur le serveur qui héberge les pages, les sources sont donc
inviolables.
Le resultat de chaque langage dynamique est un fichier de donnée statique,
courament une page HTML.
<script> </script>
Cette balise permet d'inclure dans la page une série d'instructions dans un langage différent du HTML.
Comme le javascript par exemple.
On peut la placer n'importe où dans la page, mais les scripts sont le plus souvent placés entre les balises <head>.
1 <script type="text/javascript">
2 alert('Bienvenue sur cette page !');
3 </script>
La balise script admet un attribut obligatoire :type : il aura pour valeur le type mime d'un fichier externe ecrit dans ce langage (ex: le type mime de l'HTML est text/html, celui du javascript est text/javascript.
Ici, le code est contenu entre les deux balises, mais il existe une autre méthode pour
inserrer un langage externe dans un document HTML :
1 <script type="text/javascript" src="./javascript.js"></javascript>
Ici, le
code étranger est appelé dans un fichier externe (javascript.js), on utilise alors l'attribut src (qui signifie source).src : il aura pour valeur l'adresse relative ou absolue d'un fichier contenant le code, c'est le même attribut que pour la balise <img>.
Note aux utilisateurs de HTML 4 : l'attribut language est devenu obsolète dans la norme XHTML, il est remplacé par type.
Avant, il suffisait d'ajouter l'attribut target="_blank" pour ouvrir un lien dans une nouvelle fenêtre, mais cette balise est devenue obsolète : d'après le W3C, le visiteur doit choisir s'il
souhaite voir la page dans la même fenêtre ou une nouvelle.
Pourtant parfois, cet attribut était bien utile. Mais ne vous inquiétez pas, Javascript peut palier à ce manque.
1 <a href="http://monsite.com" onclick="window.open(this.href);
return false;">L'autre site</a>
Il y a plusieurs choses à analyser ici :
l'événementonclick: le terme attribut n'est plus correct ici, cet événement
indique que le javascript qu'il contient doit être exécuté lorsque l'on clique sur l'élément (ici un lien).
Il existe d'autres événements, mais pas toujours autorisés sur tous les éléments, en voici
les principaux :
ondblclick : Lorsque le visiteur effectue un double clic sur l'élément onmouseover : Lorsque le visiteur passe la souris sur l'élément onmouseout : Lorsque le pointeur de la souris sort de l'élément onfocus : concerne essentiellement les champs de formulaires : lorsque le focus est sur l'élément (le focus est sur un champ quand le pointeur est sur ce champ).
Javascript fonctionne à partir de l'objet window, qui possède une série de fonctions
comme open(), certains sous-objets, comme document.
Ici, la fonction open() permet d'ouvrir une nouvelle fenêtre.
Entre parenthèses, il faut indiquer l'adresse de la page, mais pour éviter de devoir
la recopier, car nous l'avons déjà indiqué dans l'attribut href, nous utilisons l'objet this, qui signifie "l'élément dans lequel nous travaillons" (ici <a>).
Le sous-objet href correspond à l'attribut du même nom.
Nous précisons à la fois la valeur de href et le javascript, car dans le cas ou un utilisateur aurait désactivé javascript, la page aurait été inaccessible.
Si on clique sur le lien, la page s'ouvre dans une nouvelle fenêtre et la fenêtre
actuelle (puisque le javascript agit et le lien normal également. On utilise donc return false;
pour que la page ne se charge plus que dans la nouvelle page.
Nous n'irons pas plus loin en javascript, vous avez vu quelques notions simples,
mais pour l'instant, il n'est pas utile dans savoir plus.
Il existe de nombreux tutoriaux complets disponibles sur internet, mais c'est à
vous de les trouver.
> retour au sommaire
> voir la suite
CSS zen garden est un site internet qui a été conçu dans le but de montrer aux
webmasters le pouvoir des feuilles de style.
Vous pouvez choisir un design, parmis les dizaines disponibles (il y a de nouvelles
contributions régulièrement). Jusque là, rien de fantastique : il existe de nombreux sites où
il est possible de changer le design...
Mais sur CSS zen garden c'est différent : seule la feuille de style change entre les différents designs, vous pouvez vérifier, le code HTML est toujours le même.
CSS Zen Garden est disponible à l'adresse http://www.csszengarden.com/, la traduction en français est également disponible.
Centrer un bloc
On ne centre pas un bloc de la même manière que l'on centre son contenu.
Pour centrer le texte au sein d'un bloc, il suffit de la propriété text-align:, alors que pour centrer un bloc la méthode est très différente.
center;
Pour centrer horiontalement, il faut que les marges de gauche et de droite soient
égales, mais comme la largeur de page peut varier, il existe une valeur qui permet de
calculer automatiquement la marge la plus équitable : auto.
Pour pouvoir centrer le bloc, il est obligatoire de préciser la largeur du bloc, ce
qui est assez logique.
Nous utilisons donc le code
1 .bloc
2 {
3 width: 500px;
4 margin-left: auto;
5 margin-right: auto;
6 }
Mais pour économiser une ligne, il est également possible, si vous vous
souvenez, de faire :
1 .bloc
2 {
3 width: 500px;
4 margin: 0px auto;
5 }
Malgrès tout, avant la version 6 d'internet explorer, il faut utiliser la syntaxe text-align:center sur l'élément parent du bloc.
Ensuite, pour corriger le décalage du texte sur les blocs, il suffit de replacer un text-align: left; sur le bloc.
Par exemple :
1 body
2 {
3 text-align: center;
4 }
5
6 .bloc
7 {
8 width: 500px;
9 margin: 0px auto;
10 text-align: left;
11 }
Il n'existe pour l'instant qu'une seule méthode pour centrer correctement un bloc
verticalement, sous tous les navigateurs.
Il faut utiliser ce que l'on appelle les marges négatives, qui permettent de centrer à
la fois verticalement et horizontalement. C'est ce que nous allons faire, il ne vous restera plus qu'à adapter dans le cas où l'on souhaite centrer horizontalement uniquement.
Il faut en premier choisir la largeur et la hauteur du bloc, utiliser la position absolue
(ou fixe), et placer le bloc à 50% du bord supérieur et du bord droit. Ensuite, il faut préciser la marge du haut, sa valeur doit être la moitié de la hauteur du bloc, mais en négatif. Même principe pour la marge de gauche, mais cette fois ci avec la moitié de la largeur.
Note : Cette méthode n'est valable que pour un bloc dont la largeur et/ou la hauteur
sont fixes (donc en px).
Par exemple, pour un cadre qui fait 700px de largeur et 400px :
1 .cadre
2 {
3 width: 700px;
4 height: 400px;
5 position: absolute;
6 top: 50%;
7 left: 50%;
8 margin-top: -200px;
9 margin-left: -350px;
10 border: 1px red solid;
11 }
Je vous laisse imaginer le code HTML à utiliser.
Vous pouvez voir le résultat de ces techniques sur la page d'exemple n°11.
Librement inspiré de l'article "Centrer les éléments ou un site web en CSS" d'Alsacreations.
> retour au sommaire
> voir la suite
La propriété position permet de sortir un élément du flux normal. Elle admet trois valeurs que nous allons étudier tour à tour.
La position absolue sert à placer l'élément par rapport au bord de la page.
Les propriétés CSS qui indiquent la place du cadre sont top (haut), bottom (bas), left (gauche), right (droite).
Nous allons placer un bloc de texte à 30px du bord superieur et 50px du bord de
gauche.
1 <div>
2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce
magna. Curabitur sagittis porttitor risus. Maecenas tempus.
3 </div>
1 div
2 {
3 position: absolute;
4 top: 30px;
5 left: 50px;
6 }
Le résultat est visible sur la page d'exemple n°8
La position fixe est assez semblable à la position absolue, exeption faite que l'élément
concerné n'est pas sensible au défilement de la page.
Reprenons l'exemple précédant, mais avec la feuille de style.
1 div
2 {
3 position: fixed;
4 width: 250px;
5 left: 50px;
6 }
Vous pouvez voir le résultat sur la page d'exemple n°9
La position relative concerne uniquement les éléments inline, ils sont décalés par
rapport à leur position sur la ligne.
Par exemple :
1 <p>
2 Lorem ipsum dolor sit amet, <span>consectetuer adipiscing</span>
elit. Fusce magna. Curabitur sagittis porttitor risus.
3 </p>
1 span
2 {
3 position: relative;
4 bottom: 5px;
5 left: 5px;
6 background-color: yellow;
7 }
Le résultat est :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce magna. Curabitur sagittis porttitor risus. Maecenas tempus. Vestibulum gravida feugiat diam. Nam molestie elit pulvinar nisl.
Un calque est simplement un autre nom pour un <div> avec une position absolue ou
fixe. Parfois les différents élément peuvent se chevaucher, il faut donc choisir l'élément qui
doit passer devant l'autre.
On utilise alors la propriété z-index, sa valeur sera numérique, le calque n°1 sera en
arrière-plan. Vous pouvez tester cette propriété sur la page d'exemple n°10.
Nous allons entamer la partie la plus difficile de ce tutorial, l'utilisation des balises de ositionnement.
On appelle flux normal le positionnement par défaut des éléments de la page, comme deux
blocs se placeront l'un en dessous de l'autre, et deux éléments en ligne l'un à côté de l'autre.
Il existe deux modes de positionnement en CSS, don l'un est appelé positionnement "float".
Il n'y a qu'une propriété à étudier : float, qui permet de décaler le bloc du flux
normal le plus à droite ou le plus à gauche que le permet le bloc conteneur (<body>, <div>, ...).
Elle admet les valeurs left qui placera le bloc tout à gauche, right qui le placera tout à droite, et none qui replace le bloc dans le flux normal.
Nous allons étudier plusieurs cas, pour bien savoir utiliser ce mode de
positionnement.
C'est l'utilisation la plus basique de la propriété float. Elle permet de
placer une image à droite ou à gauche du texte, comme ceci :
Nous allons commencer par créer le code html, pour ne pas surcharger la page, nous
n'allons voir que la
partie body, mais je rappelle que le reste est obligatoire.
1 <p>
2 <img src="./images/illustration.png" alt="Description de l'image"
class="illustration" />
3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce
magna. Curabitur sagittis porttitor risus. Maecenas tempus.
4 </p>
La feuille CSS sera très simple :
1 .illustration
2 {
3 display: block;
4 float: left;
5 /* nous plaçons l'image à gauche */
6 }
Une propriété doit vous intriguer dans cette feuille : la propriété display.
Elle est très utile car elle permet de donner le comportement d'un bloc à un
élément de type inline, et vice- versa.
les valeurs courantes sont :
1 display: block:
2 display: inline;
3 display: none;display: none
permet de masquer un élément.
Il existe d'autres valeurs, mais elles ne sont pas utiles actuellement, néanmoins,
ces valeurs serviront quand les navigateurs auront implémenté le XML au même titre que le
HTML. Mais il n'en sera pas question dans ce tutorial.
Note : Il n'est pas possible de mettre un bloc dans un élément parent inline, même en utilisant la propriété CSS display.
On va créer un cadre div pour le menu, qui lui, sera fait en liste à puce, puis
un dernier cadre div, pour le contenu.
Cette page sera sur le modèle :
Côté HTML, on aura :
1 <body>
2 <div id="menu" >
3 <ul>
4 Menu5 <li> < Page 1</li>
6 <li> < Page 2</li>
7 <li> < Page 3</li>
8 </ul>
9 </div>
10 <div id="page">
11 <p>Lorem Ipsus</p>
12 </div>
13 </body>
Nous allons maintenant étudier la feuille de style de cette page. Pour ne pas se
perdre et gagner du temps, je vous recommande d'écrire les propriétés CSS dans un ordre plus ou moins précis, comme par exemple, commencer par width/height, puis les
marginpadding, la bordure, le fond, et terminer avec le formatage du texte.
1 #menu
2 {
3 width: 100px;
4 float: left;
5 margin: 0px 5px;
6 border: 1px #CCC solid;
7 }
8
9 #page
10 {
11 width: 600px;
12 float: left;
13 margin: 0px 5px;
14 border: 1px #CCC dashed;
15 }
Voir le résultat sur la page d'exemples n°6
Cet exemple va vous permettre de faire un menu plus évolué, avec un effet "rollover"
(changement de couleur du fond du bloc). Il sera fait à partir d'une liste à puce.
1 <ul id="menu">
2 <li><a href="index.html">Accueil</a></li>
3 <li><a href="nous.html">Qui sommes nous ?</a></li>
4 <li><a href="traveaux.html">Nos travaux</a></li>
5 <li><a href="equipe.html">Notre équipe</a></li>
6 <li><a href="contact.html">Nous contacter</a></li>
7 </ul>
La feuille CSS sera :
1 #menu li
2 {
3 float: left;
4 list-style-type: none;
5 /* rappel : la puce disparait avec list-style-type */
6 }
7
8 #menu a
9 {
10 display: block;
11 width: 100px;
12 height: 20px;
13 margin: 2px;
14 border: 1px #CCCCCC solid;
15 background-color: #FFFFFF;
16 }
17
18 #menu a:hover
19 {
20 background-color: #EEEEEE;
21 }
Nous allons maintenant expliquer comment fonctionne ce menu.
Les pseudo-formats ne sont pas toujours correctement interprétés par Internet
Explorer. Pour le cas de :hover, il n'est pris en charge que pour un élément lien hypertexte (<a href="">...</a>). Si nous n'avions pas été confronté à ce problème, nous aurions pu facilement placer ce pseudo-format directement sur l'élément li.
Le but est de faire un bouton. Il faut donc faire un "cadre" dont la couleur de fond doit
changer. On transforme donc le lien en bloc, avec la propriété display: bloc;. On choisit
enfin la taille, le fond, et on le change avec le pseudo-format :hover.
Pour placer les élément horizontalement, on ajouter un float: left;,
tous les boutons seront placés le plus à gauche possible dans le conteneur, par contre, si la largeur de la fenêtre n'est pas suffisante, les boutons suivants se placent sur la ligne du dessous.
Vous pouvez voir le résultat sur la page d'exemple n°7
clearclear est une propriété CSS qui permet de stopper un float. De cette
manière on peut, en prenant le premier exemple traité, forcer le retour en dessous de l'image d'une partie du texte.
la propriété admet trois valeurs, left, qui annule uniquement un float: left;, right, qui lui n'annule qu'un float: right;, et la valeur both qui annule un float à droite ou gauche.
Il est courant d'utiliser clear: both; dans une classe nommée spacer. Biensur, ce n'est pas
une obligation.
le code sera :
1 <p>
2 <img src="./images/illustration.png" alt="description"
class="illustration" />
3 <p>
4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce
magna. Curabitur sagittis porttitor risus.
5 </p>
6 <p class="spacer">
7 Vestibulum gravida feugiat diam. Nam molestie elit pulvinar nisl.
In arcu est, malesuada in, vulputate commodo, ornare nec, elit.
8 </p>
La feuille de style sera :
1 .illustration
2 {
3 display: block;
4 float: left;
5 }
6
7 .spacer
8 {
9 clear: both;
10 }
Et le résultat :
Il peut aussi parfois arriver que le contenu du flottant soit plus haut que celui du texte, et
parfois, le résultat affiché peut manquer d'rsthétisme.
Il existe pour cela une parade.
On ajoute au code HTML un bloc, généralement une ligne horizontale (<hr />).
1 <div>
2 <img src="./images/illustrion.png" alt="illustration"
class="illustration" />
3 <p>
4 Vestibulum gravida feugiat diam. Nam molestie elit pulvinar nisl.
In arcu est, malesuada in, vulputate commodo, ornare nec, elit.
5 </p>
6 <hr class="float_correction" />
7 </div>
On reprend la feuille de style du premier exemple en ajoutant seulement :
1 .float_correction
2 {
3 visibility: hidden;
4 clear: both;
5 }
On peut aussi profiter de cet exemple pour découvrir la propriété visibility, qui
admet les valeurs visible et hidden qui, comme vous l'aurez surement compris, permettent de choisir d'afficher ou non un élément.
Note :visbility: hidden et display: none; n'ont pas le même
comportement : en utilisant visbility: hidden, l'élément ne sera pas visible, mais le comportement qu'il doit avoir reste intact, alors quedisplay:
none;, désactive complétement l'élément, comme s'il n'était pas présent dans le code.
Grâce à cette astuce, l'affichage devient :
Nous pouvons maintenant attaquer le second mode de positionnement dans le
prochain chapitre.
Juste avant d'étudier le positionnement en css (qui est un chaputre assez lourd), nous
allons voir le formatage des éléments de type bloc (on les appelle couramment boîtes...).
Il existe six propriétés CSS à retenir pour définir la taille d'un bloc.
La première est width elle définit la largeur. La seconde est height et définit la hauteur du bloc.
On exprime la valeur en px pour une taille fixe ou en % pour parler d'une taille relative.width: 80%; affichera un bloc qui aura pour largeur 80% de celle de la fenêtre.
Les quatre autres propriétés sont assez semblables : min-width et min-height, qui permettent de définir la largeur/hauteur minimum du bloc.
De la même manière, les propriétés max-width et max-height indiquent la largeur/hauteur maximum du bloc.
Note : Ces quatres dernières balises semblent avoir des problèmes de compatiblité avec
internet explorer version 6.
Nous en avons déjà parlé rapidement précédamment, nous allons les expliquer ici en détail :
les bordures.
La propriété fondamentale est border, elle concerne les quatres bordures sans distinction. Elle se décline en plusieures sous-propriétés :
border-top : bordure duborder-left : bordure deborder-bottom : bordureborder-right : bordureCes balises auront pour valeur [épaisseur]px [couleur] [style] (l'ordre n'est pas important, mais les trois indications doivent être présentes).
On définit toujours l'épaisseur en pixel, ou à l'aide des mots clés :
thin : fin medium : intermédiairethick : épais La couleur peut être définie par les mots clés, la valeur héxadécimale ou encore en code
rgb, avec la syntaxe rgb([rouge],[vert],[bleu]). Les styles de bordure existants sont :
none : pas de borduresolid : un trait simpledotted : pointillésdashed : tirets double : bordure doublegroove : en reliefridge : effet 3D inset : le bloc forme unoutset : le bloc estIl existe encore quelques autres sous-propriétés issues de border.
border-width : pour neborder-color : pour neborder-style : pour neIl est également possible de faire des combinaisons, tel que border-top-style, ouborder-right-color, etc...
Il y a deux sortes de marges : les marges exterieures, qui possèdent la propriété
marginpadding.
Ces deux propriétés possèdent toutes les deux 4 sous-propriétés similaires :margin-left, margin-right, margin-top et margin-bottom.
Ainsi que :padding-left, padding-right, padding-top et padding-bottom.
Voici une petite illustration pour faire la différence :
La zone symbolise la marge extérieure (margin).
Le trait noir est la bordure du bloc, et la zone rouge, la marge intérieure (padding).
Le contenu du bloc (le texte par exemple) sera placé dans le rectangle du centre.
Voici trois utilisations différentes pour cette propriété :
1 /* l'exemple est aussi valable pour la propriété padding */
2 margin: 5px;
3 margin: [largeur des 4 marges]px;
4 /* Les quatres marges feront 5px. */
5 margin: 10px 0px;
6 margin: [marges du haut et du bas]px [marges de gauche et droite]px;
7 /* les marges du haut et du bas font 10px, les marges de droite et de
gauche en font 0 */
8 margin: [haut]px [droite]px [bas]px [gauche]px;
Il est donc possible de donner une taille à toutes les marges, ou de détailler plus ou moins
précisément.
Mais il est encore possible de décomposer autrement :
1 margin-top: [valeur]px;
2 margin-right: [valeur]px;
3 margin-bottom: [valeur]px;
4 margin-left: [valeur]px;// Standards Microsoft et W3C
Le traitement de ces propriétés CSS est différent selon l'interprétation par microsoft ou par les
navigateurs respectant les normes du W3C.
En effet, Microsoft considère que la valeur de width est la largeur totale du bloc, et donc que l'on inclue la taille des marges dedans, alors que le W3C considère qu'il faut ajouter à la largeur,
les marges et la bordure.
Pour cette feuille de style, l'interprétation sera différente :
1 .bloc
2 {
3 width: 250px;
4 margin: 12px;
5 padding: 12px;
6 border: 2px #000000 solid;
7 }l'affichage sera différent :
Chez microsoft, la taille de la zone de texte sera 250 - 12*2 - 12*2 - 2*2 = 200px. (il y a une bordure de chaque côté).
Pour le W3C, on trouve que la taille du bloc sera 250+12*2 + 12*2 + 2*2.
Pour éviter les problèmes de compatibilité, on utilise une méthode appellée le Doctype Switching (voir ici).
Cette méthode consiste à forcer un mode d'interprétation à Internet Explorer en
fonction du DTD choisi :
l'utilisation d'un DTD HTML strict ou XHTML forcera l'affichage type W3C.
Note : En ajoutant le prologue XML <?xml version="1.0"?>, Internet explorer 6 utilisera le modèle Microsoft Comme Internet Explorer 5.5 ne connait que le modèle Microsoft, on peut aussi utiliser le fait que ce navigateur ne connaisse pas toute la syntaxe CSS pour cacher certaines informations :
1 .bloc
2 {
3 /* on indique ici la taille pour microsoft */
4 width: 300px;
5 margin: 12px;
6 padding: 12px;
7 /* Ces deux lignes permettent de cacher ce suit à IE 5 sous windows */
8 voice-family: "\"}\"";
9 voice-family: inherit; /* On annule l'information précédente */
10 width: 250px;
11 }
12 /* pour IE 6, il faut utiliser le fait que la syntaxe élément>élément
soit inconnue */
13 html>body .bloc
14 {
15 width: 250px;
16 }
Nous avons ici exploité un bug de l'analyse des css d'internet explorer pour indiquer la valeur "spécial Microsoft", et ainsi
dissimuler la vraie valeur. Vous pouvez consulter la page de "l'auteur" de ce Hack sur cette page pouvez aussi consulter l'article d'OpenWeb
La première des décorations est l'arrière plan (le fond), géré par la propriété background
(et ses sous propriétés) .Il est possible de définir un fond en couleur, ou avec une image :
1 background-color: #FFFFFF;
2 background-image: url("./images/monimage.png");
Pour placer une image en fond, on utilise la syntaxe url([adresse]);, l'adresse indiquée sera soit l'adresse absolue (http://www.monsite.com/images/monimage.png) ou l'adresse relative, en fonction de l'emplacement de l'image par rapport à la feuille de style (et non de la page HTML).
Pour gérer l'image, il existe quelques popriétés supplémentaires, telque background-position, qui admet les valeurs top, bottom, right, left et center, placer le fond dans le bloc.
La propriété background-repeat, indique si le fond doit être répété en mosaïque (avec la valeur repeat), verticalement (repeat-y), horizontalement (repeat-x), ou pas du tout
(no-repeat).
Il existe aussi la propriété background-attachment, qui permet de choisir si le fond doit rester fixe (valeur fixed), ou alors doit monter/descendre avec le scroll (défilement de la page), on emploie alors la valeur scroll. La valeur par défaut est couramment scroll. Cette propriété n'est utile que pour définir le fond de la page (on définie la balise body dans la feuille de style) ou d'un cadre utilisant la technologie overflow, que nous allons étudier.
La propriété overflow (disponible uniquement sur les navigateurs récents, de génération IE 6 windows, IE 5 mac, mozilla, etc...) permet d'ajouter une barre de défilement (ou scroll/ascenseur) dans le cas où le contenu du cadre serai plus grand que la taille limite définie par les propriété width et height.
Cette propriété admet les valeurs auto, qui affichera les barres seulement si le contenu dépasse, visible qui affichera toujours la barre, hidden qui ne l'affichera jamais.
Pour le placer horizontalement, il suffit d'utiliser la propriété text-align, qui admet les valeurs
Pour centrer verticalement, la propriété à utiliser est vertical-align, avec les valeurs
top : aligner en hautmiddle : aligner aubottom : aligner en bas.baseline : aligner sursub : mettre en indicesuper : mettre entext-top : aligner surtext-bottom : alignerUne grande partie du formatage du texte se fait avec la propriété font (et ses sous-propriétés). Il est plus courant d'utiliser les sous-propriétés que font elle-même.
On utilise font-family: [la police ou famille de police]; pour indiquer la police
que l'on souhaite utiliser.
On indique généralement une famille de police, car il se peut que l'ordinateur du client ne
possède pas celle
que vous souhaitez. Dans le cas échéant, le navigateur utilisera une autre police de la famille, si elle est disponible.
Pour éviter les problèmes de compatibilité, on utilise toujours des polices
standards, elles sont :
Times (new roman) Arial Verdana Georgia Courrier new Mais c'est toujours mieux d'utiliser une famille, les familles courantes sont :
Arial, Helvetica, sans-serif"Times New Roman", Times, serif"Courier New", Courier, mono"Times New Roman", Times, serifVerdana, Arial, Helvetica, sans-serifGeneva, Arial, Helvetica, sans-serifVous pouvez biensûr faire votre propre famille de polices, la seule recommandation est de
terminer avec la police serif ou sans-serif, ce n'est pas obligatoire, mais c'est
conseillé : la police serif est toujours disponible.
Notez aussi que pour les noms de polices contenant des espaces, il faut les entourer de
guillemets doubles
La propriété CSS pour définir la taille du texte est font-size.
Il y a deux métodes pour exprimer la taille du texte : à partit d'une valeur absolue ou relative.
On exprime la taille de la police de manière absolue avec les unités px (pixel),
en mm (millimètre) et en cm (centimètre).
Par exemple :
1 font-size: 8px;
2 font-size: 2mm;
3 font-size: 0.2cm;
Il est important de noter que pour une valeur décimale, il faut utiliser le point
.12 px ne fonctionnera pas).
Il est malgré tout assez avantageux d'exprimer la taille du texte de manière relative,
car certains utilisateurs réglent leur navigateur pour que la police soit plus petite ou plus grande selon leur préférence, et que l'utilisation d'une valeur absolue ne respecte pas ce choix de l'utilisateur.
Vous pouvez donc exprimer la taille avec les valeurs :
De la plus petite à la plus grande :
Vous pouvez utiliser l'unité relative em, qui correspond à la taille d'un m minuscule. On pourrait dire que 1em correspond à la "taille standard", donc 0.8em à 0,8 fois la taille
standard, etc...
De la même manière que pour l'unité em, avec le % (pourcentage), 100% correspondra à la taille par défaut, donc 80% à 80% de la taille standard, etc...
Par exemple, le gras et l'italique sont des effets de style.
Pour mettre un texte en gras, on utilise la propriété font-weight: bold;.
la valeur normal annulera cet effet de style.
Pour mettre en italique, on utilise font-style, propriété qui admet comme valeur italic, oblique (équivalent à italique, mais l'inclinaison est plus prononcée) et normal.
Note : Il n'est biensûr pas obligatoire de préciser font-style: normal; pour un élément dont le texte sera droit par défaut.
Une troisième propriété text-decoration admet les valeurs :
underline : souligneoverligne : surligneline-through : barreblink : fait clignoternone : annulera lesPour choisir la couleur du texte, on utilise la propriété color.
On peut choisir cette couleur à l'aide des mots clés
white silver gray black red maroon lime green yellow olive blue navy fuchsia purple aqua teal
On peut utiliser le code héxadécimal, ou le format rgb, de la manière rgb([rouge],[vert],[bleu]).
On aura alors color: red; équivalent à color: #FF0000; et color: rgb(255,0,0);.
On commence en premier par définir l'élément que l'on souhaite mettre en forme :
une balise, une classe ou un identifiant.
Ensuite, entre crochets ({ et }) on indique les propriétés CSS utilisées puis leur valeur.
La syntaxe sera alors :
1 div
2 {
3 propriété: valeur;
4 propriété2: valeur2;
5 propriété3: valeur3;
6 }
Lorsque l'on souhaite définir une classe, on précéde le nom de cette dernière par un .
(point). Pour définir un identifiant, son nom sera précédé d'un # (Dièse).
Puis, lorsque l'on définie une balise, on indique simplement son nom, sans rien devant.
Enfin, il existe un sélecteur universel : le symbole *.
1 .ma_classe { propriété: valeur; }
2 #mon_identifiant { propriété: valeur; }
3 ma_balise { propriété: valeur; }
Certaines balises enfants peuvent hériter de certaines propriétés CSS de leur
balise parent :
1 <div class="code">
2 <!-- on dira ici que la classe code donne une couleur bleue
au texte et une police Courrier -->
3 <h1>une_fonction()</h1>
4 <h2>une_autre_fonction()</h2>
5 </div>
Dans notre exemple, tous les éléments entre <div class="code"> et
</div>Comme ça).
Il est également possible de faire des sortes de combinaisons, pour cibler des
balises/classes enfants, sans avoir à surcharger de classes suplémentaires les balises.
Prenons l'exemple d'un menu, on le fait avec les balises indiquant une liste :
1 <ul id="menu">
2 <li><a href="index.hml">Accueil</a></li>
3 <li><a href="nous.hml">qui sommes nous ?</a></li>
4 <li><a href="travaux.hml">Nos travaux</a></li>
5 <li>Contact</li>
6 </ul>
Nous allons, avec les css, positionner et mettre en forme le menu (ajouter une bordure, le mettre à gauche du contenu, etc...).
1 #menu
2 {
3 /* Propriétés CSS de l'ensemble, par la même
4 occasion, on découvre ce qu'est un commentaire en CSS */
5 }
6 #menu li
7 {
8 /* Propriétés CSS de chaque option du menu*/
9 }
Dans cette feuille de style, la première série d'indications concernaient l'ensemble
du menu (c'est ici que l'on indique que l'on désire une bordure, par exemple). La deuxième série
d'indications concerne uniquement les balises <li> contenues dans l'élément identifié parmenu, c'est ici que nous indiquerons par exemple, que l'on ne doit pas afficher la puce.
On pourrai faire la même chose pour définir les propriétés des liens du menu (d'une telle
couleur en temps normal, et d'une autre l'orsqu'il est pointé par la souris, nous y reviendrons).
Le code serait alors #menu a.
De cette manière, il est logique de déduire que peu importe la hiérarchie de la balise enfant (elle peut être sous-enfant, sous-sous-enfant...).
Il existe un symbole outil (sélecteur, comme *) qui permet de parvenir à un
résultat assez semblable, mais qui ne concernerait qu'une hiérarchie directe (balise parent et balise enfant directement). Ce symbole est >.
De cette manière :
1 #menu > a
2 {
3 /* porpoiétés du lien */
4 }
5 #menu > li
6 {
7 /* porpoiétés de li */
8 }
De cette manière, les attributs concernant <li>, fonctionneront toujours, mais plus ceux concernant <a>, car ils sont sous-enfants de menu et non directement enfants.
Note : des problèmes d'incompatibilité sont notés avec Internet Explorer version 6 lors de l'utilisation de l'outil >.
Cet inconvénient peut néanmoins devenir avantage dans des situations futures, mais nous y reviendrons. L'un des derniers outils à connaître est le symbole +, il est très particulier : il sert à définir un élément uniquement si il est précédé d'un autre précisément.
Par exemple :
1 p + img
2 {
3 /* propriétés CSS */
4 }
L'image ne prendra la mise en forme définie seulement si elle est précédée d'un
paragraphe.
Note : comme pour >, des problèmes d'incompatibilité sont notés avec Internet Explorer version 6 lors de l'utilisation de cet outil.
Il est possible de définir plusieurs éléments en même temps en les séparant par des
virgules, comme :
1 .classe, .classe2
2 {
3 propriété: valeur;
4 }
Prenons l'exemple de la propriété border : il existe 4 bordures, celle du haut (top), bas (bottom), de gauche (left), et de droite (right).
Il est possible de définir les mêmes valeurs pour les 4 bordures, ou alors, les
dissocier :
1 border: 1px black solid;
2 /* les 4 bordures seront en noir, d'un trait continu et de largeur
1 pixel */
3 border-top: border: 1px black solid;
4 border-left: border: 1px black solid;
5 border-bottom: border: 1px #333333 solid;
6 border-right: border: 1px #333333 solid;
7 /* Ici, les bordures du haut et de gauche seront en noir,
8 et celles de droite et du bas en gris foncé
9 ce qui donnera un petit effet de relief */
je les appelle sous-propriétés car elles définissent plus précisément ce qu'une
propriété plus courte défini de manière générale.
Chaque particule qui fait la sous-propriété est séparée de la propriété originale par
le symbole - (tiret).
On trouve maximum 2 sous-propriétés (ex : list-style-type qui indique quel
est le format de la puce de la liste).
Les pseudo-formats sont des outils qui servent à séléctionner des éléments aux caractères
particuliers.
Le syntaxe est :
1 .classe:pseudo-format
Les pseudo-formats les plus connus sont ceux qui définissent le comportement d'un
lien hypertexte :
1 a:link
2 /* dans le cas où l'élément a est un lien (car il peut aussi être
une ancre) */
3 a:active
4 /* dans le cas où le visiteur clique sur le lien */
5 a:visited
6 /* dans le cas où la page a déjà été visitée */
7 a:hover
8 /* dans le cas où la souris pointe sur le lien */
C'est grâce à ces pseudo-formats que l'on change la couleur d'un lien dans la page.
Mais il existe d'autres pseudo-formats :
:focus, que l'on utilise souvent pour les champs de formulaires, lorsque le focus est sur le champ.
:first-letter qui permet de définir un style sur la première lettre du bloc uiquement.:first-line qui permet de définir le style de la première ligne.
:before qui place du contenu avant le contenu du bloc.:after qui place du contenu après le contenu du bloc.
On utilise ces pseudo-formats de cette manière :
1 .bloc:before
2 {
3 content: "debut de la phrase";
4 }
5
6 .bloc:after
7 {
8 content: "fin de la phrase";
9 }
Note : Les pseudo-formats :after et :before ne sont pas interprété sous la version 6 Windows d'Internet Explorer. vous pouvez avoir un apreçu de l'utilisation de ces pseudo-formats sur la page d'exemple n°5
On utilise un identifiant pour "nommer" un élément (on utilisera ici plus justement
identifier). Donc, en toute logique, deux éléments ne peuvent pas avoir le même identifiant.
On donne couramment des identifiants aux éléments comme le logo ou le pied de page, et assez couramment également, un identifiant aux champs d'un formulaire.
Pour définir un identifiant, on utilise l'attribut id="identifiant"
Les classes concernent elles, une série d'éléments de la page qui ont le même
comportement, comme les titres des paragraphes ou des paragraphes.
Pour définir une classe, on utilise l'attribut class="maclasse".
Il est possible d'utiliser plusieurs classes pour un seul et même élément :class="code_html exemple" : on sépare chaque classe par un espace.
Il est biensûr possible d'ajouter un identifiant et une série de classes à un même
élément.
Pour rendre cette notion moins abstraite, nous allons l'illustrer avec un exemple :
Nous travaillons biensûr dans la partie <body> de la page.
1 <!-- haut de la page -->
2 <div id="header">
3 <img src="./images/logo.png" alt="Mon site internet" />
4 </div>
5 <!-- menu -->
6 <ul class="menu">
7 <li>Accueil</li>
8 <li>Qui sommes nous ?</li>
9 <li>Nos travaux</li>
10 </ul>
11 <ul class="menu">
12 <li>Forum</li>
13 <li>Livre d'or</li>
14 <li>Chat</li>
15 <li>Contact</li>
16 </ul>
17 <!-- Corps de la page -->
18 <p>...</p>
19 <!-- Pied de page -->
20 <p id="footer">
21 © 2005 - Mon entreprise.<br />
22 Tous droits résérvés
23 </p>
Le résultat est disponible sur la page d'exemple n°4.
Dans le but de mieux comprendre le lien entre les classes, les identifiants et les feuilles de style, des styles CSS ont déjà été appliqués.
La première méthode consiste à inclure la feuille de style dans le code HTML. On utilise alors la balise <style> </style>. Il est obligatoire de préciser que le langage utilisé est le CSS, avec l'attribut type="text/css.
1 <style type="text/css">
2 <!--
3 /* Le code css */
4 -->
5 </style>
On peut importer une feuille de style externe avec le code :
1 <style type="text/css">
2 <!--
3 @import url(style.css);
4 -->
5 </style>
La meilleure métode reste l'utilisation de la balise <link />, que l'on utilisera avec une série d'attributs :
1 <link rel="stylesheet" type="text/css" media="screen"
href="./style.css" />
Avec les navigateurs compatibles, vous pouvez indiquer plusieurs feuilles de style alternatives, pour changer de
design sans recharger la page (vous pouvez voir un exemple, avec Mozilla ou Firefox sur OpenWeb), il faudra donc ajouter l'attribut title, et donner à l'attribut rel la valeur ternate stylesheet.
(Seule la/les feuille(s) par défaut garderont la valeur stylesheet).
Il est également possible de charger plusieurs feuilles de style en même temps.
1 <!-- Deux feuilles de style chargées en même temps -->
2 <link rel="stylesheet" type="text/css" href="./style.css"
title="Design par defaut" />
3 <link rel="stylesheet" type="text/css" href="./style2.css"
title="Design par defaut" />
4 <!-- Feuilles de style secondaires -->
5 <link rel="alternate stylesheet" type="text/css" href="./alternate.css"
title="Design secondaire" />
6 <link rel="alternate stylesheet" type="text/css" href="./bigfont.css"
title="Design grosses polices" />
On peut aussi, mais cette méthode est de loin la moins propre et la moins
commode, intégrer les données CSS directement à l'élément grace à l'attribut style="[code csss]".
Pour certaines raisons, on peut y avoir ponctuellement recours, mais cette méthode n'est pas
conseillé, puisque dans un premier temps, le design et le code HTML sont mélangés, et que
l'on perd l'avantage de pouvoir modifier le design en modifiant simplement quelques lignes de code.
Chapitre 4 : Aller plus loin