Introduction au
Web Statique
( Web 1.0 )
Pr Loubna El FAQUIH Dr Ibrahim GUELZIM
E-mail : [Link]@[Link] E-mail : [Link]@[Link]
ENSAM – Casablanca
Application d’un style à une balise
CSS3
Les sélecteurs CSS
Le modèle de boîte (block / inline)
Les propriétés des boîtes
Positionnement intérieur et extérieur
Propriété du texte / des listes
Les bordures en CSS3
Le gradient en CSS3
Transformation 2D en CSS3
ENSAM- Casablanca
CSS
• Principe : trio
Selecteur { propriete1:valeur1; propriete2:valeur2; } ou
<Selecteur style=«propriete1:valeur1;propriete2:valeur2;»>
Exemple :
• <p style= "align=center;" >
• P {color : blue;
font-size: 14px;
}
3
Application d’un style à un code HTML
Il existe 3 manières pour appliquer un style à une balise donnée :
• Inline : Dans une balise, avec l'attribut style
• internal : Dans l'en-tête, après la balise title (dans la partie head)
• external : Dans un fichier d’extension .css
4
Application d’un style à un code HTML
Méthode 1 (inline CSS) : Dans une balise, avec l'attribut style
• Cet attribut fonctionne sur toutes les balises.
• Utilisé pour appliquer un style unique à un seul élément HTML.
• Exemple:
<h1 style="color:blue;"> Titre en Gris </h1>
<p style="font-size: 12pt; color: green"> Votre paragraphe ici </p>
• Remarque: Liste des noms des couleurs en HTML5
[Link]
5
Application d’un style à un code HTML
Syntaxe CSS
• Le sélecteur pointe vers l'élément HTML
• Le bloc de déclaration est entouré par des accolades {…} et
contient une ou plusieurs déclarations séparées par des points-
virgules.
• Chaque déclaration comprend un nom de propriété CSS et une
valeur, séparés par deux points.
• Les déclarations CSS multiples sont séparées par des points-
virgules.
6
Application d’un style à un code HTML
Méthode 2 (internal CSS) : Dans l'en-tête (head)
• Utilisé pour définir un style pour une seule page HTML.
Exemple:
<html> <body>
<head> <h1>Essai de style </h1>
<style type="text/css"> </body>
h1 </html>
{
font-size: 12pt;
color: green
}
</style>
</head>
7
Application d’un style à un code HTML
Méthode 3 (external CSS) : Dans un fichier à extension css
Structure du fichier css : Remarques :
Sélecteur • Sélecteur : Balise ou
{ class ou ID (….)
propriété: valeur; • Le fichier .css ne doit
propriété: valeur; pas contenir de code html
…..
• Les commentaires en CSS :
}
/* Mettez votre
commentaire ici */
Dans html (partie head):
<link type="text/css" rel="stylesheet" href="[Link]"/>
8
Sélecteurs css
Sélecteur class : permet d’appliquer le style à plusieurs éléments
(paragraphe, image etc...)
Syntaxe:
.nomClass /* attention le point . est obligatoire */
{
Propriété : valeur ;
Propriété : valeur ;
}
Et dans la balise concernée:
<balise class= "nomClass" > ……</balise>
9
Sélecteurs css
Sélecteur class (Exemple)
Dans le fichier CSS :
.Rouge12
{
Color : red ;
font-size: 12pt;
}
Dans le document HTML :
<p class= "Rouge12"> Mon paragraphe </p>
<h2 class= "Rouge12"> Mon titre h2 </p>
10
Sélecteurs css
Sélecteur id : permet d’identifier de manière unique un élément dans un
document
Syntaxe:
#nom_id
{
Propriété : valeur ;
Propriété : valeur ;
}
Et dans la balise concernée:
<balise id= "nom_id" > ……</balise>
11
Sélecteurs css
Sélecteur id (Exemple)
Dans le fichier CSS :
#Rouge12
{
Color : red ;
font-size: 12pt;
}
Dans le document HTML :
<p id="#Rouge12"> Mon paragraphe </p>
12
Les sélecteurs css
Liste des sélecteurs CSS:
[Link]
13
CSS : font
• Font-family : consolas, verdana, arial;
• Font-size: px; pt; %;
• Font-weight : bold …
• Color #00FF00 ou #0F0, red , : rgb( , , ) ou rgba( , , , opacité)
Opacité entre 0 : transparent et 1
Ou
.qlq{
Opacity: 0,4;
}
14
CSS : Texte
• Text-align: right, left, center
• Text-transform : uppercase, lowercase, capitalize
• Text-decoration : none, underline, overline, line-through
• Text-shadow: horizontal(px) vertical(px) propagation(px:surface) couleur
• Text-indent: 150px;
• …
15
CSS: Gestion des Espaces
.pr1 {
Line-height: 10px;
Letter-spacing : 3px;
Word-spacing: 2px;
}
• Appliqué dans une balise comme <p>:
<p class=«pr1»> premier paragraphe de <br> test de break </p>
16
Imbrication des styles
h3 em { color: blue;}
/* tous les em situés à l'intérieur d'un h3 */
[Link] {….}
/*"Toutes les class "important" contenues dans des balises <p>" */
blockquote p strong , h1 .important
/* Toutes les balises <strong> contenues dans un <p> elles-mêmes
contenues dans un <blockquote> ET toutes les class "important" contenues
dans un titre <h1> */
P ul li a{ color: red;}
h3 a { color: blue;}
table td p img { border: none;}
17
Le modèle de boîte (block / inline)
• En CSS, tout élément est inclus dans une boîte ("box")
• Il existe deux type de boîtes : les boîtes block (en bloc) et les
boîtes inline (en ligne)
• Block et Inline : types de positionnement extérieurs
• Ces deux qualifications renvoient au comportement de la boîte au sein
de la page et vis à vis des autres boîtes
18
Le modèle de boîte (block / inline)
• Les éléments block s'étendent en largeur pour remplir totalement
l'espace offert par son conteneur.
• Par défaut, la boîte devient aussi large que son conteneur, occupant
100% de l'espace disponible.
• La boîte occupe sa propre nouvelle ligne et créé un retour à la ligne.
• Les propriétés de largeur (width) et de hauteur (height) sont toujours
respectées.
• Les propriétés padding, margin et border (écarts de remplissage
interne, externe et bordure de la boîte) auront pour effet de repousser
les autres éléments.
• Principales balise block:
<form>, <hi>, <table>, <p>, <ol>, <ul>, <div>, …
19
Le modèle de boîte block
P{
Border: 3px solid red;
}
20
Le modèle de boîte (block / inline)
• Les éléments inline ne créent pas de retour à la ligne, les autres
éléments se suivent donc en ligne.
• Les propriétés width et height ne s'appliquent pas.
• Le padding, margin et les bordures verticales (en haut et en bas)
seront appliquées mais ne provoqueront pas de déplacement des éléments
alentours.
• Le padding, margin et les bordures horizontales (à gauche et à droite)
seront appliquées et provoqueront le déplacement des éléments
alentours.
• Principales balise in line :
<a>, <em>, <img>, <q>, <span>, <strong> …
Exemple: strong {Border: 3px solid red;} /* dans .css */
21
Balises span / div
• « span » c'est une balise de type inline utilisé pour marquer une
partie d'un texte ou une partie d'un document.
Exemple : mettre en rouge un mot dans un paragraphe
.motRouge { color: red;}
<p>tous mon paragraphe est écrit en noir sauf <span
class="motRouge">ce mot </span> il est en rouge</p>
• « div » c'est une balise de type block. Elle crée un nouveau
"bloc" dans la page, et provoque obligatoirement un retour à la
ligne.
22
Propriétés des boîtes en css
Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants
suivant :
La boîte de contenu : la zone où sont affichés les éléments contenus
par la boîte. Peut être dimensionnée en utilisant width et height.
La boîte de padding (marge intérieure) : zone vierge qui se présente
comme un espacement encadrant le contenu. Sa taille peut être
contrôlée en utilisant la propriété padding.
La boîte du cadre : Le cadre englobe le contenu et le padding pour
former une bordure. Sa taille et son style sont paramétrés par la
propriété border et ses propriétés sous-jacentes.
La boîte de margin (marge extérieure) : la couche la plus à
l'extérieur, englobant le contenu, le padding et le border. Sa
taille peut être controllée en utilisant la propriété margin.
23
Retraits extérieurs et intérieurs
Retraits extérieurs : margin, margin-top, margin-bottom, margin-left,
margin-right ;
Retraits intérieurs : padding, padding-top, padding-bottom, padding-
left, padding-right ;
24
Retraits extérieurs et intérieurs
Méga propriétés: margin et padding
• 1 valeur : la marge pour le haut, le bas, la gauche et la droite
• 2 valeurs : la première correspond à la marge pour le haut et le bas,
la seconde pour la gauche et la droite
• 3 valeurs : la première correspond à la marge du haut, la seconde aux
marges à gauche et à droite, la troisième à la marge du bas
• 4 valeurs : respectivement la marge du haut, de la droite, du bas, de
la gauche.
25
cadres
• border : border-top, border-bottom, border-left, border-right
• border-style : border-style-top, border-style-bottom, border-style-
left, border-style-right (solid, double, groove, ridge, inset, outset,
dotted, dashed);
• border-width : largeur de la bordure;
• border-color : couleur de bordure;
• Border : 1px solid red;
• Border-radius: 10px; /* arrondi des coins */
26
Couleurs et arrières plan
• color (rgb(0,0,255)) : couleur du texte
• background-color : couleur du fond
• background-image : image de fond
• background-repeat (repeat, repeat-x, repeat-y, no-repeat) : mode de
réplication de l'image de fond ;
• no-repeat : le fond ne sera pas répété. L'image sera donc unique sur
la page
• repeat-x : le fond sera répété uniquement sur la première ligne,
horizontalement
• repeat-y : le fond sera répété uniquement sur la première colonne,
verticalement
• repeat : le fond sera répété (par défaut)
27
Couleurs et arrières plan
• background-attachment (scroll, fixed) : défilement ou non de l'image de
fond
• background-position : (top, bottom, left, center, right)
• background-size (100 % 100 %)
28
Modèle standard de boîte css
Le modèle standard de boîte
• La spécification des propriétés width et height définit la hauteur et
la largeur de la boîte de contenu (la boîte la plus à l'intérieur).
• La taille des padding et du border (s'ils existent) s'ajoutent à la
largeur et à la hauteur définies dans width et height pour obtenir les
dimensions totales occupées par la boîte.
• Le margin étant extérieur, il ne rentre pas dans le compte.
• Limites : pour obtenir les dimensions totales de la boîte, il faut
ajouter les dimensions du border et du padding aux dimensions du
conteneur
29
Modèle standard de boîte css
Exemple: L'espace occupé par la boîte dans le modèle
standard:
.box
{ Largeur : 410px (350 + 25 + 25 + 5 + 5)
width: 350px; Hauteur, 210px (150 + 25 + 25 + 5 + 5)
height: 150px;
margin: 10px; En ajoutant bien les valeurs de padding et de
padding: 25px; border aux valeurs de width et de height.
border: 5px solid black;
} Le margin n'est pas comptabilisé dans la taille
totale de la boîte, il ne s'agit que de l'espace
extérieur à la boîte. La zone couverte par la boîte
s'arrête donc au border et ne s'étend pas au
margin.
30
Modèle alternatif de boîte css
Le modèle de boîte alternatif (introduit peu de temps après le modèle
standard)
Les paramètres width et height définissent la largeur et la hauteur
totale de la boîte en comprenant le contenu, le padding et le border.
Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimension
la taille du padding et du border.
il faut définir la propriété box-sizing: border-box; sur la boîte. Cela
revient à demander au navigateur de considérer la boîte du cadre (la
"border box") comme la zone d'effet de width et height, et non la boîte
du contenu comme dans le modèle standard
31
Modèle alternatif de boîte css
En reprenant l'exemple précédent avec ce modèle, on obtiendrait les
dimensions suivantes: width = 350px, height = 150px.
.box
{
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
box-sizing: border-box;
}
32
Modèle alternatif de boîte css
Pour utiliser le modèle alternatif sur tous les éléments, il faut
utiliser la propriété box-sizing sur l'élément <html> et utiliser l'effet
cascade du CSS en paramètrant tous les autres éléments sur la valeur
hérité du parent (inherit)
html
{
box-sizing: border-box;
}
*, *::before, *::after
{
box-sizing: inherit;
}
33
Les flottants
La propriété float : Un élément peut avoir une position flottante à
droite ou à gauche avec la propriété float.
càd que la boîte et son contenu peut flotter soit à droite, soit à
gauche dans un document (ou dans la boîte conteneur).
Cette propriété peut prendre 2 valeurs : left et right.
34
Les flottants
• La propriété clear sert à contrôler le comportement des éléments qui
viennent après les éléments flottants dans le document.
• Par défaut, les éléments à suivre remontent pour combler l'espace
disponible libéré
• La propriété clear admet les valeurs "left", "right", "both" ou "none".
• Le principe est tel que, par exemple, si la valeur de clear d'une boîte
est fixée à "both", la bordure supérieure de la marge de cette boîte se
trouvera toujours sous la bordure de la marge inférieure des boîtes
flottantes éventuelles venant du dessus
35
Propriété display
display : permet de spécifier la manière dont un élément est affiché
• none : le bloc ne sera pas affiché
• block : l'élément devient de type "block" (bloc, comme <p>)
• inline : le bloc sera considéré comme étant une seule ligne
• inline-block: le bloc sera considéré comme une ligne toute en
gardant les propriétés du bloc (La hauteur et la largeur seront
appliqués sur l'élément. Les propriétés padding, margin et border
repousseront bien les éléments alentours).
• list-item : l'élément devient de type "élément de liste à
puce« (comme <li>)
• flex, inline-flex :
[Link]
36
Propriété display
Différence entre display:none et visibility:hidden:
• display:none : complètement disparaître l'élément,
• visibility:hidden : masque l'élément, qui continue quand même à
prendre de la place sur l'écran.
37
Positionnements intérieurs et extérieurs
Différence entre les propriétés de positionnement intérieurs (inner
display) et extérieurs (outer display):
• Rappel : Les boîtes en CSS possèdent un type de
positionnement extérieur qui détermine si la boîte est "en ligne" ou
bien "en bloc".
• Les boîtes ont aussi un type de positionnement intérieur, qui décrit
le comportement de mise en page des éléments contenus dans la boîte.
• Par défaut, les éléments contenus dans la boîte sont affichés dans
la disposition normale (normal flow) : ils se comportent exactement
comme n'importe quel autre élément "en bloc" ou "en ligne" (comme
décrit auparavant).
• Ce type de positionnement intérieur peut naturellement être modifié,
en utilisant la valeur flex de la propriété display.
38
Positionnements intérieurs et extérieurs
display: flex
Si on donne la propriété display: flex; à un élément, son type de
positionnement extérieur est "en bloc" (block), mais son type de
positionnement intérieur est modifié en flex.
Tout élément directement enfant de cette boîte se voit alors changé en
élément flex, et sera mis en page selon les règles précisées dans les
spécifications de Flexbox
39
La fusion des marges
• Le concept de fusion entre les marges est important à maîtriser pour la
mise en page.
• Si deux éléments de la page ont des margins qui se touchent, alors ces
margins fusionnent pour ne faire plus qu'un seul margin qui aura pour
taille la plus grande des deux tailles des margins initiaux.
40
Positionnement des éléments
Types de positionnement :
• Absolute : place un block n'importe où sur la page.
• Fixed : pareil que le positionnement absolu, mais le block reste
toujours visible, même si la page défile.
• Relative: déplace un block par rapport à sa position normale.
• Static : Un élément avec cette position n'est pas positionné d'une
manière particulière; il est toujours positionné selon le flux
normal de la page.
• Sticky : bascule entre relatif et fixe, en fonction de la position
de défilement. Il est positionné en relatif jusqu'à ce qu'une
position de décalage donnée soit rencontrée dans la fenêtre - puis
il "colle" en place (comme position: fixe).
41
Positionnement des éléments
Positionnement absolu : placer un block n'importe où sur la page (en haut
à gauche, en bas à droite, tout au centre etc...).
• top
• Left
• Bottom
• right
• width
• height
• visibility (visible (par défaut), hidden)
• z-index
42
Positionnement des éléments
Positionnement absolu :
• z-index: indique dans quel ordre doivent apparaître des éléments
superposés (uniquement pour des éléments positionnés de manière
absolue).
• En cas de positionnement absolu par exemple, si 2 éléments se
chevauchent, z-index permet d'indiquer quel élément doit être affiché
au-dessus de l'autre.
• Indiquez un nombre. Plus ce nombre est élevé, plus l'élément sera
affiché en avant.
• Par exemple, si vous avez 2 éléments positionnés en absolu avec un
z-index de 10 pour l'un et de 20 pour l'autre, c'est celui qui a un
z-index de 20 qui sera affiché par-dessus.
43
Propriété : overflow
• visible : tout l'élément sera affiché (par défaut).
• hidden : l'élément sera coupé s'il dépasse les limites définies par
height et width. On ne pourra pas voir la partie du texte coupée.
• scroll : tout comme hidden, l'élément sera coupé s'il dépasse les
limites.
Toutefois, le navigateur ajoutera des barres de défilement pour qu'on
puisse voir la suite du texte.
• auto : c'est le navigateur qui décide d'ajouter des barres de
défilement ou pas en fonction des cas. Bien souvent, utiliser cette
valeur revient à utiliser la valeur "scroll".
44
Propriétés du texte
Taille du texte : La propriété utilisée est font-size. 4 manières
existent :
En pixels : font-size:16px; /*
En em :
on peut les renseigner en mm,
1em : "Taille normale".
cm */
1.3em : taille du 1,3 fois plus
grande.
En valeur relative :
0.8em : taille du texte 0,8 fois
xx-small : minuscule
plus petite.
x-small : très petit
small : petit
En % :
medium : moyen
100% : taille "normale".
large : grand
130% : 130% de la taille
x-large : très grand
normale.
xx-large : très large
45
Propriétés du texte
Propriétés de la police (font-family) : type de la
police, c’est une suite de noms de polices;
Cinq familles sont distinguées :
• serif (Times, etc.)
• sans-serif (Arial, Helvetica, etc.)
• cursive
• monospace (machine à écrire comme Courrier)
• Fantasy
46
Propriétés du texte
Propriétés de la police : utilisation d’un font (fichier .ttf disponible)
@font-face p
{ {
font-family: 'newFont'; font-family:'newFont';
src: url('[Link]'); font-style: normal;
} font-weight: normal;
}
47
Propriétés du texte
Propriétés de la police
font-style (normal, italic, oblique)
font-variant (normal, small-caps : le texte sera
écrit en petites capitales)
font-weight (de 100 à 900, normal, bold): Pour mettre
en gras un texte. 400 = normal, 700 = bold.
48
Propriétés du texte
Mise en format du texte
• word-spacing : l'espace entre les mots (en pixels) ;
• letter-spacing : l'espace entre deux lettres au sein d'un même mot
(en pixels);
• text-decoration (none, underline (souligné), overline (ligne au
dessus), line-through (barré), blink (clignotant))
• text-transform (none, uppercase (tout le texte sera écrit en
majuscules), lowercase (miniscule), capitalize (la première lettre
de chaque mot sera en majuscule)).
49
Propriétés du texte
Mise en format du texte : white-space
• Normal : affichage normal du texte
• Pre : affichage du texte tel qu'il a été écrit
• pre-wrap : même principe que "pre" mais ajoute des sauts de ligne
pour que le texte ne sorte pas du bloc
• pre-line : supprime les espaces multiples et ajoute des sauts de
ligne pour que le texte ne sorte pas du bloc
• Nowrap : ne fait pas de retour à la ligne
50
Propriétés du texte
Alignement du texte: text-align
• left : le texte sera aligné à gauche (c'est le réglage
par défaut).
• center : le texte sera centré.
• right : le texte sera aligné à droite.
• justify : le texte sera "justifié". Justifier le texte
permet de faire en sorte qu'il prenne toute la largeur
possible sans laisser d'espace blanc à la fin des
lignes. Les textes des journaux, par exemple, sont
tout le temps justifiés.
51
Propriétés du texte
La mise en retrait du texte (text-indent) : taille du
retrait de première ligne
La mise en retrait du texte permet par exemple de faire
commencer un paragraphe un peu plus à droite, ce qui
rend la lecture beaucoup plus facile et agréable. C'est
un procédé que l'on retrouve dans la plupart des livres
d'ailleurs.
52
Propriétés du paragraphe
line-height (hauteur de ligne)
vertical-align (baseline, super, top, text-top, middle,
text-bottom bottom, sub)
Remarque : Vous ne pouvez pas modifier l'alignement du
texte d'une balise inline (comme span, a, em,
strong...). L'alignement ne fonctionne que sur des
balises de type block (p, div, blockquote, h1, h2,
...).
53
Propriétés du texte
Exemples:
a {
text-decoration: none; /* Les liens ne seront plus soulignés */
color: red; /* Les liens seront en rouge au lieu de bleu */
font-style: italic; /* Les liens seront en italique */
}
Au passage de la souris :
a:hover /* Quand le visiteur pointe sur le lien */
{ text-decoration: underline; /* Le lien deviendra souligné quand on
pointera dessus */
color: green; /* Le lien sera écrit en vert quand on pointera dessus */
background-color: #CFE1EB; /* Le fond du paragraphe change de couleur */
}
54
Propriétés du texte
Text-shadow : ajoute une ombre au texte
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
<h1>Text-shadow effect!</h1>
55
Mise en format des listes
list-style-type (none, decimal, lower-alpha, upper-alpha, lower-
roman, upper-roman, disc, circle, square) : type de numérotation ou
de puce ;
list-style-image (none ou url(nom de fichier image)) : permet de
spécifier une image servant de puce pour les listes ;
Exemple :
ul { list-style-image: url ("[Link]"); }
list-style-position (inside, outside) : position de la liste par
rapport au reste du texte (décalage vers la droite ou pas) ;
56
Pseudo-classes
p:first-letter /* La première lettre de chaque paragraphe */
{
font-weight: bold;
font-size: 1.2em;
color: blue;
}
p:first-line /* La première ligne de chaque paragraphe */
{
font-variant: small-caps;
}
57
Pseudo-classes
a:hover
a:visited
a:link
input[type=submit]:hover
input[type=submit]:active
input[type=text]:focus
58
Bordures en css3
Coins arrondis : border-radius
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
<div>The border-radius property allows you to add rounded corners
to elements.</div>
59
Bordures en css3
Ombre : box-shadow
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
<div> diw with shadow </div>
60
Bordures en css3
Image dans la bordure
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url([Link]) 30 round;
}
<p id="borderimg">Here, the image tiles to fill the area. The image
is rescaled if necessary, to avoid dividing tiles.</p>
61
Gradient en css
Les dégradés CSS vous permettent d'afficher des transitions fluides entre
deux ou plusieurs couleurs spécifiées.
#grad1
{
height:200px;
background: linear-gradient(red, blue);
}
<div id="grad1"></div>
linear-gradient(to right, red , blue)
linear-gradient(to bottom right, red , blue);
linear-gradient(180deg, red, blue);
linear-gradient(red, green, blue);
linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
62
Transformation 2D
Effets disponibles:
• Translate
• Rotate
• Scale / ScaleX / ScaleY
• Skew / SkewX / ScewY
• Matrix
63
Transformation 2D
Translate : repositionne un élément dans les directions
horizontale et / ou verticale
<div class="element"></div>
.element
{
width: 100px;
height: 100px;
background-color: orange;
transform: translate(20px, 30px);
/*transform: translate(50%);*/
}
64
Transformation 2D
Rotate : Rotation d’un élément dans le sens des
aiguilles d’une montre autour de son origine
<div class="like"></div>
.like
{ background: url('[Link]') no-repeat;
width: 150px;
height:150px;
background-size: 100% 100%;
transform: rotate(180deg);
}
65
Transformation 2D
Rotate
66
Transformation 2D
Rotate
67
Transformation 2D
Scale : Modifie la taille de l’élément
<div class="big-size"></div>
.big-size
{ background: url('[Link]') no-repeat;
width: 150px;
height:150px;
background-size: 100% 100%;
transform: scale(2);
}
68
Transformation 2D
Scale
69
Transformation 2D
Skew : Incline un élément d’un certain angle
<div class="big-mac"></div>
.house
{ background: url('[Link]') no-repeat white;
width: 150px; height:150px;
background-size: 100% 100%;
transform: skewX(25deg);
transform: skewY(-35deg);
}
70
CSS : Tableau
• Lignes:
• tr:nth-child(even) {background: #CCC}
• tr:nth-child(odd) {background: #FFF}
• Colonne:
• <table>
• <col><col><col><col><col><col><col><col><col><col>
• <tr><th>Month<th>'94<th>'95<th>'96...
• col:first-child {background: #FF0}
• col:nth-child(2n+3) {background: #CCC}
71
