BLOC DIV ET DÉCLARATION DE STYLE


Les nouvelles fonctionnalités css permettent de créer notamment un bloc correspondant à des spécifications définies par un style. Elles concernent le bloc lui-même (notamment dimensions) et le texte qu'il peut éventuellement contenir.

Par exemple, voilà un bloc de couleur jaune de dimension 400px de large et 200px de haut définissant du texte de dimension 22px.

<div style="width:400px; height:200px; background-color; font-size:22px;">
Mon texte ici 22 pixels
</div>

Mon texte ici 22 pixels


Les caractéristiques susceptibles d'être affectées au bloc sont innombrables. En voilà quelques-unes, parmi les plus importantes.

width (largeur du bloc)
height: (hauteur du bloc)
background-color: (couleur du bloc)
font-height: (hauteur de la ligne de texte)
font-size: (dimension police)
text-align: (justify, right, left, center)
font-weight: (bold gras) font-style: (italique: italic)
font-family (sans-serif, serif)
color: (couleur du texte)
padding: (espace entre le bord du cadre et le texte: padding-left, right, top, bottom)
margin: (espace autour du cadre: margin-left, right, top, bottom)

Si une caractéristique n'est pas notée, elle est intégrée par défaut. Par exemple, ci-dessous, aucune spécification de dimension n'a été indiquée pour la hauteur du bloc, c'est le texte à l'intérieur de la balise qui va la déterminer.

<div style="width:100px; background-color:yellow;">
Mon texte ici dans la balise div jaune
</div>


Mon texte ici dans le bloc div jaune



DÉCLARATION D'UN STYLE EN TÊTE D'UN FICHIER

Comme nous l'avons vu, un bloc div peut être défini par la rubrique style de la balise elle-même. Par exemple, notre bloc:

<div style="width:400px; height:200px; background-color:yellow; font-size:22px;">
Mon texte ici 22 pixels
</div>

Si l'on veut réutiliser le même bloc div au cours de la page web ou au cours d'une autre page du site, il est possible d'éviter d'avoir à le redéfinir. Ce style peut être défini en lui donnant un nom dans le head du fichier à l'intérieur d'une rubrique <;style>; en le nommant par exemple ici mondiv1 (bien remarquer le point nécessaire avant le nom).

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>mon titre</title>
<meta name="description" content="mon sujet">
<meta name="keywords" content="mot1,mot2">
<meta name="author" content="mon nom">
<link rel="stylesheet" type="text/css" href="monfichierstyle.css">

<style>

.mondiv1
{
width:150px;
background-color:yellow;
}

</style>

</head>


Ainsi, on peut faire appel en plusieurs fois au div défini précédemment de la manière suivante:

<div class="mondiv1">Première remarque</div>

<div class="mondiv1">Deuxième remarque</div>


ce qui donne:

Première remarque


Deuxième remarque



DÉCLARATION DE STYLES ET FICHIER CSS

Au lieu de déclarer des styles en début de fichier, on peut déclarer des styles dans un fichier texte nommé feuille de style ayant pour extension .css (comme pour un fichier de routines dans la plupart des langages de programmation). Cela permet d'utiliser les styles dans tous les fichiers du site. Par exemple, j'ouvre avec gedit un fichier texte que je nomme style_monsite.css.

À l'intérieur, je vais noter chaque style comme je l'avais fait précédemment en début de fichier:

.mondiv1
{
width:150px;
background-color:yellow;
}

.mondiv2
{
width:190px;
background-color:blue;
}

Pour que je puisse utiliser ces styles dans tous les fichiers de mon site (ou certains fichiers), je dois indiquer au début dans le head une commande indiquant au fichier la présence du fichier css. Dans notre exemple, nous aurons dans le head la ligne suivante:

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

Remarquons qu'il est possible de créer plusieurs fichiers css pour un site, et déclarer le fichier que l'on veut dans le head, néanmoins c'est une complication qu'il faut éviter.

L'intérêt majeur des styles n'est pas seulement, ni fondamentalement, d'éviter de répéter une déclaration de style, mais surtout de changer les caractéristiques d'un item particulier du site, titre, tableau, couleur de fond... Par exemple je choisis de mettre tous les titres en gras corps 18pt, puis je change d'avis, je veux les mettre en 20pt non gras. Il me suffit de changer le style dans le fichier css et tous les titres déclarés avec ce style seront changés immédiatement.

.montitre
{
font-size:18pt;
font-weight:bold;
}

devient

.montitre
{
font-size:20pt;
}

Traquenard Astuce Déclarer les styles dans un fichier .css est un avantage considérable pour la programmation. Malheureusement, il y a une contrepartie. On a vite fait d'accumuler un grand nombre de styles dont on ne sait plus le nom et le résultat associé, ce qui oblige à un report au fichier css. Il faut éviter de mutiplier inutilement les styles, par exemple un style pour le texte centré italique, un style pour le texte centré gras, un style pour le texte justifié normal... Il est souvent préférable de continuer d'utiliser les balises primaires <i>, <b>, notamment. De même, il est préférable souvent de répéter la déclaration de styles simples à chaque itération à l'intérieur de chaque page web.

Traquenard Il peut arriver qu'on change le style dans le css et qu'on ne voit pas la modification dans le fichier cible malgré la réactualisation de la page, notamment avec Chrome (préférer pour cette raison Firefox). En ce cas, on peut essayer de fermer le navigateur et de le rouvrir.

SOMMAIRE    SUITE