Apprenez rapidement HTML et CSS




Squelette de page
Exemples en HTML5
Exemples CSS
Exemples Javascript

Quelques documents utiles

Une initiation à HTML5 et CSS3?
Apprenez à créer votre site avec HTML5 et CSS3
Mémento HTML5
Mémento de mise en forme Texte CSS

Déclaration des styles css

Les styles CSS peuvent être appliqués de différentes façons aux éléments contenus dans un document html :
- avec l'emploi de l'attribut style d'une balise html :

Utilisation de l'attribut style :

L'emploi de l'attribut style dans une balise permet de définir rapidement
et intuitivement un style sur un élément html.
par exemple dans une balise label :
<label style="color:silver; text-decoration:underline; font-weight:bold; font-size:14px;">
Exemple de style appliqué dans la balise label
</label>
donnera:


par exemple aussi, l'utilisation de l'attribut style dans une balise div :
<div style="border:solid 1px black; background-color:silver; width:350px; padding:10px;">
Exemple de style appliqué dans la balise div
</div>
donnera :
Exemple de style appliqué dans la balise div


Utilisation de la balise <style> :

Exemple de Tableau
La balise <style> se déclare dans l'entête du document html, à l'intérieur de la balise <head>.
On y définit l'ensemble des styles CSS qui seront appelés soit par les attributs "class",
soit par référence aux attributs "id" des différents tags html du document.
Les styles faisant référence aux identifiants des balises html sont préfixés
du caractère # suivi de l'identifiant de la balise.
Le style décrivant la balise suivante :
<label id="id-lbl">exemple</label>
sera déclaré comme ceci :
<style>
#id-lbl {font-family:verdana; color:#dedede;}
</style>
Voici un exemple de document complet mettant ces explications en pratique :
< html>
< head>
< title>Exemple d'utilisation de la balise style< /title>
< style type="text/css">
.texte-en-forme{ font-family:tahoma; font-size:18px; color:blue; }
#paragraphe-id{ font-weight:bold; color:green; } < /style>
< /head>
< body>
< p class="texte-en-forme">Texte du paragraphe utilisant l'attribut "class"< /p>
< p id="paragraphe-id">Texte du paragraphe utilisant l'attribut "id" : paragraphe-id< /p>
< /body>
< /html>

ce qui donnera:
Exemple d'utilisation de la balise style

Texte du paragraphe utilisant l'attribut "class"

Texte du paragraphe utilisant l'attribut "id" : paragraphe-id



Style CSS font-family

La propriété font-family indique quelle police de caractère appliquer sur le texte concerné.
Il se peut que la police employée ne soit pas présente sur le poste de l'utilisateur, ce qui peut être anticipé en définissant
une liste de plusieurs polices que le navigateur web tentera d'appliquer par ordre de déclaration.

Propriétés pour le style font-family


Propriété Définition Valeurs CSS
font-family Indique la police de caractère qui sera employée sur le texte contenu par l'élément police spécifique
police générique
inherit
CSS 1


Exemple d'utilisation du style css font-family :





Application de différentes polices :

<label style="font-size:12px; font-family:arial;">exemple de font : arial</label>
<label style="font-size:12px; font-family:verdana;">exemple de font : verdana</label>
<label style="font-size:12px; font-family:tahoma;">exemple de font : tahoma</label>
<label style="font-size:12px; font-family:courier;">exemple de font : courier</label>
<label style="font-size:12px; font-family:georgia;">exemple de font : georgia</label>
<label style="font-size:12px; font-family:calibri;">exemple de font : calibri</label>
<label style="font-size:12px; font-family:serif;">exemple de font : serif</label>
<label style="font-size:12px; font-family:sans-serif;">exemple de font : sans-serif</label>
<label style="font-size:12px; font-family:fantasy;">exemple de font : fantasy</label>
<label style="font-size:12px; font-family:cursive;">exemple de font : cursive</label>

Définition de plusieurs polices pour anticiper le cas ou la première police n'est pas définie chez l'utilisateur :

<label style="font-size:12px; font-family:testpolice, calibri, verdana;">
   Police testpolice qui n'existe pas, on applique alors la seconde police : calibri et si à nouveau cette police n'est pas supportée on applique la police : verdana.
</label>


Ce qui donnera :












Définition de plusieurs polices pour anticiper le cas ou la première police n'est pas définie chez l'utilisateur :





Style Font-size


La propriété font-size est employée pour définir et modifier la taille du texte sur lequel elle s'applique. La valeur de cette propriété détermine spécifiquement la hauteur qui sera prise par les majuscules de la police spécifiée.




Propriétés pour le style font-size :




Propriété Définition Valeurs CSS
font-size Spécifie la taille de la police de caractère valeur (px, em...)
%
xx-large
x-large
larger, large
medium
small, smaller
x-small
xx-small
inherit
CSS 1


Exemple d'utilisation du style css font-size :





Application de différents rendus avec la propriété font-size :

<label style="font-size:10px; font-family:arial;">
   exemple de texte avec la propriété font-size:10px</label>
<label style="font-size:12px; font-family:arial;">
   exemple de texte avec la propriété font-size:12px</label>
<label style="font-size:14px; font-family:arial;">
   exemple de texte avec la propriété font-size:14px</label>
<label style="font-size:xx-small; font-family:verdana;">
   exemple de texte avec la propriété font-size:xx-small</label>
<label style="font-size:smaller; font-family:verdana;">
   exemple de texte avec la propriété font-size:smaller</label>
<label style="font-size:medium; font-family:verdana;">
   exemple de texte avec la propriété font-size:medium</label>
<label style="font-size:large; font-family:georgia;">
   exemple de texte avec la propriété font-size:large</label>
<label style="font-size:x-large; font-family:georgia;">
   exemple de texte avec la propriété font-size:x-large</label>
<label style="font-size:120%; font-family:georgia;">
   exemple de texte avec la propriété font-size:120%</label>

Ce qui donnera:















Style CSS color


La propriété color permet d'appliquer une couleur au texte contenu dans l'élément sur lequel elle est appliquée.
il existe plusieurs nomenclatures pour assigner une couleur :
- Le nom de la couleur
- color:red;
- color:yellow;
- color:lightsteelblue;
- ...
- Le code hexadécimal de la couleur qui se décompose comme ceci :
#RRGGBB
# : ->préfixe indiquant qu'une valeur hexadécimale suit
RR :->valeur pour la composante rouge (allant de 00 à FF)
GG :->valeur pour la composante verte (allant de 00 à FF)
BB :->valeur pour la composante bleue (allant de 00 à FF)
- La notation rgb(valR, valG, valB) qui correspond à :
valR : valeur pour la composante rouge (allant de 0 à 255)
valG : valeur pour la composante verte (allant de 0 à 255)
valB : valeur pour la composante bleue (allant de 0 à 255)
Remarque sur les valeurs hexadécimales :
La valeur hexadécimale la plus petite #000000 correspond au noir,
et la plus grande #FFFFFF correspond au blanc.
Une composante rouge verte ou bleue peut avoir une valeur allant de "00" à "FF".
Les valeurs hexadécimales vont de 0 à 15 (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F), A valant 10, B valant 11, ... F valant 15

Propriétés pour le style color :

Propriété Définition Valeurs CSS
color Définit une couleur pour le texte de l'élément nom couleur
valeur rgb
valeur #hexa
CSS 1


Application de couleurs par leurs noms
<label style="color:green;">Couleur green</label>
<label style="color:steelblue;">Couleur steelblue</label>
<label style="color:firebrick;">Couleur firebrick</label>
<label style="color:seagreen;">Couleur seagreen</label>
Application de couleurs par leurs valeurs hexadécimales
<label style="color:#000000;">Couleur noire : #000000</label>
<label style="color:#AEAEAE;">Couleur grise : #AEAEAE</label>
<label style="color:#FFFF00;">Couleur jaune : #FFFF00</label>
<label style="color:#800080;">Couleur violette : #800080</label>
Application de couleurs par leurs valeurs rgb :
<label style="color:rgb(0,0,0);">Couleur noire : rgb(0,0,0)</label>
<label style="color:rgb(150,150,150);">Couleur grise : rgb(150,150,150)</label>
<label style="color:rgb(85,210,172);">Couleur azur : rgb(85,210,172)</label>
<label style="color:rgb(180,85,85);">Couleur brique : rgb(180,85,85)</label>
Application de couleurs par leurs noms :

Application de couleurs par leurs valeurs hexadécimales :

Application de couleurs par leurs valeurs rgb :


list-style-image



La propriété list-style-image permet de remplacer les marqueurs existants (définis par la propriété list-style-type) par une image personnalisée.

Il suffit de faire référence à l'image par la syntaxe :
list-style-image: url("image-puce.png")

Il faut bien prendre en compte la taille de l'image qui doit être adaptée à ce type de mise en forme (entre 10 et 15 pixels environ).



Propriétés pour le style list-style-image :




Propriété Définition Valeurs CSS
list-style-image Remplace le marqueur de la liste par une image personnalisée URL CSS 1


Exemple d'utilisation du style css list-style-image :





Exemple de liste avec une image personnalisée comme marqueur :

<ul style="list-style-image:url(http://www.startyourdev.com/css/exemples/puce-verte.png); width:200px;">
   <li style="padding:3px;">élément 1 de la liste</li>
   <li style="padding:3px;">élément 2 de la liste</li>
   <li style="padding:3px;">élément 3 de la liste</li>
   <li style="padding:3px;">élément 4 de la liste</li>
</ul>


Exemple de liste avec une image personalisée comme marqueur :

  • élément 1 de la liste
  • élément 2 de la liste
  • élément 3 de la liste
  • élément 4 de la liste




Background-color

La propriété background-color permet de définir une couleur d'arrière plan pour un élément donné. Cette couleur peut être définie par son nom ou par sa valeur hexadecimale.
Vous pouvez consulter le tableau complet des couleurs



Propriétés pour le style background-color :




Propriété Définition Valeurs CSS
background-color Défini une couleur de fond pour l'élément nom couleur
valeur rgb
valeur #hexa
CSS 1


Exemple d'utilisation du style css background-color :





<div style="width:400px; height:120px; border:solid 1px black;
   background-color:#dedede;">
   Exemple de fond avec la valeur #dedede
</div>

<div style="width:400px; height:120px; border:solid 1px black;
   background-color:steelblue; ">
   Exemple de fond avec la couleur steelblue
</div>



Exemple de fond avec la valeur #dedede

Exemple de fond avec la couleur steelblue




Style CSS background

La propriété background désigne le style que l'on peut appliquer à l'arrière plan d'un élément, allant de la définition d'une couleur de fond à l'association d'une image pouvant être positionnée ou répétée horizontalement ou verticalement.

Les propriétés CSS s'appliquant à l'arrière plan sont les suivantes :
- background-attachment
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size



Propriétés pour le style background :




Propriété Définition Valeurs CSS
background-attachment Indique si l'image utilisée comme arrière plan est fixe ou si comme c'est le cas par défaut elle reste visible lors du scroll sur la page fixed
scroll
inherit
CSS 1
background-color Défini une couleur de fond pour l'élément nom couleur
valeur rgb
valeur #hexa
CSS 1
background-image Défini une référence vers une image utilisée comme arrière plan qui sera par défaut positionnée dans le coin haut gauche de celui-ci URL CSS 1
background-position Détermine la position horizontale et verticale dans l'élément de l'image utilisée comme arrière plan qui est par défaut la partie supérieure gauche bottom
center
left
right
top
%
valeur
inherit
CSS 1
background-repeat Indique si l'image utilisée comme arrière plan doit être dupliquée sur toute la surface de l'élément, ce qui est le comportement par défaut no-repeat
repeat-x
repeat-y
CSS 1



Exemple d'utilisation du style css background

<div style="color:white;border:solid 1px black; width:500px; height:300px;
background:#dedede url(ll.univ-poitiers.fr/llappli/zGifz/001.gif) no-repeat center center;">
Définition d'une couleur de fond et affichage d'une image centrée en arrière plan de l'élément div
</div>
Résultat:
Définition d'une couleur de fond et affichage d'une image centrée en arrière plan de l'élément div


Style CSS border-radius

La propriété border-radius permet d'arrondir les angles de la bordure d'un élément. Il est possible de définir ce style de façon globale pour les quatre angles ( soit par une valeur unique pour les 4 angles soit par quatre valeurs spécifiques en partant de l'angle haut gauche pour finir avec l'angle bas gauche) ou de spécifier une valeur pour chacun d'eux :
    - border-top-left-radius
    - border-top-right-radius
    - border-bottom-left-radius
    - border-bottom-right-radius

Il est possible en utilisant ce style de réaliser des élément de forme circulaire en partant d'un élément de forme carré et en lui définissant un rayon valant la moitié de sa largeur (une division de 100 pixels sur 100 pixels avec un rayon de bordure de 50 pixels par exemple).

Même si la bordure est définie avec des angles arrondis, la propriété outline aura toujours un rendu rectangulaire.



Propriétés pour le style border-radius :




Propriété Définition Valeurs CSS
border-radius Défini la valeur du rayon de l'arrondi des angles d'un élément valeur (px, em ...)
%
CSS 3
border-top-left-radius Valeur de l'arrondi de l'angle supérieur gauche d'un élément valeur (px, em ...)
%
CSS 3
border-top-right-radius Valeur de l'arrondi de l'angle supérieur droit d'un élément valeur (px, em ...)
%
CSS 3
border-bottom-right-radius Valeur de l'arrondi de l'angle inférieur droit d'un élément valeur (px, em ...)
%
CSS 3
border-bottom-left-radius Valeur de l'arrondi de l'angle inférieur gauche d'un élément valeur (px, em ...)
%
CSS 3


Exemple d'utilisation du style css border-radius :





<div style="width:450px; height:60px; border-radius:10px; border:solid 3px green;
text-align:center; line-height:30px;">
   Angles arrondis avec un rayon de 10 pixels
   <br />et une bordure d'épaisseur 3 pixels
</div>

<div style="width:450px; height:200px; border-radius:10px 30px 60px 100px; border:solid 1px black;
    text-align:center; line-height:200px;">
   div arrondie avec une valeur pour chaque angle
</div>

<div style="width:200px; height:200px; border-radius:100px; border:solid 2px black;
   text-align:center; line-height:200px;">
   div cercle
</div>




Angles arrondis avec un rayon de 10 pixels
et une bordure d'épaisseur 3 pixels


div arrondie avec une valeur pour chaque angle


div cercle




Style CSS animation

La propriété css animation permet de gérer le paramétrage d'une animation. Elle est directement corrélée à la règle css @keyframes qui définie les étapes de l'animation. La propriété transform est également utile pour effectuer des animations (support de la rotation).
Actuellement chaque navigateur se base sur sa propre version de la propriété animate, ce qui fait beaucoup de duplication de code css :
- Chrome et safari utilisent les propriétés "-webkit-animation" et "@-webkit-keyframes"
- Firefox utilise les propriétés "-moz-animation" et "@-moz-keyframes"
- Opera utilise les propriétés "-o-animation" et "@-o-keyframes"
- Internet Explorer n'implémente pas encore les animations css
Animer un élément html avec le css se fait en associant à cet élément des infornations sur l'animation et en reliant la propriété "animation-name" au nom de la règle @keyframes à employer. D'autre part il faut impérativement spécifier une durée d'animation sans quoi celle-ci est valorisée par défaut à 0 et l'animation n'est pas lancée.
<style type="text/css">
#idElement{
position:relative; width:40px; height:40px;
border:solid 1px black; background-color:silver;
animation-name:monAmination; -webkit-animation-name:monAmination;
-moz-animation-name:monAmination; -o-animation-name:monAmination;
animation-duration:4s; -webkit-animation-duration:4s;
-moz-animation-duration:4s; -o-animation-duration:4s;
animation-iteration-count:10; -webkit-animation-iteration-count:10;
-moz-animation-iteration-count:infinite; -o-animation-iteration-count:10;
}
@keyframes monAmination{from {left:0px;} to {left:180px;}}
@-webkit-keyframes monAmination{from {left:0px;} to {left:180px;}}
@-moz-keyframes monAmination{from {left:0px;} to {left:180px;}}
@-o-keyframes monAmination{from {left:0px;} to {left:180px;}}
</style>
<div id="idElement">
</div>
Résultat:




Les propriétés CSS s'appliquant à l'animation d'un élément sont :
- animation-delay
- animation-direction
- animation-duration
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function



Propriétés pour le style animation :




Propriété Définition Valeurs CSS
animation-delay Détermine le délai à respecter avant de démarrer l'animation (en secondes ou millisecondes) durée :
##s
##ms
CSS 3
animation-direction Indique dans quel sens est joué l'animation lorsque celle-ci se répète (soit à l'identique soit en alternant de sens à chaque fin de cycle) alternate
normal
CSS 3
animation-duration Détermine la durée pour compléter l'animation (en secondes ou millisecondes) durée :
##s
##ms
CSS 3
animation-iteration-count Spécifie le nombre de fois que l'animation sera jouée avant de s'arrêter infinite
valeur
CSS 3
animation-name Permet d'asocier un nom en référence à la règle @keyframe qui défini les étapes de l'animation nom keyframe
none
CSS 3
animation-play-state Permet de mettre en pause ou de reprendre une animation paused
running
CSS 3
animation-timing-function Détermine la vitesse d'exécution de l'animation sur ses différentes parties (début milieu fin) cubic-bezier(val,val,val,val)
ease
ease-in
ease-out
ease-in-out
linear
CSS 3




Exemple d'utilisation du style css animation :

<style type="text/css">
/* Style pour l'animation de la div d'arrière-plan */
#animColorDiv{
animation-name: color-animation; -webkit-animation-name: color-animation;
-moz-animation-name: color-animation; -o-animation-name: color-animation;
animation-duration:10s; -webkit-animation-duration:10s;
-moz-animation-duration:10s; -o-animation-duration:10s;
animation-timing-function:linear; -webkit-animation-timing-function:linear;
-moz-animation-timing-function:linear; -o-animation-timing-function:linear;
animation-direction:alternate; -webkit--direction:alternate;
-moz-animation-direction:alternate; -o--direction:alternate;
animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite;
}
@keyframes color-animation{
0% {background-color:#FFFFFF;}
100% {background-color:#8F8F8F;}
}
@-webkit-keyframes color-animation{
0% {background-color:#FFFFFF;}
100% {background-color:#8F8F8F;}
}
@-moz-keyframes color-animation{
0% {background-color:#FFFFFF;}
100% {background-color:#8F8F8F;}
}
@-o-keyframes color-animation{
0% {background-color:#FFFFFF;}
100% {background-color:#8F8F8F;}
}
/* Style pour l'animation de la div se déplaçant */
#animDiv{
position:relative;
top:20px; left:20px;
width:50px; height:50px;
background-color:steelblue;
border:solid 1px grey; border-radius:25px;
animation-name: ex-animation; -webkit-animation-name: ex-animation;
-moz-animation-name: ex-animation; -o-animation-name: ex-animation;
animation-duration: 10s; -webkit-animation-duration: 10s;
-moz-animation-duration: 10s; -o-animation-duration: 10s;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite;
}
@keyframes ex-animation {
0% {left: 20px; top:20px; background-color:red;}
25% {left: 380px; top:20px; background-color:orange;}
50% {left: 380px; top:150px; background-color:yellow;}
75% {left: 20px; top:150px; background-color:green;}
100% {left: 20px; top:20px; background-color:red;}
}
@-webkit-keyframes ex-animation {
0% {left: 20px; top:20px; background-color:red;}
25% {left: 380px; top:20px; background-color:orange;}
50% {left: 380px; top:150px; background-color:yellow;}
75% {left: 20px; top:150px; background-color:green;}
100% {left: 20px; top:20px; background-color:red;}
}
@-moz-keyframes ex-animation {
0% {left: 20px; top:20px; background-color:red;}
25% {left: 380px; top:20px; background-color:orange;}
50% {left: 380px; top:150px; background-color:yellow;}
75% {left: 20px; top:150px; background-color:green;}
100% {left: 20px; top:20px; background-color:red;}
}
@-o-keyframes ex-animation {
0% {left: 20px; top:20px; background-color:red;}
25% {left: 380px; top:20px; background-color:orange;}
50% {left: 380px; top:150px; background-color:yellow;}
75% {left: 20px; top:150px; background-color:green;}
100% {left: 20px; top:20px; background-color:red;}
}
</style>
<div id="animColorDiv" style="width:450px; height:220px; border:solid 1px black;">
<div id="animDiv">
</div>
</div>
Résultat:


Différents curseurs


La propriété cursor permet de définir l'apparence qu'aura le pointeur de la souris lorsqu'il survolera l'élément html décrit par cette propriété. L'exemple le plus connu est le curseur en forme de main lorsque l'utilisateur passe sur un lien hypertexte.

De façon générale, les curseurs sont appliqués au survol des éléments, mais il est également possible de les déclarer sur des actions plus spécifique comme par exemple des déplacements.

Voici un rendu basique des différents curseurs :

curseurs



Propriétés pour le style cursor :




Propriété Définition Valeurs CSS
cursor Détermine l'apparence du curseur de la souris auto, all-scroll,
col-resize, crosshair,
default, e-resize
help, move, n-resize,
ne-resize, nw-resize,
no-drop,not-allowed,
pointer, progress,
row-resize, s-resize,
se-resize, sw-resize,
text, vertical-text,
w-resize, wait
CSS 2


Exemple d'utilisation du style css cursor :





Sélectionnez le type de curseur à appliquer au survol de l'élément :
<select onchange="ChangeCursorStyle(this.options[this.selectedIndex].value);">
   <option>auto</option>
   <option>all-scroll</option>
   ...
   <option>w-resize</option>
   <option>wait</option>
</select>


Visualisez le rendu du curseur au survol de l'élément ci-dessous :

<div id="BlocExemple" style="border:solid 1px black; width:500px; height:80px;">
</div>

le javascript associé est le suivant :

<script type="text/javascript">
function ChangeCursorStyle(valeur){
   document.getElementById('BlocExemple').innerHTML = 'curseur : ' + valeur;
   document.getElementById('BlocExemple').style.cursor = valeur;
}
</script>



Sélectionnez le type de curseur à appliquer au survol de l'élément :

Visualisez le rendu du curseur au survol de l'élément ci-dessous :