Retourner à la page d'accueil de TJS

Les feuilles de style CSS

Les versions 4 et + des navigateurs respectent les normes CSS (Cascading Style Sheet, feuille de style).
Les feuilles de style permettent un gain de temps en développement et en maintenance de page mais sont peu connues.
Même s'il ne s'agit pas de javascript, je pense que cet article est utile.
Sommaire de la page :
1 - La création de style
2 - Les feuilles de style externes
3 - Les propriétés de style
       - Les styles de polices
       - Les styles de textes
       - Les arrières-plans
       - Le positionnement
       - L'encadrement

1 - La création de style

La déclaration de style se fait dans l'entête de la page, encadrée par les balises <STYLE> et </STYLE>.
Il y a 3 possibilités pour affecter un style :
  - modifier le style d'une balise existante
  - créer une nouvelle classe de style
  - affecter l'attribut style

Les balises existantes
Voici la syntaxe pour affecter la police arial en 12 points à toutes les cellules des tableaux d'une page.
Toutes les propriétés de style sont détaillées dans le dernier paragraphe.
   <HTML><HEAD>
   <STYLE>
      TD {font-family:arial;font-size:12pt}
   </STYLE>
   </HEAD>
   <BODY>
      Ici le corps de la page
   </BODY></HTML>

Ici, toutes les cellules TD auront comme style par défaut Arial 12pt.
On peut modifier ainsi toutes les balises existantes.

Le cas particulier de la balise de lien A
La balise <A> est particulière, car elle peut être dérivée selon l'action du visiteur. On obtient ainsi 3 balises A.
   A {text-decoration:none}
   A:hover {text-decoration:underline}
   A:active {color:red}
   A:visited {color:green}

Avec cette déclaration, le texte de lien :
  - est souligné au passage de la souris,
  - devient rouge sur un clic,
  - reste vert pour indiquer que ce lien a été visité.

ATTENTION : Netscape 4.X ne supporte pas cette fonctionnalité. Plus généralement, il n'est pas possible de changer le style d'un objet HTML une fois la page chargée dans Netscape.

Création de classes
Modifier les balises existantes n'est pas suffisant quand il s'agit d'affecter un style à une partie de texte. Par exemple dans cette page, les parties de code sont en courier new vert, grâce à la classe de style "code" qui est déclarée ainsi :
   <HTML><HEAD>
   <STYLE>
      .code {font-family:courrier;color:green}
   </STYLE>
   </HEAD>

Le point devant code indique la création d'une nouvelle classe appelée code.

Pour affecter ce style à une portion de texte, on écrit :
   <SPAN class="code">texte mis en forme</SPAN>
La balise <SPAN> permet d'affecter à un groupe de mot une classe de style.

Il est aussi possible d'affecter ce style à une balise existante. Pour donner le style courier new vert à une cellule de tableau, on écrit :
   <TD class="code">cellule en police courrier vert</TD>

Affecter l'attribut style
Il n'est pas indispensable de créer une classe de style pour affecter un style à un objet. Par exemple :
   <SPAN style="font-family:courier;color:green">Texte mis en forme</SPAN>

L'attribut style d'une balise reçoit les propriétés de style.
Il est toutefois préférable de déclarer une classe pour regrouper la mise en forme.


2 - Les feuilles de style externes

Nous avons vu jusqu'ici comment affecter un style à une page, ce qui implique de recopier la déclaration dans toutes les pages et rend les mises à jour longues et périlleuses.
Il est possible de regrouper la déclaration des styles dans un fichier externe et de l'appeler dans toutes les pages du site. La maintenance est accélérée et toutes les pages du site sont homogènes.

Le fichier externe
L'extension d'un fichier de feuille de style est toujours .css
Le fichier css contient uniquement l'intérieur des balises <STYLE>.
Voici un exemple de fichier de style appelé style.css :
   /* Ceci est un commentaire */
   TD {font-family:arial;font-size:12pt}
   .code {font-family:courrier;color:green}

Le fichier style.css ne contient pas les balises <STYLE>.
Comme en javascript, les commentaires sont marqués par // ou /* */.

L'intégration du fichier externe
Une ligne dans l'entête suffit pour appeler le fichier de style dans une page :
   <HTML><HEAD>
      <LINK rel="StyleSheet" type="text/css" href="style.css">
   </STYLE>
   </HEAD>

La balise <LINK> fait un lien entre la page en cours et le fichier de style externe.


3 - Les propriétés de style

Nous avons vu comment déclarer les styles dans une page. La norme CSS a prévu de nombreuses propriétés pour les différents objets HTML. Toutes ces propriétés ne sont pas prises en compte dans tous les navigateurs. Netscape 4.X en particulier est assez en retard par rapport à Internet Explorer 4 et 5, qui lui-même ne respecte pas toutes les normes.

Les propriétés de police
Normes respectées par Internet Explorer et Netscape.
Propriété Signification Valeurs possibles
font-size Hauteur de police en points ou pixels font-size:12px
font-size:10pt
font-family Nom de police font-family:arial,verdana
font-family:sans serif
font-weight Epaisseur de la police (gras) font-weight:bold
font-weight:normal
font-style Style de police (italic) font-style:italic
font-style:normal
color Couleur de police color:green
color:#FFCC00

Les propriétés de texte
Normes respectées par Internet Explorer et Netscape.
Propriété Signification Valeurs possibles
text-height Hauteur de ligne en points ou pixels text-height:12px
text-decoration Attribut de soulignement text-decoration:overline
text-decoration:line-through
text-decoration:underline
text-decoration:none
text-align Alignement de paragraphe (balise P)

text-align:left

text-align:right

text-align:center

text-indent Indentation de paragraphe (balise P)

text-indent:25px

text-indent:-15px

text-transform Transformation des majuscules text-transform:capitalize
text-transform:uppercase
text-transform:lowercase

Les propriétés d'arrière-plan
Seul Internet Explorer 4 et 5 permet de choisir une image d'arrière plan.
Propriété Signification Valeurs possibles
background Image d'arrière-plan background:image.gif
background-color Couleur d'arrière-plan background-color:black

Les propriétés de positionnement
Netscape 4.X a un gestion particulière des propriétés de positionnement.
Propriété Signification Valeurs possibles
clip Clipping clip:auto
width Largeur de la zone width:auto
width:150
height Hauteur de la zone height:auto
height:100
top Ordonnée du coin supérieur gauche top:10
left Abscisse du coin supérieur gauche left:400
overflow Recouvrement overflow:clip
overflow:scroll
overflow:none
position Type de positionnement position:absolute
position:relative
position:static
visibility Visibilité visibility:hidden
visibility:visible

Les propriétés d'encadrement
Aucune de ces propriétés n'est reconnue par Netscape 4.X
Internet Explorer respecte presque complètement l'affichage de ces propriétés.
Propriété Signification Valeurs possibles
margin-top Marge du haut en pixels margin-top:10
margin-right Marge du bas en pixels margin-right:15
margin-bottom Marge du haut en pixels margin-bottom:15
margin-left Marge de gauche en pixels margin-left:10
margin Groupement des 4 marges haute, droite, bas et gauche margin:10,15,15,10
padding-top Espacement en haut padding-top:10
padding-right Espacement à droite padding-right:10
padding-bottom Espacement en bas padding-bottom:10
padding-left Espacement à gauche padding-left:10
padding Groupement des espacements en haut, à droite, en bas et à gauche padding:10,10,10,10
border-style Style de contour none, solid, double, groove, ridge, inset, outset
border-color Couleur de contour border-color:red
border-width Largeur de contour border-width:3px
thin, medium, thick
border-left-width Epaisseur du trait de contour gauche border-left-width:thin
border-right-width Epaisseur du trait de contour droit border-right-width:medium
border-top-width Epaisseur du trait de contour haut border-top-width:thick
border-bottom-width Epaisseur du trait de contour bas border-bottom-width:0px
float Flottaison du bloc
A éviter
float:right
float:left

Lire aussi l'introduction aux normes du W3C

Chercher une fonction, un objet, ...

Le 20/11/2017 08:27:10 sur php7 en 14.55 ms