#4 css 101

861 vues

Publié le

#4 css 101

Publié dans : Logiciels
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
861
Sur SlideShare
0
Issues des intégrations
0
Intégrations
411
Actions
Partages
0
Téléchargements
21
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

#4 css 101

  1. 1. CSS 101 : Mise en forme
  2. 2. Le CSS ?
  3. 3. CSS ? Les feuilles de style en cascade, généralement appelées CSS, forment un langage informatique qui décrit la présentation des documents HTML Source : wikipedia.org
  4. 4. CSS ? Tous les éléments de la page sont de couleur rouge. Tous les titres de la page sont de couleur bleue. Certains titres de la page sont de couleur bleue.
  5. 5. Mise en place
  6. 6. CSS dans une page HTML (1) <!DOCTYPE html> <html> <head> </head> <body> <h1 style="color: red;">Lorem ipsum.</h1> </body> </html>
  7. 7. CSS dans une page HTML (2) <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" /> </head> <body> <h1>Lorem ipsum.</h1> </body> </html>
  8. 8. Fonctionnement
  9. 9. Première feuille de style selecteur{ propriété: valeur; propriété: valeur; } ! selecteur{ propriété: valeur; }
  10. 10. Première feuille de style h1{ color: blue; font-size: 20px; } ! p{ color: red; } Selecteur Valeurs Propriétés
  11. 11. Selecteurs
  12. 12. Une balise h1{ color: blue; font-size: 20px; } ! p{ color: red; }
  13. 13. Une class .titre{ color: blue; font-size: 20px; } ! .toto{ color: red; }
  14. 14. Une id #titre{ color: blue; font-size: 20px; } ! #toto{ color: red; }
  15. 15. Selection multiple #titre, #super, #youpi{ color: blue; font-size: 20px; }
  16. 16. Selection via inclusion #titre ul li a{ color: blue; font-size: 20px; }
  17. 17. Pseudo classe #titre ul li:hover a{ color: red; }
  18. 18. Propriétés
  19. 19. Taille du texte h1{ font-size: 20px; } ! p{ font-size: 1.1em; }
  20. 20. Couleurs h1{ color: red; } ! p{ color: #f03838; }
  21. 21. Format du texte h1{ text-decoration: underline; font-style: italic; } ! a{ text-decoration: none; font-weight: bold; } ! p{ color: #f03838; }
  22. 22. Police (1) body{ font-family: "Open Sans", arial, sans-serif; }
  23. 23. Police (2) <head> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> </head>
  24. 24. Police (3) http://www.fontsquirrel.com/tools/webfont-generator
  25. 25. Alignement h1{ text-align: center; } ! h2{ text-align: right; }
  26. 26. Liste ul{ list-style: none; } ! ol{ list-style: square; }
  27. 27. Bordures header{ border-bottom: 1px solid #303030; } header{ border: 3px dashed red; }
  28. 28. Merci pour votre attention.
  29. 29. Bibliographie Bien construire sa hiérarchie de titres - Laurie-Anne http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html La hiérarchie des balises H1, H2, Hn... et le référencement- AxeNet http://blog.axe-net.fr/hierarchie-balises-h1-h2-hn-referencement/ A vocabulary and associated APIs for HTML and XHTML - W3C http://www.w3.org/TR/html5/ HTML5 : structure globale du document -Simon-K http://www.alsacreations.com/article/lire/1374-html-5-structure-globale-du-document.html
  30. 30. Crédits HTML5 - Erick Dimas http://commons.wikimedia.org/wiki/File:HTML5_de_Erick_Dimas.jpg Hypertext Editing System (HES) console - Greg Lloyd http://commons.wikimedia.org/wiki/File:HypertextEditingSystemConsoleBrownUniv1969.jpg

×