Scribd Logo
Importer

Bienvenue sur Scribd !

  • Css 3 Partie 1

    Transféré par

    Rayen Hadjmassoud
    35 vues31 pages

    Titre original

    css3partie1.pptx

    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é
    35 vues31 pages

    Css 3 Partie 1

    Transféré par

    Rayen Hadjmassoud

    Droits d'auteur :

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

    Création de

    site web
    CSS3
    Cascading Style Sheets
    Les feuilles de styles
    Partie 1
    Introduction:
    L’un des objectifs majeurs des feuilles de style CSS est de séparer la
    structure d’un document de ses styles de présentation

    Une feuille de style CSS externe doit avoir l'extension .css


    C'est dans la feuille de style CSS que l'on va déclarer toute la mise en forme
    des pages : le positionnement des éléments, l'image de fond, les polices de
    caractère, les couleurs, etc.
    Celle-ci sera liée à chaque page html. Ainsi, lorsqu'on en modifiera un élément,
    cela se répercutera immédiatement sur toutes les pages html.
    Avantage :
     Obtenir une présentation homogène sur tout un site en faisant appel sur
    toutes les pages à une même définition de style
     
     Simplifie le code.

     Une maintenance de site beaucoup plus facile.

     Meilleure accessibilité : permet de produire des pages web respectueuses


    des normes du W3C, les pages seront donc accessibles pour la majorité des
    navigateurs (ordinateurs, tablettes, smartphones, smart TV, …).
    Application n°1:
    1- Lancer le logiciel BlueGriffon
    2- Créer une nouvelle page ‘’page1.html’’ puis saisir le code suivant :

    <! DOCTYPE html>


    <HTML>

    <HEAD>
    <meta charset="utf-8" />
    <TITLE>application 1 css</TITLE>
    <link rel="stylesheet" href="f1.css" />
    </head>

    <body>
    <h1>Un titre de niveau 1 (en bleu)</h1>
    <p>Un paragraphe (en rouge)</p>
    </body>

    </html>
    3- Créer une nouvelle page ‘’f1.css’’ puis saisir le code suivant :
    4- Ajouter les lignes suivantes au code :
    Syntaxe:

    Exemple:
    Schématiquement, une feuille de style CSS
    ressemble donc à cela :
    Quelques propriétés CSS
    La propriété font:

    Les attributs des polices sont :

    font-family : Arial, Times, Verdana, serif, ... Il est possible de positionner plusieurs
    polices.

    font-style : normal, italic, oblique

    font-weight : lighter, normal, bold, bolder ou encore valeur numérique de dimension


    La propriété font:
    font-size : small, medium, large, x-large ou encore valeur numérique de dimension

    font-variant : small-caps, normal

    font : permet d'agréger l'ensemble des attributs en une seule déclaration.

    Exemple :

    p{
    font: Verdana, Arial, bold italic 8px;
    }
    La propriété background (arrière-plan):
    Couleur de fond
    background-color: pink;
    Image de fond
    background-image: url(http://lorempixel.com/400/200/);
    position de fond
    background-position: 30px 30px;

    Pour simplifier le code pour ces propriétés, nous pouvons utiliser


    ces attributs sont combinés dans la même propriété.

    Exemple:

    background:#ffffff url('img_tree.png') no-repeat right top;


    La propriété text-align:
    La propriété border:

    Elle permet de définir les propriétés liées à la bordure

    Exemple:

    /* largeur | style | couleur */


    border: medium dashed green;
    La propriété border-width
    La propriété border-style:
    La propriété color:
    Quelques propriétés CSS:
    Application n°2:
    1- Lancer le logiciel BlueGriffon
    2- Créer une nouvelle page ‘’page2.html’’ puis saisir le code suivant :
    <! DOCTYPE html>
    <HTML>

    <HEAD>
    <meta charset="utf-8" />
    <TITLE>application css</TITLE>
    <link rel="stylesheet" href="f2.css" />
    </head>

    <body>
    <p>CSS 3 : c'est la dernière version, qui apporte des fonctionnalités
    particulièrement attendues <br>comme les bordures arrondies, les dégradés, les
    ombres, etc.
    </p>
    </body>

    </html>
    -3- Créer le fichier f2.css et ajouter les propriétés adéquates pour arriver au résultat suivant:
    Correction appl2:
    Application n°3:
    1- Lancer le logiciel BlueGriffon
    2- Créer une nouvelle page ‘’page3.html’’ puis saisir le contenu suivant :

    3- Changer la couleur du texte de tous les paragraphes


    4- Changer la couleur de fond de tous les titres de niveau 2
    Application n°3:
    Solution (code la page page3,html)
    <!DOCTYPE html>
    <html>
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title></title>
    </head>
    <body>
    <article>
    <h1>Mon article</h1>
    <section>
    <h2>Première section</h2>
    <p>Premier paragraphe</p>
    </section>
    <section>
    <h2>Deuxième section</h2>
    <p>Deuxième paragraphe</p>
    <p>Troisième paragraphe</p>
    </section>
    </article>
    </body>
    </html>
    Application n°4:
    1- Lancer le logiciel BlueGriffon
    2- Créer une nouvelle page ‘’page4.html’’ puis saisir le tableau suivant :

    3-Créer la page ‘’p4.css’’ pour mettre en forme le tableau


    Application n°4 (solution CSS):
    La page ‘’p4.css’’ contient le code suivant:

    table {
    border:2px solid black;
    margin:auto;
    }
    td, tr{
    border:1px solid #f02485;
    text-align:center;
    width:150px;
    height:50px;
    vertical-align:middle;
    text-align:center;}

    Vous aimerez peut-être aussi