Cours de création de site web





Accueil

Informations

Html

Css

Le langage CSS :

  • CSS est l'abréviation de Cascading Style Sheets (feuilles de style en cascade). C'est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Introduit au milieu des années 1990, le CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

    Le CSS peut être introduit de 3 façons : soit dans le fichier HTML entre les balises head, soit directement dans les balises HTML, soit comme dans la majorité des cas, dans un fichier à part (d'extension .css) à placer avec les autres fichiers HTML. Ce qui donne alors dans ce dernier cas une sorte de bibliothèque de styles dans laquelle le HTML vient se servir pour effectuer sa mise en page. Le design du site n'est alors plus présent dans le fichier HTML mais uniquement dans le fichier CSS, la structure et la présentation sont gérées séparément.
    Le CSS facilite donc la portabilité du contenu car une fois le contenu HTML correctement mis en place, il devient facile de changer l'apparence de son site. On n'a plus besoin d'appliquer ses modifications dans chaque page concernée, mais uniquement dans le fichier CSS, tout est centralisé.

    Ainsi, non seulement la gestion du site est plus pratique, mais en plus le code HTML est réduit en taille et en complexité. Pour le référencement, c'est un grand plus : les feuilles de styles simplifient le code HTML et améliorent la vitesse de chargement de la page.


  • Le lien entre le HTML et le CSS se fait dans la balise <head> du fichier HTML à l'aide de la balise <link> :

    <link rel="stylesheet" media="screen" type="text/css" title="fichiercss" href="fichier.css" />


  • Le fichier CSS se compose ainsi :
    - des noms de balises
    - les propriétés, les effets de style de la page
    - les valeurs attribuées à chaque propriété
    Exemple de fichier css :
    P
    {
    color:red;
    font-size:20px;
    }

    Ici, on applique à toutes les balises <p> la couleur rouge et la taille de police 20.

    Les balises peuvent être présentées comme ceci, mais elles peuvent aussi ne tenir que sur une seule ligne (c'est selon ses préférences) :

    p {color:red;font-size:20px;}


    Il est possible de modifier plusieurs balises en même temps, en les faisant se succéder par des virgules :

    p, h1, h2 { ... }


    Des commentaires peuvent être insérés entre les codes /* et */, comme ceci :

    p{color:red; /* Les paragraphes sont rouges. */ font-size:20px;}



  • Les classes et les ID :

    Jusque là, on s'est contenté de modifier des balises déjà existantes, mais leur nombre est limité. Pour y remédier, nous allons créer des classes et des ID qui correspondront à un style que l'on aura défini nous-mêmes.
    On peut ainsi en créer à l'infini selon nos besoins.

    Exemple de classe :
    .titre2
    {
    font-size:18px;
    text-decoration:underline;
    }


    J'ai créé ici une classe que j'ai appelée "titre2" et à laquelle j'ai attribuée les propriétés suivantes : une police de taille 18 et un soulignage.
    C'est ainsi que j'ai obtenu le titre "Les classes et les ID" ci-dessus.

    À la différence des balises standardes, pour définir une classe, on ajoute un point devant le nom de celle-ci.

    Exemple d'ID :
    #cadre
    {
    width:528px;
    margin:5px;
    padding:10px;
    background-color:#F3F6FB;
    border:1px solid #000000;
    }


    Voici maintenant l'ID qui me permet d'afficher ces cadres bleu clairs. Les ID sont définis par un diez dans le fichier CSS.


  • Application dans le HTML :

    Pour utiliser maintenant ces nouveaux éléments dans le code HTML, nous allons utiliser 2 balises : <span> et <div>

    Les balises <span> sont des balises inlines.
    Elles correspondent donc aux changements de couleur/taille/gras/italique, et seront associées aux classes.

    Les balises <div> sont des balises block.
    Elles vont définir la structure de la page web (cadres, positionnement...) et seront associées aux ID.


    Voici les éléments du fichier CSS que nous allons utiliser pour l'exemple :

    .italique{font-style:italic;}
    .red{color:red;}

    #alinea1{text-indent:40px;}


    Maintenant, l'application dans le code HTML :

    Voici un exemple d'utilisation du CSS avec 2 classes et 1 ID.<br>
     Quelques mots deviennent <span class="red">rouges</span>, d'autres deviennent <span class="italique">italiques</span>.<br>
    <div id="alinea1">Et cette phrase est décalée de 40 pixels.</div>


    Et le résultat obtenu :

    Voici un exemple d'utilisation du CSS avec 2 classes et 1 ID.
    Quelques mots deviennent rouges, d'autres deviennent italiques
    Et cette phrase est décalée de 40 pixels.


  • Supplément :

    Il est possible d'effectuer des modifications spécifiques (de balises dans une balise).

    Par exemple, pour faire en sorte que seuls les citations dans les balises h3 changent de couleur, on fera :

    H3 q
    {
    color:red;
    }

    Ainsi on cible uniquement les citations comprises dans les titres H3.
    C'est possible également pour les classes :

    p .class3
    {
    color:red;
    }

    On y modifie ici uniquement les classes 3 incluses dans les balises de paragraphes.



  • Exemples de propriétés CSS :

    font-size:16px;
    font-size:xx-small;
    font-size:1EM;
    font-family:arial;
    font-family:arial,verdana,etc;
    text-align:center;
    text-indent:30px;
    font-style:italic;
    font-weight:bold;
    font-variant:small-caps;
    font-transform:uppercase;
    font-transform:lowercase;
    font-transform:caputalize;
    font-transform:none;
    		 appliquer une police de 16
    appliquer une certaine taille de police
    appliquer une certaine taille de police
    appliquer une police de texte arial
    appliquer plusieurs polices selon leur ordre de priorités
    aligner le texte au centre
    décaler le texte de 30 pixels
    mettre en italique
    mettre en gras
    mettre en majuscules
    mettre tout en majuscules
    mettre tout en minuscules
    mettre en majuscule la 1ère lettre
    ne pas appliquer de changement