Soumettre la recherche
Mettre en ligne
Xhtml et Css
•
Télécharger en tant que KEY, PDF
•
4 j'aime
•
1,242 vues
Fred Colantonio
Suivre
Module de formation aux feuilles de style CSS
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 106
Télécharger maintenant
Recommandé
Le Langage CSS
Le Langage CSS
Mohammed Amine Mostefai
CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de style
Kaelig Deloumeau-Prigent
Ensayo 1
Ensayo 1
gloria421
Portafolio diagnóstico Bellanith
Portafolio diagnóstico Bellanith
Bellanith Aguilar Vásquez
Redes info
Redes info
DaviddeLeonO
El muro de Berlín, en el 25 aniversario, los otros muros actuales
El muro de Berlín, en el 25 aniversario, los otros muros actuales
Sebastián Lora Sánchez
Adenocarcinoma de gl. perianales samoyedo
Adenocarcinoma de gl. perianales samoyedo
Carlos Morales Mendoza
Vokietija
Vokietija
Wika Gorbatovskytė
Recommandé
Le Langage CSS
Le Langage CSS
Mohammed Amine Mostefai
CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de style
Kaelig Deloumeau-Prigent
Ensayo 1
Ensayo 1
gloria421
Portafolio diagnóstico Bellanith
Portafolio diagnóstico Bellanith
Bellanith Aguilar Vásquez
Redes info
Redes info
DaviddeLeonO
El muro de Berlín, en el 25 aniversario, los otros muros actuales
El muro de Berlín, en el 25 aniversario, los otros muros actuales
Sebastián Lora Sánchez
Adenocarcinoma de gl. perianales samoyedo
Adenocarcinoma de gl. perianales samoyedo
Carlos Morales Mendoza
Vokietija
Vokietija
Wika Gorbatovskytė
Saluuuut
Saluuuut
scatavrio
El mundo en_el_2070
El mundo en_el_2070
eugenia25reyes
Diaporama des aléas du surf
Diaporama des aléas du surf
marinetursiop
Sistemas operativos
Sistemas operativos
frech15
Redes sociales tecnologia
Redes sociales tecnologia
rojasyuli
M vega cois202 presentacion
M vega cois202 presentacion
mariselv
Economía y sistema científico
Economía y sistema científico
Maria Garcia
Tormenta de ideas
Tormenta de ideas
Juan Luis
Baza
Baza
bbminina
El ciclo del agua
El ciclo del agua
Fernandez Marquez Paco
2014's Top 10 Best Joint Support Vitamins
2014's Top 10 Best Joint Support Vitamins
Top10Supplements.com
Teatro
Teatro
Abril Leon
Power point parapharmacien
Power point parapharmacien
Yousra Asri
Segundo momento
Segundo momento
Oscar Angel
Future of data
Future of data
Modern Data Stack France
L1 Management Regional Dreilaenderdialog F1 0
L1 Management Regional Dreilaenderdialog F1 0
regiosuisse
Rapport senateur bockel surligné cyber defense - 19 juillet 2012
Rapport senateur bockel surligné cyber defense - 19 juillet 2012
Gilles Sgro
Plan Desarrollo Local 2003 -2010
Plan Desarrollo Local 2003 -2010
municdg
Examen oral 4o Bimestre Segundo Enseñanza Media
Examen oral 4o Bimestre Segundo Enseñanza Media
Baltasar Pena Abal
La perspective de l'employeur en lien avec l'usage des réseaux sociaux par le...
La perspective de l'employeur en lien avec l'usage des réseaux sociaux par le...
Swiss Community Managers Association
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
Yves Van Goethem
seance3-1 CSS.ppt
seance3-1 CSS.ppt
AmineReal
Contenu connexe
En vedette
Saluuuut
Saluuuut
scatavrio
El mundo en_el_2070
El mundo en_el_2070
eugenia25reyes
Diaporama des aléas du surf
Diaporama des aléas du surf
marinetursiop
Sistemas operativos
Sistemas operativos
frech15
Redes sociales tecnologia
Redes sociales tecnologia
rojasyuli
M vega cois202 presentacion
M vega cois202 presentacion
mariselv
Economía y sistema científico
Economía y sistema científico
Maria Garcia
Tormenta de ideas
Tormenta de ideas
Juan Luis
Baza
Baza
bbminina
El ciclo del agua
El ciclo del agua
Fernandez Marquez Paco
2014's Top 10 Best Joint Support Vitamins
2014's Top 10 Best Joint Support Vitamins
Top10Supplements.com
Teatro
Teatro
Abril Leon
Power point parapharmacien
Power point parapharmacien
Yousra Asri
Segundo momento
Segundo momento
Oscar Angel
Future of data
Future of data
Modern Data Stack France
L1 Management Regional Dreilaenderdialog F1 0
L1 Management Regional Dreilaenderdialog F1 0
regiosuisse
Rapport senateur bockel surligné cyber defense - 19 juillet 2012
Rapport senateur bockel surligné cyber defense - 19 juillet 2012
Gilles Sgro
Plan Desarrollo Local 2003 -2010
Plan Desarrollo Local 2003 -2010
municdg
Examen oral 4o Bimestre Segundo Enseñanza Media
Examen oral 4o Bimestre Segundo Enseñanza Media
Baltasar Pena Abal
La perspective de l'employeur en lien avec l'usage des réseaux sociaux par le...
La perspective de l'employeur en lien avec l'usage des réseaux sociaux par le...
Swiss Community Managers Association
En vedette
(20)
Saluuuut
Saluuuut
El mundo en_el_2070
El mundo en_el_2070
Diaporama des aléas du surf
Diaporama des aléas du surf
Sistemas operativos
Sistemas operativos
Redes sociales tecnologia
Redes sociales tecnologia
M vega cois202 presentacion
M vega cois202 presentacion
Economía y sistema científico
Economía y sistema científico
Tormenta de ideas
Tormenta de ideas
Baza
Baza
El ciclo del agua
El ciclo del agua
2014's Top 10 Best Joint Support Vitamins
2014's Top 10 Best Joint Support Vitamins
Teatro
Teatro
Power point parapharmacien
Power point parapharmacien
Segundo momento
Segundo momento
Future of data
Future of data
L1 Management Regional Dreilaenderdialog F1 0
L1 Management Regional Dreilaenderdialog F1 0
Rapport senateur bockel surligné cyber defense - 19 juillet 2012
Rapport senateur bockel surligné cyber defense - 19 juillet 2012
Plan Desarrollo Local 2003 -2010
Plan Desarrollo Local 2003 -2010
Examen oral 4o Bimestre Segundo Enseñanza Media
Examen oral 4o Bimestre Segundo Enseñanza Media
La perspective de l'employeur en lien avec l'usage des réseaux sociaux par le...
La perspective de l'employeur en lien avec l'usage des réseaux sociaux par le...
Similaire à Xhtml et Css
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
Yves Van Goethem
seance3-1 CSS.ppt
seance3-1 CSS.ppt
AmineReal
Atelier template
Atelier template
Pierre Sempé
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
YounesOuladSayad1
Performance et optimisation de PrestaShop
Performance et optimisation de PrestaShop
PrestaShop
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
Oxalide
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
Ludovic Piot
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Paris, France
Ilearn 2008 Competences en mouvement
Ilearn 2008 Competences en mouvement
Yves Otis
Referencement : indexation et optimisation technique (SEO)
Referencement : indexation et optimisation technique (SEO)
JCD srcmontbeliard
Conception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
davidbx
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Horacio Gonzalez
CSS
CSS
adil h
Internationalisation du Front
Internationalisation du Front
Yannick Croissant
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web GTI780 & MTI780 ETS A09
Claude Coulombe
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
Kaelig Deloumeau-Prigent
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Claude Coulombe
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Abdessattar Ettaieb
Cascade et héritage : concevoir, organiser, optimiser…
Cascade et héritage : concevoir, organiser, optimiser…
Romy Duhem-Verdière
Découverte HTML5/CSS3
Découverte HTML5/CSS3
François-Guillaume Ribreau
Similaire à Xhtml et Css
(20)
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
seance3-1 CSS.ppt
seance3-1 CSS.ppt
Atelier template
Atelier template
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
Performance et optimisation de PrestaShop
Performance et optimisation de PrestaShop
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Ilearn 2008 Competences en mouvement
Ilearn 2008 Competences en mouvement
Referencement : indexation et optimisation technique (SEO)
Referencement : indexation et optimisation technique (SEO)
Conception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
CSS
CSS
Internationalisation du Front
Internationalisation du Front
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web GTI780 & MTI780 ETS A09
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Cascade et héritage : concevoir, organiser, optimiser…
Cascade et héritage : concevoir, organiser, optimiser…
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Plus de Fred Colantonio
Stratégie digitale, médias et réseaux sociaux
Stratégie digitale, médias et réseaux sociaux
Fred Colantonio
Réussir son business en 2016 - 5 stratégies d'action pour réussir 2016
Réussir son business en 2016 - 5 stratégies d'action pour réussir 2016
Fred Colantonio
Fred Colantonio invite à passer à l'action et devenir les Héros de votre prop...
Fred Colantonio invite à passer à l'action et devenir les Héros de votre prop...
Fred Colantonio
Le succès est une question d’attitude Inspirez-vous de personnalités hors d...
Le succès est une question d’attitude Inspirez-vous de personnalités hors d...
Fred Colantonio
Près de 250 futurs Héros dans l'auditoire de l'UCM
Près de 250 futurs Héros dans l'auditoire de l'UCM
Fred Colantonio
Entrepreneuriat - Pour inspirer les entrepreneurs wallons
Entrepreneuriat - Pour inspirer les entrepreneurs wallons
Fred Colantonio
Social Media Trends : business & life in a digitalized world
Social Media Trends : business & life in a digitalized world
Fred Colantonio
Référencement naturel (SEO), e-marketing et visibilité web - 15 pratiques pou...
Référencement naturel (SEO), e-marketing et visibilité web - 15 pratiques pou...
Fred Colantonio
"Puisqu'on récolte ce qu'on sème, plantons-nous" - Comment votre perception...
"Puisqu'on récolte ce qu'on sème, plantons-nous" - Comment votre perception...
Fred Colantonio
How perception of failure affects success - Talk For TEDxLiege
How perception of failure affects success - Talk For TEDxLiege
Fred Colantonio
Le voyagistes sont épargnés par la sinistrose, mais…
Le voyagistes sont épargnés par la sinistrose, mais…
Fred Colantonio
Les 7 péchés capitaux de Facebook
Les 7 péchés capitaux de Facebook
Fred Colantonio
E-Commerce transgressif : vendre grâce à internet… sans boutique ?
E-Commerce transgressif : vendre grâce à internet… sans boutique ?
Fred Colantonio
Stratégies relationnelles - Réussir avec les autres
Stratégies relationnelles - Réussir avec les autres
Fred Colantonio
Web Trends - Usages connectés et stratégie de visibilité sur le web social (v...
Web Trends - Usages connectés et stratégie de visibilité sur le web social (v...
Fred Colantonio
Le Courrier Tournai (L'avenir) - Dimanche, ils se mobilisent pour Brayan grâc...
Le Courrier Tournai (L'avenir) - Dimanche, ils se mobilisent pour Brayan grâc...
Fred Colantonio
Social Media Communications vs. Corporate Standards - The Impacts
Social Media Communications vs. Corporate Standards - The Impacts
Fred Colantonio
Marketing mobile, commerce connecté et médias sociaux
Marketing mobile, commerce connecté et médias sociaux
Fred Colantonio
Test de gestion des emails, recrutement et réseaux sociaux
Test de gestion des emails, recrutement et réseaux sociaux
Fred Colantonio
Culture clients : utilisez la communication pour la fidélisation client, et f...
Culture clients : utilisez la communication pour la fidélisation client, et f...
Fred Colantonio
Plus de Fred Colantonio
(20)
Stratégie digitale, médias et réseaux sociaux
Stratégie digitale, médias et réseaux sociaux
Réussir son business en 2016 - 5 stratégies d'action pour réussir 2016
Réussir son business en 2016 - 5 stratégies d'action pour réussir 2016
Fred Colantonio invite à passer à l'action et devenir les Héros de votre prop...
Fred Colantonio invite à passer à l'action et devenir les Héros de votre prop...
Le succès est une question d’attitude Inspirez-vous de personnalités hors d...
Le succès est une question d’attitude Inspirez-vous de personnalités hors d...
Près de 250 futurs Héros dans l'auditoire de l'UCM
Près de 250 futurs Héros dans l'auditoire de l'UCM
Entrepreneuriat - Pour inspirer les entrepreneurs wallons
Entrepreneuriat - Pour inspirer les entrepreneurs wallons
Social Media Trends : business & life in a digitalized world
Social Media Trends : business & life in a digitalized world
Référencement naturel (SEO), e-marketing et visibilité web - 15 pratiques pou...
Référencement naturel (SEO), e-marketing et visibilité web - 15 pratiques pou...
"Puisqu'on récolte ce qu'on sème, plantons-nous" - Comment votre perception...
"Puisqu'on récolte ce qu'on sème, plantons-nous" - Comment votre perception...
How perception of failure affects success - Talk For TEDxLiege
How perception of failure affects success - Talk For TEDxLiege
Le voyagistes sont épargnés par la sinistrose, mais…
Le voyagistes sont épargnés par la sinistrose, mais…
Les 7 péchés capitaux de Facebook
Les 7 péchés capitaux de Facebook
E-Commerce transgressif : vendre grâce à internet… sans boutique ?
E-Commerce transgressif : vendre grâce à internet… sans boutique ?
Stratégies relationnelles - Réussir avec les autres
Stratégies relationnelles - Réussir avec les autres
Web Trends - Usages connectés et stratégie de visibilité sur le web social (v...
Web Trends - Usages connectés et stratégie de visibilité sur le web social (v...
Le Courrier Tournai (L'avenir) - Dimanche, ils se mobilisent pour Brayan grâc...
Le Courrier Tournai (L'avenir) - Dimanche, ils se mobilisent pour Brayan grâc...
Social Media Communications vs. Corporate Standards - The Impacts
Social Media Communications vs. Corporate Standards - The Impacts
Marketing mobile, commerce connecté et médias sociaux
Marketing mobile, commerce connecté et médias sociaux
Test de gestion des emails, recrutement et réseaux sociaux
Test de gestion des emails, recrutement et réseaux sociaux
Culture clients : utilisez la communication pour la fidélisation client, et f...
Culture clients : utilisez la communication pour la fidélisation client, et f...
Xhtml et Css
1.
<html> .css {duo gagnant
du web} Module de formation © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
2.
Plan W3C : le
web encadré (X)HTML CSS Principes Syntaxe générale Valeurs et unités Sélecteurs © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
3.
W3C : le
web encadré © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
4.
W3C : le
web encadré W3C : World Wide Web Consortium (1994) Mission : promotion de la compatibilité des technologies du web (XHTML, CSS, PNG...) Fonctionnement : émission de recommandations (≠ normes, lois) Poids : valeur de standards industriels (normalisation) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
5.
1. Principes
1. Généralités © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
6.
1. Principes
1. Généralités • Séparation nette entre structuration et mise en forme/ présentation associée © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
7.
1. Principes
1. Généralités • Séparation nette entre structuration et mise en forme/ présentation associée • Une information peut être présentée (XHTML) et restituée (CSS) de manière différente, sur base d’une même information brute © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
8.
1. Principes
1. Généralités • Séparation nette entre structuration et mise en forme/ présentation associée • Une information peut être présentée (XHTML) et restituée (CSS) de manière différente, sur base d’une même information brute XHTML CSS Structuration 1 Rendu 1 Info brute Structuration 2 Rendu 2 Structuration 3 Rendu 3 © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
9.
1. Principes
1. Généralités XHTML CSS Rendu 1 Info brute Structuration Rendu 2 Rendu 3 © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
10.
1. Principes
1. Nouveaux concepts amenés par CSS © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
11.
1. Principes
1. Nouveaux concepts amenés par CSS • Sélecteurs : conditions qu’un élément doit vérifier pour se voir appliquer des règles de style (ex : body, #id, .class) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
12.
1. Principes
1. Nouveaux concepts amenés par CSS • Sélecteurs : conditions qu’un élément doit vérifier pour se voir appliquer des règles de style (ex : body, #id, .class) • Format d’écriture de styles : un attribut unique peut définir plusieurs styles (duplication inutile), tant en interne qu’en externe © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
13.
1. Principes
1. Nouveaux concepts amenés par CSS • Sélecteurs : conditions qu’un élément doit vérifier pour se voir appliquer des règles de style (ex : body, #id, .class) • Format d’écriture de styles : un attribut unique peut définir plusieurs styles (duplication inutile), tant en interne qu’en externe • Cascade : principe de confrontation des styles et de priorité entre auteur-lecteur-logiciel de restitution ; l’algorithme de cascade détermine les styles réellement appliqués au document in fine Principe : le plus particulier l’emporte © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
14.
2. Syntaxe générale Syntaxe
générale body { color: red; background: yellow; } qui est équivalent à : body {color: red; background: yellow;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
15.
2. Syntaxe générale Syntaxe
générale body { color: red; background: yellow; } qui est équivalent à : body {color: red; background: yellow;} • Un élément CSS est appelé une règle © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
16.
2. Syntaxe générale Syntaxe
générale body { color: red; background: yellow; } qui est équivalent à : body {color: red; background: yellow;} • Un élément CSS est appelé une règle • Chaque règle se compose de plusieurs parties © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
17.
2. Syntaxe générale Syntaxe
d’une règle CSS body {color : red; background: yellow;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
18.
2. Syntaxe générale Syntaxe
d’une règle CSS body {color : red; background: yellow;} Sélecteur © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
19.
2. Syntaxe générale Syntaxe
d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
20.
2. Syntaxe générale Syntaxe
d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
21.
2. Syntaxe générale Syntaxe
d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations {color : red;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
22.
2. Syntaxe générale Syntaxe
d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations {color : red;} Propriété © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
23.
2. Syntaxe générale Syntaxe
d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations {color : red;} Propriété Valeur © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
24.
2. Syntaxe générale
Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations {color : red;} Propriété Valeur • Sélecteur : partie du document HTML qui sera affectée © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
25.
2. Syntaxe générale
Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations {color : red;} Propriété Valeur • Sélecteur : partie du document HTML qui sera affectée • Souvent, un sélecteur est un élément HTML : html, body, h1, p, img, a... © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
26.
2. Syntaxe générale
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
27.
2. Syntaxe générale •
Exemple : © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
28.
2. Syntaxe générale •
Exemple : HTML <body> <p>Paragraphe 1</p> <ul> <li>élément 1</li> <li>élément 2</li> </ul> <p>Paragraphe 2</p> </body> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
29.
2. Syntaxe générale •
Exemple : HTML CSS <body> body {color: white;} <p>Paragraphe 1</p> <ul> p {font-size: 12px;} <li>élément 1</li> <li>élément 2</li> ul {list-style: square;} </ul> <p>Paragraphe 2</p> li {margin-left: 10px;} </body> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
30.
2. Syntaxe générale
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
31.
2. Syntaxe générale •
Un sélecteur peut aussi faire référence à un identifiant (id=“valeur”) ou une classe (class=“ valeur”) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
32.
2. Syntaxe générale •
Un sélecteur peut aussi faire référence à un identifiant (id=“valeur”) ou une classe (class=“ valeur”) HTML <body> <ul class=“list”> <li>élément 1</li> </ul> <p id=“intro”>Texte</p> <ul class=“list”> <li>élément 1</li> <li>élément 2</li> </ul> </body> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
33.
2. Syntaxe générale •
Un sélecteur peut aussi faire référence à un identifiant (id=“valeur”) ou une classe (class=“ valeur”) HTML <body> <ul class=“list”> <li>élément 1</li> </ul> <p id=“intro”>Texte</p> <ul class=“list”> <li>élément 1</li> <li>élément 2</li> </ul> </body> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
34.
2. Syntaxe générale •
Un sélecteur peut aussi faire référence à un identifiant (id=“valeur”) ou une classe (class=“ valeur”) HTML CSS <body> p {font-size: 12px;} <ul class=“list”> <li>élément 1</li> #intro {font-weight: </ul> bold;} <p id=“intro”>Texte</p> <ul class=“list”> .list {margin-left: <li>élément 1</li> 20px;} <li>élément 2</li> </ul> </body> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
35.
2. Syntaxe générale Exemples
de propriétés CSS © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
36.
2. Syntaxe générale Exemples
de propriétés CSS font-weight: bold; font-style: italic; text-decoration: underline; text-align: center; text-align: right; border: 1px solid black; color : red; font-size: 14px; background: url(fichier.jpg); background-color: #ffffff; font-family: Verdana; © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
37.
2. Syntaxe générale Exemples
de propriétés CSS <b> font-weight: bold; <i> font-style: italic; <u> text-decoration: underline; <center> text-align: center; <align> text-align: right; <border> border: 1px solid black; <color> color : red; <size> font-size: 14px; <background> background: url(fichier.jpg); <bgcolor> background-color: #ffffff; <font> font-family: Verdana; © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
38.
2. Syntaxe générale
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
39.
2. Syntaxe générale Quelques
règles CSS : © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
40.
2. Syntaxe générale
Quelques règles CSS : • Sur une même page, un identifiant (id) est toujours unique (pour les éléments qui se répètent : class) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
41.
2. Syntaxe générale
Quelques règles CSS : • Sur une même page, un identifiant (id) est toujours unique (pour les éléments qui se répètent : class) • CSS repose sur la cascade : hiérarchiquement, les éléments inférieurs (enfants) héritent par défaut des propriétés des éléments supérieurs (parents) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
42.
2. Syntaxe générale
Quelques règles CSS : • Sur une même page, un identifiant (id) est toujours unique (pour les éléments qui se répètent : class) • CSS repose sur la cascade : hiérarchiquement, les éléments inférieurs (enfants) héritent par défaut des propriétés des éléments supérieurs (parents) • Si une valeur CSS est erronée ou n’existe pas, la propriété est inopérante (aucun effet visible sur le sélecteur) Exemple : { color : ultraviolet; } ou {typo : verdana;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
43.
2. Syntaxe générale
Quelques règles CSS : • Sur une même page, un identifiant (id) est toujours unique (pour les éléments qui se répètent : class) • CSS repose sur la cascade : hiérarchiquement, les éléments inférieurs (enfants) héritent par défaut des propriétés des éléments supérieurs (parents) • Si une valeur CSS est erronée ou n’existe pas, la propriété est inopérante (aucun effet visible sur le sélecteur) Exemple : { color : ultraviolet; } ou {typo : verdana;} • Les commentaires en CSS s’écrivent : /* valeur commentée */ © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
44.
2. Syntaxe générale
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
45.
2. Syntaxe générale Quelques
avantages CSS : © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
46.
2. Syntaxe générale
Quelques avantages CSS : • Centralisation des balises : 1 balise peut définir les propriétés d’un élément pour tout un site © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
47.
2. Syntaxe générale
Quelques avantages CSS : • Centralisation des balises : 1 balise peut définir les propriétés d’un élément pour tout un site • Allégement des pages html © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
48.
2. Syntaxe générale
Quelques avantages CSS : • Centralisation des balises : 1 balise peut définir les propriétés d’un élément pour tout un site • Allégement des pages html • Facilité de maintenance © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
49.
2. Syntaxe générale
Quelques avantages CSS : • Centralisation des balises : 1 balise peut définir les propriétés d’un élément pour tout un site • Allégement des pages html • Facilité de maintenance • Possibilités de multiplier les variantes © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
50.
2. Syntaxe générale
Quelques avantages CSS : • Centralisation des balises : 1 balise peut définir les propriétés d’un élément pour tout un site • Allégement des pages html • Facilité de maintenance • Possibilités de multiplier les variantes • Facilité du langage © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
51.
3. Valeurs et
unités 1. Nombres © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
52.
3. Valeurs et
unités 1. Nombres • CSS gère les valeurs numériques © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
53.
3. Valeurs et
unités 1. Nombres • CSS gère les valeurs numériques • Les valeurs numériques sont de type : © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
54.
3. Valeurs et
unités 1. Nombres • CSS gère les valeurs numériques • Les valeurs numériques sont de type : • Entiers : 12, +375, -17 © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
55.
3. Valeurs et
unités 1. Nombres • CSS gère les valeurs numériques • Les valeurs numériques sont de type : • Entiers : 12, +375, -17 • Réels : 0.157, +2.1849, -5.2 © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
56.
3. Valeurs et
unités 1. Nombres • CSS gère les valeurs numériques • Les valeurs numériques sont de type : • Entiers : 12, +375, -17 • Réels : 0.157, +2.1849, -5.2 • /! pas de virgule © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
57.
3. Valeurs et
unités 2. Pourcentages © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
58.
3. Valeurs et
unités 2. Pourcentages • Nombre entier ou réel (+ ou -) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
59.
3. Valeurs et
unités 2. Pourcentages • Nombre entier ou réel (+ ou -) • Un pourcentage doit toujours être défini par rapport à une valeur de propriété © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
60.
3. Valeurs et
unités 2. Pourcentages • Nombre entier ou réel (+ ou -) • Un pourcentage doit toujours être défini par rapport à une valeur de propriété • /! pas d’espace entre le nombre et l’unité : 1 % © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
61.
3. Valeurs et
unités 3. Longueurs © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
62.
3. Valeurs et
unités 3. Longueurs • Les unités de longueur interviennent sur les propriétés exprimant une distance (position ou taille) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
63.
3. Valeurs et
unités 3. Longueurs • Les unités de longueur interviennent sur les propriétés exprimant une distance (position ou taille) • Une longueur est un entier ou un réel (+ ou -) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
64.
3. Valeurs et
unités 3. Longueurs • Les unités de longueur interviennent sur les propriétés exprimant une distance (position ou taille) • Une longueur est un entier ou un réel (+ ou -) • Ex : h1 {margin-top: 1cm;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
65.
3. Valeurs et
unités 3. Longueurs • Les unités de longueur interviennent sur les propriétés exprimant une distance (position ou taille) • Une longueur est un entier ou un réel (+ ou -) • Ex : h1 {margin-top: 1cm;} • /! pas d’espace entre le nombre et l’unité : 1 cm © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
66.
3. Valeurs et
unités 3. Longueurs • Deux types d’unités de longueur em ex px © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
67.
3. Valeurs et
unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES em cm mm ex in pt px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
68.
3. Valeurs et
unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em cm mm ex in pt px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
69.
3. Valeurs et
unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em cm centimètre mm ex in pt px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
70.
3. Valeurs et
unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em cm centimètre mm millimètre ex in pt px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
71.
3. Valeurs et
unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em cm centimètre mm millimètre in inch (1pouce = 2,54cm) ex pt px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
72.
3. Valeurs et
unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em centimètre cm millimètre mm inch (1pouce = 2,54cm) ex in point (1pt = 1/72è de in) pt px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
73.
3. Valeurs et
unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em centimètre cm millimètre mm inch (1pouce = 2,54cm) ex in point (1pt = 1/72è de in) pt pica (1pc = 1/6è de in) px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
74.
3. Valeurs et
unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em cadratin centimètre cm millimètre mm inch (1pouce = 2,54cm) ex in point (1pt = 1/72è de in) pt pica (1pc = 1/6è de in) px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
75.
3. Valeurs et
unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em cadratin centimètre cm millimètre mm ex hauteur de x inch (1pouce = 2,54cm) in point (1pt = 1/72è de in) pt pica (1pc = 1/6è de in) px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
76.
3. Valeurs et
unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em cadratin centimètre cm millimètre mm ex hauteur de x inch (1pouce = 2,54cm) in point (1pt = 1/72è de in) pt px relatif au moyen de pica (1pc = 1/6è de in) pc restitution © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
77.
3. Valeurs et
unités 3. Longueurs • Avantage des unités absolues : • Fixation au point près d’un élément • Avantage des unités relatives : • Calcul du positionnement par rapport à une autre longueur • Plus grande souplesse, flexibilité et adaptabilité © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
78.
3. Valeurs et
unités 3. Longueurs 1. Unité em • Correspond au cadratin français (espace blanc dont côté = taille des caractères) • Ex : p {margin-left: 2em;} • Marge gauche du paragraphe = double de la taille de fonte utilisée pour la restitution du paragraphe © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
79.
3. Valeurs et
unités 3. Longueurs 1. Unité em • Lorsqu’elle définit la taille de fonte d’un élément, elle dépend de la taille de fonte définie dans l’élément parent • Ex : li li {font-size: 0.8em;} • Taille de fonte dans li li correspond à 80% de la taille de fonte utilisée dans li • Unité très souple © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
80.
3. Valeurs et
unités 3. Longueurs 2. Unité ex • Hauteur du caractère x dans la fonte courante • Utile pour le calcul des “petites majuscules” • Dépassé car pratiquement inutile © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
81.
3. Valeurs et
unités 3. Longueurs 3. Unité px • Dépend du moyen de restitution • Conserve un rapport fixe entre définition locale du pixel et densité du périphérique de restitution • Unité relative conservant une précision de positionnement plus rigide que em © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
82.
4. Sélecteurs
1. Généralités Syntaxe générale body {color: red; background: yellow;} body est le sélecteur h1+p {margin-left: 2em;} h1+p est le sélecteur © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
83.
4. Sélecteurs
1. Généralités Syntaxe générale body {color: red; background: yellow;} body est le sélecteur h1+p {margin-left: 2em;} h1+p est le sélecteur • Condition ou série de conditions qui, si vérifiées, voient la déclaration du sélecteur appliquée à l’élément © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
84.
4. Sélecteurs
1. Généralités Syntaxe générale body {color: red; background: yellow;} body est le sélecteur h1+p {margin-left: 2em;} /! Inopérant sous IE6 h1+p est le sélecteur • Condition ou série de conditions qui, si vérifiées, voient la déclaration du sélecteur appliquée à l’élément © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
85.
4. Sélecteurs
2. Sélecteurs de type d’élément Syntaxe générale h1 {color: green;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
86.
4. Sélecteurs
2. Sélecteurs de type d’élément Syntaxe générale h1 {color: green;} • Composé d’un nom d’élément © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
87.
4. Sélecteurs
2. Sélecteurs de type d’élément Syntaxe générale h1 {color: green;} • Composé d’un nom d’élément • La déclaration est appliquée si l’élément a le type indiqué © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
88.
4. Sélecteurs
3. Sélecteur universel Syntaxe générale * {margin: 0; padding: 0;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
89.
4. Sélecteurs
3. Sélecteur universel Syntaxe générale * {margin: 0; padding: 0;} • Sélectionne indifféremment tous les types d’élément © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
90.
4. Sélecteurs
3. Sélecteur universel Syntaxe générale * {margin: 0; padding: 0;} • Sélectionne indifféremment tous les types d’élément • Ses déclarations sont appliquées à tous les éléments du document (sauf spécification contraire) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
91.
4. Sélecteurs
4. Sélecteur d’attribut © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
92.
4. Sélecteurs
4. Sélecteur d’attribut HTML <p id=“only”> Paragraphe </p> <p class=“a12”> Paragraphe </p> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
93.
4. Sélecteurs
4. Sélecteur d’attribut HTML CSS <p id=“only”> Paragraphe </p> #only {color: orange;} <p class=“a12”> .a12 {background: black;} Paragraphe </p> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
94.
4. Sélecteurs
5. Combinaison de sélecteurs Exemple p.emphase {font-weight: bold;} Résultat HTML <p class=“emphase”>Okay!</p> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
95.
4. Sélecteurs
5. Combinaison de sélecteurs • Les sélecteurs peuvent être combinés pour former des sélecteurs complexes Exemple p.emphase {font-weight: bold;} Résultat HTML <p class=“emphase”>Okay!</p> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
96.
4. Sélecteurs
5. Combinaison de sélecteurs • Les sélecteurs peuvent être combinés pour former des sélecteurs complexes • Les éléments peuvent ainsi être ciblés très précisément Exemple p.emphase {font-weight: bold;} Résultat HTML <p class=“emphase”>Okay!</p> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
97.
4. Sélecteurs
5. Combinaison de sélecteurs • Les sélecteurs peuvent être combinés pour former des sélecteurs complexes • Les éléments peuvent ainsi être ciblés très précisément Exemple p.emphase {font-weight: bold;} • Pour être en gras, l’élément doit avoir pour type p et également pour classe emphase. Résultat HTML <p class=“emphase”>Okay!</p> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
98.
4. Sélecteurs
5. Combinaison de sélecteurs Variantes qui fonctionnent <p class=quot;emphasequot;>Okay</p> <div class=quot;emphasequot;><p>Okay</p></div> <p>Ce test est <span class=quot;emphasequot;>okay</span>.</p> Affichage Okay Okay Ce test est okay. © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
99.
4. Sélecteurs
6. Sélecteurs contextuels Rendu Exemple h1 {color: green;} Ce titre est important em {color: green;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
100.
4. Sélecteurs
6. Sélecteurs contextuels • Un sélecteur contextuel tient compte de son contexte pour s’appliquer ou non Rendu Exemple h1 {color: green;} Ce titre est important em {color: green;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
101.
4. Sélecteurs
6. Sélecteurs contextuels • Un sélecteur contextuel tient compte de son contexte pour s’appliquer ou non Rendu Exemple h1 {color: green;} Ce titre est important em {color: green;} • Supposons que l’on veuille mettre une emphase sur em dans le titre ; dans le cas ci-dessus, c’est impossible © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
102.
4. Sélecteurs
6. Sélecteurs contextuels © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
103.
4. Sélecteurs
6. Sélecteurs contextuels HTML <h1>Ce titre est <em>très</em> important.</h1> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
104.
4. Sélecteurs
6. Sélecteurs contextuels HTML <h1>Ce titre est <em>très</em> important.</h1> CSS h1 {color: green;} em {text-decoration:underline;} h1 em {color: red;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
105.
4. Sélecteurs
6. Sélecteurs contextuels HTML <h1>Ce titre est <em>très</em> important.</h1> CSS h1 {color: green;} em {text-decoration:underline;} h1 em {color: red;} Rendu © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
106.
4. Sélecteurs
6. Sélecteurs contextuels HTML <h1>Ce titre est <em>très</em> important.</h1> CSS h1 {color: green;} em {text-decoration:underline;} h1 em {color: red;} Rendu Ce titre est très important. © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
Notes de l'éditeur
Télécharger maintenant