Scribd Logo
Importer

Bienvenue sur Scribd !

  • Initiation Au CSS

    Transféré par

    Serge Ongolo
    30 vues39 pages

    Titre original

    Initiation au CSS

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    30 vues39 pages

    Initiation Au CSS

    Transféré par

    Serge Ongolo

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 39

    Initiation au CSS

    M. DIENG Abdoulaye Mai 2014


    Objectif général

    Mettre en forme le contenu d’un site web

    2
    Le sommaire
    1. Présentation du CSS 10. Les valeurs de couleurs
    2. La syntaxe 11. Les couleurs et fond
    3. L’insertion 12. La marge
    4. Les sélecteurs 13. La bordure
    5. Les éléments span et div 14. L’espacement
    6. L’affichage d’un contenu 15. Le dimensionnement
    7. Les unités de longueur 16. Le positionnement
    8. Les caractères 17. L’empilement
    9. Le texte 18. L’héritage
    3
    Présentation du CSS
     Le concept de CSS (Cascading StyleSheets ou feuilles de style en
    cascade) est apparu en 1996 et consiste à lier du style (ex. les
    polices de caractères, les couleurs, la mise en page, etc.) aux
    documents structurés.
     Il a pour but de séparer la structure et la présentation du
    contenu
     Intérêts des feuilles de style :
    – une présentation homogène sur tout un site;
    – faciliter la mise à jour et l'évolution d’un site;
    – une plus grande lisibilité du HTML;
    – des chargements de page plus rapides;
    – augmentation des potentiels de présentation;
    – avec CSS2, la prise en compte de la diversité de média
    (écran, imprimante, mobiles, synthétiseur vocal, etc.)
    4
    La syntaxe (1/2)
    • Une feuille de style est composée de règles qui peuvent
    s'appliquer au document entier, à un ensemble de contenus du
    document ou à un contenu particulier.
    • Une règle de style est composée d'un sélecteur et d'une
    déclaration constituée d’un ou de plusieurs couples
    propriété:valeur séparés par des ;.
    selecteur { prop1:val1; prop2:val2_1 val2_2; }
    • Un sélecteur indique à quel(s) contenu(s) d'une page HTML on
    désire appliquer une règle.
    • Une propriété identifie ce qu'il faut définir sur le contenu.
    • Une valeur est assignée à une propriété pour définir sa nature.

    5
    La syntaxe (2/2)
    • Une propriété peut avoir plusieurs valeurs (séparées par des
    espaces).
    • On peut attribuer un même style à plusieurs sélecteurs (séparées
    par des virgules).
    • Les commentaires sont délimités par les symboles /* et */

    • Exemples :
    h1 { color : red; } /*couleur rouge pour tout titre de niveau 1*/
    table {background-color : white ; border : 1px black;}
    h2, h3 { color : gray; }

    6
    L’insertion en ligne
    • Insertion dans une balise ou style inline

    • Syntaxe : <balise style="prop1:val1; prop2:val2; … ">

    • À utiliser avec modération car ne respectant pas le principe de


    la séparation du contenu et de la présentation.

    7
    x
    L’insertion interne
    • Insertion dans l’en-tête du fichier HTML ou style interne

    • Elle s'applique à toutes les balises de la page qu'elle a


    définies.

    • Syntaxe:
    <head>
    <style type="text/css">
    /* Définition des règles de style */
    </style>
    </head>

    8
    x
    L’insertion externe
    • Liaison d’une feuille de style externe (qui contient les règles)

    • Syntaxe:
    <head>
    <link href=“chemin/du/fichier.css" rel="stylesheet"
    type="text/css“>
    </head>

    • La feuille de style peut être utilisée par un nombre illimité de


    pages.

    • La feuille de style sera gardée dans la mémoire cache du


    navigateur.

    9
    x
    Le sélecteur de type et d’attribut
    • Le sélecteur de type permet d’appliquer un style à une ou
    plusieurs balises.

    • Le sélecteur d’attribut permet d’appliquer un style en fonction


    de l’attribut d’une balise.

    • Exemple
    h1 {color: green;}
    h2 , h3 {color: yellow;}
    hr[width=50%]{ color : red;}

    10
    Le sélecteur de descendance
    • Le sélecteur de contenus imbriqués permet de créer une règle
    ne s'appliquant que lorsque un contenu Y est imbriqué dans
    un contenu X.

    • Syntaxe:
    X Y {déclaration1; déclaration2; … }
    NB : X et Y sont séparés par le caractère espace)

    • Exemple
    Définition : p b { color: red; }
    Application :
    <p> <i> texte en italique </i><b> texte rouge et en gras </b>
    </p> <div><b> texte uniquement en gras</b></div>
    11
    Le sélecteur filial
    • Le sélecteur de contenus père-fils permet de créer une règle
    ne s'appliquant que lorsque un contenu Y est fils direct d'un
    contenu X.
    • La règle ne s'applique pas si Y est encapsulé dans une ou
    plusieurs autres balises intermédiaires.
    • Syntaxe
    X > Y {déclaration1; déclaration2; … }
    • Exemple
    Définition :
    p > b { color: red; }
    Application:
    <p>
    <b><i> texte en italique, gras et rouge </i></b>
    <i><b> texte gras et en italique mais pas rouge</b></i>
    </p>
    <div><b> texte uniquement gras </b></div> 12
    Le sélecteur adjacent
    • Le sélecteur de contenus consécutifs permet de créer une
    règle ne s'appliquant que lorsque un contenu Y suit
    immédiatement un contenu X.

    • Syntaxe :
    X + Y {déclaration1; déclaration2; … }

    • Exemple
    Définition:
    i + b { color: red; }
    Application:
    <p><i> texte en italique </i><b> texte gras et en
    rouge</b> <b> texte uniquement en gras </b></p>

    13
    Le sélecteur d’identificateur
    • Le sélecteur d’identificateur permet d'appliquer une règle de
    style à un contenu unique du document.
    • Le id est très utilisé pour la mise en page.

    • Définition du style (nom préfixé d’un dièse)


    #identificateur {déclaration1; déclaration2; … }
    • Application du style (nom sans le dièse)
    <balise id="identificateur"> .... </balise>

    • Exemple
    Définition :
    #titreDebutPage {color: blue;}
    Application :
    <h1 id="titreDebutPage">Titre principal</h1>
    14
    x
    Le sélecteur de classe
    • Un sélecteur de classe permet de créer un style qui peut
    s’appliquer à n’importe quel contenu du document
    • +sieurs contenus d’une page peuvent partager une classe
    • Il est possible d'appliquer simultanément deux classes à une
    même balise, en les séparant par un espace.
    • Définition du style (nom préfixé d’un point)
    .nom_de_classe {déclaration1; déclaration2; … }
    • Application du style (nom sans le point)
    <balise class="nom_de_classe"> .... </balise>
    • Exemple
    Définition :
    .rouge { color: red; }
    p.gras { font-weight: bold; } /*sous classe*/
    Application :
    <p class=" rouge gras "> paragraphe en gras et rouge</p>
    <h1 class=" rouge "> titre rouge</h1>
    15
    x
    Le sélecteur de pseudo-classes
    • Un sélecteur de pseudo-classe permet d’appliquer une règle sur
    un contenu uniquement dans certains contextes

    • Il y en a plusieurs, mais ceux qui sont reconnus par tous les


    navigateurs sont :
     a:link qui permet d'attribuer une règle au lien (non-visité).
    Exple. a:link {text-decoration:none;}
     a:visited permet d'attribuer une règle au lien visité
    Exple. a:visited {color:blue;}
     a:hover qui permet d'attribuer une règle sur les liens lors du
    survol par la souris.
    Exple. a:hover {font-weight:bold;}
    16
    x
    span et div
    • span et div servent chacun à délimiter une zone associée à un
    style.
    • Éviter d’utiliser span ou div comme unique sélecteur
    • span et div sont souvent utilisés avec les attributs class et id.
    • L’élément span est utilisé pour modifier le style d'une portion de
    texte incluse dans une boîte ou un bloc.
    • Un "bloc" délimite un contenu en commençant sur une nouvelle
    ligne.
    Exples: h1, ..., h6, ul, table, pre, blockquote, p, div, etc.
    • div permet de contenir des sous-blocs et des balises en-ligne.
    • Les éléments "en-ligne" sont prévus pour rester dans le texte.
    Exples: a, abbr, b, img, input, span, textarea, etc.

    17
    x
    Les unités de longueur
    Nombre entier ou décimal suivi d'une unité de mesure pour
    les tailles de police, les espaces entre paragraphes, les
    marges, les dimensions, etc.
     em : taille de la police utilisée (1em=100%, 0.8em=80%)
     ex : hauteur du "x" minuscule de la police utilisée
     px : pixel (variable en fonction de l’écran)
     % : pourcentage de la taille de l’élément parent

    18
    Les caractères
    • font-style : normal | italic | oblique style des caractères
    • font-weight : de 100 à 900 | normal(400) | bold(700) | bolder |
    lighter épaisseur ou graisse des caractères
    • font-size : xx-small | x-small | medium | x-large |
    xx-large | <longueur> | % | smaler | larger.
    taille des caractères
    • font-family : nom(s) de police ou famille générique ( serif, sans-
    serif, cursive, monospace, fantasy)
    Déclarer une famille générique après les polices (séparées par
    une virgule) pour obliger le navigateur, si la police n’est pas
    trouvée, à lui substituer une police similaire.
    • font : permet de regrouper les différentes propriétés de polices
    (dans l’ordre précité) en une ligne.
    Ex : p { font: italic bold 12pt "Times New Roman" , serif; }

    19
    Le texte
    • word-spacing et letter-spacing : normal | <longueur>
    distance entre mots et distance entre caractères.
    • line-height : normal | <longueur> | %
    interligne
    • text-decoration: none | [ underline || overline || line-through
    || blink ]
    texte souligné, surligné, barré ou clignotant.
    • text-align: left | right | center | justify
    alignement horizontale du texte.
    • text-transform: capitalize | uppercase |lowercase | none
    casse des caractères.
    • text-indent: <longueur> | <pourcentage>
    alinéa pour la première ligne de texte.

    20
    Les valeurs de couleur
    Mot clé rgb héxa
    aqua #00ffff
    black #000000
    blue #0000ff
    fuchsia #ff00ff
    gray #808080
    green #008000
    lime #00ff00
    Maroon #800000
    navy #000080
    olive #808000
    purple #800080
    red #ff0000
    silver #c0c0c0
    teal #008080
    #ffffff
    yellow #ffff00
    Orange #ffa500
    21
    Les couleurs et fond
     color: <couleur>
    couleur d'un texte
     background-color: <couleur> | transparent
    couleur du fond de la page ou d’un bloc
     background-image: url(<url>) | none;
    image du fond de la page ou d’un bloc
     background
    permet de regrouper les différentes propriétés de fond (dans
    l’ordre précité) en une ligne
    Ex : p { background: green url(image.gif) }

    22
    L’anatomie des boîtes
    Une boîte possède une aire de contenu (texte, image, ...) entourée par
    une aire d'espacement, une aire de bordure et une aire de marge

    23
    La marge
    • Le margin évalue la distance entre l’élément et ses voisins
    • Les propriétés margin-top, margin-right, margin-bottom,
    margin-left prennent chacune l’une des valeurs: <longueur>
    | <pourcentage> | auto
    • margin : [<longueur>|<pourcentage> | auto]{1,4}
    regroupe les différentes propriétés de marge (en partant
    d'en haut, dans le sens horaire)
    • Exemples :
    body{ margin: 2em }
    signifie : toutes les marges à 2em.
    body { margin: 1em 2em }
    signifie : top = bottom = 1em et right = left = 2em.
    body { margin: 1em 2em 3em }
    signifie : top = 1em, right = left = 2em et bottom = 3em
    24
    L’épaisseur de bordure
    • Les propriétés border−top−width, border−right−width,
    border−bottom−width, border−left−width prennent chacun
    l’une des valeurs : thin (fin) | medium | thick | <longueur>

    • border-width : [thin | medium | thick | <longueur>]{1,4}


    regroupe les différentes propriétés de l’épaisseur (en partant
    d'en haut, dans le sens horaire)

    25
    La couleur de bordure
    • Les propriétés border−top−color, border−right−color,
    border−bottom−color, border−left−color prennent chacun l’une
    des valeurs :<couleur> | transparent

    • border-color : [<couleur> | transparent]{1,4}


    spécifie la couleur des quatre côtés (en partant d'en haut, dans
    le sens horaire)

    26
    Le style de bordure
    • Les propriétés border−top−style,
    border−right−style, border−bottom−style,
    border−left−style prennent chacun l’une des
    valeurs : none | dotted (pointillée) | dashed
    (tirets) | solid (pleine)| double (2 traits)|
    groove (gravée avec effet 3D) |
    ridge (relief avec effet 3D ) |
    inset (incrustée)| outset (extrudée).

    • border-style regroupe les différentes


    propriétés de l’épaisseur (en partant d'en haut,
    dans le sens horaire)
    27
    Les raccourcies de bordure
    • Les propriétés border−top, border−right, border−bottom,
    border−left spécifient chacune l’épaisseur, le style et la couleur
    d’un coté (dans l’ordre précité) .

    • La propriété border spécifie la même épaisseur, la même couleur


    et le même style pour les quatre côtés.

    28
    L’espacement
    • Le padding evalue l’espace entre le contenu de l'élément et
    sa bordure.
    • padding-top : <longueur> | <pourcentage>
    valeur de l’espacement haut
    • padding-right : <longueur> | <pourcentage>
    valeur de l’espacement droit
    • padding-bottom : <longueur> | <pourcentage> valeur de
    l’espacement bas
    • padding-left : <longueur> | <pourcentage>
    valeur de l’espacement gauche
    • padding : [<longueur> | <pourcentage>]{1,4} permet
    de regrouper les différentes propriétés de padding en une
    ligne
    Ex. h1 { padding: 1em 2em }

    29
    Le dimensionnement
    • width et height permettent de contrôler la largeur et la hauteur
    des contenus de type bloc et ceux remplacés
    • Elle prennent des unités absolues ou relatives
    • Par défaut (valeur auto) :
    – un bloc prend la largeur max dispo sauf s’il est positionné en
    mode absolu, fixe ou flottant où il s’adapte à son contenu ;
    – un bloc s’adapte à la hauteur de son contenu.
    – un contenu en-ligne remplacé prend sa taille intrinsèque
    • Pour redimensionner une image, jouer uniquement sur l'une
    des deux valeurs width ou height, pour laisser au navigateur le
    soin de déterminer l'autre valeur d'une manière à conserver le
    les proportions de l'image
    • NB : Si la hauteur d’un contenant n’est pas à auto, son contenu
    peut déborder. 30
    Le positionnement
    • Le positionnement CSS permet de placer un contenu
    exactement où l'on veut dans la page

    • Il existe plusieurs schémas de positionnement en CSS :


    – un schéma de positionnement dans le flux normal ou
    positionnement courant (positionnement par défaut);
    – un "positionnement" (relatif), une variante du
    positionnement courant qui provoque un décalage;
    – trois schémas de positionnement qui sortent le contenu du
    flux (positionnement absolu, positionnement fixé et
    positionnement flottant).

    31
    Le positionnement dans le flux
    • Par défaut, les navigateurs affichent les contenus suivant l'ordre
    dans lequel ils apparaissent dans le code HTML: c’est le
    positionnement dans le flux normal.
    • Par défaut, les éléments de type bloc seront affichées dans une
    succession verticale (du haut vers le bas) et les éléments de
    type en-ligne, dans une succession horizontale (de la gauche
    vers la droite).
    • Pour positionner un contenu dans le flux
    normal, utiliser les propriétés padding et
    margin.
    • Pour centrer horizontalement un bloc,
    fixer sa largeur et mettre à auto ses
    marges latérales
    32
    Le positionnement relatif
    • Le positionnement relatif (position : relative) laisse le contenu dans
    le flux normal, tout en le décalant par rapport à la ligne de base, à
    l'aide des propriétés top:<longueur>, right :<longueur>,
    bottom :<longueur> et left :<longueur>.
    • L’emplacement d’une boîte B qui suit une boîte A en position
    relative est calculé comme si A n'avait pas été déplacée

    • Aussi, en attribuant à un contenu une position relative, il peut:


    o servir de référent à un contenu enfant positionné en absolu (à
    voir plus loin).
    o bénéficier de la possibilité d'utiliser la propriété z-index
    pour gérer des superpositions de contenus (à voir plus loin)
    33
    Le positionnement flottant
    • Un contenu flottant est ôté partiellement du flux et placé à
    l'extrême gauche (float:left) ou droite (float:right) de son
    conteneur, forçant par la même occasion tout contenu du
    flux qui suit à l'envelopper.
    • float : none empêche un contenu de flotter

    34
    Empêcher l’enveloppement

    Pour contrôler le comportement d’un bloc qui


    suit des éléments flottants dans le document,
    utiliser la propriété clear avec l’une des
    valeurs none, left, right ou both

    35
    x
    Le positionnement absolu
    • Le positionnement absolu (position : absolute) retire
    totalement du flux le contenu concerné mais le positionne
    par rapport aux limites du premier ancêtre positionné.
    • En l'absence d'un ancêtre positionné, c'est l’espace de
    visualisation qui sert de référence.
    • Utiliser les propriétés top:<longueur>, right :<longueur> ,
    bottom :<longueur> et left :<longueur>.
    • Attention: superposition possible (voir z-index)

    36
    x
    Le positionnement fixe
    • Le positionnement fixe (position : fixed) retire totalement du
    flux le contenu concerné et le positionne par référence aux
    limites de l'espace de visualisation.
    • Un contenu en position fixed reste visible lors du défilement de
    la page.
    • Pour positionner le contenu, utiliser les propriétés
    top:<longueur>, right :<longueur> ,
    bottom :<longueur> et left :<longueur>.
    • Attention: superposition possible (voir z-index)
    • Le positionnement fixe n'est implémenté dans MSIE qu'à partir
    que de la version 7.

    37
    Empilement
    • En plus de leurs positions horizontales et verticales, les
    contenus s’échelonnent le long d'un "axe−z" et s'empilent les
    unes au−dessus des autres dans la mise en forme.
    • Des contenus positionnés (relative, absolute ou fixed) dont les
    domaines d'affichage se superposent sont en principe affichés
    l'un sur l'autre dans l'ordre dans lequel ils ont été définis.
    • Cet ordre d’empilement peut être modifié grâce à la propriété
    z-index appliquée à chacun de ces contenus.
    • Les valeurs possibles de z-index sont des entiers (plus l'entier
    est grand, plus le contenu considéré sera au dessus).

    38
    x
    L’héritage
    • Les feuilles de style respectent la structure hiérarchique des
    éléments XHTML.
    • Un élément de niveau supérieur (l'élément parent) est suivi
    par des éléments enfants qui peuvent hériter des styles,
    provenant de leurs éléments parents.
    • Exemple:
    Avec : div { color : white; background-color : black; }
    on aura :<div>Ceci est une division (texte blanc sur fond
    noir) contenant un <p>paragraphe de même style
    </p></div>
    • Certaines propriétés comme les marges, les espacements,
    les bordures et les dimensions ne sont pas héritées pour des
    raisons évidentes de lisibilités des documents.
    • Depuis CSS 2, la quasi-totalité des propriétés peut prendre la
    valeur inherit permettant de définir explicitement l’héritage
    de la valeur que possède la même propriété dans l’élément
    parent.
    39

    Vous aimerez peut-être aussi