Scribd Logo
Importer

Bienvenue sur Scribd !

  • Fiche N°3 CSS

    Transféré par

    gharsallahsami
    3 vues3 pages

    Titre original

    Fiche n°3 CSS

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, 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 DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    3 vues3 pages

    Fiche N°3 CSS

    Transféré par

    gharsallahsami

    Droits d'auteur :

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

    Fiche n°1 : Syntaxe de base CSS 3

    C’est quoi le CSS ?


     Le CSS Cascading Style Sheets : Feuilles de Style en Cascade est un langage qui permet de
    styliser une page HTML à l’aide d’un sélecteur, d’une propriété et d’une valeur.
     lorsqu'on n'utilise pas de feuilles de style, c'est qu'il faut reprendre toutes les pages html une à une
    pour modifier une police de caractère ou une couleur de fond...Avec les "Cascading Style Sheets"
    (CSS), ce lourd handicap est résolu.

    Comment appliquer le CSS à une page HTML ?


     Inline: directement dans la balise html avec l’attribut ……………………..

    <body style="background-color:black;">

    <h1 style="color:white;padding:30px;"> Tutorials </h1>

     Embedded (interne): directement dans le fichier html avec la balise ………………..

    <head>
    <style type="text/css">
    h1 {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    </style>
    </head>

     Linked (externe): dans un fichier .css externe et lié via la balise link.

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

    Syntaxe pour une règle CSS ?


    sélecteur(s) {propriété: valeur ; propriété: valeur1, valeur2, valeur3 ;...............................}

    C’est quoi un sélecteur ?

     Un sélecteur est un "nom" qui indique à quels éléments d'une page HTML on désire appliquer une règle.
     Chaque règle CSS commence nécessairement par un sélecteur
    Types de sélecteurs CSS ?

    Il existe plusieurs méthodes pour identifier les éléments, par exemple:

     on indique le nom d'une balise :

    .Nom-de-la-balise {
    propriété-de-style: Valeur;
    propriété-de-style: Valeur;
    ...; }

     on indique la classe d'une balise(class) :

    .Nom-de-la-classe {
    propriété-de-style: Valeur;
    propriété-de-style: Valeur;
    ...; }

     on indique l'identificateur d'une balise (id)

    #Nom-id {
    propriété-de-style: Valeur;
    propriété-de-style: Valeur;
    ...; }

     utiliser le sélecteur universel * pour sélectionner tous les éléments HTML d’une page d’un coup,

    *{
    propriété-de-style: Valeur;
    propriété-de-style: Valeur;
    ...; }

     Utiliser une balise contenue dans une autre


    Exemple :
    p a{
    background-color: yellow ;
    }
     Seule la balise <a>contenue dans une balise<p> a été modifiée.
    Box Model en CSS
    Les CSS définissent un modèle de boite (box model) standard pour tous les éléments HTML.
     Le contenu est caractérisé par sa hauteur
    (height)et sa largeur (width).
     On distingue deux types de marges :
    Les marges intérieures « padding»
     Les marges extérieures « margin »
     Le padding et le margin sont séparés par
    une bordure (border).
     Le padding est l’espace entre la bordure
    et le contenu html réel de l’élément.
     Le margin est l‘espace entre la bordure de
    l’élément et le reste de contenu du
    page web.

     Chaque dimension (hauteur, largeur, marges) peut être traitée de manière indépendantes grâces aux mots
    clés : top, right, bottom, left.
    Exemple :

     On peut utiliser la forme courte pour définir les dimensions (margin et padding) en respectant le sens de
    rotation horaire

    Exemple :

    Vous aimerez peut-être aussi