Code de la page : «C'est quoi les CSS ?»

Retour

Ceci est le code php du fichier :


<?php
$titre='C\'est quoi les CSS ?';
$head='<link rel="stylesheet" type="text/css" href="/autres/css/cestquoi.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="/autres/css/exemplecss.css" />
  <link rel="stylesheet" type="text/css" href="/autres/css/code.css" />
  <link rel="prev" title="C\'est quoi &quot;(x)HTML&quot; ?" href="index.php" />
  <link rel="index" title="C\'est quoi ?" href="../" />';
require'../../autres/source-haut.php';
?>
<h1><img style="border:1px solid black;width:80px;height:18px;" alt="CSS" src="/img/cestquoi/ckcss.gif" />C'est quoi les
  <abbr title="Cascading Style Sheets, ou en fran&ccedil;ais : feuilles de style en cascades.">CSS</abbr> ?</h1>
<h2 id='intro'>Rappel du <abbr title="eXtensible HyperText Markup Langage">XHTML</abbr></h2>
  <p>Le <a href="index.php">xhtml</a> est utilisé pour servir le <strong>contenu</strong> d'une page : c'est avec ce langage que l'on dit :
     ceci est un titre, ceci est un paragraphe, ceci est une image, etc...<br />
     Mais en <strong>aucun cas</strong> il ne doit &ecirc;tre utilisé pour la mise en page.
     On ne doit pas dire que les titres sont en rouges souligné, ou que les paragraphes sont en blanc sur fond noir.<br />
     C'est le travail des CSS.</p>
  <p>En xhtml, dans les balises, on voit parfois des attributs "style" :<br />
     <code class='xhtml'>&lt;<span class='bal'>balise</span> <span class='attr'>style</span>=<span class='style'>"<span class='ppt'>propriété:</span><span class='val'>valeur</span>;"</span>&gt;</code></p>
  <p>Le contenu de ces attributs "style" peut &ecirc;tre remplacé par des CSS.</p>
  <p>Les CSS, appelés Cascading Style Sheets, soit "Feuilles de style en cascades" en fran&ccedil;ais,
     permettent de créer la mise en page d'un site. Avec les CSS, on peut faire toute la mise en page :
     Les couleurs de fond, de texte, les polices, la taille du texte, les bordures, les apparences des titres, les marges...</p>
<hr />
<h2 id='structure'>La Structure d'un fichier CSS</h2>
  <p>Voici comment est fait un fichier CSS :<br />
     <code class='css'><span class='elm'>élément</span><br />
     &nbsp; &nbsp; {<br />
     &nbsp; &nbsp; &nbsp; &nbsp;
     <span class='ppt'>propriété:</span><span class='val'>valeur</span>;<br />
     &nbsp; &nbsp; &nbsp; &nbsp;
     <span class='ppt'>propriété:</span><span class='val'>valeur</span>;<br />
     &nbsp; &nbsp; &nbsp; &nbsp;
     <span class='ppt'>propriété:</span><span class='val'>etc...</span>;<br />
     &nbsp; &nbsp; }</code></p>
  <p>Donc, pour appliquer un style &agrave; un élément de la page, il faut :</p>
  <ul><li>Indiquer l'élément sur lequel on travaille.</li>
      <li>Ouvrir des <em>accolades</em> "{"pour appliquer des propriétés de style &agrave; l'élément.</li>
      <li>Ne pas oublier de refermer les accolades "}" quand on a fini d'appliquer des propriétés &agrave; l'élément.</li>
      <li>mettre <em>deux points</em> devant chaque propriété pour dire : <em>telle propriété prendra telle valeur</em>,</li>
      <li>et mettre un <em>point-virgule</em> ";" devant chaque valeur pour dire : <em>on a fini de travailler sur cette propriété</em>.</li></ul>

  <p>Voici un exemple de ce que l'on peut "dire" avec les CSS :<br />
     <code class='css'><span class='elm'>paragraphes</span><br />
     &nbsp; &nbsp; &nbsp;&nbsp; {<br />
     &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; <span class='ppt'>couleur du texte:</span><span class='val'>rouge</span>;<br />
     &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span class='ppt'>taille de police:</span><span class='val'>1 ligne et demie</span>;<br />
     &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }</code></p>
  <p>On peut également faire des commentaires, qui servent &agrave; comprendre plus facilement le code plus tard :<br />
     <code class='css'><span class='com'>/*Ceci est un Commentaire*/</span></code><br /><br />
     On peut donc écrire les commentaires sur une ou plusieurs lignes avec "/*" et "*/".</p>
<h2 id='creerstyle'>Créer un style avec les CSS</h2>
  <p>Pour dire sur quelle élément de la page on veut appliquer certains style, il y a plusieurs fa&ccedil;ons :</p>
  <ul><li class='nomargin'>Définir des styles en fonction des <em>balises xhtml</em> : par exemple, ce code CSS
          "<code class='css'><span class='elm'>p</span>{<span class='ppt'>color:</span><span class='val'>blue</span>}</code>"
          colorera les paragraphes en bleu :<br />
          <span class="bleu nomargintop">Ce paragraphe est coloré en bleu.</span></li>
      <li>Définir des styles en fonction des <em>classes</em>. Par exemple, si l'on veut que certains paragraphes soient colorés en bleu,
          et d'autres en rouge, nous allons écrire :<br />
          Le code xhtml :<br />
          <code class='xhtml'><span class='com'>&lt;!--Ce paragraphe sera bleu--&gt;</span><br />
              &lt;<span class='bal'>p</span> <span class='attr'>class</span>=<span class='val'>"bleu"</span>&gt;<br />
              Texte de couleur bleue.<br /> &lt;<span class='bal'>/p</span>&gt;<br /><br />
              <span class='com'>&lt;!--Celui ci sera en rouge--&gt;</span><br />
              &lt;<span class='bal'>p</span> <span class='attr'>class</span>=<span class='val'>"rouge"</span>&gt;<br />
              Texte de couleur rouge.<br />&lt;<span class='bal'>/p</span>&gt; </code><br />
          Et le code CSS :<br /><code class='css'><span class='elm'>p</span>.<span class='class'>rouge</span>
              &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
              <span class='com'>/*ceci veut dire "Tous les paragraphes de classe "rouge"*/</span><br />
              {<span class='ppt'>color:</span><span class='val'>red</span>; &nbsp; &nbsp;<span class='com'>/*seront colorés en rouge*/</span><br />
              }<br />
              <span class='elm'>p</span>.<span class='class'>bleu</span><br />
              {<span class='ppt'>color:</span><span class='val'>blue</span>}
              &nbsp;<span class='com'>/*et tous les paragraphes de classe "bleu" seront en bleu*/</span></code>
             Ceci donnera :<br />
             <span class="rouge nomargin">Ce paragraphe de classe "rouge" est coloré en rouge.</span><br />
             <span class="bleu nomargintop">Ce paragraphe de classe "bleu" est coloré en bleu.</span></li>
      <li>Définir un style en fonction des <em>id</em> :<br /><br />
             Un id est presque le m&ecirc;me chose qu'une classe, &agrave; la différence pr&egrave;s qu'il ne peut
             &ecirc;tre utilisé qu'une seule fois dans une page.<br /><br />
             Par exemple, vous avez le droit de faire ce code :<br />
             <code class='xhtml'>&lt;<span class='bal'>p</span> <span class='attr'>class</span>=<span class='val'>"rouge"</span>&gt;
                Paragraphe rouge&lt;<span class='bal'>/p</span>&gt;<br />
              &lt;<span class='bal'>p</span> <span class='attr'>class</span>=<span class='val'>"bleu"</span>&gt;
                Paragraphe bleu&lt;<span class='bal'>/p</span>&gt;
              &lt;<span class='bal'>p</span> <span class='attr'>class</span>=<span class='val'>"rouge"</span>&gt;
                Un autre paragraphe rouge&lt;<span class='bal'>/p</span>&gt;</code><br /><br />
              Mais vous n'avez pas le droit de faire ceci, car un id avec la m&ecirc;me valeur est utilisé deux fois :<br />
              <code class='xhtml'>&lt;<span class='bal'>p</span> <span class='attr'>id</span>=<span class='val'>"rouge"</span>&gt;
                Un paragraphe en rouge&lt;<span class='bal'>/p</span>&gt;<br />
              &lt;<span class='bal'>p</span> <span class='attr'>id</span>=<span class='val'>"bleu"</span>
              &gt;Puis un en bleu&lt;<span class='bal'>/p</span>&gt;<br />
              &lt;<span class='bal'>p</span> <span class='attr'>id</span>=<span class='val'>"bleu"</span>&gt;
              Et un autre en bleu. Mais &ccedil;a ne va pas ! On a utilisé deux fois l'id "bleu" !!&lt;<span class='bal'>/p</span>&gt;</code></li></ul>
<h2 id='exemple'>Exemple</h2>
  <p>Voyons maintenant comment créer un style particulier pour un bloc.
     Par exemple, nous voulons faire ressortir un extrait de texte, comme une citation.<br />
     Nous avons d'abord un paragraphe sans mise en forme :</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fringilla justo ut dui nonummy scelerisque.
     In dapibus diam non nisi. Cras et tellus vitae sapien tristique hendrerit. Aliquam quis eros.
     In faucibus felis vel turpis. Aenean semper, nisl quis eleifend tempus, urna leo fringilla ipsum, vitae laoreet ante massa ac erat.
     Aliquam nisi velit, faucibus vitae, iaculis sed, vehicula et, sem. Nulla facilisi. Donec placerat pulvinar felis. Sed ultricies leo ut elit.
     Integer vitae tortor et neque blandit rhoncus. Quisque facilisis enim luctus quam. Vivamus hendrerit congue lacus.
     Nulla id nunc non nibh egestas vehicula. Nullam varius. Morbi vitae ante in tortor condimentum gravida.</p>
  <p>Et nous voulons avoir ceci :</p>
  <p id="exemplelorem">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fringilla justo ut dui nonummy scelerisque.
     In dapibus diam non nisi. Cras et tellus vitae sapien tristique hendrerit. Aliquam quis eros.
     In faucibus felis vel turpis. Aenean semper, nisl quis eleifend tempus, urna leo fringilla ipsum, vitae laoreet ante massa ac erat.
     Aliquam nisi velit, faucibus vitae, iaculis sed, vehicula et, sem. Nulla facilisi. Donec placerat pulvinar felis. Sed ultricies leo ut elit.
     Integer vitae tortor et neque blandit rhoncus. Quisque facilisis enim luctus quam. Vivamus hendrerit congue lacus.
     Nulla id nunc non nibh egestas vehicula. Nullam varius. Morbi vitae ante in tortor condimentum gravida.</p>
  <p>regardons ce qui &agrave; changé :</p>
  <ul><li>Il y a une <em>bordure</em> bleue de quatre pixels autour du bloc, et de huit pixels a gauche. </li>
    <li>Le bloc est écrit en <em>blanc sur fond noir</em>.</li>
    <li>Il y a un espacement entre le texte et la bordure.</li>
    <li>Le bloc est décalé vers la droite.</li>
    <li>La premi&egrave;re lettre du paragraphe est une&nbsp;<em>lettrine</em>. </li>
    <li>Elle est en <em>rouge sur fond gris</em>.</li>
    <li>Elle a une <em>bordure</em> verte de deux pixels.</li>
    <li>Il y a un espace entre la lettrine et sa bordure,</li>
    <li>et un espace entre la lettrine et le reste du texte.</li>
    <li>La lettrine est <em>plus grande</em> que le reste des lettres.</li>
    <li>La <em>police</em> est "Comic sans MS".</li></ul>
  <p>Maintenant, voyons comment nous allons faire ceci :<br />
     Admettons que le paragraphe soit de classe "citation" (on aurait aussi pu utiliser la balise blockquote).
     (<code class='xhtml'>&lt;<span class='bal'>p</span> <span class='attr'>class</span>=<span class='val'>"citation"</span>&gt;
        Blabla...&lt;<span class='bal'>/p</span>&gt;</code>)<br />
     Pour faire une <em>bordure</em>, nous devons mettre :<br />
     <code class='css'><span class='elm'>p</span>.<span class='class'>citation</span> { &nbsp;&nbsp;&nbsp;
        <span class='com'>/*le ou les paragraphes de classe "citation"*/</span><br />
        &nbsp; &nbsp; &nbsp; &nbsp;
        <span class='ppt'>border-style:</span> <span class='val'>solid</span>;&nbsp; &nbsp;
        <span class='com'>/* auront une bordure solide, c'est à dire un trait continu*/</span><br />
        &nbsp; &nbsp; &nbsp; &nbsp;
        <span class='ppt'>border-color:</span> <span class='val'>#6666cc</span>; &nbsp;
        <span class='com'>/*la couleur de cette bordure sera bleue*/</span><br /> &nbsp; &nbsp; &nbsp; &nbsp;
        <span class='ppt'>border-width:</span> <span class='val'>4px 4px 4px 8px</span>;
        <span class='com'>/*la bordure sera de 4 pixels, sauf la bordure gauche qui sera de 8 pixels !!*/</span> }</code><br />
    "#6666cc" est une fa&ccedil;on d'écrire plus précisément les couleurs. Les deux premiers chiffres apr&egrave;s le di&egrave;se
    indiquent le taux de rouge, les 3&deg; et 4&deg; le taux de vert et les deux derniers le taux de bleu.<br />
    On indique les couleurs en hexadécimal, c'est a dire avec 16 caract&egrave;res :0123456789abcdef, #000000 étant noir et #ffffff étant blanc.
    <br /><br />
    Pour écrire le texte en <em>blanc sur fond noir</em>, il faut faire :<br />
    <code class='css'><span class='ppt'>background-color:</span> <span class='val'>black</span>;
        <span class='com'>/*la couleur de fond sera noire*/</span><br />
        <span class='ppt'>color:</span><span class='val'>white</span>; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <span class='com'>/*la couleur du texte sera blanche*/</span></code><br /><br />
    Pour décaler le bloc vers la droite, il faut utiliser la propriété margin, qui prend une valeur mesurable.<br />
    On rajoute "left" &agrave; la propriété car il&nbsp;doit y avoir une marge seulement &agrave; gauche :<br />
    <code class='css'><span class='ppt'>margin-left:</span><span class='val'>20%</span>;
    <span class='com'>/*il y aura une marge de 20% de la fen&ecirc;tre &agrave; gauche*/</span></code></p>
  <p>Voici ce que nous obtiendrons avec ces propriétés CSS :</p>
  <p id="exemple1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fringilla justo ut dui nonummy scelerisque.
     In dapibus diam non nisi. Cras et tellus vitae sapien tristique hendrerit. Aliquam quis eros.
     In faucibus felis vel turpis. Aenean semper, nisl quis eleifend tempus, urna leo fringilla ipsum, vitae laoreet ante massa ac erat.
     Aliquam nisi velit, faucibus vitae, iaculis sed, vehicula et, sem. Nulla facilisi. Donec placerat pulvinar felis. Sed ultricies leo ut elit.
     Integer vitae tortor et neque blandit rhoncus. Quisque facilisis enim luctus quam. Vivamus hendrerit congue lacus.
     Nulla id nunc non nibh egestas vehicula. Nullam varius. Morbi vitae ante in tortor condimentum gravida.</p>
  <p>Il manque :</p>
  <ul><li>L'espacement entre le texte et la bordure.</li>
      <li>Le style de la lettrine.</li></ul>
  <p>Pour l'espacement entre la bordure et le contenu, il suffit de faire :<br /><br />
    <code class='css'><span class='ppt'>padding:</span> <span class='val'>10px</span>;
    <span class='com'>/*de cette fa&ccedil;on il y aura un espacement de 10 pixels entre la bordure et le texte*/</span></code>
    <br />Padding étant les marges intérieures (entre la bordure et le contenu), et margin les marges extérieures
      (entre la bordure et le reste de la page).</p>
  <p>Pour la lettrine, c'est plus compliqué :<br />
     Il faut utiliser ce que l'on appelle une <em>pseudo-classe</em>, une classe qui s'applique sur un élément en particulier
     qui n'est pas délimité par des balises xhtml, ou à un certain moment (au passage de la souris sur un élément par exemple).<br />
     Ici, nous allons utiliser la pseudo-classe <em>first-letter</em>, qui désigne la premi&egrave;re lettre d'une élément.<br />
     Donc pour que le style s'applique uniquement &agrave; la premi&egrave;re
     lettre du paragraphe, nous allons utiliser ce code CSS :<br />
     <code class='css'><span class='elm'>p</span>.<span class='val'>citation</span><span class='pc'>:first-letter</span> {
        <span class='com'>/*seulement la premi&egrave;re lettre des paragraphes de classe citation*/</span> }</code></p>
  <p>Ensuite, on utilise des propriétés comme pour n'importe quel élément. Revoyons les styles qui sont appliqués &agrave; cette lettrine :</p>
  <ul><li>Elle est en <em>rouge sur fond gris</em>. </li>
      <li>Elle a une <em>bordure</em> verte de deux pixels.</li>
      <li>Il y a un espace entre la lettrine et sa bordure,</li>
      <li>et un espace entre la lettrine et le reste du texte.</li>
      <li>La lettrine est <em>plus grande</em> que le reste des lettres.</li></ul>
  <p>Pour les couleurs, c'est tr&egrave;s simple :<br /><br />
    <code class='css'><span class='elm'>p</span>.<span class='class'>citation</span><span class='pc'>:first-letter</span>{<br />
      <span class='ppt'>color:</span><span class='val'>red</span>; <span class='com'>/* la couleur de la lettre sera rouge*/</span><br />
      <span class='ppt'>background-color:</span><span class='val'>#808080</span>;
      <span class='com'>/*la couleur de fond sera grise*/</span> }</code></p>
  <p>Ensuite, il faut faire la bordure :<br />
    <code class='css'><span class='ppt'>border:</span><span class='val'> 2px solid green</span>;
    <span class='com'>/*la bordure sera verte et de deux pixels d'épaisseur*/</span></code></p>
  <p>Puis, les espacements :<br />
    <code class='css'><span class='ppt'>padding:</span> <span class='val'>10px</span>; &nbsp; &nbsp; &nbsp;
      <span class='com'>/*Il y aura un espacement de 10 pixels entre la lettre et sa bordure*/</span><br />
      <span class='ppt'>margin-right:</span> <span class='val'>2px</span>; &nbsp;
      <span class='com'>/*Un espacemement de 2 pixels entre la bordure droite et le texte*/</span></code></p>
  <p>Les propriétés de police :<br />
    <code class='css'><span class='ppt'>font-family:</span> <span class='val'>'comic sans ms'</span>;
      <span class='com'>/*la police sera 'comic sans ms'*/</span><br />
      <span class='ppt'>font-size:</span> <span class='val'>2em</span>;
      <span class='com'>/* et la lettre fera deux lignes de haut (1em = une ligne) */</span></code></p>
  <p>Et enfin, les propriétés du bloc :<br />
    <code class='css'><span class='ppt'>height:</span> <span class='val'>4em</span>;
    <span class='com'>/* le bloc fera 4 lignes de hauteur*/</span><br />
    <span class='ppt'>float:</span> <span class='val'>left</span>;
    <span class='com'>/*et il flottera a gauche, sinon il dépasse du paragraphe*/</span></code></p>
<h2 id='pseudoclasses'>Les pseudo-classes</h2>
  <p>Certaines classes spéciales sont appelées "<em>pseudo-classes</em>".
     Ce sont par exemple :<br />Un style qui s'applique seulement...</p>
  <ul><li>&agrave; la premi&egrave;re ligne d'un élément : <code class='css'><span class="elm">élément</span><span class='pc'>:first-line</span></code></li>
      <li>&agrave; la premi&egrave;re lettre d'un élément : <code class='css'><span class="elm">élément</span><span class='pc'>:first-letter</span></code></li>
      <li>Quand la souris survole l'élément : <code class='css'><span class='elm'>élément</span><span class='pc'>:hover</span></code></li>
      <li>Quand on clique sur un élément : <code class='css'><span class='elm'>élément</span><span class='pc'>:focus</span></code> ou
          <code class='css'><span class='elm'>élément</span><span class='pc'>:active</span></code></li>
      <li>Aux liens qui sont dans l'historique du navigateur : <code class='css'><span class='elm'>a</span><span class='pc'>:visited</span></code></li></ul>
  <p>Plus d'informations sur les pseudo-classes : <a href="http://www.siteduzero.com/tuto-3-38-1.html" class='fr externe' hreflang='fr'>http://www.siteduzero.com/tuto-3-38-1.html</a></p>
<h2 id="ccl">Conclusion</h2>
  <p>C'est de cette fa&ccedil;on que l'on créée un style avec les CSS. Généralement, on fait un fichier CSS que l'on utilise pour toutes les pages.
     Comme ceci, il est tr&egrave;s facile de changer tout le design d'un site en une seule fois. De plus, le chargement des pages est allégé :
     le navigateur enregistre une seule fois le fichier CSS, et le ré-utilise sans avoir &agrave; le charger d&egrave;s qu'il y en a besoin.
     Le code html est aussi moins lourd, car on n'utilise plus de <code>style="...."</code> directement dans les balises.</p>
  <p>Cependant, les navigateurs n'interpr&egrave;tent pas tous de la m&ecirc;me fa&ccedil;on certaines propriétés CSS compliquées.
     Par exemple, IE ne g&egrave;re pas la pseudo-classe ":hover" autre part que sur un lien. En fait, il ne connait pas beaucoup de propriétés CSS 2,
     car il n'y a pas de nouvelle version depuis 1999. Il ne connait que la premi&egrave;re version des CSS. La version 7 devrait peut-&ecirc;tre
     (j'ésp&egrave;re) enfin supporter compl&egrave;tement les CSS 2, ce qui permettrait de faire des designs interessants compatibles avec
     la majorité des navigateurs.</p>
<p id="next">Liens :<br />
<a href="http://www.siteduzero.com/tuto-3-1938-1.html" class='fr' hreflang='fr'>Le site du Zéro : Liste des propriétés CSS</a><br />
<a href="http://www.csszengarden.com/tr/francais/" class='fr' hreflang='fr'>Toute la "puissance" des CSS sur CSS Zen-garden</a><br />
<a href="http://www.commentcamarche.net/css/cssintro.php3" class='fr' hreflang='fr'>Comment Ca marche : Les CSS</a></p>
<?php require'../../autres/source-bas.php'?>

Retour