Lien vers la page MathJax dans HTML5

Lien vers la page HTML5 uniquement

Lien vers le fichier css de cette page style.css

Lien vers la page Positionner avec CSS3

Troisième partie: Les bases de CSS3

Avant-propos

Préalable: avoir bien intégré les bases de HTML5.
L'auteur s'efforce dans cette troisième partie de mettre en évidence les ajouts et modifications de style qu'apporte CSS3 à une page HTML.
Il y a 3 façons de procéder:

• La méthode la plus recommandée: on écrit dans un éditeur de texte (par exemple Gedit sous Linux ou Notepad++ sous Windows) un fichier de style indépendant de la page html: on l'enregistre de préférence dans le même dossier que la page html en lui donnant un nom avec l'extension .css par exemple style.css dans ce tutoriel. Dans ce cas il n'est pas possible d'accéder par un clic droit sur la page html au style de cette page.
  Attention, la syntaxe de CSS3 est différente de celle de HTML5.
  Il faut donc commencer par établir le lien entre la page html et le fichier css. On ajoute dans l'entête la ligne suivante:

  <link rel="stylesheet" href="style.css">
  

• Une autre méthode consiste à placer le code css dans l'entête de la page html entre des balises <style> et </style>
• Enfin une méthode peu recommandée consiste à placer du code css dans les balises encadrant le morceau de document à modifier. On écrit alors par exemple: <p style="options de style séparées par ; ">

Pour apporter des modifications (ou donner un style) à un paragraphe, il existe deux méthodes:

1. il faut d'abord placer un repère dans la balise d'entrée du paragraphe: <p class="nom_du_repère">. Ensuite, dans le fichier css, on écrit .nom_du_repère{options séparées par ;}. Ce repère peut être placé dans plusieurs balises.
2. il faut d'abord placer un repère dans la balise d'entrée du paragraphe: <p id="nom_du_repère">. Ensuite, dans le fichier css, on écrit #nom_du_repère{options séparées par ;} . Ce repère ne peut être placé que dans une seule balise.

Pour apporter des modifications (ou donner un style) à un mot ou un groupe de mots dans un paragraphe, il faut encadrer le mot par des balises <span> et </span> et placer un repère class ou id dans la balise p,h1 {options séparées par ;}2

Pour apporter des modifications (ou donner un style) à un bloc contenant un ensemble de paragraphes, titres, images, il faut encadrer le bloc par des balises <div> et </div> et placer un repère class ou id dans la balise <div>

On peut aussi vouloir apporter des modifications (ou donner un style) à l'ensemble des paragraphes. Dans le fichier css, on écrit p{options séparées par ;}. On peut procéder de la même façon avec les titres...Si par exemple on veut le même style pour les titres h1 et les paragraphes, on écrira:p,h1 {options séparées par ;}

Remarques:

• *{options séparées par ;} applique le style à tout le document
• h3,em {options séparées par ;} applique le style au contenu des titres h3 et des mots entre balises <em> et </em> tandis que h3 em {options séparées par ;} l'applique qu'aux em inclus dans h3
• a[title]{options séparées par ;} applique le style à toute les balises a contenant l'attribut title

Quelques exemples d'options: {font-size:14px;color:blue;font-family:Verdana;text-align:justify;}

/* commentaire dans le fichier css */

Les couleurs

Il y a au moins 3 méthodes pour coder une couleur:

1. On peut écrire en option dans le fichier css {color:white, black, blue, red, yellow, teal, aqua, green, olive, silver, gray, maroon, lime, fuschia, navy ou purple;}
2. Ou un nombre en hexadécimal de #000000 (noir) à #FFFFFF (blanc)
3. Ou encore rgb(0 à 255, 0 à 255, 0 à 255)
4. On peut en ajouter une quatrième rgba(décimal de 0 à 1, 0 à 1, 0 à 1, 0 à 1). Il s'agit de pourcentages respectivement de rouge, vert et bleu. Le dernier représente la transparence.

La couleur du fond du document

Elle peut être définie dans le fichier css de la façon suivante:
body{background:le code de la couleur;} ou *{le code de la couleur;}
Le code css pour la couleur de cette page html est #FFFFAA

La couleur du texte

Si on veut que tous les paragraphes aient la même couleur, il suffit d'écrire dans le fichier css
p{color:le code de la couleur;}

Si on veut que tous les titres de niveau h2 aient la même couleur, il suffit d'écrire dans le fichier css
h2{color:le code de la couleur;}

Si on veut que la couleur ne soit affectée que dans un seul morceau du document, il faut, dans le fichier html, ajouter un repère dans la balise du morceau class="nom du repère" ou id="nom du repère" et dans le fichier css respectivement
.nom_du_repère{color:code de la couleur;} ou #nom_du_repère{color:code de la couleur;}

Surligner du texte

La balise html mark permet de surligner un morceau de texte.
On peut aussi le faire dans le fichier css avec l'option {background:code de la couleur;} placée par exemple dans la balise entrante span qui encadre du texte

Dans l'exemple suivant, la balise entrante du paragraphe html est: <p class="ex1">. Et le fichier css contient le code .ex1{color:red;background:lime}

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

La police

Pour que l'ensemble du texte soit écrit dans une police, dans le fichier css:
body ou *{font-family:nom_de_la_police entre guillemets s'il y a des espaces dans le nom;}. Il est possible d'indiquer plusieurs polices, séparées par des virgules pour le cas où celle indiquée en premier n'est pas installée sur l'ordinateur de l'utilisateur

Comme pour la couleur, il est possible d'avoir une police spécifique entre des balises avec class ou id dans la balise entrante

L'alignement du texte

Par défaut le texte est aligné à gauche. Il est possible de l'aligner à droite, de le centrer ou de le justifier avec respectivement les codes css suivants:{text-align:right ou center ou justify}

La taille des caractères

Elle peut s'exprimer de deux façons:

• par le code css {font-size:small,xx-small,x-small,medium,large,x-large,xx-large} sachant que medium est la taille normale
• par une valeur affectée d'une unité: {font-size:valeur en px pixels ,cm,mm,em,ex}. 1em et 1ex se définissent comme en LaTeX, respectivement la hauteur d'une minuscule m ou d'une majuscule X de la police courante.

La mise en évidence des caractères

Le code html prévoit quelques mises en évidence sans css: avec les balises em pour un changement de forme ou avec les balises strong pour la mise en gras. Il est possible de réaliser cela avec du code css et de disposer d'autres possibilités:

Le code css {font-style:italic} pour mettre en italique
Le code css {font-style:oblique} pour mettre en caractères penchés
Le code css {font-weight:bold} pour mettre en caractères gras

Pour mettre un trait sous un morceau de texte, on peut procéder ainsi:
dans le fichier html, placer le morceau de texte entre des balises span, ajouter un repère dans la balise entrante par exemple id=id1, et dans le fichier css ajouter #id1{text-decoration:underline}

Pour ajourer un trait au dessus, l'option devient {text-decoration:overline}

Pour barrer, l'option est {text-decoration:line-through}

Pour faire clignoter le morceau de texte sous Mozilla Firefox, l'option est {text-decoration:blink}

Les bordures

Les différentes bordures

Il y a différents modèles pour encadrer du texte, avec choix de l'épaisseur du trait, de sa couleur. Voici quelques exemples:

code css {border:1mm red solid;border-radius:10px}

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

code css {border-bottom:4px navy dotted}

Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

code css {border-left: 5px maroon double}

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

code css {border-top: 5px fuchsia dashed}

Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

{border:2px black solid;box-shadow: 6px 6px 0px black;color:black;text-shadow: 2px 2px 4px green;}

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Les marges autour des bordures

Les effets

Au survol de la souris

En encadrant un morceau de texte avec des balises <a> et </a>, il est possible de créer uneffet au survol de la souris sur ce morceau de texte. Par exemple avec le code css suivant:
a{text-decoration: none;color: red;font-style: italic;}
a:hover{text-decoration: underline;color: green;}
le morceau de texte rouge devient vert et souligné au passage de la souris.

Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Au clic de souris