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

Soyez acteur du Web !

Cascading Style Sheetou la séparation fond - forme

Nicolas Delestre

Les CSS, pourquoi ?

● Le responsive design

PC

Tablette

Ordiphone

Impression

Les CSS, pourquoi ?

● Le responsive design● Les personnes malvoyantes

Texte adapté aux malvoyantsTexte sans aucune mise en page

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

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

Où déclarer le CSS ?

● Fichier séparé (.css)● Utilisation de la balise link

<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

Mettre en forme

● Un exemple : une CSS pour respecter un minimum la typographie française

Mettre en forme

● Grâce au nom des balises<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

Mettre en forme





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

Mettre en forme





li { list-style-type:none; text-indent:-0.5cm}li:before {content:"- "}li:first-child {margin-top: -1em}



Mettre en forme

● Grâce à un identifiant<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>






Mettre en forme

● Grâce à un identifiant<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>




#remarque { color : red; margin-top: 1em; font-style : italic;}



Mettre en forme

● Grâce à● Grâce à l'appartenance à une classe<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>...</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 ?


Mettre en forme

● En résumé<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>...</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;}

Ordre de prise en compte des styles● Un document HTML est une hiérarchie

<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>




meta link title

p h1 h2 p p p ul h2

li li li

html

head

body

Ordre de prise en compte des styles● Cascade de mise en forme

<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>




meta link title

p h1 h2 p p p ul h2

li li li

html

head

body

cascade.css






meta link title

p h1 h2 p p p ul h2

li li li

html

head

body

cascade.css

body { color : blue;}






meta link title

p h1 h2 p p p ul h2

li li li

html

head

body

cascade.cssbody { color : blue;}ul { color : green;}






meta link title

p h1 h2 p p p ul h2

li li li

html

head

body

cascade.cssbody { color : blue;}ul { color : green;}

Ordre de prise en compte des styles● Priorités aux identifiants

<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>




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;}

Ordre de prise en compte des styles● Priorités aux identifiants

<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>




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;}

Ordre de prise en compte des styles● Priorités aux classes

<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>




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;}

Ordre de prise en compte des styles● Priorités aux classes

<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>




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;}

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/

Documents

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