initiation html et css - stephaniewalter.design · 4 initiation html css - stéphanie walter - 2016...
Post on 10-Sep-2018
233 Views
Preview:
TRANSCRIPT
-
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 20175
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.
-
Initiation HTML CSS - Stphanie Walter - 2016 / 20176
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,
)
-
Initiation HTML CSS - Stphanie Walter - 2016 / 20177
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 ?
-
Initiation HTML CSS - Stphanie Walter - 2016 / 20178
Programme initiation au CSS
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 20179
Programme initiation au CSS
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201711
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 ...
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201713
Mais pas que ...
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201714
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
-
18
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201719
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201721
Hypertext Markup Language (HTML)
Langage de balises qui permet de structurer des pages
Diffrentes versions depuis 1989
Aujourdhui :
XHTML (2000 2006)
HTML5
HTML : dfinition
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201722
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201723
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201724
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201727
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201728
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201729
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201730
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201731
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201732
-
33
La syntaxe HTML : balises, lments et attributs
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201734
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201735
On peut imbriquer les balises (on y reviendra) les unes dans les
autres
Le principe de balise
Hooo un bloc !!
Et un joli paragraphe
Et autre un joli paragraphe
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201736
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.
Le principe de balise
-
Initiation HTML CSS - Stphanie Walter - 2016 / 201737
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.
Le principe de balise
Pour la compression avec pertes trs efficace pour des images photographiques
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017115
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017116
http://bisouslescopains.tumblr.com/
Quelques jolis GIFs
http://bisouslescopains.tumblr.com/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017117
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017118
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017119
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017120
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017121
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017122
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017123
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017124
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017125
Exemple
-
126
L'attribut title
Attribut facultatif qui permet dafficher une info-bulle au survol de limage
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017127
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017128
Bonus : intgrer une vido
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017129
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017130
Bonus : intgrer du son
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017131
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017133
Un tableau sert organiser des informations structures sous forme
tabulaire
Il se compose de lignes organises elles-mmes en cellules
Les tableaux, introduction
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017134
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 :
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017135
Exemple de tableau simple
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017136
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017137
Pour la suite et y voir plus clair, nous allons ajouter une bordure
notre tableau avec la proprit CSS
Un avant-got de CSS
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017
138
Ajouter une entte avec
peut remplacer
pour crer une cellule
dentte au tableau
Par dfaut affich en gras
et centr dans les
navigateurs
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017
139
Ajouter un titre au tableau
On utilise pour
donner un titre au tableau
La balise se place au
dbut du tableau
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017
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.
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017141
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017143
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017144
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017146
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017147
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017148
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017149
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017150
L'attribut value
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017151
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017152
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)
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017154
Zone de texte multiligne
Une balise quil faut ouvrir et fermer
Pas de retour la ligne automatique
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017155
PAS de value= " ", le texte par dfaut se met entre les deux balises
ouvrante et fermante
Attributs utiles pour textarea
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017156
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017159
Les boutons radio
Une case = une option = un input
Un seul choix possible parmi tous les lments
lments inline
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017160
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"
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017162
Les listes droulantes
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017163
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017164
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=" "
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017165
Petit rsum des champs
input type = text
input type = checkbox
input type = radio
input type= submit
select + option
textarea
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017166
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.
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017167
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017168
Bouton
http://getbootstrap.com/javascript/#modals
http://getbootstrap.com/javascript/#modalshttp://getbootstrap.com/javascript/#modals
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017169
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017170
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
Initiation HTML CSS - Stphanie Walter - 2016 / 2017
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017172
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.
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017173
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.
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017174
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017176
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017177
csszengarden.com: le mme contenu, et diffrentes prsentations
CSS : Cascading Style Sheets
http://csszengarden.com/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017178
En bref
Couleur de texte, image de
fond, style de police, menu
gauche ou droite : cest
CSS qui va contrler tout a
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017179
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017180
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017181
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017182
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017184
Console de debug : clic droit + inspecter
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017185
Outils de dveloppement intgrs avec la touche F12
(toolbardepuis IE6, inclus depuis IE8)
Et pour Internet Explorer ?
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017186
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 ?
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017188
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017189
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017190
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017191
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017192
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)
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017193
La feuille de style externe
styles.css
index.html
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017194
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.
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017195
Rcapitulatif
index.html : pour le
contenu
styles.css : pour la mise
en page / prsentation
-
196
La syntaxe CSS
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017197
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 ... }
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017198
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017199
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
Initiation HTML CSS - Stphanie Walter - 2016 / 2017
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017202
Hirarchie et gnalogie
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017203
Hirarchie et gnalogie
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017204
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017205
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)
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017206
Slecteur de hirarchie
Pour slectionner le a
descendant de p, nous allons
pouvoir crire : p a { }
(notez lespace entre le p et le
a)
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017207
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017208
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017209
Les slecteurs de classe
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017210
Il est possible davoir plusieurs classes sur un lment, on les
spare dun espace.
Une remarque mis en avant
Classes multiples
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017211
Classes multiples
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017212
Une mme classe peut tre utilise sur plusieurs balises dans le
mme document
une remarque paragraphe
une remarque citation
Classes multiples
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017213
Classes multiples
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017214
Si on veut cibler une classe, sans se proccuper de la
balise on utilise le point .
.nomdeclasse { }
Cibler une classe indpendamment de la balise
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017215
Par exemple .remarque { } va cibler
Une mme classe peut tre utilise sur plusieurs balises HTML
Cibler une classe indpendamment de la balise
.
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017216
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017217
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017218
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)
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017219
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 !
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017220
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 ?
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017221
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 ?
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017222
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017223
En rsum
CSS HTML cibl
p { }
.
.maclasse { } ...
#monid { } ...
p.maclasse { }
p .maclasse { }
.
p, div { }
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017224
Qui est cibl ?
div { ... }
.first { ... }
p.first { ... }
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017225
Qui est cibl ?
.sugar { ... }
.sugar p { ... }
p.sugar { ... }
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017226
Qui est cibl ?
h1 #hautpage { ... }
h1#hautpage { ... }
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017227
Qui est cibl ?
.first a { ... }
.first .sugar { ... }
.important, #toffee { ... }
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017228
flukeout.github.io
http://flukeout.github.io/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017229
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017231
: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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017232
Subtle Hover effects
http://tympanus.net/Development/HoverEffectIdeas/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017233
:focus appliqu sur les liens, boutons, ou inputs lorsquils ont le
focus
:focus sur les liens et inputs
-
234
Couleurs et units CSS
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017235
La synthse additive des couleurs
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017
236
Les couleurs en CSS
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017237
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017239
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017240
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017241
Unit fixe
Dpendance la rsolution du priphrique
Valeur compile finale en CSS
Le Pixel - px
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017242
Unit fluide utilise pour les polices dcriture
Sa taille est relative la taille de la police de llment parent.
Le cadratin - em
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017243
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017245
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017246
"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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017
248
Font-family
body {
font-family: Arial, Helvetica, sans-serif;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017249
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017250
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017252
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017254
Font-size
body {
font-size: 18px;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017255
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017256
Mettre un paragraphe en gras
p {
font-weight: bold;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017257
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017258
Mettre le paragraphe en italique
p {
font-style: italic;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017259
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017260
Augmenter linterlignage
body {
line-height: 1.5;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017261
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017262
Color
h1 {
color: #008499;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017263
color: valeur permet de donner la couleur du texte
Les valeurs possibles sont toutes les couleurs prsentes
prcdemment
Color
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017264
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017265
Text-align
p {
text-align: left;
}
p {
text-align: right;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017266
Text-align
p {
text-align: center;
}
p {
text-align: justify;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017267
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;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017268
text-transform permet de transformer le texte en majuscule,
minuscule
Valeurs possibles :
none
capitalize
uppercase
lowercase
Text-transform
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017269
Text-transform
h2 {
text-transform: none;
}
h2 {
text-transform: capitalize;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017270
Text-transform
h2 {
text-transform: uppercase;
}
h2 {
text-transform : lowercase;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017271
font-variant : valeur permet de changer la casse de la police
Principales valeurs possibles :
normal
small-caps
Font-variant
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017272
Font-variant
h2 {
font-variante: normal;
}
h2 {
font-variante: small-caps;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017273
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017274
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 */
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017275
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017276
Indentation de 10px
p {
text-indent: 10 px;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017277
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017278
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017279
Retirer les puces
ul {
list-style-type: none;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017280
Utiliser une image comme puce
ul {
list-style-image: url("img/liste.png");
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017281
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017283
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017284
Les bordures
h2 {
border: 2px solid #009860 ;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017285
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017286
Les bordures
h2 {
border-top: 1px solid gray;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017287
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017288
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017289
Des bords arrondis : CSS3 !
div {
border-radius : 10px;
}
div {
border-radius : 2px 20px 5px 10px;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017290
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017291
Background-color
body {
background-color: #E6E6E6;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017292
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017293
Background-image
body {
background-image: url("img/bg.png");
}
Les chemins utiliss ont la mme notation que vu jusqu prsent
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017294
background-repeat permet de dfinir la faon dont limage va se
rpter.
Background-repeat
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017295
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017296
Quelques exemples
http://kellianderson.com/blog/
http://launchfactory.org/
Background-repeat en pratique
http://kellianderson.com/blog/http://launchfactory.org/http://launchfactory.org/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017297
Trouver de jolies textures de fond : http://subtlepatterns.com/
Background-repeat en pratique
http://subtlepatterns.com/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017298
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017299
Une toile aligne en bas droite
.backgroundposition {
background-color: #A4D0F2;
background-image: url('img/
etoile.png');
background-repeat: no-repeat;
background-position: right bottom;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017300
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017301
Quelques jolis exemples en ligne :
http://elefant-art.com/
Background-attachment
http://elefant-art.com/http://elefant-art.com/http://elefant-art.com/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017302
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017305
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017306
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017307
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)
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017308
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017309
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017310
Ajouter une marge sous un paragraphe
p {
margin-bottom: 30px;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017311
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017312
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;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017313
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017314
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017315
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;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017317
Ajouter du padding un titre pour dcoller la bordure
h2 {
padding-bottom: 10px 15px;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017318
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017319
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;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017320
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;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017321
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 !
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017323
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; }
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017324
Box-sizing:border-box - changer le modle de bote
body {
width: 800px; padding: 10px 15px;
box-sizing: border-box;
}
Valeur affiche de body : 800px
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017325
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017326
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017327
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017329
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;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017332
Comme le contenu coule autour, on se retrouve avec ce genre
de problmes
Problme des flottants
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017333
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017334
On l'applique sur le premier lment suivant dont on veut cesser
le contournement.
Clear : bloquer le dpassement des flottants
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017335
Problme des flottants
On applique clear:both; sur l'lment qui
ne doit plus tre affect par les flottants
.content {
clear:both;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017336
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017337
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017338
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017339
Overflow : hidden
.parent {
overflow : hidden;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017340
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017342
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017343
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017344
Display:block
a {
display:block;
}
Pour transformer les liens inline en
lments de bloc
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017345
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017346
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017347
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017348
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017349
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017350
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017351
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017353
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017354
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;
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017355
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;
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017356
Position:relative;
.content a {
position:relative;
top:-15px;
}
Dplacer un lment de quelques pixels
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017357
Position:relative;
.picto {
position: relative;
top:5px;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017358
Position:relative;
Faire un lien qui senfonce de 2px quand
on lactive
.button:active{
position: relative;
top:2px;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017359
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017360
Exemple de position : fixed d'une barre de navigation en haut
Position :fixed
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017361
Position :fixed
Sortir la navigation du flux .nav {
position: fixed;
}
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017362
Position :fixed
La positionner en haut 0px des 3 coins
pour quelle saffiche toujours
.nav { position: fixed; top: 0; left: 0; right: 0; }
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017363
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017365
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;
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017366
Position: absolute;
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017367
Centrer une lgende dimage
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017368
Position: absolute;
.caption { background: rgba(0,0,0,0.8); color: #fff; padding: 20px; }
Prparer limage avec les couleurs
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017369
Position: absolute;.caption {
position: absolute;
bottom: 150px;
left: 0;
right: 0;
}
Prparer le positionnement de limage
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017370
Position: absolute;
.img-caption {
position: relative;
}
Positionner le parent pour que la
lgende se place par rapport aux bords
de ce dernier
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017371
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017372
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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017373
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/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017374
http://mediaqueri.es/
Adapter son site au mobile : le responsive webdesign
http://mediaqueri.es/
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017375
@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
-
Initiation HTML CSS - Stphanie Walter - 2016 / 2017376
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
top related