View
214
Download
2
Category
Preview:
DESCRIPTION
ISCOM::HTML/CSS::session4 (20141105)
Citation preview
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 1
Cours HTML / CSSLearn to code
HTML/CSS easily
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Cours HTML / CSS
• 6 Sessions de ~3 heures > ~18 heures au total,
• A chaque sessions aura des objectifs à atteindre pour pouvoir continuer à la prochaine session,
• 30% de théorie et 70% de pratique,
• Finalité : Monter un site en HTML / CSS responsive,
• En bonus, utilisation d’outil de versioning
2
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Rappel du projet
3
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Allons de l’avant avec CSS3
5
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
CSS3• CSS3 est le dernier standard CSS.
• Il est entièrement compatible avec CSS2 (On parle de backwards-compatibility),
• Le CSS3 est cependant en cours de validation W3C …
• … mais beaucoup de navigateurs on déjà implémenté cette nouvelle norme…
• … il ne faut cependant pas oublier les anciens navigateurs qui ne sont pas compatible.
• Le CSS3, c’est du CSS2 avec de nouvelles fonctionnalités.
6
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 7
CSS3 CheatSheets
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Les prefixes CSS• Certains navigateurs utilisent des prefixes à certaines déclarations CSS afin de pouvoir utiliser certaines
propriétés compatible.
• Les préfixes contiennent obligatoirement un - au début de leur définition, chaque navigateur a son identifiant, puis la déclaration est réalisée.
• Les préfixes identifié par navigateur :
• Chrome, Safari, Android, … : -webkit-,
• Mozilla Firefox : -moz-,
• Internet Explorer : -ms-,
• Opera : -o-,
• Bien entendu, ces prefixes ne sont pas compatible avec les anciens navigateurs. Il faudra avoir une alternative pour ceux-ci
8
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Les prefixes CSS
• Exemple d’utilisation :
• On
9
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Les prefixes CSS
• Exemple d’utilisation :
• On veut mettre une bordure arrondie (border-radius) de 10px sur un div ayant une classe « b-radius-5 ».
• On déclare ceci dans notre CSS.
• Pourquoi ne pas déclarer Opera et IE ?
10
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
CSS3 Exercice• Exercice simple :
• Vous avez votre site responsive,
• Utilisez les fonctionnalités CSS3 pour animer votre site en CSS,
• Charger une ou plusieurs police(s) google font ( https://www.google.com/fonts ) et appliquez la au menu et au contenu (il faut que celle-ci soit lisible et adaptée à votre site),
• Le site sera compatible IE9+, Firefox, Safari, Chrome, Opera et mobile.
11
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Des questions ?
12
Recommended