Scribd Logo
Importer

Bienvenue sur Scribd !

  • Cours CSS

    Transféré par

    walidelmezouar39
    33 vues20 pages

    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é
    33 vues20 pages

    Cours CSS

    Transféré par

    walidelmezouar39

    Droits d'auteur :

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

    Formation

    Création de Sites Web


    HTML - CSS - PHP/MySQL

    Mme BOUACHERIA Ibtissem


    Frontend
    CASCADING STYLE SHEET
    Language de style
    1. Propriétés

    2. Sélecteurs
    Syntaxe
    Syntaxe de base

    Selecteur {
    propriété: valeur;
    propriété: valeur;
    }

    Exemple:

    p {
    color: red;
    font-size: 20px;
    }
    Documentation pour pouvoir
    apprendre par vous-même
    Une autre documentation
    Où mettre du CSS ?
    1. Dans la balises HTML via l’attribut style (non recommandée)
    <p style="color: red;
    font-size: 20px;">
    Test d'un text stylé
    </p>

    2. Dans l'en-tête <head> du fichier HTML


    </head>
    <style>
    p { color: red; font-size: 20px; }
    </style>
    </head>

    3. Dans un fichier externe d’extention « .css » (recommandée)

    </head>
    <link rel="stylesheet"
    href="style.css">
    </head>
    Les sélecteurs
    Les sélecteurs définissent les éléments sur lesquelles s'applique un
    ensemble de règles CSS.

    I. Les sélecteurs simples


    1. Sélecteur de type (nom de balise)
    NomBalise { …. } Exemple: h2 { …. }
    2. Sélecteur de classe
    .NomClass { …. } Avec: <balise class="NomClass">

    3. Sélecteur d’identifiant
    #ID { …. } Avec: <balise id="ID">

    4. Sélecteur universel
    * { …. }

    Commentaire

    /* Je met mon commentaire ici */


    Cascading style
    I. Héritage:

    body {
    color: red;
    }

    Pourquoi ce résultat ? Inspecteur

     Element style
     User-agent
     Hérité de (Inherited from)
    Cascading style
    II. Ordre important:
    h2 {
    color: red;
    }
    h2 {
    color: green;
    }

    III. La règle la plus spécifique l’emporte:

    .h2Class{ .h2Class{
    color: red; } color: red; }
    h2 {
    h2 { color: green; }
    color: green; } #h2ID{
    color: magenta; }

    Utilisé souvent pour écraser des règles


    Les sélecteurs
    II. Les combinateurs
    1. Les sélecteurs d'éléments descendants
    Parent descendant { Exemple: div p { …. }
    …. }

    2. Les sélecteurs d'éléments enfants direct


    Parent > enfant { Exemple: div > p { …. }
    …. }

    3. Les sélecteurs de voisins direct


    Element + voisinDirect { Exemple: h2 + p { …. }
    …. }

    4. Les sélecteurs de voisin

    Element ~ voisin { Exemple: h2 ~ p { …. }


    …. }
    Les sélecteurs
    Les sélecteurs d'attribut (Voir doc)
    Exemple pratique:
    input[type="texte"] {
    width: 200px;
    }

    Les pseudo-classes
    sélecteur:pseudo-classe {
    …. }

    (Voir doc)

    Remarque:
    Pour combiner plusieurs règles on utilise la forme:

    Selecteur1, Selecteur1, Selecteur2


    Selecteur2 { …. } { …. }
    Pratiquez, pratiquez et pratiquez !

    CSS Dinner
    https://flukeout.github.io/
    Agencement des élements
    I. Le modèle de boîtes
    1. Width, height, padding, border et margin
    2. Display:
    a. Block
    b. Inline (strong, em, span et a)
    Attention aux espaces
    c. Inline-Block (input)
    Propriétés de base
    I. Plices & textes
    1. Color (par défaut: inherit)
    2. font-sizeLine-height (par défaut 1.2, standard 1.4)
    3. Letter-spacing
    4. Font-familly: "source sans pro" , sans-
    5. Text-align: left, right, center …(influance uniquement
    inline et inline-block), justify
    6. Text-align-last
    7. Overflow-wrap: break-word
    8. Hyphens &shy
    9. Text-decoration indereline/none
    10. Font-weight
    11. Font-style: italic
    12. Text-transform: upercase…
    Propriétés de base
    II. Couleur:
    1. Rgb ( , , )
    2. Rgba + tranparence ( , , ,)
    3. #aabbcc
    4. #aabbccdd
    III. Unités de mesure
    1. Px
    2. % (element) vw,vh (taille fenetre)
    3. Em / rem
    4. Cm mm in .. (impression)
    Propriétés de base
    IV. Background
    1. -color
    2. -image
    3. -repeat
    4. -position
    5. -size
    6. -attachement
    7. Linear-gradiant
    8. Plusieurs images (premiere en premier plan) -> plusieur
    attachement,,,etc
    V. * { box-sizing: border-box ;

    Vous aimerez peut-être aussi