Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Daaif Cours CSS

    Încărcat de

    Sellé Gueye
    49 vizualizări17 pagini

    Titlu original

    257223899-Daaif-Cours-CSS

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PPT, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PPT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    49 vizualizări17 pagini

    Daaif Cours CSS

    Încărcat de

    Sellé Gueye

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PPT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 17

    CSS

    Cascading Style Sheets


    Pourquoi les CSS ?
     Pour séparer le contenu de la mise en
    forme des pages web.
     Rendre la charte graphique du site Web
    plus cohérente.
     Faciliter les mises à jour de la
    présentation des sites Web.
     Donne plus de possibilités que HTML…
    Comment ?
     En définissant un ou plusieurs styles
     Deux manières :
     Interne (les styles sont définis à l’intérieur
    de la page)
     Externe (les styles sont définis dans un
    fichier séparé puis relié à la page Web)
    Style Interne I
     Style défini grâce à l’attribut style de la
    balise HTML
    Exemple :

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


    Style Interne II
     Style défini dans la balise Style
    (Celle-ci doit être déclarée entre les balises
    <head>et </head>)

    Exemlpe :
    <Style type="text/CSS">
    P { Color:#FFAA34;}
    </Style>
    Style Externe
     Style défini 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 Sélecteurs CSS
     Les sélecteurs permettent de définir la cible à
    laquelle on veut appliquer le style.
     Trois catégories :
     Sélecteurs qui redéfinissent l’apparence des
    balises html
     Sélecteurs associés à des variables et qu’on
    applique à n’importe quelle balise html
     Sélecteurs spécifiques associés à une balise
    particulière
    Les Sélecteurs I
     Redéfinition de l’apparence des balises
    html
    Exemples :
    P, H1 { font-family : verdana, arial;
    Color:red; }
    A{ text-decoration:none;
    Color:blue; }
    BODY {Background : #F9C}
    Les Sélecteurs II
     Les sélecteurs associés aux variables…

    Exemple de définition du style :


    .corps {font-family : verdana, arial; }

    Exemple d’utilisation dans html :


    <Body class=corps>…..</body>
    Les Sélecteurs III
     Les sélecteurs spécifiques à une balise
    Exemple de définition du style :
    #menu {font-family : verdana, arial; }

    Exemple d’utilisation dans html :


    <DIV id=menu>…..</DIV>
    Les Sélecteurs IV
     Les Pseudo-Styles.
    L’apparence change en fonction des événements qui
    surviennent sur l’élément html.
    Exemples :
    A:link {Color:blue; }
    A:hover {Color:yellow; }
    A:visited {Color:black; }
    Les Sélecteurs V
     Les Sélecteurs Hiérarchiques.
    Exmples :
    P A {Color:blue; }
    (la couleur ne s’applique qu’aux balises <A> qui se trouvent à
    l’intérieur d’un paragraphe <P> )
    UL LI {list-style:none; }
    (pas de puces pour les <LI> qui se trouvent à l’intérieur d’une <UL>.
    Ca ne concerne pas donc les <LI> qui se trouvent à l’intérieur d’une
    <OL> )
    Quelques Attributs I
     Couleurs et images d'arrière plan
    color: rgb(255,0,255);
    background: red;
    background-image: url('http://123.ma/img.jpg');

     Décoration de polices de caractères


    font-family : verdana, arial;
    font-weight: bold;
    font-decoration: strike;
    Quelques Attributs II
     Mise en forme de blocs de
    caractères
    text-align: right;
    text-align: justify;
    text-indent: 15px;
    Gestion des boîtes englobantes
    Gestion des boîtes englobantes

    Margin>Border>Padding>Contenu
    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;

    S-ar putea să vă placă și