:tocdepth: 2 ===== 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 ` .. hint:: 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: 1 :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/ .. hint:: 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-weight: bold } /* le contenu des balises devrait être en gras */ Combinaison de règles +++++++++++++++++++++ Plusieurs règles similaires peuvent coexister : .. code-block:: css em { font-weight: bold } em { color: blue } cite { font-weight: bold } 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-weight: bold ; color: blue } cite { font-weight: bold ; 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-weight: bold ; 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-weight : bold ; 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 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'); } .. nextslide:: .. hint:: 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 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 :emphasize-lines: 4 @font-face { font-family: MyNiftyFont; src: /*...*/ } em { 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 strong { font-size: 150% ; } ou relativement à la taille de la police de l'élément racine (``:html:). .. code-block:: css h1 { font-size: 2rem ; } 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 .. hint:: Notez que ``text-transform: uppercase`` n'a pas exactement le même effet que ``font-variant: small-caps``. Alignement du texte +++++++++++++++++++ .. raw:: html

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ceci est un exemple de texte aligné à gauche.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ceci est un exemple de texte centré.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ceci est un exemple de texte aligné à droite.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ceci est un exemple de texte justifié.

.. index:: couleur, rgb .. _color: 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/ .. _complexSelector: 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? .. nextslide:: .. hint:: 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%; } Exercice -------- Soit l'arborescence: .. container:: big .. graphviz:: graph { node [ shape=elipse, style=filled ] body -- h1 -- "Ma dissertation" body -- sec1 sec1 -- h2_1 -- "Thèse" sec1 -- p_1 -- "...1" sec1 -- sec2 sec2 -- h3_1 -- "Argument 1" sec2 -- p_2 -- "...2" sec2 -- p_3 -- "...3" sec1 -- sec3 sec3 -- h3_2 -- "Argument 2" sec3 -- p_4 -- "...4" sec3 -- p_5 -- "...5" body -- sec4 sec4 -- h2_2 -- "Anti-thèse" sec4 -- sec5 sec5 -- h3_3 -- "Contre-argument 1" sec5 -- p_6 -- "...6" sec5 -- p_7 -- "...7" sec4 -- sec6 sec6 -- h3_4 -- "Contre-argument 2" sec6 -- p_8 -- "...8" sec6 -- p_9 -- "...9" body -- sec7 sec7 -- h2_3 -- "Synthèse" sec7 -- p_10 -- "...10" body [ label="", shape=box, style=rounded ] h1 [ label="

", shape=box, style=rounded ] sec1 [ label="
", shape=box, style=rounded ] sec2 [ label="
", shape=box, style=rounded ] sec3 [ label="
", shape=box, style=rounded ] sec4 [ label="
", shape=box, style=rounded ] sec5 [ label="
", shape=box, style=rounded ] sec6 [ label="
", shape=box, style=rounded ] sec7 [ label="
", shape=box, style=rounded ] h2_1 [ label="

", shape=box, style=rounded ] h2_2 [ label="

", shape=box, style=rounded ] h2_3 [ label="

", shape=box, style=rounded ] h3_1 [ label="

", shape=box, style=rounded ] h3_2 [ label="

", shape=box, style=rounded ] h3_3 [ label="

", shape=box, style=rounded ] h3_4 [ label="

", shape=box, style=rounded ] p_1 [ label="

", shape=box, style=rounded ] p_2 [ label="

", shape=box, style=rounded ] p_3 [ label="

", shape=box, style=rounded ] p_4 [ label="

", shape=box, style=rounded ] p_5 [ label="

", shape=box, style=rounded ] p_6 [ label="

", shape=box, style=rounded ] p_7 [ label="

", shape=box, style=rounded ] p_8 [ label="

", shape=box, style=rounded ] p_9 [ label="

", shape=box, style=rounded ] p_10 [ label="

", shape=box, style=rounded ] "...1" [ label="..." ] "...2" [ label="..." ] "...3" [ label="..." ] "...4" [ label="..." ] "...5" [ label="..." ] "...6" [ label="..." ] "...7" [ label="..." ] "...8" [ label="..." ] "...9" [ label="..." ] "...10" [ label="..." ] } Quels contenus seront affectés par les styles associés aux sélecteurs suivants : .. code-block:: css body section p body > section > p h3 + p h3 ~ p h3, p 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 identifiants +++++++++++++++++++++++ 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 -------- .. _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`` .. nextslide:: .. warning:: * 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 : ===== ================================================== ch largeur du caractère *0* dans la police courante 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) rem taille de la police de l'élément racine 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, .box-sizing 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

    Par exemple, ce paragraphe a la propriété width: 50%, il occupe donc la moitié de la largeur de la page. .. nextslide:: .. tip:: Pour fixer la taille d'un élément, bordure comprise, changer la valeur de sa propriété `box-sizing`:css: à :css:`border-box`. Par défaut, les propriétés `width`:css: et `height`:css: s'appliquent au contenu de l'élément (:css:`content-box`). .. warning:: Certains éléments ignorent les propriétés `width`:css: et `height`:css:, typiquement ceux représentant un mot ou un groupe de mot à l'intérieur d'une phrase (par exemple ``:html: ou ``:html:). On peut cependant les forcer à en tenir compte, en fixant leur propriété `display`:css: à `inline-block`:css:. .. index:: .calc, .min, .max Calculs de taille ----------------- On peut utiliser des *fonctions* CSS pour calculer une longueur : * :css:`calc` prend en argument une opération arithmétique * :css:`min` prend en arguments différentes valeurs, éventuellement avec des unités de taille différentes, et retourne la plus petite longueur * :css:`max` : idem que :css:`min` mais pour la plus grande longueur .. raw:: html

    Par exemple, ce paragraphe a la propriété width: calc(200%/3), il occupe donc deux tiers de la largeur de la page. .. code-block:: css p { width: calc(200%/3); } Intervalles de taille --------------------- On peut également contraindre un élément de manière plus souple avec les propriétés `min-width`:css:, `max-width`:css:, `min-height`:css: et `max-height`:css:. C'est utile lorsqu'on ne connaît pas à l'avance le contenu des éléments concernés : * feuille de style mutualisée, * contenu dynamique, * `reponsive design`:eng:. .. TODO ce serait bien d'avoir un voire plusieurs exemples ici .. index:: .overflow 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é :css:`overflow` permet de paramétrer le comportement de l'élément dans cette circonstance. Elle peut prendre les valeurs suivantes. * `visible`:css: (valeur par défaut) : le contenu s'affichera entièrement, quitte à dépasser des limites de l'élément (et donc à empiéter éventuellement sur d'autres éléments). * `hidden`:css: : le contenu ne s'affiche qu'à l'intérieur de l'élément, quitte à être tronqué. * `scroll`:css: : le contenu ne s'affiche qu'à l'intérieur de l'élément, mais des ascenseurs sont affichés pour le faire défiler. * `auto`:css: : le navigateur choisit la solution qui lui semble la plus appropriée. Exemples d'utilisation de :css:`overflow` ````````````````````````````````````````` .. raw:: html
    visible
    visible
    visible
    visible
    hidden
    hidden
    hidden
    hidden
    scroll
    scroll
    scroll
    scroll
    auto
    auto
    auto
    auto
    .. index:: double: affichage; inline double: affichage; block .. _block: .. _inline: Mode d'affichage ++++++++++++++++ Il existe deux grands types d'éléments : * Les éléments de type `inline`:css:, * Les éléments de type `block`:css:. Les éléments `inline`:css: -------------------------- * Ils s'inscrivent dans le flux du texte. * Leur taille est déterminée par leur contenu. + Les propriétés `width`:css: et `height`:css: sont sans effet sur eux. * Exemples : `    `:html:, ``:html:... Les éléments `block`:css: ------------------------- * Ils sont précédés et suivis d'un retour à la ligne. * Ils prennent toute la largeur disponible, et uniquement la hauteur nécessaire. + Mais on peut changer leur taille avec les propriétés `width`:css: et `height`:css:. * Exemples : `

    `:html:, `

    `:html:, `

    `:html:, ... .. index:: .display, .vertical-align Changer le mode d'affichage --------------------------- * `display`:css:\ : inline, block, inline-block, none + Un élément avec `display:inline-block`:css: se comporte comme un élément `inline` avec ses voisins (pas de retour à la ligne), mais comme un élément `block` pour son contenu (taille ajustable). + Un élément avec `display:none`:css: ne sera pas affiché. Ce mode est utile en conjonction avec la directive `@media `:ref:. * `vertical-align`:css:\ : + Cette propriété permet de spécifier comment des éléments inline ou inline-block s'alignent verticalement par rapport au flux du texte. + Pour plus de détails, voir http://www.w3.org/wiki/CSS/Properties/vertical-align . .. index:: .float Positionnement flottant +++++++++++++++++++++++ Par défaut, les images appartiennent au flux de texte. Ainsi :: La Joconde Portrait de Mona Lisa est probablement le tableau le plus connu au monde. sera affiché comme suit : .. raw:: html

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

    .. nextslide:: :increment: La propriété :css:`float`, qui peut prendre comme valeur `left`:css: ou `right`:css:, fait « flotter » un élément au bord de la page. Ainsi, avec le CSS suivant : .. code-block:: css img { float: right; } le HTML précédent s'affichera ainsi : .. raw:: html

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

    .. hint:: 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 (`