ISCOM::HTML/CSS::session4 (20141105)

435 views

Published on

ISCOM::HTML/CSS::session4 (20141105)

Published in: Internet
  • Be the first to comment

  • Be the first to like this

ISCOM::HTML/CSS::session4 (20141105)

  1. 1. Cours HTML / CSS Learn to code HTML/CSS easily Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 1
  2. 2. 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 Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 2
  3. 3. Rappel du projet Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 3
  4. 4. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4
  5. 5. Allons de l’avant avec CSS3 Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 5
  6. 6. 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. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 6
  7. 7. CSS3 CheatSheets Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 7
  8. 8. 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 Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 8
  9. 9. Les prefixes CSS • Exemple d’utilisation : • On Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 9
  10. 10. 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 ? Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 10
  11. 11. 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. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 11
  12. 12. Des questions ? Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 12

×