Easy-Micro

LANGAGE Langage CSS
Définition du CSS

Qu'est-ce que le CSS ?

CSS signifie Cascading Style Sheet, soit feuilles de style en cascade. Les feuilles de style sont un complément direct au HTML. Il s'agit d'un langage pour définir les propriétés du format de votre feuille Html. Le but des feuilles de style consiste à associer différents styles soit aux marqueurs Html, soit en créant son propre style. En utilisation optimale, c'est un document à part entière (par exemple: mon_style.css) qui contient tous les styles de votre site Internet.

Pour mieux vous rendre compte de l'utilisation des feuilles de style dans cette page, désactivez son css puis activer à nouveau son css et actualisez l'affichage de cette page.

CSS PRINCIPE DE BASE

  • Le but des feuilles de style consiste à associer différents styles aux marqueurs Html. Habituellement, aux marqueurs comme h1 (heading 1 : titre 1), <b> (caractère gras) et <p> (paragraphe) correspond un style bien défini. Les feuilles de style offrent donc la possibilité de modifier les styles prédéfinis à l'aide de règles dont voici un exemple:

     h1 { color: blue }

    CSS La règle ci-dessus assigne la couleur bleue au marqueur h1. Ainsi, tous les titres de niveau 1 s'afficheront dorénavant en bleu. Une règle de style comporte deux parties :
    • le sélecteur (h1 dans notre exemple)
    • la déclaration ( { color: blue } ). La déclaration se décompose à son tour en deux,
      • la propriété (color)
      • la valeur (blue)

En résumé, le CSS s'utilise de trois manières différentes :

Classe de style

[baliseHtml].nomDeLaClass {
propriété-spécificité : valeur;
}

Exemples de propriété
font-family:verdana;
font-size:10px;
background-color:blue;
text-align:left;
border-left-style: dotted;

Utilisation
Cette class doit être appelée par l'attribut Html class: <div class="nomDeLaClass">patali, patala</div>

Style unique

#nomDeLidentifiant {
propriété-spécificité : valeur;
}

Utilisation
Cette class doit être appelée par l'attribut Html id: <div id="nomDeLidentifiant">patali, patala</div>

Style global

baliseHtml {
propriété-spécificité : valeur;
}

Relation CSS et HTML
Le fichier CSS qui contient tous le code ci-dessus doit être relié au fichier HTML par une balise link : <link rel="stylesheet" href="css/monfichier.css">

CSS HISTORIQUE

  • Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée "Cascading StyleSheets" (feuilles de style en cascade), notée CSS. Les feuilles de style ont été mises au point afin de compenser les manques du langage HTML en ce qui concerne la mise en page et la présentation.

    Depuis le 12 mai 1998, la norme CSS 2.0 est le standard en vigueur. La norme CSS2 apporte un grand nombre de nouvelles fonctionnalités par rapport à la précédente norme (1.0), parmi lesquelles :

    • La prise en compte des médias (écran, imprimante, braille, synthétiseur vocal, etc.)
    • L'ajout de propriétés auditives pour les aveugles et malvoyants
    • La manipulation de curseurs
    • La gestion des débordements et de la visibilité des éléments.
    • La compatibilité des navigateurs:
    Mais malgré l'existence de recommandations du W3C, les feuilles de style ne sont pas reconnues de la même façon par tous les navigateurs. Et cela ne c'est pas arangé depuis la sortie du premier Module CSS3 en 2001.

CSS

CSS Pour aller plus loin


< Page précédente LANGAGE CSS Page suivante >