Accueil    CSS    Déclaration des styles css
 



Déclaration des styles css Déclaration des styles css

Index des styles


Les styles CSS peuvent être appliqués de différentes façons aux éléments contenus dans un document html :
- avec l'emploi de l'attribut style d'une balise html
- en déclarant les styles dans la balise html <style>
- en créant une feuille de style dans un fichier .css
- avec l'utilisation du javascript de façon dynamique

Nous allons décrire ces différentes syntaxes à travers des exemples employant des styles simples.



Utilisation de l'attribut style :



L'emploi de l'attribut style permet de définir rapidement et intuitivement un style sur un élément html. La transformation est appliquée directement et la priorité des styles déclarés dans cet attribut est supérieure à celle des styles pouvant être définis dans la balise <style> ou dans une feuille de style externe.


<label style="color:silver; text-decoration:underline; font-weight:bold; font-size:14px;">
   Exemple de style appliqué dans la balise label
</label>



<div style="border:solid 1px black; background-color:silver; width:350px; padding:10px;">
   Exemple de style appliqué dans la balise div
</div>

Exemple de style appliqué dans la balise div


Utilsation de la balise <style> :



La balise <style> se déclare dans l'entête du document html, à l'intérieur de la balise <head>. On y défini l'ensemble des styles CSS qui seront appelés soit par les attributs "class", soit par référence aux attributs "id" des différents tags html du document.
Les styles faisant référence aux identifiants des balises html sont préfixés du caractère # suivi de l'identifiant de la balise.
Le style décrivant la balise suivante :
   <label id="id-lbl">exemple</label>
sera déclaré comme ceci :
   <#id-lbl {font-family:verdana; color:#dedede;}

Voici un exemple de dcoument complet mettant ces explications en pratique :


<html>
<head>
   <title>Exemple d'utilisation de la balise style</title>
   <style type="text/css">
   .texte-en-forme{
      font-family:tahoma;
      font-size:12px;
      color:blue;
   }

   #paragraphe-id{
      font-weight:bold;
      color:green;
   }
   </style>
</head>
<body>

<p class="texte-en-forme">Texte du paragraphe utilisant l'attribut "class"</p>


<p id="paragraphe-id">Texte du paragraphe utilisant l'attribut "id" : paragraphe-id</p>


</body>
</html>


Utilisation d'une feuille de style CSS :



L'utilisation des feuilles de style est la solution la plus employée lorsque l'on doit appliquer des styles sur plusieurs pages. Elle offre en effet la possibilité de centraliser la totalité des styles à un seul endroit et ainsi faciliter les modifications de ceux-ci lorsque celà devient nécéssaire.

la déclaration de la feuille de style se fait dans l'entête du document html, à l'intérieur de la balise <head>. l'attribut "href" fait référence au fichier css, de façon absolue ou relative.
Voici un exemple de déclaration de feuille de style :


<link rel="stylesheet" type="text/css" href="MaFeuilleDeStyle.css" media="screen" />


Utilisation du javascript :



Les styles css sont également accessibles par l'emploi du javascript. Celà signifie qu'il est possible de modifier de façon évènementielle les styles appliqués dans les documents html.

Avec l'utilisation de bibliothèques de script comme jQuery, il est possible de réaliser des animations et effet graphiques très rapidement et assez facilement en se basant sur ces accès javascript aux styles des éléments et en utilisant les propriétés du timeout.













Exemple d'animation :

Animation