Accueil Ajax XUL JavaScript CSS HTML 5 FAQ-Forum

CSS - Feuille de style

CSS (Cascading Style Sheet) est une grammaire de règles pour définir la présentation d'un document. C'est un standard du Web reconnu par tous les navigateurs qui permet la séparation du contenu des pages et leur présentation.

Le format des documents est indifférent: cela peut être HTML, XHTML, XML ou tout autre format dès lors qu'un moteur de rendu peut traiter les règles et les appliquer sur un média. Le langage d'interface graphique XUL basé sur le moteur de rendu Gecko utilise CSS.

L'évolution du format des pages Web, tend dans HTML 5 vers la suppression totale des éléments de présentation tels que <b> (gras) <i> (italique), tandis qu'apparaissent de nouvelles balise de contenu (video) ou de structure (section).

Avantages de CSS

La séparation du contenu et de la présentation améliore considérablement la productivité en permettant de placer la définition de cette dernière dans un fichier réutilisable avec des contenus différents, avec chaque page Web.
Et à l'inverse, il est possible de personnaliser la présentation en changeant le fichier CSS, au choix de l'utilisateur notamment, pour favoriser l'accessibilité, ce que permettent les CMS.
La présentation peut encore être adaptée selon le média. Un format standard est définit qui reconnaît entre autre l'écran (screen), l'impression (print), les mobiles (handheld), la synthèse vocale (speech) ou tout média (all).

Principe de cascade

Les styles sont en cascades, ce qui veut dire que l'on peut préciser une règle déjà définie et la surcharger dans un style, l'adapter à un contexte.
Par exemple, si on a définit un style pour la balise <a>, on peut le modifier lorsque cette balise est contenue dans une table avec la règle "<table> <a>".

L'ordre des déclarations est important. Une nouvelle règle dans un même fichier ou par rapport à un fichier importé, annule et remplace la précédente pour chaque propriété définie dans la nouvelle règle.

Tutoriel

Démonstrations et études de cas

Du texte sur une image.

Fenêtre sur un paysage.

Voir un panoramique dans une fenêtre, avec effet de relief.

Lightbox CSS.

Une lightbox sans JavaScript.

Liste personnalisée

Les listes peuvent devenir des éléments graphiques pour enrichir une page Web.

Graphe en barres

Compléter simplement une page avec un graphe en barres, sans framework.

Histogramme

Version spécialisée du graphe avec des années (ou autres libellés de taille identique).

Menu Apple et plus

Galerie d'images déroulantes sans JavaScript

Présente une série d'images dans une fenêtre.

Ombre

Ajouter une ombre à une boite de texte ou d'image.

Bordure avec texture

Comment attribuer une texture aux cadres entourant les boites de texte ou les images.

Table HTML d'apparence professionnelle

Sans framework, avec une fonction JavaScript.

Bouton en CSS sans JavaScript

Comment réaliser des boutons pour l'interface d'un site, et démonstration d'une barre de boutons.

CSS et CMS

Le développement croissant des systèmes de gestion de contenu augmente encore l'intérêt des feuilles de style. Il est facile à un utilisateur d'installer des templates comprenant feuille de style et images, et changer l'apparence du site instantanément.

Des logiciels tels que Drupal permettent à chaque utilisateur de choisir son template et donc l'apparence du site pour lui-même.

Compatibilité

La spécification CSS 2.0 du W3C est implémentée par tous les navigateurs actuels.

La version 3 est en cours d'implémentation. Elle l'est entièrement par Safari 4. Des éléments de CSS3 peuvent être ajoutés aux styles des pages actuelles avec une définition alternative non standard pour Internet Explorer.

(c) 2009-2010 Xul.fr