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 ]
Mardi 23 juillet 2019 - Semaine 30 - Sainte Brigitte (Demain: Sainte Christine)
Aujourd'hui, c'est l'anniversaire de Daniel Radcliffe (1989-30 ans), acteur britannique (Harry Potter). Autre 23 juillet: 1983 - Atterrissage forcé sans moteur du vol 143 Air Canada, surnommé le Planeur de Gimli.
Haut de page Easy-Micro