HTML5 et CSS3
Ce cours condensé est issu d'un tutoriel dont l'auteur n'est autre que le créateur du Site du Zéro.
Bon courage dans l'écriture de votre première page web.
CSS3 - La mise en formeRappel concernant le chapitre précédent :
Si vous avez suivi scrupuleusement la page 1, votre fichier style_test.css doit contenir actuellement le code suivant :
.orange /* l'appel d'un attribut class commence par un point, celui d'un attribut id commence par un # */
{
color: #FFA500; /* Couleur orange exprimée en valeur hexadécimal, #FFA500 = nuance d'orange */
}
.introduction /* l'appel d'un attribut class commence par un point, celui d'un attribut id commence par un # */
{
color: rgb(183,26,194); /* Une couleur peut s'exprimer au format rgb, rgb(183,26,194)= nuance de violet */
width: 750px; /* Largeur du bloc paragraphe 750 pixels */
height: 45px; /* Hauteur du bloc paragraphe 45 pixels */
overflow: auto; /* Affichage à droite de l'ascenseur à l'initiative du navigateur, la hauteur du paragraphe dépassant 45 pixels */
word-wrap: break-word; /* Les mots trop larges seront coupés et contenus à l'intérieur du bloc paragraphe */
}
em
{
color: #2DBD47; /* Couleur verte exprimée en valeur hexadécimal, #2DBD47 = nuance de vert */
}
Votre page_test.html doit montrer du texte de couleur orange, violette et verte ainsi qu'un ascenseur. Si Ok, continuons de modifier le style de notre page de test avec des propriétés CSS complémentaires.
1 - Donner la couleur marron au texte des paragraphes à l'aide de la propriété color
p
{
color: maroon; /* Autres valides : white - silver - gray - black - red - lime - green - yellow - olive - blue - navy - fuchsia - purple - aqua - teal */
}
1.1 - Donner la couleur verte aux titres de niveau h5 et aux textes balisés avec em ( italique par défaut )
h5, em
{
color: #2DBD47; /* Une couleur peut s'exprimer également en hexadécimal, #2DBD47 = nuance de vert */
}
1.2 - Donner la couleur violette á la class="introduction" ( déjà traité en page 1 )
L'appel depuis un fichier CSS d'un attribut class commence par un point, celui d'un attribut id commence par un #
.introduction
{
color: rgb(183,26,194); /* Une couleur peut s'exprimer également au format rgb, rgb(183,26,194)= nuance de violet */
}
Si vous vous emmêlez les pinceaux entre class et id retenez que deux balises différentes ou non peuvent avoir le même nom d'attribut class.
Un nom d'attribut id doit en revanche être unique dans la page HTML.
1.3 - Donner la couleur orange à la class="orange" ( déjà traité en page 1 )
.orange
{
color: #FFA500; /* Nuance d'orange */
}
2 - Donner une taille à une police de caractères à l'aide de la propriété font-size
Il est déconseillé pour des raisons d'adaptation aux différentes tailles d'écran d'utiliser des valeurs absolues exprimées en pixels :
- Exemple : font-size: 16px;
Il vaut mieux privilégier des valeurs relatives telles que ci-dessous :
• xx-small = minuscule ; • x-small = très petit ; • small = petit ; • medium = moyen
• large = grand ; • x-large = très grand ; • xx-large = gigantesque
- Exemple : font-size: medium;
Cette technique a un défaut : il n'y a que sept tailles disponibles (car il n'y a que sept noms).
Heureusement, il existe d'autres moyens. L'un d'eux consiste à indiquer la taille en « em ».
• Si vous écrivez 1em, le texte a une taille normale.
• Si vous voulez grossir le texte, vous pouvez inscrire une valeur supérieure à 1, comme 1.3em.
• Si vous voulez réduire le texte, inscrivez une valeur inférieure à 1, comme 0.8em.
p
{
color: maroon;
font-size: 0.8em; /* Une taille de 0.8em sera appliquée sur les paragraphes de la page */
}
3 - Donner un choix de polices de caractères au corps de la page ( body ) à l'aide de la propriété font-family
body
{
font-family: 'Trebuchet MS', Arial, sans-serif; /* Mettre entre guillemets les polices dont le nom contient des espaces */
}
En général, il est bien d'indiquer un choix de trois ou quatre polices (+ serif ou sans-serif) afin de s'assurer qu'au moins l'une d'entre elles aura été trouvée sur l'ordinateur du visiteur.
4 - Donner un choix de style aux polices de caractères pour les titres h2 à l'aide de la propriété font-style
h2
{
font-style: italic; /* Les choix possibles sont italic, oblique, normal */
}
5 - Supprimer la mise en gras par défaut des titres h2 à l'aide de la propriété font-weight
h2
{
font-style: italic;
font-weight: normal; /* Valeurs possibles : bold, normal */
}
6 - Autres propriétés disponibles
text-decoration qui peut prendre les valeurs :
• underline : souligné
• line-through : barré
• overline : ligne au-dessus
• blink : clignotant. Ne fonctionne pas sur tous les navigateurs (Internet Explorer et Google Chrome, notamment).
• none : normal ( valeur par défaut ).
text-align qui peut prendre les valeurs :
• left : le texte sera aligné à gauche (c'est le réglage par défaut).
• center : le texte sera centré.
• right : le texte sera aligné à droite.
• justify : le texte sera « justifié ». Justifier le texte permet de faire en sorte qu'il prenne toute la
largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont toujours justifiés.
float affiche une image flottante qui peut prendre les valeurs :
• left : l'élément flottera à gauche.
• right : l'élément flottera… à droite.
Téléchargez une image de tux au format png ( manchot mascotte officielle de Linux ), enregistrez la en tux.png dans le dossier Images.
Code HTML :
<p>- Afficher une image flottante avec la propriété float</p>
<p><img src="../Images/tux.png" class="imageflottante" alt="Image flottante" />
Ceci est un paragraphe écrit à la suite de l'image et qui l'habillera car l'image est flottante.
</p>
Code CSS associé :
.imageflottante
{
float: left; /* Image flottante à gauche du texte */
}
Résultat >>
- Afficher une image flottante avec la propriété float
Ceci est un paragraphe écrit à la suite de l'image
et qui l'habillera car l'image est flottante.
clear pour démarrer un paragraphe en dessous d'une image flottante et non plus à côté. La propriété clear peut prendre les valeurs suivantes :
• left : le texte se poursuit en-dessous après un float: left;
• right : le texte se poursuit en-dessous après un float: right;
• both : le texte se poursuit en-dessous, que ce soit après un float: left; ou après un float: right;.
Code HTML :
<p class="dessous"><br />clear pour démarrer un paragraphe en dessous d'une image flottante et non plus à côté. La propriété clear peut prendre les valeurs suivantes :<br />
• left : le texte se poursuit en-dessous après un float: left;<br />
• right : le texte se poursuit en-dessous après un float: right;<br />
• both : le texte se poursuit en-dessous, que ce soit après un float: left; ou après un float: right;.
</p><br />
Code CSS associé :
.dessous
{
clear: both; /* Pour écrire le texte en dessous d'un paragraphe incluant la propriété float */
}
Background-color ou couleur de fond dont les valeurs peuvent comme la propriété color s'exprimer par un nom, en hexadécimal, en rgb .
body
{
font-family: 'Trebuchet MS', Arial, sans-serif;
background-color: #CCCCCC; /* Fond gris */
}
background-image pour afficher image de fond dont la valeur doit contenir url("chemin_image") et background-attachment pour fixer ou non celle-ci.
Créez une image de taille 128x128 pixels, appliquez la couleur de fond #CCCCCC, ajoutez un demi-trait rouge en haut et en bas de l'image et enregistrez la en fondgristraitrouge.png dans le dossier Images.
body
{
font-family: 'Trebuchet MS', Arial, sans-serif;
background-color: #CCCCCC;
background-image: url("../Images/fondgristraitrouge.png"); /* L'image s'affiche en mosaique par défaut */
background-attachment: fixed; /* fixed : l'image de fond reste fixe ; scroll : l'image de fond défile avec le texte (par défaut). */
}
backbround-repeat précise la façon dont l'image sera affichée :
• no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.
• repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.
• repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.
• repeat : le fond sera répété en mosaïque (par défaut).
body
{
font-family: 'Trebuchet MS', Arial, sans-serif;
background-color: #CCCCCC;
background-image: url("../Images/fondgristraitrouge.png");
background-attachment: fixed;
background-repeat: repeat-x; /* Précise la façon dont l'image sera affichée, en mosaique ou non */
}
background-position indique ou sera affichée l'image; valeurs :
• top : en haut ; • bottom : en bas ; • left : à gauche ;
• center : centré ; • right : à droite.
Les valeurs peuvent également s'exprimer en pixel ( background-position: 100px 250px; ) soit 100 pixels à partir de la gauche et 250 pixels à partir du haut.
body
{
font-family: 'Trebuchet MS', Arial, sans-serif;
background: #CCCCCC url("../Images/fondgristraitrouge.png") fixed repeat-x center; /* Image centrée, Valeurs de background combinées */
}
Depuis CSS3, il est possible de donner plusieurs images de fond à un élément. Pour cela, il suffit de séparer les déclarations par une virgule, comme ceci :
body
{
font-family: 'Trebuchet MS', Arial, sans-serif;
background: url("../Images/tux.png") fixed no-repeat center right, url("../Images/fondgristraitrouge.png") fixed repeat-x center; /* Affichage de 2 images */
background-color: #CCCCCC; /* Fond gris commun aux 2 images */
}
Note : La première image de la liste sera placée par-dessus les autres. Attention donc, l'ordre de déclaration des images a son importance : si vous inversez tux.png et fondgristraitrouge.png dans le code CSS précédent, vous ne verrez plus tux.png !
opacity permet d'indiquer le niveau d'opacité (c'est l'inverse de la transparence). Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur de 0.6, votre élément sera opaque à 60%… et on verra donc à travers !
body
{
font-family: 'Trebuchet MS', Arial, sans-serif;
background: url("../Images/tux.png") fixed no-repeat center right, url("../Images/fondgristraitrouge.png") fixed repeat-x center;
background-color: #CCCCCC;
opacity: 0.97; /* Transparence : valeurs possibles de 0 à 1 */
}
rgba permet également d'appliquer de la transparence à un élément de la page ( non utilisée dans notre cas, conservez la propriété opacity ).
body
{
font-family: 'Trebuchet MS', Arial, sans-serif;
background: url("../Images/tux.png") fixed no-repeat center right, url("../Images/fondgristraitrouge.png") fixed repeat-x center;
background-color: rgba(204,204,204,0.97); /* Le quatrième paramètre lié à la transparence doit avoir une valeur située entre 0 et 1 */
}
border offre un large choix de bordures pour décorer votre page.
Les types applicables sont :
◦ none : pas de bordure (par défaut)
◦ solid : un trait simple
◦ dotted : pointillés
◦ dashed : tirets
◦ double : bordure double
◦ groove : en relief
◦ ridge : autre effet relief
◦ inset : effet 3D global enfoncé
◦ outset : effet 3D global surélevé.
Vous pouvez ajouter une largeur de trait exprimée en pixels et une couleur comme vu précédemment.
Il est également possible d'utiliser des bordures différentes en fonction du côté (haut, bas, gauche ou droite)
• border-top : bordure du haut
• border-bottom : bordure du bas
• border-left : bordure de gauche
• border-right : bordure de droite
h2
{
font-style: italic;
font-weight: normal;
border: 3px blue dashed; /* Bordure générale 4 côtés, d'une largeur de 3 pixels, de couleur bleue et en pointillé */
border-left: 2px solid black; /* 2 pixels au lieu de 3 sont attribués à la bordure de gauche, le pointillé est remplacé par du continu */
border-right: 2px solid black; /* 2 pixels au lieu de 3 sont attribués à la bordure de droite, le pointillé est remplacé par du continu */
}
border-radius permet d'obtenir des bordures arrondies.
Il suffit d'indiquer la taille (« l'importance ») de l'arrondi en pixels :
h2
{
font-style: italic;
font-weight: normal;
border: 3px blue dashed;
border-left: 2px solid black;
border-right: 2px solid black;
border-radius: 10px; /* Bordure arrondie */
}
On peut aussi préciser la forme de l'arrondi pour chaque coin. Dans ce cas, indiquez quatre valeurs : border-radius: 10px 5px 10px 5px; .
box-shadow ajoute une ombre aux boites.
La propriété box-shadow s'applique à tout le bloc et prend quatre valeurs dans l'ordre suivant :
1. le décalage horizontal de l'ombre
2. le décalage vertical de l'ombre
3. l'adoucissement du dégradé
4. la couleur de l'ombre.
article h2
{
font-style: italic;
font-weight: normal;
border: 3px blue dashed;
border-left: 2px solid black;
border-right: 2px solid black;
border-radius: 10px;
box-shadow: 6px 6px 6px black; /* Ombre noire projetée par la bordure du titre */
}
Note : Il faudra écrire une version -webkit-box-shadow pour que cela fonctionne sur les navigateurs Android
text-shadow ajoute une ombre aux textes.
article h2
{
font-style:italic;
font-weight:normal;
border: 3px blue dashed;
border-left: 2px solid black;
border-right: 2px solid black;
border-radius: 10px;
box-shadow: 6px 6px 6px black;
text-shadow: 1px 1px 2px blue; /* Ombre bleue projetée par le texte du titre - Reconnue à partir d'IE10 pour Microsoft */
}
hover permet des actions lors du survol des éléments avec la souris.
a:hover /* Apparence au survol des liens, hover peut être utilisé avec n'importe quelle balise */
{
text-decoration: none;
color: #F0761E; /* Couleur du texte, Nuance d'orange */
}
active permet d'appliquer un style particulier au moment du clic. En pratique, il n'est utilisé que sur les liens.
a:active /* Quand le visiteur clique sur le lien */
{
background-color: black; /* le fond du lien deviendra noir au moment du clic */
}
visited applique un style à un lien vers une page qui a déjà été vue.
a:visited
{
color: #9A2499; /* Appliquer une couleur violette */
}
Suite...
