Scribd Logo
Importer

Bienvenue sur Scribd !

  • Css 3

    Transféré par

    gharsallahsami
    3 vues17 pages

    Titre original

    Css3

    Copyright

    © © All Rights Reserved

    Formats disponibles

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

    Css 3

    Transféré par

    gharsallahsami

    Droits d'auteur :

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

    C ascading S tyle

    Css3 S heets
    • CSS est le langage que nous utilisons pour styliser un
    document HTML
    • Cet autre langage qui vient compléter le HTML
    Où écrit-on le CSS ?

    Vous avez le choix car on peut écrire du code en langage CSS à trois endroits
    différents :
    •dans un fichier .css (méthode la plus recommandée) ;
    •dans l'en-tête <head> du fichier HTML ;
    Cela consiste à insérer le code CSS directement dans une balise <style>
    à l'intérieur de l'en-tête <head> .
    •directement dans les balises du fichier HTML Vous pouvez ajouter un
    attribut style à n'importe quelle balise. Vous insérerez votre code CSS
    directement dans cet attribut ,
    Syntaxe CSS

    • Un ensemble de règles CSS se compose d'un sélecteur et d'un bloc de


    déclaration:

    • Le sélecteur pointe vers l'élément HTML que vous souhaitez styliser.


    Appliquer un style: sélectionner une balise

    Dans un code CSS comme celui-ci, on trouve trois éléments différents :


    • Des noms de balises on écrit les noms des balises dont on
    veut modifier l’apparence exp: si je veux modifier les paragraphes
    <p> je dois écrire p
    • Des propriétés CSS: les « effets de style » de la page sont
    rangés dans des propriétés.
    • Les valeurs : pour chaque propriété CSS, on doit indiquer une
    valeur
    schématiquement,
    une feuille de style
    CSS ressemble donc
    à cela

    pour faire un commentaire, Tapez /* , suivi de votre commentaire,


    puis */
    pour terminer votre commentaire.
    Si deux balises ou plus h1, p
    doivent avoir la même
    présentation. Il suffit de {
    combiner la déclaration,
    comme l’ exemple ceci : color: blue;
    }
    LES DIFFÉRENTS TYPES DE SÉLECTEURS
    Nom du sélecteur Ce qu'il sélectionne Exemple

    Sélecteur d'élément (parfois appelé « Tous les éléments HTML d'un type
    P sélectionne tous les <p>
    sélecteur de balise » donné.

    L'élément d'une page qui possède l'ID #my-id


    Sélecteur d'ID
    fourni sélectionne <p id="my-id">

    Les éléments d'une page qui sont de .my-class


    Sélecteur de classe
    la classe donnée sélectionne <p class="my-class">

    img[src]
    Les éléments de la page qui sélectionne <img
    Sélecteur d'attribut
    possèdent l'attribut donné. src="monimage.png"> mais
    pas <img>
    Appliquer un style : Class et id

    pour que certains éléments seulement soient écrits d'une manière différente ?
    On peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises :
    •l'attribut class
    •l'attribut id
    L’attribut :class

    • Vous devez écrire (en html)un nom qui sert à identifier la balise exp:
    <p class=introduction>
    • Vous allez pouvoir réutiliser ce nom dans le fichier CSS pour dire : « Je
    veux que seules les balises qui ont comme nom soient modifié.
    • Pour faire cela en CSS, indiquez le nom de votre classe en
    commençant par un point:
    • Exemple:
    L’attribut :id
    Il fonctionne exactement de la même manière que class , à un détail près :
    il ne peut être utilisé qu'une fois dans le code

    Si vous utilisez des id , lorsque vous définirez leurs propriétés dans le fichier CSS,
    il faudra faire précéder le nom de l' id par un dièse (#) :exemple: #nomid

    Si vous vous emmêlez les pinceaux entre class et id , retenez que deux
    balises
    peuvent avoir le même nom avec l'attribut class .
    Un nom d' id doit en revanche être unique dans la page HTML
    LES SÉLECTEURS AVANCÉS

    • * : sélecteur universel :Sélectionne toutes les balises sans exception. On l'appelle le sélecteur
    universel.
    • A + B : une balise qui en suit une autre: Sélectionne la première balise <p> située après un
    titre <h3>

    • Sélectionner un élément B contenu dans A:

    • A B {propriété : valeur;}
    • A[attribut] : une balise qui possède un attribut: exemple: a[title] Sélectionne tous les liens <a>
    qui possèdent un attribut title

    • Sélectionner tous les éléments D possédant un attribut en particulier et une valeur exactement:

    • D[attribut="valeur"] {propriété : valeur;}


    SÉLECTEUR AVANCÉS

    • Sélectionner le dernier enfant, indépendamment du type de son parent:


    • C:last-child {propriété : valeur;}

    • Sélectionner le premier enfant, indépendamment du type de son parent:


    • C:first-child {propriété : valeur;}
    L’HERITAGE

    • Les éléments en HTML « héritent » des styles de leurs parents.


    • D’où le « cascading » de CSS.

    • En cas de conflit, le style le plus proche de l’élément en question sera


    appliqué.
    MARGIN & PADDING

    • La propriété margin permet de définir la taille de


    l’espace entourant l’élément.
    • Elle peut être utilisée pour positionner des éléments.

    • La propriété padding permet de définir la marge


    intérieure (à l’intérieur des bordures) d’un élément.
    • Elle ne doit pas être utilisée pour positionner des
    éléments.
    LES COULEURS

    • On utilise la propriété color


    • color : valeur textuelle (nom de la couleur)
    • color : un code couleur (#code en hexadécimal)
    • color : rgb(vr,vv,vb)
    RÉSUMÉ

    • CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme votre
    page web.
    • Il faut être vigilant sur la compatibilité des navigateurs avec certaines fonctionnalités récentes de
    CSS3. Quand un navigateur ne connaît pas une instruction de mise en forme, il l'ignore
    simplement.
    • On peut écrire le code CSS à plusieurs endroits différents, le plus conseillé étant de créer un
    fichier séparé portant l'extension .css (exemple : style.css ).
    • En CSS, on sélectionne quelles portions de la page HTML on veut modifier, et on change leur
    présentation avec des propriétés CSS :
    • l existe de nombreuses façons de sélectionner la portion de la page que l'on veut mettre en
    forme. Par exemple, on peut viser :
    • toutes les balises d'un même type, en écrivant simplement leur nom ( h1 , par exemple) ;
    • certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs class
    ou id ( .nomclasse ou #nomid ) ;
    • uniquement les balises qui se trouvent à l'intérieur d'autres balises,

    Vous aimerez peut-être aussi