4 votes

Est-ce la bonne façon de styliser un document HTML à l'aide de CSS ?

Je suis nouveau dans le monde du codage et du CSS et j'ai créé une page d'exemple, mais je ne sais pas si je le fais correctement, c'est-à-dire si l'utilisation de mon CSS est valide. J'ai l'impression d'obtenir la mise en page requise, mais j'aimerais savoir si je commets des erreurs.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />

    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content= "" />

    <title>Example</title>

    <base href="" />

    <link rel="stylesheet" type="text/css" href="" />

    <style type="text/css">

    body {

        margin: 0;
        padding: 0;

    }

    #wrapper {

    }

    #header {

        background-image: url('images/bg-inner-page.gif');
        height: 200px;

    }

    #logo {

        position: relative;
        top: 50px;
        left: 100px;

    }

    #topnav {

        position: relative;
        top: 35px;
        left: 300px;

    }

    #content {

        background-color: orange;

    }

    #footer {

        background-color: blue;

    }

    </style>
</head>

<body>

    <div id="wrapper">
        <div id="header">
            <div id="logo">
                logo
            </div>

            <div id="topnav">
                nav
            </div>
        </div>
        <div id="content">content</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

3voto

Blender Points 114729

En cas de doute, utilisez la fonction Validateur W3C . Copiez et collez votre code dans le formulaire et il vous indiquera ce qui ne va pas.

Pour moi, il s'agit simplement d'une indication <meta> étiquette :

<meta http-equiv="Content-Type" content="text/html" charset=UTF-8" />

Vous avez oublié le début de citation avant UTF-8 .

Mais votre CSS est tout à fait correct. Tant qu'il est valide et qu'il fonctionne dans tous les navigateurs, ne vous inquiétez pas.

2voto

Karl Nicoll Points 5915

Votre CSS semble correct, il n'y a pas de problème, mais j'ai deux suggestions à faire :

1) Déplacez votre CSS dans un fichier séparé. Cela permet aux navigateurs de le mettre en cache et de réduire votre utilisation de la bande passante (et la leur). Votre fichier HTML est également plus petit, ce qui le rend plus facile à lire.

2) Bien que les sélecteurs d'ID soient tout à fait acceptables, j'ai tendance à préférer les sélecteurs de classe (par ex. .class-selector { ... } ) au lieu de sélecteurs d'identifiants (par exemple #id-selector { ... } ) car vous pourriez avoir besoin d'une deuxième div enveloppante plus tard dans votre code, et vos identifiants doivent être uniques. L'utilisation de l'attribut class vous permettra d'avoir deux (ou plus) enveloppes avec le même style dans votre code (ce qui fait partie de la beauté de CSS). Plus d'une fois, j'ai vu des gens créer des feuilles de style qui se répétaient encore et encore parce qu'ils n'utilisaient que des sélecteurs d'ID pour styliser le contenu, ce qui va à l'encontre de l'intérêt des CSS.

1voto

Vincent Ramdhanie Points 46265

Tant que vous obtenez le résultat souhaité dans les différents navigateurs, tout va bien. Cependant, vous pouvez placer votre code CSS dans un fichier externe et créer un lien vers celui-ci. De cette manière, les mêmes styles peuvent être appliqués à plusieurs pages. Je vois que vous avez une balise de lien sans valeur d'attribut href, il suffit donc d'indiquer le nom du fichier CSS.

0voto

SIFE Points 2238

Votre code semble correct à l'exception de cette ligne :

<meta http-equiv="Content-Type" content="text/html" charset=UTF-8" />

UPDATE : Vous oubliez de mettre un point-virgule après html et avant charset comme ceci :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Il est conseillé de séparer le code CSS du code HTML afin de réduire la taille de la page et d'économiser la bande passante. Il y a quelques lignes que vous pouvez éviter comme :

 <meta name="keywords" content="" />
 <meta name="description" content="" />
 <meta name="author" content= "" />

 <base href="" />

Évitez cette ligne si vous n'avez pas de fichier CSS externe.

<link rel="stylesheet" type="text/css" href="" />

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X