Scribd Logo
Importer

Bienvenue sur Scribd !

  • Formation CSS

    Transféré par

    nassimatahari8
    10 vues12 pages
    css

    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
    css

    Droits d'auteur :

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

    Formation CSS

    Transféré par

    nassimatahari8
    css

    Droits d'auteur :

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

    Formation CSS

    Entrez le sujet ici


    Introduction CSS
    CSS est l'acronyme de Cascading Style Sheets. CSS décrit comment les éléments HTML
    doivent être affichés à l'écran, sur papier ou sur un autre support. CSS économise
    beaucoup de travail. Il peut contrôler la mise en page de plusieurs pages Web en même
    temps Les feuilles de style externes sont stockées dans des fichiers CSS
    Introduction CSS
     CSS est un langage qui décrit le style d'un document HTML. CSS décrit comment les
    éléments HTML doivent être affichés. Ce tutoriel vous apprendra les CSS de base à
    avancé.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    background-color: lightblue;
    }
    h1 {
    color: white;
    text-align: center;
    }
    p{
    font-family: verdana;
    font-size: 20px;
    }
    </style>
    </head>
    <body>
    <h1 style=>My First CSS Example</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>
    Syntaxe CSS
    Balise Style Balise Body
    p{ <p>C'est un paragraphe écrit avec le style de police
    1
    font-family: verdana; verdana avec la taille 20 px.</p>
    font-size: 20px;
    } <p id="para1">Ce paragraphe est écrit avec le style de
    p.center { police bleu verdana hérité, mais avec un autre
    2 text-align: center; syntaxe.</p>
    color: red;
    } <p class="center">Ce paragraphe est écrit avec le
    3 #para1 { style de police rouge verdana hérité, mais avec un
    color: blue; autre syntaxe.</p>
    }
    p.large { <p class="center large">Ce paragraphe est écrit avec
    4 font-size: 300%; le style de police rouge verdana hérité, et un nouveau
    } class relatif à la taille de 300%.</p>

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


    Syntaxe CSS
    Balise style p.dotted {border-style: dotted;}
    p.dashed {border-style: dashed;}
    p.solid {border-style: solid;}
    p.double {border-style: double;}
    p.groove {border-style: groove;}
    p.ridge {border-style: ridge;}
    p.inset {border-style: inset;}
    p.outset {border-style: outset;}
    p.none {border-style: none;}
    p.hidden {border-style: hidden;}
    p.mix {border-style: dotted dashed solid double;}

    <h2>The border-style Property</h2>


    Balise Body <p>This property specifies what kind of border to display:</p>
    <p class="dotted">A dotted border.</p>
    <p class="dashed">A dashed border.</p>
    <p class="solid">A solid border.</p>
    <p class="double">A double border.</p>
    <p class="groove">A groove border.</p>
    <p class="ridge">A ridge border.</p>
    <p class="inset">An inset border.</p>
    <p class="outset">An outset border.</p>
    <p class="none">No border.</p>
    <p class="hidden">A hidden border.</p>
    <p class="mix">A mixed border.</p>
    Border/Background/Color CSS
    <h1 style="border: 2px solid Tomato;">Hello World</h1>
    <h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
    <h1 style="border: 2px solid Violet;">Hello World</h1>
    <h1 style="background-color:rgb(255, 99, 71);">...</h1>
    <h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
    <h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
    <h1 style="background-color:#ff6347;">...</h1>
    <h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
    <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
    <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

    rgba(red, green, blue, alpha) hsl(hue, saturation, lightness)


    rgba(red, green, blue, alpha) hsla(hue, saturation, lightness, alpha)
    #Code Hexad Ex: #ff6347 #Code Ex: Tomato
    body {
    background-image: url("gradient_bg.png");
        background-repeat: repeat-x;
    }
    Marge CSS

    Property Description
    margin padding Margin or padding en une
    seule déclaration
    margin-bottom padding-bottom bottom vs un élément
    margin-left padding-left left vs un élément
    margin-right padding-right right vs un élément
    margin-top padding-top top vs un élément
    p{ p{ R div {
        height: 200px;
        margin: 25px 50px 75px 100px;     margin: 25px 50px 75px;     width: 50%;
    } T R B L } T L B    }

    p{ T R p{ All
        margin: 25px 50px;     margin: 25px;
    } B L }
    Text / font CSS

    text-align center; left; right; justify;


    text-decoration overline; line-through;underline;

    text-transform uppercase; lowercase; capitalize;


    text-indent 50px;

    letter-spacing 3px;

    line-height: 0.7;

    text-shadow: 3px 2px red;

    font-family "Times New Roman"


    font-style normal; italic; oblique;
    font-size: 40px; 2.5em; /* 40px/16=2.5em
    */ ;100%
    Icone CSS

    <link rel="stylesheet" href="bootstrap.min.css">


    <i class="glyphicon glyphicon-cloud"></i>
    <i class="glyphicon glyphicon-remove"></i>
    <i class="glyphicon glyphicon-user"></i>
    <i class="glyphicon glyphicon-envelope"></i>
    <i class="glyphicon glyphicon-thumbs-up"></i>

    Autres librairies des icones


    href=" font-awesome.min.css" 
    href="https://fonts.googleapis.com/icon?family=Material+Icons"
    Link/Liste CSS

    a:link { a:link, a:visited {


    text-decoration: none; background-color: #f44336;
    } color: white;
    a:visited { padding: 14px 25px;
    text-decoration: none; text-align: center;
    } text-decoration: none;
    a:hover { display: inline-block;
    text-decoration: underline; }
    }
    a:active { a:hover, a:active {
    text-decoration: underline; background-color: red;
    } }

    ul.a {
    list-style-type: circle; list-style-image: url(‘img.gif');
    } li {
        display: inline;
    ul.b { }
    list-style-type: square;
    }
    Position CSS

    position: Static:Les éléments positionnés statiques ne sont pas affectés par les propriétés
    top, bottom, left et right.
    Relative: Si vous définissez les propriétés haut, droit, bas et gauche d'un élément
    relativement positionné, celui-ci sera ajusté pour s'éloigner de sa position normale.
    Les autres contenus ne seront pas ajustés pour s’adapter aux espaces laissés par
    l’élément.
    Fixed:est positionné par rapport à la fenêtre d'affichage, ce qui signifie qu'il reste
    toujours au même endroit même si la page est déroulée. Les propriétés top, right,
    bottom et left sont utilisées pour positionner l'élément.
    Absolute: est positionné par rapport à l'ancêtre positionné le plus proche (au lieu
    de positionné par rapport à la fenêtre d'affichage, comme fixe). Toutefois; Si un
    élément absolu positionné n'a pas d'ancêtres positionnés, il utilise le corps du
    document et se déplace avec le défilement de page.
    Sticky: est positionné en fonction de la position de défilement de l'utilisateur. Un
    élément collant bascule entre relatif et fixe, en fonction de la position du défilement. Il
    est positionné par rapport jusqu'à ce qu'une position de décalage donnée soit
    atteinte dans la fenêtre - puis il "reste" en place (comme la position:
    @ Media CSS

    La règle @media, introduite dans CSS2, a permis de définir


    différentes règles de style pour différents types de média.
    Exemples: vous pouvez avoir un ensemble de règles de style
    pour les écrans d'ordinateur, un pour les imprimantes, un pour les
    périphériques de poche, un pour les périphériques de type
    télévision, etc. Malheureusement, ces types de supports n’ont
    jamais reçu beaucoup de support de la part des périphériques, à
    part le type de support d’impression.

    Vous aimerez peut-être aussi