Scribd Logo
Importer

Bienvenue sur Scribd !

  • 2 - Séances CSS

    Transféré par

    sodkiabla4
    7 vues54 pages

    Titre original

    2- Séances CSS

    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

    Droits d'auteur :

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

    2 - Séances CSS

    Transféré par

    sodkiabla4

    Droits d'auteur :

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

    Introduction TO CSS

    Hicham El Moubtahij
    Filière : Génie Informatique, EST d’Agadir
    Année Universitaire : 2023 - 2024
    Plan:
    1. Un fichier CSS et plusieurs Pages Web
    2. id et class attribute
    3. Propriétés de Style Communs
    4. Style d’un élément ou d’un groupe d’éléments.
    5. Style pour un tableau et pour un formulaire
    6. Exemple d’application
    2
    Eléments && Attributs Explorés
    • <link href = ‘ fichier.css ’
    rel = ‘ stylesheet ’
    type = ‘ text/css ’ > • < div style = ‘background : yellow ’>
    this is a div with a yellow back
    • <style>
    ground
    -----------
    </ div >
    -----------
    </ style >
    3
    On Aura Besoin de Style

    • On aura besoin d’apprendre les styles

    • Sans style, notre page web “looks visually boring”

    • Dans la programmation web, le langage pour les styles est

    appelé CSS Cascading Style Sheets

    4
    Concept Général
    • On sépare entre l’information dans la page web et les propriétés

    visuelles utilisées pour l’affichée

    Information + Style = Visual Output

    5
    Un Fichier CSS, plusieurs Pages Web
    • Un fichier CSS peut être utilisé par plusieurs pages web

    6
    Lié un Fichier CSS : exemple 1

    7
    Simple HTML File : exemple 2

    8
    Fichier CSS Simple : exemple 2

    9
    Résultat : exemple 2

    10
    Propriétés de Style Communs
    • Color : for text color
    • Background : for background color
    • Font-family : for text fonts (Arial, Times New Roman, etc.)
    • Font-size : for text sizes
    • Text-align : for text alignment
    • There is more …

    11
    Définir le Style en Haut de la Page Web

    12
    Exemple

    13
    Résultat

    14
    Utiliser un id dans les styles
    • Chaque élément peut avoir son propre attribut “id” pour s’identifier
    • “id” n’a pas d’effet sur l’affichage de la page

    15
    Avant l’Utilisation de Style

    16
    Utiliser id pour le Style

    • On utilisera ‘#id’ pour sélectionner la règle de style

    • Exemple : #theElementID {color: red}

    17
    id dans la Partie <head>

    ???

    18
    id dans la Partie <head>

    19
    Résultat

    20
    Utiliser les classes

    • Définir son propre règle

    • Appliquer cette règle pour n’importe quel élément

    • Cette même règle peut être utiliser pour plusieurs éléments

    21
    Exemple de classes

    22
    Résultat

    23
    Utiliser Plusieurs classes
    Un élément peut utiliser plusieurs classes

    24
    Résultat

    25
    Plus de Détails sur les Styles
    Objectifs

    • Utiliser le style “inline”

    • Se familiariser avec les pseudo-classes

    • Se familiariser avec les propriétés des règles de style

    27
    Propriétés de Styles
    Pseudo-classes link
    visited
    hover
    active
    empty

    28
    Le Style “Inline”

    • Une règle de style directement appliquée à un élément


    particulier

    29
    Exemple

    30
    Résultat

    31
    Contrôle de Contexte

    • On peut appliquer une règle de style à un contexte bien


    particulier
    ul li {color: red}

    • Dans ce cas, la règle de style est appliquée à tous les “li” qui sont
    à l’intérieur d’une “ul”

    32
    Exemple

    33
    Résultat

    34
    Pseudo-Classes

    • Les pseudo-classes sont des classes avec une sorte


    d’intelligence
    h1: hover {color: red}

    • Dans ce cas, lorsqu’on déplace la souris sur n’importe quel


    élément “h1”, le texte devient temporairement rouge

    35
    Pseudo-Classes ++

    • Link: Tous les liens


    a: link {color: red} (any link will be red}
    • Visited: lien qui a été visité
    a: visited {color: red}

    • Active: lien entièrement suivi (active)


    a: active {color: red}
    • empty: élément vide
    a : empty {color: red}
    Etc. 36
    Exemple

    37
    Résultat

    38
    Tableaux
    Eléments Explorées

    • The structure <table> <thead> <tbody>

    • The header <th>

    • The body <tr> <td>

    40
    Propriétés de Style Explorées

    • Les bordures border

    • La largeur du Tableau width

    • La hauteur du Tableau height

    • Alignement Vertical vertical-align

    • Padding d’un Tableau padding


    41
    Exemple

    42
    Résultat

    • Mais, pas de style jusqu’à maintenant 43


    Propriétés de Style Communs

    • Color : pour la couleur du texte


    • Text-align : pour l’alignement horizontal du texte
    • Border : pour la bordure du tableau
    • Width : pour la largeur du tableau
    • Height : pour la hauteur du tableau
    • Vertical-align : pour l’alignement vertical du texte
    • Padding : pour le “padding” du tableau
    • Autres …
    44
    Exemple 1 – Utilisation des Styles

    45
    Exemple 1 – Utilisation des Styles

    46
    Résultat - Padding avec 15px

    47
    Exemple – Règles de Classes

    48
    Exemple – Règles de Classes

    49
    Résultat

    50
    Exemple – Positionnement

    51
    Exemple – Positionnement

    52
    Résultat

    53
    Conclusion
    • Introduction au Style
    • CSS pour les styles
    • Se familiariser avec le concept des styles avec HTML
    • Créer les différents types des règles de style
    • Utiliser les styles pour contrôler le style de votre page
    web
    54

    Vous aimerez peut-être aussi