Scribd Logo
Importer

Bienvenue sur Scribd !

  • 2 CSS

    Transféré par

    Flavien Raymond Andriatsihoarana
    47 vues4 pages

    Titre original

    2-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é
    47 vues4 pages

    2 CSS

    Transféré par

    Flavien Raymond Andriatsihoarana

    Droits d'auteur :

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

    CSS

     Le CSS est un langage qui permet de gérer la présentation graphique d’une page web

     CSS = Cascading Style Sheets (Feuilles de style en cascade)

     Les styles permettent de définir des règles à appliquer à une ou plusieurs pages WEB. Ces règles gèrent
    le positionnement des éléments, l'alignement, les polices de caractères, les couleurs, les marges, les
    espacements, les bordures, les images de fond, etc…

     Le but du CSS est de séparer la structure d'un document HTML (contenu) de sa présentation.

     Apparition du CSS : 1995 – Actuellement : CSS Version 3

     Le style peut être ajouté à une page WEB de 3 façons différentes:


    - 1ère méthode : Inline : utilise un attribut de style dans les éléments HTML
    - 2ème méthode : Interne : utilise une balise <style> dans l’en-tête du code HTML
    - 3ème méthode : Externe : utilise un ou plusieurs fichiers CSS externes

     Pour les styles internes et externes, on déclare des sélecteurs avec des propriétés. Un sélecteur est un
    "nom" qui indique pour quels éléments d'une page HTML on définit la règle. Chaque règle CSS
    commence nécessairement par un sélecteur.

     Les 3 sélecteurs les plus courants (parmi une cinquantaine) sont :


    Le sélecteur de b a lise, Le sélecteur de c lasse et le sélecteur
    d'identifiant

    Il existe pour les sélecteurs comme pour les propriétés des syntaxes
    d’écritures condensées appelées communément syntaxe de regroupement

    Regroupement de sélecteurs

    Regroupement de propriétés

    HEI - UE NDC « Communication WEB » 2 - CSS 1/4


    <html> #pub {
    border:10px solid orange;
    <head> background-color:#FF00FF;
    padding:10px;
    <title>CSS INTERNE</title> text-align:center;
    font-size:40px;
    <style> }

    body { background-color:#DEDEDE; } a:link, a:hover, a:visited {


    text-decoration: none;
    h1 { font-size:30px; } }

    h1, h2, .bleuCentre { .lien {


    color:blue; text-transform: uppercase;
    text-align:center; color:#FF00CC;
    font-family:Verdana, Geneva; }
    }
    </style>
    p {
    color:green; </head>
    font-size:14px;
    }

    .ref { <body>
    font-weight:bold;
    font-style:italic; <h1>Je suis un titre de niveau 1</h1>
    color:orange; <h1 class="ref">Autre titre de niveau 1</h1>
    } <p>Je suis le 1er paragraphe</p>
    <p class="special">Je suis le 2ème paragraphe</p>
    .evident { <h2>J'aime <span class="evident" >le chocolat</span> noir!</h2>
    border-color:red; <a href="http://www.hei.fr" class="lien" >Ecole hei</a> -
    border-style:solid; <a href="http://www.hei.fr" >Ecole isen</a>
    border-width:2px; <p class="bleuCentre" >Je suis le troisième paragraphe</p>
    font-size:15px; <p class="evident ref" >Je suis le quatrième paragraphe</p>
    } <div id="pub" ><h1>HEI</h1></div>

    p.special { </body>
    font-size:36px;
    color:#FF0000; </html>
    }

    HEI - UE NDC « Communication WEB » 2 - CSS 2/4


    Les sélecteurs en CSS

    p { ... } Sélecteur de balise


    Sélectionne toutes les balises <p>
    .grand { ... } Sélecteur de classe
    Sélectionne tous les éléments de class="grand"
    #pub { ... } Sélecteur d’identifiant
    Sélectionne l’élément ayant l’id="pub"
    * { ... } Sélectionne tous les éléments
    p , h1 {...} Sélectionne tous les éléments <p>
    et tous les éléments <h1>
    div p {...} Sélectionne tous les éléments <p>
    à l’intérieur des éléments <div>
    div > p {...} Sélectionne tous les éléments <p>
    où le parent est un élément <div>
    a:link {...} Sélectionne tous les liens non visités
    a:hover {...} Sélectionne tous les liens survolés
    a:visited {...} Sélectionne tous les liens visités

    p.oups {...} Sélectionne tous les éléments <p> de class="oups"


    p#head {...} Sélectionne l’élément <p> ayant l’id="head"
    ul li a {...} Sélectionne tous les éléments <a>
    à l’intérieur des éléments <li> eux-même
    à l’intérieur des éléments <ul>
    ul.toto li {...} Sélectionne tous les éléments <li>
    à l’intérieur des éléments <ul> de class="toto"

    Propriété : valeur ;

    background-color :#DEDEDE ; fixe la couleur de fond à gris


    font-size : 30px ; fixe la taille de la police à 30 pixels
    color : blue ; fixe la couleur à bleu
    text-align : center ; alignement horizontal centré
    font-family : verdana ; fixe la police à verdana30 pixels
    font-weight : bold ; Gras
    font-style : italic ; Italique
    text-decoration : underline ; soulignement
    padding : 10 px ; fixe les 4 marges intérieures à 10px
    margin : 20 px ; fixe les 4 marges extérieures à 20px

    HEI - UE NDC « Communication WEB » 2 - CSS 3/4


    Créer les styles suivants :

     Les paragraphes sont alignés à gauche de couleur bleu

    p {
    text-align : left ;
    color : blue ;
    }

     Les titres de niveau 1 à 4, toutes les balises <ul> et toutes les balises <ol> ont une une marge
    extérieure haute de 20px et une police « verdana » ou « geneva » à défaut

    h1,h2,h3,h4,ul,ol {
    font-family : verdana, Geneva ;
    margin-top : 20px ;
    }

     La balise identifiée par l’identificateur « titre » est avec un fond jaune

    #titre {
    Background-color : yellow;
    }

     Tous les liens visités de classe « remarque » sont en italique et non soulignés

    a.remarque:visited {
    font-style: italic;
    text-decoration : none;
    }

     Les liens de classe « menu » survolés qui appartiennent aux items (éléments) d’une liste non
    ordonnée sont graissés, soulignés et de couleur rouge

    ul li a.menu:hover {
    color : red ;
    font-weight : bold ;
    text-decoration : underline;
    }

     La classe « exergue » et les balises <span> de classe « evident » mettent le texte en taille 20 px

    .exergue, span.evident {
    font-size : 20px;
    }

    HEI - UE NDC « Communication WEB » 2 - CSS 4/4

    Vous aimerez peut-être aussi