CSS 101 : Mise en forme
Le CSS ?
CSS ? 
Les feuilles de style en cascade, 
généralement appelées CSS, 
forment un langage informatique 
qui décrit la prése...
CSS ? 
Tous les éléments de la page sont de couleur 
rouge. 
Tous les titres de la page sont de couleur 
bleue. 
Certains ...
Mise en place
CSS dans une page HTML (1) 
<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<h1 style="color: red;">Lorem ipsum.</h1> 
<...
CSS dans une page HTML (2) 
<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="css/style.css" /> 
</head> 
<bod...
Fonctionnement
Première feuille de style 
selecteur{ 
propriété: valeur; 
propriété: valeur; 
} 
! 
selecteur{ 
propriété: valeur; 
}
Première feuille de style 
h1{ 
color: blue; 
font-size: 20px; 
} 
! 
p{ 
color: red; 
} 
Selecteur 
Valeurs 
Propriétés
Selecteurs
Une balise 
h1{ 
color: blue; 
font-size: 20px; 
} 
! 
p{ 
color: red; 
}
Une class 
.titre{ 
color: blue; 
font-size: 20px; 
} 
! 
.toto{ 
color: red; 
}
Une id 
#titre{ 
color: blue; 
font-size: 20px; 
} 
! 
#toto{ 
color: red; 
}
Selection multiple 
#titre, #super, #youpi{ 
color: blue; 
font-size: 20px; 
}
Selection via inclusion 
#titre ul li a{ 
color: blue; 
font-size: 20px; 
}
Pseudo classe 
#titre ul li:hover a{ 
color: red; 
}
Propriétés
Taille du texte 
h1{ 
font-size: 20px; 
} 
! 
p{ 
font-size: 1.1em; 
}
Couleurs 
h1{ 
color: red; 
} 
! 
p{ 
color: #f03838; 
}
Format du texte 
h1{ 
text-decoration: underline; 
font-style: italic; 
} 
! 
a{ 
text-decoration: none; 
font-weight: bol...
Police (1) 
body{ 
font-family: "Open Sans", arial, sans-serif; 
}
Police (2) 
<head> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
</hea...
Police (3) 
http://www.fontsquirrel.com/tools/webfont-generator
Alignement 
h1{ 
text-align: center; 
} 
! 
h2{ 
text-align: right; 
}
Liste 
ul{ 
list-style: none; 
} 
! 
ol{ 
list-style: square; 
}
Bordures 
header{ 
border-bottom: 1px solid #303030; 
} 
header{ 
border: 3px dashed red; 
}
Merci pour votre attention.
Bibliographie 
Bien construire sa hiérarchie de titres - Laurie-Anne 
http://www.alsacreations.com/astuce/lire/952-bien-co...
Crédits 
HTML5 - Erick Dimas 
http://commons.wikimedia.org/wiki/File:HTML5_de_Erick_Dimas.jpg 
Hypertext Editing System (H...
Prochain SlideShare
Chargement dans…5
×

#4 css 101

829 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
829
Sur SlideShare
0
Issues des intégrations
0
Intégrations
409
Actions
Partages
0
Téléchargements
20
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

×