[LES CSS] la base

Discussion dans 'Web, design' créé par djib, 1 Avril 2004.

Statut de la discussion:
Fermée.
  1. Offline
    djib Elite
    Bon ben, chose promise ...

    Le CSS (Cascading Style Sheets) est un fichier contenant des imformation de mise en page. Lors de la création d'une page web on peu ne pas inscrire les styles et les options de mise en page directement dans le code mais les inscrire dans un autre fichier.
    Le plus facile est d'expliquer avec un example.

    On crées une page oueb (sans mise en page pour l'instant):
    Code:
    <html>
    <head>
    <title>ma page</title>
    </head>
    <body>
    Titre <br>
    Sous-Titre 1 <br>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sem mauris, porttitornec, tristique ac, vehicula quis, risus. Ut pretium dui non dui. Ut a ipsum vitaetortor aliquet adipiscing. Donec vel erat. Quisque lacus. Pellentesque nunc enim, rutrum a, tempor faucibus, bibendum at, dolor. <br>
    Sous-Titre 2 <br>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sem mauris, porttitor nec, tristique ac, vehicula quis, risus. Ut pretium dui non dui. Ut a ipsum vitae tortor aliquet adipiscing. Donec vel erat. Quisque lacus. Pellentesque nunc enim, rutrum a, tempor faucibus, bibendum at, dolor.
    </body>
    </html>
    
    Maintenant on va définir les styles. On va en créer 3. Un pour le Titre, un pour les sous-titres et un pour le bodytext. Chaque style aura un "nom". Un style ce définit de cette manière :
    Code:
    .nom_du_style {
    	caractéristique;
    }
    On crées le 1er style. Le style pour le titre. On va l'appeller ".titre" et aura pour caractéristiques d'avoir une taille de texte "x-large", d'être en Times et d'être en majuscules.
    Code:
    .titre {
    	font-size: x-large;
    	font-family: "Times New Roman", Times, serif;
    	text-transform: uppercase;
    }
    De la même manière on crées les styles pour les sous-titres (on va l'appeller ".s-titre") et pour le bodytext (on va l'appeller ".body")
    Code:
    .titre {
    	font-size: x-large;
    	font-family: "Times New Roman", Times, serif;
    	text-transform: uppercase;
    }
    .s-titre {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	text-decoration: underline;
    	color: #333333;
    }
    .body {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: smaller;
    }
    On sauvegardes ce fichier en l'appelant par example "style.css".
    Maintenat on retournes a la page web. Premièrement il faut indiquer que le style de la page dépends d'un fichier ccs externe, a savoir "style.css". Pour ça on va rajouter :
    Code:
    <link href="style.css" rel="stylesheet" type="text/css">
    entre les balises <head> et </head>.
    Le code de notre page est donc :
    Code:
    <html>
    <head>
    <title>ma page</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    Titre <br>
    Sous-Titre 1 <br>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sem mauris, porttitor nec, tristique ac, vehicula quis, risus. Ut pretium dui non dui. Ut a ipsum vitae tortor aliquet adipiscing. Donec vel erat. Quisque lacus. Pellentesque nunc enim, rutrum a, tempor faucibus, bibendum at, dolor. <br>
    Sous-Titre 2 <br>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sem mauris, porttitor nec, tristique ac, vehicula quis, risus. Ut pretium dui non dui. Ut a ipsum vitae tortor aliquet adipiscing. Donec vel erat. Quisque lacus. Pellentesque nunc enim, rutrum a, tempor faucibus, bibendum at, dolor.
    </body>
    </html> 
    Il ne reste plus qu'a attribuer les styles. Pour ça on va utiliser les balises <span class="nom_du_style">.
    Par example pour attirbuer sons style au titre on procède comme suit :
    Code:
    <span class="titre">Titre</span>
    Ce qui donnes pour toute la page :

    Code:
    <html>
    <head>
    <title>ma page</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <span class="titre">Titre</span><br>
    <span class="s-titre">Sous-Titre 1</span> <br>
    <span class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sem mauris, porttitor nec, tristique ac, vehicula quis, risus. Ut pretium dui non dui. Ut a ipsum vitae
    tortor aliquet adipiscing. Donec vel erat. Quisque lacus. Pellentesque nunc enim, rutrum a, tempor faucibus, bibendum at, dolor. </span><br>
    <span class="s-titre">Sous-Titre 2</span> <br>
    <span class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sem mauris, porttitor nec, tristique ac, vehicula quis, risus. Ut pretium dui non dui. Ut a ipsum vitae
    tortor aliquet adipiscing. Donec vel erat. Quisque lacus. Pellentesque nunc enim, rutrum a, tempor faucibus, bibendum at, dolor.
    </span>
    </body>
    </html>
    Voila. C tout. J'espère avoir été clair et n'avoir pas dis trop de conneries.
    Il faut être conscient que ce que je viens d'expliquer la ne représentes qu'une infime partie de tout ce que proposent les CSS.
    djib, 1 Avril 2004
    #1
  2. Offline
    MbK_ Etudjant
    merci bien. j'imprime tout ca et jle lis a mon bureau :D
    MbK_, 1 Avril 2004
    #2
  3. Online
    Esta Boy's dream
    thx . j'en prend note :wink:
    Esta, 1 Avril 2004
    #3
  4. Offline
    Tiben Touriste
    une infime partie oui :D
    et pour ceux que ca interesse vs devez passer par l'exellent http://www.openweb.eu.org

    have fun a tous
    Tiben, 2 Avril 2004
    #4
  5. Offline
    pyrO arN[pounz]
    dsl mais j'ai fait copier coller pour le garde bien précieusement :wink:
    pyrO, 2 Avril 2004
    #5
Statut de la discussion:
Fermée.