Scribd Logo
Importer

Bienvenue sur Scribd !

  • 66 vues

    4-CSS Partie 1

    Transféré par

    Constan Tino
    Ce document décrit les techniques de développement d'applications hypermédia avec CSS. Il présente les différentes façons d'écrire des styles CSS, dont les feuilles de style internes, externes et en ligne, ainsi que la syntaxe et les sélecteurs CSS comme les classes et ID.

    Droits d'auteur :

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

    4-CSS Partie 1

    Transféré par

    Constan Tino
    66 vues24 pages
    Ce document décrit les techniques de développement d'applications hypermédia avec CSS. Il présente les différentes façons d'écrire des styles CSS, dont les feuilles de style internes, externes et en ligne, ainsi que la syntaxe et les sélecteurs CSS comme les classes et ID.

    Description originale:

    Notions de CSS partie 1

    Titre original

    4-CSS_partie_1

    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é ?

    Ce document décrit les techniques de développement d'applications hypermédia avec CSS. Il présente les différentes façons d'écrire des styles CSS, dont les feuilles de style internes, externes et en ligne, ainsi que la syntaxe et les sélecteurs CSS comme les classes et ID.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    66 vues24 pages

    4-CSS Partie 1

    Transféré par

    Constan Tino
    Ce document décrit les techniques de développement d'applications hypermédia avec CSS. Il présente les différentes façons d'écrire des styles CSS, dont les feuilles de style internes, externes et en ligne, ainsi que la syntaxe et les sélecteurs CSS comme les classes et ID.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    Vous êtes sur la page 1sur 24

    420-B16-RO : Techniques de

    développement d’applications
    hypermédia I
    4 – CSS partie 1

    Professeur : Sylvain Labranche

    [email protected]
    1
    2 Avant les CSS
     Lors de l’apparition du web, les principaux utilisateurs étaient
    des scientifiques, des enseignants et des militaires plus intéressés
    par le contenu des documents que par la présentation.
     Conséquence:
     Le HTML visait à définir le contenu d'un document
     Le HTML n'a jamais été destiné à contenir des éléments de mise en forme
    d'un document.
     À partir du HTML 3.2, on a ajouté des balises de gestion de la
    présentation comme <font> et des attributs de couleur.
     Conséquences:
     Le développement des pages web est devenu long et compliqué: les
    mêmes informations de mise en forme sont ajoutées à chaque page.
     Exemple: utilisation de la balise font pour définir une police de
    caractère. Nous devions écrire ceci pour chaque balise !
     <p><font face= "Comic Sans MS" color= "#0000dd" size= "4" >
    Utilisation de la balise dépréciée font
    </font></p>
    Apparition des feuilles de
    3 style
     Les feuilles de style sont apparues en 1996 pour améliorer le
    développement des pages Web. Elles visent à séparer la
    structure d’un document HTML et sa présentation:
     prises en charge à partir de HTML4
     la structure dans un fichier .html, et idéalement la présentation
    dans un fichier de style .css
     Les feuilles de style sont un langage de présentation des
    pages web. Elles portent sur
     l’alignement;
     le positionnement des éléments;
     les polices de caractères;
     les couleurs;
     les marges et espacements;
     les bordures;
     les images de fond, etc.;

     Le langage de feuilles de style le plus fréquemment employé


    est le CSS (en anglais “Cascading Style Sheets”) développé
    parW3C (le World Wide Web Consortium).
     Les CSS ne font pas partie du langage HTML; c'est un
    développement à part.
    4 3 façons d’écrire des styles

     Feuilles de styles internes


     dans l’entête, ou <head>, du document HTML
     Feuilles de style externes au document
    HTML(recommandé)
     fichier à part .css
     Style en ligne
     à l’intérieur d’une balise HTML via un attribut style (la
    moins recommandée)
    5 Feuille de style interne
     Le code de la feuille de style CSS sera regroupé dans l'entête du
    document, soit entre <head> et </head>.
    Exemple: Fichier HTML style_interne.html
    Définir la couleur de fond et d’écriture du corps de la page HTML. Le syle
    s'applique à la balise body :

     La ligne 7: <style type="text/css">


     indique qu'il s'agit d'une feuille de style et qu'elle est écrite en CSS
    ("text/css")
     La ligne 8: body {.. } indique que le style s’applique à l'élément "body".
     Tous les éléments p, li, h1,h2… hériteront des propriétés de body
    6 Feuille de style externe au
    document HTML
     L’avantage de mettre la feuille de style dans un fichier à part est que plusieurs pages du site
    peuvent partager le même style.
     L’extension du fichier est .css
     Attention! Dans un fichier CSS, on ne doit trouver que les sélecteurs CSS (pas de balises HTML).
    Fichier CSS: styles\style_bleu_jaune.css

    Ligne1: @charset "utf-8" :

     Indique le codage de caractères utilisé.

     Elle est importante si les sélecteurs CSS utilisent des noms d'éléments contenant des caractères non ASCII.

     Cette instruction doit être la toute première instruction et ne doit être incluse que dans les feuilles de style
    externes.

    Ligne 2: /* CSS Document */

     est un commentaire
    7 Feuille de style externe au
    document HTML (suite)
     Lier la feuille de style à un document HTML
     Fichier HTML appliquer_style_bleu_jaune.html.html

     Pour lier la feuille de style à un document HTML, on utilise l’élément link. Voici la syntaxe
     <link rel= "stylesheet" type= "text/css" href= "styles/SsyleBleuJaune.css" />

     link indique au navigateur que ce qui suit est un lien


     rel="stylesheet" précise que le lien est relatif à une feuille de style
     href="styles/StyleBleuJaune.css" précise la localisation du fichier de la feuille de style à
    appliquer.
    8 Quelle méthode choisir?

    Style interne: le
    style est répété
    dans chaque
    document html

    Style externe: défini


    une seule fois dans
    un document CSS

    http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mettre-en-place-le-css
    9 Syntaxe d'une règle CSS

     Les feuilles de styles CSS sont constituées de règles.


     Une règle CSS comporte 3 éléments: sélecteur, propriété et
    valeur
     référencent : http://www.w3schools.com/css/css_syntax.asp

     Sélecteur(selector): indique au navigateur un élément du code


    HTML affecté par la règle.
     Propriété(property): représente l’aspect de l’affichage que l’on
    souhaite changer.
     Valeur(value): représente la valeur de la propriété de style.
     Chaque instruction (couple propriété/valeur) doit se terminer par un
    point virgule .
    1
    0 Héritage

     Une règle css appliquée à une balise est appliquée


    aussi à toutes les balises enfants.
     Ainsi, si background-color: blue; est appliquée à body,
    toutes les balises à l’intérieur de body auront aussi leur
    fond bleu.
     Par contre, si une balise enfant donne une valeur
    différente pour une propriété, c’est cette dernière qui
    l’emporte.
     Ainsi, si background-color: blue; est appliquée à body et
    background-color: red aux paragraphes, les
    paragraphes seront en rouge.
     Une règle CSS appliqué inline l’emporte sur toutes les
    autres.
    11 Appliquer le même style à
    un groupe de balises
    Un groupe est composé de plusieurs balises
    séparées par des virgules
    Appliquer des styles différents à
    12 une même balise
     Pour affecter des styles différents à une
    même balise, on utilise:
     l'attribut class (avec le .)
    Ou bien
     l'attribut id (avec le #)

    Exemple:
     Certains paragraphes en gras, d'autres
    en italiques
    13
    Sélecteur de classe
    14
     L'attribut class peut être utilisé dans n'importe quelle balise.
    Sa valeur sert à identifier la balise comme appartenant à
    un groupe. Ce nom doit commencer par une lettre.
     <p class= "gras" >Paragraphe en gras</p>
     Pour définir le style d'une classe, on met un point devant le
    nom:
     .gras{ font-weight:bold; }
     La syntaxe est:
     .nomDeClasse{ propriétéDeStyle: valeur;}
    Fichier: selecteur_class1.html
     Les éléments p des classes gras et italic héritent du style
    défini pour l’élément générique p:
    Ils ont les mêmes règles CSS que p et celles définies par une
    class ou un id se rajoutent.
    15 Sélecteur de classe
     On peut également utiliser le sélecteur
    de classe pour spécifier un style à des
    balises HTML différentes.
     Exemple : tous les éléments HTML avec
    class = "center" seront alignés au centre.
     Fichier: selecteur_class2.html
    16 Question

     Comment appliquer les deux classes gras et italic au


    paragraphe ci-dessous?
     <p> Paragraphe en gras et en italique</p>

     Nous ferons le test dans le fichier


    utilisation_classe.html
    17 Réponse
    <p class= "italic gras">paragraphe en gras et
    italique</p>
    Sélecteur d'identifiant: id
    18
     Le sélecteur id permet de définir un style pour un
    seul et unique élément de la page. Cet id doit
    être bien entendu unique.
     La syntaxe est:
     #identifiant{ propriété: valeur;}

     Exemple: selecteur_id.html
    19 Récapitulatif

     class et id servent tous deux pour définir


    des styles.
     Une class est définie par .nom{} et peut
    s’appliquer à plusieurs balises du même
    type ou de types différents.
     Un id est défini par #nom{} et ne
    s’applique qu’à une seule balise.
    20 La balise universelle: div
     class et id sont des attributs, donc ne sont applicables que sur
    des balises. Comment, alors, appliquer un style à un bloc qui
    n'est pas entouré par des balises?
     Réponse: la balise div crée des blocs particuliers de balises qui
    ne sont pas entourés de balises pour appliquer une
    présentation particulière.
     Exemple: balise_div.html
    21 La balise universelle: span
     La balise span fonctionne comme une balise div mais pour
    une partie d’un texte.
     Exemple: mettre en forme des mots
     Exemple: balise_span.html
    2
    2 Sélecteurs avancés
    Il est possible de combiner des sélecteurs pour avoir un
    comportement plus spécifique
     * : sélecteur universel
     S’applique à toutes les balises
     A B : une balise contenue dans une autre
     ul li : Toutes les balises li contenues dans une ul.
     ul ul: Seules les listes contenues dans une liste!
     A + B : une balise qui en suit une autre
     h1+p: Seulement les p suivant un h1
     A[attribut] : une balise qui possède un attribut
     p[id]: Juste les paragraphes qui ont un id;
     A.classe: Une balise A qui est de la classe classe
     li.test: Les balises li, mais seulement celles de la classe test
     Voir selecteursAvances.html
    2
    3 Propriétés communes

     font-size: taille en pixel (30px) ou relative (small, large,


    etc.)
     font-family: police de caractère
     font-style: italic, font-weigth:bold
     text-decoration: blink, underline, line-through, overline
     text-align: center, justify, right
     background-color:
     color:
     background-image: url("image.png");
    2
    4 Sources

     Les diapositives du cours sont fortement inspirées des


    cours suivants sur OpenClassrooms:
     http://openclassrooms.com/courses/comprendre-le-web
     http://openclassrooms.com/courses/apprenez-a-creer-
    votre-site-web-avec-html5-et-css3
     http://openclassrooms.com/courses/dynamisez-vos-sites-
    web-avec-javascript
     http://openclassrooms.com/courses/concevez-votre-
    site-web-avec-php-et-mysql

    Vous aimerez peut-être aussi