#4 css 101
Click here to load reader
-
Upload
jean-michel -
Category
Software
-
view
544 -
download
1
description
Transcript of #4 css 101
![Page 1: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/1.jpg)
CSS 101 : Mise en forme
![Page 2: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/2.jpg)
Le CSS ?
![Page 3: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/3.jpg)
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 HTMLSource : wikipedia.org
![Page 4: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/4.jpg)
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.
![Page 5: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/5.jpg)
Mise en place
![Page 6: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/6.jpg)
CSS dans une page HTML (1)
<!DOCTYPE html> <html> <head> </head> <body> <h1 style="color: red;">Lorem ipsum.</h1> </body> </html>
![Page 7: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/7.jpg)
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>
![Page 8: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/8.jpg)
Fonctionnement
![Page 9: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/9.jpg)
selecteur{ propriété: valeur; propriété: valeur; } !selecteur{ propriété: valeur; }
Première feuille de style
![Page 10: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/10.jpg)
Première feuille de style
h1{ color: blue; font-size: 20px; } !p{ color: red; }
SelecteurPropriétés
Valeurs
![Page 11: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/11.jpg)
Selecteurs
![Page 12: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/12.jpg)
Une balise
h1{ color: blue; font-size: 20px; } !p{ color: red; }
![Page 13: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/13.jpg)
Une class
.titre{ color: blue; font-size: 20px; } !.toto{ color: red; }
![Page 14: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/14.jpg)
Une id
#titre{ color: blue; font-size: 20px; } !#toto{ color: red; }
![Page 15: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/15.jpg)
Selection multiple
#titre, #super, #youpi{ color: blue; font-size: 20px; }
![Page 16: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/16.jpg)
Selection via inclusion
#titre ul li a{ color: blue; font-size: 20px; }
![Page 17: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/17.jpg)
Pseudo classe
#titre ul li:hover a{ color: red; }
![Page 18: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/18.jpg)
Propriétés
![Page 19: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/19.jpg)
Taille du texte
h1{ font-size: 20px; } !p{ font-size: 1.1em; }
![Page 20: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/20.jpg)
Couleurs
h1{ color: red; } !p{ color: #f03838; }
![Page 21: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/21.jpg)
Format du texte
h1{ text-decoration: underline; font-style: italic; } !a{ text-decoration: none; font-weight: bold; } !p{ color: #f03838; }
![Page 22: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/22.jpg)
Police (1)
body{ font-family: "Open Sans", arial, sans-serif; }
![Page 23: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/23.jpg)
Police (2)
<head> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> </head>
![Page 24: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/24.jpg)
Police (3)
http://www.fontsquirrel.com/tools/webfont-generator
![Page 25: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/25.jpg)
Alignement
h1{ text-align: center; } !h2{ text-align: right; }
![Page 26: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/26.jpg)
Liste
ul{ list-style: none; } !ol{ list-style: square; }
![Page 27: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/27.jpg)
Bordures
header{ border-bottom: 1px solid #303030; }
header{ border: 3px dashed red; }
![Page 28: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/28.jpg)
Merci pour votre attention.
![Page 29: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/29.jpg)
BibliographieBien 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/
HTML5 : structure globale du document -Simon-K http://www.alsacreations.com/article/lire/1374-html-5-structure-globale-du-document.html
A vocabulary and associated APIs for HTML and XHTML - W3C http://www.w3.org/TR/html5/
![Page 30: #4 css 101](https://reader037.fdocuments.fr/reader037/viewer/2022100305/5598406c1a28ab0a218b456b/html5/thumbnails/30.jpg)
CréditsHTML5 - 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