Onwebcreations.Net  
Onwebcreations.Net
 
Programmation
Services Gratuits
Codes Sources
Divertissements
   

  Le CSS : Cascading Style Sheets Haut de page


  Quelles sont les applications des CSS ? Haut de page

D'une manière générale, lorsque la définition de paramètres de mêmes natures et de mêmes valeurs se répètent systématiquement au sein d'un programme, ces paramètres ont très probablement un point commun. Il s'agit en quelque sorte d'une constante qui se répète au sein d'un programme. Si le programmeur désire changer la valeur de cette constante, il doit en modifier la valeur dans l'ensemble du programme. Cette tache est fastidieuse et source d'erreurs.

La centralisation des données consiste à regrouper les définitions des constantes réutilisées au sein du programme, en un seul fichier dédié à cet usage. Grâce à une instruction, tous les composants du programme peuvent appeler ce fichier à distance, et l'intégrer comme s'il faisait parti intégrante du code source. Une constante est alors définie qu'une seule fois dans le programme et la modification de sa valeur s'applique sur l'ensemble de l'application. C'est un gain de temps, d'efficacité, et élimine les bugs liés aux oublis.

C'est dans cette optique que le CSS a été conçu. Le terme de constante précédemment employé se voulait très général. En HTML, c'est la définition de la mise en forme de chaque bloc de texte qui se répète au sein d'un site Web. Les mises en forme des titres et des liens sont sans constemment redéfinies par la balise HTML <font>. Or, tous ces éléments ont un point commun. Selon la charte graphique, ils doivent être exactement de la même apparence. Il en va de même pour les sous titres, et paragraphes de texte. Qu'adviendra t-il si vous désirez changer l'apparence de tous vos textes et sous titres ? Vous devrez passer inévitablement par la remise en forme de l'ensemble de votre site Web manuellement.

Le CSS, ou les feuilles de styles en français, c'est la disparition de la balise <font>. Toutes les définitions de mises en forme sont centralisées dans un fichier d'extension .css, et inclues dans toutes les pages du site Web. Tous les titres de mêmes niveaux sont affectés d'une définition de mise en forme commune, appelée classe. Ainsi, la modification d'une valeur au sein de la feuille de style entraîne la modification de la mise en forme des éléments concernés sur le site.


  Une feuille de style externe Haut de page

Le fichier .CSS

Une feuille de style s'édite à l'aide du Bloc Notes de Windows, ou à l'aide de votre éditeur de pages Web, s'il est compatible. Créez alors un fichier d'extension .CSS.


Une feuille de Style s'édite sous Bloc Notes

L'inclusion de la feuille de style au document HTML

Ce qui fait la puissance des feuilles de styles, c'est bien sur l'inclusion du fichier CSS au sein d'un document Web ! Le code d'insertion se positionne dans la partie <head>.

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

La propriété SRC reçoit comme argument le chemin absolu ou relatif d'une feuille de style. Il est préférable de créer un répertoire prévu à cet effet, pour éviter de tout mélanger.


  Une feuille de style intégrée au document HTML Haut de page

Une feuille de style se définie dans la partie <head> d'un document HTML, de la manière suivante :

<style type="text/css">
...
</style>

Bien que l'incorporation d'une feuille de style dans un document HTML soit possible, l'opération doit être justifiée. En effet, le fait de définir une feuille de style au sein d'un document Web n'a pas de sens, puisque tous les avantages de la centralisation sont perdus.


  Les classes Haut de page

Qu'est-ce qu'une classe ?

Une feuille de style comprend une ou plusieurs classes. Il s'agit de la définition de mise en forme d'un texte. Par exemple, une classe portant le nom Titre, définie l'apparence des titres, une autre classe nommée SousTitre se chargera de définir l'apparence des sous titres. Il est théoriquement possible de créer un nombre illimité de classes par feuille de style.

Les classes implicites

Une classe implicite s'applique automatiquement sur un texte, et ne nécessite donc pas d'affectation dans le code HTML. Au sein d'une feuille de style, la classe implicite se définie de la manière suivante.


Une classe implicite

Le nom d'une classe implicite correspond au libellé d'une balise HTML. La mise en forme d'une classe implicite s'applique automatiquement sur le texte encadré par la balise du même nom.

 

p
{
...
}
p, ul, li
{
...
}
Classe s'appliquant sur le texte compris dans les balises <p> Classe s'appliquant sur le texte compris dans les balises <p>, ou <ul>, ou <li>

Les classes explicites

Une bibliothèque de classes implicites n'est pas suffisant pour mettre en forme la totalité d'un site Web. En effet, tous les paragraphes utilisant la même balise HTML <p> n'ont pas toujours la même mise en forme. Un paragraphe de citation apparaîtra en italique, tandis qu'un autre paragraphe signalant une information importante sera en gras et de couleur rouge. C'est pourquoi, il existe des sous classes, c'est à dire une différenciation de mise en forme au sein d'une même classe. Pour effectivement afficher un texte avec l'apparence définie au sein d'une sous classe, il faut affecter de manière explicite dans le code HTML, le nom de la sous classe correspondante. Si l'affectation n'est pas explicitement écrite au sein du code HTML, la mise en forme de la classe implicite va alors se mettre en situation.

 


Quelques classes explicites

 

Il est possible de créer des sous sous classes. Il faut comprendre ce système comme une arborescence, qui est théoriquement infinie en profondeur. Voici un exemple concret mettant cela en évidence.

p                     {}
p.citation            {}
p.citation.moliere    {}
p.citation.voltaire   {}
p.citation.racine     {}
p.important           {}
p.important.basse     {}
p.important.moyenne   {}
p.important.haute     {}

La classe p est générale. Les paragraphes de citation utiliseront la classe p.citation. Lorsqu'il s'agit d'une citation de Molière, nous utiliserons la classe p.citation.moliere. De manière analogue, lorsqu'il faudra mettre en avant un paragraphe important, nous utiliserons la classe p.important. S'il s'agit d'un paragraphe à importance moyenne, nous utiliserons p.important.moyenne.

Ce qui se trouve entre les accolades {} est bien sur réservé aux définitions de mise en forme, que nous aborderons ci après.


  Les propriétés des feuilles de styles Haut de page

Apparences et effets sur les caractères

Propriétés d'apparences des textes
Propriété Type de valeur Description
font-size:

Trois types possibles :

  • Valeur absolue en pixels

  • Pourcentages (%)

  • xx-small, x-small, small, medium, large,
    x-large, xx-large, larger, smaller

Taille des caractères.
font-family: Nom de la police de caractère Exemples : Verdana, Arial, Courier
font-weight:
  • normal, bold, bolder, lighter

  • 100, 200, 300, 400,
    500, 600, 700, 800, 900

Graisse de la police.
Exemple : bold = gras
font-style: Normal, Italic, Oblique Style de la police
color: Couleur hexadécimale ou Nom anglais : blue, red, green, etc. Couleur du texte
font-variant: Normal, Small-Caps Small-Caps désigne un texte en majuscules miniatures. Petites Capitales d'imprimerie.
direction: ltr, rtl Orientation du texte (Left To Right, ou Right to Left).
letter-spacing: normal, valeurs absolue en pixels Espacement entres les lettres
text-decoration: none, underline, overline, line-through Ajoute une décoration sur le texte.
underline : soulignement
overline : Soulignement de dessus
line-through : barré
text-indent: Valeur absolue en pixels, ou % Insère un retrait sur la première ligne de chaque paragraphe.
text-transform: none, capitalize, uppercase, lowercase Contrôle le type de lettre dans un texte.
uppercase : En majuscules
lowercase : En minuscules
capitalize : Première lettre de chaque mot en majuscule
white-space: normal, pre, nowrap Règle le comportement d'un texte face aux espaces blancs.
pre : équivalent à la balise <pre>, affichage formaté, exactement comme il apparaît dans le code source HTML.
nowrap : Force le texte à s'afficher sur une seule ligne, jusqu'au prochain <br>.

 

Positionnements et alignements

Propriétés des alignements
Propriété Type de valeur Description
text-align: left, right, center, justify Alignement horizontal
vertical-align: top, middle, bottom Alignement vertical (haut, milieu, bas)
clear: left, right, both, none Interdit l'affichage d'éléments autour de l'élément concerné.
float: left, right, none Règle le comportement d'un texte ou image au sein d'un autre objet.
position: static, relative, absolute, fixed Règle la position d'un élément.
visibility: visible, hidden, collapse Règle la visibilité d'un élément
display: none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
Règle le comportement d'affichage d'un élément.

 

Les marges

Propriétés des marges
Propriété Type de valeur Description
margin-left: Auto, valeur en pixels ou % Marge gauche
margin-top: Marge supérieure
margin-right: Marge droite
margin-bottom: Marge inférieure

 

La personnalisation des ascenseurs de défilement

 

Propriétés des ascenseurs de défilement

propriété

Type de valeur

Description

scrollbar-face-color:

Couleur hexadécimale ou
Nom anglais : blue, red, etc..

Arrière plan des boutons haut/bas et de l’ascenseur.

scrollbar-darkshadow-color:

Bordures (externes) haut et gauche des boutons haut/bas et de l’ascenseur.

scrollbar-shadow-color:

Couleur des flèches haut/bas (inactives).

scrollbar-highlight-color:

Bordures droite et bas des boutons haut/bas et de l’ascenseur.

scrollbar-3dlight-color:

Couleur des flèches haut/bas (actives).

scrollbar-track-color:

Bordures (internes) haut et gauche des boutons haut/bas et de l’ascenseur.

scrollbar-arrow-color:

Arrière plan de la zone de défilement de l’ascenseur.

 

 

La personnalisation de la souris

 

Propriétés de la souris

propriété

Type de valeur

Description

cursor: n-resize
ne-resize
e-resize
s-resize
se-resize
w-resize
sw-resize
nw-resize
crosshair
pointer
move
text
wait
help
hand
all-scroll
col-resize
row-resize
no-drop
not-allowed
progress
vertical-text
Apparence du curseur au survol du lien. Survolez les valeurs pour voir un aperçu.

 

Les arrières plan

 

Propriétés des arrières plan

propriété

Type de valeur

Description

background-color: Couleur hexadécimale ou
Nom anglais : blue, red, etc..
Couleur d'arrière plan
background-image: url("img/bg.jpg"); Image d'arrière plan
background-position: top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-[valeur en %] y-[valeur en %]
x-[valeur en px] y-[valeur en px]
Règle le point de positionnement d'une image d'arrière plan
background-repeat: repeat
repeat-x
repeat-y
no-repeat
Comportement de l'image d'arrière plan.
background-attachment: scroll
fixed
Comportement de l'arrière plan lors de l'utilisation des ascenseurs de défilement

 

 


  Application d'une classe au document HTML Haut de page

Le cas d'une classe implicite

La classe implicite s'applique sur une balise HTML du même nom.

La classe p s'applique sur le texte suivant :

<p> Texte </p>

 

Le cas d'une classe explicite

Comme présenté dans l'exemple des citations, l'application d'une sous classe mentionne le nom de la dernière sous classe utilisée.

La classe p.important.moyenne s'applique sur le texte suivant :
<p class="moyenne"> texte </p>

De même, la classe p.important s'applique sur le texte suivant :
<p class="important"> texte </p>

Le cas hybride : l'interligne

L'utilisation de ce cas est à éviter, car ne permettant pas d'utiliser toute la puissance des feuilles de styles. Son usage doit être justifié.

<font style="cursor: hand; text-decoration: underline;"> Texte </font>

Résultat : Texte


  Un bon usage des feuilles de styles Haut de page

La hiérarchisation des titres


Exemple de hiérarchisation des titres

Selon l'importance d'un site Web, on distingue plus ou moins les différents niveaux de titres. Dans tous les cas, le dernier niveau s'applique sur le paragraphe, c'est à dire le contenu réel du site, dépouillé des structures de navigation.

Utiliser une feuille de style externe

Les feuilles de styles expriment toute leur puissance lorsqu'elles sont externes, car permettant de centraliser toutes les définitions de mise en forme. Une feuille de style externe n'interdit pas une feuille de style interne. La feuille de style interne est prioritaire sur la feuille externe. Ainsi, il est possible d'appliquer des classes particulières sur une page particulière. Lorsqu'il s'agit d'un effet recherché, l'usage d'une feuille interne est pleinement justifié.

 

Un exemple concret

Voir un exemple concret

Télécharger l'exemple

 

 
    Haut de page
© Onwebcreations.Net : Programmation & Services Internet
Accessible aussi par : Services-Gratuits-Webmasters.com
Contacter le suppport technique
Internaute(s) actuellement sur le site.