COURS HTML / CSS
Différence HTML / CSS

Le rôle principal d'HTML est de décrire le contenu : titre, sous-titre, formulaire,
champ, lien, ab...
Différence HTML / CSS

Le rôle du CSS est de mettre en forme ce contenu : couleur, image de fond, police de
caractère, bor...
<h1>Mon site</h1>

Différence HTML / CSS

<h2>Présentation</h2>
<p>Bienvenue sur <strong>mon site</strong> ! Je suis un ét...
Différence HTML / CSS

Axel Chalon – Cours HTML/CSS H1 P2018
Différence HTML / CSS
En utilisant un reset CSS qui annule les effets de la feuille de style du
navigateur en mettant tout...
Différence HTML / CSS

Axel Chalon – Cours HTML/CSS H1 P2018
Différence entre HTML et CSS

http://www.csszengarden.com/

Axel Chalon – Cours HTML/CSS H1 P2018
Différence entre HTML, CSS, Javascript et PHP

http://www.csszengarden.com/

Axel Chalon – Cours HTML/CSS H1 P2018
Différence entre HTML, CSS, Javascript et PHP

http://www.csszengarden.com/

Axel Chalon – Cours HTML/CSS H1 P2018
Différence entre HTML, CSS, Javascript et PHP

http://www.csszengarden.com

Axel Chalon – Cours HTML/CSS H1 P2018
HTML5 / CSS3

HTML5 : entre autres, nouvelles balises qui décrivent encore plus le contenu
(<article>, <header>, etc.)
CSS...
Les commentaires

HTML

<p>Hi</p> <!-- On
affiche "Hi" -->

/* une ou
plusieurs
lignes */

div { color: blue; } /* le
text...
Liens absolus et relatifs

mon_site

index.html

contact.html

images

logo_hetic.png

style

design.css

Axel Chalon – Co...
Liens absolus et relatifs

mon_site

index.html

contact.html

images

style

images/logo_hetic.png
<img src="images/logo_...
Liens absolus et relatifs

mon_site

index.html

contact.html

images

style

../
../images/logo_hetic.png
background: url...
Types de balise HTML

Balises ouvrantes et fermantes <balise>contenu</balise>
<p>Du contenu ici. <a href="http://google.fr...
Structure d'une page HTML
<!doctype html>
<html>
<head>
<title>Bonjour</title>
</head>
<body>

html
head

title

body
div
...
Structure d'une page HTML
<!doctype html>
<html>
<head>
<title>Bonjour</title>
</head>
<body>

html
head

body

title

div...
Sélecteurs CSS
li { color: blue; }
div h1 { font-size: 40px; }

html
head

body

title

div

div li { color: blue; }
ul li...
Sélecteurs CSS
ul li, h1, p { color: blue;}

ul li { color: blue; }
h1 { color: blue; }
p { color: blue; }
<!doctype html>...
Sélecteurs CSS
h1 + p { font-weight: bold; }
body > p { color: red; }

= tous les p directement précédés d'un h1

= tous l...
Insérer du CSS

Fichier externe (surtout si plusieurs pages utilisent le même CSS)
<!doctype html>
<html>
<head>
<title>Ti...
Insérer du CSS

Balise <style> (pour un CSS utilisé que sur une page)
<!doctype html>
<html>
<head>
<title>Titre de la pag...
Insérer du CSS

Appliqué directement à l'élément (déconseillé)
<p style="color: red;">Bonjour.</p>

Axel Chalon – Cours HT...
CSS box model

→ exemple
Axel Chalon – Cours HTML/CSS H1 P2018
display: block;
Block :
- Hauteur par défaut en fonction du contenu
- Largeur par défaut maximale (largeur de
l'élément pa...
display: block;

Axel Chalon – Cours HTML/CSS H1 P2018
display: block;

Axel Chalon – Cours HTML/CSS H1 P2018
display: inline;
Inline :
- Hauteur en fonction du contenu
- Largeur en fonction du contenu
- width, height et margin non ...
display: inline-block;
Inline-block :
- Hauteur en fonction du contenu
- Largeur en fonction du contenu
- width, height, m...
display: inline-block;

Axel Chalon – Cours HTML/CSS H1 P2018
display: inline-block;

Axel Chalon – Cours HTML/CSS H1 P2018
display

Axel Chalon – Cours HTML/CSS H1 P2018
display

Rouge = block
Bleu = inline
Violet = inline-block
Axel Chalon – Cours HTML/CSS H1 P2018
Balises HTML
Elements de type bloc par défaut :

Des éléments inline ne peuvent
que contenir des éléments inline.

<h1>Tit...
ID et classes

Pas d'espace ni d'accent
dans les noms d'id et de
classes. Ils ne doivent pas
non plus commencer par un
chi...
CSS
#commentaires { background: blue;}

html body div#content ul#commentaires { background: blue;}

ul#commentaires li { c...
Propriétés CSS : texte
color: #FF0000;
font-family: Droid, Impact, Tahoma, Arial, serif;
font-size: 14px;
font-weight: nor...
Propriétés CSS : texte

"serif" dans font-family = police à empattements par défaut
de la machine
"sans-serif" dans font-f...
Centrer horizontalement une balise de type bloc

margin: auto;
(Calcule automatiquement les marges de gauche et de droite ...
Centrer horizontalement du contenu en ligne (balise inline
ou inline-block)

text-align: center;
Permet de centrer le cont...
Les pseudo-classes

:hover activé au survol de la souris
a:hover { background: pink; }
:link (liens non visités)
:visited ...
Les pseudo-classes

:first-child pour le premier élément enfant
:last-child pour le dernier élément enfant
ul#menu li:firs...
Les pseudo-éléments
<q>On peut tromper mille
fois une personne...</q>

q:before {
content: "Citation : << ";
}
q:after {
c...
Les pseudo-éléments
<q>On peut tromper mille
fois une personne...</q>

q:before { content: "Citation : "; font-style: ital...
overflow

overflow:

visible; (défaut) (le contenu qui dépasse s'affiche, mais hors du flux)
hidden; (le contenu qui dépas...
overflow

Axel Chalon – Cours HTML/CSS H1 P2018
visibility: hidden VS display: none
Propriété appliquée au bloc en rose :
(visibility: visible)
visibility: hidden

displa...
Les "super-propriétés"

border-left: 1px solid black;

border-left-width: 1px;
border-left-type: solid;
border-left-color:...
Les "super-propriétés"

border: 1px solid black;

border-left-width: 1px;
border-left-type: solid;
border-left-color: blac...
Les "super-propriétés"
margin: 20px;

margin: 20px 5px;

margin: 20px 5px 10px;

margin: 5px 10px 15px 20px;

margin-top: ...
Les "super-propriétés"

background: #000000 url(fond.png) right bottom no-repeat;

background-color: #000000;
background-i...
Les "super-propriétés"

background: #000000 url(fond.png) right bottom no-repeat;

background-color: #000000;
background-i...
background-repeat

background: white url(point.png) center center no-repeat;

Axel Chalon – Cours HTML/CSS H1 P2018
background-repeat

background: url(point.png) repeat;

Axel Chalon – Cours HTML/CSS H1 P2018
background-repeat

background: url(degrade.png) repeat-x;

Axel Chalon – Cours HTML/CSS H1 P2018
background-repeat

background: url(degrade.png) repeat-y;

Axel Chalon – Cours HTML/CSS H1 P2018
Positionnemenent en CSS
position: static;

Par défaut. L'élément est dans le flux.

position: relative;

L'élément reste d...
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

position: absolute;
top: 0;
left: 0;

position: absolute;
bo...
<div>
<div></div>
</div>

Positionnement absolu

position: relative;

position: absolute;
top:30px;
bottom: 0;
left: 30px;...
Positionnement relatif

position: relative;
top: -5px;
left:-5px;

Axel Chalon – Cours HTML/CSS H1 P2018
<body>
<div>
<div></div>
</div>
Positionnement relatif
</body>
div verte en position: absolute; left: 0; top: 0;
En bleu f...
z-index
z-index: 100;
Plus le z-index est élevé, plus l'élément sera "au-dessus", sera au premier plan.
Ne s'applique qu'a...
Les float

Axel Chalon – Cours HTML/CSS H1 P2018
<div>Element en float: left;</div>
<p>Lorem ipsum... </p>

Les float
Notez comment le flottant a été "ingéré" par l'élémen...
<div>Element en float: left;</div>
<div>Element en float: left;</div>
<p>Lorem ipsum... </p>

Les float
On peut mettre plu...
<div>Element en float: left;</div>
<div>Element en float: right;</div>
<p>Lorem ipsum... </p>

Les float
On peut mettre pl...
<div>Element en float: left;</div>
<p>Lorem ipsum... </p>

Les float

Une marge appliquée à l'élément suivant le flottant ...
<div>Element en float: left;</div>
<p>Lorem ipsum... </p>
<p>Lorem ipsum... </p>
<p>Lorem ipsum... </p>

Element
en
float:...
<div>Element en float: left;</div>
<p>Lorem ipsum... </p>
<p>Element en clear: both </p>
<p>Autre élément quelconque... </...
<div>Element en float: left;</div>
<p>Lorem ipsum... </p>

Les float

Element
en
float: left;

Lorem ipsum lorem ipsum lor...
<div>Element en float: left;</div>
<p>Lorem ipsum... </p>
<div>Element en clear: both;</div>

Element
en
float: left;

Les...
<div>Element en float: left;</div>
<p>Lorem ipsum... </p>
<div></div>

Element
en
float: left;

Les float

Lorem ipsum lor...
Merci !

Axel Chalon – Cours HTML/CSS H1 P2018
Prochain SlideShare
Chargement dans…5
×

Cours HTML/CSS

2 144 vues

Publié le

Exercices pratiques avec code source commenté : http://takz.netau.net/htmlcss_exos.zip

0 commentaire
6 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 144
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
199
Commentaires
0
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Cours HTML/CSS

  1. 1. COURS HTML / CSS
  2. 2. Différence HTML / CSS Le rôle principal d'HTML est de décrire le contenu : titre, sous-titre, formulaire, champ, lien, abréviation, citation, passage important... Axel Chalon – Cours HTML/CSS H1 P2018
  3. 3. Différence HTML / CSS Le rôle du CSS est de mettre en forme ce contenu : couleur, image de fond, police de caractère, bordures, agencement... Axel Chalon – Cours HTML/CSS H1 P2018
  4. 4. <h1>Mon site</h1> Différence HTML / CSS <h2>Présentation</h2> <p>Bienvenue sur <strong>mon site</strong> ! Je suis un étudiant à <abbr title="Hautes études des technologies de l'information et de la communication">HETIC</abbr>. Leur slogan est <q>Rien n'est fait s'il reste encore à faire</q>. Je vous conseille de visiter le <a href="http://hetic.net">site officiel de l'école</a> dont le logo est <img src="hetic.png" alt="logo hetic" />.</p> <blockquote> <p>Première grande école du web, la pluricompétence est au coeur de notre pédagogie. Choisir HETIC, c'est [...]</p> <p>Les Héticiens trouvent sans mal le poste de leur choix en entreprise. [...]</p> </blockquote> <p>Les trois grands axes sont : </p> <ul> <li>Communication et création multimédia</li> <li>Technologies de l'information</li> <li>Connaissance du monde et des entreprises</li> </ul> <h2>Contact</h2> Axel Chalon – Cours HTML/CSS H1 P2018
  5. 5. Différence HTML / CSS Axel Chalon – Cours HTML/CSS H1 P2018
  6. 6. Différence HTML / CSS En utilisant un reset CSS qui annule les effets de la feuille de style du navigateur en mettant toutes les marges à zéro, etc. (conseillé : Meyer CSS Reset), résultat : Conseillé de tout le temps utilisé un reset. Permet d'avoir un site qui s'affiche de la même manière sur tous les navigateurs et permet d'éviter de s'embrouiller avec les propriétés CSS ajoutées par le navigateur. Axel Chalon – Cours HTML/CSS H1 P2018
  7. 7. Différence HTML / CSS Axel Chalon – Cours HTML/CSS H1 P2018
  8. 8. Différence entre HTML et CSS http://www.csszengarden.com/ Axel Chalon – Cours HTML/CSS H1 P2018
  9. 9. Différence entre HTML, CSS, Javascript et PHP http://www.csszengarden.com/ Axel Chalon – Cours HTML/CSS H1 P2018
  10. 10. Différence entre HTML, CSS, Javascript et PHP http://www.csszengarden.com/ Axel Chalon – Cours HTML/CSS H1 P2018
  11. 11. Différence entre HTML, CSS, Javascript et PHP http://www.csszengarden.com Axel Chalon – Cours HTML/CSS H1 P2018
  12. 12. HTML5 / CSS3 HTML5 : entre autres, nouvelles balises qui décrivent encore plus le contenu (<article>, <header>, etc.) CSS3 : animations, effets 3D, dégradés, ombres... Source : www.alsacreations.com Axel Chalon – Cours HTML/CSS H1 P2018
  13. 13. Les commentaires HTML <p>Hi</p> <!-- On affiche "Hi" --> /* une ou plusieurs lignes */ div { color: blue; } /* le texte sera en bleu */ JavaScript PHP /* une ou plusieurs lignes */ /* une ou plusieurs lignes */ // une ligne <!-- une ou plusieurs lignes --> CSS // une ligne /* Blabla Utilité : servir d'exemple */ /* Blabla Utilité : servir d'exemple */ // cette ligne initialise a à 2 var a=2; // initialise a à 2 $a=2; // initialise a à 2 Axel Chalon – Cours HTML/CSS H1 P2018
  14. 14. Liens absolus et relatifs mon_site index.html contact.html images logo_hetic.png style design.css Axel Chalon – Cours HTML/CSS H1 P2018
  15. 15. Liens absolus et relatifs mon_site index.html contact.html images style images/logo_hetic.png <img src="images/logo_hetic.png" alt="" /> logo_hetic.png design.css Axel Chalon – Cours HTML/CSS H1 P2018
  16. 16. Liens absolus et relatifs mon_site index.html contact.html images style ../ ../images/logo_hetic.png background: url(../images/logo_hetic.png); logo_hetic.png design.css Axel Chalon – Cours HTML/CSS H1 P2018
  17. 17. Types de balise HTML Balises ouvrantes et fermantes <balise>contenu</balise> <p>Du contenu ici. <a href="http://google.fr">Google</a>.</p> <div>Du contenu ici</div> ... Balises autofermantes <balise /> <br /> <img src="logo.png" alt="logo" /> <meta charset="utf-8" /> ... Axel Chalon – Cours HTML/CSS H1 P2018
  18. 18. Structure d'une page HTML <!doctype html> <html> <head> <title>Bonjour</title> </head> <body> html head title body div <div id="header"> <h1>Titre de la page</h1> <ul id="menu"> <li>Accueil</li> <li>Portfolio</li> <li>Blog</li> <li>Contact</li> </ul> </div> h1 li li li li p <p>Ceci est une page d'exemple.</p> </body> </html> Axel Chalon – Cours HTML/CSS H1 P2018
  19. 19. Structure d'une page HTML <!doctype html> <html> <head> <title>Bonjour</title> </head> <body> html head body title div <div id="header"> <h1>Titre de la page</h1> <ul id="menu"> <li>Accueil</li> <li>Portfolio</li> <li>Blog</li> <li>Contact</li> </ul> </div> h1 p ul li li li li <p>Ceci est une page d'exemple.</p> </body> </html> Axel Chalon – Cours HTML/CSS H1 P2018
  20. 20. Sélecteurs CSS li { color: blue; } div h1 { font-size: 40px; } html head body title div div li { color: blue; } ul li, h1, p { color: blue; } <!doctype html> <html> <head> <title>Bonjour</title> </head> <body> h1 p ul li li li li <div id="header"> <h1>Titre de la page</h1> <ul id="menu"> <li>Accueil</li> <li>Portfolio</li> <li>Blog</li> <li>Contact</li> </ul> </div> <p>Ceci est une page d'exemple.</p> </body> </html> Axel Chalon – Cours HTML/CSS H1 P2018
  21. 21. Sélecteurs CSS ul li, h1, p { color: blue;} ul li { color: blue; } h1 { color: blue; } p { color: blue; } <!doctype html> <html> <head> <title>Bonjour</title> </head> <body> html head body title div h1 p ul li li li li <div id="header"> <h1>Titre de la page</h1> <ul id="menu"> <li>Accueil</li> <li>Portfolio</li> <li>Blog</li> <li>Contact</li> </ul> </div> <p>Ceci est une page d'exemple.</p> </body> </html> Axel Chalon – Cours HTML/CSS H1 P2018
  22. 22. Sélecteurs CSS h1 + p { font-weight: bold; } body > p { color: red; } = tous les p directement précédés d'un h1 = tous les p dont le 1er parent (le parent le plus proche) est un body <!doctype html> <html> <head> <title>Bonjour</title> </head> <body> <h1>Titre</h1> <p>Premier paragraphe (sera en gras, en rouge)</p> <p>Deuxième paragraphe (sera en rouge)</p> <h1>Titre</h1> <p>Premier paragraphe (sera en gras, en rouge)</p> <p>Deuxième paragraphe (sera en rouge)</p> <div> <p>Bonjour.</p> <p>Bonsoir.</p> </div> </body> </html> Axel Chalon – Cours HTML/CSS H1 P2018
  23. 23. Insérer du CSS Fichier externe (surtout si plusieurs pages utilisent le même CSS) <!doctype html> <html> <head> <title>Titre de la page</title> <link rel="stylesheet" href="style.css" /> </head> <body> </body> </html> Dans le fichier style.css : body { background: black; } Axel Chalon – Cours HTML/CSS H1 P2018
  24. 24. Insérer du CSS Balise <style> (pour un CSS utilisé que sur une page) <!doctype html> <html> <head> <title>Titre de la page</title> <style> div#content { width: 960px; margin: auto; } </style> </head> <body> <div id="content"> (blablabla) </div> </body> </html> Axel Chalon – Cours HTML/CSS H1 P2018
  25. 25. Insérer du CSS Appliqué directement à l'élément (déconseillé) <p style="color: red;">Bonjour.</p> Axel Chalon – Cours HTML/CSS H1 P2018
  26. 26. CSS box model → exemple Axel Chalon – Cours HTML/CSS H1 P2018
  27. 27. display: block; Block : - Hauteur par défaut en fonction du contenu - Largeur par défaut maximale (largeur de l'élément parent) - Largeur (width), hauteur (height), margin modifiables - Elements disposés verticalement élément bloc sans css width: 50px; height: 50px; width: 50px; height: 50px; Source : www.alsacreations.com Axel Chalon – Cours HTML/CSS H1 P2018
  28. 28. display: block; Axel Chalon – Cours HTML/CSS H1 P2018
  29. 29. display: block; Axel Chalon – Cours HTML/CSS H1 P2018
  30. 30. display: inline; Inline : - Hauteur en fonction du contenu - Largeur en fonction du contenu - width, height et margin non modifiables - Elements disposés côte à côte ("en ligne") (Souvent des morceaux de paragraphe) Source : www.alsacreations.com Axel Chalon – Cours HTML/CSS H1 P2018
  31. 31. display: inline-block; Inline-block : - Hauteur en fonction du contenu - Largeur en fonction du contenu - width, height, margin modifiables - Elements disposés côte à côte ("en ligne") et sont indivisibles → exemple Axel Chalon – Cours HTML/CSS H1 P2018
  32. 32. display: inline-block; Axel Chalon – Cours HTML/CSS H1 P2018
  33. 33. display: inline-block; Axel Chalon – Cours HTML/CSS H1 P2018
  34. 34. display Axel Chalon – Cours HTML/CSS H1 P2018
  35. 35. display Rouge = block Bleu = inline Violet = inline-block Axel Chalon – Cours HTML/CSS H1 P2018
  36. 36. Balises HTML Elements de type bloc par défaut : Des éléments inline ne peuvent que contenir des éléments inline. <h1>Titre</h1> <h2>Sous-titre</h2> <h3>Sous-sous-titre</h3> <h4>Sous-sous-sous-titre</h4> <h5>Sous-sous-sous-sous-titre</h5> <h6>Sous-sous-sous-sous-sous-titre</h6> <div>Bloc</div> <p>Paragraphe</p> Elements de type en ligne (inline) par défaut : <span>Contenu ici.</span> <em>Passage important.</em> <strong>Passage encore plus important.</strong> <a href="http://hetic.net">Site d'HETIC</a> <img src="images/logo.png" alt="logo du site" /> Axel Chalon – Cours HTML/CSS H1 P2018
  37. 37. ID et classes Pas d'espace ni d'accent dans les noms d'id et de classes. Ils ne doivent pas non plus commencer par un chiffre. id : Unique, permet d'identifier l'élément (Max 1 id par élément ; deux éléments ne peuvent pas avoir le même id) <div id="content">Bonjour.</div> #content { background: blue; } div#content { background: red; } class : permet de catégoriser un élément (plusieurs éléments peuvent avoir les mêmes classes ; un élément peut avoir plusieurs classes) <p class="commentaire">Super !</p> <p class="commentaire">Génial !</p> .commentaire { background: blue; } p.commentaire { background: red; } Si une propriété a des valeurs différentes dans plusieurs règles appliquées à l'élément, c'est la valeur de la règle qui a le sélecteur le plus précis qui l'emportera. Ex: "body li.positif" est plus précis que "li.positif". Dans les exemples du haut, la <div> et les <p> auront un fond rouge. Axel Chalon – Cours HTML/CSS H1 P2018
  38. 38. CSS #commentaires { background: blue;} html body div#content ul#commentaires { background: blue;} ul#commentaires li { color: black; font-weight: bold; } ul#commentaires li.positif { color: green; } ul#commentaires li.negatif { color: gray; } ul#commentaires li.admin { border: 1px solid green; } ul#commentaires li.admin.positif { border: 2px solid green; } html <!doctype html> <html> <head> <title>Bonjour</title> </head> <body> head body title div <div id="content"> h1 ul <ul id="commentaires"> <li class="positif">Génia! (vert, gras)</div> <li>Pas mal. (noir, gras)</div> <li class="negatif">c nul (gris, gras)</div> p li li li <li class="negatif">LOLOLOLOL (gris, gras)</div> <li class="positif admin">Merci à tous ! (vert, gras, bordure 2px vert)</div> </ul> </div> li li </body> </html> Axel Chalon – Cours HTML/CSS H1 P2018
  39. 39. Propriétés CSS : texte color: #FF0000; font-family: Droid, Impact, Tahoma, Arial, serif; font-size: 14px; font-weight: normal; bold; text-decoration: font-style: none; underlined; normal; italic; Axel Chalon – Cours HTML/CSS H1 P2018
  40. 40. Propriétés CSS : texte "serif" dans font-family = police à empattements par défaut de la machine "sans-serif" dans font-family = police sans empattements par défaut de la machine Axel Chalon – Cours HTML/CSS H1 P2018
  41. 41. Centrer horizontalement une balise de type bloc margin: auto; (Calcule automatiquement les marges de gauche et de droite pour être centré) Ne pas oublier de spécifier la largeur du bloc, sinon il prend toute la largeur ! width: 250px; margin: auto; Axel Chalon – Cours HTML/CSS H1 P2018
  42. 42. Centrer horizontalement du contenu en ligne (balise inline ou inline-block) text-align: center; Permet de centrer le contenu d'un élément. Comme dans les logiciels de traitement de texte, on applique la justification ou l'alignement à un paragraphe, et pas à un mot, ou bien ça n'a pas de sens ! Donc ne pas utiliser un text-align sur un élément inline, ça ne marchera pas ! L'élément (block/inline-block) en bleu a un text-align: center; Axel Chalon – Cours HTML/CSS H1 P2018
  43. 43. Les pseudo-classes :hover activé au survol de la souris a:hover { background: pink; } :link (liens non visités) :visited (lien déjà visité) :hover (survol) :focus (champ de formulaire actif) :active (au moment du clic sur un lien) C'est un cas particulier où vous devez faire attention à l'ordre : - :hover doit être après :link et :visited - :active doit être après :hover Cela est dû au fait que a:link, a:visited, a:hover et a:active ont la même précision, donc en cas de propriétés avec des valeurs différentes dans ces règles CSS, ce sera la dernière règle CSS qui sera appliquée. Quand on est en train de cliquer sur un lien (:active), on a aussi la souris au-dessus du lien (:hover), mais c'est le :active qui doit prédominer, on met donc :active après :hover. Quand on passe la souris au-dessus (:hover) d'un lien nonvisité (:link) ou visité (:visited), c'est le :hover qui doit prédominer ; on met donc :hover après :link et :visited. Axel Chalon – Cours HTML/CSS H1 P2018
  44. 44. Les pseudo-classes :first-child pour le premier élément enfant :last-child pour le dernier élément enfant ul#menu li:first-child { color: blue; } ul#menu li:last-child { color: red; } <ul id="menu"> <li>Accueil</li> <li>Portfolio</li> <li>Blog</li> <li>Contact</li> </ul> Axel Chalon – Cours HTML/CSS H1 P2018
  45. 45. Les pseudo-éléments <q>On peut tromper mille fois une personne...</q> q:before { content: "Citation : << "; } q:after { content: " >>"; } Citation : << On peut tromper mille fois une personne... >> Axel Chalon – Cours HTML/CSS H1 P2018
  46. 46. Les pseudo-éléments <q>On peut tromper mille fois une personne...</q> q:before { content: "Citation : "; font-style: italic;} q:first-letter { font-weight: bold; } q:first-line { color: red; } Citation : On peut tromper mille fois une personne Axel Chalon – Cours HTML/CSS H1 P2018
  47. 47. overflow overflow: visible; (défaut) (le contenu qui dépasse s'affiche, mais hors du flux) hidden; (le contenu qui dépasse ne sera pas affiché) scroll; (barres de défilement ajoutées, même si le contenu ne dépasse pas) auto; (barres de défilements ajoutées si nécessaire) Axel Chalon – Cours HTML/CSS H1 P2018
  48. 48. overflow Axel Chalon – Cours HTML/CSS H1 P2018
  49. 49. visibility: hidden VS display: none Propriété appliquée au bloc en rose : (visibility: visible) visibility: hidden display: none Axel Chalon – Cours HTML/CSS H1 P2018
  50. 50. Les "super-propriétés" border-left: 1px solid black; border-left-width: 1px; border-left-type: solid; border-left-color: black; Axel Chalon – Cours HTML/CSS H1 P2018
  51. 51. Les "super-propriétés" border: 1px solid black; border-left-width: 1px; border-left-type: solid; border-left-color: black; border-right-width: 1px; border-right-type: solid; border-right-color: black; border-top-width: 1px; border-top-type: solid; border-top-color: black; border-bottom-width: 1px; border-bottom-type: solid; border-bottom-color: black; Axel Chalon – Cours HTML/CSS H1 P2018
  52. 52. Les "super-propriétés" margin: 20px; margin: 20px 5px; margin: 20px 5px 10px; margin: 5px 10px 15px 20px; margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 20px; margin-right: 5px; margin-bottom: 20px; margin-left: 5px; margin-top: 20px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px; Axel Chalon – Cours HTML/CSS H1 P2018
  53. 53. Les "super-propriétés" background: #000000 url(fond.png) right bottom no-repeat; background-color: #000000; background-image: url(fond.png); background-position: right bottom; background-repeat: no-repeat; background: blue url(hetic.png) right bottom no-repeat; Axel Chalon – Cours HTML/CSS H1 P2018
  54. 54. Les "super-propriétés" background: #000000 url(fond.png) right bottom no-repeat; background-color: #000000; background-image: url(fond.png); background-position: right bottom; background-repeat: no-repeat; Vous n'êtes pas obligé de donner les valeurs de chacune des propriétés (couleur, URL de l'image, position, répétition) dans la "super-propriété" background. Par contre, pour la "super-propriété" border, vous devez impérativement donner les trois valeurs (épaisseur, type de bordure, couleur). background: white; border: 1px solid black; Axel Chalon – Cours HTML/CSS H1 P2018
  55. 55. background-repeat background: white url(point.png) center center no-repeat; Axel Chalon – Cours HTML/CSS H1 P2018
  56. 56. background-repeat background: url(point.png) repeat; Axel Chalon – Cours HTML/CSS H1 P2018
  57. 57. background-repeat background: url(degrade.png) repeat-x; Axel Chalon – Cours HTML/CSS H1 P2018
  58. 58. background-repeat background: url(degrade.png) repeat-y; Axel Chalon – Cours HTML/CSS H1 P2018
  59. 59. Positionnemenent en CSS position: static; Par défaut. L'élément est dans le flux. position: relative; L'élément reste dans le flux à la position initiale. Il sert de bloc de référence pour le positionnement de blocs enfants en position: absolute; Possibilité de déplacer le bloc relativement à sa position initiale avec top, left, right, bottom. position: absolute; Sort du flux et peut se positionner comme demandé relativement à la plus proche balise parente qui est en position: relative, fixed, ou absolute ; ou, s'il n'y a pas de balise parente hors du flux, le positionnement se fera relativement au document. position: fixed; Sort du flux et est positionné relativement à la fenêtre. (restere au même endroit même quand on fait défiler la page) Axel Chalon – Cours HTML/CSS H1 P2018
  60. 60. <div> <div></div> <div></div> <div></div> <div></div> </div> position: absolute; top: 0; left: 0; position: absolute; bottom: 0; left: 0; Positionnement absolu position: relative; position: absolute; top: 0; right: 0; position: absolute; bottom: 0; right: 10px; Axel Chalon – Cours HTML/CSS H1 P2018
  61. 61. <div> <div></div> </div> Positionnement absolu position: relative; position: absolute; top:30px; bottom: 0; left: 30px; right: 0; Axel Chalon – Cours HTML/CSS H1 P2018
  62. 62. Positionnement relatif position: relative; top: -5px; left:-5px; Axel Chalon – Cours HTML/CSS H1 P2018
  63. 63. <body> <div> <div></div> </div> Positionnement relatif </body> div verte en position: absolute; left: 0; top: 0; En bleu foncé, le fond de votre page web. position: relative; Axel Chalon – Cours HTML/CSS H1 P2018
  64. 64. z-index z-index: 100; Plus le z-index est élevé, plus l'élément sera "au-dessus", sera au premier plan. Ne s'applique qu'aux éléments hors du flux (position: relative, fixed ou absolute) Mieux avec des grands pas (0, 10, 20, 30) au cas où il y a des ajouts : si on a des éléments qui ont un z-index de 1, 2, 3, 4, 5 et 6, et qu'après-coup on veut ajouter un élément qui soit placé entre l'élément de z-index 3 et l'élément de z-index 4, il faudra déplacer toute la suite d'un cran. On n'aurait pas eu ce problème si les zindex avaient été 10, 20, 30, 40, 50, 60 (on aurait donné au nouvel élément un zindex entre 30 et 40). Axel Chalon – Cours HTML/CSS H1 P2018
  65. 65. Les float Axel Chalon – Cours HTML/CSS H1 P2018
  66. 66. <div>Element en float: left;</div> <p>Lorem ipsum... </p> Les float Notez comment le flottant a été "ingéré" par l'élément qui le suit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in arcu Element adipiscing, tristique turpis at, en malesuada urna. Nam eget ipsum sed float: left; velit interdum fringilla eget at ante. Nunc ut nisl turpis. Nam aliquet tristique tellus, sit amet ullamcorper odio lobortis malesuada. Cras cursus egestas ante, at consectetur quam dignissim vel. Nunc molestie, erat eget vulputate venenatis, quam enim consectetur nisi, eu rhoncus risus libero in nunc. Axel Chalon – Cours HTML/CSS H1 P2018
  67. 67. <div>Element en float: left;</div> <div>Element en float: left;</div> <p>Lorem ipsum... </p> Les float On peut mettre plusieurs flottants les uns à la suite des autres (utile pour les mosaïques ; ou on peut utiliser des inline-block). Lorem ipsum dolor sit consectetur Element Element adipiscing, tristique en en malesuada urna. float: left; float: left; velit interdum fringilla Nunc ut nisl turpis. Nam aliquet tristique tellus, sit amet ullamcorper odio lobortis malesuada. Cras cursus egestas ante, at consectetur quam dignissim vel. Nunc molestie, erat eget vulputate venenatis, quam enim consectetur nisi, eu rhoncus risus libero in nunc. Axel Chalon – Cours HTML/CSS H1 P2018
  68. 68. <div>Element en float: left;</div> <div>Element en float: right;</div> <p>Lorem ipsum... </p> Les float On peut mettre plusieurs flottants les uns à la suite des autres (utile pour les mosaïques ; ou on peut utiliser des inline-block). Lorem ipsum dolor sit Element amet, consectetur en adipiscing elit. In in float: right; arcu adipiscing, sic tristique turpis at, in dolor sit amet, consectetur adipiscing elit. In in arcu elit adipiscing, tristique turpis at, malesuada urna. Nam eget ipsum sed velit interdum fringilla eget at ante. Nunc ut nisl turpis. Nam aliquet tristique tellus, sit amet dolor ullamcorper odio lobortis malesuada. Cras cursus quam egestas ante, at consectetur quam dignissim vel. Element en float: left; Axel Chalon – Cours HTML/CSS H1 P2018
  69. 69. <div>Element en float: left;</div> <p>Lorem ipsum... </p> Les float Une marge appliquée à l'élément suivant le flottant (ici un <p>). Permet de faire un design en colonnes. (On peut aussi utiliser plusieurs flottants sans marges, ou des inline-block, ou (déconseillé d'un point de vue sémantique) un tableau <table>). Element en float: left; margin-left: 200px; Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in arcu adipiscing, tristique turpis at, malesuada urna. Nam eget ipsum sed velit interdum fringilla eget at ante. Nunc ut nisl turpis. Nam aliquet tristique tellus, sit amet ullamcorper odio lobortis malesuada. Cras cursus egestas ante, at consectetur quam dignissim vel. Nunc molestie, erat eget vulputate venenatis, quam enim consectetur nisi, eu rhoncus risus libero in nunc. Axel Chalon – Cours HTML/CSS H1 P2018
  70. 70. <div>Element en float: left;</div> <p>Lorem ipsum... </p> <p>Lorem ipsum... </p> <p>Lorem ipsum... </p> Element en float: left; Les float Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Axel Chalon – Cours HTML/CSS H1 P2018
  71. 71. <div>Element en float: left;</div> <p>Lorem ipsum... </p> <p>Element en clear: both </p> <p>Autre élément quelconque... </p> Element en float: left; Les float Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Element en clear: both; Autre élément quelconque qui suit. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum... Axel Chalon – Cours HTML/CSS H1 P2018
  72. 72. <div>Element en float: left;</div> <p>Lorem ipsum... </p> Les float Element en float: left; Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Les éléments flottants (tout comme les éléments avec position: absolute; ou position: fixed) ne font plus partie du flux. Donc ils ne peuvent pas être pris en compte pour calculer la hauteur du bloc dans lequel ils sont par exemple. Le bloc bleu ciel ne va pas adapter sa hauteur en fonction du float: left car le float: left est hors du flux. Axel Chalon – Cours HTML/CSS H1 P2018
  73. 73. <div>Element en float: left;</div> <p>Lorem ipsum... </p> <div>Element en clear: both;</div> Element en float: left; Les float Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Element en clear:both; Un élément en clear: both permet de régler le problème. Axel Chalon – Cours HTML/CSS H1 P2018
  74. 74. <div>Element en float: left;</div> <p>Lorem ipsum... </p> <div></div> Element en float: left; Les float Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. L'élément en clear: both peut être vide. Axel Chalon – Cours HTML/CSS H1 P2018
  75. 75. Merci ! Axel Chalon – Cours HTML/CSS H1 P2018

×