Scribd Logo
Importer

Bienvenue sur Scribd !

  • Css PDF

    Transféré par

    ر' حيل
    67 vues5 pages
    exemple Tp CSS

    Titre original

    css.pdf

    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
    exemple Tp CSS

    Droits d'auteur :

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

    Css PDF

    Transféré par

    ر' حيل
    exemple Tp CSS

    Droits d'auteur :

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

    UNIVERSITE DE CARTHAGE DEPARTEMENT

    FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE

    Classes : SEIOT2 A-U : 22/23


    Matière : WEB
    Enseignant : Med. A. Dahdeh Nb pages : 5

    TP n°2
    Travail demandé
    1. Créez une feuille de style nommée « monstyle.css » et la relier à votre page web.
    2. Le résultat souhaité est illustré par la figure ci-dessous

    a) Modifiez le style de la balise <body> pour :


    - Changer la couleur de l’arrière plan : #E6E6FA
    - Fixer sa largeur à 1335px et l’aligner au centre de la page web.
    b) Décrire le bloc <nav> avec ce style :
    float:left;
    width:200px;
    height:500px;
    background:#B1B6E4;
    margin-right:17px;
    c) Décrire le blog <article> avec ce style :
    float:left;
    width:750px;
    height:500px;
    background:#8791EB;
    margin-right:17px;
    d) Decrire le bloc <aside> avec ce style :
    float:left;
    width:250px;
    height:500px;
    background:#949ACE;
    e) Ajouter une marge de 50px à <header> et centrer le titre.
    f) La partie <footer> à une couleur de background égale à #6669C1, une hauteur de
    100px, une largeur de 1234 et une marge de 50px.
    3. Ecartez les titres du bloc <article> du bord gauche de 10px, de même pour les titres du
    bloc <aside>.
    4. Modifiez le style de la balise <p> dans le bloc <article> afin d’écartez les paragraphes du
    bord gauche de 20px, du bord droit de 10px et alignement du texte : justifié.
    5. Copiez le style ci-dessous dans votre fichier CSS et complétez les balises dans votre page
    HTML avec leur identifiant correspondant (id).
    #content{
    margin: 50px;
    }
    #menu {
    margin: 20px;
    padding: 20px 10px 20px 10px;
    list-style: none;
    }

    #menu a {
    display: block;
    height: 1%;
    padding: 6px 10px 6px 10px;
    line-height: 1.5;
    font-size: .9em;
    text-decoration: none;
    }
    #menu a:hover, #menu a:focus {
    background: #8791EB;
    }

    6. Créez une classe liens pour modifier le style des puces de la liste des liens utiles en carré.
    7. Modifiez le style du texte des paragraphes de la zone centrale.
    8. Editez le fichier CSS afin d’appliquer votre propre style.
    9. Valider votre page par le validateur HTML : http://validator.w3.org.

    2
    Annexe

    Type Propriété Valeur Description

    Police précise (Arial, Times,


    Verdana ...) Définit un nom de police ou
    font-family
    Famille (serif, fantasy, une famille
    monospace)

    font-style normal, italic, oblic Définit le style d'écriture

    - normal, bold, light, bolder,


    font-weight lighter Définit l'épaisseur de la police
    Police - valeur numérique

    xx-small, x-small, small, medium,


    font-size large, x-large, xx-large Définit la taille de la police
    taille en points (pt), cm, %

    font-variant normale, small-caps Définit une variante

    Raccourci permettant de mettre


    font {font: bold italic}
    toutes les propriétés

    text-align left, center, right,justify Définit l'alignement du texte

    text-indent en pouces (in), en cm, ou en % Définit un retrait

    blink, underline, line-through,


    overline ou none (clignotant,
    text-decoration Définit une décoration
    souligné, barré, surligné ou
    aucune)

    uppercase, lowercase, capitalize


    text-transform (majuscule, minuscule, première Définit la casse du texte
    lettre en majuscule)
    Style
    color "#RRGGBB" Définit la couleur du texte

    En points (pt), pouces (in), en cm,


    word-spacing Définit l'espace entre les mots
    en pixels (px), ou en %

    En points (pt), pouces (in), en cm,


    line-height Définit l'interligne
    en pixels (px), ou en %

    Définit la longueur d'un


    En points (pt), pouces (in), en cm,
    width élément de texte ou d'une
    en pixels (px), ou en %
    image

    3
    En points (pt), pouces (in), en cm, Définit la hauteur d'un élément
    height
    en pixels (px), ou en % de texte ou d'une image

    white-space normal, pre, nowrap Espacement ou blanc

    background-
    "#RRGGBB" Définit la couleur du fond
    color

    background-
    URL Définit l'image d'arrière-plan
    image

    background- repeat, repeat-x, repeat-y, no- Définit la façon de répéter


    repeat repeat l'arrière-plan

    Arrière- Spécifie si l'image reste fixe


    background-
    plans scroll, fixed avec les déplacements de
    attachment
    l'écran

    - top, center, bottom, left, center


    background- ou right Position de l'image par rapport
    position - En points (pt), pouces (in), en au coin supérieur gauche
    cm, en pixels (px), ou en %

    {background: test.jpg fixed Raccourci pour les propriétés


    background
    repeat} d'arrière-plan

    En points (pt), pouces (in), en cm,


    margin-top Valeur de la marge supérieure
    en pixels (px), ou en %

    En points (pt), pouces (in), en cm,


    margin-right Valeur de la marge de droite
    en pixels (px), ou en %

    En points (pt), pouces (in), en cm,


    Marges margin-bottom Valeur de la marge inférieure
    en pixels (px), ou en %

    En points (pt), pouces (in), en cm,


    margin-left Valeur de la marge de gauche
    en pixels (px), ou en %

    Raccourci pour les propriétés


    margin
    de marge

    border-top- En points (pt), pouces (in), en cm,


    Epaisseur du bord supérieur
    width en pixels (px), ou en %

    border-right- En points (pt), pouces (in), en cm,


    Epaisseur du bord droit
    width en pixels (px), ou en %
    Bordures
    border-bottom- En points (pt), pouces (in), en cm,
    Epaisseur du bord inférieur
    width en pixels (px), ou en %

    border-left- En points (pt), pouces (in), en cm,


    Epaisseur du bord gauche
    width en pixels (px), ou en %

    4
    En points (pt), pouces (in), en cm, Raccourci vers les propriétés
    border-width
    en pixels (px), ou en % d'épaisseur de trait

    border-color "#RRGGBB" Couleur de la bordure

    border-
    collapse ou separate effet "3d" ou non
    collapse

    En points (pt), pouces (in), en cm, Raccourci vers les propriétés


    border
    en pixels (px), ou en % de bordure

    En points (pt), pouces (in), en cm, Ecartement entre l'élément et le


    padding-top
    en pixels (px), ou en % bord supérieur

    En points (pt), pouces (in), en cm, Ecartement entre l'élément et le


    padding-right
    en pixels (px), ou en % bord droit

    padding- En points (pt), pouces (in), en cm, Ecartement entre l'élément et le


    bottom en pixels (px), ou en % bord inférieur

    En points (pt), pouces (in), en cm, Ecartement entre l'élément et le


    padding-left
    en pixels (px), ou en % bord gauche

    Raccourci vers les propriétés


    padding
    d'écartement

    Type de puces et de
    list-style-type disc, circle ou square
    numérotation

    list-style- Permet de remplacer les puces


    URL
    image par une image
    Listes Spécifie si les puces sont à
    list-style-
    inside ou outside l'intérieur ou à l'extérieur du
    position
    texte

    Raccourci vers les propriétés


    list-style
    de liste

    Vous aimerez peut-être aussi