CATALOGUE
Code & Data
Formation
XHTML/CSS
Apprendre CSS 3
Optimisation de l'Impression d'une Page Web
DescriptionProgrammeAvis
Cette leçon fait partie de la formation
89,00€
Je commande
Formation incluse dans l'abonnement Elephorm
Je m'abonne à Elephorm
Étapes pour Créer une Feuille de Style d'Impression
Objectifs
Les objectifs de cette vidéo sont de montrer comment créer une feuille de style CSS dédiée à l'impression, comment supprimer des éléments non nécessaires et comment adapter votre contenu web pour une expérience d'impression optimale.
Résumé
Apprenez à optimiser une page web pour l'impression en utilisant des feuilles de style CSS spécifiques afin de supprimer les éléments non nécessaires.
Description
Cette leçon vous guidera à travers le processus d'optimisation d'une page web pour l'impression. Nous verrons comment utiliser une feuille de style CSS dédiée afin de supprimer ou modifier les éléments non pertinents pour la lecture papier. Vous apprendrez à :
- Insérer une balise link pour la feuille de style d'impression.
- Utiliser l'attribut media pour cibler les systèmes d'impression.
- Appliquer des styles CSS spécifiques pour masquer ou modifier des éléments comme les entêtes, les pieds de page, et les iframes.
- Assurer que les titres et les textes sont adaptés pour l'impression en noir et blanc afin de préserver l'encre.
Nous étudierons également les meilleures pratiques pour garantir que les feuilles de style d'impression restent synchronisées avec le style général de votre site en cas de modifications futures.
Questions fréquentes
Questions réponses
Pourquoi est-il important d'optimiser une page web pour l'impression?
L'optimisation d'une page web pour l'impression est importante afin de garantir que seules les informations nécessaires soient imprimées, évitant le gaspillage de papier et d'encre et améliorant la lisibilité du contenu.
Quel attribut de la balise <link> permet de cibler les systèmes d'impression?
L'attribut media de la balise permet de cibler les systèmes d'impression en spécifiant le type de média pour lequel la feuille de style est destinée.
Comment faire disparaître un élément lors de l'impression?
Pour faire disparaître un élément lors de l'impression, vous pouvez utiliser la propriété CSS display: none dans la feuille de style d'impression.
Programme détaillé
Module 1 - Qu'est-ce que le CSS ?
Définition
04:39
Module 2 - Comment appliquer les styles?
Module 3 - Commentez votre code CSS
Le commentaire CSS
03:22
Structurer son code CSS
04:39
Module 4 - Exprimez la couleur en CSS
Module 5 - Les différents types de sélécteurs CSS
Les sélécteurs CSS
02:43
Module 6 - Le sélécteur HTML
Saisie de code html
00:14
Le sélécteur d'élement
06:21
Module 7 - Le sélécteur hiérachique ou ascendant
Module 8 - Les pseudo classes de liens
Module 9 - Le sélécteur d'identifiant
Module 10 - Le sélécteur de classe
Le sélécteur de classe
05:41
Module 11 - Le selécteur adjacent
Saisie de code html
02:46
Le sélécteur adjacent
00:45
Module 12 - Le selécteur enfant
Le selécteur enfant
02:28
Module 13 - Les autres pseudo classes
Module 14 - Le sélécteur d'attribut
Le sélécteur d'attribut
08:28
Module 15 - Qu'elles sont les unités de mesure sur le web ?
Les unités de valeurs
05:41
Module 16 - Gérez vos polices
Familles de polices
04:38
Taille des polices
01:29
La couleur du texte
00:35
L'interligne - centrage
04:16
La graisse de la police
01:55
Module 17 - Transformez et alignez votre texte
Les petites capitales
02:24
Les soulignement
00:34
L'alignement
04:21
L'indentation
01:13
Espacement des lettres
01:37
Espacement des mots
00:38
Module 18 - Chargez une police pour votre site web
Module 19 - Ajoutez des bordures
Les bordures en css
05:22
Module 20 - Stylez vos listes
Les styles de listes
09:10
Module 21 - Comprendre la cascade et l'héritage
Module 22 - Découvrez le modèle de boîte
Les bordures
00:57
Les marges
02:56
Module 23 - Visualisez votre code avec l'inspecteur d'éléments
Module 24 - Comprendre le fonctionnement des marges
La fusion des marges
06:40
Module 25 - Tout sur les arrières plans
L'image de fond
02:33
Module 26 - Eléments bloc ou en ligne?
Module 27 - Faites flotter vos éléments
Module 28 - Utilisez flex pour vos mises en pages
Flex direction
01:39
Flex wrap
01:55
Justify content
02:33
Align items
01:44
Align content
01:52
Flex-grow
02:02
Order
01:54
Module 29 - Rendez votre code CSS compatible
Préfixage des propriétés
04:03
Module 30 - Passez des élements par-dessus les autres
Module 31 - Créez de la transparence
Module 32 - Fixez vos éléments si nécessaire
La position fixed
07:39
Module 33 - Stylez vos tableaux
Module 34 - Stylez vos boutons
Module 35 - Stylez vos formulaires
Module 36 - Méthodologie de mise en page d'un site web
Présentation du site
02:48
Module 37 - Le reset CSS
Normalize
06:27
Module 38 - Les commentaires conditionnels
Module 39 - Créez vous un modèle
Module 40 - Créez la page d'accueil
Module 41 - Validez vos pages HTML au W3C
Module 42 - Stylez votre code de base en fonction de la maquette
Module 43 - Positionnez les éléments
Module 44 - Stylez l'en-tête du site
En-tête du site
11:08
Pied de page du site
02:55
Module 45 - Stylez en pensant design pattern
Module 46 - Stylez du haut vers le bas
La bannière
10:40
Module 47 - Stylez les mises en avant de contenu
Module 48 - Stylez les contenus contextuels
Les contenus contextuels
08:38
Module 49 - Ajoutez une page d'attérissage
Module 50 - Ajouter une page de contenu
Module 51 - Ajoutez un point de contact et la localisation
Le formulaire
10:36
Module 52 - Les mentions légales d'un site
Module 53 - N'oubliez pas le Favicon
Ajouter un Favicon
07:15
Module 54 - Validez vos pages CSS au W3C
Le validateur W3C
03:42
Module 55 - Stylez l'impression
Module 56 - Comment héberger son site internet?
Domaine et hébergement
06:51
Module 57 - Comment mettre en ligne un site web
Transférer les données
10:15
Module 58 - Créez une page 404
Module 59 - Optimisez votre site et sa performance d'affichage
Module 60 - Aidez les robots d'indexation avec le sitemap
Module 61 - Qu'est-ce que le fichier robot?
Module 62 - Créez des arrondis
Les arrondis
06:44
Module 63 - Appliquez des ombres portées
Les ombres
15:38
Module 64 - Créez de dégradés
Les dégradés
08:38
Module 65 - Insérez des éléments graphiques avec le CSS
contenu généré
10:51
Module 66 - Numérotez des titres
Les compteurs en CSS
04:26
Module 67 - Créez des transitions
Exemple de transition
04:37
Module 68 - Transformez les éléments
Module 69 - Animez vos éléments
Améliorer l'animation
04:11
Module 70 - Fixez un fond image au scroll
Fixer l'image de fond
05:40
Module 71 - Décallez des éléments
Le margin négatif
03:23
Module 72 - Affichez une image plein écran
Image full screen
03:51
Module 73 - Centrez un texte sur la hauteur par dessus une image
Première méthode
03:44
Deuxième méthode
03:42
Module 74 - Créez un menu déroulant
Module 75 - Créez des effets au survol de la sourtis sur vos menus
Module 76 - Utilisez flex pour vos menus
Module 77 - La technique des sprites
Les sprites
13:12
Module 78 - Créez des bandes en bias
Module 79 - Animez un bouton
Animez un bouton
08:27
Module 80 - Créez une interaction au survol d'une image
Module 81 - Créez une lightbox en full CSS3
La pseudo classe target
12:20
Module 82 - Animez un bouton de menu
Un bouton de menu animé
12:41
Module 83 - Créez un menu full canvas en CSS3
Module 84 - Complétez le code html
Module 85 - Stylez le css global
Stylez le css global
02:25
Module 86 - Styler le header
En tête du site
05:04
Module 87 - Styler le footer
Pied de page du site
01:25
Module 88 - Styler la home
Module 89 - Styler la page 2
La page de contenu
00:49
Module 90 - Styler la page 3
La page contact
04:48
4 commentaires
4,5
4 votes
5
4
3
2
1
Formation ajoutée au panier
Apprendre CSS 3
Formateur expert
Accès sur tous vos appareils
Fichiers de travail téléchargeables
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.