soyez acteur du web - fun · 2015-12-17 · les css, pourquoi ? le responsive design les personnes...
TRANSCRIPT
![Page 1: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/1.jpg)
Soyez acteur du Web !
Cascading Style Sheetou la séparation fond - forme
Nicolas Delestre
![Page 2: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/2.jpg)
Les CSS, pourquoi ?
● Le responsive design
PC
Tablette
Ordiphone
Impression
![Page 3: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/3.jpg)
Les CSS, pourquoi ?
● Le responsive design● Les personnes malvoyantes
Texte adapté aux malvoyantsTexte sans aucune mise en page
![Page 4: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/4.jpg)
Les CSS, pourquoi ?
● Le responsive design● Les personnes malvoyantes● Les métiers du Web
– Site Web de A à Z réalisé par différentes personnes :● Informaticien● Infographiste● Web-designer
● Développer de programmes pour gérer du contenus● Avoir des serveurs performants● Gérer les évolutions technologiques● Respecter des normes et standards
● Déterminer la charte graphique :● Couleurs● Polices de caractères
● Déterminer les logos● Organiser les pages● Adapter la charte graphique
![Page 5: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/5.jpg)
Que peut-on faire avec les CSS ?
● Mise en forme – polices de caractères (type, taille, couleur, etc.)
– paragraphes (alignement, retrait de première ligne, espacement, etc.)
– cadres et tableaux (bordure, espacement, etc.)
● Positionnement des objets sur l'écran– relatif
– absolu
● Adaptation des média
![Page 6: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/6.jpg)
Où déclarer le CSS ?
● Fichier séparé (.css)● Utilisation de la balise link
<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="francais.css" rel="stylesheet" type="text/css" media="all"/> <title>Un exemple pour le CSS</title> </head> <body>
Lier le document à un autre document
URL de la feuille CSS
Rôle de cette liaison
Type du document liéCadre d'utilisation :● all● aural● braille● handheld● projection● print● screen● tv
![Page 7: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/7.jpg)
Mettre en forme
● Un exemple : une CSS pour respecter un minimum la typographie française
![Page 8: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/8.jpg)
Mettre en forme
● Grâce au nom des balises<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="francais.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p>Le texte qui suit est issu de Wikipédia</p> <h1>Histoire de CSS</h1> <h2>Un concept parmi d'autres, présent dès l'origine du web</h2> <p>Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p>Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p>Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2>Les premiers développements</h2> ... </body></html>
● Retrait première ligne● Espace entre paragraphes● Justification● Tirets pour les listes● Remarque mise en évidence● Numérotation des chapitres
![Page 9: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/9.jpg)
Mettre en forme
● Grâce au nom des balises<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="francais.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p>Le texte qui suit est issu de Wikipédia</p> <h1>Histoire de CSS</h1> <h2>Un concept parmi d'autres, présent dès l'origine du web</h2> <p>Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p>Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p>Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2>Les premiers développements</h2> ... </body></html>
p { text-align : justify; text-indent: 0.5cm; margin-top: -1em;}
extrait de francais.css
● Retrait première ligne● Espace entre paragraphes● Justification● Remarque mise en évidence● Tirets pour les listes● Numérotation des chapitres
![Page 10: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/10.jpg)
Mettre en forme
● Grâce au nom des balises<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="francais.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p>Le texte qui suit est issu de Wikipédia</p> <h1>Histoire de CSS</h1> <h2>Un concept parmi d'autres, présent dès l'origine du web</h2> <p>Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p>Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p>Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2>Les premiers développements</h2> ... </body></html>
li { list-style-type:none; text-indent:-0.5cm}li:before {content:"- "}li:first-child {margin-top: -1em}
extrait de francais.css
● Retrait première ligne● Espace entre paragraphes● Justification● Tirets pour les listes● Remarque mise en évidence● Numérotation des chapitres
![Page 11: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/11.jpg)
Mettre en forme
● Grâce à un identifiant<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="francais.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p>Le texte qui suit est issu de Wikipédia</p> <h1>Histoire de CSS</h1> <h2>Un concept parmi d'autres, présent dès l'origine du web</h2> <p>Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p>Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p>Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2>Les premiers développements</h2> ... </body></html>
extrait de francais.css
● Retrait première ligne● Espace entre paragraphes● Justification● Tirets pour les listes● Remarque mise en évidence● Numérotation des chapitres
![Page 12: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/12.jpg)
Mettre en forme
● Grâce à un identifiant<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="francais.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p id="remarque">Le texte qui suit est issu de Wikipédia</p> <h1>Histoire de CSS</h1> <h2>Un concept parmi d'autres, présent dès l'origine du web</h2> <p>Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p>Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p>Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2>Les premiers développements</h2> ... </body></html>
#remarque { color : red; margin-top: 1em; font-style : italic;}
extrait de francais.css
● Retrait première ligne● Espace entre paragraphes● Justification● Tirets pour les listes● Remarque mise en évidence● Numérotation des chapitres
![Page 13: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/13.jpg)
Mettre en forme
● Grâce à● Grâce à l'appartenance à une classe<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="francais.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p id="remarque">Le texte qui suit est issu de Wikipédia</p> <h1 class="compteur">Histoire de CSS</h1> <h2 class="compteur">Un concept parmi d'autres, présent dès l'origine du web</h2> <p>Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p>Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p>Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2 class="compteur">Les premiers développements</h2> ... </body></html>
body { counter-reset: h1 h2 h3;}
h1.compteur:before { content: counter(h1) " - "; counter-increment: h1;}
extrait de francais.cssExercice
Quel code CSS permet de
numéroter h2 ?
● Retrait première ligne● Espace entre paragraphes● Justification● Tirets pour les listes● Remarque mise en évidence● Numérotation des chapitres
![Page 14: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/14.jpg)
Mettre en forme
● En résumé<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="francais.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p id="remarque">Le texte qui suit est issu de Wikipédia</p> <h1 class="compteur">Histoire de CSS</h1> <h2 class="compteur">Un concept parmi d'autres, présent dès l'origine du web</h2> <p>Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p>Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p>Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2 class="compteur">Les premiers développements</h2> ... </body></html>
p { text-align : justify; text-indent: 0.5cm; margin-top: -1em;}
li { list-style-type:none; text-indent:-0.5cm}li:before {content:"- "}li:first-child {margin-top: -1em}
#remarque { color : red; margin-top: 1em; font-style : italic;}
body { counter-reset: h1 h2 h3;}
h1.compteur:before { content: counter(h1) " - "; counter-increment: h1;}
![Page 15: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/15.jpg)
Ordre de prise en compte des styles● Un document HTML est une hiérarchie
<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="exempleCascade.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p id="remarque">Le texte qui suit est issu de Wikipédia</p> <h1>Histoire de CSS</h1> <h2>Un concept parmi d'autres, présent dès l'origine du web</h2> <p>Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p>Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p>Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2>Les premiers développements</h2> ... </body></html>
meta link title
p h1 h2 p p p ul h2
li li li
html
head
body
![Page 16: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/16.jpg)
Ordre de prise en compte des styles● Cascade de mise en forme
<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="cascade.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p>Le texte qui suit est issu de Wikipédia</p> <h1>Histoire de CSS</h1> <h2>Un concept parmi d'autres, présent dès l'origine du web</h2> <p>Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p>Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p>Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2>Les premiers développements</h2> ... </body></html>
meta link title
p h1 h2 p p p ul h2
li li li
html
head
body
cascade.css
![Page 17: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/17.jpg)
Ordre de prise en compte des styles● Cascade de mise en forme
<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="cascade.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p>Le texte qui suit est issu de Wikipédia</p> <h1>Histoire de CSS</h1> <h2>Un concept parmi d'autres, présent dès l'origine du web</h2> <p>Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p>Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p>Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2>Les premiers développements</h2> ... </body></html>
meta link title
p h1 h2 p p p ul h2
li li li
html
head
body
cascade.css
body { color : blue;}
![Page 18: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/18.jpg)
Ordre de prise en compte des styles● Cascade de mise en forme
<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="cascade.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p>Le texte qui suit est issu de Wikipédia</p> <h1>Histoire de CSS</h1> <h2>Un concept parmi d'autres, présent dès l'origine du web</h2> <p>Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p>Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p>Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2>Les premiers développements</h2> ... </body></html>
meta link title
p h1 h2 p p p ul h2
li li li
html
head
body
cascade.cssbody { color : blue;}ul { color : green;}
![Page 19: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/19.jpg)
Ordre de prise en compte des styles● Cascade de mise en forme
<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="cascade.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p>Le texte qui suit est issu de Wikipédia</p> <h1>Histoire de CSS</h1> <h2>Un concept parmi d'autres, présent dès l'origine du web</h2> <p>Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p>Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p>Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2>Les premiers développements</h2> ... </body></html>
meta link title
p h1 h2 p p p ul h2
li li li
html
head
body
cascade.cssbody { color : blue;}ul { color : green;}
![Page 20: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/20.jpg)
Ordre de prise en compte des styles● Priorités aux identifiants
<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="cascade.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p id="remarque">Le texte qui suit est issu de Wikipédia</p> <h1>Histoire de CSS</h1> <h2>Un concept parmi d'autres, présent dès l'origine du web</h2> <p>Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p>Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p>Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2>Les premiers développements</h2> ... </body></html>
meta link title
p h1 h2 p p p ul h2
li li li
html
head
body
cascade.cssbody { color : blue;}ul { color : green;}#remarque { color : red;}
![Page 21: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/21.jpg)
Ordre de prise en compte des styles● Priorités aux identifiants
<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="cascade.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p id="remarque">Le texte qui suit est issu de Wikipédia</p> <h1>Histoire de CSS</h1> <h2>Un concept parmi d'autres, présent dès l'origine du web</h2> <p>Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p>Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p>Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2>Les premiers développements</h2> ... </body></html>
meta link title
p h1 h2 p p p ul h2
li li li
html
head
body
cascade.cssbody { color : blue;}ul { color : green;}#remarque { color : red;}
![Page 22: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/22.jpg)
Ordre de prise en compte des styles● Priorités aux classes
<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="cascade.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p id="remarque">Le texte qui suit est issu de Wikipédia</p> <h1>Histoire de CSS</h1> <h2>Un concept parmi d'autres, présent dès l'origine du web</h2> <p class="para">Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p class="para">Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p class="para">Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2>Les premiers développements</h2> ... </body></html>
meta link title
p h1 h2 p p p ul h2
li li li
html
head
body
cascade.cssbody { color : blue;}ul { color : green;}#remarque { color : red;}.para { color : magenta;}
![Page 23: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/23.jpg)
Ordre de prise en compte des styles● Priorités aux classes
<!--DOCTYPE HTML --><html> <head> <meta charset="UTF-8"/> <link href="cascade.css" rel="stylesheet" type="text/css" media="all"> <title>Un exemple pour le CSS</title> </head> <body> <p id="remarque">Le texte qui suit est issu de Wikipédia</p> <h1>Histoire de CSS</h1> <h2>Un concept parmi d'autres, présent dès l'origine du web</h2> <p class="para">Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web permet de mettre en forme les documents...</p> <p class="para">Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières...</p> <p class="para">Les origines des CSS sont donc liées à trois alternatives majeures :</p> <ul>
<li>HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?</li>
<li>Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?</li>
<li>...</li> </ul> ... <h2>Les premiers développements</h2> ... </body></html>
meta link title
p h1 h2 p p p ul h2
li li li
html
head
body
cascade.cssbody { color : blue;}ul { color : green;}#remarque { color : red;}.para { color : magenta;}
![Page 24: Soyez acteur du Web - FUN · 2015-12-17 · Les CSS, pourquoi ? Le responsive design Les personnes malvoyantes Les métiers du Web – Site Web de A à Z réalisé par différentes](https://reader033.vdocuments.mx/reader033/viewer/2022050523/5fa6a8c3ce86c00e07194e63/html5/thumbnails/24.jpg)
Conclusion
● Les CSS permettent de séparer le fond de la forme● La mise en forme peut être fonction des balises, des
identifiants et des classes● La cascade de mise en forme● Pour plus d'information :
http://www.yoyodesign.org/doc/w3c/css2/cover.html
http://www.w3.org/TR/CSS2/