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 rapidementet 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 :
Utilisation de la balise <style> :
Exemple de TableauLa 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 :
< 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:
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>
|
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>
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:
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>
et une bordure d'épaisseur 3 pixels
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 :
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 :