Tutoriel CSS et personnalisation des balises HTML

CSS (Cascading Style Sheet) est une grammaire de règles pour définir la présentation d'un document HTML, XHTML ou XML. C'est un standard du Web reconnu par tous les navigateurs.

Le tutoriel CSS permet avec des démonstrations interactives de mieux connaître les propriétés et la façon dont elles fonctionnent.

Syntaxe CSS.

Les sélecteurs CSS 2 et 3.

Box-shadow.
Comment ajouter une ombre à une boite de texte ou une image en CSS 3.

CSS italique

background. Mettre une image en fond de page.

display. Propriété de mise en forme

position. Combinaison entre le conteneur et les éléments contenus.

float. Son effet dépend de l'ordre dans le code.

clear. Fonctionne en conjonction avec float.

clip. Recadrer une image ou créer des vignettes.

padding et margin.

fieldset. Personnaliser la balise et résoudre les problèmes de compatibilité.

white-space. Contrôle les espaces et retours à la ligne. Les tabulations dans une page web.

overflow: Contrôler l'alignement dans un bloc conteneur.

!important. Surclasser les précédences.

z-index. Propriété de mise en forme, elle permet aussi des effets spéciaux.

opacity. Transparence et superposition.

transition. Des effets graphiques en CSS.

Glossaire.

Donner du style aux balises HTML

Le principe de la séparation du contenu et la présentation améliore considérablement la productivité en permettant de placer la définition de la présentation dans un fichier réutilisable avec des contenus différents, avec chaque page Web.

Et à l'inverse, cela permet de personnaliser la présentation en changeant le fichier CSS, au choix de l'utilisateur notamment, pour favoriser l'accessibilité ou en fonction de l'utilisation ou du média.

Cela permet aussi de donner un style à chaque balise HTML pour personnaliser les pages et documents.

Enjoliver la balise H1 en CSS pur
Sans ajouter de balise supplémentaire dans le document, la balise H1 peut être stylée avec divers effets, grâce à une seule propriété CSS...

Balise H1 stylée

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

Table HTML d'apparence professionnelle
Sans framework, avec une fonction JavaScript.

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

Menu Apple
C'est une autre application du menu auquel on donne un style.

Blockquote
Les citations mises en relief, retrait simple, ou rendu plus élaboré comme le phylactère en face à la photo de l'auteur.

Citation Ray Bradbury

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

Widgets CSS

Ajouter de nouveaux éléments à HTML avec seulement du CSS et sans JavaScript.

Lightbox CSS
Une lightbox sans JavaScript.

Galerie d'images déroulantes sans JavaScript
Présente une série d'images dans une fenêtre.

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).

Interfaces

Skeuomorphisme et interface graphique

Un concept largement utilisé par Apple, avec succès.

Intenterface, les intentions dans l'interface

Un nouveau type d'interface utilisateur pourrait, combiné avec le commande vocale, rendre l'utilisation des logiciels beaucoup plus simple.

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.

Compatibilité dans IE6 et IE7. (Histoire)

Compatibilité des navigateurs. (Anglais). Lien externe. Montre l'implémentation dans les navigateurs.

© 2006-2024 Xul.fr