CSS Cascading StyleSheets

Le contenu et l’affichage

Les balises HTML renseignent sur la signification (la sémantique) des données, pas sur la façon de les présenter.

Exemple : la balise controversée <i> (à l’origine, italique)

<i>Some text</i>

Some text

Cependant, la spécification HTML5 dit :

The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.

Ne jamais faire d’assomptions sur l’affichage

Pensez à

  • Browsers en mode texte ;
  • Utilisateurs malvoyants;
  • Utilisateurs qui lisent dans des langues étrangères (qui pourraient ne pas posséder un concept similaire à l’italique);
  • Site tiers qui pourraient réutiliser votre contenu.

Donc, qui décide de l’affichage ?

Les Feuilles de style.

Cascading Style Sheets

CSS est un langage pour l’expression de directives d’affichage.

Cascading veut dire que plusieurs feuilles de style peuvent s’appliquer à un document, le résultat est calculé d’après des règles de precedence en cascade.

p.lead {
  font-weight: bold;
  font-family: "Gill Sans MT", GillSans, sans-serif;
  padding: 2pt;
}

p.lead:first-letter {
  font-size: 200%;
}

p.lead em {
  font-variant: small-caps;
  font-style: normal;
}

Lorem ispsum dolor sit amet

La syntaxe CSS

Règles CSS

selector {property: value; property: value; ...}

Commentaires

/* Ceci est la seul façon de faire des commentaires en CSS
   (en effet, // n'introduit pas un commentaire)       */

At-rules

@import "unautrestyle.css";  /* Importe dans la feuille courante */
@media screen;               /* S'applique seulement à un affichage
                                sur écran (par ex., pas à l'impression) */

Référence actuelle: https://www.w3.org/TR/2011/REC-CSS2-20110607/

Le draft CSS3 est trop grand pour tenir en un seul module. Voir https://www.w3.org/Style/CSS/

Sélecteurs CSS

Sélecteurs simples (tag est toujours optionnel)

tag {...}                /* Toute balise <tag>                       */
tag.class {...}          /* Tout <tag> de classe class               */
#id {...}                /* La balise identifiée par id              */
tag:pseudoclass {...}    /* Sélection de contenu spécial             */
tag[att=val] {...}       /* Tout <tag> ayant attribut att égal à val */

Combinateurs de sélecteurs

selector, selector {...} /* Chacun des selector                     */
parent child {...}       /* child s'il est un fils de parent        */
parent > child {...}     /* child seulement s'il est un fils direct */
sister ~ brother {...}   /* brother seulement s'il suit sister      */
sister + brother {...}   /* brother seulement s'il suit
                            immediatement sister                    */

Référence complète: https://www.w3.org/TR/CSS2/selector.html

Draft CSS3: https://www.w3.org/TR/2011/REC-css3-selectors-20110929

Où va le style ?

<html>
  <head>
    <!-- Ceci s'applique à tout le document -->
    <link rel='stylesheet' href='sheet.css' type='text/css' />
    <style>
      body {font-family: Arial;}
    </style>
  </head>
  <body>
    <div>
      <!-- Ceci s'applique seuelement dans ce div -->
      <style scoped>
        p {color:blue;}
      </style>
      <!-- Ceci s'applique seulement à ce paragraphe
           La syntaxe CSS y est limitée -->
      <p style="font-weight:bold">...</p>
    </div>
  </body>
</html>

Le document et le style

<style>
  .lerouge {color:red;}
  div.lerouge {background-color:yellow;}
  #lenoir {color:black;}
  div p {font-style:italic;}
</style>
...
<p class="lerouge">Premier</p>
<div class="lerouge">
  <p id="lenoir">Deuxième</p>
  <p>Troisième</p>
</div>

Premier

Deuxième

Troisième

Layout (Mise en page)

Problématique

  • Distribuer le contenu dans la page.
  • S’adapter à des modes d’affichage différents (écran, mobile, impression, …).
  • Permettre un certain degré de non-linéarité.

Modèles de layout (voir les approfondissements)

Autres usages avancés de CSS

  • Transformations 2D et 3D.
  • Animations, transitions.
  • Adaptation à la taille d’écran (responsive layout).
  • Pagination.
  • …

Utiliser des frameworks

  • CSS est un standard géant.
  • Les parties expérimentales sont en constante évolution.
  • Assurer la compatibilité avec les vieux navigateurs est un cauchemar.
  • Les problématiques de mise en page peuvent procurer des maux de tête.

Laissez faire cela aux experts : utilisez un frontend framework.

Exemples

Références

Fork me on GitHub