Scribd Logo
Importer

Bienvenue sur Scribd !

  • CSS PDF

    Transféré par

    ASQIRIBA
    23 vues18 pages

    Titre original

    CSS.pdf

    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é
    23 vues18 pages

    CSS PDF

    Transféré par

    ASQIRIBA

    Droits d'auteur :

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

    REALISATION DES

    SITES WEB STATIQUES

    Pr KHAMLICHI

    TDM 1 A/B/C 2011/2012


    Les feuilles de styles
    (Cascading Style Sheets,
    Sheets,
    abrg CSS)
    Les feuilles de styles sont un langage qui permet de grer la
    prsentation d'une page Web.
    Les styles permettent de dfinir des rgles appliques un ou
    plusieurs documents HTML. Ces rgles portent sur le
    positionnement des lments, l'alignement, les polices de
    caractres, les couleurs, les marges et espacements, les
    bordures, les images de fond, etc.

    Site web statique 2


    Le but de CSS est spar la structure d'un document HTML et sa
    prsentation.
    Avantage:
    Rend la mise jours des sites Web facile.
    1- insertion directement dans le code HTML:
    <head>
    <style type="text/css">
    body
    {
    background-image: url("images/back40.gif")
    }
    </style>
    </head>
    Site web statique 3
    2- insertion dans un fichier .css et faire un lien vers ce
    fichier:
    idal lorsque le style est applicable plusieurs pages.
    <head>
    <link rel="stylesheet" type="text/css href="monstyle.css" />
    </head>
    La balise <LINK> avertit le navigateur qu'il doit chercher un
    document situ l'extrieur de la page HTML.
    L'attribut rel="stylesheet" prcise que le document en question
    est une feuille de style externe.
    L'attribut type="text/css" prcise le type de feuille de style.

    Site web statique 4


    L'attribut href=" URL " donne l'URL de la feuille de style, c'est-
    -dire son emplacement sur Internet.

    <link rel="stylesheet" type="text/css href="monstyle.css" />


    Le fichier monstyle.css contient les informations de votre
    feuille de style:
    body
    {
    background-image: url("images/back40.gif")
    }

    Site web statique 5


    Syntaxe CSS

    Une ligne CSS se prsente comme trois lments:


    selecteur
    {
    proprit: valeur
    }
    slecteur : reprsente un lment du code HTML (exemple les
    balises HTMl: body, h1, p )
    proprit: la proprit que l'on souhaite changer (color
    background, font-size, font-family ..)
    valeur: reprsente la valeur de la proprit.
    Site web statique 6
    Exemple:
    p
    {
    text-align: center;
    color: black;
    font-family: "arial","Courrier New";
    }

    Site web statique 7


    Regroupement de proprits
    On peut appliquer les mmes valeurs de proprits un
    ensemble de selectors, il suffit de les sparer par une virgule.

    h1,h2,h3,h4,h5,h6
    {
    color: green
    }

    Site web statique 8


    Le slecteur CLASS
    Il arrive que nous ayons par exemple deux tableaux dans notre
    page HTML et nous ne voulons pas appliquer les mmes
    proprits ces deux tableaux. Dans ce cas il faudrait les
    distinguer dans le code HTML par l'attribut class comme suit:
    table.one
    {}
    table.two
    {}
    <table class="one>
    <table class=two>

    Site web statique 9


    table.one
    {
    table-layout: automatic;
    //largeurs fixe/variable
    background-color:blue;
    }
    table.two
    {
    table-layout: fixed;
    background-color:green;
    }

    Site web statique 10


    <body>
    <table class="one" border="1" width="100%">
    <tr>
    <td width="20%">1000000000000000</td>
    <td width="40%">10000000</td>
    <td width="40%">100</td>
    </tr>
    </table>
    <br />
    <table class="two" border="1" width="100%">
    <tr>
    <td width="20%">100000000000000</td>
    <td width="40%">10000000</td>
    <td width="40%">100</td>
    </tr>
    </table>
    </body>
    </html>

    Site web statique 11


    Le slecteur id
    la place dutiliser le slecteur class, on peut galement utiliser
    le slecteur id. Lavantage du id par rapport class est quil est
    unique dans le code HTML

    #par1
    {}

    <p id="par1">

    Site web statique 12


    #par1
    {
    text-align: center;
    color: red;
    font-family: arial
    }
    #par2
    {
    text-align: right;
    color: green;
    font-family: verdana
    }
    Site web statique 13
    <body>
    <p id="par1">
    ce paragraphe est rouge et centr
    </p>
    <p id="par2">
    ce paragraphe est vert est align droite
    </p>
    </body>

    Site web statique 14


    Autres exemples
    Couleur de fond (background-color)
    Dans le CSS:
    body {background-color: yellow}
    h1 {background-color: #00ff00}
    h2 {background-color: transparent}
    p {background-color: #342564}
    Dans la page html
    <body>
    <h1>en-tte h1</h1>
    <h2>en-tte h2</h2>
    <p>un paragraphe</p>
    </body>
    </html>

    Site web statique 15


    Image de fond (background)
    Dans le CSS
    body
    {
    background-image: url('image2.jpg');
    background-repeat: no-repeat
    }
    Dans la page html

    <body>
    suite du code html
    </body>
    </html>
    background-repeat: repeat
    background-repeat: repeat-y /* rptition verticale seulement
    background-repeat: repeat-x /* rptition horizontale
    seulement
    Site web statique 16
    Le texte:
    h1 {color: #00ff00}
    h1 {text-align: center}
    h2 {text-align: left}
    h3 {text-align: right}

    Site web statique 17


    a:link{text-decoration:none;color:red;}
    a:visited{text-decoration:none;color:orange;}
    a:hover{text-decoration:underline;font-weight:bold;font-
    size:20pt;color:green;}

    <a href="">

    ici les liens survols vont tre en gras, souligns, verts et en


    taille de 20pt

    Site web statique 18

    Vous aimerez peut-être aussi