Informations générales de développement numérique.

Informations MEZOTICAM - Activités générales : Plus de masque, mais restons vigilants. Les contraintes sanitaires obligent à un ralentissement des développements. | Guerre en Ukraine : Un conflit qui mène à une pénurie alimentaire et informatique. | Cybersécurité : La guerre en Ukraine nous montre combien il est important de renforcer la sécurité informatique.
Chiffre 1Chiffre 6Chiffre 3Chiffre 1Chiffre 2Chiffre 5
depuis le 15/05/2009
Lundi 4 Juillet 2022 | Saint Florent

 Mise en page avec CSS

Style Sheet

Le CSS (Cascading Style Sheets) en français Feuille de Style en Cascade, est language à lui seul dans la monde du Web ouvert.
Il a beaucoup évolué et en est à la version 3. Le CSS3 est en cours de standardisation.
Véritable language de feuille de style, il permet de formater des éléments des pages HTML, afin d'y appliquer des style de mise en page.


Dans cet exemple, dans tous les éléments 'p', qui délimitent les paragraphes, les caractères seront écrits en rouge.

p{
  color:red;
}

Le CSS suit une règle. Celle-ci comporte :

  • Un sélecteur
      Nom de l'élément HTML concerné par le style.
  • Une déclaration
      Règle déterminant le style.
  • Une propriété
      Mise en forme proprement dite.
  • La valeur de la propriété
      Accompagne la propriété pour sélectionner une valeur définie parmi d'autres. Le caractère ':' sépare les deux parties de la propriété.

La feuille de style se place entre les tags <head> et </head> de la page web. Deux options: ou bien les définitions sont dans cette zone directement, ou bien elles se trouvent dans un fichier à part. Elle est délimitée par une borne d'ouverture et une borne de fermeture:

<style>
   ... définitions ...
</style>

Avec un fichier externe, il suffira de donner le lien:

<link rel="stylesheet" type="text/css" href="lefichierstyle.css" >

Sélection de plusieurs éléments ...

p,a,h1{
  color:red;
}

... et ou plusieurs propriétés.

a{
  color:red;
  width:250px;
  border:1px solid #234526;
}

Note

Nul besoin des balises <style></style> dans le fichier externe. Seuls comptent les sélecteurs, les propriétés et leur valeur.

Différents types de sélecteurs

En plus des éléments HTML, il est possible de sélectionner d'autres éléments.

Nom Sélection Exemple
les Balises Tous les élément HTML p
Tous les <p>
Sélecteur ID Élément dont 'l'ID est déclaré #monID
sélectionne seulement <p id="monID">
Sélecteur de Classe Éléments d'une page contenant une classe donnée. .maClasse
sélectionne seulement <p class="maClasse">
Sélecteur d'attribut Éléments HTML contenant l'attribut désigné. a[title]
sélectionne l'attribut <a title="" >le lien</a>
Sélecteur de pseudo-classe Élément dans un état prècis. a:hover
sélectionne l'élément <a> seulement avec la souris au-dessus.

Note

La liste des sélecteurs contient bien plus que ceux présentés dans ce tableau et porte sur toutes les balises HTML.
Les propriétés peuvent être utilisées dans tous les cas, bien certaines restent spécifiques à des éléments précis.

Style Sheet

La feuille de style peut être déclaré aussi bien dans la page HTML qu'être définie dans un fichier externe.

Feuille interne

Entre les balises <head> et </head>

<style>
  p{
    text-align: justify;
    color: red;
    font-size: 12pt;
  }

  a{
    text-decoration: none;
  }
</style>

Feuille externe

<link rel="stylesheet" type="text/css" href="monstyle.css" >

Le fichier 'monstyle.css' doit se trouver à l'adresse du lien afin d'être utilisable.

Note

L'intérêt essentiel tient du fait que le fichier CSS externe peut contenir des milliers de lignes sans impacter sur la taille du fichier HTML source.