CSS§

IUT Lyon 1)

Creative Commons License

Ce travail est sous licence Creative Commons Attribution-ShareAlike 3.0 France.

1

Feuille de style§

2

Rappels§

3

Avantages§

4

Déclarer une feuille de style§

Pour attacher une feuille de style à un document HTML, on ajoute dans l’élément <head> une balise <link>

<head>
  <link rel="stylesheet" type="text/css"
        href="mystyle.css" />
</head>
5

Déclarer une feuille de style (2)§

<head>
  <style type="text/css">
    /* your CSS here */
  </style>
</head>

Note

Cela peut malgré tout être utile en phase de test, ou si on souhaite minimiser le nombre de requêtes HTTP.

6

Outils§

7

Valideur§

Comme pour le HTML, le W3C fournit un service en ligne de validation de CSS :

http://jigsaw.w3.org/css-validator/

Son utilisation vous est vivement recommandée.

8

Inspecteur§

Certains navigateurs (notamment Firefox et Chrome) offrent des outils puissants pour les développeurs web.

Dans le menu contextuel (clic droit) sur n’importe quel élément, Inspect Element ouvre une interface d’inspection qui permet :

9

Liens utiles§

Référence et apprentissage :

Démonstrations :

Note

Le site de démonstration ci-dessus est construit sur le principe suivant : la page HTML est toujours la même, seule la feuille de style change.

10

Règle§

11

Principe§

Exemple :

em { font-style: italic }
/* le contenu des balises <em> devrait être en italique */
12

Combinaison de règles§

Plusieurs règles similaires peuvent coexister :

em   { font-style: italic }
em   { color: blue }
cite { font-style: italic }
cite { color: blue }
13

Regroupement par sélecteur§

On peut regrouper les règles ayant le même sélecteur, en séparant les couples propriété-valeur par un point-virgule (« ; »).

em   { font-style: italic ; color: blue }
cite { font-style: italic ; color: blue }
14

Regroupement par contenu§

On peut regrouper des règles ayant le même contenu, en séparant les sélecteurs par une virgule (« , »).

em, cite { font-style: italic ; color: blue }
15

Sensibilité aux espaces§

CSS est insensible aux espaces et aux sauts de ligne. On peut donc en ajouter autant que nécessaire pour faciliter la mise en page.

em,
cite
{
    font-style : italic ;
    color      : blue   ;
}

NB : on peut également rajouter un point-virgule après le dernier couple propriété-valeur, ce qui favorise l’évolutivité de la feuille de style.

16

Propriétés du texte§

17

Propriétés sur la police§

18

Police avec font-family§

Lorsqu’on publie sur le Web, on ne peut pas faire l’hypothèse que tous les clients auront les mêmes polices installées sur leur système.

Si on veut utiliser une police spécifique, il faut donc indiquer au navigateur comment la charger :

@font-face
{
  font-family: MyNiftyFont;
  src: url('http://example.org/nifty-font.ttf'),
       url('http://example.org/nifty-font.eot');
}

Note

Comme le montre l’exemple, il peut être nécessaire de fournir la police dans plusieurs formats, afin de maximiser les chances de compatibilité avec différents navigateurs.

19

Polices génériques§

CSS définit des polices génériques :

Inconvénient : leur apparence varie d’un système à l’autre (et d’un navigateur à l’autre).

Avantage : elles garantissent un affichage pas trop différent des intentions de l’auteur.

20

Bonne pratique§

font-family: MyNiftyFont, Times New Roman, serif
21

Taille du texte avec font-size§

La taille de police est généralement exprimée en points pica :

body {  font-size: 12pt ; }

ou relativement à la taille de la police dans l’élément englobant.

h1 {  font-size: 150% ; }

Mais toutes les unités de mesures reconnues par CSS sont en théorie utilisables.

22

Autres propriétés§

23

Couleurs en CSS : RGB§

_images/RGB_illumination.jpg

Source image Wiki commons

em { color: #f00 }                 /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
24

Couleurs en CSS : autres moyens§

25

Sélecteurs complexes§

26

Principe§

On a souvent besoin d’appliquer des règles de présentations différentes à la même balise en fonction de son contexte.

Ceci peut s’exprimer en combinant plusieurs sélecteurs :

X Y { /* s'applique à tout élément Y situé
         à l'intérieur d'un X — même indirectement */ }

X > Y { /* s'applique à tout élément Y situé
           directement à l'intérieur d'un X */ }

X + Y { /* s'applique à tout élément Y situé
           immédiatement après un X */ }

Note

En considérant la Structure en arbre vue dans la section sur HTML, on peut reformuler les connecteurs ainsi :

  • X Y : déplacement quelconque vers le bas
  • X > Y : déplacement d’un cran vers le bas
  • X + Y : déplacement d’un cran vers la droite (sous le même parent)

Notons qu’il existe un quatrième connecteur :

  • X ~ Y : déplacement vers la droite (sous le même parent)
27

Principe (suite)§

28

Exemples§

q        { font-style: italic; }
q em     { font-weight: bold; }
q strong { text-decoration: underline; }

body>h1  { text-align: center; }

h1+* { font-variant: small-caps; }

ul ul li { font-size: 80%; }
29

Entrainement§

CSS Diner (jusqu’au niveau 14)

30

Exercice§

Reprenez le code HTML que vous avez écrit pour cet exercice, et attachez le à une nouvelle feuille de style.

Sans toucher au code HTML, ajoutez à votre feuille de style les règles qui permettront d’obtenir le résultat disponible ici.

31

Classes et identifiant§

HTML autorise les attributs suivant dans n’importe quelle balise :

<ol id="contents">...</ol>

<article class="post funny">...</article>
32

Sélecteurs associés§

CSS permet de sélectionner un élément par son identifiant ou sa classe, en spécifiant ou non le type de la balise.

article.post { /* tout <article> de la classe 'post' */ }

.funny       { /* tout élément de la classe 'funny' */ }

ol#contents  { /* toute <ol> avec l'id 'contents' */ }

#contents    { /* tout élément avec l'id 'contents' */ }

On peut bien sûr utiliser ces sélecteurs dans des sélecteurs complexes.

33

Bonne utilisation des identifiants§

34

Bonne utilisation des classes§

35

Priorité§

Considérons :

em { font-style: italic;
     color: red }

.summary em { font-style: normal;
              font-weight: bold }

Quelle serait la mise en forme du HTML suivant ?

<p class="summary">This summary
is <em>short</em>.</p>
36

Réponse§

This summary is short.

Indice

Lorsqu’on utilie des sélecteurs complexes, la spécificité relative des différentes règles n’est pas toujours très intuitives. Attention donc à rester aussi simple que possible (KISS).

Pour plus d’info: https://css-tricks.com/specifics-on-css-specificity/

37

Entrainement§

Avertissement

Les coloriages magiques utilisent des sélecteurs non vus en cours.

Pour une liste exhaustive, consultez http://www.w3.org/TR/css3-selectors/ .

38

Suite la Séance 5

39

Position et espacement§

40

Marge§

La marge d’un élément est l’espace libre minimum qui doit être laissé autour de cet élément.

L’espace effectif entre deux éléments voisins est déterminé en prenant la plus grande des deux marges.

41

Propriétés margin§

On peut aussi utiliser la version synthétique, qui accepte 1 à 4 valeurs :

Note

  • Lorsqu’une propriété CSS prend plusieurs valeurs, elles sont généralement séparées par des espaces.
  • Ce principe d’héritage est utilisé par d’autres propriétés (par exemple padding).
42

Longueurs en CSS§

CSS reconnaît les unités de longueur suivantes :

cm centimètre
mm millimètre
in pouce (inch)
pt point pica (1/72 in)
em taille de la police courante
ex hauteur du caractère x dans la police courante
px « pixel CSS » (varie avec le niveau de zoom)
vw 1% de la largeur de la fenêtre
vh 1% de la hauteur de la fenêtre

Pour en savoir plus, voir ici.

43

Taille§

La taille d’un élément peut être fixée grâce aux propriétés width et height.

Ces propriétés acceptent des longueurs

Par exemple, ce paragraphe a la propriété width: 50%, il occupe donc la moitié de la largeur de la page.

Note

Certains éléments ignorent les propriétés width et height, typiquement ceux représentant un mot ou un groupe de mot à l’intérieur d’une phrase (par exemple <em> ou <a>).

On peut cependant les forcer à en tenir compte, en fixant leur propriété display à inline-block.

44

Intervalles de taille§

On peut également contraindre un élément de manière plus souple avec les propriétés min-width, max-width, min-height et max-height.

C’est utile lorsqu’on ne connaît pas à l’avance le contenu des éléments concernés :

45

Débordement§

Lorsqu’on contraint la taille d’un élément (par exemple un paragraphe), il est possible que cette taille ne suffise plus pour afficher le contenu de cet élément.

La propriété overflow permet de paramétrer le comportement de l’élément dans cette circonstance. Elle peut prendre les valeurs suivantes.

46
Exemples d’utilisation de overflow§
visible
visible
visible
visible
hidden
hidden
hidden
hidden
scroll
scroll
scroll
scroll
auto
auto
auto
auto
47

Mode d’affichage§

Il existe deux grands types d’éléments :

48

Les éléments inline§

49

Les éléments block§

50

Changer le mode d’affichage§

51

Positionnement flottant§

Par défaut, les images appartiennent au flux de texte. Ainsi :

La Joconde <img src="_static/monalisa.jpg"
                alt="Portrait de Mona Lisa">
est probablement le tableau le plus connu au monde.

sera affiché comme suit :

La Joconde Portrait de Mona Lisa est probablement le tableau le plus connu au monde.

52

Positionnement flottant (2)§

La propriété float, qui peut prendre comme valeur left ou right, fait « flotter » un élément au bord de la page.

Ainsi, avec le CSS suivant :

img { float: right; }

le HTML précédent s’affichera ainsi :

La Joconde Portrait de Mona Lisa est probablement le tableau le plus connu au monde.

Note

Surtout utilisée pour les images, cette propriété peut également être utilisée pour tout type de figure (tableaux, notamment) ou certains contenus textuels (<aside>).

53

Positionnement avancé§

54

Motivation§

Les techniques de positionnement vues jusqu’ici (marges, flottants) sont bien adapté à du texte simple, mais limitées pour

  • des mises en pages plus complexes,
  • des interfaces plus interactives,
  • le responsive design.
55

Positionnement Flexbox§

Ce modèle de boîtes flexibles se compose :

56

Positionnement Flexbox§

_images/flex.svg

Note

Flexbox est plutôt bien reconnu par les différents navigateurs mais l’utilisation d’Autoprefixer (https://autoprefixer.github.io) peut s’avérer utile pour ajouter d’éventuels préfixes propriétaires.

57

flex-direction : propriété du conteneur (1)§

Elle donne la direction et le sens de l’axe principal

58
Exemples d’utilisation de flex-direction§
row
item1
item2
item3
row-reverse
item1
item2
item3
column
item1
item2
item3
column-reverse
item1
item2
item3
59

justify-content : propriété du conteneur (2)§

Elle gère l’alignement des items sur l’axe principal

60
Exemples d’utilisation de justify-content§
flex-start
item1
item2
item3
flex-end
item1
item2
item3
center
item1
item2
item3
space-around
item1
item2
item3
space-between
item1
item2
item3
61

align-items : propriétés du conteneur (3)§

Elle gère l’alignement des items sur l’axe secondaire

  • stretch (valeur par défaut)
  • flex-start
  • flex-end
  • center
  • baseline
62
Exemples d’utilisation de align-items§
stretch
item1
item2
item3
flex-start
item1
item2
item3
flex-end
item1
item2
item3
center
item1
item2
item3
baseline
item1
item2
item3
63

flex-wrap : propriétés du conteneur (4)§

Elle définit si les items peuvent passer à la ligne

64
Exemples d’utilisation de flex-wrap§
nowrap
item1
item2
item3
item4
item5
item6
item7
item8
wrap
item1
item2
item3
item4
item5
item6
item7
item8
wrap-reverse
item1
item2
item3
item4
item5
item6
item7
item8
65

align-content : propriétés du conteneur (5)§

Elle ne s’applique qu’aux conteneurs qui autorisent le retour à la ligne. Elle gère l’alignement des lignes.

  • flex-start (valeur par défaut)
  • flex-end
  • center
  • stretch
  • space-between
  • space-around
66
Exemples d’utilisation de align-content§
flex-start
item1
item2
item3
item4
item5
item6
item7
flex-end
item1
item2
item3
item4
item5
item6
item7
center
item1
item2
item3
item4
item5
item6
item7
stretch
item1
item2
item3
item4
item5
item6
item7
space-between
item1
item2
item3
item4
item5
item6
item7
space-around
item1
item2
item3
item4
item5
item6
item7
67

align-self : propriétés d’item (1)§

Elle permet de modifier individuellement l’alignement d’item(s) sur l’axe secondaire par rapport au reste des items du conteneur.

68
Exemples d’utilisation de align-self§
flex-start / flex-end
item1
item2
item3
item4
flex-end / flex-start
item1
item2
item3
item4
center / flex-start
item1
item2
item3
item4
stretch / flex-start
item1
item2
item3
item4
baseline / flex-start
item1
item2
item3
item4
69

order : propriétés d’item (2)§

Elle permet de réorganiser les items

  • order : valeur (valeur par défaut 0)
70
Exemples d’utilisation de order§
.item2 {order: -1;}
item1
item2
item3
item4
71

flex : propriétés d’item (3)§

Elle permet de définir simplement si un élément doit être flexible (1) ou non (0).

72
Exemples d’utilisation de flex§
item1
item2 (flex:1)
item3
73

Se documenter§

Tutoriels :

Livre :

74

Positionnement fin§

_images/position.svg

Note

Les propriétés top et bottom sont redondantes, de même que left et right.

75

Positionnement static§

76

Positionnement relative§

Positionnement relatif d'un texte.

77

Positionnement absolute§

Positionnement absolu d'un texte.

78

Positionnement fixed§

79

Personnalisation des boîtes§

80

Boîtes CSS§

_images/box.png

Source image W3C

81

Cadre§

On peut souhaiter tracer un cadre autour de certains éléments.

82

Propriétés border§

On peut aussi séparer ces 3 propriétés :

83
Propriétés border (suite)§

Il est aussi possible de donner des propriétés différentes aux quatre cotés du bord :

De la même manière, chacune de ces propriétés peut se décliner en sous-propriétés, par exemple :

84
Propriétés border (exemples)§

Bord en haut et en bas.

Bord à gauche et à droite.

Bord uniquement à droite.

Quatre bords différents

85

Padding§

Le padding est l’espace entre le contenu et le bord extérieur de l’élément.

En général, on utilise un padding > 0 uniquement lorsque le bord de l’élément est visible (border, background-color).

86
Propriétés padding§

Comme pour la marge, on peut spécifier le padding par quatre propriétés (une par coté) :

ou par une propriété synthétique acceptant 1 à 4 valeurs :

87
Propriétés padding (exemples)§

Padding nul.

Padding de 0.5em.

Padding de 0.5em vertical et 1em horizontal.

Padding de 0.5 em en haut, 1em à droite, 1.5em en bas et 2em à gauche.

88

Coins arrondis§

Il est possible d’arrondir les coins du bord grâce aux propriétés suivante :

ou par une propriété synthétique acceptant 1 à 4 valeurs :

89

Coins arrondis (exemples)§

Pas d'arrondi (avec un padding de 0.5em).

Arrondi de 0.5em.

Arrondi de 1em.

Arrondis différents

90

Remarques§

91

Images de fond§

Plutôt qu’une couleur de fond (background-color), on peut spécifier une image de fond pour certains éléments.

Par exemple :

background-image: url("_static/trefle.png")

Élément avec une image de fond.

92

Paramétrage de l’image de fond§

93

Propriété synthétique background§

94

Exemple§

body {
   background :
     url("sun.png") no-repeat fixed top right,
     url("moon.png") repeat-y top left,
     blue ;
}
h1 {
   text-align : center ;
}

Source images: johnny_automatic

95

Discussion§

Il convient de distinguer

96

Exercice§

Reproduisez la page HTML ci-dessous (cliquez sur l’image pour agrandir). Vous trouverez dans cette archive le source HTML et toutes les images nécessaires.

_images/sujet.png

Exercice conçu par Isabelle Gonçalves, et inspiré d’un exercice sur OpenClassrooms.

97

Suite la Séance 7

98

Pseudo-classes et pseudo-éléments§

99

Pseudo-classes§

Les pseudo-classes sont similaires aux classes HTML, mais elles sont attachées automatiquement aux éléments qui correspondent à leur définition.

Note

⚠ Comme les pseudo-classes ont toute la même priorité, il faut être attentif à l’ordre dans lequel les règles sont déclarée. Par exemple :

a:visited { color: purple }
a:focus { color: green } /* even if :visited */
a:hover { color: red } /* even if :visited or :focus */
a:active { color: yellow } /* even if :visited, :focus or :hover */
100

Ordre des éléments§

L’argument de :nth-child(i) accepte comme argument le rang de l’élément concerné (en commençant à 1), mais peut être une expression simple utilisant la variable n, par exemple :

101

Pseudo-éléments§

Les pseudo-éléments sont des éléments virtuels contenant un sous-ensemble d’un élément existant.

Les pseudo-éléments ::before et ::after sont vides par défaut, mais on peut leur ajouter du contenu grâce à la propriété :content.

102

Contenu généré§

La propriété content accepte une ou plusieurs valeurs séparées par des espaces. Ces valeurs peuvent notamment être de la forme :

103

Exercices§

Reprenez l’exercice du livre dont vous êtes le héros, dans sa version en un seul fichier (avec des liens internes), mais faîtes en sorte que

104

Fin de la Séances 9

Vers la Séances 10 et 11.

105

Adaptation au média§

106

Adaptation au média§

Des feuilles de style différentes peuvent être appliquées selon le média :

<link rel="stylesheet" type="text/css"
      media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css"
      media="print" href="serif.css">

NB : ceci peut également être spécifié dans un unique fichier CSS :

@media screen {
   * { font-family: sans-serif }
}
107

Types de média§

all
print
screen
speech

Note

Cette liste est celle du futur standard Media Queries Level 4. D’autres types de média étaient définis dans d’anciennes versions, mais sont aujourd’hui considérées comme obsolètes.

108

Adaptation à la taille du média§

La directive @media permet également de n’appliquer des règles CSS que lorsque les dimensions de l’affichage respectent certaines conditions, par exemple :

@media (max-width:320px) { ... }
@media (min-width:321px) and (max-width:640px) { ... }
@media (min-aspect-ratio:16/9) { ... }

Note

On peut bien sûr (et on doit) garder des règles hors de toute section @media, qui s’appliquent à toutes les situations. Les sections @media ne sont là que pour ajuster la présentation générale à un contexte particulier.

109

Appareils mobiles§

Les appareils mobiles (smartphones notament) « trichent » en simulant un écran plus grand que la réalité, afin d’afficher sans (trop de) problème les pages non responsive.

Il est possible (et souhaitable) de désactiver ce comportement, lorsqu’on souhaite avoir un meilleur contrôle de l’affichage sur ces appareils.

110

La balise <meta name= »viewport »>§

La balise suivante (dans le <head>) force le navigateur à utiliser la largeur réelle de l’appareil.

<meta name="viewport" content="width=device-width">
111

La balise <meta name= »viewport »>§

On peut également limiter le niveau de zoom,

<meta name="viewport" content=
"width=device-width, minimum-scale=0.5, maximum-scale=2">

voire empêcher totalement l’utilisateur de zoomer.

<meta name="viewport" content=
"width=device-width, user-scalable=no">
112

La directive CSS @viewport§

À l’avenir, la balise <meta name= »viewport »> doit être remplacée par une directive CSS @viewport, définie par la spécification CSS Device Adaptation Module Level 1.

Cependant, pour l’instant, cette directive est très peu supportée par les navigateurs, il est donc préférable d’utiliser la balise <meta>.

113

Pour en savoir plus…§

114