SlideShare une entreprise Scribd logo
Fait avec passion ©2021 ericacademy
le développement WEB Responsif
ericacademy
Apprendre Autrement
La meilleure application est une


page blanche
“
PARETO
VILFREDO
Apprendre un Nouveau Language?
80% du code est écrit
par 20% des
fonctionnalités!
Site Internet ou Application
Une analogie simple:
HTML CSS JAVASCRIPT
C’Est Quoi le HTML?
HTML est partout autour de nous. Il est utilisé sur les sites web, dans les applications, dans
d'autres logiciels, à chaque fois que la technologie web est utilisée. HTML fournit le conduit
pour le contenu, les mots, les images, la vidéo et l'audio, les formulaires … et est la base solide
sur laquelle tout le reste est construit.


C’est le BAMANANKAN du WEB, la langue du WEB.
logiciel
site WEB
application
C’Est Quoi le Language HTML?
•Traitement de texte (Word Processing)


•RUNOFF-GML-XML-HTML


•<…></…>? SCRIBE (formatage != contenu)


•La boite devenu fourre-tout


(combat MS-Netscape, formatage devenu app, …)


•Résistant (avantage ou défaut?)
Le WEB n’est pas une page mais un PARCHEMIN
C’Est Quoi le CSS?
Le CSS est un élément fondamental de la conception de sites Web, car il contrôle l'apparence
de vos pages Web. Sans cela, les sites Web ne pourraient afficher que du texte sur fond blanc.
Utilisez les feuilles de style en cascade pour faire passer vos sites Web HTML ordinaires au
niveau supérieur.
sans css avec css
avec CSS sans CSS
où faut-il commencer?
Plani
fi
cation, Clef de Tous les Succès
Il est toujours bon d'avoir une


vue d'ensemble de l’objectif et de
ce dont on a besoin pour y arriver.
C’est toujours plus OPTIMAL!
Par Où Commencer son Site?
Le wireframe (maquette) permet d’avoir une vue d’ensemble de son site avant sa création.


Il est toujours mieux de partir d’un plan avant la construction d’une maison à moins d’être fan de
moments stressants 😅.
header
contenu principal
aside
c’est à qui ce chat 😱?
Il Vous Faudra un Éditeur de Code
Tout sur:
Basics:


•Ref css


•Relative path


•Absolute path


Premiers Pas:


•Syntax


•Valeurs et unités


•Couleurs


•Texte


•Selecteurs


•Spécificité


•Cascade
Box Model


•Inline, block, inline-block


•Relative path


•Absolute path


Float
CSS
•Basics


•Texte


•Liens


•Images


•Médias
HTML
HTML5, les Nouvelles Balises
CSS, Existence Dans le HTML
/* FICHIER EXTERNE */


<link rel="stylesheet" href=“/mystyle.css">


/* INTERNE */


<style>


body {


  background-color: gray;


}


</style>


/* INLINE */


<h1 style="color:blue;text-align:center;">This is a heading</h1>
CSS, Lien RELATIF vs ABSOLUT
/* LIEN RELATIF */


<link rel="stylesheet" href=“mystyle.css">


/* LIEN ABSOLUT */


<link rel="stylesheet" href=“http://monsite.com/mystyle.css”>


<a href=‘http://www.google.com’>mon lien</p>
CSS, la Syntaxe
/* notation longue */


padding-top: 10px;


padding-right: 5px;


padding-bottom: 10px;


padding-left: 5px;


/* notation courte */


padding: 10px 5px;
p {


color: red;


}
Sélecteur
Valeur
Propriété
Bloc de Déclaration
Déclaration
/* p{color:red;} */
CSS, les Unités
/* OK */


color: green;


padding: 10px;


font-size: 3em;


color: rgb(123,0,123);


/* NOK */


padding: red;


font-size: rgb(123,0,123);
/* UNITÉS ABSOLUES */


Toujours fixe.


Cette taille ne change jamais.


EX: px, cm, mm, pt
/* UNITÉS RELATIVES */


Taille flexible.


Dépend de la taille du PARENT.


EX: %, em, rem, vw, vh
/* EXCEPTIONS */


line-height: 1.2;


color: red;
CSS, CLASS vs ID
/* CLASS */


/* HTML */


<p class=‘alert’>Ceci est un message important</p>


/* CSS */


.alert { color: red; }


/* ID */


/* HTML */


<p id=‘alert’>Ceci est un message important</p>


/* CSS */


#alert { color: red; }
Réutilisable
Unique
/* <p class=‘alert error message’>Ceci est un message important</p> */
CSS, Box Model ou Modèle de Boite
Margin
Border
Padding
CONTENT
/* BOX MODEL */


La chose la plus importante dans le CSS est de pouvoir
calculer la taille d’un élément


(ce n’est pas si simple)


Par rapport à un élément, il y’a 2 notions importantes à savoir:


•CONTENT BLOCK (padding, border, width)


•CONTAINING BLOCK (margin)


Quand un élément ne tient pas dans son parent, le navigateur
peut sacri
fi
er les margin/padding
Le modèle de boite est la base du
positionnement de tout élément sur
une page web.
CSS, le Display
UN
DEUX
TROIS
1 2 3
4 UN DEUX
TROIS
BLOCK INLINE INLINE-BLOC NONE
Le DISPLAY permet de changer l’af
fi
chage


(ou pas) d’un élément sur une page WEB.
CSS, FLOAT & CLEAR
Flux Normal


du document
Une propriété importante à maitriser dans le CSS.


FLOAT LEFT ou RIGHT bouge l’élément à l’extrême gauche ou l’extrême droite de son
parent.


FLOAT enlève un élément du Flux Normal du Document et le navigateur traite la
partie comme si elle n’existait pas dans le code mais SI d’un point de vue visuel.
img
P
fl
oat left
fl
oat right
/* LEFT | RIGHT | NONE */
CSS, le RESET
Le CSS RESET permet d’enlever les valeurs par défaut
appliquées par le navigateur pour commencer un
design sur de bonnes bases.


C’est d’autant plus pertinent que les navigateurs n’ont
pas forcément les mêmes valeurs par défaut.


Donc la meilleure façon de procéder est d’écraser le
style par défaut.
html, body, div, span, applet, object, iframe,


h1, h2, h3, h4, h5, h6, p, blockquote, pre,


a, abbr, acronym, address, big, cite, code,


del, dfn, em, img, ins, kbd, q, s, samp,


small, strike, strong, sub, sup, tt, var,


b, u, i, center,


dl, dt, dd, ol, ul, li,


fi
eldset, form, label, legend,


table, caption, tbody, tfoot, thead, tr, th, td,


article, aside, canvas, details, embed,


fi
gure,
fi
gcaption, footer, header, hgroup,


menu, nav, output, ruby, section, summary,


time, mark, audio, video {


	 margin: 0;


	 padding: 0;


	 border: 0;


	 font-size: 100%;


	 font: inherit;


	 vertical-align: baseline;


}


/* HTML5 display-role reset for older browsers */


article, aside, details,
fi
gcaption,
fi
gure,


footer, header, hgroup, menu, nav, section {


	 display: block;


}


body {


	 line-height: 1;


}
CSS, Le RESPONSIF
@media only screen and (){}


(max-width: ..) and (min-width: ..)


(orientation: landscape)


PC MOBILE
Les con
fi
gurations Responsives nous permettent d’adapter le contenu de notre site
internet à la taille de l’équipement utilisé par nos clients.


On peut paramétrer les tailles, orientations et le support utilise par nos clients


Penser à mettre le meta à jour:


<meta name="viewport" content="width=device-width, initial-scale=1">
Un EXEMPLE …
Fait avec passion ©2021 ericacademy
MERCI
Des questions? Besoin d’aide?
erickeita@protonmail.com
ericacademy
Apprendre Autrement

Contenu connexe

Similaire à initiation-dvptWEB-ericacademy.pdf

Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
sellamimariem574
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
Yves Van Goethem
 
Formation web
Formation webFormation web
Formation web
Stéphane BIOKOU
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
François-Guillaume Ribreau
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
AmineReal
 
Développement Web
Développement WebDéveloppement Web
Développement Web
mastertic
 
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
ssuser1a62e1
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
Ouadie LAHDIOUI
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
JDerrien
 
Développement d'interfaces web
Développement d'interfaces webDéveloppement d'interfaces web
Développement d'interfaces web
David Desrousseaux
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
laureno
 
Un site Web de qualité
Un site Web de qualitéUn site Web de qualité
Un site Web de qualité
mastertic
 
Web typographie
Web typographieWeb typographie
Web typographie
mirko
 
Séminaire Ruby on Rails (novembre 2010)
Séminaire Ruby on Rails (novembre 2010)Séminaire Ruby on Rails (novembre 2010)
Séminaire Ruby on Rails (novembre 2010)
Novelys
 
Sass et Compass ont embelli mon quotidien, Sud Web 2013
Sass et Compass ont embelli mon quotidien, Sud Web 2013Sass et Compass ont embelli mon quotidien, Sud Web 2013
Sass et Compass ont embelli mon quotidien, Sud Web 2013
Mehdi Kabab
 
CSS
CSSCSS
CSS
adil h
 
Développement Web
Développement WebDéveloppement Web
Développement Web
mastertic
 
Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15
Abdoulaye Dieng
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
tanokouakouludovic
 

Similaire à initiation-dvptWEB-ericacademy.pdf (20)

Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
 
Formation web
Formation webFormation web
Formation web
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Développement d'interfaces web
Développement d'interfaces webDéveloppement d'interfaces web
Développement d'interfaces web
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
 
Un site Web de qualité
Un site Web de qualitéUn site Web de qualité
Un site Web de qualité
 
Web typographie
Web typographieWeb typographie
Web typographie
 
Séminaire Ruby on Rails (novembre 2010)
Séminaire Ruby on Rails (novembre 2010)Séminaire Ruby on Rails (novembre 2010)
Séminaire Ruby on Rails (novembre 2010)
 
Css
CssCss
Css
 
Sass et Compass ont embelli mon quotidien, Sud Web 2013
Sass et Compass ont embelli mon quotidien, Sud Web 2013Sass et Compass ont embelli mon quotidien, Sud Web 2013
Sass et Compass ont embelli mon quotidien, Sud Web 2013
 
CSS
CSSCSS
CSS
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 

Plus de EricKeita

typographie-ericacademy.pdf
typographie-ericacademy.pdftypographie-ericacademy.pdf
typographie-ericacademy.pdf
EricKeita
 
programmes-fidelite-ericacademy.pdf
programmes-fidelite-ericacademy.pdfprogrammes-fidelite-ericacademy.pdf
programmes-fidelite-ericacademy.pdf
EricKeita
 
buzz-reseaux-sociaux-ericacademy.pdf
buzz-reseaux-sociaux-ericacademy.pdfbuzz-reseaux-sociaux-ericacademy.pdf
buzz-reseaux-sociaux-ericacademy.pdf
EricKeita
 
brand-identity-ericacademy.pdf
brand-identity-ericacademy.pdfbrand-identity-ericacademy.pdf
brand-identity-ericacademy.pdf
EricKeita
 
internet-Mali-ericacademy.pdf
internet-Mali-ericacademy.pdfinternet-Mali-ericacademy.pdf
internet-Mali-ericacademy.pdf
EricKeita
 
site-noCODE-ericacademy.pdf
site-noCODE-ericacademy.pdfsite-noCODE-ericacademy.pdf
site-noCODE-ericacademy.pdf
EricKeita
 
entreprendre-15regles-ericacademy.pdf
entreprendre-15regles-ericacademy.pdfentreprendre-15regles-ericacademy.pdf
entreprendre-15regles-ericacademy.pdf
EricKeita
 
UX-Design-ericacademy.pdf
UX-Design-ericacademy.pdfUX-Design-ericacademy.pdf
UX-Design-ericacademy.pdf
EricKeita
 
initiation-programmation-erickeita.pdf
initiation-programmation-erickeita.pdfinitiation-programmation-erickeita.pdf
initiation-programmation-erickeita.pdf
EricKeita
 

Plus de EricKeita (9)

typographie-ericacademy.pdf
typographie-ericacademy.pdftypographie-ericacademy.pdf
typographie-ericacademy.pdf
 
programmes-fidelite-ericacademy.pdf
programmes-fidelite-ericacademy.pdfprogrammes-fidelite-ericacademy.pdf
programmes-fidelite-ericacademy.pdf
 
buzz-reseaux-sociaux-ericacademy.pdf
buzz-reseaux-sociaux-ericacademy.pdfbuzz-reseaux-sociaux-ericacademy.pdf
buzz-reseaux-sociaux-ericacademy.pdf
 
brand-identity-ericacademy.pdf
brand-identity-ericacademy.pdfbrand-identity-ericacademy.pdf
brand-identity-ericacademy.pdf
 
internet-Mali-ericacademy.pdf
internet-Mali-ericacademy.pdfinternet-Mali-ericacademy.pdf
internet-Mali-ericacademy.pdf
 
site-noCODE-ericacademy.pdf
site-noCODE-ericacademy.pdfsite-noCODE-ericacademy.pdf
site-noCODE-ericacademy.pdf
 
entreprendre-15regles-ericacademy.pdf
entreprendre-15regles-ericacademy.pdfentreprendre-15regles-ericacademy.pdf
entreprendre-15regles-ericacademy.pdf
 
UX-Design-ericacademy.pdf
UX-Design-ericacademy.pdfUX-Design-ericacademy.pdf
UX-Design-ericacademy.pdf
 
initiation-programmation-erickeita.pdf
initiation-programmation-erickeita.pdfinitiation-programmation-erickeita.pdf
initiation-programmation-erickeita.pdf
 

Dernier

Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Maalik Jallo
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
Sébastien Le Marchand
 
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptxCours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Jacques KIZA DIMANDJA
 
Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)
Adrien Blind
 
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
InnovaSter-Trade Ltd.
 
Lae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdfLae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdf
djelloulbra
 
procede de fabrication mecanique et industriel
procede de fabrication mecanique et industrielprocede de fabrication mecanique et industriel
procede de fabrication mecanique et industriel
saadbellaari
 

Dernier (7)

Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
 
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptxCours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
 
Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)
 
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
 
Lae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdfLae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdf
 
procede de fabrication mecanique et industriel
procede de fabrication mecanique et industrielprocede de fabrication mecanique et industriel
procede de fabrication mecanique et industriel
 

initiation-dvptWEB-ericacademy.pdf

  • 1. Fait avec passion ©2021 ericacademy le développement WEB Responsif ericacademy Apprendre Autrement
  • 2. La meilleure application est une page blanche “
  • 3. PARETO VILFREDO Apprendre un Nouveau Language? 80% du code est écrit par 20% des fonctionnalités!
  • 4. Site Internet ou Application Une analogie simple: HTML CSS JAVASCRIPT
  • 5. C’Est Quoi le HTML? HTML est partout autour de nous. Il est utilisé sur les sites web, dans les applications, dans d'autres logiciels, à chaque fois que la technologie web est utilisée. HTML fournit le conduit pour le contenu, les mots, les images, la vidéo et l'audio, les formulaires … et est la base solide sur laquelle tout le reste est construit. C’est le BAMANANKAN du WEB, la langue du WEB. logiciel site WEB application
  • 6. C’Est Quoi le Language HTML? •Traitement de texte (Word Processing) •RUNOFF-GML-XML-HTML •<…></…>? SCRIBE (formatage != contenu) •La boite devenu fourre-tout (combat MS-Netscape, formatage devenu app, …) •Résistant (avantage ou défaut?) Le WEB n’est pas une page mais un PARCHEMIN
  • 7. C’Est Quoi le CSS? Le CSS est un élément fondamental de la conception de sites Web, car il contrôle l'apparence de vos pages Web. Sans cela, les sites Web ne pourraient afficher que du texte sur fond blanc. Utilisez les feuilles de style en cascade pour faire passer vos sites Web HTML ordinaires au niveau supérieur. sans css avec css
  • 10. Plani fi cation, Clef de Tous les Succès
  • 11. Il est toujours bon d'avoir une vue d'ensemble de l’objectif et de ce dont on a besoin pour y arriver.
  • 13. Par Où Commencer son Site? Le wireframe (maquette) permet d’avoir une vue d’ensemble de son site avant sa création. Il est toujours mieux de partir d’un plan avant la construction d’une maison à moins d’être fan de moments stressants 😅. header contenu principal aside c’est à qui ce chat 😱?
  • 14. Il Vous Faudra un Éditeur de Code
  • 15. Tout sur: Basics: •Ref css •Relative path •Absolute path Premiers Pas: •Syntax •Valeurs et unités •Couleurs •Texte •Selecteurs •Spécificité •Cascade Box Model •Inline, block, inline-block •Relative path •Absolute path Float CSS •Basics •Texte •Liens •Images •Médias HTML
  • 17. CSS, Existence Dans le HTML /* FICHIER EXTERNE */ <link rel="stylesheet" href=“/mystyle.css"> /* INTERNE */ <style> body {   background-color: gray; } </style> /* INLINE */ <h1 style="color:blue;text-align:center;">This is a heading</h1>
  • 18. CSS, Lien RELATIF vs ABSOLUT /* LIEN RELATIF */ <link rel="stylesheet" href=“mystyle.css"> /* LIEN ABSOLUT */ <link rel="stylesheet" href=“http://monsite.com/mystyle.css”> <a href=‘http://www.google.com’>mon lien</p>
  • 19. CSS, la Syntaxe /* notation longue */ padding-top: 10px; padding-right: 5px; padding-bottom: 10px; padding-left: 5px; /* notation courte */ padding: 10px 5px; p { color: red; } Sélecteur Valeur Propriété Bloc de Déclaration Déclaration /* p{color:red;} */
  • 20. CSS, les Unités /* OK */ color: green; padding: 10px; font-size: 3em; color: rgb(123,0,123); /* NOK */ padding: red; font-size: rgb(123,0,123); /* UNITÉS ABSOLUES */ Toujours fixe. Cette taille ne change jamais. EX: px, cm, mm, pt /* UNITÉS RELATIVES */ Taille flexible. Dépend de la taille du PARENT. EX: %, em, rem, vw, vh /* EXCEPTIONS */ line-height: 1.2; color: red;
  • 21. CSS, CLASS vs ID /* CLASS */ /* HTML */ <p class=‘alert’>Ceci est un message important</p> /* CSS */ .alert { color: red; } /* ID */ /* HTML */ <p id=‘alert’>Ceci est un message important</p> /* CSS */ #alert { color: red; } Réutilisable Unique /* <p class=‘alert error message’>Ceci est un message important</p> */
  • 22. CSS, Box Model ou Modèle de Boite Margin Border Padding CONTENT /* BOX MODEL */ La chose la plus importante dans le CSS est de pouvoir calculer la taille d’un élément (ce n’est pas si simple) Par rapport à un élément, il y’a 2 notions importantes à savoir: •CONTENT BLOCK (padding, border, width) •CONTAINING BLOCK (margin) Quand un élément ne tient pas dans son parent, le navigateur peut sacri fi er les margin/padding Le modèle de boite est la base du positionnement de tout élément sur une page web.
  • 23. CSS, le Display UN DEUX TROIS 1 2 3 4 UN DEUX TROIS BLOCK INLINE INLINE-BLOC NONE Le DISPLAY permet de changer l’af fi chage (ou pas) d’un élément sur une page WEB.
  • 24. CSS, FLOAT & CLEAR Flux Normal du document Une propriété importante à maitriser dans le CSS. FLOAT LEFT ou RIGHT bouge l’élément à l’extrême gauche ou l’extrême droite de son parent. FLOAT enlève un élément du Flux Normal du Document et le navigateur traite la partie comme si elle n’existait pas dans le code mais SI d’un point de vue visuel. img P fl oat left fl oat right /* LEFT | RIGHT | NONE */
  • 25. CSS, le RESET Le CSS RESET permet d’enlever les valeurs par défaut appliquées par le navigateur pour commencer un design sur de bonnes bases. C’est d’autant plus pertinent que les navigateurs n’ont pas forcément les mêmes valeurs par défaut. Donc la meilleure façon de procéder est d’écraser le style par défaut. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fi eldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, fi gure, fi gcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, fi gcaption, fi gure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; }
  • 26. CSS, Le RESPONSIF @media only screen and (){} (max-width: ..) and (min-width: ..) (orientation: landscape) PC MOBILE Les con fi gurations Responsives nous permettent d’adapter le contenu de notre site internet à la taille de l’équipement utilisé par nos clients. On peut paramétrer les tailles, orientations et le support utilise par nos clients Penser à mettre le meta à jour: <meta name="viewport" content="width=device-width, initial-scale=1">
  • 28. Fait avec passion ©2021 ericacademy MERCI Des questions? Besoin d’aide? erickeita@protonmail.com ericacademy Apprendre Autrement