Easy-Micro


LANGAGE Langage CSS
CSS et HTML

Incorporer du CSS dans du HTML

Il existe trois techniques pour incorporer les feuilles de style au document HTML :

CSS Méthode intraligne

  • Au niveau de l'élément auquel s'applique le style
    (ici le marqueur P) :

    <html>
    <head>
    </head>
    <body>
    <p style="font-family:verdana;font-size:8pt;color:#ff0000">
    Easy-Micro vous dit tout... ou presque!</p>
    </body>
    </html>

CSS Méthode imbriquée

  • Au niveau de la page HTML (utilisable par tous les éléments de la page) :

    <html>
    <head>
    <style type="text/css">
    p { font-family:verdana;font-size:8pt;color:#ff0000 }
    </style>
    </head>
    <body>
    <p>Easy-Micro vous dit tout sur le langage CSS...</p>
    <p>...ou presque :-)</p>
    </body>
    </html>

CSS Méthode liée (ou importée)

  • Au niveau externe (avec appel d'un fichier css qui contient le style montexte) :

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="mon_style.css" media="screen" />
    </head>
    <body>
    <p class="montexte">Easy-Micro vous dit tout sur le CSS... ou presque!</p>
    </body>
    </html>

    Cette dernière méthode est de loin la plus efficace car ce document CSS est utilisable par toutes les pages du site qui possèdent un lien vers cette feuille de styles. Ainsi, un seul document mémorise toute la mise en forme de votre site. Il n'est donc plus nécessaire de répéter la mise en forme dans chaque paragraphe du site.

    Exemple de fichier CSS

    Exemple de feuille de style CSS à coller dans le bloc-notes et à enregistrer sous l'extention css, soit "monstyle.css" :
    /* Style globale */
    body {
    margin-top:10px;
    color:#000000;
    background-color:#ffffee;
    background-image:url(images/mon_fond.gif);
    }

    /* Style local */
    .montexte {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 8pt;
    color: #000000;
    }

    Et voici comment appeler ce fichier à partir de chaque page (à coller dans le head) :

    <link rel="stylesheet" type="text/css" href="monstyle.css" media="screen" />

Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mercredi 27 mars 2019 - Semaine 13 - Saint Habib (Demain: Saint Gontran)
Aujourd'hui, c'est l'anniversaire de Kad Merad (1964-55 ans), comédien et humoriste français (2008: Bienvenue chez les Ch'tis, 2009: Le petit Nicolas...). Autre 27 mars: 2004 : mort à 96 ans de l'écrivain Robert Merle (né en 1908).
Haut de page Easy-Micro