11:06:28 Programmation Web Programmation Web : Feuilles de style CSS Jérôme CUTRONA
211:06:28 Programmation Web Mise en forme dun document HTML Base de HTML : Base de HTML : Documents : fond, peu de mise en forme Documents : fond, peu de mise en forme Mise en forme des débuts Mise en forme des débuts Couleurs, alignements, …, décrits dans les balises Couleurs, alignements, …, décrits dans les balises Texte transformé en image Texte transformé en image Images pour gérer les espacements Images pour gérer les espacements Tableaux utilisés à outrance Tableaux utilisés à outrance Mise en forme figée, très lourde à modifier Mise en forme figée, très lourde à modifier Mise en forme peu portable Mise en forme peu portable Pages complexes Pages complexes Nécessité dune méthode alternative Nécessité dune méthode alternative
311:06:28 Programmation Web CSS : Cascading Style Sheets Positionnement flexible des styles: Positionnement flexible des styles: Fichier séparé Fichier séparé Au début du document Au début du document Dans les balises à mettre en forme Dans les balises à mettre en forme Héritage et cascade Héritage et cascade Dépendance au média Dépendance au média Écran, imprimante, Braille, … Écran, imprimante, Braille, … Styles alternatifs Styles alternatifs Rendu plus rapide que mise en forme historique Rendu plus rapide que mise en forme historique Modification de style très aisée Modification de style très aisée
411:06:28 Programmation Web Modification de style très aisée Exemple de deux feuilles de styles appliquées au même document HTML Exemple de deux feuilles de styles appliquées au même document HTML
511:06:28 Programmation Web Appliquer un style à un élément Appliquer à une balise Appliquer à une balise Redéfinir le style de toutes les instances dune balise Redéfinir le style de toutes les instances dune balise Selon les liens de parenté Selon les liens de parenté Descendant, enfant, … Descendant, enfant, … Pseudo-classes Pseudo-classes Liées à létat de lélément Liées à létat de lélément En fonction des attributs de lélément En fonction des attributs de lélément Valeur de lattribut Valeur de lattribut Attribut class : Affecter des éléments à la classe ? Attribut class : Affecter des éléments à la classe ? Élément identifié Élément identifié Identifier un élément HTML ? Identifier un élément HTML ? Vision basique de la mise en forme Relations entre structure du document et mise en forme ! Vision légèrement dynamique et contextuelle Affiner la vision basique de la mise en forme
611:06:28 Programmation Web Classe, identification et description Affecter une balise à une classe Affecter une balise à une classe Attribut class Attribut class Donner un identifiant à une balise Donner un identifiant à une balise Attribut id Attribut id Identifiant doit être unique (charge du concepteur) Identifiant doit être unique (charge du concepteur) Décrire un élément Décrire un élément Attribut title pour la plupart des éléments HTML Attribut title pour la plupart des éléments HTML Texte affiché sous forme dinfo-bulle (tooltip) Texte affiché sous forme dinfo-bulle (tooltip) Sous-groupe de l'ensemble des balises Sous-groupe de l'ensemble des balises Une balise repérée de façon unique
711:06:28 Programmation Web Ajouter du style à un document HTML Dans le document Dans le document <!-- <!-- Mon style Mon style --> --> Fichier externe Fichier externe
811:06:28 Programmation Web Feuille de style sélecteur { propriété : valeur ; propriété : valeur ; [ propriété : valeur ; ] … /* Commentaire */ /* Commentaire */} p { color : blue ; color : blue ;}
911:06:28 Programmation Web Héritage Relations Parent - Enfant : Relations Parent - Enfant : parent de parent de parent de parent de hérite de hérite de hérite de hérite de L'enfant hérite des propriétés de ses parents L'enfant hérite des propriétés de ses parents <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " " " " Ma première page Web Ma première page Web Salut ! Salut !
1011:06:28 Programmation Web Héritage <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " " " " Ma première page Web Ma première page Web <! <! html { font-size : 150% ; } html { font-size : 150% ; } --> --> Salut ! Salut ! Salut ! Salut !
1111:06:28 Programmation Web Héritage <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " " " " Ma première page Web Ma première page Web <! <! body { font-size : 150% ; } body { font-size : 150% ; } p { color : red ; } p { color : red ; } --> --> Salut ! Salut ! Salut ! Salut !
1211:06:28 Programmation Web Héritage <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " " " " Ma première page Web Ma première page Web <! <! html { font-size : 150% ; } html { font-size : 150% ; } p { font-size : 150% ; } p { font-size : 150% ; } --> --> Salut ! Salut ! Salut ! Salut !
1311:06:28 Programmation Web Sélecteurs CSS MotifSignification * Tout élément. E Tout élément E (un élément de type E ). E F Tout élément F descendant dun élément E E > F Tout élément F enfant dun élément E E:first-child Un élément E premier enfant de son parent E:link E:visited Lélément E, ancre source dun hyperlien, lorsque la cible nest pas visitée ( :link ) ou déjà visitée ( :visited ) E:active E:hover E:focus Lélément E durant certaines actions de lutilisateur : est actif, est survolé, a le focus. E:lang(L) Un élément E sil emploie la langue L
1411:06:28 Programmation Web Sélecteurs CSS MotifSignification E + F Un élément F immédiatement précédé par un élément E. E et F ont le même parent. E[foo] Tout élément E avec lattribut foo (peu importe la valeur). E[foo="val"] Tout élément E dont lattribut foo à la valeur val. E[foo~="val"] Tout élément E dont lattribut foo est une liste de valeurs séparées par des blancs et dont une à la valeur val. E[lang|="en"] Tout élément E dont lattribut lang est une liste de valeurs séparées par des tirets, celle-ci commençant par val. E.val Spécifique à HTML. Identique à E[class~="val"] E#mon_id Tout élément E dont lID est mon_id.
1511:06:28 Programmation Web Exemple de sélecteurs courants p : toutes les balises p b, u, i : les balises b, u et i p b : les balises b dans une balise p a:link:hover : les ancres sources (d'un lien) non visitées lors de leur survol p:first-letter : Première lettre des paragraphes p:first-letter : Première lettre des paragraphes
1611:06:28 Programmation Web Exemple de sélecteurs courants div.ma_classe : les balises div dont lattribut class contient au moins ma_classe.ma_classe : les balises dont lattribut class contient au moins ma_classe div#mon_id : la balise div dont lattribut id est mon_id ul.menu li : Les items des listes à puces appartenant à la classe 'menu'
1711:06:28 Programmation Web Valeurs des propriétés Taille de police : Taille de police : xx-small, x-small, small, medium, large, x- large, xx-large xx-small, x-small, small, medium, large, x- large, xx-large Métrique : Métrique : in : pouce (25,4 mm), cm, mm in : pouce (25,4 mm), cm, mm pt : point (1/72 e de pouce) pt : point (1/72 e de pouce) pc : pica (12 points) pc : pica (12 points) Pixels : px Pixels : px Relatif à la taille de la police : em Relatif à la taille de la police : em Pourcentage : % Pourcentage : %
1811:06:28 Programmation Web Valeurs des propriétés URI : url("mon_uri") URI : url("mon_uri") Couleurs : Couleurs : black, white, orange, yellow, green, red, … black, white, orange, yellow, green, red, … #RRGGBB (00 FF), #RGB #RRGGBB #RRGGBB (00 FF), #RGB #RRGGBB rgb(red,green,blue) (0 255) rgb(red,green,blue) (0 255) rgb(red%,green%,blue%) (0 100%) rgb(red%,green%,blue%) (0 100%) Chaînes de caractères : Chaînes de caractères : "chaîne 'bonjour'" "chaîne 'bonjour'" "chaîne \"bonjour\"" "chaîne \"bonjour\"" 'chaîne "bonjour"' 'chaîne "bonjour"' 'chaîne \'bonjour\'' 'chaîne \'bonjour\''
1911:06:28 Programmation Web Exemples de propriétés color: blue ; color: blue ; font-size: 12pt ; font-size: 12pt ; font-weight: bold ; font-weight: bold ; list-style-type: square ; list-style-type: square ; margin-top: 20px ; margin-top: 20px ; padding-left: 3em ; padding-left: 3em ; text-align: justify ; text-align: justify ; text-decoration: none ; text-decoration: none ; visibility: hidden ; visibility: hidden ;
2011:06:28 Programmation Web Cascade de feuilles de style Origine des feuilles de style : Origine des feuilles de style : auteur auteur utilisateur utilisateur agent utilisateur agent utilisateur Règles de priorité : Règles de priorité : Tri par média Tri par média Tri par origine Tri par origine agent utilisateur agent utilisateur utilisateur utilisateur auteur auteur auteur (!important) auteur (!important) utilisateur (!important) utilisateur (!important) Ordre d'application Écrasement des précédents
2111:06:28 Programmation Web Cascade de feuilles de style Règles de priorité (suite) : Règles de priorité (suite) : Tri par priorité (spécificité) Tri par priorité (spécificité) 4 chiffres calculés pour chaque sélecteur (A,B,C,D) 4 chiffres calculés pour chaque sélecteur (A,B,C,D) A=1 si attribut style ( ) A=1 si attribut style ( ) Si A==0, B=nombre d' id dans le sélecteur #ident { … } Si A==0, B=nombre d' id dans le sélecteur #ident { … } Si A==0, C=nombre de class dans le sélecteur.ma_classe { … } Si A==0, C=nombre de class dans le sélecteur.ma_classe { … } Si A==0, D=nombre de balises et pseudo-éléments dans le sélecteur p b a:hover { … } Si A==0, D=nombre de balises et pseudo-éléments dans le sélecteur p b a:hover { … } Tri par ordre d'apparition Tri par ordre d'apparition ordre des feuilles de style ordre des feuilles de style ordre des styles incorporés ordre des styles incorporés
2211:06:28 Programmation Web Dépendance au média Types : Types : all : tous all : tous braille : système tactile braille : système tactile embossed : imprimante braille embossed : imprimante braille handheld : système portable handheld : système portable print : imprimante print : imprimante projection : système deprojection projection : système deprojection screen : moniteur screen : moniteur speech : synthétiseur vocal speech : synthétiseur vocal tty : terminal texte tty : terminal texte tv : télévision tv : télévision
2311:06:28 Programmation Web Dépendance au média Spécifier un média : Spécifier un média media1[, media2] { /* feuille de style */ /* feuille de style url("url_css") [media1 [,media2]] ;
Modèle de boîtes Tous les éléments HTML/XHTML sont considérés comme des boîtes Tous les éléments HTML/XHTML sont considérés comme des boîtes Les deux grands modes daffichage des boîtes sont : Les deux grands modes daffichage des boîtes sont : Le mode ligne (display : inline) Le mode ligne (display : inline) Le mode bloc (display : block) Le mode bloc (display : block) La taille finale des boîtes dépend de : La taille finale des boîtes dépend de : Taille Taille Remplissages Remplissages Bords Bords Marges Marges 2411:06:28 Programmation Web
Point sur les boîtes body { background-color : blue ; } #a { background-color : red ; border : solid 25px green ; border : solid 25px green ; width : 200px ; width : 200px ; height : 300px ; height : 300px ; padding : 100px ; padding : 100px ; margin : 70px ; } margin : 70px ; } #a div { width : 100% ; height : 100% ; height : 100% ; border : 1px solid black ; border : 1px solid black ; background-color : white ; } background-color : white ; } #b { background-color : white ; } div test div test après div est après div est 2511:06:28 Programmation Web largeur, hauteur = width, height marge interne = padding marge externe = margin bord = border
Point sur les boîtes margin margin top, bottom, left, right top, bottom, left, right border border top, bottom, left, right top, bottom, left, right padding padding top, bottom, left, right top, bottom, left, right 2611:06:28 Programmation Web Source :
Ouvrons la boîte Une boîte pour les gouverner tous Une boîte pour les gouverner tous Tout n'est que boîte. Tout n'est que boîte. La compréhension des mécanismes de boîtes La compréhension des mécanismes de boîtes est la clé de la mise en forme est la clé de la mise en forme des éléments structurés de la page Web des éléments structurés de la page Web 2711:06:28 Programmation Web
Ouvrons la boîte 2811:06:28 Programmation Web body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; line-height : 2.5em ; } } Une boîte pour les gouverner tous Une boîte pour les gouverner tous Tout n'est que boîte. Tout n'est que boîte. La compréhension des mécanismes de boîtes La compréhension des mécanismes de boîtes est la clé de la mise en forme est la clé de la mise en forme des éléments structurés de la page Web des éléments structurés de la page Web
Ouvrons la boîte 2911:06:28 Programmation Web * { border : solid 20px red ; } * { border : solid 20px red ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; line-height : 2.5em ; border-color : purple ; } border-color : purple ; } div { border-color : blue ; } div { border-color : blue ; } p { border-color : green ; } p { border-color : green ; } strong { border-color : yellow ; } strong { border-color : yellow ; } em { border-color : black ; em { border-color : black ; } } span { border-color : gray ; } span { border-color : gray ; } Une boîte pour les gouverner tous Une boîte pour les gouverner tous Tout n'est que boîte. Tout n'est que boîte. La compréhension des mécanismes de boîtes La compréhension des mécanismes de boîtes est la clé de la mise en forme est la clé de la mise en forme des éléments structurés de la page Web des éléments structurés de la page Web display : block display : inline
Ouvrons la boîte 3011:06:28 Programmation Web * { border : solid 20px red ; } * { border : solid 20px red ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; line-height : 2.5em ; border-color : purple ; } border-color : purple ; } div { border-color : blue ; } div { border-color : blue ; } p { border-color : green ; } p { border-color : green ; } strong { border-color : yellow ; } strong { border-color : yellow ; } em { border-color : black ; em { border-color : black ; display : block ; } display : block ; } span { border-color : gray ; } span { border-color : gray ; } Une boîte pour les gouverner tous Une boîte pour les gouverner tous Tout n'est que boîte. Tout n'est que boîte. La compréhension des mécanismes de boîtes La compréhension des mécanismes de boîtes est la clé de la mise en forme est la clé de la mise en forme des éléments structurés de la page Web des éléments structurés de la page Web display : inline display : block
Autour de et dans la boîte 3111:06:28 Programmation Web * { margin : 0 ; * { margin : 0 ; padding : 0 ; padding : 0 ; border : solid 20px red ; } border : solid 20px red ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; line-height : 2.5em ; border-color : purple ; } border-color : purple ; } div#parent { border-color : blue ; div#parent { border-color : blue ; } } div.enfant { div.enfant { border-color : green ; } border-color : green ; } Une boîte pour les gouverner tous Une boîte pour les gouverner tous a a b b
Autour de et dans la boîte 3211:06:28 Programmation Web * { margin : 0 ; * { margin : 0 ; padding : 0 ; padding : 0 ; border : solid 20px red ; } border : solid 20px red ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; line-height : 2.5em ; border-color : purple ; } border-color : purple ; } div#parent { border-color : blue ; div#parent { border-color : blue ; margin : 20px ; margin : 20px ; } } div.enfant { div.enfant { border-color : green ; } border-color : green ; } Une boîte pour les gouverner tous Une boîte pour les gouverner tous a a b b
Autour de et dans la boîte 3311:06:28 Programmation Web * { margin : 0 ; * { margin : 0 ; padding : 0 ; padding : 0 ; border : solid 20px red ; } border : solid 20px red ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; line-height : 2.5em ; border-color : purple ; } border-color : purple ; } div#parent { border-color : blue ; div#parent { border-color : blue ; margin : 20px ; margin : 20px ; padding : 20px ; } padding : 20px ; } div.enfant { div.enfant { border-color : green ; } border-color : green ; } Une boîte pour les gouverner tous Une boîte pour les gouverner tous a a b b
Autour de et dans la boîte 3411:06:28 Programmation Web * { margin : 0 ; * { margin : 0 ; padding : 0 ; padding : 0 ; border : solid 20px red ; } border : solid 20px red ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; line-height : 2.5em ; border-color : purple ; } border-color : purple ; } div#parent { border-color : blue ; div#parent { border-color : blue ; margin : 20px ; margin : 20px ; padding : 20px ; } padding : 20px ; } div.enfant { margin : 20px ; div.enfant { margin : 20px ; border-color : green ; } border-color : green ; } Une boîte pour les gouverner tous Une boîte pour les gouverner tous a a b b
Autour de et dans la boîte 3511:06:28 Programmation Web * { margin : 0 ; * { margin : 0 ; padding : 0 ; padding : 0 ; border : solid 20px red ; } border : solid 20px red ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; line-height : 2.5em ; border-color : purple ; } border-color : purple ; } div#parent { border-color : blue ; div#parent { border-color : blue ; margin : 20px ; margin : 20px ; padding : 20px ; } padding : 20px ; } div.enfant { margin : 20px ; div.enfant { margin : 20px ; padding : 20px ; padding : 20px ; border-color : green ; } border-color : green ; } Une boîte pour les gouverner tous Une boîte pour les gouverner tous a a b b
Les boîtes qui flottent 3611:06:28 Programmation Web div { border : solid 20px purple ; } div { border : solid 20px purple ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; } line-height : 2.5em ; } #enfant1 { border-color : red ; } #enfant1 { border-color : red ; } #enfant2 { border-color : green ; } #enfant2 { border-color : green ; } #enfant3 { border-color : blue ; } #enfant3 { border-color : blue ; } Une boîte pour les gouverner tous Une boîte pour les gouverner tous aaaaaaaaaa aaaaaaaaaa bbbbbbbbbb bbbbbbbbbb cccccccccc cccccccccc
Les boîtes qui flottent 3711:06:28 Programmation Web div { border : solid 20px purple ; } div { border : solid 20px purple ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; } line-height : 2.5em ; } #enfant1 { border-color : red ; #enfant1 { border-color : red ; float : left ; float : left ; height : 8em ; } height : 8em ; } #enfant2 { border-color : green ; } #enfant2 { border-color : green ; } #enfant3 { border-color : blue ; } #enfant3 { border-color : blue ; } Une boîte pour les gouverner tous Une boîte pour les gouverner tous aaaaaaaaaa aaaaaaaaaa bbbbbbbbbb bbbbbbbbbb cccccccccc cccccccccc
Les boîtes qui flottent 3811:06:28 Programmation Web div { border : solid 20px purple ; } div { border : solid 20px purple ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; } line-height : 2.5em ; } #enfant1 { border-color : red ; } #enfant1 { border-color : red ; } #enfant2 { border-color : green ; #enfant2 { border-color : green ; float : left ; float : left ; height : 8em ; } height : 8em ; } #enfant3 { border-color : blue ; } #enfant3 { border-color : blue ; } Une boîte pour les gouverner tous Une boîte pour les gouverner tous aaaaaaaaaa aaaaaaaaaa bbbbbbbbbb bbbbbbbbbb cccccccccc cccccccccc
Les boîtes qui flottent 3911:06:28 Programmation Web div { border : solid 20px purple ; } div { border : solid 20px purple ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; } line-height : 2.5em ; } #enfant1 { border-color : red ; } #enfant1 { border-color : red ; } #enfant2 { border-color : green ; } #enfant2 { border-color : green ; } #enfant3 { border-color : blue ; #enfant3 { border-color : blue ; float : left ; float : left ; height : 8em ; } height : 8em ; } Une boîte pour les gouverner tous Une boîte pour les gouverner tous aaaaaaaaaa aaaaaaaaaa bbbbbbbbbb bbbbbbbbbb cccccccccc cccccccccc
Les boîtes qui flottent 4011:06:28 Programmation Web div { border : solid 20px purple ; } div { border : solid 20px purple ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; } line-height : 2.5em ; } #enfant1 { border-color : red ; } #enfant1 { border-color : red ; } #enfant2 { border-color : green ; } #enfant2 { border-color : green ; } #enfant3 { border-color : blue ; #enfant3 { border-color : blue ; float : left ; float : left ; height : 8em ; } height : 8em ; } Une boîte pour les gouverner tous Une boîte pour les gouverner tous aaaaaaaaaa aaaaaaaaaa bbbbbbbbbb bbbbbbbbbb cccccccccc cccccccccc
Les boîtes qui flottent et les autres 4111:06:28 Programmation Web div { border : solid 20px purple ; } div { border : solid 20px purple ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; } line-height : 2.5em ; } #enfant1 { border-color : red ; #enfant1 { border-color : red ; } } #enfant2 { border-color : green ; #enfant2 { border-color : green ; } } #enfant3 { border-color : blue ; #enfant3 { border-color : blue ; } } Une boîte pour les gouverner tous Une boîte pour les gouverner tous aaaaaaaaaa aaaaaaaaaa bbbbbbbbbb bbbbbbbbbb cccccccccc cccccccccc
Les boîtes qui flottent et les autres 4211:06:28 Programmation Web div { border : solid 20px purple ; } div { border : solid 20px purple ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; } line-height : 2.5em ; } #enfant1 { border-color : red ; #enfant1 { border-color : red ; float : left ; float : left ; height : 8em ; } height : 8em ; } #enfant2 { border-color : green ; #enfant2 { border-color : green ; } } #enfant3 { border-color : blue ; #enfant3 { border-color : blue ; } } Une boîte pour les gouverner tous Une boîte pour les gouverner tous aaaaaaaaaa aaaaaaaaaa bbbbbbbbbb bbbbbbbbbb cccccccccc cccccccccc
Les boîtes qui flottent et les autres 4311:06:28 Programmation Web div { border : solid 20px purple ; } div { border : solid 20px purple ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; } line-height : 2.5em ; } #enfant1 { border-color : red ; #enfant1 { border-color : red ; float : left ; float : left ; height : 8em ; } height : 8em ; } #enfant2 { border-color : green ; #enfant2 { border-color : green ; clear : left ; } clear : left ; } #enfant3 { border-color : blue ; #enfant3 { border-color : blue ; } } Une boîte pour les gouverner tous Une boîte pour les gouverner tous aaaaaaaaaa aaaaaaaaaa bbbbbbbbbb bbbbbbbbbb cccccccccc cccccccccc
Les boîtes qui flottent et les autres 4411:06:28 Programmation Web div { border : solid 20px purple ; } div { border : solid 20px purple ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; } line-height : 2.5em ; } #enfant1 { border-color : red ; #enfant1 { border-color : red ; float : left ; float : left ; height : 8em ; } height : 8em ; } #enfant2 { border-color : green ; #enfant2 { border-color : green ; } } #enfant3 { border-color : blue ; #enfant3 { border-color : blue ; clear : left ; } clear : left ; } Une boîte pour les gouverner tous Une boîte pour les gouverner tous aaaaaaaaaa aaaaaaaaaa bbbbbbbbbb bbbbbbbbbb cccccccccc cccccccccc
Quirks Mode Mode de rendu des nouveau navigateurs lorsquils tentent de rester compatibles avec les erreurs du passé Mode de rendu des nouveau navigateurs lorsquils tentent de rester compatibles avec les erreurs du passé Mode déclenché en fonction de la DTD Mode déclenché en fonction de la DTD DTD complète mode de rendu normal DTD complète mode de rendu normal DTD partielle ou absente mode de rendu dégradé DTD partielle ou absente mode de rendu dégradé Importance de fixer correctement la DTD ! Importance de fixer correctement la DTD ! Différences entre les modes : Différences entre les modes : Taille des boîtes Taille des boîtes Alignements verticaux Alignements verticaux Héritage des polices dans les tableaux Héritage des polices dans les tableaux 4511:06:28 Programmation Web
Quirks Mode : exemple normal div { margin : 0 ; div { margin : 0 ; padding : 0 ; padding : 0 ; border : solid 20px purple ; } border : solid 20px purple ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; } line-height : 2.5em ; } #enfant1 { border-color : red ; #enfant1 { border-color : red ; background : no-repeat url('fond.png') center center ; background : no-repeat url('fond.png') center center ; height : 300px ; height : 300px ; width : 300px ; width : 300px ; margin : 20px ; margin : 20px ; padding : 60px ; } padding : 60px ; } Une boîte pour les gouverner tous Une boîte pour les gouverner tous aaaaaaaaaa aaaaaaaaaa 4611:06:28 Programmation Web px 50px 50px
Quirks Mode : exemple dégradé div { margin : 0 ; div { margin : 0 ; padding : 0 ; padding : 0 ; border : solid 20px purple ; } border : solid 20px purple ; } body { font-size : 2em ; body { font-size : 2em ; line-height : 2.5em ; } line-height : 2.5em ; } #enfant1 { border-color : red ; #enfant1 { border-color : red ; background : no-repeat url('fond.png') center center ; background : no-repeat url('fond.png') center center ; height : 300px ; height : 300px ; width : 300px ; width : 300px ; margin : 20px ; margin : 20px ; padding : 60px ; } padding : 60px ; } Une boîte pour les gouverner tous Une boîte pour les gouverner tous aaaaaaaaaa aaaaaaaaaa 4711:06:28 Programmation Web px 50px 50px