délimite une zone de la page HTML comportant un ou plusieurs paragraphes. Sélecteurs d’élément : Exemples de sélecteurs d’éléments (sélecteurs simples) :
h2 {color: red}
span {background-color: red; color: white}
p {color: blue}
Slide 50 : Sélecteurs simples basés sur des éléments de balises HTML, et représenté par un astérisque (*) Correspond à n’importe quel éléments HTML, fonctionnant donc de manière générique: un caractère générique. Sélecteurs universel * : Par exemples, pour que tous les éléments soient en bleu:
* {color: blue}
Slide 51 : Les balises qui ont les mêmes propriétés
peuvent être regroupées en les séparant par une virgule. Regroupement de sélecteurs simples Ces 3 lignes peuvent être groupées en une seule : h1 {color:red}
h2 {color:red}
strong {color:red} h1, h2, strong {color:red}
Slide 52 : Les déclarations sont généralement regroupées dans une seule règle. Regroupement de déclarations Ces 3 lignes sont généralement groupées en une seule : h1 {color: purple;}
h1 {font: 20px Helvetica;}
h1 {backgroud: aqua;} h1 {color: purple; font: 20px Helvetica backgroud: aqua;}
Slide 53 : Regrouper des sélecteurs et des déclarations dans une seule règle permet de définir des styles très complexes avec seulement quelques instructions. Tout regrouper h1, h2, h3, h4, h5, h6 {color: blue; background: #F5F5DC;
padding: 0.5em; border: 2px solid red; font-family: Impact, san-serif;} h1, {color: blue;}
h2, {color: blue;}
h3, {color: blue;}
h4, {color: blue;}
h5, {color: blue;}
h6 {color: blue;}
h1, {background: #F5F5DC;}
h2, {background: #F5F5DC;}
h3, {background: #F5F5DC;}
h4, {...
... ... Préférable à tout écrire, ce qui donnerait :
Slide 54 : Les éléments des balises HTML peuvent être répartis en catégories appelées classes. On peut alors appliquer un style à une classe d'éléments. Par exemple, on distingue une classe de paragraphes normaux, et une classe de paragraphes d'introduction qui n'auront pas le même formatage. Ici, la classe de paragraphe d'introduction sera nommée intro. Dans le document HTML, à l'endroit où l'on veut appliquer le style du paragraphe d'introduction, on indique : Sélecteurs de Classes la classe peut être appliquée à différentes balises,
par exemple : p, div, span. la classe concerne une balise précise, la balise p. Une classe est toujours précédée d'un point dans la définition du style.
Ce point peut être ou non précédé d'un élément. Un style peut alors être défini pour cette classe de balise, dans une feuille de style incorporée ou externe.
texte d'introduction
p.intro {color:red} .intro {color:red}
Slide 55 : Alors qu'une classe peut concerner plusieurs éléments du document,
un identifiant concerne un élément unique. Sélecteurs d’Identifiants p#nom_id {color:red}
#nom_id {color:red} La balise est complétée par le caractère #
puis par le nom de l'identifiant. Ce # peut être ou non précédé d'un élément. Un style peut alors être défini pour cette balise précise,
dans une feuille de style incorporée ou externe.
Texte
Dans un document, une balise précise peut être identifiée par un nom grâce à l'attribut id. Ce nom (ici "nom_id") doit être unique dans tout le document afin de désigner spécifiquement cette balise là. Les identifiants sont utiles pour appliquer du javascript au document.
Slide 56 : Les pseudo-classes et les pseudo-éléments créent des mécanismes ou des relations qui ne sont pas réalisables en HTML. …sans que cela apparaisse dan le code du document HTML. Sélecteurs
de Pseudo-classes et de pseudo-éléments [1/7] Déclenchent certaines actions : lors du survol d’un lien, etc. Interviennent finement sur un éléments : stylent le premier caractère ou la première ligne de boîtes bloc tel que les paragraphe, etc. Ces sélecteurs permettent de créer des règles CSS qui :
Slide 57 : Un ensemble d'éléments HTML qui répondent à un même critère de contexte peuvent former une pseudo-classe. a:link {propriété:valeur} lien standard
a:visited {propriété:valeur} lien visité (cliqué)
a:hover {propriété:valeur} lien survolé par le pointeur de la souris
a:active {propriété:valeur} lien pendant le clic Ils peuvent être associés à un élément : :link {propriété:valeur} lien standard
:focus {propriété:valeur} sélection
:first-child {propriété:valeur} premier élément-enfant
:first-letter {propriété:valeur} première lettre
:first-line {propriété:valeur} première ligne Ils sont spécifiés par l'ajout de deux points dans la feuille de style : Sélecteurs de Pseudo-classes [2/7]
Slide 58 : Recommandation : déclarer les pseudo-classes :link, :visited, :hover et :active dans l’ordre précis suivant, seul à garantir leur correcte interprétation : Sélecteurs de Pseudo-classes [3/7] a:link {propriété:valeur} lien standard
a:visited {propriété:valeur} lien visité (cliqué)
a:hover {propriété:valeur} lien survolé par le pointeur de la souris
a:active {propriété:valeur} lien pendant le clic Moyen mnémotechnique :
Slide 59 : évite le soulignement
de l'hypertexte standard. Sélecteurs de Pseudo-classes - Exemples [4/7] Dans le document, il ne faut rien ajouter de particulier à la balise de l'élément, à la différence des classes ou des identifiants.
La pseudo-classe est associée automatiquement à un type d'élément. le premier élément enfant (ex: p) sera en italique, mais pas les suivants. évite le soulignement
de tous les types d'hypertexte. a:link {text-decoration: none} a {text-decoration: none} div:first-child {font-style: italic}
Slide 60 : :firts-letter et :first-line Sélecteurs de pseudo-éléments [5/7] :first-letter vous permet de vous transformer en moine enlumineur du moyen-age en mettant en valeur la 1ère lettre d’un texte, d’un chapitre, de paragraphes en jouant sur sa taille, sa graisse, sa couleur, etc.
:first-line, idem mais pour la 1ère ligne des éléments sélectionnés. Ces sélecteurs permettent de créer des règles CSS qui Interviennent finement sur un éléments :
:first-letter style le premier caractère
:first-line style la première ligne
...des boîtes bloc, soit paragraphe p, titres h1, h2, h3, etc. sans que cela apparaisse dan le code du document HTML. Ces règles ne portent que sur une portion de la balise considérée :
Slide 61 : h1 {
color: #cc0000;
}
p {
color: #cc6600;
}
p:first-line {
text-transform: uppercase;
font-weight: bold;
color: #339999;
}
p:first-letter {
font-family: "Times New Roman",Times,serif;
font-weight: bold;
font-size: 4em;
float: left;
color: #999999;
}
h1:first-letter {
color: red;
font-size: 1.6em;
}
titre principal
texte 1
sous-titre 2
texte 2
sous-titre 2
texte 3
Sélecteurs de pseudo-éléments [6/7]
Slide 62 : h1 { color: #cc0000; }
p { color: #cc6600; }
p:first-line { text-transform: uppercase; font-weight: bold; color: #339999; }
p:first-letter { font-family: "Times New Roman",Times,serif; font-weight: bold; font-size: 4em; float: left; color: #999999; }
h1:first-letter { color: red; font-size: 1.6em; }
titre principal
texte 1
sous-titre 2
texte 2
sous-titre 2
texte 3
Sélecteurs de pseudo-éléments [7/7]
Slide 63 : Partons d’un exemple : Nous voulons que des parties d’un texte expriment un danger, une urgence, un appel à l’aide et une catastrophe. A cette fin nous définissons les règles : Concerne les éléments dont l’attribut class contient les mots danger et urgent Concerne les éléments dont l’attribut class contient les mots alaide et catastrophe .danger {color: blue;}
.urgent {font-weight: bold;}
.danger.urgent {font-style: italic;}
.catastrophe {text-transform: uppercase;}
.alaide {color: red;}
span.alaide.catastrophe {background: Yellow;} Classes multiples [1/2]
Slide 64 : Partons d’un exemple : Nous voulons que des parties d’un texte expriment un danger, une urgence, un appel à l’aide et une catastrophe. A cette fin nous définissons les règles : .danger {color: blue;}
.urgent {font-weight: bold;}
.danger.urgent {font-style: italic;}
.catastrophe {text-transform: uppercase;}
.alaide {color: red;}
span.alaide.catastrophe {background: Yellow;}
Lucie, 5 ans, joue à la cuisine et
une casserole de lait chauffe sur une plaque de la cuisinière.
Lucie essaie de saisir le manche de la casserole au-dessus d’elle . Maman se précipite et crie attention, la casserole se renverse, Ouf, l’eau est à peine tiède.
Classes multiples [2/2]
Slide 65 : Les éléments du sélecteur sont alors séparés par un espace.
Leur ordre a une importance : Les éléments doivent être imbriqués dans l'ordre décrit dans le sélecteur : Les éléments situés dans une balise strong, elle-même contenue dans un paragraphe p, seront mis en rouge. Sélecteurs contextuels - Sélecteur de descendant Les sélecteurs contextuels associent une règle à un élément
en fonction de sa situation dans une ou plusieurs autre(s) balise(s). p strong {color: red} Un élément p isolé ou un élément strong qui n'est pas inséré dans un élément p ne se verra pas appliquer le style. Créer des règles qui ne fonctionnent qu’avec certaines structures
Slide 66 : Sélecteur de Descendant, d’Enfant, de Frère Descendant (sélecteur contextuel) :
Par exemple appliquer un styles sur chaque élément em qui descend d’un élément p
p em {color: fuchsia;}
Cette règle met en violet le texte des éléments span descendants d’un élément p. Enfant : Par exemple appliquer un styles sur chaque élément span enfant d’un élément h3
h3 > span {color: red;}
Cette règle met en rouge le texte des éléments span enfants d’un élément h3. Frère : Par exemple appliquer un styles sur chaque élément p qui suit un élément frère h3 et ayant le même parent :
h3 + p {color: blue;}
Cette règle met en bleu le texte des éléments p qui suivent un élément frère h3 partageant un parent avec p. Créer des règles qui ne fonctionnent qu’avec certaines structures
Slide 67 : Sélecteurs de Descendant, d’Enfant, de Frère
Slide 68 :
Slide 69 : 1 2 3 4 5 6 7 8 9
Slide 70 : 9 10 11 12 13 14 15
Slide 71 : Commentaires CSS Les commentaires CSS sont entourés par /* et */ /* Ceci est un commentaire CSS sur une ligne */ /* Ceci est un commentaire CSS sur la première ligne
Un autre commentaire sur la deuxième ligne
Et encore un commentaire sur la troisième ligne. */ Les commentaires peuvent occuper plusieurs lignes :
Slide 72 : Background / Arrière-plan Selon le modèle de la boîte, l'arrière-plan correspond aux aires du contenu, de l'espacement et de la bordure. Les couleurs et styles de bordure sont spécifiées par les propriétés de bordure. Les marges étant transparentes, l'arrière-plan du parent est toujours visible au travers de celles-ci. Bien que les propriétés d'arrière-plan ne s'héritent pas, l'arrière-plan de la boîte du parent transparaîtra par défaut, du fait de la valeur initiale « transparent » de la propriété « background-color ». L'arrière-plan de la boîte générée par l'élément racine recouvre la totalité du canevas. Dans le cas de documents HTML, on recommande aux auteurs de spécifier un arrière-plan à l'élément BODY, plutôt qu'à l'élément HTML. On peut spécifier l’arrière plan d’un élément (boîte) comme étant une couleur ou bien une image. body { background: url(http://style.com/granit.png) }
Slide 73 : Background / Arrière-plan background-color
background-image
background-repeat
background-attachment
background-position
background
Slide 74 : Background-color Cette propriété attribue la couleur du fond de la boîte (élément). #rrggbb,
#rgb,
rgb(rrr.rr%,ggg.gg%,bbb.bb%)
rgb(rrr,ggg,bbb)
mot-clé
transparent Propriété : Valeur : background-color #cc88ee ou #fa82b3
#c8e
rgb(30%,70%,77.5%)
rgb(128,255,60)
cyan
transparent Exemple :
background-color: #FFDFFF;
Slide 75 : Background-image Cette propriété insère une image (jpg, gif ou png) en mosaïque dans le fond de la boîte. url(nom-image.jpg)
url(nom-image.gif)
url(nom-image.png)
none Propriété : Valeur : background-image Exemple :
background-image: url(image_Chat/chat_500.png);
Slide 76 : Background-repeat Cette propriété permet de contrôler la répétition d’une image (jpg, gif ou png) qui doit être préalablement définie par la propriété background-image. repeat;
repeat-x;
repeat-y;
no-repeat; Propriété : Valeurs : background-repeat Identique à Background-image
Répète l’image seulement selon x (ligne d’images en haut)
Répète l’image seulement selon y (colonne d’images à gauche) Image affichée une seule fois. Exemples :
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
Slide 77 : La propriété « background-attachment » permet de fixer une image de fond. Background-attachment background-attachment: fixed; Avec la valeur « scroll » : l’image défile en même temps que le document. Avec la valeur « fixed » : l’image ne défile pas avec l'espace de visualisation. background-attachment: scroll; Exemples : Exemples : Deux valeurs possibles : fixed et scroll
Slide 78 : Background-position [1/4] Cette propriété positionne l’image précisément par coordonnées x,y dans le fond de la boîte. L’image est préalablement définie par d’autres propriétés background-… et elle n’est pas répétée (*). 1) valeur-x valeur-y; (unité absolue avec valeur négative possible)
2) pourcentage-x pourcentage-y; (en %)
3) x = left ou center ou right et y = top ou center ou bottom
Exemple : center right;
4) no-repeat; Propriété : Valeurs : deux valeurs séparées par un espace, la première valeur est la position par rapport au bord gauche (axe horizontal x), la deuxième par rapport au bord supérieur (axe vertical y) du bloc conteneur. Background-position 1) Background-position: 30px 50px;
2) Background-position: 25% 40%;
3) Background-position: center right; Trois exemples : (*) à précéder de Background-image: url(image1.png); et Background-position: no-repeat;
Slide 79 : longueur longueur
Pour la paire de valeur '2cm 2cm', le coin en haut et à gauche de l'image se place sur le point, situé à 2cm vers la droite et 2cm vers le bas en partant du coin en haut et à gauche de l'aire d'espacement de la boîte conteneur. Background-position [2/4]
Slide 80 : longueur longueur
top left et left top
Identique à '0% 0%' ;
top, top center et center top
Identique à '50% 0%';
right top et top right
Identique à '100% 0%' ;
left, left center et center left
Identique à '0% 50%' ;
center et center center
Identique à '50% 50%' ;
right, right center etcenter right
Identique à '100% 50%' ;
bottom left et left bottom
Identique à '0% 100%' ;
bottom, bottom center et center bottom
Identique à '50% 100%' ;
bottom right et right bottom
Identique à '100% 100%'. Background-position [3/4]
Slide 81 : Background-position [4/4] Quand on ne donne qu'une seule valeur, en pourcentage ou en longueur, celle-ci ne concerne que la position horizontale, la position verticale sera 50%. Quand on donne deux valeurs, la première concerne la position
horizontale. Les combinaisons de valeurs de pourcentage et de longueur sont admises (ex. '50% 2cm'). Les positions négatives le sont également. On ne peut pas combiner des mots-clés avec des valeurs de pourcentage ou de longueur. background-image: url(image_Chat/chat_500.png);
background-repeat: no-repeat;
background-position: 200px 150px; Exemples :
Slide 82 : Background (propriété raccourcie) Cette propriété raccourcie sert à regrouper les propriétés individuelles « background-color », « background-image », « background-repeat », « background-attachment » et « background-position » en une seule déclaration dans une règle de style : body { background: url(puzzle.png) gray no-repeat left top fixed } Cette règle correspond à la règle explicite : body {
background-image: url(puzzle.png);
background-image: gray;
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
Slide 83 : .background {
background-color: #FFFFFF;
background-image: url(image_Chat/chat_500.png);
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
font-style: italic;
font-weight: bolder;
color: #00FF00;
} .text-jaune {
color: #FFFF00;
font-size: 30px;
}
Couleur et Image de fond sont
placées avec les déclarations :
.background {
background-color: #D782FB;
background-image:
url(image_Chat/chat_500.png);
}
L'image de fond est répétée si l'on
ne précise pas :
background-repeat: no-repeat;
Background-image
Slide 84 : .background {
background-color: #FFDFFF;
background-image: url(image_Chat/chat_200.png);
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
font-style: italic;
font-weight: bolder;
color: #00FF00;
background-repeat: no-repeat;
} .text-bleu {
font-family: "Courier New",
Courier, mono;
color: #0000FF;
font-size: 30px;
font-style: normal;
font-weight: bolder;
} Background-repeat: no-repeat;
Slide 85 : .background {
background-color: #FFDFFF;
background-image: url(image_Chat/chat_200.png);
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
font-style: italic;
font-weight: bolder;
color: #00FF00;
background-repeat: repeat-x;
} Background-repeat: repeat x; .text-bleu {
font-family: "Courier New",
Courier, mono;
color: #0000FF;
font-size: 30px;
font-style: normal;
font-weight: bolder;
}
Slide 86 : .background {
background-color: #FFDFFF;
background-image: url(image_Chat/chat_200.png);
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
font-style: italic;
font-weight: bolder;
color: #00FF00;
background-repeat: repeat-y;
} Background-repeat: repeat y; .text-bleu {
font-family: "Courier New",
Courier, mono;
color: #0000FF;
font-size: 30px;
font-style: normal;
font-weight: bolder;
}
Slide 87 : .background {
background-color: #FFDFFF;
background-image: url(image_Chat/chat_500.png);
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
font-style: italic;
font-weight: bolder;
color: #00DF00;
background-repeat: no-repeat;
background-position: 200px 150px;
} .text-bleu {
font-family: "Courier New",
Courier, mono;
color: #0000FF;
font-size: 30px;
font-style: normal;
font-weight: bolder;
} Background-position: 200px 200px;
Slide 88 : .background {
background-color: #FFDFFF;
background-image: url(image_Chat/chat_500.png);
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
font-style: italic;
font-weight: bolder;
color: #00DF00;
background-repeat: no-repeat;
background-position: 200px 150px;
background-attachment: fixed;
} .text-bleu {
font-family: "Courier New",
Courier, mono;
color: #0000FF;
font-size: 30px;
font-style: normal;
font-weight: bolder;
} Background-attachment: fixed;
Slide 89 : .background {
background-color: #FFDFFF;
background-image: url(image_Chat/chat_500.png);
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
font-style: italic;
font-weight: bolder;
color: #00DF00;
background-repeat: no-repeat;
background-position: 200px 150px;
background-attachment: fixed;
} .text-bleu {
font-family: "Courier New",
Courier, mono;
color: #0000FF;
font-size: 30px;
font-style: normal;
font-weight: bolder;
} Background-attachment: fixed;
Slide 90 : Textes Police et famille de police : font-family font-family, font-style, font-variant, font-weight, font-size, font, color list-style, list-style-image, list-style-position, list-style word-spacing, letter-spacing, text-decoration, text-transform, text-align, text-indent, vertical-align, line-height
Slide 91 : Les noms de polices contenant des espaces doivent être encadrés par des quotes simples ou doubles, voici 6 exemples : Police et famille de police : font-family .policearial {font-family: Arial, Helvetica, sans-serif;}
.policetimes {font-family: "Times New Roman", Times, serif;}
.policecourier {font-family: "Courier New", Courier, mono;}
.policegeorgia {font-family: Georgia, "Times New Roman", Times, serif;}
.policeverdana {font-family: Verdana, Arial, Helvetica, sans-serif;}
.policegeneva {font-family: Geneva, Arial, Helvetica, sans-serif;} Nous sommes dépendants des polices de caractères disponibles sur les machines des internautes. Pour tenter de surmonter ce problème, les CSS proposent plusieurs polices dans les déclarations. (Les CSS-3 proposeront peut-être un système fiable de polices téléchargeables avec le document HTML). Pour chacun de ces 6 exemples, le navigateur utilise la première police nommée, si elle n ’est pas présente dans le système de l’internaute il passe à la suivante, etc. Si aucune police désignée n’existe sur le système, le navigateur utilise la police par défaut.
Slide 92 : font-family
font-style
font-variant
font-weight
font-size
font
color nom|| serif | sans-serif | cursive | fantasy | monospace
normal | italic | oblique
normal | small-caps
normal | bold | bolder | lighter | 100 | 200 | 300 |…| 700 | 800 |900
xx-small | x-small |small| medium | large | x-large | xx-large | larger | smaller | n | p%
font-variant font-weight font-size / line-height font-family
couleur | #RRVVBB | rgb(a,b,c) | rgb(a%,b%,c%) Nom (gill, helvetica…) ou famille de la police
Style normal, italique et oblique
Style normal ou petites capitales
Epaisseur de la police (normal=400 ; bold=700)
Taille de la police
Regroupe les propriétés de police (l'interligne line-height se met après la taille de police font-size avec / devant ex: 12pt / 14pt
Couleur de texte font-family, font-style, font-variant, font-weight, font-size, font
Slide 93 : word-spacing
letter-spacing
text-decoration
text-transform
text-align
text-indent
vertical-align
line-height normal | n | -n
normal | n | -n
none | underline | overline | line-through | blink
none | uppercase | lowercase | capitalize
left | right | center | justif
n | p%
baseline | text-top | middle | text-bottom | p% top | bottom | sub | super
normal | n | p% Espacement entre mots
Espacement entre caractères
Non, souligné, surligné, barré, clignotant
Non, majuscule, minuscule, majuscule au 1er caractère
Gauche, droite, centré, justifié
Indentation de la première ligne (positive ou négative)
Alignement vertical du texte / parent alignement vertical du texte / élément de la ligne sub (indice) super (exposant)
Valeur entre deux lignes adjacentes word-spacing, letter-spacing, text-decoration, text-...
Slide 94 : list-style list-style-image list-style-position list-style disc|circle|square|decimal|
lower-roman|upperroman|
lower-alpha|upper-alpha|
none| url(url) url(url) inside|outside list-style-type
list-style-image
list-style-position Type de numéro,
puce ou image
dans une liste Image servant de puces Alignement des puces
dans ou devant la liste Regroupe les catégories
de list-style list-style, list-style-image, list-style-position, list-style
Slide 95 : CSSDEBUTANT
CSS : font-family, font-size, font-variant, font-weight
» Les polices en CSS
http://www.cssdebutant.com/police-font-css.html
CSS : letter-spacing, text-align, text-decoration
» Mettre en forme un texte en CSS
http://www.cssdebutant.com/les-texte-en-css.html
CSS : text-indent, text-transform, white-space, word-spacing
» Mettre en forme un texte en CSS
http://www.cssdebutant.com/les-texte-en-css2.html Mise en forme des textes... (qq adresses Web) [1/3]
Slide 96 : FR.HTML.NET
Leçon 3 : Les couleurs et les arrières-plans
Color, background-color, background-image, background-repeat,
background-attachment, background-position, background
http://fr.html.net/tutorials/css/lesson3.asp
Leçon 4 : Les polices
font-family, font-style, font-variant, font-weight, font-size, font
http://fr.html.net/tutorials/css/lesson4.asp
Leçon 5 : Le texte
text-indent, text-align, text-decoration, letter-spacing, text-transform
http://fr.html.net/tutorials/css/lesson5.asp
Leçon 6 : Les liens
http://fr.html.net/tutorials/css/lesson6.asp Mise en forme des textes... (qq adresses Web) [2/3]
Slide 97 : SITEDUZERO
Formatage du texte en CSS (partie 1/2)
http://www.siteduzero.com/tutoriel-3-13525-formatage-du-texte-en-css-partie-1-2.html
Formatage du texte en CSS (partie 2/2)
http://www.siteduzero.com/tutoriel-3-13533-formatage-du-texte-en-css-partie-2-2.html
Les pseudo-formats
http://www.siteduzero.com/tutoriel-3-13539-les-pseudo-formats.html Mise en forme des textes... (qq adresses Web) [3/3]
Slide 98 : Eléments constitutifs
content
padding
border
margin
Types
Boîtes bloc
Boîtes en ligne
... Boîtes
Slide 99 : Boîtes : éléments constitutifs Modèles et types de boîtes « attachées » aux balises HTML http://icp.ge.ch/sem/cms-spip/spip.php?article153 Une boîte possède 4 aires 1. Contenu - content
2. Espacement - padding
3. Bordure - border
4. Marge - margin TOUS les éléments HTML s'inscrivent dans une boîte
Slide 100 : Boîtes :
éléments
constitutifs TOUS les éléments HTML s'inscrivent dans une boîte dont on peut définir : Contenu :
content : width, height, max-width, max-height, min-width, min-height, la couleur de fond (padding et border inclus ou non). Marges :
padding et margin : intérieure, extérieure, top, right, bottom, left. Positionnement :
position : static, relative, absolute, fixe, float, clear, top, right, bottom, left, clear, overflow, z-index. Bordures :
border: width, color, style, top, right, bottom, left.
Slide 101 : Boîtes : éléments constitutifs
Slide 102 : Boîte symétrique Boîtes : éléments constitutifs 1 top 2 right 4 left 3 bottom
Slide 103 : Boîtes de type bloc (block box) body, html, p, div, h1 à h6, pre, ol, ul, li, hr, etc. Commence et se termine par un retour de ligne. Disposées l’une sous l’autre (enchaînement vertical de boîtes). Peut contenir des boîtes bloc et des boîtes en ligne. Superposition des marges margin-top et margin-bottom, la plus grande l’emporte (fusion des marges).
Slide 104 : Les principaux éléments créant des boîtes blocs (block) conteneur appelées aussi boîtes paragraphe sont : Boîtes de type bloc (block box)
Slide 105 : Boîtes de type bloc (block box)
Slide 106 : Balise div Vient du mot division. Cette balise de type bloc introduit une division, un bloc à l’intérieur de la page, une boîte bloc à laquelle on peut appliquer un style particulier. Usage fréquent dans les CSS, accepte tout ce que l’on veut à l ’intérieur : boîtes bloc, boîtes en lignes, boîte remplacée, ... Entraîne un retour de chariot avant et après le bloc qu’elle définit. Boîtes de type bloc (block box)
Slide 107 : Boîtes de type en-ligne (inline box) span, a, strong, em, img, etc Ni précédée ni suivie par un retour de ligne. Disposées l’une à côté de l’autre sur la même ligne tant qu’elles disposent de la place nécessaire (bord à bord, enchaînement horizontal de boîtes), remplissant le conteneur de gauche à droite et de haut en bas. Toujours utilisée à l’intérieur de boîtes blocs. Peut contenir des boîtes en ligne. Accolement bout à bout des marges : margin-right d’une boîte et margin-left de la boîte suivante (pas de fusion des marges).
Slide 108 : Les principaux éléments créant des boîtes en ligne (inline) sont : Boîtes de type en-ligne (inline box)
Slide 109 : Balise span Cette balise de type boîte en-ligne n’introduit pas de division mais simplement une zone à l’intérieur d’un fragment alphanumérique
(partie de paragraphe) auquel on peut appliquer un style particulier. Usage fréquent dans les CSS. Boîtes de type en-ligne (inline box)
Slide 110 : Boîtes - Aire de Contenu : content [1/3] Largeur de content
width : n, p%, auto Hauteur de content
height: n, p%, auto Exemple :
width: 50px;
width: 25%;
width: auto; Exemple :
height: 50px;
height: 25%;
height: auto width et height Incluent ou non padding et border suivant les navigateurs Largeurs et hauteurs de content : width et height
Slide 111 : Boîtes - Aire de Contenu : content [2/3] Largeur max de content
max-width : n, p%, auto Hauteur max de content
max-height: n, p%, auto Exemple :
max-width: 50px;
max-width: 25%;
max-width: auto; Exemple :
max-height: 50px;
max-height: 25%;
max-height: auto max-width et max-height Incluent ou non padding et border suivant les navigateurs Contraindre les largeurs et hauteurs maximale de content
max-width et max-height
Slide 112 : Boîtes - Aire de Contenu : content [3/3] Largeur min de content
min-width : n, p%, auto Hauteur min de content
min-height: n, p%, auto Exemple :
max-width: 50px;
max-width: 25%;
max-width: auto; Exemple :
max-height: 50px;
max-height: 25%;
max-height: auto min-width et min-height Incluent ou non padding et border suivant les navigateurs Contraindre les largeurs et hauteurs minimales de content
min-width et min-height
Slide 113 : Boîtes - Aire d’Espacement, Marge Interne : padding Remplissage haut
Remplissage droite
Remplissage bas
Remplissage gauche
Regroupe les propriétés de remplissage padding-top
padding-right
padding-bottom
padding-left
Padding n | p%
n | p%
n | p%
n | p%
padding-top padding-right
padding-bottom padding-left
Slide 114 : Une aire de contenu (ex. un texte, une image, etc.) est entourée en option par une aire d'espacement, - padding -, qui est constituée par les 4 marges internes (haute, droite, basse, gauche) réglables séparément, par exemple :
Boîte p avec les 4 marges internes différentes
Selon les valeurs attribuées aux padding, il y a plusieurs possibilités d'abréger l'écriture : padding: 20px 50px 30px 40px; c'est-à-dire en tournant à partir de "top" dans le sens des aiguilles d'une montre : L'aire d'espacement prend toujours la couleur de l'aire de contenu. padding 20px 50px 30px 40px
Slide 115 : padding: 30px 40px 10px;
est équivalent à padding: 30px 40px 10px 40px; padding L'aire d'espacement prend toujours la couleur de l'aire de contenu. On procède de même
pour border et margin
Slide 116 : padding: 20px 50px;
est équivalent à padding : 20px 50px 20px 50px; padding 20px 50px 20px 50px L'aire d'espacement prend toujours la couleur de l'aire de contenu. On procède de même
pour border et margin
Slide 117 : padding: 50px;
est équivalent à padding: 50px 50px 50px 50px; padding 50px 50px 50px 50px L'aire d'espacement prend toujours la couleur de l'aire de contenu. On procède de même
pour border et margin
Slide 118 : border-bottom
border-bottom-color
border-bottom-style
border-bottom-width border-left
border-left-color
border-left-style
border-left-width border-right
border-right-color
border-right-style
border-right-width border-top
border-top-color
border-top-style
border-top-width border
border-color
border-style
border-width Boîtes - Aire de Bordure : border [1/3]
Slide 119 : border-top border-width border-style border-color
border-top-color couleur couleur couleur couleur
border-top-style none | dotted | dashed | solid | double | groove | ridge | inset | outset
border-top-width thin | medium | thick | n border-right border-width border-style border-color
border-right-color couleur couleur couleur couleur
border-right-style none | dotted | dashed | solid | double | groove | ridge | inset | outset
border-right-width thin | medium | thick | n border border-width border-style border-color
border-color couleur couleur couleur couleur
border-style none | dotted | dashed | solid | double| groove | ridge | inset | outset
border-width border-top-width border-right-width border-bottom-width border-left-width Boîtes - Aire de Bordure : border [2/3]
Slide 120 : border-bottom border-width border-style border-color
border-bottom-color couleur couleur couleur couleur
border-bottom-style none | dotted | dashed | solid | double | groove | ridge | inset | outset
border-bottom-width thin | medium | thick | n border-left border-width border-style border-color
border-left-color couleur couleur couleur couleur
border-left-style none | dotted | dashed | solid | double | groove | ridge | inset | outset
border-left-width thin | medium | thick | n Boîtes - Aire de Bordure : border [3/3]
Slide 121 : Boîtes - Aire de Marge externe : margin Marge haut
Marge droite
Marge bas
Marge gauche
Regroupe les propriétés de marge margin-top
margin-right
margin-bottom
margin-left
margin n | p% | auto
n | p% | auto
n | p% | auto
n | p% | auto
margin-top margin-right
margin-bottom margin-left La marge « margin » est incolore et transparente
Slide 122 : Boîtes - Combinaison des Marge externe : margin En CSS2, les marges horizontales ne fusionnent jamais La marge « margin » est incolore et transparente http://www.yoyodesign.org/doc/w3c/css2/box.html#collapsing-margins Boîtes en ligne : pas de fusion des marges
Slide 123 : Boîtes - Combinaison des Marge externe : margin Les marges verticales de deux boîtes, ou plus, d'éléments de type bloc, placés dans un flux normal fusionnent.
La largeur de la marge finale devient la valeur la plus grande entre celles des marges adjacentes. La marge « margin » est incolore et transparente http://www.yoyodesign.org/doc/w3c/css2/box.html#collapsing-margins Boîtes bloc : Fusion
Slide 124 : Boîtes - Combinaison des Marge externe : margin Dans le cas de marges négatives, on soustrait la plus grande des valeurs des marges négatives adjacentes, en valeur absolue, de la plus grande des marges positives adjacentes.
Et s'il n'y pas de marges positives, on déduit de zéro la plus grande des marges négatives, en valeur absolue. La marge « margin » est incolore et transparente http://www.yoyodesign.org/doc/w3c/css2/box.html#collapsing-margins Boîtes bloc : Fusion
Slide 125 : Boîtes - Combinaison des Marge externe : margin La marge « margin » est incolore et transparente Remarque Les boîtes limitrophes peuvent être générées par des éléments qui n'ont aucune parenté en tant que frères ou ancêtres:
Les marges verticales entre une boîte qui flotte et toute autre boîte ne fusionnent pas ;
Les marges entre des boîtes absolument et relativement positionnées ne fusionnent pas. http://www.yoyodesign.org/doc/w3c/css2/box.html#collapsing-margins Boîtes bloc : Fusion
Slide 126 : Boîtes bloc - Marges interne et externe Par défaut : Par défaut : La marge « margin » est incolore et transparente
Slide 127 : Boîtes en ligne - Marges interne et externe Par défaut tous les éléments en ligne
ont des marges internes (padding) et externes (margin) nulles. Par défaut : padding et margin de tous les
éléments en ligne sont nuls
padding = 0 et margin = 0 Par défaut : Boîtes en ligne, par défaut : pas de padding et pas de margin,
donc pas de marge. En ligne : Padding et margin = 0
Slide 128 : Conditions de Largeur et Hauteur
des boîtes selon W3C,
respectées par tous les navigateurs
sauf par Internet Explorer width et height Comportement des navigateurs avec la Largeur et la Hauteur de « content »
Slide 129 : width: 300px;
padding: 30px;
border: 10px; Appliquons la règle : Avec tous les navigateurs sauf pour Internet Explorer : Width = 300px = largeur de « content » Avec Internet Explorer : Width = 300px = border-left + border-right + padding-left
+ pading-right + largeur de « content » Constat :
Slide 130 : width: 300 px;
padding: 30px;
border: 10px; Ne marche pas avec Internet Explorer !
Slide 131 : Une solution parmi d’autres... Placer la boîte dans une boîte ayant :
width: 300px;
border: 0px;
padding: 0px; ... ou une autre valeur pour width ...
Slide 132 : Contrôle des Boîtes Flux
Position
Contrôle du flux
Couche
Débordement
Rognage
...
Slide 133 : Le flux du document Les différents éléments HTML (appelés aussi balises ou tag) d’une page Web sont lus séquentiellement par le navigateur du début à la fin de la page HTML, et placés par défaut successivement à l’affichage (écran, imprimante, …) dans le même ordre. Les boîtes correspondantes sont donc placées à l’écran
selon le flux de lecture du document.
Slide 134 : Contrôle des Boîtes : flux, position, couche, débordement, ... Couches
z-index: auto;
z-index: 3; Contrôle du flux
autour des flottants
clear: left;
clear: right;
clear: both;
clear: inherit;
clear: none; position: inherit;
Slide 135 : Positionnement, les boîtes sont :
Slide 136 : Positionnement, les boîtes sont :
Slide 137 : Par défaut le positionnement statique (position: static;) est celui du flux courant.
En position static,
les boîtes bloc s’affichent l’une sous l’autre et
les boîtes en ligne s’affichent l’une à côté de l’autre sur la même ligne. Positionnement des boîtes position: static; float: left; float: right; La propriété float associée à position: static; sort la boîte de son flux sur la gauche ou sur la droite :
Slide 138 : Soit cinq boîtes bloc (1), (2), (3), (4) et (5) static placées dans le flux,
elles sont donc les cinq disposées successivement l’une au-dessous de l’autre. Positionnement
des boîtes position: static; 1 2 3 4 5
Slide 139 : Positionnement
des boîtes position: static; Soit cinq boîtes bloc (1), (2), (3), (4) et (5) static placées dans le flux,
elles sont donc les cinq disposées successivement l’une au-dessous de l’autre. 1 2 3 4 5
Slide 140 : Attribuons les déclarations suivantes à la boîtes (2) : Positionnement
des boîtes position: static; float: left; position: static; /* valeur par défaut */
float: left; La boîte bloc (2) concernée prend d’abord sa place dans le flux courant, sous la boîte bloc (1) puis est plaquée
à gauche. Pour les boîtes (3), (4) et
(5) qui la suivent, la boîte bloc (2) est extraite du flux. La boîte bloc (3) est placée au-dessous de la boîte bloc (1) et sous la boîte bloc (2), les boîtes (4) et (5) lui « emboîtent le pas ». 1 2 3 4 5
Slide 141 : Observez l’écoulement
du texte de la boîte (3)
autour du flan droit de la boîte (2) Positionnement
des boîtes position: static; float: left; 1 2 3 4 5
Slide 142 : Rappel : Positionnement
des boîtes position: static; float: left; position: static; /* valeur par défaut */
float: left; La boîte bloc (2) concernée prend d’abord sa place dans le flux courant, sous la boîte bloc (1) puis est plaquée
à gauche. Pour les boîtes (3), (4) et
(5) qui la suivent, la boîte bloc (2) est extraite du flux. La boîte bloc (3) est placée au-dessous de la boîte bloc (1) et sous la boîte bloc (2), les boîtes (4) et (5) lui « emboîtent le pas ». Observez l’écoulement
du texte de la boîte (3)
autour du flan droit de la boîte (2) 1 2 3 4 5
Slide 143 : position: static; float: left; Margin-left: 50%; (2) (3) 1 2 3 4 5
Slide 144 : position: static; float: left; Margin-left: 50%; (2) (3) 1 2 3 4 5
Slide 145 : position: static; float: left; Margin-left: 50%; (2) (3) clear: both; (4) … pour la boîte (4), ajoutons la déclaration :
clear: both;
ce qui place
la boîte (4) sous
les boîtes (2) et (3). 1 2 3 4 5
Slide 146 : position: static; float: left; Margin-left: 50%; (2) (3) clear: both; (4) … pour la boîte (4), ajoutons la déclaration :
clear: both;
ce qui place la boîte (4) sous les boîtes (2) et (3). 1 2 3 4 5
Slide 147 : Positionnement, les boîtes sont :
Slide 148 : Positionnement des boîtes position: relative; Avec la déclaration « position: relative; » et l’une des quatre déclarations ci-dessus, la boîte prend d’abord sa place dans le flux courant, elle est ensuite déplacée sélectivement selon les propriétés top, right, bottom et left et reste dans le flux. top: 50px; left: 40px; top: 30px; right: 60px; bottom: 70px; left: 20px; right: 80px; bottom: 40px; 1) 2) 3) 4)
Slide 149 : Soit cinq boîtes bloc (1), (2), (3), (4) et (5) static dans le flux, elles sont donc disposées les cinq successivement l’une au-dessous de l’autre. position: relative;
Slide 150 : Attribuons les déclarations suivantes à la boîte (3) :
position: relative;
left: 60px;
top: 80px;
La boîte bloc (3) concernée prend d’abord sa place dans le flux courant, au-dessous de la boîte bloc (2) dans le flux qui la précède puis est déplacée 60 pixels vers la droite et 80 pixels vers le bas, mais elle reste dans le flux.
Les boîtes (4) et (5) qui la suivent, conservent leur position initiale. top: 80px; left: 60px; position: relative; 1 2 3 4 5
Slide 151 : top: 80px; left: 60px; position: relative; Attribuons les déclarations suivantes à la boîte (3) :
position: relative;
left: 60px;
top: 80px;
La boîte bloc (3) concernée prend d’abord sa place dans le flux courant, au-dessous de la boîte bloc (2) dans le flux qui la précède puis est déplacée 60 pixels vers la droite et 80 pixels vers le bas, mais elle reste dans le flux.
Les boîtes (4) et (5) qui la suivent, conservent leur position initiale. 1 2 3 4 5
Slide 152 : Positionnement, les boîtes sont :
Slide 153 : Positionnement des boîtes position: absolute; Avec la déclaration « position: absolute; » et l’une des quatre déclarations ci-dessus, la boîte est sortie du flux et placée sélectivement selon les propriétés top, right, bottom et/ou left. top: 50px; left: 40px; top: 30px; right: 60px; bottom: 70px; left: 20px; right: 80px; bottom: 40px; 1) 2) 3) 4)
Slide 154 : Les quatre boîtes bloc (1), (2), (4) et (5) static sont placées dans le flux, elles sont donc disposées les quatre successivement l’une au-dessous de l’autre.
La boîte bloc (3) est sortie du flux avec la déclaration :
position: absolute;
Elle est placée à 40 pixels de la gauche et 30 pixels du haut de son bloc conteneur avec les déclarations :
left: 40px;
top: 30px; top: 30px; left: 40px; position: absolute;
Slide 155 : top: 30px; left: 40px; position: absolute; Attribuons les déclarations suivantes à la boîte (3) :
position: absolute;
left: 40px;
top: 30px;
La boîte bloc (3) concernée est sortie du flux et placée à 40 pixels de la gauche et 30 pixels du haut de son bloc conteneur.
Les boîtes (4) et (5) qui la suivent se placent dans le flux. 1 2 3 4 5
Slide 156 : top: 30px; left: 40px; position: absolute; Attribuons les déclarations suivantes à la boîte (3) :
position: absolute;
left: 40px;
top: 30px;
La boîte bloc (3) concernée est sortie du flux et placée à 40 pixels de la gauche et 30 pixels du haut de son bloc conteneur.
Les boîtes (4) et (5) qui la suivent se placent dans le flux. 1 2 3 4 5
Slide 157 : Positionnement, les boîtes sont :
Slide 158 : Positionnement des boîtes position: fixed; top: 60px; left: 50px; Reprenons les 5 boîtes précédentes.
Ce positionnement fixed est le même que pour le positionnement absolute vu précédemment,
… avec comme différence fondamentale : Ne marche pas avec Internet Explorer ! ...la boîte bloc (3) reste immobile sur l’écran lorsque l’on fait défiler la page avec l’ascenseur vertical.
Slide 159 : Les quatre boîtes bloc (1), (2), (4) et (5) static sont placées dans le flux, elles sont donc disposées les quatre successivement l’une au-dessous de l’autre.
La boîte bloc (3) est sortie du flux avec la déclaration :
position: fixed;
Elle est placée à 50 pixels de la gauche et 60 pixels du haut de son bloc conteneur avec les déclarations :
left: 50px;
top: 60px; Positionnement des boîtes position: fixed; top: 60px; left: 50px; Ne marche pas avec Internet Explorer !
Slide 160 : Appliquons les déclarations suivantes à la boîte (3) : position: fixed; top: 60px; left: 50px; Lors du défilement vertical de la page,
la boîte (3) reste immobile ! position: fixed;
left: 50px;
top: 60px; la boîte bloc (3) concernée est sortie du flux et est placée à 50 pixels de la gauche et 60 pixels du haut de son bloc conteneur. Les boîtes (4) et (5) qui la suivent se placent dans le flux. Ne marche pas avec Internet Explorer ! 1 2 3 4
Slide 161 : Appliquons les déclarations suivantes à la boîte (3) : position: fixed; position: fixed;
left: 50px;
top: 60px; la boîte bloc (3) concernée est sortie du flux et est placée à 50 pixels de la gauche et 60 pixels du haut de son bloc conteneur. Les boîtes (4) et (5) qui la suivent se placent dans le flux. top: 60px; left: 50px; Lors du défilement vertical de la page,
la boîte (3) reste immobile ! Ne marche pas avec Internet Explorer ! 2 3 4 5
Slide 162 : Appliquons les déclarations suivantes à la boîte (3) : position: fixed; position: fixed;
left: 50px;
top: 60px; la boîte bloc (3) concernée est sortie du flux et est placée à 50 pixels de la gauche et 60 pixels du haut de son bloc conteneur. Les boîtes (4) et (5) qui la suivent se placent dans le flux. top: 60px; left: 50px; Lors du défilement vertical de la page,
la boîte (3) reste immobile ! Ne marche pas avec Internet Explorer ! fixed; 1 2 3 4 5
Slide 163 : Appliquons les déclarations suivantes à la boîte (3) : position: fixed; position: fixed;
left: 50px;
top: 60px; la boîte bloc (3) concernée est sortie du flux et est placée à 50 pixels de la gauche et 60 pixels du haut de son bloc conteneur. Les boîtes (4) et (5) qui la suivent se placent dans le flux. top: 60px; left: 50px; Lors du défilement vertical de la page,
la boîte (3) reste immobile ! Ne marche pas avec Internet Explorer ! fixed; 1 2 3 4 5
Slide 164 : Positionnement de boîtes bloc
pour un site au design FLUID (%)
"En-tête, 3 colonnes, Pied de page"
Slide 165 : Site au design FLUID : En-tête, 3 colonnes, Pied de page Positionnement des boîtes bloc élémentaires
Slide 166 :
Slide 167 :
Slide 168 :
Slide 169 :
Slide 170 :
Slide 171 :
Slide 172 :
Slide 173 :
Slide 174 :
Slide 175 :
Slide 176 : Positionnement des boîtes bloc élémentaires
Inclusions de boîtes
Propriété overflow : hidden, scroll, visible ou auto
Slide 177 :
Slide 178 :
Slide 179 :
Slide 180 :
Slide 181 :
Slide 182 :
Slide 183 : Template 3 colonnes
de Michael Meadhra
Les points essentiels
aux plans du HTML et des CSS Résumé du
Slide 184 : body margin: 0px;
padding: 0px;
Slide 185 : header foot navcol main sidecol
Slide 186 : navcol main sidecol header foot width: 130px;
float: left; height: 60px; Margin: 0px; margin-left: 160px;
margin-right: 160px; width: 130px;
float: right; clear: both;
Slide 187 : header foot width: 130px;
float: left; height: 60px; Margin: 0px; margin-left: 160px;
margin-right: 160px; width: 130px;
float: right; clear: both; navcol main sidecol
Colonne gauche
Colonne droite
Colonne centrale
Slide 188 : Template 3 colonnes
de Michael Meadhra
Les points essentiels
aux plans du HTML et des CSS Variante 1 du
Slide 189 : width: 220px;
float: left; margin-top: 0px; margin-left: 250px;
margin-right: 250px; width: 220px;
float: right; clear: both;
Slide 190 :
Slide 191 : width: 220px;
float: left; margin-top: 0px; margin-left: 250px;
margin-right: 250px; width: 220px;
float: right; clear: both;
Slide 192 : Template 3 colonnes
de Michael Meadhra
Les points essentiels
aux plans du HTML et des CSS Variante 2 du
Slide 193 :
Slide 194 :
Slide 195 : Div 1 Div 2 Div 4 Div 3 Div 5
Slide 196 : Div 1 Div 2 Div 4 Div 3 Div 5 margin: 0px;
float: left;
position: static;
width: 25%; margin: 0px;
height: auto;
width: 100% margin: 0px; 25%;
position: static; margin: 0px; 25%;
float: right;
width: 220px;
position: static; clear: both; height: auto; width: 100%
Slide 197 : Div 4 overflow: scroll;
width: auto;
Slide 198 : overflow: scroll;
width: auto; overflow: scroll;
width: auto; overflow: scroll;
width: auto;