Initiation HTML et CSS - stephaniewalter.design · 4 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017 • Le but de ce cours de formation initiation au HTML et CSS est de permettre

1

Initiation HTML et CSSApprendre les bases du langage

pour crer des sites web

Initiation HTML et CSS - Stphanie Walter cours de 2016-2017

https://blog.stephaniewalter.fr/cours-initiation-html-css/https://blog.stephaniewalter.fr/cours-initiation-html-css/https://blog.stephaniewalter.fr/cours-initiation-html-css/https://blog.stephaniewalter.fr/cours-initiation-html-css/https://blog.stephaniewalter.fr/cours-initiation-html-css/https://www.stephaniewalter.fr/

2

Visual & UX Designer. Mobile enthusiast Pixel et CSS Lover.

www.stephaniewalter.fr @WalterStephanie

Illustration by Laurence V.

https://twitter.com/hellgy

3 Stphanie Walter cours de 2016-2017

Ces slides initiation HTML CSS sont disponibles sous la licence Creative Commons suivante :

Attribution - Pas dUtilisation Commerciale - Partage dans les Mmes Conditions

CC BY-NC-SA

https://www.stephaniewalter.fr/https://blog.stephaniewalter.fr/cours-initiation-html-css/https://creativecommons.org/licenses/by-nc-sa/4.0/deed.frhttps://creativecommons.org/licenses/by-nc-sa/4.0/deed.frhttps://creativecommons.org/licenses/by-nc-sa/4.0/deed.frhttps://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr

Initiation HTML CSS - Stphanie Walter - 2016 / 20174

Le but de ce cours de formation initiation au HTML et CSS est de

permettre aux tudiants dapprhender les bases du HTML et CSS

afin de pouvoir ensuite crer de manire autonome des sites web.

Le cours est une initiation, nous naurons pas le temps de voir en

dtail toutes les balises et positionnement mais des liens seront

fournis afin de permettre aux tudiants dapprofondir leur expertise.

Description du cours


Programme initiation au HTML

Les bases dun site web Le HTML gnralits

HTML et dfinition W3C et le WHATWG Prsentation rapide de quelques outils : diteurs de

texte, wysiwyg et clients FTP

La syntaxe HTML : balises, lments et attributs Le principe de balise et d'lment Attributs et valeurs Quelques exemples d'attributs

Doctype, html, body : structure d'un document valide

Le doctype Les balises , et Les commentaires

Les lments de structuration du contenu La balise division La balise paragraphe

Espaces inscables Titres La balise

Les liens hypertexte Fonction d'un lien La balise Liens externes Liens internes et hirarchisation du site Ouvrir un lien dans un nouvel onglet ou

laisser l'utilisateur choisir ? Les liens spciaux : mailto, ancres, etc.


Programme initiation au HTML

Les lments de mise en forme de texte

Les balises et La balise D'autres balises (, , etc.)

Les lments de liste Listes ordonnes Listes non ordonnes

Ajouter des images avec la balise

Guide des formats d'image pour le web et outils de compression

La balise et ses attributs

Les tableaux HTML Crer un tableau : Un exemple de tableau simple Ajout d'en-ttes avec Lgende de tableau Attributs avancs, dont colspan, rowspan

Les formulaires Les formulaires sont partout autour de nous La balise Le champ Ajout de libells avec Les placeholder HTML5 Zone de texte multiligne Bouton de validation Prsentation des autres lments (checkbox, radio,

)


Programme initiation au CSS

CSS : introduction et notions de base Ajoutez du style vos pages ! CSS : Cascading Style Sheets, une dfinition Les CSS, un peu d'histoire Diffrents rendus entre les navigateurs : le pixel

perfect n'existe pas

Appliquer un style, oui mais o ? Le CSS inline et inconvnients Le CSS "interne" intgr au document et

inconvnients Feuille de style externe et balise

Syntaxe CSS La syntaxe de base : selecteur, proprit, valeur La dclaration CSS Les commentaires CSS

Gnalogie et diffrents types de slecteurs

Le slecteur usuel d'lment HTML Hirarchie et gnalogie : notion d'enfants, de

parent, de descendance Slecteur de groupe, de classe L'id ou identifiant Espace entre slecteurs, ou pas ? Les pseudos-classes sur les liens Les autres pseudo-classes

Couleurs et units Notation des couleurs en CSS Les units fixes en CSS Les units fluides en CSS

En web, quelle unit utiliser ?



Proprits de typographie, polices et puces

Font-family et polices utilisables Proprit typographiques (gras, italique,

interlignage, etc.) Changer la couleur du texte Alignements de texte Dcoration de texte (soulignement, etc.) Changer les icnes d'une liste puce

Bordures et arrires plans Bordures et styles, bords arrondis CSS3 Arrire-plan et proprits background

Dimensions, margin et padding Diffrences entre inline et block Largeur et hauteur avec width et height Dimensions maximum et minimum Marge extrieure margin Centrer horizontalement l'aide de margin Marge intrieure padding Calcul des dimensions relles d'un lment S'affranchir du calcul avec box-sizing: border-box Gestion des dpassements avec overflow

Positionnement CSS : les flottants pour placer des images

Les flottants et le flux Ferrer les images gauche et droite Nettoyer les flottants avec clear Notion de contexte de formatage de bloc et gestion des

conflits de flottants



Proprit display Valeurs block, inline-block, inline et

none Crer une navigation partir des

proprits de display

Positionnement CSS relative, absolute et fixed

Position relative pour dplacer des lments

Position fixe et barre de navigation fixe en haut

Position absolue et dplacement d'lment dans bloc

Aller plus loin Mises en page avec Flexbox et Grid

Layout Avant-got du Responsive Web

Design

10

Les bases dun site web


Un fichier HTML est un format de fichier texte ditable dont les lments ont du sens

Au format .html

Peut contenir du texte, des images, des liens, des mdias, etc.

Peut tre lie une autre page via des liens

=> ouvrez stephaniewalter.fr sur Firefox et faites CTRL + U au clavier

Une page Web cest

///ppt/slides/stephaniewalter.fr

12

Un ensemble de pages lies entre elles

Accessible en ligne depuis n'importe o

Un site Web cest ...


Mais pas que ...


Contenus textuels dans le fichier HTML, mais aussi images, sons,

vidos, CSS, JavaScript, polices d'criture, etc. tous ces fichiers

sont chargs dans le navigateur pour crer une page web.

Mais pas que ...

15

Mettre son site en ligne

16

Pour mettre en ligne on fait passer ses fichiers de la machine du crateur un serveur web

Le principe de serveur web

17

Souvent laide dun client FTP. Votre hbergeur vous fournira les logins et mot de passe pour y accder.

Transfrer un fichier sur le serveur


FTP : File Transfer Protocol, protocole de communication destin

l'change de fichiers sur un rseau TCP / IP.

Permet de mettre en ligne son site web

Une sorte d'explorateur sur un serveur distance

Ex : Filezilla

Le client FTP

http://filezilla-project.org/

20

Le HTML - gnralits


Hypertext Markup Language (HTML)

Langage de balises qui permet de structurer des pages

Diffrentes versions depuis 1989

Aujourdhui :

XHTML (2000 2006)

HTML5

HTML : dfinition


W3C : World Wide Web Consortium (1994)

TBLee, fondateur du W3C et inventeur du HTML

Charg de promouvoir la compatibilit des technologies dans les

navigateurs

378 entreprises membres qui peuvent faire des propositions

(Microsoft, Apple, Mozilla, Opera, Adobe, etc.)

Proposent un validateur http://validator.w3.org/

Le W3C

http://www.w3.org/http://validator.w3.org/


WHATWG : Web Hypertext Application Technology Working Group

(2004)

Collaboration non officielle de dveloppeurs de navigateurs

Tentative de rponse la lenteur des standards du W3C

Mozilla Foundation, Opera, Apple, etc.

Le WHATWG

https://whatwg.org/


Blocnote ou TextEdit, si vous

navez rien dautre sous la main :

Pas de coloration syntaxique

Ncessite de connatre tout le

langage

Gnrer du HTML avec un diteur

25

http://brackets.io/

diteur spcialis

Auto-compltion, retour la ligne, coloration syntaxique, plugins etc.

Gratuit pour Mac et Windows open source

Brackets.io

http://brackets.io/http://brackets.io/

26

https://atom.io/

diteur spcialis

Auto-compltion, retour la ligne, coloration syntaxique, plugins etc.

Gratuit pour Mac et Windows open source

Atom

https://atom.io/https://atom.io/


http://www.sublimetext.com/

diteur spcialis

Auto-compltion, retour la ligne, colorisation syntaxique

Plugins, snippets, mode sans distraction

30 jours essai Windows/Mac/ Linux puis payant

Les diteurs de texte plus avancs et spcialiss

http://www.sublimetext.com/


Coda : uniquement sur Mac (payant) http://panic.com/coda/

Geany (Windows) gratuit http://www.geany.org/Download/Releases

Notepad ++

Komodo (Windows et Mac) http://www.activestate.com/komodo-ide

Netbeans (Windows et Mac) gratuit http://netbeans.org/

Dautres diteurs

http://panic.com/coda/http://www.geany.org/Download/Releaseshttps://notepad-plus-plus.org/fr/http://www.activestate.com/komodo-idehttp://netbeans.org/


What You See Is What You Get

Permet de visualiser le rendu

directement

Code parfois pas toujours propre ou

optimis

Exemple : Dreamweaver (payant),

Blue Griffon (gratuit)

Les diteurs WYSIWYG


CMS : Content Management System ou systmes de gestion de contenu

Dvelopp dans un langage de programmation web (ex : PHP) et fait appel une base de donnes (ex : SQL)

diteurs visuels sans avoir besoin de notions de code

Ex : WordPress, Drupal, Joomla, Prestashop, etc.

Gnrer du HTML depuis un CMS


Possibilit de gnrer automatiquement du HTML depuis un

langage de programmation ct serveur

PHP, Python, Ruby, etc.

Gnrer du HTML depuis un langage ct serveur

33

La syntaxe HTML : balises, lments et attributs


Les balises structurent le contenu de la page (texte, images, etc.)

Chaque balise a un rle et donne du sens au contenu prsent

Le principe de balise

Bonj

Balis

Balis

* Contenu


On peut imbriquer les balises (on y reviendra) les unes dans les

autres


Hooo un bloc !!

Et un joli paragraphe

Et autre un joli paragraphe


Touche < du clavier pour ouvrir : <

Touche maj + < pour fermer : >

Le nom des balises est prdfini dans les spcifications HTML, on

ne peut donc PAS en inventer !

Quelques exemples : , , ,

, , , etc.



Par convention et pour faciliter la lecture du code, toute balise

ouverte doit tre ferme (sauf exception).

Certaines balises bien particulires nont pas besoin dtre fermes,

on les dit auto-fermantes , elles nont ni contenu ni balise

fermante.

Note : je mets le / final par convention, mais pas obligatoire.


Pour la compression avec pertes trs efficace pour des images photographiques


Utilise 256 couleurs

Compression sans perte base sur la succession de pixels de

mme couleur

Couleur de transparence sans couche alpha

animation

extension .gif

=> Utilis pour les logos

Le format GIF - Graphics Interchange Format

http://lesjoiesducode.tumblr.com/

http://lesjoiesducode.tumblr.com/


http://bisouslescopains.tumblr.com/

Quelques jolis GIFs

http://bisouslescopains.tumblr.com/


PNG8 : 256 couleurs, utilis pour

les images ncessitant peu de

couleurs et motifs rptitifs

PNG24 : 16 millions de couleurs,

transparence extension .png

=> Utilis pour les icnes, logos et

fichiers qui ont besoin dun fond

transparent

Le format PNG - Portable Network Graphics


Une photo : un JPEG

Une illustration avec peu de couleurs sans transparence

importante : PNG8

Une illustration avec beaucoup de couleurs : PNG24

Une image anime : GIF

En rsum


En ligne :

https://imagify.io/ outil en ligne avec traitement par lots

https://tinypng.com/ jusqu 20 images en mme temps

En Local :

https://imageoptim.com/fr.html sur mac PNG et JPG

http://luci.criosweb.ro/riot/ sur windows, PNG et JPG

http://pnggauntlet.com/ sur windows, PNG et JPG

Photshop, Fireworks, etc.

Compresser une image JPEG outils

https://imagify.io/https://imagify.io/https://tinypng.com/https://imageoptim.com/fr.htmlhttps://imageoptim.com/fr.htmlhttp://luci.criosweb.ro/riot/http://pnggauntlet.com/


Balise de type inline : pas de retour la ligne, peut-tre insre

dans le corps du texte. On la place gnralement dans un

ou

un mais peut se placer nimporte o dans le body

Balise auto-fermante

La balise


Un attribut src="image.jpg" pour donner le chemin vers la source

de limage

chemin sur le serveur

url de stockage

mme principe que pour les liens

La balise et source de l'image


Un attribut alt="description du contenu de l'image" texte

alternatif qui dcrit le contenu de limage et la remplace si limage

nest pas tlcharge

La balise et attribut alt


L'attribut est obligatoire, mais il peut tre vide pour les images

dcoratives

Lu vocalement par les lecteurs d'cran

Aide les personnes en situation de dficience visuelle comprendre

La balise et attribut alt


Les attributs width et height peuvent tre ajouts pour donner une

taille limage

Sans width/height le navigateur devine la taille ce qui cre des

sauts de page quand limage se charge

En gnral, il vaut mieux la redimensionner avant dans un logiciel,

plutt que charger une grande image et la rtrcir (performance)

Attention garder les proportions !

Attributs width et height


Exemple

126

L'attribut title

Attribut facultatif qui permet dafficher une info-bulle au survol de limage


Bonus : intgrer une vido

La plupart des sites de vido

proposent une intgration via

iframe qui se prsente sous

cette forme :

Il faut donc retrouver lendroit

o le site propose liframe

https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe


Bonus : intgrer une vido


Bonus : intgrer du son

Beaucoup de sites de partage

audio proposent galement

une intgration via iframe.

Mme principe que pour les

vidos : on rcupre le code

de liframe et on le colle sur

notre site


Bonus : intgrer du son


Gnralement les sites qui vous proposent dintgrer leur contenu

vont vous proposer une iframe. Cest le cas par exemple de :

Google maps pour des cartes interactives

Slideshare pour partager des diaporamas et prsentations

Vimeo, un autre service de partage de vidos

Les boites de partages de rseaux sociaux comme Facebook

Dautres types diframe

https://www.google.fr/mapshttp://fr.slideshare.net/https://vimeo.com/https://developers.facebook.com/docs/plugins/like-box-for-pages

132

Les tableaux HTML


Un tableau sert organiser des informations structures sous forme

tabulaire

Il se compose de lignes organises elles-mmes en cellules

Les tableaux, introduction


La balise permet dindiquer le dbut et la fin du

tableau.

La balise caractrise une nouvelle ligne

La balise marque le contenu dune cellule dans une ligne

Crer un tableau :


Exemple de tableau simple


Le nombre d'lments au sein des lments doit rester le mme dans la mesure ou chaque ligne possde un mme nombre de cellules, nombre qui correspond au nombre de colonnes du tableau.

Exemple de tableau simple


Pour la suite et y voir plus clair, nous allons ajouter une bordure

notre tableau avec la proprit CSS

Un avant-got de CSS


138

Ajouter une entte avec

peut remplacer

pour crer une cellule

dentte au tableau

Par dfaut affich en gras

et centr dans les

navigateurs


139

Ajouter un titre au tableau

On utilise pour

donner un titre au tableau

La balise se place au

dbut du tableau


140

Bonus - Fusion de cellules

Il est possible de fusionner

certaines cellules entre elles avec

lattribut colspan=" nombredecellules" qui se place sur la cellule (th ou td)

La valeur numrique de cet

attribut prcise le nombre de

colonnes du tableau que

couvre la cellule.


Bonus - Fusion de lignes

Il est possible de fusionner

des lignes avec lattribut

rowspan="

nombredelignes" qui se place sur la cellule (th ou td)

142

Les formulaires


Le formulaire sert rcuprer des donnes que lutilisateur va

entrer et les envoyer au serveur pour un traitement (en PHP par

exemple) : login, formulaire de contact et mme le chat de

Facebook

Les formulaires sont partout autour de nous


Balise principale du formulaire

Deux mthodes :

method="get" : limite 255 caractres, informations passes dans la

barre dadresse

method="post" : envoie les donnes dans le corps de la requte sans

passer par la barre dadresse, cest la mthode la plus utilise

Action : ladresse du fichier ou programme qui va traiter les donnes

La balise

145

Exemple de la balise form en action

Par dfaut si elle est vide, cest comme nimporte quel lment, rien nest affich


La zone de texte monoligne

La balise input est auto-fermante

Ne gnre pas de retour la ligne.

Il faut lui donner un nom avec lattribut name pour que lon puisse rcuprer sa valeur (viter les espaces dans le name). Le

nom nest PAS visible sur la page


Le label

Son rle est de dcrire un tre humain la fonction du champ

(puisque name est invisible)

Ajouter un for="nom" au label

Ajouter id="nom" au champ


Associer le label au champ

Permet lutilisateur de cliquer sur le label pour slectionner le

champ (le for et lid doivent tre identiques mais peuvent tre

diffrents du name)

Balise inline, pas de retour la ligne


L'attribut value

value=" " : donne une valeur par dfaut au champ

Vide (ou inexistant) si on n'a pas de donnes rcupres dans la

base de donne du site


L'attribut value


Un label (avec un for=" ")

Un champ avec :

Un id (qui a la mme valeur que le for)

Un name pour entrer la valeur dans la base de donne

Facultatif : un attribut value (qui peut tre vide) pour rcuprer la

valeur dans la base de donne

En rsum pour n'importe quel champ il faut toujours au moins


maxlength=" " : le nombre de caractres maximum accepts

dans le champ

Attributs supplmentaires

153

Les placeholder (ne sont pas des labels ! )

placeholder=" " : attribut HTML5, donne une indication de ce que devrait contenir le champ.

Attention, ne remplace PAS le label

Pas supports partout (IE10+) => ne PAS utiliser sans label visuel pour l'utilisateur (ou un polyfill)


Zone de texte multiligne

Une balise quil faut ouvrir et fermer

Pas de retour la ligne automatique


PAS de value= " ", le texte par dfaut se met entre les deux balises

ouvrante et fermante

Attributs utiles pour textarea


Les cases cocher

Une case = une option = un input

Plusieurs cases, toutes peuvent tre coches

lments inline

On peut mettre le label gauche ou droite

157

Les cases cocher

Les cases cocher peuvent avoir un attribut name distincts, ou identique

Si la cache est coche, il renvoie on lors du traitement, ou peuple le tableau PHP de sa valeur

(value)

158

Les cases cocher

On peut pr-cocher une checkbox avec checked="checked" ou just checked


Les boutons radio

Une case = une option = un input

Un seul choix possible parmi tous les lments

lments inline


Les boutons radio

La value est importante : cest elle qui est renvoye au serveur

value="femme" : on renvoie donc femme au serveur

161

Groupe de boutons radio

Pour que le navigateur comprenne que des lments forment un groupe, il faut leur donner le

mme attribut name

On peut pr-cocher un bouton radio avec checked="checked"


Les listes droulantes


La liste se trouve entre les lments

La balise permet de donner le nom de

la liste et est lie

On cre un objet de la liste avec la balise Nom

Lattribut value permet de donner la valeur de l'option de la liste

Les listes droulantes


Bouton denvoi input type="submit"

Pour envoyer le formulaire on utilise input type="submit"

Lattribut value=" " est obligatoire et permet de donner le titre du

bouton

Le formulaire est envoy pour traitement au fichier que lon a dfini

dans action=" "


Petit rsum des champs

input type = text

input type = checkbox

input type = radio

input type= submit

select + option

textarea


Bouton de reset, input type="reset"

Pour remettre zro toutes les donnes du formulaire on utilise input type="reset"

Merci de ne pas en abuser.


Bouton

Syntaxe diffrente de la balise input

Possibilit d'ajouter des images l'intrieur (balise non auto-fermante)

Trois types :

button : bouton cliquable (utilisable en JavaScript) reset : remettre zro le formulaire submit : envoyer le formulaire


Bouton

http://getbootstrap.com/javascript/#modals

http://getbootstrap.com/javascript/#modalshttp://getbootstrap.com/javascript/#modals


Dsactiver un champ : disabled="disabled"

Lattribut disabled="disabled" peut-tre utilis pour dsactiver un champ.

Exemple : dsactiver le champ denvoi jusqu ce que toutes les donnes soient remplies

Note : on peut aussi juste mettre disabled en attribut


Dsactiver un champ : disabled

Note : on peut aussi juste mettre disabled en attribut

171

Les champs de mot de passe

input type="password" : permet de masquer un mot de passe



Uploader un fichier : type = file

Pour tlcharger vers le serveur un fichier on utilise input

type="file"

Si on envoie un fichier, il faut permettre au formulaire denvoyer des

donnes avec lattribut enctype="multipart/form-data" sur llment

form.


Cacher un champ type="hidden"

On peut cacher un champ avec input type="hidden"

Permet denvoyer des donnes sans que lutilisateur ne doive les

remplir ou ne les voie.


body div p h1- h6 ul ol li blockquote

Liste non exhaustive de quelques balises

form

table

iframe

etc.

Memento des balises HTML

http://www.youtube.com/watch?v=w0ffwDYo00Qhttp://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-balises-html

175

CSS : Introduction et notions de base


CSS : feuille de style en cascade

Permettent de gnrer la prsentation dune page HTML : sparer

la structure (HTML) de sa prsentation (CSS)

Ensemble de rgles stylistiques applicables un, ou plusieurs

documents HTML => gain de taille du fichier HTML

Facilite la mise jour graphique, favorise laccessibilit

Gestion des diffrents mdias possible (print, screen, mobile etc.)

CSS : Cascading Style Sheets


csszengarden.com: le mme contenu, et diffrentes prsentations

CSS : Cascading Style Sheets

http://csszengarden.com/


En bref

Couleur de texte, image de

fond, style de police, menu

gauche ou droite : cest

CSS qui va contrler tout a


Le CSS est n en 1996

Avant, on utilisait des balises de prsentation directement dans le

HTML

CSS1, CSS2, aujourdhui la version finalise est CSS2.1

CSS3 : en cours de rdaction, certaines proprits sont finalises,

dautres moins => utilisable diffrents degrs aujourd'hui

Un peu dhistoire


Cest le navigateur qui va interprter le CSS, des diffrences de

rendu sont donc possibles.

Le pixel perfect nexiste pas !

Diffrents rendus entre les navigateurs

Rendu d


Certains navigateurs ne connaissent pas (encore) toutes les

proprits

Tester le rendu graphique sur le plus de navigateurs possibles

Diffrents degrs de comprhension

Caniuse donne des listes de compatibilit de certaines proprits

http://caniuse.com/


Tester sur diffrents navigateurs

https://www.browserstack.com/

https://www.browserstack.com/https://www.browserstack.com/

183

https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

Et pour Internet Explorer ?

https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/


Console de debug : clic droit + inspecter


Outils de dveloppement intgrs avec la touche F12

(toolbardepuis IE6, inclus depuis IE8)

Et pour Internet Explorer ?


Pour Firefox et Chrome Gestion des images, du JavaScript Redimensions, outils de mesure, de formulaires et de gestion des cookies Validation locale du HTML et CSS

Web Developer

https://addons.mozilla.org/fr/firefox/addon/web-developer/?src=sshttps://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

187

Appliquer un style, oui mais o ?


Attribut style = ;

Je veux des titres roses :

Et des sous titres avec une couleur de

fond violette

Le CSS en ligne dans la balise HTML


Et si je veux appliquer un style tous les titres ?

Et si je veux changer tous les titres dun coup ?

Long et fastidieux

MAIS cest comme a que le JavaScript inject du CSS donc vous

risquez de le voir dans linspecteur dlment.

Problmes de maintenabilit


On place une balise dans la balise du document Changer la couleur de tous les titres H2 en blanc :

h2{ color: #fff;}

Le CSS interne dans lentte du HTML


Avantage :

Possibilit dappliquer une rgle sur tous les mmes lments dun

mme document

Inconvnient :

Ne sapplique qu ce document, et non au site en entier

Il faut donc modifier le CSS sur chaque page (ex : si on a 10 pages, modifier les styles sur les 10 fichiers)

MAIS certains plugins de CMS (WordPress par exemple) mal conus

lutilisent encore. Vous le verrez aussi dans le code de newsletters.

Le CSS interne dans lentte du HTML


Nous utiliserons les mmes conventions de chemin que pour les

images et pages

Cration dun nouveau fichier appel styles.css (notez

lextension .css ici) et on lie la feuille de styles au HTML

On lie la feuille de style au document HTML avec une balise

dans le

La/les feuille(s) de style externe(s)


La feuille de style externe

styles.css

index.html


La feuille de style externe

Avantages : Sparation totale de la structure

et de la prsentation : possibilit davoir des prsentations alternatives

Possibilit dappliquer la mme feuille de style sur plusieurs pages (donc le site en entier) sans devoir la dupliquer

Cohrence de la prsentation sur tout le site et les pages futures.


Rcapitulatif

index.html : pour le

contenu

styles.css : pour la mise

en page / prsentation

196

La syntaxe CSS


La syntaxe est compose de 3 lments :

Le slecteur est llment sur lequel on applique les proprits (balise

HTML, id, classe, etc.)

La proprit est leffet que lon va vouloir donner (ex couleur de texte,

positionnement, couleur de fond, etc.)

La valeur de la proprit CSS (rouge, 10px, etc.)

La syntaxe de base

selecteur { propriete: valeur propriete: valeur ... }


On appelle une dclaration CSS lensemble proprit +

valeur . On peut en avoir plusieurs pour un mme lment et elles sont spares par le symbole point virgule

La dclaration CSS

selecteur


Pour crer un commentaire CSS, on utilise/* commentaire */

Le commentaire nest pas visible dans le navigateur

Sert au dveloppeur prendre des notes, laisser des messages

aux autres et savoir quoi servent les lignes de code

Les commentaires CSS

200

Gnalogie et diffrents types de slecteurs

201

On peut slectionner nimporte quel lment HTML et lui appliquer

un style.

Une proprit applique sur un lment HTML, sapplique par

dfaut tous les lments prsents dans le document HTML.

Le slecteur usuel d'lment HTML

p { color : blue; }

=> Tous les paragraphes auront une couleur de texte bleu



Hirarchie et gnalogie


Notion denfant et de descendance

h1, p, h2, p sont enfants de

div

a, strong et em sont enfant du

p dans lequel ils sont

contenus (mais pas de lautre

p)

a, strong et em (et h1, p, h2

et p) sont descendants de div


Notion de parent et d'anctre

div est parent de h1 p, h2, p

Le 2me p est parent de a,

strong et em.

div est anctre de a, strong et em (et de h1, p h2 et p)


Slecteur de hirarchie

Pour slectionner le a

descendant de p, nous allons

pouvoir crire : p a { }

(notez lespace entre le p et le

a)


Slecteur de groupe

Pour slectionner plusieurs

lments et leur appliquer la

mme valeur, on les spare

par une virgule.

h1, h2 { color: red; }

=> Va donner la couleur rouge

tous les h1 ou h2


class=" " est un attribut qui peut se mettre sur nimporte quelle

balise

Il permet de cibler de manire plus spcifique certains lments

Les slecteurs de classe

Un paragraphe spcifique qui est mis en avant


Les slecteurs de classe


Il est possible davoir plusieurs classes sur un lment, on les

spare dun espace.

Une remarque mis en avant

Classes multiples


Classes multiples


Une mme classe peut tre utilise sur plusieurs balises dans le

mme document

une remarque paragraphe

une remarque citation

Classes multiples


Classes multiples


Si on veut cibler une classe, sans se proccuper de la

balise on utilise le point .

.nomdeclasse { }

Cibler une classe indpendamment de la balise


Par exemple .remarque { } va cibler

Une mme classe peut tre utilise sur plusieurs balises HTML

Cibler une classe indpendamment de la balise

.


Pour cibler un lment dot d'une classe en CSS on procde de la

manire suivante (notez quil ny a pas despace)

element.maclasse { }

Par exemple : p.toto { } va cibler tous les lments comme celui-

ci :

Cibler une balise HTML avec une classe


Et button.btn.btn-default{ } va cibler

Cibler une balise HTML avec une classe

Si l'on met plusieurs classes et un lment sans espace dans la dclaration, il faut donc que TOUTES les conditions soient vrais

http://getbootstrap.com/css/#buttons

http://getbootstrap.com/css/


Il a le mme rle quune classe, mais doit tre unique sur la page

(donc on va moins lutiliser)

Un seul attribut id par balise est possible

On le note

On le cible en CSS avec #monid { }

Lid (identifiant)


Il est possible de mlanger balise, id, classe et hirarchisation :

p#monid.maclasse { }

Souvent cela cre du CSS trop spcifique, donc la bonne pratique

veut que lon est le moins spcifique possible.

Un joyeux mlange !


Pas despace signifie que toutes les conditions DOIVENT tre

vraies

p.toto { } cible tous les paragraphes ET qui ont une classe toto

...

Espace ou pas ?


Un espace entre deux slecteurs dtermine la gnalogie : p .toto { } cible tous les lments qui ont pour classe toto et qui sont descendants dun paragraphe

.

.

.

...

Espace ou pas ?


Un nom de classe ou d'ID ne doit pas avoir d'accent ou caractres

spciaux

On a tendance viter le tout majuscule

Un nom d'ID ne prend jamais d'espace

Un nom de classe ne prend pas d'espace, sinon c'est une nouvelle

classe

Convention de nommage


En rsum

CSS HTML cibl

p { }

.

.maclasse { } ...

#monid { } ...

p.maclasse { }

p .maclasse { }

.

p, div { }


Qui est cibl ?

div { ... }

.first { ... }

p.first { ... }


Qui est cibl ?

.sugar { ... }

.sugar p { ... }

p.sugar { ... }


Qui est cibl ?

h1 #hautpage { ... }

h1#hautpage { ... }


Qui est cibl ?

.first a { ... }

.first .sugar { ... }

.important, #toffee { ... }


flukeout.github.io

http://flukeout.github.io/


Le slecteur a:link dsigne les liens hypertextes non visits.

Le slecteur a:visited dsigne les liens hypertextes dj visits

Le slecteur a:hover dsigne un lien survol.

Le slecteur a:active dsigne un lien cliqu.

Pour retenir lordre : LoVe Hate : link, visited, hover, active

Les pseudos-classes sur les liens

230

http://tympanus.net/Development/CreativeButtons/

Dmonstration de :hover sur du bouton

http://tympanus.net/Development/CreativeButtons/http://tympanus.net/Development/CreativeButtons/


:hover peut tre appliqu sur dautres lments que des liens (

partir de IE6).

On peut crire p:hover pour crer un effet au survol dun

paragraphe par exemple

Les autres pseudo-classes


Subtle Hover effects

http://tympanus.net/Development/HoverEffectIdeas/


:focus appliqu sur les liens, boutons, ou inputs lorsquils ont le

focus

:focus sur les liens et inputs

234

Couleurs et units CSS


La synthse additive des couleurs


236

Les couleurs en CSS


Notation hexadcimale : #ffffff (blanc)

Notation hexadcimale courte (qui est double pour obtenir la

version longue) : #fff

Notation RGB : rgb(255,255,255) / rgba(255,255,255,1)

Notation HSL : hsl(0, 0%, 100%); / hsla(0, 0%, 100%,1);

Mot cl : white

Les couleurs en CSS

Exe

http://www.crockford.com/wrrrld/color.htmlhttp://www.crockford.com/wrrrld/color.htmlhttp://www.crockford.com/wrrrld/color.html

238

http://colours.neilorangepeel.com/

http://colours.neilorangepeel.com/


La couleur est une proprit utilisable sur :

color

background

border

En savoir plus sur les couleurs >>

Les couleurs en CSS

http://www.zonecss.fr/courscss/cours_feuille_css_35.html


Rcuprer une couleur

Colozilla ou Rainbow

Copie automatique de la couleur dans le presse papier

Choix de couleurs hexa, RGB, HSL, etc.

Cration de palettes de couleurs, etc.

https://addons.mozilla.org/fr/firefox/addon/colorzilla/https://addons.mozilla.org/fr/firefox/addon/rainbow-color-tools/


Unit fixe

Dpendance la rsolution du priphrique

Valeur compile finale en CSS

Le Pixel - px


Unit fluide utilise pour les polices dcriture

Sa taille est relative la taille de la police de llment parent.

Le cadratin - em


Utiliser des polices en em permet de garder le rythme

typographique et les proportions entre les diffrents lments

Le cadratin - em

244

http://pxtoem.com/

Conversion d'em

http://pxtoem.com/http://pxtoem.com/


Units fluides (relatives la taille de leur parent) :

%: proportion relative la dimension de l'lment parent ou la taille de

la police selon la proprit.

Le pourcentage : %

http://codepen.io/stephanie_cours/pen/puJsm


"px" pour exprimer une dimension fixe (indpendante de la taille de

la police)

"em" pour attribuer des tailles de polices en fonction de la taille de

la police de leur parent.

"%" pour attribuer des dimensions proportionnes aux dimensions

de l'lment parent. Une mise en page fluide s'appuie gnralement sur un

dimensionnement des lments en pourcentage

En web, quelle unit utiliser ?

Poli

http://www.alsacreations.com/astuce/lire/12-police-font-taille-font-size-em.htmlhttp://www.alsacreations.com/astuce/lire/12-police-font-taille-font-size-em.htmlhttp://www.alsacreations.com/astuce/lire/12-police-font-taille-font-size-em.html

247

Proprits de typographie, polices et puces


248

Font-family

body {

font-family: Arial, Helvetica, sans-serif;

}


font-family : indiquer la (ou les) polices utiliser

body { font-family: Arial, Helvetica, sans-serif;}

Lordre des polices appliques est celui de la proprit de gauche

droite

Font-family


Il faut que la police soit prsente sur le poste de lutilisateur, sinon le

navigateur passe la suivante.

www.cssfontstack.com : liste des polices websafe par systme

dexploitation

21 familles de polices prtes pour le Web

Polices utilisables

http://www.cssfontstack.com/http://romy.tetue.net/list-of-web-safe-fonts

251

Police utilisables

@font-face permet lutilisation de polices non safe :

Attention au poids au tlchargement

Attention aux licences

http://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web.html


Quelques ressources pour trouver des polices compatibles :

Google Web Fonts API

Polices utilisables

http://www.google.com/webfonts

253

Polices utilisables

http://www.fontsquirrel.com

Autre outil : https://

everythingfonts.com/font-face

Autre fonderie intressantes :

https://typekit.com/

http://www.fontsquirrel.com/https://everythingfonts.com/font-facehttps://everythingfonts.com/font-facehttps://typekit.com/https://typekit.com/


Font-size

body {

font-size: 18px;

}


font-size : valeur en unit permet de dfinir la taille dune police (=

la hauteur )

On utilise les units vues prcdemment (px, em, etc.)

Font-size


Mettre un paragraphe en gras

p {

font-weight: bold;

}


font-weight: valeur permet de dterminer lpaisseur de la police.

Principales valeurs possibles : normal, bold (gras)

Permet de mettre en gras d'autres lments

Font weight


Mettre le paragraphe en italique

p {

font-style: italic;

}


font-style : valeur permet de prciser le style de police

Principales valeurs possibles : normal, italic, oblique.

Permet de mettre en italique des lments

Font-style


Augmenter linterlignage

body {

line-height: 1.5;

}


line-height: valeur change linterlignage

Les valeurs possibles sont des valeurs numriques en unit de

mesure (px, em, %) mais il vaut mieux ne pas mettre dunit du tout

pour garder plus de flexibilit.

Line-height


Color

h1 {

color: #008499;

}


color: valeur permet de donner la couleur du texte

Les valeurs possibles sont toutes les couleurs prsentes

prcdemment

Color


text-align : valeur permet daligner le texte gauche, droite ou

milieu

Les valeurs possibles sont : left, right, center, justify (comme sur

Word)

Lalignement se fait sur le contenu des balises de type bloc

(paragraphes, titres, divs, etc.)

Text-align


Text-align

p {

text-align: left;

}

p {

text-align: right;

}


Text-align

p {

text-align: center;

}

p {

text-align: justify;

}


Astuce : centrer une image

Pour centrer une image, on la place dans

un paragraphe (ou une div) dont le

contenu est align au centre

p.align-center {

text-align: center;

}


text-transform permet de transformer le texte en majuscule,

minuscule

Valeurs possibles :

none

capitalize

uppercase

lowercase

Text-transform


Text-transform

h2 {

text-transform: none;

}

h2 {

text-transform: capitalize;

}


Text-transform

h2 {

text-transform: uppercase;

}

h2 {

text-transform : lowercase;

}


font-variant : valeur permet de changer la casse de la police

Principales valeurs possibles :

normal

small-caps

Font-variant


Font-variant

h2 {

font-variante: normal;

}

h2 {

font-variante: small-caps;

}


text-decoration : valeur permet de changer diffrents valeurs de

dcoration

Valeurs possibles :

none: permet d'empcher l'hritage de la proprit et plus

particulirement de supprimer le soulignement par dfaut des liens

overline : surlignement

underline : soulignement

line-through: texte barr

Text-decoration


Enlever le soulignement des liens et le remettre au survol

a {

text-decoration: none;

}

/* enlever le soulignement des liens par dfaut */

a:hover {

text-decoration: underline;

}

/* remettre le soulignement pour les liens survols */


text-indent : valeur (ngative ou positive) permet de spcifier un

dcalage de la premire ligne dun texte

Valeurs : units de mesure de police, positif ou ngatif

Ne fonctionne que sur des lments de type bloc (ou inline-block)

Text-indent


Indentation de 10px

p {

text-indent: 10 px;

}


list-style-type : permet de spcifier le type de puce ou de

numrotation (appliqu sur le ul / ol)

Valeurs possibles

none (pas de puce), disc, circle, square

Listes puces

http://www.zonecss.fr/style_css/feuille_css_list_style_type.htmlhttp://www.zonecss.fr/style_css/feuille_css_list_style_type.html


Valeurs possibles

decimal (1.), decimal-leading-zero (01.), lower-roman (vii), upper-roman (VII), etc.

Listes ordonnes

http://www.zonecss.fr/style_css/feuille_css_list_style_type.htmlhttp://www.zonecss.fr/style_css/feuille_css_list_style_type.html


Retirer les puces

ul {

list-style-type: none;

}


Utiliser une image comme puce

ul {

list-style-image: url("img/liste.png");

}


Utiliser une image comme puce

list-style-image : pour utiliser une image personnalise en

guise de puce

Valeur : le chemin dune image url("cheminimage");

282

Bordures et arrires plans


La proprit border permet d'ajouter une bordure un lment

Elle a 3 sous proprits possibles : style, color et width.

On regroupe souvent comme ceci : border: width style color;

Les bordures


Les bordures

h2 {

border: 2px solid #009860 ;

}


On peut dcomposer les 4 bordures de la manire suivante :

border-top: ;

border-left: ;

border-right: ;

border-bottom: ;

Si on ne prcise pas quelle bordure on applique la proprit, elle

sapplique aux 4.

Les bordures


Les bordures

h2 {

border-top: 1px solid gray;

}


none : pas de bordure (par dfaut);

dotted : pointills;

dashed : tirets;

solid : un trait simple;

double : bordure double;

groove : en relief;

ridge : autre effet relief;

inset : effet 3D global enfonc;

outset : effet 3D global surlev.

Style de bordure


border-radius : valeur permet de faire des bords arrondis (support

partie de IE9, proprit CSS3) Valeur : une valeur en unit de mesure (px, em ou mme %)

Le mme arrondi partout : border-radius : 10px; Un arrondi par angle (en haut gauche, en haut droite, en bas droite, en bas

gauche ) : border-radius : 2px 20px 5px 10px;

Des bords arrondis : CSS3 !

http://caniuse.com/http://caniuse.com/


Des bords arrondis : CSS3 !

div {

border-radius : 10px;

}

div {

border-radius : 2px 20px 5px 10px;

}


background-color : valeur permet de donner une couleur de

fond.

Valeurs : nimporte quelle couleur CSS

Sur un lment bloc (prend toute la largeur) ou inline (prend la

largeur du contenu)

Background-color


Background-color

body {

background-color: #E6E6E6;

}


background-image : valeur permet de dfinir une image

de fond pour l'lment

Valeur : none ou url("monimage.png" )

Par dfaut : limage se rpte horizontalement et verticalement

(comme une mosaque)

Background-image


Background-image

body {

background-image: url("img/bg.png");

}

Les chemins utiliss ont la mme notation que vu jusqu prsent


background-repeat permet de dfinir la faon dont limage va se

rpter.

Background-repeat


Valeurs possibles :

no-repeat : limage ne sera pas rpte

repeat-x : limage sera rpte horizontalement

repeat-y : limage sera rpte verticalement

Background-repeat

repeat-x repeat-yno-re


Quelques exemples

http://kellianderson.com/blog/

http://launchfactory.org/

Background-repeat en pratique

http://kellianderson.com/blog/http://launchfactory.org/http://launchfactory.org/


Trouver de jolies textures de fond : http://subtlepatterns.com/

Background-repeat en pratique

http://subtlepatterns.com/


background-position : valeur permet de donner la position de limage de fond par rapport au coin haut gauche. A utiliser avec background-repeat: no-repeat.

Valeurs possibles : Des valeurs numriques sur des axes x et y : background-position: 10px 30px; Valeurs en toute lettre background-position:right top (en haut droite):

top : en haut bottom : en bas left : gauche center : centr right : droite

Background-position


Une toile aligne en bas droite

.backgroundposition {

background-color: #A4D0F2;

background-image: url('img/

etoile.png');

background-repeat: no-repeat;

background-position: right bottom;

}


background-attachment: valeur est trs peu utilis, et permet de dfinir si limage de fond dfile par rapport au document

Valeurs : par dfaut (et si on le prcise pas), la valeur est scroll. On peut utiliser background-attachment:fixed si on veut que limage

reste visible et que le contenu scroll par-dessus.

Background-attachment


Quelques jolis exemples en ligne :

http://elefant-art.com/

Background-attachment

http://elefant-art.com/http://elefant-art.com/http://elefant-art.com/


Tout dans une ligne !

Il est possible de combiner toutes ces proprits dans une seule et mme ligne :

background : propriete1 propriete2 propriete3;

h2 {

background:#7AAAAF url("img/etoile.png") no-repeat center left;

}

303

Dimensions, margin et padding

304

Sans altration CSS, les lments de bloc prennent toute la largeur

de leur parent, et sont suivis dun retour la ligne (body, html, p, div,

h1, etc.)

Les lments de type inline prennent la largeur de leur contenu, et

ne sont pas suivis dun retour la ligne (span, a, strong, img, etc.).

Petit rappel inline et block


width (largeur) et height (hauteur) ne sont applicables QUE sur

des lments de bloc

Valeurs possibles : auto (par dfaut, toute la taille du parent), valeur

numrique en px, % ou mme em. body{ width: 800px;}

Largeur et hauteur d'un lment : width et height


On peut utiliser max et min pour dterminer des tailles maximums

et minimums (ne fonctionne pas sous IE6) : min-width, min-height,

max-width et max-height

Valeurs : numriques

Permet par exemple de grer un dbordement dimage :

img { max-width: 100%; } : les images sont limites la taille de leur

parent

Max et min


Il existe deux types de marges : intrieure appele padding, et extrieure appele margin

Marges

(s'il y a une bordure elle est elle aussi ajoute la largeur effective des lments)


La proprit margin dtermine lespace entre le bord de llment,

et llment suivant.

Par dfaut margin: valeur applique la mme valeur aux 4 cots

Valeur possible : auto, valeur en unit de mesure, positive ou

ngative

Marge extrieure margin


On peut la dcomposer individuellement en

margin-top : marge extrieure haute

margin-right : marge extrieure droite

margin-bottom : marge extrieure basse

margin-left : marge extrieure gauche

Ou rassembler les 4 valeurs : margin: 10px 5px 8px 15px; (dans

lordre : haut, droite, bas, gauche)

Marge extrieure margin


Ajouter une marge sous un paragraphe

p {

margin-bottom: 30px;

}


Ajouter une marge sous un titre

h2 {

margin: 50px 0;

}

Ici 50px correspondent la

marge haute et basse et 0

aux marges gauches et

droites


Centrer horizontalement laide de margin

Pour centrer un lment de type bloc

horizontalement dans son parent il faut

lui donner une largeur (width), et

appliquer une marge auto gauche et

droite

body {

width: 800px;

margin: 0 auto;

}


Par dfaut, une margin top ou bottom sur un lment inline ne

fonctionnera pas (puisquil est dans le flux de la page).

Une marge left ou right fonctionnera par contre

Margin et lments inline


La proprit padding dtermine un espacement entre le bord de

la boite et son contenu

Par dfaut padding : valeur applique la mme valeur aux 4 cts

Valeur possible : valeur en unit de mesure

Padding : la marge intrieure


On peut la dcomposer individuellement en

padding-top : marge intrieure haute

padding-right : marge intrieure droite

padding-bottom : marge intrieure basse

padding-left : marge intrieure gauche

Ou rassembler les 4 valeurs : padding: 10px 5px 8px 15px;

(dans lordre : haut, droite, bas, gauche)

Padding : la marge intrieure

316

Ajouter du padding au body

body {

padding: 10px 15px;

}


Ajouter du padding un titre pour dcoller la bordure

h2 {

padding-bottom: 10px 15px;

}


Padding sur lment en inline

Ajouter du padding sur des lments

inline permet de changer leur taille

sans passer par un width / height

(attention aux dbordements)

a {

padding: 5px 15px;

}

Pour agrandir le lien


Retirer les marges et padding par dfaut du navigateur

Par dfaut, le navigateur applique des

marges (comme par exemple sur les

listes). Pour les retirer on peut crire

margin:0;

ul {

margin: 0;

}


Retirer les marges et padding par dfaut du navigateur

Par dfaut, le navigateur applique aussi

du padding (comme par exemple sur les

listes). Pour le retirer on peut crire

padding:0;

ul {

margin: 0;

padding: 0;

}


Attention le padding entre en compte dans la

dimension affiche de llment et sajoute sa

valeur width (tout comme la bordure)

Padding et calcul de dimension dlment

322

Padding et calcul de dimension dlment

body {

width: 800px; padding: 10px 15px;

}

Valeur affiche de body : 800 + 15 + 15 = 830px !


Pour faire en sorte que le padding (et la bordure) soit calcul

l'intrieur de la bote on peut changer le modle de calcul l'aide

de box-sizing : border-box;

Box-sizing:border-box - changer le modle de bote

.element { box-sizing: border-box; }


Box-sizing:border-box - changer le modle de bote

body {

width: 800px; padding: 10px 15px;

box-sizing: border-box;

}

Valeur affiche de body : 800px


Il est possible que du contenu texte dpasse l'lment qui le

contient (surtout si on dfini des hauteurs fixes)

Exemple : p {height: 100px}, le contenu dpasse du paragraphe

Overflow : pour viter que a dpasse


overflow: hidden permet de cacher tout ce qui dpasse.

Problme : on perd tout ce qui est cach, impossible de le voir

Overflow: hidden - cacher ce qui dpasse


overflow: auto; permet dafficher une bar de dfilement si

ncessaire

Overflow: auto - afficher une barre de dfilement

328

Positionnements CSS

Les flottants et le flux


La proprit float:valeur permet dextraire des lments du flux de la page, ce qui signifie que le reste du contenu coule autour

Elle prend 3 valeurs : left, right et none (permet de remettre un lment dans le flux)

Les flottants et le flux

330

Float:left

Un exemple de float : left sur une

image :

img.floatleft {

float: left;

}

331

Float right;

Exemple de float: right sur une image : img.floatright {

float: right;

}


Comme le contenu coule autour, on se retrouve avec ce genre

de problmes

Problme des flottants


La proprit clear : valeur permet un lment de cesser le

contournement des lments flottants. Il se positionne alors sous les

lments flottants prcdents comme si ces derniers taient rests dans

le flux.

Valeurs possibles :

clear: left permet dempcher le contournement des blocs flottants gauche

clear: right permet dempcher le contournement des blocs flottants droite

clear : both permet dempcher le contournement des blocs flottants

gauche et droite

Clear : bloquer le dpassement des flottants


On l'applique sur le premier lment suivant dont on veut cesser

le contournement.

Clear : bloquer le dpassement des flottants


Problme des flottants

On applique clear:both; sur l'lment qui

ne doit plus tre affect par les flottants

.content {

clear:both;

}


Les lments flottants peuvent dpasser de leur parent si le

contenu de celui-ci n'est pas suffisant

BFC et contenir les flottants dans un bloc


Un contexte de formatage de bloc (ou BFC) est un lment

avec des super pouvoirs :

Il peut contenir les flottants (qui ne peuvent plus en dpasser)

Il ne s'coule pas autour des flottants

BFC et contenir les flottants dans un bloc

http://www.w3.org/TR/CSS21/visuren.html


Ajouter overflow:hidden au

parent des flottants permet

de crer un contexte de

formatage de bloc et

rsoudre notre problme

Overflow : hidden

http://www.w3.org/TR/CSS21/visuren.htmlhttp://www.w3.org/TR/CSS21/visuren.htmlhttp://www.w3.org/TR/CSS21/visuren.html


Overflow : hidden

.parent {

overflow : hidden;

}


Il est possible d'utiliser des flottants pour crer une mise en page en

colonnes. Cest notamment utilis dans danciennes versions de

bootstrap et ressemble a. On privilgie cependant flexbox

aujourdhui pour une mise en page de site web.

Les flottants appliqus la mise en page

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexboxhttps://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexboxhttps://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox

341

Positionnements CSS

La proprit display pour mise en page


La proprit display: valeur va permettre une mise en forme

avance.

Quelques unes des valeurs possibles sont : block, inline, inline-

block et none

Ces valeurs sont appliques par dfaut en fonction des lments

p, div, h1, etc. : display :block;

span, a, em, strong, etc. : display : inline;

La proprit display pour mise en page


Il est possible de transformer un lment inline en lment de bloc

avec display: block

Il a alors toutes les proprits dun lment de bloc : par dfaut, il

prend toute la largeur de son parent, on peut en changer la

dimension ET est suivi dun retour la ligne. On peut alors lui

appliquer des marges.

Display:block


Display:block

a {

display:block;

}

Pour transformer les liens inline en

lments de bloc


Display:block

.header a,

.header li {

display: block;

}

.header a {

background: #98C9E2;

margin-bottom: 5px;

width: 150px;

}

Exemple : transformer les liens de la navigation en lments de bloc


Nous connaissons dj display:inline appliqu sur les lments de

type inline (span, a, em, strong, etc.).

Il permet aux lments de rester sur une seule ligne (on ne peut

alors pas leur donner de largeur)

Display:inline


Display:inline

p {

background: rgb(255, 191, 203);

display: inline;

}

Confre un un lment toutes les

proprits dun lment en ligne, sans

retour la ligne


display: inline-block est une proprit hybride qui permet un

lment davoir les proprits dun lment en ligne (pas de retour

la ligne aprs llment), mais avec les proprits dun bloc

(possibilit davoir une dimension et des marges)

Display:inline-block

Display inline-block, une valeur trop peu utilise >>

https://www.creativejuiz.fr/blog/tutoriels/display-inline-block-une-valeur-trop-peu-utiliseehttps://www.creativejuiz.fr/blog/tutoriels/display-inline-block-une-valeur-trop-peu-utiliseehttps://www.creativejuiz.fr/blog/tutoriels/display-inline-block-une-valeur-trop-peu-utilisee


Display:inline-block et navigation horizontale

.header li {

display: inline-block;

}

.header li a{

display: block;

padding: 5px;

}

display: inline-block sur une liste de liens

permet par exemple de crer une

navigation horizontale


La proprit cre une colonne blanche entre les lments. Plus sur

ce problme ici

Display:inline-block et bugs connus

https://www.creativejuiz.fr/blog/tutoriels/display-inline-block-une-valeur-trop-peu-utilisee#probleme-white-spacehttps://www.creativejuiz.fr/blog/tutoriels/display-inline-block-une-valeur-trop-peu-utilisee#probleme-white-space


display: none permet de retirer un lment du flux de la page : il

nest plus visible, et la place quil occupait est disponible pour

dautres lments, cest comme sil nexistait pas.

Les lments en display:none ne sont pas lus par les lecteurs

dcran

Pour rendre llment nouveau visible, il faut lui appliquer par

exemple display:block

Display:none

352

Positionnement CSS

Position relative, absolute et fixed


La proprit position:valeur permet de positionner les lments

dans la page

Les valeurs possibles sont : static (valeur par dfaut) ,relative,

absolute et fixed

Positionnement CSS


static est la valeur par dfaut de tous les lments

Un lment avec position: static; n'est positionn d'aucune manire

spciale.

Un lment static est dit non positionn et un lment avec une

proprit position ayant une valeur autre que static est dit

positionn.

Position:static;


Un lment positionn avec position:relative; se comporte par

dfaut de la mme manire que static.

On peut utiliser les proprit top, left, right et bottom pour dplacer

l'lment

Le reste du contenu ne sera pas affect

top, left right et bottom peuvent prendre des valeurs positives ou

ngatives (10px, -30px, etc.)

Position:relative;


Position:relative;

.content a {

position:relative;

top:-15px;

}

Dplacer un lment de quelques pixels


Position:relative;

.picto {

position: relative;

top:5px;

}


Position:relative;

Faire un lien qui senfonce de 2px quand

on lactive

.button:active{

position: relative;

top:2px;

}


Un lment en position: fixed; ne bougera pas, mme si on fait

dfiler la page. Il sort du flux et se positionne au dessus des autres

lments.

Il se positionne par rapport l'espace affichable du navigateur

Position: fixed


Exemple de position : fixed d'une barre de navigation en haut

Position :fixed


Position :fixed

Sortir la navigation du flux .nav {

position: fixed;

}


Position :fixed

La positionner en haut 0px des 3 coins

pour quelle saffiche toujours

.nav { position: fixed; top: 0; left: 0; right: 0; }


Utilisation en top bar ou navigation sticky en haut :

http://designmodo.com/

http://www.lesechos.fr/

Position: fixed dans la vraie vie

http://designmodo.com/http://www.lesechos.fr/http://www.lesechos.fr/

364

http://www.marketingmag.stfi.re/hubs-c/smartphone-addiction-nomophobia/ ?sf=ozpplo

Position: fixed dans la vraie vie, un peu trop dailleurs

http://www.marketingmag.stfi.re/hubs-c/smartphone-addiction-nomophobia/?sf=ozpplohttp://www.marketingmag.stfi.re/hubs-c/smartphone-addiction-nomophobia/?sf=ozpplohttp://www.marketingmag.stfi.re/hubs-c/smartphone-addiction-nomophobia/?sf=ozpplohttp://www.marketingmag.stfi.re/hubs-c/smartphone-addiction-nomophobia/?sf=ozpplo


Un lment en position: absolute;

sort du flux (les autres lments se rorganisent comme sil ntait pas l)

vient se positionner par rapport son dernier anctre positionn, lintrieur

de celui-ci.

Par dfaut, si aucun anctre nest positionn (et quon a modifi top, left,

right ou bottom) il se positionne par rapport l'lment racine .

Pour positionner le parent, on donne au parent une position: relative |

fixed | absolute;

Position: absolute;


Position: absolute;


Centrer une lgende dimage


Position: absolute;

.caption { background: rgba(0,0,0,0.8); color: #fff; padding: 20px; }

Prparer limage avec les couleurs


Position: absolute;.caption {

position: absolute;

bottom: 150px;

left: 0;

right: 0;

}

Prparer le positionnement de limage


Position: absolute;

.img-caption {

position: relative;

}

Positionner le parent pour que la

lgende se place par rapport aux bords

de ce dernier


Pendant longtemps nous avons utilis des fottants pour faire des

mises en page. Vous retrouvez encore cette technique sur

beaucoup de sites dvelopps jusquil y a encore quelques annes.

Aujourdhui, la mise en page de sites web moderne se fait avec

deux techniques : flexbox (pour des mises en page fluides) et grid-

layout (plus rcent et moins bien support mais qui permet de crer

facilement des sites sur des principes de grilles.

CSS et mise en page


Flexbox pour crer des mises en page fluides :

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-

avec-html5-et-css3/la-mise-en-page-avec-flexbox

https://developer.mozilla.org/fr/docs/Web/CSS/

Disposition_des_bo%C3%AEtes_flexibles_CSS/

Utilisation_des_flexbox_en_CSS

https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-

module.html

CSS et mise en page avance : Flexbox

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexboxhttps://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexboxhttps://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexboxhttps://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexboxhttps://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexboxhttps://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexboxhttps://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexboxhttps://developer.mozilla.org/fr/docs/Web/CSS/Disposition_des_bo%C3%AEtes_flexibles_CSS/Utilisation_des_flexbox_en_CSShttps://developer.mozilla.org/fr/docs/Web/CSS/Disposition_des_bo%C3%AEtes_flexibles_CSS/Utilisation_des_flexbox_en_CSShttps://developer.mozilla.org/fr/docs/Web/CSS/Disposition_des_bo%C3%AEtes_flexibles_CSS/Utilisation_des_flexbox_en_CSShttps://developer.mozilla.org/fr/docs/Web/CSS/Disposition_des_bo%C3%AEtes_flexibles_CSS/Utilisation_des_flexbox_en_CSShttps://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.htmlhttps://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.htmlhttps://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.htmlhttps://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html


Grid layout pour crer une grille CSS (attention au support)

https://la-cascade.io/css-grid-layout-guide-complet/

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout

https://css-tricks.com/snippets/css/complete-guide-grid/

CSS et mise en page avance : Grid Layout

https://la-cascade.io/css-grid-layout-guide-complet/https://la-cascade.io/css-grid-layout-guide-complet/https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layouthttps://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layouthttps://css-tricks.com/snippets/css/complete-guide-grid/https://css-tricks.com/snippets/css/complete-guide-grid/


http://mediaqueri.es/

Adapter son site au mobile : le responsive webdesign

http://mediaqueri.es/


@media screen and (max-width: 640px) {

.bloc {

display:block;

}

}

Rapide aperu de la syntaxe

Les Media Queries CSS3

http://www.alsacreations.com/article/lire/930-css3-media-queries.html


learnlayout.com un site qui rsume le tout (en anglais)

MDN CSS : rfrences CSS, tutoriels et dmos

http://fr.openclassrooms.com/ : site plus gnraliste pour apprendre toutes sortes de langages

https://www.alsacreations.com/ forum dentre aide

W3C en franais

Feuilles de styles CSS - Conseils et bonnes pratiques

https://groups.diigo.com/group/html_css_front des ressources slectionnes par moi mme

Liens utiles pour aller plus loin

http://learnlayout.com/https://developer.mozilla.org/fr/docs/Web/CSS?menu=http://fr.openclassrooms.com/http://fr.openclassrooms.com/https://www.alsacreations.com/https://www.alsacreations.com/http://www.w3.org/2005/11/Translations/Lists/ListLang-frhttp://guidecss.fr/http://guidecss.fr/http://guidecss.fr/https://groups.diigo.com/group/html_css_fronthttps://groups.diigo.com/group/html_css_front

377

Visual & UX Designer. Mobile enthusiast Pixel et CSS Lover.

www.stephaniewalter.fr @WalterStephanie

Illustration by Laurence V.

https://twitter.com/hellgy

378 Stphanie Walter cours de 2016-2017

Ces slides initiation HTML CSS sont disponibles sous la licence Creative Commons suivante :

Attribution - Pas dUtilisation Commerciale - Partage dans les Mmes Conditions

CC BY-NC-SA
https://www.stephaniewalter.fr/https://blog.stephaniewalter.fr/cours-initiation-html-css/https://creativecommons.org/licenses/by-nc-sa/4.0/deed.frhttps://creativecommons.org/licenses/by-nc-sa/4.0/deed.frhttps://creativecommons.org/licenses/by-nc-sa/4.0/deed.frhttps://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr

Documents

Initiation HTML et CSS - stephaniewalter.design · 4 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017 • Le but de ce cours de formation initiation au HTML et CSS est de permettre