:tocdepth: 3
=====
CSS
=====
.. include:: commondefs.rst.inc
.. ifslides::
.. include:: credits.rst.inc
.. index:: feuille de style, stylesheet
Feuille de style
================
Rappels
+++++++
* CSS signifie `Cascading StyleSheet`:eng:\.
* HTML ne décrit que la structure logique (le fond) des documents,
- la structure physique (la forme) est spécifiée par une feuille de style
en CSS.
Avantages
---------
* cohérence au sein du document
* cohérence au sein d'un ensemble de documents (charte graphique)
- mutualisation de la feuille de style
* séparation des tâches (développeur web / graphiste)
.. index:: link; rel=stylesheet
Déclarer une feuille de style
+++++++++++++++++++++++++++++
Pour attacher une feuille de style à un document HTML,
on ajoute dans l'élément ``:html: une balise ``:html:
.. code-block:: html
* Les valeurs des attributs `rel`:html: et `type`:html: sont fixées.
* L'attribut `href`:html: contient l'URL de la feuille de style.
* On peut avoir *plusieurs* feuilles de style (leurs effets se cumulent).
Déclarer une feuille de style (2)
---------------------------------
* On peut également spécifier la feuille de style
directement dans le document HTML, à l'aide de la balise `
.. note::
Cela peut malgré tout être utile en phase de test,
ou si on souhaite minimiser le nombre de requêtes HTTP.
Outils
++++++
.. contents::
:local:
:depth: 0
:backlinks: none
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.
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 :
* de naviguer dans l'arbre HTML,
* de voir les règles qui s'appliquent à chaque élément,
* de modifier dynamiquement le code HTML et la feuille de style.
Liens utiles
------------
Référence et apprentissage :
* http://www.w3.org/Style/CSS/
* http://www.w3schools.com/css/
* https://devdocs.io/css/
* http://caniuse.com/
Démonstrations :
* http://www.csszengarden.com/
.. 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.
Règle
=====
.. index:: règle, sélecteur, propriété
Principe
++++++++
* En CSS, la mise en forme est spécifiée par un ensemble de **règles**.
* Une règle typique est composée de trois parties :
- un **sélecteur**,
- une **propriété**,
- une **valeur**
Exemple :
.. code-block:: css
em { font-style: italic }
/* le contenu des balises devrait être en italique */
Combinaison de règles
+++++++++++++++++++++
Plusieurs règles similaires peuvent coexister :
.. code-block:: css
em { font-style: italic }
em { color: blue }
cite { font-style: italic }
cite { color: blue }
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 (« ; »).
.. code-block:: css
em { font-style: italic ; color: blue }
cite { font-style: italic ; color: blue }
Regroupement par contenu
------------------------
On peut regrouper des règles ayant le même contenu,
en séparant les sélecteurs par une virgule (« , »).
.. code-block:: css
em, cite { font-style: italic ; color: blue }
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.
.. code-block:: css
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.
Propriétés du texte
===================
.. index:: .font-style, .font-weith, .font-variant, .font-family, .font-size
Propriétés sur la police
++++++++++++++++++++++++
.. raw:: html
font-style :
normal
italic
oblique
font-weight :
normal
bold
bolder
lighter
ou une valeur entre 100 et 900 (400 = normal)
NB: beaucoup de polices ne supportent que normal et bold
font-variant :
normal
small-caps
NB: les small-caps sont plus petite que les majuscules :
Pierre-Antoine Champin
font-family :
(voir ci-après)
font-size :
(voir ci-après)
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 :
.. code-block:: css
@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.
Polices génériques
------------------
CSS définit des polices génériques :
.. raw:: html
serif
sans-serif
cursive
fantasy
monospace
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.
Bonne pratique
--------------
* Spécifier une *liste* de polices,
* par ordre croissant de probabilité qu'elle soit disponible,
* et en terminant toujours pas une police générique.
.. code-block:: css
font-family: MyNiftyFont, Times New Roman, serif
Taille du texte avec ``font-size``
++++++++++++++++++++++++++++++++++
La taille de police est généralement exprimée en points pica :
.. code-block:: css
body { font-size: 12pt ; }
ou relativement à la taille de la police dans l'élément englobant.
.. code-block:: css
h1 { font-size: 150% ; }
Mais toutes les `unités de mesures `:ref: reconnues par CSS
sont en théorie utilisables.
.. index:: .test-decoration, .text-transform, .text-align, .color,
.background-color
Autres propriétés
+++++++++++++++++
.. raw:: html
text-decoration :
none
underline
overline
line-through
blink
text-transform :
none
capitalize
uppercase
lowercase
NB: uppercase est
différent de small-caps
text-align :
left
center
right
justify
color :
(voirci-après)
background-color :
(voirci-après)
.. index:: couleur, rgb
Couleurs en CSS : RGB
+++++++++++++++++++++
.. figure:: _static/RGB_illumination.*
:width: 40%
Source image `Wiki commons`__
__ `
.. code-block:: css
em { color: #f00 } /* #rgb */
em { color: #ff0000 } /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
Couleurs en CSS : autres moyens
-------------------------------
* couleurs prédéfinies:
`black`:css:, `white`:css:, `red`:css:, `green`:css:, `blue`:css:,
`yellow`:css:...
* mais aussi `transparent`:css:
* la liste est *très* longue
* transparence (alpha): ``rgba(r,g,b,a)``
où *a* varie entre 0.0 (invisible) and 1.0 (opaque)
* pour en savoir plus : http://www.w3.org/TR/css3-color/
Sélecteurs complexes
====================
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 :
.. code-block:: css
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 */ }
.. TODO illustrer sur un arbre graphviz?
.. note::
En considérant la `structure_en_arbre`:ref: 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)
Principe (suite)
----------------
* Les sélecteurs complexes peuvent bien sûr être combinés à leur tour.
* On peut également utiliser dans les combinaisons le sélecteur ``*``,
qui est satisfait par *n'importe quelle* balise.
Exemples
--------
.. code-block:: css
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%; }
Entrainement
------------
`CSS Diner`_ (jusqu'au niveau 14)
.. _CSS Diner: http://flukeout.github.io/
Exercice
--------
Reprenez le code HTML que vous avez écrit pour
`cet exercice `:ref:,
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__\.
__ _static/exo_css_text/sujet.png
.. index:: @class, @id
.. _class:
Classes et identifiant
++++++++++++++++++++++
HTML autorise les attributs suivant dans n'importe quelle balise :
* `id`:html: accepte comme valeur un nom *unique*
(il est interdit d'utiliser le même `id`:html:
à deux endroits du même document) ;
* `class`:html: accepte comme valeur une liste de noms séparés par des espaces
(le même nom de classe peut être présent dans plusieurs balises).
.. code-block:: html
......
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.
.. code-block:: css
article.post { /* tout de la classe 'post' */ }
.funny { /* tout élément de la classe 'funny' */ }
ol#contents { /* toute 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.
Bonne utilisation des identifiants
----------------------------------
* Un identifiant est unique au sein d'un document,
- mais il peut se répéter d'un document à l'autre ;
- par exemple, l'identifiant ``contents`` est peut-être utilisé
pour identifier la table des matière sur toutes les pages d'un site.
* Il y a donc un intérêt à mutualiser les règles de présentation
pour un identifiant dans une feuille de style globale.
Bonne utilisation des classes
-----------------------------
* Les classes permettent de définir des catégories sémantiques plus précises
que celles fournies par HTML ; soit
- un cas particulier par rapport à une balise existante (*e.g.* ``post``),
- une catégorie transverse (*e.g.* ``funny``).
* Le nom de la classe doit décrire ce que *signifie* la classe,
et non la mise en forme qui lui sera appliquée :
- éviter par exemple ``rouge-souligné`` ou ``centré-16pt``,
- qui deviendront obsolètes dès que votre charte graphique changera.
Priorité
++++++++
Considérons :
.. code-block:: css
em { font-style: italic;
color: red }
.summary em { font-style: normal;
font-weight: bold }
Quelle serait la mise en forme du HTML suivant ?
.. code-block:: html
This summary
is short.
Réponse
-------
.. raw:: html
This summary
is short.
* La règle *la plus spécifique* a toujours la priorité.
* En cas de spécifité égale,
c'est la dernière règle (dans l'ordre du.des fichier.s) qui s'applique.
* Chaque attribut CSS est traité séparémement
(`color`:css: dans l'exemple ci-dessus).
.. hint::
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/
.. _KISS: https://en.wikipedia.org/wiki/KISS_principle
Entrainement
------------
+ `CSS Diner`_ (à partir du niveau 15)
+ `Coloriage magique 1`__
+ `Coloriage magique 2`__
__ http://jsbin.com/bubuwo/edit?css,output
__ http://jsbin.com/qezajux/edit?css,output
.. warning:: Les coloriages magiques utilisent des sélecteurs non vus en cours.
Pour une liste exhaustive, consultez http://www.w3.org/TR/css3-selectors/ .
.. TODO
Exercice
--------
.. slide:: Suite la `seance5`:ref:
:level: 2
:class: nav-seance
* `Liens et images en HTML `:ref:
.. _position:
Position et espacement
======================
.. index:: marge
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.
.. index:: .margin, .margin-*
Propriétés ``margin``
---------------------
* `margin-top`:css:\ : (longueur)
* `margin-right`:css:\ : (longueur)
* `margin-bottom`:css:\ : (longueur)
* `margin-left`:css:\ : (longueur)
On peut aussi utiliser la version synthétique, qui accepte 1 à 4 valeurs :
* `margin`:css:\ : (top) (right) (bottom) (left)
- si ``left`` est omis, il hérite de ``right``
- si ``bottom`` est omis, il hérite de ``top``
- si ``right`` est omis, il hérite de ``top``
.. 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`:css:).
.. _longueur:
Longueurs en CSS
----------------
CSS reconnaît les unités de longueur suivantes :
==== ==================================================
cm centimètre
mm millimètre
in pouce (`inch`:eng:)
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__.
__ http://www.w3.org/TR/css3-values/#lengths
.. index:: .width, .height, .min-width, .max-width, .min-height, .max-height
Taille
++++++
La taille d'un élément peut être fixée
grâce aux propriétés `width`:css: et `height`:css:.
Ces propriétés acceptent des longueurs
* absolues, ou
* en pourcentage (par rapport à l'élément englobant).
.. raw:: html
est probablement le tableau le plus connu au monde.
sera affiché comme suit :
.. raw:: html