Scribd Logo
Upload

Welcome to Scribd!

  • Daaif Cours CSS

    Uploaded by

    Salem Ben Nasr
    131 views17 pages
    presentation css

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    presentation css

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    131 views17 pages

    Daaif Cours CSS

    Uploaded by

    Salem Ben Nasr
    presentation css

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 17

    CSS

    Cascading Style Sheets

    Pourquoi les CSS ?

    Pour sparer le contenu de la mise


    en forme des pages web.
    Rendre la charte graphique du site
    Web plus cohrente.
    Faciliter les mises jour de la
    prsentation des sites Web.
    Donne plus de possibilits que
    HTML

    Comment ?

    En dfinissant un ou plusieurs
    styles
    Deux manires :

    Interne (les styles sont dfinis


    lintrieur de la page)
    Externe (les styles sont dfinis dans
    un fichier spar puis reli la page
    Web)

    Style Interne I
    Style dfini grce lattribut style
    de la balise HTML
    Exemple :

    <P Style="Color:#FF0">Mon
    paragraphe</P>

    Style Interne II

    Style dfini dans la balise Style


    (Celle-ci doit tre dclare entre les balises
    <head>et </head>)

    Exemlpe :
    <Style type="text/CSS">
    P { Color:#FFAA34;}
    </Style>

    Style Externe

    Style dfini dans un fichier externe


    (Celui-ci doit tre reli la page entre les
    balises <head>et </head>)

    Exemple :
    <link rel="stylesheet" type="text/css"
    href="fichier.css">

    Les Slecteurs CSS

    Les slecteurs permettent de dfinir la


    cible laquelle on veut appliquer le style.
    Trois catgories :

    Slecteurs qui redfinissent lapparence des


    balises html
    Slecteurs associs des variables et quon
    applique nimporte quelle balise html
    Slecteurs spcifiques associs une balise
    particulire

    Les Slecteurs I
    Redfinition de lapparence des
    balises html
    Exemples :

    P, H1 {
    font-family : verdana, arial;
    Color:red; }
    A { text-decoration:none;
    Color:blue; }
    BODY {Background : #F9C}

    Les Slecteurs II

    Les slecteurs associs aux


    variables
    Exemple de dfinition du style :
    .corps {font-family : verdana, arial; }

    Exemple dutilisation dans html :


    <Body class=corps>..</body>

    Les Slecteurs III

    Les slecteurs spcifiques une


    balise
    Exemple de dfinition du style :
    #menu {font-family : verdana, arial; }

    Exemple dutilisation dans html :


    <DIV id=menu>..</DIV>

    Les Slecteurs IV

    Les Pseudo-Styles.
    Lapparence change en fonction des
    vnements qui surviennent sur llment
    html.

    Exemples :
    A:link {Color:blue; }
    A:hover {Color:yellow; }
    A:visited {Color:black; }

    Les Slecteurs V
    Les Slecteurs Hirarchiques.
    Exmples :

    P A {Color:blue; }
    (la couleur ne sapplique quaux balises <A> qui se trouvent
    lintrieur dun paragraphe <P> )

    UL LI {list-style:none; }
    (pas de puces pour les <LI> qui se trouvent lintrieur dune
    <UL>. Ca ne concerne pas donc les <LI> qui se trouvent
    lintrieur dune <OL> )

    Quelques Attributs I

    Couleurs et images d'arrire plan

    color: rgb(255,0,255);
    background: red;
    background-image: url('http://123.ma/img.jpg');

    Dcoration de polices de caractres

    font-family : verdana, arial;


    font-weight: bold;
    font-decoration: strike;

    Quelques Attributs II

    Mise en forme de blocs de


    caractres

    text-align: right;
    text-align: justify;
    text-indent: 15px;

    Gestion des botes


    englobantes

    Gestion des botes


    englobantes

    Margin>Border>Padding>Conte
    nu
    margin: 10px;
    padding: 5px;
    border: 2px solid #FF00FF;

    -------Margin-left:10px; Margin-top:5px;

    Quelques Attributs III

    Positionnement
    position: absolute;
    position: relative;
    display: none;
    z-index: 10;

    You might also like