Télécharger
premiers pas en CSS et XHTML
Sommaire
1. INTRODUCTION AU XHTML ET AUX FEUILLES DE STYLE CSS
Signification de XHTML et CSS
Principes de base pour une page web
Choix sensé des balises HTML
Adaptation aux navigateurs
Accessibilité
L’apparence, fonction du thème et du public
concerné
Polices de caractères
En résumé, quelques sentiments liés aux couleurs
Homogénéité du site
Principes d’une bonne écriture
XHTML/CSS : donner du sens au codage
Titre de page
Mise en gras ou en italique
Liste de liens hypertexte (menu)
Intérêt des feuilles de style
2. L’ESSENTIEL DU XHTML
Rappel sur le principe des balises
Du HTML au XHTML
Premières règles d’écriture XHTML
Règles pour les noms des fichiers
Règles d’écriture des balises XHTML
Structure d’une page XHTML
Espaces, sauts de ligne et commentaires
invisibles
Principales balises XHTML
Un exemple pour commencer
Les deux premières balises
En-tête
Corps de la page
Paragraphes et titres
Mise en forme commune à une partie du texte
Italique et gras
Liens hypertextes
Listes à puces ou numérotées
Tableaux
Fusionner des cellules
Insertion d’images
Dimensionner une image
Objets multimédias
Animation Flash
Vidéo
Sauts, lignes et caractères spéciaux
Autres balises de texte
Autres balises de listes
Formulaires
Deux catégories d’éléments :
blocs et en ligne
Éléments en ligne
Éléments de type bloc
Hiérarchie des éléments : l’héritage
Hiérarchie des blocs imbriqués et juxtaposés
Termes hiérarchiques utilisés en XHTML/CSS
Héritage des propriétés de style
Compléments sur les balises d’en-tête
Balise DOCTYPE
Balise meta et codage en utf-8
Autres balises d’en-tête
Validation du code XHTML
3. ÉCRITURE DES FEUILLES DE STYLE
Définition d’une règle de style
Principe
Exemple de règle de style
Commentaires
Emplacement des styles
Feuille de style interne
Feuille de style externe
Styles en ligne
Sélecteurs de style
Comme au théâtre
Sélecteur simple
Classe
Une catégorie de balises
Une même classe pour plusieurs types de balises
Identifiant
Identifiant sans nom de balise
Différence entre classe et identifiant
Pseudo-classes
Pseudo-classes pour les liens hypertexte
Autres pseudo-classes
Pseudo-éléments
Règle associée à plusieurs sélecteurs
Regroupement de propriétés à l’aide de «
raccourcis »
Hiérarchie des sélecteurs
Hiérarchie précise des sélecteurs
Imbrication directe
Juxtaposition
Sélecteur d’attribut [...]
Sélecteur universel *
Ordre de priorité des styles
Règle de style prioritaire
Degré de priorité d’une règle de style
Application
Valeurs, tailles et couleurs
Héritage de propriété
Unités de taille
Unités de taille fixe
Unités de taille relatives (conseillées)
Tailles définies par mots-clés
Codage des couleurs
Noms de couleurs
Code RVB
Couleurs « sûres »
Exemple de page avec feuille de style interne
4. PROPRIÉTÉS DE MISE EN FORME
Mise en forme des caractères
Choix des polices
Taille de police
Couleur du texte
Texte en gras
Italique
POCHES ACCÈS LIBRE - PREMIERS PAS AVEC XHTML ET
CSS
XII ©
Groupe Eyrolles, 2005
Soulignement et autres « décorations »
Majuscules et minuscules
Petites majuscules
Surlignage de lettres
Décalage vers le haut ou le bas
Raccourci pour la mise en forme de caractères
Paragraphes et blocs de texte
Alignement horizontal du texte
Retrait de première ligne
Interligne minimum
Espacement entre les lettres
Espacement entre les mots
Conservation des espaces et sauts de ligne saisis
Modification du curseur de la souris
Affichage automatique d’un contenu
Guillemets à utiliser
Réinitialisation d’un compteur
Incrémentation d’un compteur
Sens de l’écriture
Écriture bidirectionnelle
Bordures
Style de bordure
Styles de bordure pour chaque côté
Épaisseur de bordure
Épaisseur de bordure pour chaque côté
Couleur de bordure
Couleur de bordure pour chaque côté
Raccourci pour toutes les propriétés de bordure
Raccourci des propriétés de bordure
pour chaque côté
Contour superposé à un élément
Images et couleurs d’arrière-plan
Couleur d’arrière-plan
Image d’arrière-plan
Répétition ou non de l’image d’arrière-plan
Alignement de l’image d’arrière-plan
Fixation de l’image d’arrière-plan
Raccourcis pour les arrière-plans
Listes à puces ou numérotées
Type de puce ou de numérotation
Utilisation d’une image comme puce
Position de la puce
Raccourci pour toutes les propriétés de liste
apprendre le css
formation css
apprendre css
intégration css
Les tableaux
Largeur fixe ou variable des colonnes ou du
tableau
Recouvrement des bordures
Espacement entre les bordures de cellules
Contour des cellules vides
Position du titre du tableau
Alignement sur la virgule
Alignement vertical des cellules
5. POSITIONNEMENT DES BLOCS
Marges et dimensions d’un bloc
Marges externes autour d’un bloc
Raccourci pour les marges externes
Marges internes d’un bloc
Raccourci pour les marges internes
Largeur fixe pour un bloc ou une image
Hauteur fixe pour un bloc ou une image
Largeur et hauteur totales d’un bloc
Problèmes de marges avec Internet Explorer 6
Largeur ou hauteur minimum
Largeur ou hauteur maximum
Position des éléments
Flux normal des éléments
Principe du positionnement des blocs
Types de position possibles
Position normale
Position relative, absolue ou fixe
Position flottante
Utilisation des différents types de
positionnement
Élément dans le flux (position normale)
Position relative
Position absolue
Position fixe
Élément flottant
Type de positionnement d’un bloc
Décalages indiquant la position d’un bloc
Niveau d’empilement des blocs
Transformation en bloc flottant
Pas d’éléments flottants sur le côté
Affichage ou non d’un élément
Affichage des débordements
Zone visible d’une boîte
cours css
cours css pdf
css cours
cours de css
Changement de type d’élément
Délimitation des blocs
Exemples de positionnement
Image du haut (nuages)
Image de l’arbre en position absolue
Sous-titre « En images » en position relative
Centrage horizontal du titre
Titre latéral fixé sur l’écran
Position absolue pour la galerie d’images
Images côte à côte en position flottante
Centrage d’éléments à l’intérieur des blocs
Centrage horizontal
Centrage horizontal d’éléments en ligne
Centrage horizontal de blocs
Centrage vertical
Centrage vertical d’éléments en ligne
Centrage vertical de blocs
Exemple de centrage vertical
6. DIFFÉRENTS TYPES DE MÉDIA
Types de média
Média paginé : styles pour l’impression
Gestion des veuves
Gestion des orphelines
Saut de page avant
Saut de page après
Coupure par un saut de page
Dimensions d’une page
Sélecteur de page
Référence à un type de page
Média sonore : fonctions audio
7. RÈGLES SPÉCIFIQUES À CERTAINS NAVIGATEURS
Test des pages sur plusieurs navigateurs
Adaptation du code aux navigateurs
Balises XHTML conditionnelles
Règles de style en fonction des navigateurs
Règles de style pour Internet Explorer 6 et
versions antérieures
Règles de style pour Internet Explorer 7 seul
Propriétés de style pour IE 6 ou 7
Règles pour navigateurs modernes
Styles pour les navigateurs modernes et IE 7
Styles pour les navigateurs modernes sans IE 7
Marges par défaut
Règles spécifiques à Internet Explorer
Projet IE 7
Largeur ou hauteur minimum
Position fixe
Technique de rattrapage de position
Stabilisation de l’affichage
Espace vertical sous une image
Transparence des images PNG
Affichage d’une image PNG transparente avec Internet
Explorer 6
Affichage d’une image PNG transparente sur tous
les navigateurs
Dimensions d’affichage modifiées
A. COULEURS
Les 16 couleurs de base
Couleurs sûres
Liste de toutes les couleurs nommées
B. COMPORTEMENT DES
PRINCIPAUX NAVIGATEURS
Compréhension des balises HTML-XHTML
Interprétation des propriétés CSS 2.1
Unités
Paramètre !important
Médias
Sélecteurs
Pseudo-classes
Pseudo-éléments
Propriétés
Paramètres d’impression
C. RÉSUMÉ DES PROPRIÉTÉS CSS 2
Propriétés CSS 2
Propriétés d’affichage
Média paginé
Média sonore
EYROLLES
Pages : 251
Forme : PDF
Taille : 6.03 Mo
