Les Feuilles de style

  1. Les sélecteurs simples

    2. Correspond à un nom de balise

    Les règles

             p { font-weight: bold; }
    dans la feuille de style et 
    	<p> Bonjour en bold</p>
    Dans le code HTML

    Résultat :

    Bonjour en bold

  2. Les sélecteurs à évènements

    3. Sélection en fonction d'un évènement ou d'un état.

    Les règles

             a 
          { 
             color: black; 
             text-decoration: none;
          }
         a:hover 
          { 
           color: red; 
           font-size: large;
          }
         a:visited
         {
            font-style: italic;
         }
         a:active
         {
            font-size: small;
         }
         input:focus
         {
            background: grey;
         }
         input:hover
         {
            background: black;
         }
         input:focus:hover
         {
            background: gold;
         }
    dans la feuille de style et 
    	<a href="title.html"> Début du cours</a>
	< input type="text"></input>
    Dans le code HTML

    Résultat :

    Début du cours

  3. Les pseudo éléments

    4. agit sur des parties de texte non codéespar des balises

    Les règles

                span:before
             {
             content: url(./IMAGES/lightmov.gif);
             }
             span:after
             {
             content: " !" ;
             }
             p:first-line
             {
             text-transform: uppercase;
             }
             p:first-letter
             {
             font-size: 200%;
             font-style: italic;
             font-weight: bold;
             float: left;
             }
    dans la feuille de style et 
    	< span>  Astuce</span>
        <p> 	  Cascading Style Sheets (CSS) is a stylesheet language used
	  to describe the presentation of a document written in a
	  markup language. Its most common application is to style web
	  pages written in HTML and XHTML, but the language can be
	  applied to any kind of XML document, including SVG and
	  XUL. The CSS specifications are maintained by the World Wide
	  Web Consortium (W3C).…
        </p>
    Dans le code HTML

    Résultat :

    Astuce

    Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. The CSS specifications are maintained by the World Wide Web Consortium (W3C). CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and are typically denoted as CSS1, CSS2, and CSS3. Profiles are typically a subset of one or more levels of CSS built for a particular device or user interface. Currently there are profiles for mobile devices, printers, and television sets. Profiles should not be confused with media types which were added in CSS2. The use of CSS to position the content of a web page is sometimes referred to as CSS-P or CSS Positioning.

  4. Les sélecteurs contextuels

    5. Les règles

          p  a
      {
             font-size: large;
             text-decoration: none;
      }
      p>a
      {
             color: red;
      }
      p a+a
      {
              font-weight: bold;
      }
    dans la feuille de style et 
    	<a  href="title.html"> Début du cours</a>(aucun effet)<br/>
	<p id="context">
	  <a href="javascript.html"> premier "a" (règles p a, p>a)<br/></a>
	<span>
	  <a href="javascript.html"> balise "a" dans span </a> (règles p a )<br/>
	</span>
	  <a href="princ_balise.html"> balise "a" dans p: règles p a et p>a<br/></a>
	  <a href="css.html"> Deuxième balise a consécutive : règles p a, p>a, p a+a <br/></a>
	</p>
    Dans le code HTML

    Résultat :

    Début du cours(aucun effet)

    premier "a" (règles p a, p>a)
     balise "a" dans span (règles p a )
     balise "a" dans p: règles p a et p>a
     Deuxième balise a consécutive : règles p a, p>a, p a+a

  5. Les pseudo éléments contextuels

    6. Les règles

          table tr:first-child
      {
      background-color: blue;
      }
      table tr:nth-child(2)
      {
      background-color: white;
      }
       table tr:last-child
      {
      background-color: red;
      }
       table tr td:first-of-type
      {
      width: 10%;
      }
       table tr td:nth-of-type(2)
      {
      width: 20%;
      }
      table tr td:last-of-type
      {
      width: 30%;
      }
      table tr:nth-child(2)>td a:only-child
      {
      color:rgb(0,255,0);
      font-weight: bold;
      }
      table tr:nth-child(2)>td a:only-of-type
      {
      text-decoration: line-through;
      }
      table tr td :not(a):before
      {
      content: ">";
      }
      table tr td :not(a):after
      {
      content: "<";
      }
    dans la feuille de style et 
    	<table>
	  <tr> <td>1</td>  <td>2</td>  <td>3</td>  </tr>
	  <tr> <td>1</td>  <td><a href="#">2</a></td>  <td><span>3</span><a href="">et +</a></td></tr>
	  <tr> <td>1</td>  <td>2</td>  <td>3</td>  </tr>
	</table>
    Dans le code HTML

    Résultat :

    1 2 3
    1 2 3et +
    1 2 3

  6. Les sélecteurs avec attributs

    7. Les règles

          h3[title]
      {
             text-transform: uppercase;
      }
      
      h3[title=titre]
      {
             color: blue;
      }

      h3[title~=expose]
      {
             color: green;
      }
      h3[title|=titre]
      {
             font-size: small;
             font-style: italic;
      }
      h3[title^=mon]
      {
              color: red;
      }
      h3[title$=moi]
      {
              font-size: small;
      }        
     h3[title*=abra]
      {
      color: pink;
      }
    dans la feuille de style et 
     	<h3> pas de title</h3>
	<h3 title="titre"> title=titre</h3>
	<h3 title="le titre"> title=le titre</h3>
	<h3 title="titre de l' expose">title=titre de l' expose</h3> contient le mot exposé
	<h3 title="titre-de-l-expose">title=titre-de-l-expose</h3>	
	<h3 title="mon titre">title=mon titre</h3>	balise commençant par "mon"
	<h3 title="mon titre a moi">title=mon titre a moi</h3>	balise terminant par "moi"
	<h3 title="abracadabra">title=abracadabra</h3>	balise contenant abra
    Dans le code HTML

    Résultat :

  7. Les groupements de sélecteurs

    8. Les règles

              h1,h2,h3
          { 
            font-size: large;
            text-decoration: line-through;
          }
    dans la feuille de style et 
    	<h1>  un</h1>
	<h2>  deux</h2>
	<h3>  et trois</h3>
    Dans le code HTML

    Résultat :

    un

    deux

    et trois

    Notez que les autres propriétés des balises <hx> n'ont pas été modifiées. Par exemple <h1> est toujours centré.

  8. Les sélecteurs de classe

    9. Permet de spécifier une mise en forme pour une classe de balise.

    Les règles

              .resume
          { 
            font-size: small;
            font-style: italic;
            text-align: justify;
          }
    dans la feuille de style et 
    	<p class="resume">
	  Ceci est un résumé du cours de HTML.
	</p>
    Dans le code HTML

    Résultat :

    Ceci est un résumé du cours de HTML.

  9. Les sélecteurs d'identifiant

    10. Permet d'appliquer une mise en forme à une seule balise identifiée par son attribut id.

    Les règles

              #titre
          { 
            display: block;
            font-size: large;
            text-decoration: underline;
            text-align: center;
          }
    dans la feuille de style et 
    	<span id="titre"> Ceci est mon titre</span>
    Dans le code HTML

    Résultat :

    Ceci est mon titre

  10. Combinaison de sélecteurs

    11. Combine plusieurs sélecteurs.

    Les règles

              #titre, p, .resume
          { 
           font-style: italic;
          }
    dans la feuille de style et 
    	<span id="idtitre"> Ceci est mon titre</span>
	<p> et ceci est un paragraphe</p>
	<p class="resume"> et ceci mon résumé</p>
    Dans le code HTML

    Résultat :

    Ceci est mon titre

    et ceci est un paragraphe

    et ceci mon résumé

    Notez que la déclaration ajoutée se superpose aux propriétés existantes.

  11. Les feuilles en cascade

    12. permet de compléter ou d'écraser une déclaration.

    Les règles

          .cascade
      {
      font-family: arial;
      font-style: italic;
      }
    dans la feuille de style et 
    	<ul>
	  <li class="cascade"> Un élément normal</li>
	  <li class="cascade" style="font-style: normal; color: red;"> 
	    Un élément modifié</li>
	</ul>
    Dans le code HTML

    Résultat :

    Nous avons :

    1. écrasé la déclaration font-style
    2. ajouté la déclaration color
    3. conservé la déclaration font-family

  12. L'Héritage

    13. Les règles

          ul
      {
      font-style: italic;
      }
      li
      {
      color: red;
      }
    dans la feuille de style et 
    	<ul>
	  <li> Un élément rouge en italique </li>
	</ul>
    Dans le code HTML

    Résultat :

    La balise <li> a hérité la déclaration font-style: italic de son père (la balise <ul>).

  13. L'alignement de textes

    14. Les règles

          #align
      {
      width: 6cm;
      background: aqua;
      text-indent: 1cm;
      margin-left: 1cm;
      margin-top: 5mm;
      text-align: justify
      }
    dans la feuille de style et 
    	<p id="align">
	  Ceci est un paragraphe, de 6cm sur font bleu clair avec une
	  indentation et une marge à gauche de 1 cm. Le texte est de
	  plus justifié.
          </p>
    Dans le code HTML

    Résultat :

    Ceci est un paragraphe, de 6cm sur font bleu clair avec une indentation et une marge à gauche de 1 cm. Le texte est de plus justifié.

    La balise <li> a hérité la déclaration font-style: italic de son père (la balise <ul>).

  14. Formatage de boîtes

    15. Les règles

          #format
      {
      width: 5cm;
      background: green;
      border-width: 1mm 2mm 3mm 4mm;
      border-style: solid;
      border-color: olive;
      padding: 5mm 5mm 1mm 5mm;
      margin: 1cm 5mm 2mm 1mm;
      }
    dans la feuille de style et 
    	toto	  toto	  toto	  toto	  toto
	<div id="format">
	  toto	  toto	  toto	  toto	  toto
	</div>
	  toto	  toto	  toto	  toto	  toto
    Dans le code HTML

    Résultat :

    toto toto toto toto toto
    toto toto toto toto toto
    toto toto toto toto toto

  15. Positionnement de boîtes

    16. Les règles

          #positionnement
      {
      background: navy;
      color: white;
      font-size: x-large;
      }
      #positionnement #titre
      {
      position: relative;
      top: -50px;
      left: 60px;
      color: #aaa;
      font-size: 20pt;
      }
	  
          #positionnement img
      {
      width: 50px;
      }
      #positionnement #main
      {
      position: relative;
      top: -30pt;
      margin-left: 50px;
      background: #44f;
      text-align: center;
      }
    dans la feuille de style 
    	<div id="positionnement">
	  <img src="IMAGES/degrade.jpg"> 
	  <div id="titre"> L'ENSICAEN</div>
	  <div id="main">
	    Cours de HTML <br/>	    
	    Première année
	
	  </div>
	</div>
    Dans le code HTML

    Résultat :

    L'ENSICAEN
    Cours de HTML
    Première année

  16. Boîtes flottantes

    17. Les règles

          #floatleft
      {
      float: left;
      }
      #floatright
      {
      float: right;
      }
    dans la feuille de style 
    	  toto toto	  toto toto	  toto toto	  toto toto	  toto toto
	  <img src="../IMAGES/logo_ensicaen.jpg" id="floatleft">
	  <img src="../IMAGES/logo_ensicaen.jpg" id="floatright">
	  toto toto toto toto toto toto toto toto toto toto toto toto
	  toto toto toto toto toto toto toto toto toto toto toto toto
	  toto toto toto toto toto toto toto toto toto toto toto toto
	  toto toto toto toto toto toto toto toto toto toto toto toto
	  toto toto toto toto
    Dans le code HTML

    Résultat :

    toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto toto

  17. Boîtes flottantes

    18. Les règles

          #profondeur
      {      
      width: 500;
      }
      #profondeur p.image img
      {
      width: 100px;
      position: relative;
      z-index: 1;
      }
      #profondeur .nom
      {
      font-size: x-large;
      background: #aaa;
      position: relative;
      left: -4px;
      z-index: 1;
      }
		
          #profondeur p.content
      {
      position: relative;
      top: -70px;
      left: 50px;
      padding: 50px;
      border: 1mm solid black;
      background: white;
      z-index: 0;
      }
    dans la feuille de style 
    	<div id="profondeur">
	  <p class="image">
	    <img class="top" src="../IMAGES/logo_ensicaen.jpg" align="middle"/> 
	    <span class="nom"> ENSICAEN</span>
      </p>
      <p class="content">
	    L'EnsiCaen est une école d'ingénieurs.
      </p>
    </div>
    Dans le code HTML

    Résultat :

    ENSICAEN

    L'EnsiCaen est une école d'ingénieurs.

  18. Les listes

    19. Les règles

          #liste
      {
      width: 7cm;
      background: white;
      }
      #liste ul
      {
      list-style-image: url(IMAGES/green-white.jpg);
      list-style-position: inside;
      }
      #liste ol
      {
      list-style-type: lower-alpha;
      }
    dans la feuille de style 
    	<div id="liste">
	  <ul>
	  <li> Un item avec beaucoup de texte de façon à pouvoir aller à la ligne.</li>
	  <li> Deux items</li>
	  <li> Et trois items</li>
	</ul>
	  <ol>
	    <li>et un</li>
	    <li>et deux</li>
	  </ol>
	</div>
    Dans le code HTML

    Résultat :

    • Un item avec beaucoup de texte de façon à pouvoir aller à la ligne.
    • Deux items
    • Et trois items
    1. et un
    2. et deux
luc.brun@free.fr
Last modified: Thu Jan 25 20:06:24 CET 2007