Le guide complet du CSS - Micro Application

Présentation

Objectifs du livre

Feuilles de style

Historique

Rôle du W3C

Support des applications

Choisir ses outils

Outils de rédaction

Création graphique

Navigateurs et plugins

Outils divers

Conventions

En-têtes et gabarits de fichiers

HTML + XML = XHTML

Envoyons paître les mauvais navigateurs !

Valider

Généralités et syntaxe

Quand appliquer les CSS ?

Comment appliquer les CSS ?

Syntaxe

Règles CSS

Commentaires

Héritage, sélecteurs et classes

Sélecteurs

Propriétés raccourcies

At-rules

Principe de cascade

Poids des sélecteurs

Ordre d'application des règles

Types de valeurs

Dimensions

Ressources externes

Couleurs

Chaînes de caractères

En résumé

Dimension et espacement

Mise en boîte

Taille des éléments

Largeur et hauteur

Dimensions minimales et maximales

Espacement des boîtes

Marges externes (margin)

Marges internes (padding)

Problèmes avec les marges internes et externes

Bordures (border)

En résumé

Affichage et positionnement du contenu

Affichage des éléments, la propriété display

La valeur block

La valeur inline

La valeur inline?block

La valeur none

Table et variantes

Les valeurs list?item et run?in

Affichage du contenu

La propriété visibility

Les propriétés clip et overflow

Positionnement des éléments

La valeur static

La valeur relative

La valeur absolute

La valeur fixed

Les propriétés float et clear

La propriété z?index

En résumé

Listes et tableaux

Les listes

Position des puces

Type de puce

Images pour puce

Les tableaux

Modèle de bordures et d'espacement

Espacement des cellules

Cellules vides

Alignement vertical

Position de la légende 

Modèle de mise en page 

En résumé

Textes et polices  

Modifier les polices d'écriture

font?family : les familles de polices

font?size : taille de la fonte

font?weight : graisse de la fonte

font?style : inclinaison de la fonte

font?variant : variation de casse

font : propriété raccourcie

Modifier le texte 

text?align : alignement du texte

text?transform : modification de la casse

text?decoration : décoration du texte

text?indent : les alinéas

white?space : comportement des espaces blancs

letter?spacing et word?spacing : interlettrage et espace-mot

line?height : hauteur de ligne

Accessibilité

Des contenus pertinents

En résumé

Promotion de son site

Les liens

Les pseudo-classes :link, :visited, :hover, :active    

:link et :visited

:hover et :active  

:focus 

Pourquoi utiliser (a):link, et pas uniquement le sélecteur a  ?

L'ordre des règles CSS

Créer des liens et gérer les relations

Atelier : les liens

Les formulaires 

Organiser un formulaire

Utiliser les sélecteurs et les pseudo-classes sur les formulaires

En résumé

Illustration

La propriété background?image

La propriété background?repeat

La propriété background?position

La propriété background?color

La propriété background?attachment

La propriété background

Les pratiques courantes

Ajouter une image dans un lien

Remplacement par une image

Images et formulaires

Simuler des boutons

Une boîte arrondie

Plusieurs images en une

La balise image

En résumé

Des CSS pour tous les supports

Internet et interopérabilité

Les différents media auxquels peuvent s'appliquer les CSS

media universel (all)

media pour moniteur (screen)

media d'impression (print)

Récupérer les informations présentes dans les attributs

Supprimer les éléments superflus

Répéter un élément sur chaque page

media sonore (speech)

media pour projections (projection)

media de type petit écran (handheld)

media pour malvoyants (embossed/braille)

media pour écran de terminal (tty)

media de type télévision (tv)

Atelier : utilisez les différents media

En résumé

Liens utiles

Styles et évènements dynamiques

DOM (Document Object Model)

Arbre DOM

Sélectionner un élément de l'arbre DOM

Sélectionner un élément par son id

Sélectionner des éléments par leur nom

Utiliser la hiérarchie du DOM pour sélectionner un élément

Manipuler les éléments sélectionnés

Modifier les attributs d'une balise

Modifier le contenu d'une balise

Modifier les propriétés de style

Évènements DOM

évènements principaux

Gérer les évènements

Exécuter un script une fois le document chargé

Exécuter un script sur un ensemble d'éléments

Atelier : Masquer ou afficher du contenu

En résumé

Compléments et tableaux de compatibilité

Aide

Méthode

Normes et sémantique 

Accessibilité

Erreurs courantes

Oubli des unités

Erreurs d'arrondi

Extensions propriétaires

Liens utiles

Tableau descriptif des principales balises HTML

Tableaux de compatibilité des propriétés CSS

Sélecteurs

Propriétés de base

Propriétés d'impression

Index