« Tutoriel CSS » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
 
(61 versions intermédiaires par 19 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
<pageby nominor="false" comments="false"/>
{{Incomplet}}
{{Incomplet}}
<!-- <pageby nominor="false" comments="false"/> -->
== Introduction ==
== Introduction ==


Petite introduction à CSS. Il s'agit d'une importatation de transparents - à compléter (!) / [[Utilisateur:Daniel K. Schneider|Daniel K. Schneider]] 26 août 2008 à 14:21 (CEST)
Petite introduction à CSS. Il s'agit d'une importation de transparents - à compléter (!) Le CSS est un langage utilisé dans le domaine de l'informatique. Il s'agit d'une feuille de style en cascade (Cascading Style Sheets) c.à.d un fichier qui permet de créer toute la structure “esthétique“ d'une page web. Dans un langage plus technique on dira que le CSS permet de faire une description d'un document comme HTML ou XML. Le CSS s'occupera donc du style de la page (c.à.d sa mise en page), les couleurs du fond et du texte, la taille, le choix des caractères, la structure spatiale de contenus etc., (à compléter!).--[[Utilisateur:Kamanda0|Kamanda0]] ([[Discussion utilisateur:Kamanda0|discussion]]) 3 novembre 2013 à 10:19 (CET) / [[Utilisateur:Daniel K. Schneider|Daniel K. Schneider]] 26 août 2008 à 14:21 (CEST)


Voir aussi: [[Liens CSS]] (page avec des ressources)
Voir aussi: [[Liens CSS]] (page avec des ressources)
Ligne 24 : Ligne 25 :
* Séparation de contenu et de style:
* Séparation de contenu et de style:
** permet de servir une page à plusieurs "sauces" (HTML riche, HTML pauvre mais efficace, HTML vocal, ....), donc variantes pour imprimer, le PDA, etc.
** permet de servir une page à plusieurs "sauces" (HTML riche, HTML pauvre mais efficace, HTML vocal, ....), donc variantes pour imprimer, le PDA, etc.
** permet de gérér centralement le "look" de pleines de pages, donc diminue le coût de maintenance
** permet de gérer centralement le "look" de plein de pages, donc diminue le coût de maintenance
** rend une page plus "lisible" et plus rapide à télécharger
** rend une page plus "lisible" et plus rapide à télécharger


'''Désavantages'''
'''Inconvénients'''


* Implémentations CSS1: bonnes dans Mozilla/Firefox 2+ et potables dans IE 6+
* Implémentations CSS1: bonnes dans Mozilla/Firefox 2+ et potables dans IE 6+
Ligne 39 : Ligne 40 :
=== Principe de base ===
=== Principe de base ===


* Feuille de style = jeux de règles qui précise l'affichage d'un élément HTML ou XML
* Feuille de style = jeux de règles qui précisent l'affichage d'un élément HTML ou XML
* Chaque règle est composée:
* Chaque règle est composée:
** d'un '' sélecteur'' (qui indique à quel type d'élément la règle s'applique)
** d'un '' sélecteur'' (qui indique à quel type d'élément la règle s'applique)
** une '' déclaration'' (qui comprend une ou plusieurs instructions de mise en page
** une '' déclaration'' (qui comprend une ou plusieurs instructions de mise en page)


'''Exemple (de sensibilisation)'''
'''Exemple (de sensibilisation)'''


    H1 { color: red }
<source lang="CSS">
    P  { font-face: Verdana, sans-serif ; font-size: 12pt}
H1 { color: red }
    H1, H2, H3 { color : blue }
P  { font-face: Verdana, sans-serif ; font-size: 12pt}
        H1.ChapterTOC, H2.PeriodeTOC, H2.ExerciceTOC, H2.SectionTOC  {
H1, H2, H3 { color : blue }
        display: block;text-indent: 30pt;
H1.ChapterTOC, H2.PeriodeTOC, H2.ExerciceTOC, H2.SectionTOC  {
        text-align: left; font-size: 14.000000pt;
  display: block;text-indent: 30pt;
        font-weight: Bold;    font-family: "Times";
  text-align: left; font-size: 14.000000pt;
  font-weight: Bold;    font-family: "Times";
       }
       }
</source>


[[Image:css-intro-1.png]]
[[Image:css-intro-1.png]]
Ligne 64 : Ligne 67 :
'''Pour être compatible:'''
'''Pour être compatible:'''


* Pour gérer les anciens browsers (NS 4 et IE 5) comprénant mal CSS il faut écrire des scripts de filtrage (disponibles sur le "web master's sites").
* Pour gérer les anciens navigateurs (NS 4 et IE 5) comprenant mal CSS il faut écrire des scripts de filtrage (disponibles sur le "web master's sites").
* Pour gérer les Netscape 3 etc. pas de problème, ils ignorent les CSS
* Pour gérer les Netscape 3 etc. pas de problème, ils ignorent les CSS


Ligne 73 : Ligne 76 :
=== Styles "inline" ===
=== Styles "inline" ===


* On peut définir un attribut style pour chaque élément HTML
Il est possible de définir des règles d'affichage pour des éléments HTML grâce à l'attribut "'''style'''".


  &lt;p style="color: red; font: 12pt times; margin-left: 2em"&gt;
Exemple de code:
<source lang="HTML5">
  <p style="color: red; font: 12pt times; margin-left: 2em">
   On peut définir un style pour chaque balise.  
   On peut définir un style pour chaque balise.  
   Ce paragraphe contient son propre style, mais ce n'est pas très efficace ...
   Ce paragraphe contient son propre style, mais ce n'est pas très efficace ...
  </p>
  </p>
</source>


Source: '' http://tecfa.unige.ch/guides/css/ex/simple-css2.html''
Dans cet exemple, on ajoute plusieurs propriétés CSS à l'élément "p" (un paragraphe):


Il s'agit ici d'une technique qu'il faut mieux éviter, car elle ne respecte pas très bien le principe de la séparation de contenu et de présentation
* color: red = on défini la couleur du texte.
* font: 12pt times = on défini la police du paragraphe.
* margin-left = on défini les marges gauches.


On peut utiliser de temps en temps un &lt;span&gt; qui permet de définir un style à l'intérieur d'un paragraphe. Enfin, à éviter aussi.
Ce principe de "style inline"  s'applique tous les éléments HTML (span, div, li, etc.). Exemple avec la balise "span":
 
<source lang="CSS">
<pre>
  <p>
  <p>
  On peut définir <span style="color: red;"> une phrase toute
  On peut définir <span style="color: red;"> une phrase toute
  rouge </span>. Et revenir à la normale plus tard ...
  rouge </span>. Et revenir à la normale plus tard ...
</p>
</p>
</pre>
</source>
 
Résultat:
On peut définir <span style="color: red;"> une phrase toute rouge </span>. Et revenir à la normale plus tard ...
 
Le désavantage de cette méthode est que le code CSS est intégré aux pages HTML. Il n'y a donc pas de séparation entre le contenu et la présentation.


Resultat:
Lorsque vous voulez modifier le style d'un élément, il est nécessaire d'ouvrir et de modifier chaque document HTML, puis de trouver l'élément en question dans le code. Selon le nombre de pages HTML et le nombre de lignes de code, cela peut être très fastidieux.


On peut définir <span style="color: red;"> une phrase toute rouge </span>. Et revenir à la normale plus
Exemple live: http://tecfa.unige.ch/guides/css/ex/simple-css2.html


=== Feuille de style imbriquée dans une page ===
=== Feuille de style imbriquée dans une page ===


* À la place de créer exprès une feuille de style css dans un autre fichier, on met les informations nécessitées à l'intérieur de notre feuille html. Pratique quand on n'a pas beaucoup de déclaration à insérer dans notre page html.--[[Utilisateur:Kamanda0|Kamanda0]] ([[Discussion utilisateur:Kamanda0|discussion]]) 3 novembre 2013 à 11:36 (CET)
* Déclaration d'une feuille de style avec la balise &lt;style&gt;
* Déclaration d'une feuille de style avec la balise &lt;style&gt;


'''Exemple 3-1: Simples feuilles CSS imbriquées'''
'''Exemple 3-1: Simples feuilles CSS imbriquées'''


* '' [http://tecfa.unige.ch/guides/css/ex/simple-css2.html http://tecfa.unige.ch/guides/css/ex/simple-css.html]''
* [http://tecfa.unige.ch/guides/css/ex/simple-css.html simple-css.html]
* '' http://tecfa.unige.ch/guides/css/ex/simple-css2.html'' (exemple plus compliqué)
* [http://tecfa.unige.ch/guides/css/ex/simple-css2.html simple-css2.html] (exemple plus compliqué)


'''Utilisation:'''
'''Utilisation:'''


* La déclaration doit se faire dans le &lt;head&gt; (sinon il peut y avoir des problèmes, par ex. la couleur background du body qui ne s'affiche pas)
* La déclaration doit se faire dans le &lt;head&gt; (sinon il peut y avoir des problèmes, par ex. la couleur background du body qui ne s'affiche pas)
* Pour rester compatible avec les anciens navigateurs, il faut commenter les règles CSS comme dans l'exemple ci-dessous !
* Pour rester compatible avec les '''très''' '''très''' anciens navigateurs, il faudrait commenter les règles CSS comme dans l'exemple ci-dessous !


<pre>
<source lang="CSS">
  <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">
  <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">
  <html> <head>
  <html> <head>
     <title>Simple CSS démo</title>
     <title>Simple CSS démo</title>
     <STYLE type="text/css">
     <style type="text/css">
       <!--
       <!--
       body    {background: white; font-family: Helvetica, Arial, sans-serif;}
       body    {background: white; font-family: Helvetica, Arial, sans-serif;}
Ligne 122 : Ligne 135 :
       .default  {margin-left: 2em;}
       .default  {margin-left: 2em;}
       -->
       -->
     </STYLE>
     </style>
   </head>
   </head>
</pre>
</source>


=== Feuille de style externe associé à des pages HTML ===
=== Feuille de style externe associé à des pages HTML ===


* Solution efficace pour gérér le look des plusieurs (ou pleins!) de pages
* Solution efficace pour gérer le look de plusieurs (ou plein!) de pages
* La balise &lt;link&gt; doit se trouver dans le &lt;head&gt;
* La balise &lt;link&gt; doit se trouver dans le &lt;head&gt;
* Si vous utilisez des caractères non standards dans le texte ("é","ö", etc.) il faudrait déclarer l'attribut CHARSET dans le HTML (à vérifier)
* Si vous utilisez des caractères non standards dans le texte ("é","ö", etc.) il faudrait déclarer l'attribut CHARSET dans le HTML (à vérifier)
* Pensez à créer un répertoire central pour vos styles ! (A tecfa: /web/styles)
* Pensez à créer un répertoire central pour vos styles ! (A tecfa: /web/styles)
* Vous pouvez regarder le source d'une page HTML et ensuite manuellement entrer l'URL pour le CSS et le regarder (s'il en existe un)
* Vous pouvez regarder la source d'une page HTML et ensuite manuellement entrer l'URL pour le CSS et le regarder (s'il en existe un)


Exemple: Simple feuille CSS externe
Exemple: Simple feuille CSS externe
* Source: [http://tecfa.unige.ch/guides/css/ex/simple-css3.html simple-css3.html]


* '' http://tecfa.unige.ch/guides/css/ex/simple-css3.html''
<source lang="CSS">
<html>
  <head>
    <link rel="stylesheet" href="simple-css3.css" charset="UTF-8" type="text/css"/>
    <title>Simple CSS démo III</title>
  </head>
  <body>
</source>


&lt;html&gt;
'' ATTENTION'' : Dans le fichier - feuille de style vous mettez '' juste '' les déclarations CSS, rien d'autre: pas d'entêtes, rien d'autre !!
  &lt;head&gt;
    &lt;link rel="stylesheet" href="simple-css3.css" charset="ISO-8859-1" type="text/css"/&gt;
    &lt;title&gt;Simple CSS démo III&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;


=== Multiples feuilles de style ===


'' ATTENTION'' : Dans le fichier - feuille de style vous mettez '' juste '' les déclarations CSS, rien d'autre: pas d'entêtes, rien d'autre !!
Les multiples feuilles de style ont plusieurs usages:


=== Multiples feuilles de style ===
(1) On peut laisser l'utilisateur choisir !
* Dans Mozilla/Firefox en tout cas (Menu View-&gt;Use Style)
* On peut aussi écrire un programme JavaScript qui le fait
** '' http://www.alistapart.com/stories/alternate/test.html'' (!URL pas le même sur la page d'arrivée!)


* On peut laisser l'utilisateur choisir !
(2) Pensez à faire une version spéciale pour l'impression
** dans Mozilla en tout cas (Menu View-&gt;Use Style)
** on peut aussi écrire un programme JavaScript qui le fait
* '' http://www.alistapart.com/stories/alternate/test.html''
* Pensez à faire une version spéciale pour l'impression


Exemple de la home page de DKS:
Exemple de la home page de DKS:


&lt;style type="text/css" media="all"&gt;@import "/tecfa-people/dks-normal.css";&lt;/style&gt;
<source lang="CSS">
  &lt;link ''rel="alternate stylesheet"''
<style type="text/css" media="all">
   type="text/css" ''media="screen"''
      @import "/tecfa-people/dks-normal.css";
   ''title="Friendly fonts''
</style>
  " href="/tecfa-people/dks-friendly.css" /&gt;
  <link rel="alternate stylesheet"
   &lt;link rel="alternate stylesheet" type="text/css" media="screen"  
   type="text/css" media="screen"
       title="bigtype" href="/tecfa-people/dks-big.css" /&gt;
   title="Friendly fonts
   &lt;link rel="alternate stylesheet" type="text/css" media="screen"  
  " href="/tecfa-people/dks-friendly.css" />
       title="Print with URLs" href="/tecfa-people/dks-print-url.css" /&gt;
   <link rel="alternate stylesheet" type="text/css" media="screen"  
   &lt;link rel="alternate stylesheet" type="text/css" media="screen"  
       title="bigtype" href="/tecfa-people/dks-big.css" />
       title="Print" href="/tecfa-people/dks-print.css" /&gt;
   <link rel="alternate stylesheet" type="text/css" media="screen"  
   &lt;link rel="stylesheet" type="text/css" ''media="print"''
       title="Print with URLs" href="/tecfa-people/dks-print-url.css" />
       href="/tecfa-people/dks-print.css" /&gt;
   <link rel="alternate stylesheet" type="text/css" media="screen"  
       title="Print" href="/tecfa-people/dks-print.css" />
   <link rel="stylesheet" type="text/css" media="print"
       href="/tecfa-people/dks-print.css" />
</source>


=== Importation ===
=== Importation ===


* Il s'agit d'une alternative au "linking" ci-dessus
On peut importer un fichier CSS depuis un autre fichier CSS ou encore depuis le CSS qui se trouve à l'intérieur d'une balise ''style''.
* '' http://tecfa.unige.ch/guides/css/ex/simple-css4.html''
Il s'agit donc aussi d'une alternative au "linking" ci-dessus.
    &lt;style&gt;
* Source: http://tecfa.unige.ch/guides/css/ex/simple-css4.html simple-css4.html]
      &lt;!--
 
      @import ("simple-css3.css") ;
<source lang="CSS">
      p.default {margin-right: 3em; margin-left: 3em}
<style>
      --&gt;
  @import ("simple-css3.css") ;
    &lt;/style&gt;
  p.default {margin-right: 3em; margin-left: 3em}
</style>
</source>


=== Feuilles de style client-side ===
=== Feuilles de style client-side ===
Ligne 187 : Ligne 209 :
* Marche uniquement dans Mozilla et c'est très cool:
* Marche uniquement dans Mozilla et c'est très cool:
* On peut censurer tout ce qu'on aime pas, adapter la page à la vue etc. :)
* On peut censurer tout ce qu'on aime pas, adapter la page à la vue etc. :)
Lire: [[:en:Client-side Javascript]] (cette page est vide)
=== A partir d'une bibliothèque CSS externe ===
Des bibliothèques (''framework'' en anglais) se proposent de gérer vos styles. Cela vous permet d'éviter de créer votre propre .css et d'utiliser des styles 'pré-faits'.
Un exemple de bibliothèque comme [https://www.w3schools.com/whatis/whatis_w3css.asp W3.CSS] peut être implémenté directement sur votre page .html.
Explication basique et simple de [[W3.CSS]] peut se faire sur la page [[W3.CSS | EduTechWiki W3.CSS]] directement.
Ci-dessous, le code vous permet d'afficher un texte avec un arrière-plan de couleur turquoise :
<source lang="HTML5">
<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Ma page web</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> // lien pour incorporer la bibliothèque w3.css
</head>
<div class="w3-container w3-teal> // ajout de la classe w3-container pour la boîte, et w3-teal pour la couleur turquoise
  <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>
</source>


== La notion de sélecteurs ==
== La notion de sélecteurs ==


* Un sélecteur est un "nom" qui indique à quels éléments d'une page HTML on desire appliquer une règle.
Un sélecteur est un "nom" qui indique pour quels éléments d'une page HTML on définit appliquer la règle.
* Chaque règle CSS commence nécessairement par un sélecteur.
 
Chaque règle CSS commence nécessairement par un sélecteur.


=== Rappel de la syntaxe pour une règle CSS: ===
=== Rappel de la syntaxe pour une règle CSS: ===


selecteur(s) { propriété: valeur ; propriété: valeur1, valeur2, valeur3 ; ...... }
<source lang="CSS">
sélecteur(s) { propriété: valeur ; propriété: valeur1, valeur2, valeur3 ; ...... }
</source>


Il existe plusieurs méthodes pour identifier les éléments, par exemple:
Il existe plusieurs méthodes pour identifier les éléments, par exemple:
* on indique le nom d'une balise (X)HTML
* on indique le nom d'une balise (X)HTML
* on indique la classe d'une balise (X)HTML
* on indique la classe d'une balise (X)HTML
Ligne 207 : Ligne 257 :


* On indique le nom d'une balise, ou encore une liste séparés par des virgules.
* On indique le nom d'une balise, ou encore une liste séparés par des virgules.
<source lang="CSS">
  H1 {color: green}
  H1 {color: green}
  H2 {color: green}
  H2 {color: green}
</source>


est équivalent à:
est équivalent à:


  H1, H2 {color: green}
<source lang="CSS">
  H1, H2 {color: green}</source>
 
Dans ce cas on utilise CSS pour changer l'affichage par défaut des différentes balises. Typiquement, on modifie la couleur de certains éléments, la taille des fontes, les marges, etc.
 
=== Les balises HTML &lt;div&gt; et &lt;span&gt; ===
 
* ont été créés spécialement pour un usage avec les feuilles de style
 
==== La balise &lt;div&gt; ====


* Dans ce cas on utilise CSS pour changer l'affichage par défaut des différentes balises
peut contenir toutes les autres balises HTML et donc servir à mettre en forme toute une section d'une texte (mais attention aux priorités! '' &lt;div&gt;'' est un bloc alors que '' &lt;span&gt; '' est un élément in-line. Autrement dit:
* Typiquement, on modifie la couleur de certains éléments, la taille des fontes, les marges, etc.
* &lt;div&gt; avec l'attribut class peut servir à faire des balises sur mesure ("custom tags") du type "ceci est une section" (voir plus loin)
* &lt;span&gt; sert à changer une séquence de caractères à l'intérieur d'une balise et permet donc de créer des "balises" pour la mise en page de mots (fontes, etc.)


=== Class et attributs ID ===
=== Class et attributs ID ===


==== Les attributs et sélecteurs "class" ====
'''Les attributs et sélecteurs "class"'''


* Mécanisme puissant pour:
L'utilisation d'attributs HTML ''div'' et ''id'' avec des sélecteurs de classe et de ID sont des mécanismes puissants pour:
** définir de classes de contenu (indépendamment des balises)
* définir des classes de contenu (indépendamment des balises)
** pour différencier plusieurs variantes d'une même balise
* pour différencier plusieurs variantes d'une même balise
* Principe: On associe une valeur à l'attribut "class"
* On peut aussi définir le style des enfants de la balise qui a l'attribut "class" ; mais il faut indiquer le chemin complet de l'arbre '' (dans l'ex., default ul li)'' .
* il est possible d'avoir plusieurs classes par éléments '' (dans l'ex., le 2ème &lt;p&gt;)'' .
* Lorsque deux styles définissent la même propriété, c'est celui qui est le plus L de l'élément qui "gagne" '' (dans l'ex., font-size)''


==== Classes dans une simple feuille de style ====
Principe: Dans le HTML, on associe une valeur à l'attribut "class" pour identifier toutes les balises que l'on veut traiter un peu différemment. On peut aussi définir le style des enfants de la balise qui a l'attribut "class", mais il faut indiquer le chemin complet de l'arbre:
  ul li
Il est possible de définir plusieurs classes par éléments
 
Lorsque deux règles définissent la même propriété, il y a un conflit de définition qui sera réglé par les règles de cascading.  Lire plus sur le cascading qui devient très compliqué dans [[:en:CSS tutorial]]. Les débutants ne doivent pas trop s'inquiéter.
 
* Les définitions "inline" ont priorité sur les définitions au niveau de la page qui eux ont priorité sur les fichiers importés.
* Parmi ces différent types de définitions, c'est le plus spécifique et aussi le plus récent qui "gagne", (''font-size'' dans l'exemple ci-dessous).
 
'''Exemple de classes dans une simple feuille de style''':


Source: '' http://tecfa.unige.ch/guides/css/ex/simple-css2.html''
Source: '' http://tecfa.unige.ch/guides/css/ex/simple-css2.html''


  &lt;STYLE type="text/css"&gt;
<source lang="html5">
  <style type="text/css">
     P.intro    {color: blue; margin-left: 4em; margin-right: 2em;}
     P.intro    {color: blue; margin-left: 4em; margin-right: 2em;}
     .default ul li {font-size: 0.8em;}
     .default ul li {font-size: 0.8em;}
     .default  {margin-left: 2em; font-size:1em;}
     .default  {margin-left: 2em; font-size:1em;}
     .bleu {color:red;}
     .bleu {color:red;}
   &lt;/STYLE&gt;
   </style>
   ......
   ......
  &lt;p class="intro"&gt;
  <p class="intro">
       Après des années de bricolage infâme ....
       Après des années de bricolage infâme ....
     &lt;/p&gt;
     </p>
  &lt;p class="default bleu"&gt;
  <p class="default bleu">
     bla bla
     bla bla
  &lt;/p&gt;
  </p>
  &lt;div class="default"&gt;
  <div class="default">
  &lt;ul&gt;
  <ul>
   &lt;li&gt;item 1&lt;/li&gt;
   <li>item 1</li>
   &lt;li&gt;item 2&lt;/li&gt;
   <li>item 2</li>
  &lt;/ul&gt;
  </ul>
  &lt;pre&gt;
  <pre>
     notre classe default marche partout, même pour un para préformaté
     notre classe default marche partout, même pour un para préformaté
  &lt;/pre&gt;
  </pre>
  &lt;/div&gt;
  </div>
</source>


Le style '' .default'' s'appliquera à tous les éléments dont la classe est "default" alors que le style '' .intro'' seulement aux balises '' &lt;p&gt;'' .
Le style '' .default'' s'appliquera à tous les éléments dont la classe est "default" alors que le style '' .intro'' seulement aux balises '' &lt;p&gt;'' .


==== Attribut ID ====
'''L'attribut ID'''
 
Il est parfois plus approprié d'utiliser l'attribut '''id''' (p.ex. pour positionner un élément ou encore lorsqu'on a un script ne manipule qu'un seul élément)


* Parfois plus économique d'utiliser l'attribut ID (p.ex. lorsqu'on a un script qui implique des id)
On peut aussi combiner les deux (définir un style pour la classe et l'id d'une même balise)
* on peut aussi combiner les deux (définir un style pour la classe et l'id d'une même balise)
 
Syntaxe:
* Le selecteur s'écrit avec un # devant
* Le selecteur s'écrit avec un # devant
* Si on veut définir les éléments enfants d'un éléments avec l'attribut id ayant une classe définie, on peut le faire sans passer par les éléments intérmédiaire
** (pour l'ex. ci-dessus, sans ul)


==== Wildcard ====
==== Wildcard ====


* La "Wildcard" (joker) est le '''*''' et peut s'appliquer à tous le éléments:
La "Wildcard" (joker) est le '''*''' et veut dire qu'on définit une règle pour tous les éléments:


  * {font-size: 12pt; }
  * {font-size: 12pt; }


* pratique pour définir une police par défaut pour tous les éléments sans la définir à chaque fois (y compris '' &lt;pre&gt;'' et '' &lt;button&gt;'' .
C'est pratique pour définir une police par défaut pour tous les éléments sans la définir pour chaque élément HTML.
 
=== Les balises HTML &lt;div&gt; et &lt;span&gt; ===
 
* ont été créés spécialement pour un usage avec les feuilles de style
 
==== La balise &lt;div&gt; ====
 
* peut contenir toutes les autres balises HTML et donc servir à mettre en forme toute une section d'une texte (mais attention aux priorités! '' &lt;div&gt;'' est un bloc alors que '' &lt;span&gt; '' est un élément in-line


Il ne sera pas possible de définir une largeur de 100% -toute la page- pour un span)
'''Exemple de définition "inline" d'un style'''
* &lt;div&gt; avec l'attribut class peut servir à faire des balises sur mesure ("custom tags") (voir plus loin)
* &lt;span&gt; sert à changer une séquence de caractères à l'intérieur d'une balise et permet donc de créer des "balises" pour la mise en page de mots (fontes, etc.)


==== Définition "inline" d'un style ====
Objectif: Changer la couleur d'un partie du texte


Exemple: Changer la couleur d'un partie du texte
Source: http://tecfa.unige.ch/guides/css/ex/simple-div-span.html simple-div-span.html]


Source: '' http://tecfa.unige.ch/guides/css/ex/simple-div-span.html''
<source lang="CSS">
 
  <div style="color: blue">
  &lt;div style="color: blue"&gt;
       <h1>L'influence d'un div tag qui aime le bleu</h1>
       &lt;h1&gt;L'influence d'un div tag qui aime le bleu&lt;/h1&gt;
       <P>
       &lt;P&gt;
                 bla bla bla
                 bla bla bla
       &lt;/P&gt;
       </P>
  &lt;/div&gt;
  </div>
</source>


=== Définition externe d'un style ===
''' Exemple de définition externe d'un style'''
Objectif: Changer la couleur back-ground (arrière-plan)


Exemple: Faire des backgrounds avec une définition externe
Source: http://tecfa.unige.ch/guides/css/ex/simple-div2.html simple-div2.html]
 
<source lang="CSS">
Source: '' http://tecfa.unige.ch/guides/css/ex/simple-div2.html''
  <style>
  &lt;style&gt;
    div.important {
      div.important {
      background: rgb(204,204,255);
        background: rgb(204,204,255);
      padding: 0.5em; border: none;
        padding: 0.5em; border: none;
       }
       }
  &lt;/style&gt;
  </style>
 
  .....
  .....
 
  <body>
  &lt;body&gt;
    <div class="important">
    &lt;div class="important"&gt;
       <h1>Une section importante</h1>
       &lt;h1&gt;Une section importante&lt;/h1&gt;
       <h2>Un sous-titre</h2>
       &lt;h2&gt;Un sous-titre&lt;/h2&gt;
       <P>
       &lt;P&gt;
               Tout le div a son joli background à lui.
               Tout le div a son joli background à lui.
               bla bla bla
               bla bla bla
       &lt;/P&gt;
       </P>
     &lt;/div&gt;
     </div>
</source>


=== Sélecteurs contextuels ===
=== Sélecteurs contextuels ===
Ligne 327 : Ligne 386 :
Exemple: Simple utilisation d'un sélecteur contextuel
Exemple: Simple utilisation d'un sélecteur contextuel


Source: '' http://tecfa.unige.ch/guides/css/ex/simple-css5.html''
Source: http://tecfa.unige.ch/guides/css/ex/simple-css5.html css5.html]


    &lt;STYLE type="text/css"&gt;
<source lang="CSS">
      &lt;!--
<style type="text/css">
      P strong    {color: red;}
  p strong    {color: red;}
      --&gt;
</style>
    &lt;/STYLE&gt;
  ......
  ......
    ''&lt;P&gt;''
<p>


      Ceci est un paragraph avec un ''&lt;strong&gt;''
Ceci est un paragraphe avec un ''&lt;strong&gt;'' strong modifié ''&lt;/strong&gt;''.
  strong modifié ''&lt;/strong&gt;''.


En d'autres terme cela permet de redéfinir de façon simple le rendering
En d'autres terme cela permet de redéfinir de façon simple le rendering
de certaines balises "logiques" comme &amp;lt;em&amp;gt; ou &amp;lt;strong&amp;gt;.
de certaines balises "logiques" comme &amp;lt;em&amp;gt; ou &amp;lt;strong&amp;gt;.
 
</p>
    '' &lt;/P&gt;''
</source>


=== Pseudo sélecteurs (élément et classes) ===
=== Pseudo sélecteurs (élément et classes) ===


* Un pseudo sélecteur identifie un élément par des critères autres que balise et classe
* Un pseudo sélecteur identifie un élément par des critères autres que balise et classe
* CSS2 en définit pleins, ci-dessous les éléments de CSS1.
* CSS2 en définit plein, ci-dessous les éléments de CSS1.
* Attention: certains navigateurs implémentent mal ces fonctionalités CSS1.
* Attention: certains navigateurs implémentent mal ces fonctionnalités CSS1.
 
==== Pseudo-éléments ====


Les Pseudo-éléments:
* permettent d'identifier des éléments non-balisés (comme la première lettre ou la première ligne)
* permettent d'identifier des éléments non-balisés (comme la première lettre ou la première ligne)
* Marche avec les navigateurs IE 5.5 (à confirmer) et Mozilla
* Marche avec les navigateurs IE 5.5 (à confirmer) et Mozilla


Exemple: Pseudo-sélecteurs
Exemple: Pseudo-sélecteurs
 
* source: http://tecfa.unige.ch/guides/css/ex/pseudo-selectors.html pseudo-selectors.html]
Ssource: '' http://tecfa.unige.ch/guides/css/ex/pseudo-selectors.html''
<source lang="CSS">
 
<style>
    &lt;style&gt;
  P:first-letter { font-size: 500%; color: green }
      P:''first-letter'' { font-size: 500%; color: green }
  P:first-line { color: green }
      P:''first-line'' { color: green }
</style>
    &lt;/style&gt;
</source>


==== Pseudo-classes ====
==== Pseudo-classes ====


* Pour rendre plus difficile la lecture des liens :)
Pour rendre plus difficile la lecture des liens :)


  ''A:link'' { color : white }
<source lang="CSS">
  ''A:visited'' { color : yellow }
  A:link { color : white }
  ''A:active'' {color : red }
  A:visited { color : yellow }
  A:active {color : red }
</source>


== Les déclarations CSS ==
== Les déclarations CSS ==
Ligne 377 : Ligne 435 :
==== Rappel de la syntaxe pour une règle CSS: ====
==== Rappel de la syntaxe pour une règle CSS: ====


  selecteur(s) { propriété: valeur ; propriété: valeur1, valeur2, valeur3 ; ...... }
  sélecteur(s) { propriété: valeur ; propriété: valeur1, valeur2, valeur3 ; ...... }


[[Image:css-intro-2.png]]
[[Image:css-intro-2.png]]


'''Attention:'''
'''Attention:'''Les valeurs des propriétés sont séparées par des "," et les pairs "propriétés: valeurs" sont séparées par des ";"


** Les valeurs des propriétés sont séparées par des ","
Nous allons maintenant introduire
** Les pairs "propriétés: valeurs" sont séparées par des ";"
* Types d'élément HTML
 
* Boites (boxes)
* Types
* Boites
* Positionnement......
* Positionnement......


=== Types d'éléments et défauts HTML ===
=== Types d'affichage et défauts HTML ===


Avant d'utiliser un style, voir quel est l'élément html qui s'en rapproche le plus. Par exemple, pour faire des titres, se baser sur '' &lt;h1&gt;'' , '' &lt;h2&gt;'' , '' &lt;h3&gt;'' ... plutôt que sur '' &lt;p&gt;'' ou '' &lt;div&gt;'' .
Avant de planifier un style, il faut d'abord vérifier que vous utilisez HTML correctement. Par exemple, pour faire des titres, se baser sur '' &lt;h1&gt;'' , '' &lt;h2&gt;'' , '' &lt;h3&gt;'' ... plutôt que sur '' &lt;p&gt;'' ou '' &lt;div&gt;'' .


En typographie on distingue entre 2-3 types d'éléments de base:
En typographie on distingue entre 2-3 types d'affichage (display types) de base:


# les blocs (blocks), c.a.d. des éléments qui commencent un nouveau paragraphe. Exemples HTML: &lt;p&gt;, &lt;h2&gt;, &lt;div&gt;
# les blocs (blocks), c.a.d. des éléments qui commencent un nouveau paragraphe. Exemples HTML: &lt;p&gt;, &lt;h2&gt;, &lt;div&gt;
Ligne 400 : Ligne 456 :
# les "in-line", c.a.d. s'insérant dans un paragraphe. Exemples HTML: &lt;b&gt;, &lt;strong&gt;, &lt;span&gt;
# les "in-line", c.a.d. s'insérant dans un paragraphe. Exemples HTML: &lt;b&gt;, &lt;strong&gt;, &lt;span&gt;


Blocs, éléments de liste, élément inline etc. sont représentés dans CSS comme des '''boites''' (Angl. "box"). Pour chaque type de boite, il existe un jeu de règles pour définir les marges, la position, les couleurs du texte et de l'arrière-plan. On peut même définir leurs positions absolues sur la page. Donc un bloc est une boite qu'on remplit avec un contenu selon les règles que l'on choisit.
Il est possible de changer de type, par exemple afficher une liste à puce comme une suite de phrases. Pour redéfinir ces valeurs par défaut:
<source lang="CSS">
  display: block;
  display: block;
  display: inline;
  display: inline;
  display: list-item;
  display: list-item;
</source>


* Pour chaque élément "bloc" il existe un jeu de règles pour définir les marges, la position, les couleurs du texte et de l'arrière-plan. On peut même définir leurs positions absolues sur la page. Donc un bloc est une boite qu'on remplit avec un contenu selon les règles que l'on choisit.
Note: En réalité CSS2 distingue parmi une vingtaine de différents ''display types'', mais il faut surtout retenir la différence entre "Block" (nouvelle ligne) et "inline".
* Evidémment, il est possible de changer de type, par exemple afficher une liste à puce comme une suite de phrases.


==== Exemple CSS positioning - &lt;li&gt; inline ====
Exemple CSS positioning où on modifie &lt;li&gt; en "inline" affiché en ligne:
* Source: http://tecfa.unige.ch/guides/css/ex/simple-inline.html simple-inline.html]


Source: ''http://tecfa.unige.ch/guides/css/ex/simple-inline.html''
<source lang="CSS">
<style type="text/css" xml:space="preserve">
  ul#menu li {
  display: inline;
  text-align: center;
  padding: 2px ;
  margin: 0;
  width: 19%;
  }
  </style>
</source>


== Attributs du texte ==
== Attributs du texte ==


Les attributs les plus utilisés sont les suivants (pleins d'autres !) (voir les pointeurs tecfa)
Les attributs les plus utilisés sont les suivants. Il existe pleins d'autres, voir une bonne référence CSS.


=== Attributs pour la gestion des propriétés d'écriture ===
=== Attributs pour la gestion des propriétés d'écriture ===


{| border="1"
{| border="1"
! rowspan="1" colspan="1" |
! colspan="1" rowspan="1" |
Attributs
Attributs
! rowspan="1" colspan="1" |
! colspan="1" rowspan="1" |
Valeurs
Valeurs
! rowspan="1" colspan="1" |
! colspan="1" rowspan="1" |
se charge de
sert à définir
! rowspan="1" colspan="1" |
! colspan="1" rowspan="1" |
exemple
exemple
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
font-family
font-family
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
nom de l'écriture
nom de l'écriture
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
police
police
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' font-family: Helvetica;''
'' font-family: Helvetica;''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
serif
serif
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
famille de police, écriture de type serif
famille de police, écriture de type serif
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' font-family: Times,serif;''
'' font-family: Times,serif;''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
font-size
font-size
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
pt, cm
pt, cm
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
taille de police
taille de police
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' font-size: 14pt;''
'' font-size: 14pt;''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
font-style
font-style
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
forme d'écriture
forme d'écriture
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' ''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
italic
italic
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
italique
italique
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' font-style: italique;''
'' font-style: italique;''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
font-weight
font-weight
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
de 100 à 900
de 100 à 900
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
épaisseur
épaisseur
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' font-weight: 500;''
'' font-weight: 500;''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
normal
normal
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
correspond à la valeur 400
correspond à la valeur 400
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' font-weight: normal;''
'' font-weight: normal;''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
bold
bold
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
correspond à la valeur 700
correspond à la valeur 700
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' font-weight: bold;''
'' font-weight: bold;''
|}
|}
Ligne 503 : Ligne 573 :


{| border="1"
{| border="1"
! rowspan="1" colspan="1" |
! colspan="1" rowspan="1" |
Attributs
Attributs
! rowspan="1" colspan="1" |
! colspan="1" rowspan="1" |
Valeurs
Valeurs
! rowspan="1" colspan="1" |
! colspan="1" rowspan="1" |
se charge de
se charge de
! rowspan="1" colspan="1" |
! colspan="1" rowspan="1" |
exemple
exemple
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
text-align
text-align
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
alignement des paragraphes
alignement des paragraphes
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' ''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
left
left
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
aligné à gauche, valeur par défaut
aligné à gauche, valeur par défaut
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' text-align: left;''
'' text-align: left;''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
center
center
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
centré
centré
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' text-align: center;''
'' text-align: center;''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
right
right
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
aligné à droite
aligné à droite
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' text-align: right;''
'' text-align: right;''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
justify
justify
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
justifié en forme de bloc
justifié en forme de bloc
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' text-align: jutify;''
'' text-align: jutify;''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
text-indent
text-indent
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
pt, cm
pt, cm
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
retrait de la première ligne
retrait de la première ligne
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' text-indent: 1cm;''
'' text-indent: 1cm;''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
line-height
line-height
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
pt, cm
pt, cm
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
hauteur des lignes
hauteur des lignes
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' line-height: 14pt;''
'' line-height: 14pt;''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
valeur relative
valeur relative
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
écart entre les lignes par rapport à la taille de l'écriture
écart entre les lignes par rapport à la taille de l'écriture
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' line-height: 1.2;''
'' line-height: 1.2;''
|}
|}


== Les boites CSS et leur positionnement ==
== Les boites CSS et leur positionnement ==
Ligne 592 : Ligne 659 :
=== Anatomie des boites ===
=== Anatomie des boites ===


Une boite (chaque élément "bloc" '' sauf les tables et autres exeptions qui ont des priorités à part'' ) possède l'anatomie suivante:
On peut considérer tous les éléments de HTML comme des boîtes. Dans CSS, le terme "Box-Model" est utilisé en parlant du design(de la conception) et la disposition.
 
Une boite (chaque élément "bloc" '' sauf les tables et autres exceptions qui ont des priorités à part'' ) possède l'anatomie suivante:


[[Image:css-intro-3.png]]
[[Image:css-intro-3.png]]


Chaque élément correspond à un selecteur CSS qui permet de définir la largeur générale (des 4 cotés) ou encore la largeur de chaque côté. On peut aussi définir dessin et couleur du cadre.
Le modèle de boites nous permet de placer une bordure autour des éléments, ainsi que de définir des espaces entre les éléments. Chaque élément correspond à un sélecteur CSS qui permet de définir la largeur générale (des 4 côtés) ou encore la largeur de chaque côté. On peut aussi définir dessin et couleur du cadre.


=== Les bords, les cadres et le couleur ===
=== Les bords, les cadres et la couleur ===


{| border="1"
{| border="1"
! rowspan="1" colspan="1" |
! colspan="1" rowspan="1" |
Attributs
Attributs
! rowspan="1" colspan="1" |
! colspan="1" rowspan="1" |
Valeurs
Valeurs
! rowspan="1" colspan="1" |
! colspan="1" rowspan="1" |
se charge de
se charge de
! rowspan="1" colspan="1" |
! colspan="1" rowspan="1" |
exemple
exemple
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
margin
margin
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
pt, px, cm, %
pt, px, cm, %
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
4 marges
4 marges
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' body {margin:1cm;}''
'' body {margin:1cm;}''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
margin-top
margin-top
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
marge en haut
marge en haut
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' p {margin-top:10px;}''
'' p {margin-top:10px;}''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
margin-bottom
margin-bottom
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
marge en bas
marge en bas
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' h3 {margin-bottom:3pt;}''
'' h3 {margin-bottom:3pt;}''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
margin-left
margin-left
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
marge à gauche
marge à gauche
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' img {margin-left:50px;}''
'' img {margin-left:50px;}''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
margin-right
margin-right
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
marge à droite
marge à droite
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' p.citation {margin-right:10pt;}''
'' p.citation {margin-right:10pt;}''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
border
border
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
pt,px, cm, %
pt,px, cm, %
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
largeur du cadre
largeur du cadre
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' p {border:5px;}''
'' p {border:5px;}''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
border-top
border-top
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
'' h1 {border-top:0.2cm;}''
'' h1 {border-top:0.2cm;}''
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
etc ...
etc ...
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
border-style
border-style
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
style de cadre
style de cadre
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
solid
solid
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
ligne simple
ligne simple
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
p {border-style:solid;}
p {border-style:solid;}
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |


| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
double
double
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
ligne double
ligne double
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
h1 {border-style:double;}
h1 {border-style:double;}
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
padding
padding
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
pt,px,cm,%,etc
pt,px,cm,%,etc
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
marge intérieures
marge intérieures
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
p {padding: 5px;}
p {padding: 5px;}
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
color
color
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
valeur hexa /nom
valeur hexa /nom
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
couleur d'un élément
couleur d'un élément
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
<nowiki>#menu {color:#000000;}</nowiki>body {color:blue;}
<nowiki>#menu {color:#000000;}</nowiki>body {color:blue;}
|-
|-
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
background
background
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
aussi
aussi
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
couleur de l'arrière-plan
couleur de l'arrière-plan
| rowspan="1" colspan="1" |
| colspan="1" rowspan="1" |
h1, h2 {background:silver;}
h1, h2 {background:silver;}
|}
|}


* Ceci n'est qu'un apperçu !
* Ceci n'est qu'un aperçu !
* Il existe notamment des "shortcuts" qu'on montre sur la page suivante.
* Il existe notamment des "shortcuts" qu'on montre sur la page suivante.


==== Les bords, les cadres et la couleur (shortcuts) ====
'''Exemple:'''


Exemple:
<source lang="CSS">
 
#content {
<nowiki>#content {</nowiki>
   border-right:    2px dotted black;
   border-right:    2px dotted black;
   border-bottom:    2px dotted black;
   border-bottom:    2px dotted black;
Ligne 759 : Ligne 827 :
   padding: 3em 20% 2em;
   padding: 3em 20% 2em;
  }
  }
</source>


==== Exemple: Plusieurs exemples simples avec des boites ====
'''Plusieurs exemples simples avec des boites'''
 
* Source: [http://tecfa.unige.ch/guides/css/ex/boxing0.html boxing0.html]
* '' http://tecfa.unige.ch/guides/css/ex/boxing0.html''
* la boite pour le "body" a des lignes pointillées
* la boite pour le "body" a des lignes pointillés
* la boite pour un &lt;p&gt; a une petite marge, un bord solide, et une couleur en arrière-plan
* la boite pour un &lt;p&gt; a une petite marge, un bord solide, et une couleur en arrière-plan
* une partie de ce meme paragraphe est mis dans une boite avec un "span"
* une partie de ce même paragraphe est mis dans une boite avec un "span"


<pre>
<source lang="CSS">
  <body style="border-style:dotted">
  <body style="border-style:dotted">
  <h1>Boites</h1>
  <h1>Boites</h1>
Ligne 783 : Ligne 851 :
  <p>Voir <a href="http://tecfa.unige.ch/guides/css/ex/boxing1.html">boxing1.html</a>  pour plus ... </p>
  <p>Voir <a href="http://tecfa.unige.ch/guides/css/ex/boxing1.html">boxing1.html</a>  pour plus ... </p>
  </body>
  </body>
</pre>
</source>


=== Le positionnement ===
=== Le positionnement ===
Ligne 790 : Ligne 858 :
* Mais on peut les positionner selon des coordonnées absolues ou relatives n'importe où sur une page (voir les exemples qui suivent)
* Mais on peut les positionner selon des coordonnées absolues ou relatives n'importe où sur une page (voir les exemples qui suivent)


<nowiki>#content    {    /*  les coordonnees selon l'horloge: 12, 3, 6, 9 */</nowiki>
<source lang="CSS">
#content    {    /*  les coordonnées selon l'horloge: 12, 3, 6, 9 */
     float:    left;
     float:    left;
     width:    80%;
     width:    80%;
Ligne 799 : Ligne 868 :
     }
     }


<nowiki>#menu    { /* qui sera mis à droite */</nowiki>
#menu    { /* qui sera mis à droite */
     position: absolute;
     position: absolute;
     right: 0;
     right: 0;
Ligne 808 : Ligne 877 :
     background-color: #ffffff;
     background-color: #ffffff;
     }
     }
</source>


'''Exemple: Positionnement relatif de boites flottantes'''
'''Exemple: Positionnement relatif de boites flottantes'''
* http://tecfa.unige.ch/guides/css/ex/boxing1.html
* http://tecfa.unige.ch/guides/css/ex/boxing1.html


'''Exemple: Positionnement relatif horizontal + vertical'''
'''Exemple: Positionnement relatif horizontal + vertical'''
 
* http://tecfa.unige.ch/guides/css/ex/boxing2.html
* [http://tecfa.unige.ch/guides/css/ex/boxing2.html http://tecfa.unige.ch/guides/css/ex/boxing2.html]


'''Exemple: Un menu: "ul/li" comme boutons''':
'''Exemple: Un menu: "ul/li" comme boutons''':
* http://tecfa.unige.ch/guides/css/ex/boxing3.html


* [http://tecfa.unige.ch/guides/css/ex/boxing3.html http://tecfa.unige.ch/guides/css/ex/boxing3.html]
'''Exemple: Positions absolues'''
* http://tecfa.unige.ch/guides/css/ex/boxing4.html


'''Exemple: Positions absolues'''
'''Exemple: Layout 3-colonnes'''
* http://tecfa.unige.ch/guides/css/ex/boxing5.html
===Les Felxbox===


* [http://tecfa.unige.ch/guides/css/ex/boxing4.html http://tecfa.unige.ch/guides/css/ex/boxing4.html]
Le module des boîtes flexibles, aussi appelé « [[flexbox]] », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner.


'''Exemple: Layout 3-colonnes'''
L'intérêt du mode [[Flexbox]] est de permettre d'organiser et de redimensionner facilement des pages complexes. La page est décomposée en un agencement de boîtes qui peuvent se suivre et s'imbriquer. Il s'agit ensuite de définir leurs tailles et leurs interactions (entre boîtes voisines pour celles qui se suivent, entre boîtes et "boîtes ancêtres" pour celles qui s'imbriquent).


* http://tecfa.unige.ch/guides/css/ex/boxing5.html
On peut par ce moyen remplir au mieux l'espace libre en permettant une adaptation automatique des éléments de la page lorsqu'elle est redimensionnée.
Pour en savoir plus sur leur fonctionnement rendez-vous sur la page [[Flexbox]].


== XML avec CSS ==
== XML avec CSS ==
Ligne 835 : Ligne 909 :
* Il est conseillé d'utiliser une feuille externe et ensuite l'importer:
* Il est conseillé d'utiliser une feuille externe et ensuite l'importer:


  &lt;?xml-stylesheet type="text/css" href="feuille.css"?&gt;
  <?xml-stylesheet type="text/css" href="feuille.css"?>


* note: pas de feuilles de styles internes comme pour HTML !
* note: pas de feuilles de styles internes comme pour HTML !
Ligne 859 : Ligne 933 :
</pre>
</pre>


=== Selecteurs CSS2 pour XML et HTML ===
=== Sélecteurs CSS2 pour XML et HTML ===


* XML nécessite un navigateur qui supporte CSS2 (au moins en partie)
* XML nécessite un navigateur qui supporte CSS2 (au moins en partie)
* A part la notation '' Balise.classe'' les sélecteur XML et HTML sont les mêmes !
* A part la notation '' Balise.classe'' les sélecteurs XML et HTML sont les mêmes !


==== sélection d'un élément ====
==== sélection d'un élément ====
Ligne 880 : Ligne 954 :
Exemple:
Exemple:


  Step &gt; Title { .... }
  Step > Title { .... }


==== sélection d'un élément qui est le '' descendant'' d'un élément ====
==== sélection d'un élément qui est le '' descendant'' d'un élément ====
Ligne 892 : Ligne 966 :
Dans l'exemple suivant P est un descendant de LI, LI doit être un enfant direct de OL. OL est dans DIV.  
Dans l'exemple suivant P est un descendant de LI, LI doit être un enfant direct de OL. OL est dans DIV.  


  DIV OL&gt;LI P
  DIV OL>LI P


==== sélection d'un élément qui est le '' frère'' d'un élément ====
==== sélection d'un élément qui est le '' frère'' d'un élément ====
Ligne 947 : Ligne 1 021 :
(répertoire avec tous les fichiers)
(répertoire avec tous les fichiers)


* Le DTD Stebbystep permet de formatter des instructions de type "pas par pas", par exemple comment installer un logiciel.
* Le DTD Stebbystep permet de formater des instructions de type "pas par pas", par exemple comment installer un logiciel.


'''Exemple Récit'''
'''Exemple Récit'''


* '' http://tecfa.unige.ch/guides/xml/examples/recit/''
* '' http://tecfa.unige.ch/guides/xml/examples/recit/''
( répetoire avec une solution CSS et une solution XSLT )
( répertoire avec une solution CSS et une solution XSLT )


* La DTD "RECIT" permet d'écrire des simples récits avec une grammaire génératrice.
* La DTD "RECIT" permet d'écrire des simples récits avec une grammaire génératrice.
Ligne 960 : Ligne 1 034 :
=== Ressources CSS ===
=== Ressources CSS ===


Voir :
Voir aussi:
* [[Liens CSS]] (ce wiki)
* [[Liens CSS]] (ce wiki)
* [[:en:CSS links|CSS links]] (Edutechwiki - Anglais)
* [[:en:CSS links|CSS links]] (Edutechwiki - Anglais)


[[en:CSS]]
; Extensions FireFox
* [https://addons.mozilla.org/en-US/firefox/addon/60 Web developper] (menu: ''OUtils->Web developer->CSS->View Style Information'', ensuite cliquer partout dans la page et regarder les infos)
* [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox] Une référence HTML/CSS intégrée au navigateur (cet addon n'est plus fonctionnel)
 
; Online Manuals
* [http://reference.sitepoint.com/css CSS Reference] at SitePoint
* [http://www.htmlpedia.org/wiki/List_of_CSS_Properties List of CSS Properties] at HTMLPedia
* [https://developer.mozilla.org/en-US/docs/Learn/CSS Learn to style HTML using CSS] at Developer Mozilla
 
; Standards
* http://www.w3.org/Style/CSS/ (CSS page of the W3C)
* http://www.w3.org/TR/REC-CSS2/ (CSS 2 specification)
 
; Compatibility tables
: http://www.quirksmode.org/css/contents.html (consult this for IE 6/7! in particular)
 
; CSS Validator (à utiliser SVP !!)
: http://jigsaw.w3.org/css-validator/
 
; Slides
 
* [http://tecfa.unige.ch/guides/tie/html/css-intro/css-intro.html http://tecfa.unige.ch/guides/tie/html/css-into/css-intro.html] (Transparents HTML)
* http://tecfa.unige.ch/guides/tie/pdf/files/css-intro.pdf (Transparents PDF)
 
; Version anglaise


=== Slides ===
* [[:en:CSS tutorial|CSS tutorial]] (probablement de meilleure qualité)
* '' [http://tecfa.unige.ch/guides/tie/html/css-intro/css-intro.html http://tecfa.unige.ch/guides/tie/html/css-into/css-intro.html]'' (Transparents HTML)
* '' http://tecfa.unige.ch/guides/tie/pdf/files/css-intro.pdf'' (Transparents PDF)


'''Cours'''
* [https://www.edx.org/course/css-basics CSS Basics] : Cours gratuit en anglais sur la plateforme edX par W3C. Certification payante. (lien corrigé)
* [https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3 OpenClassrooms] : Cours gratuit pour créer un site avec HTML5 et CSS3


[[Category: Tutoriels]]
'''Astuces'''
[[Category: STIC]]
* [https://www.w3.org/Style/Examples/007/Overview.en.html CSS tips & tricks] : Collection d'exemples de CSS dans le site officiel de W3C.
'''Histoire'''
* [https://www.w3.org/Style/CSS20/history.html A brief history of CSS] until 2016 at W3C.
[[Category: Tutoriel]]
[[Category: Ressources STIC]]
[[en:CSS tutorial]]
[[Category: CSS]]

Dernière version du 15 janvier 2023 à 10:00

Introduction

Petite introduction à CSS. Il s'agit d'une importation de transparents - à compléter (!) Le CSS est un langage utilisé dans le domaine de l'informatique. Il s'agit d'une feuille de style en cascade (Cascading Style Sheets) c.à.d un fichier qui permet de créer toute la structure “esthétique“ d'une page web. Dans un langage plus technique on dira que le CSS permet de faire une description d'un document comme HTML ou XML. Le CSS s'occupera donc du style de la page (c.à.d sa mise en page), les couleurs du fond et du texte, la taille, le choix des caractères, la structure spatiale de contenus etc., (à compléter!).--Kamanda0 (discussion) 3 novembre 2013 à 10:19 (CET) / Daniel K. Schneider 26 août 2008 à 14:21 (CEST)

Voir aussi: Liens CSS (page avec des ressources)

Objectifs:

  • Savoir faire de simples style sheets HTML avec CSS
  • Faire des pages emboîtées sans tables
  • XML avec CSS
  • (Pas de DHTML pour le moment, ce se fera dans un autre module je pense)

Introduction aux "Cascading Style Sheets"

Motivation

Avantages:

  • Mises en page HTML et XML sophistiquées
  • DHTML (changement de positionnement d'éléments sur x,y et z par exemple)
  • Séparation de contenu et de style:
    • permet de servir une page à plusieurs "sauces" (HTML riche, HTML pauvre mais efficace, HTML vocal, ....), donc variantes pour imprimer, le PDA, etc.
    • permet de gérer centralement le "look" de plein de pages, donc diminue le coût de maintenance
    • rend une page plus "lisible" et plus rapide à télécharger

Inconvénients

  • Implémentations CSS1: bonnes dans Mozilla/Firefox 2+ et potables dans IE 6+
  • Implémentations CSS2: toujours lacunaires.
  • Il existe des tables de compatibilités, voir CSS (en Anglais)

Ce qui manque

  • Dans CSS1 / CSS2 il existe peu de capacités pour transformer un texte (voir XSLT)

Principe de base

  • Feuille de style = jeux de règles qui précisent l'affichage d'un élément HTML ou XML
  • Chaque règle est composée:
    • d'un sélecteur (qui indique à quel type d'élément la règle s'applique)
    • une déclaration (qui comprend une ou plusieurs instructions de mise en page)

Exemple (de sensibilisation)

H1 { color: red }
P  { font-face: Verdana, sans-serif ; font-size: 12pt}
H1, H2, H3 { color : blue }
H1.ChapterTOC, H2.PeriodeTOC, H2.ExerciceTOC, H2.SectionTOC  {
   display: block;text-indent: 30pt;
   text-align: left; font-size: 14.000000pt;
   font-weight: Bold;     font-family: "Times";
      }

Css-intro-1.png

Conseils HTML

  • Mettez des balises fermantes (<p> .....</p>, <li> .... </li>, etc)
  • Testez avec Mozilla/Firefox, ajustez ensuite pour IE Explorer (et autres navigateurs déficients).

Pour être compatible:

  • Pour gérer les anciens navigateurs (NS 4 et IE 5) comprenant mal CSS il faut écrire des scripts de filtrage (disponibles sur le "web master's sites").
  • Pour gérer les Netscape 3 etc. pas de problème, ils ignorent les CSS

Association d'une feuille de style à une page HTML

Il existe plusieurs méthodes

Styles "inline"

Il est possible de définir des règles d'affichage pour des éléments HTML grâce à l'attribut "style".

Exemple de code:

 <p style="color: red; font: 12pt times; margin-left: 2em">
  On peut définir un style pour chaque balise. 
  Ce paragraphe contient son propre style, mais ce n'est pas très efficace ...
 </p>

Dans cet exemple, on ajoute plusieurs propriétés CSS à l'élément "p" (un paragraphe):

  • color: red = on défini la couleur du texte.
  • font: 12pt times = on défini la police du paragraphe.
  • margin-left = on défini les marges gauches.

Ce principe de "style inline" s'applique tous les éléments HTML (span, div, li, etc.). Exemple avec la balise "span":

 <p>
 On peut définir <span style="color: red;"> une phrase toute
 rouge </span>. Et revenir à la normale plus tard ...
</p>

Résultat: On peut définir une phrase toute rouge . Et revenir à la normale plus tard ...

Le désavantage de cette méthode est que le code CSS est intégré aux pages HTML. Il n'y a donc pas de séparation entre le contenu et la présentation.

Lorsque vous voulez modifier le style d'un élément, il est nécessaire d'ouvrir et de modifier chaque document HTML, puis de trouver l'élément en question dans le code. Selon le nombre de pages HTML et le nombre de lignes de code, cela peut être très fastidieux.

Exemple live: http://tecfa.unige.ch/guides/css/ex/simple-css2.html

Feuille de style imbriquée dans une page

  • À la place de créer exprès une feuille de style css dans un autre fichier, on met les informations nécessitées à l'intérieur de notre feuille html. Pratique quand on n'a pas beaucoup de déclaration à insérer dans notre page html.--Kamanda0 (discussion) 3 novembre 2013 à 11:36 (CET)
  • Déclaration d'une feuille de style avec la balise <style>

Exemple 3-1: Simples feuilles CSS imbriquées

Utilisation:

  • La déclaration doit se faire dans le <head> (sinon il peut y avoir des problèmes, par ex. la couleur background du body qui ne s'affiche pas)
  • Pour rester compatible avec les très très anciens navigateurs, il faudrait commenter les règles CSS comme dans l'exemple ci-dessous !
 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">
 <html> <head>
    <title>Simple CSS démo</title>
    <style type="text/css">
       <!--
       body     {background: white; font-family: Helvetica, Arial, sans-serif;}
       H2, H3    {font-family: Helvetica, Arial, sans-serif;}
       P.intro     {color: blue; margin-left: 4em; margin-right: 2em;}
       .default  {margin-left: 2em;}
       -->
     </style>
   </head>

Feuille de style externe associé à des pages HTML

  • Solution efficace pour gérer le look de plusieurs (ou plein!) de pages
  • La balise <link> doit se trouver dans le <head>
  • Si vous utilisez des caractères non standards dans le texte ("é","ö", etc.) il faudrait déclarer l'attribut CHARSET dans le HTML (à vérifier)
  • Pensez à créer un répertoire central pour vos styles ! (A tecfa: /web/styles)
  • Vous pouvez regarder la source d'une page HTML et ensuite manuellement entrer l'URL pour le CSS et le regarder (s'il en existe un)

Exemple: Simple feuille CSS externe

 <html>
   <head>
     <link rel="stylesheet" href="simple-css3.css" charset="UTF-8" type="text/css"/>
     <title>Simple CSS démo III</title>
   </head>
   <body>

ATTENTION : Dans le fichier - feuille de style vous mettez juste les déclarations CSS, rien d'autre: pas d'entêtes, rien d'autre !!

Multiples feuilles de style

Les multiples feuilles de style ont plusieurs usages:

(1) On peut laisser l'utilisateur choisir !

(2) Pensez à faire une version spéciale pour l'impression

Exemple de la home page de DKS:

<style type="text/css" media="all">
       @import "/tecfa-people/dks-normal.css";
</style>
 <link rel="alternate stylesheet"
  type="text/css" media="screen"
  title="Friendly fonts
 " href="/tecfa-people/dks-friendly.css" />
  <link rel="alternate stylesheet" type="text/css" media="screen" 
      title="bigtype" href="/tecfa-people/dks-big.css" />
  <link rel="alternate stylesheet" type="text/css" media="screen" 
      title="Print with URLs" href="/tecfa-people/dks-print-url.css" />
  <link rel="alternate stylesheet" type="text/css" media="screen" 
      title="Print" href="/tecfa-people/dks-print.css" />
  <link rel="stylesheet" type="text/css" media="print"
      href="/tecfa-people/dks-print.css" />

Importation

On peut importer un fichier CSS depuis un autre fichier CSS ou encore depuis le CSS qui se trouve à l'intérieur d'une balise style. Il s'agit donc aussi d'une alternative au "linking" ci-dessus.

<style>
  @import ("simple-css3.css") ;
  p.default {margin-right: 3em; margin-left: 3em}
</style>

Feuilles de style client-side

  • Marche uniquement dans Mozilla et c'est très cool:
  • On peut censurer tout ce qu'on aime pas, adapter la page à la vue etc. :)

Lire: en:Client-side Javascript (cette page est vide)

A partir d'une bibliothèque CSS externe

Des bibliothèques (framework en anglais) se proposent de gérer vos styles. Cela vous permet d'éviter de créer votre propre .css et d'utiliser des styles 'pré-faits'.

Un exemple de bibliothèque comme W3.CSS peut être implémenté directement sur votre page .html.

Explication basique et simple de W3.CSS peut se faire sur la page EduTechWiki W3.CSS directement.

Ci-dessous, le code vous permet d'afficher un texte avec un arrière-plan de couleur turquoise :

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Ma page web</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> // lien pour incorporer la bibliothèque w3.css
</head>

<div class="w3-container w3-teal> // ajout de la classe w3-container pour la boîte, et w3-teal pour la couleur turquoise
  <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>

La notion de sélecteurs

Un sélecteur est un "nom" qui indique pour quels éléments d'une page HTML on définit appliquer la règle.

Chaque règle CSS commence nécessairement par un sélecteur.

Rappel de la syntaxe pour une règle CSS:

sélecteur(s) { propriété: valeur ; propriété: valeur1, valeur2, valeur3 ; ...... }

Il existe plusieurs méthodes pour identifier les éléments, par exemple:

  • on indique le nom d'une balise (X)HTML
  • on indique la classe d'une balise (X)HTML
  • on indique l'identificateur d'une balise XHTML
  • on indique le nom d'une balise plus sa classe, etc.

Simple sélecteurs pour les balises

  • On indique le nom d'une balise, ou encore une liste séparés par des virgules.
 H1 {color: green}
 H2 {color: green}

est équivalent à:

 H1, H2 {color: green}

Dans ce cas on utilise CSS pour changer l'affichage par défaut des différentes balises. Typiquement, on modifie la couleur de certains éléments, la taille des fontes, les marges, etc.

Les balises HTML <div> et <span>

  • ont été créés spécialement pour un usage avec les feuilles de style

La balise <div>

peut contenir toutes les autres balises HTML et donc servir à mettre en forme toute une section d'une texte (mais attention aux priorités! <div> est un bloc alors que <span> est un élément in-line. Autrement dit:

  • <div> avec l'attribut class peut servir à faire des balises sur mesure ("custom tags") du type "ceci est une section" (voir plus loin)
  • <span> sert à changer une séquence de caractères à l'intérieur d'une balise et permet donc de créer des "balises" pour la mise en page de mots (fontes, etc.)

Class et attributs ID

Les attributs et sélecteurs "class"

L'utilisation d'attributs HTML div et id avec des sélecteurs de classe et de ID sont des mécanismes puissants pour:

  • définir des classes de contenu (indépendamment des balises)
  • pour différencier plusieurs variantes d'une même balise

Principe: Dans le HTML, on associe une valeur à l'attribut "class" pour identifier toutes les balises que l'on veut traiter un peu différemment. On peut aussi définir le style des enfants de la balise qui a l'attribut "class", mais il faut indiquer le chemin complet de l'arbre:

 ul li

Il est possible de définir plusieurs classes par éléments

Lorsque deux règles définissent la même propriété, il y a un conflit de définition qui sera réglé par les règles de cascading. Lire plus sur le cascading qui devient très compliqué dans en:CSS tutorial. Les débutants ne doivent pas trop s'inquiéter.

  • Les définitions "inline" ont priorité sur les définitions au niveau de la page qui eux ont priorité sur les fichiers importés.
  • Parmi ces différent types de définitions, c'est le plus spécifique et aussi le plus récent qui "gagne", (font-size dans l'exemple ci-dessous).

Exemple de classes dans une simple feuille de style:

Source: http://tecfa.unige.ch/guides/css/ex/simple-css2.html

 <style type="text/css">
    P.intro     {color: blue; margin-left: 4em; margin-right: 2em;}
    .default ul li {font-size: 0.8em;}
    .default  {margin-left: 2em; font-size:1em;}
    .bleu {color:red;}
   </style>
  ......
 <p class="intro">
       Après des années de bricolage infâme ....
     </p>
 <p class="default bleu">
    bla bla
 </p>
 <div class="default">
 <ul>
   <li>item 1</li>
   <li>item 2</li>
 </ul>
 <pre>
    notre classe default marche partout, même pour un para préformaté
 </pre>
 </div>

Le style .default s'appliquera à tous les éléments dont la classe est "default" alors que le style .intro seulement aux balises <p> .

L'attribut ID

Il est parfois plus approprié d'utiliser l'attribut id (p.ex. pour positionner un élément ou encore lorsqu'on a un script ne manipule qu'un seul élément)

On peut aussi combiner les deux (définir un style pour la classe et l'id d'une même balise)

Syntaxe:

  • Le selecteur s'écrit avec un # devant

Wildcard

La "Wildcard" (joker) est le * et veut dire qu'on définit une règle pour tous les éléments:

* {font-size: 12pt; }

C'est pratique pour définir une police par défaut pour tous les éléments sans la définir pour chaque élément HTML.

Exemple de définition "inline" d'un style

Objectif: Changer la couleur d'un partie du texte

Source: http://tecfa.unige.ch/guides/css/ex/simple-div-span.html simple-div-span.html]

 <div style="color: blue">
       <h1>L'influence d'un div tag qui aime le bleu</h1>
       <P>
                bla bla bla
       </P>
 </div>

Exemple de définition externe d'un style Objectif: Changer la couleur back-ground (arrière-plan)

Source: http://tecfa.unige.ch/guides/css/ex/simple-div2.html simple-div2.html]

  <style>
     div.important {
      background: rgb(204,204,255);
      padding: 0.5em; border: none;
      }
  </style>
 .....
 <body>
    <div class="important">
       <h1>Une section importante</h1>
       <h2>Un sous-titre</h2>
       <P>
              Tout le div a son joli background à lui.
              bla bla bla
       </P>
     </div>

Sélecteurs contextuels

Exemple: Simple utilisation d'un sélecteur contextuel

Source: http://tecfa.unige.ch/guides/css/ex/simple-css5.html css5.html]

<style type="text/css">
   p strong     {color: red;}
</style>
 ......
<p>

Ceci est un paragraphe avec un ''&lt;strong&gt;'' strong modifié ''&lt;/strong&gt;''.

En d'autres terme cela permet de redéfinir de façon simple le rendering
de certaines balises "logiques" comme &amp;lt;em&amp;gt; ou &amp;lt;strong&amp;gt;.
</p>

Pseudo sélecteurs (élément et classes)

  • Un pseudo sélecteur identifie un élément par des critères autres que balise et classe
  • CSS2 en définit plein, ci-dessous les éléments de CSS1.
  • Attention: certains navigateurs implémentent mal ces fonctionnalités CSS1.

Les Pseudo-éléments:

  • permettent d'identifier des éléments non-balisés (comme la première lettre ou la première ligne)
  • Marche avec les navigateurs IE 5.5 (à confirmer) et Mozilla

Exemple: Pseudo-sélecteurs

<style>
   P:first-letter { font-size: 500%; color: green }
   P:first-line { color: green }
</style>

Pseudo-classes

Pour rendre plus difficile la lecture des liens :)

 A:link { color : white }
 A:visited { color : yellow }
 A:active {color : red }

Les déclarations CSS

Rappel de la syntaxe pour une règle CSS:

sélecteur(s) { propriété: valeur ; propriété: valeur1, valeur2, valeur3 ; ...... }

Css-intro-2.png

Attention:Les valeurs des propriétés sont séparées par des "," et les pairs "propriétés: valeurs" sont séparées par des ";"

Nous allons maintenant introduire

  • Types d'élément HTML
  • Boites (boxes)
  • Positionnement......

Types d'affichage et défauts HTML

Avant de planifier un style, il faut d'abord vérifier que vous utilisez HTML correctement. Par exemple, pour faire des titres, se baser sur <h1> , <h2> , <h3> ... plutôt que sur <p> ou <div> .

En typographie on distingue entre 2-3 types d'affichage (display types) de base:

  1. les blocs (blocks), c.a.d. des éléments qui commencent un nouveau paragraphe. Exemples HTML: <p>, <h2>, <div>
  2. Les listes et leurs éléments sont des blocs spéciaux: <li>
  3. les "in-line", c.a.d. s'insérant dans un paragraphe. Exemples HTML: <b>, <strong>, <span>

Blocs, éléments de liste, élément inline etc. sont représentés dans CSS comme des boites (Angl. "box"). Pour chaque type de boite, il existe un jeu de règles pour définir les marges, la position, les couleurs du texte et de l'arrière-plan. On peut même définir leurs positions absolues sur la page. Donc un bloc est une boite qu'on remplit avec un contenu selon les règles que l'on choisit.

Il est possible de changer de type, par exemple afficher une liste à puce comme une suite de phrases. Pour redéfinir ces valeurs par défaut:

 display: block;
 display: inline;
 display: list-item;

Note: En réalité CSS2 distingue parmi une vingtaine de différents display types, mais il faut surtout retenir la différence entre "Block" (nouvelle ligne) et "inline".

Exemple CSS positioning où on modifie <li> en "inline" affiché en ligne:

<style type="text/css" xml:space="preserve">
   ul#menu li {
   display: inline;
   text-align: center;
   padding: 2px ;
   margin: 0;
   width: 19%;
   }
  </style>

Attributs du texte

Les attributs les plus utilisés sont les suivants. Il existe pleins d'autres, voir une bonne référence CSS.

Attributs pour la gestion des propriétés d'écriture

Attributs

Valeurs

sert à définir

exemple

font-family

nom de l'écriture

police

font-family: Helvetica;

serif

famille de police, écriture de type serif

font-family: Times,serif;

font-size

pt, cm

taille de police

font-size: 14pt;

font-style

forme d'écriture

italic

italique

font-style: italique;

font-weight

de 100 à 900

épaisseur

font-weight: 500;

normal

correspond à la valeur 400

font-weight: normal;

bold

correspond à la valeur 700

font-weight: bold;

Alignement du texte

Attributs

Valeurs

se charge de

exemple

text-align

alignement des paragraphes

left

aligné à gauche, valeur par défaut

text-align: left;

center

centré

text-align: center;

right

aligné à droite

text-align: right;

justify

justifié en forme de bloc

text-align: jutify;

text-indent

pt, cm

retrait de la première ligne

text-indent: 1cm;

line-height

pt, cm

hauteur des lignes

line-height: 14pt;

valeur relative

écart entre les lignes par rapport à la taille de l'écriture

line-height: 1.2;

Les boites CSS et leur positionnement

Anatomie des boites

On peut considérer tous les éléments de HTML comme des boîtes. Dans CSS, le terme "Box-Model" est utilisé en parlant du design(de la conception) et la disposition.

Une boite (chaque élément "bloc" sauf les tables et autres exceptions qui ont des priorités à part ) possède l'anatomie suivante:

Css-intro-3.png

Le modèle de boites nous permet de placer une bordure autour des éléments, ainsi que de définir des espaces entre les éléments. Chaque élément correspond à un sélecteur CSS qui permet de définir la largeur générale (des 4 côtés) ou encore la largeur de chaque côté. On peut aussi définir dessin et couleur du cadre.

Les bords, les cadres et la couleur

Attributs

Valeurs

se charge de

exemple

margin

pt, px, cm, %

4 marges

body {margin:1cm;}

margin-top

marge en haut

p {margin-top:10px;}

margin-bottom

marge en bas

h3 {margin-bottom:3pt;}

margin-left

marge à gauche

img {margin-left:50px;}

margin-right

marge à droite

p.citation {margin-right:10pt;}

border

pt,px, cm, %

largeur du cadre

p {border:5px;}

border-top

h1 {border-top:0.2cm;}

etc ...

border-style

style de cadre

solid

ligne simple

p {border-style:solid;}

double

ligne double

h1 {border-style:double;}

padding

pt,px,cm,%,etc

marge intérieures

p {padding: 5px;}

color

valeur hexa /nom

couleur d'un élément

#menu {color:#000000;}body {color:blue;}

background

aussi

couleur de l'arrière-plan

h1, h2 {background:silver;}

  • Ceci n'est qu'un aperçu !
  • Il existe notamment des "shortcuts" qu'on montre sur la page suivante.

Exemple:

#content {
   border-right:    2px dotted black;
   border-bottom:    2px dotted black;
   color: #000;
   background-color:    #ffffcc;
   padding: 5px 5px 5px 5px;            /* haut, droite, bas, gauche */
   margin:    5px 15px 5px 5px;
 }

 H1 {
   /* 1 cm en haut et en bas, 2cm sur les côtés */
   margin: 1cm 2cm;
   /* 3em en haut, 20% sur les côtés, et 2em en bas */
   padding: 3em 20% 2em;
 }

Plusieurs exemples simples avec des boites

  • Source: boxing0.html
  • la boite pour le "body" a des lignes pointillées
  • la boite pour un <p> a une petite marge, un bord solide, et une couleur en arrière-plan
  • une partie de ce même paragraphe est mis dans une boite avec un "span"
 <body style="border-style:dotted">
 <h1>Boites</h1>
 <p>The dashed box is for the "body", the big thick box is for a "p" tag, 
    and the thin box is used within a "span" tag. (View the source).</p>
 <p style="background-color:#d0d0d0;border-style:solid;border-width:4px;
           padding:1em;margin:0.1cm; ">
    Tout est une boite - DKS nov 2003
    <span style="background-color:#d0d0d0;border-style:solid;border-width:1px;
                 padding:1pt;margin:1pt;width:50%;position:relative">
      <a href="http://validator.w3.org/check/referer">XHTML validation</a> -
      <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS validation<a>
    </span>
   </p>
 <p>Voir <a href="http://tecfa.unige.ch/guides/css/ex/boxing1.html">boxing1.html</a>  pour plus ... </p>
 </body>

Le positionnement

  • Par défaut les éléments d'une page HTML sont affichés séquentiellement un après l'autre
  • Mais on peut les positionner selon des coordonnées absolues ou relatives n'importe où sur une page (voir les exemples qui suivent)
#content    {    /*  les coordonnées selon l'horloge: 12, 3, 6, 9 */
     float:    left;
     width:    80%;
     color: #000;
     background-color:    #ffffcc;
     padding: 5px 5px 5px 5px;
     margin:    5px 5px 5px 5px;
     }

#menu    { /* qui sera mis à droite */
     position: absolute;
     right: 0;
     width: 17%;
     font:    10px/14px verdana, sans-serif;
     color:    black;
     margin:    5px 5px 5px 5px;
     background-color: #ffffff;
     }

Exemple: Positionnement relatif de boites flottantes

Exemple: Positionnement relatif horizontal + vertical

Exemple: Un menu: "ul/li" comme boutons:

Exemple: Positions absolues

Exemple: Layout 3-colonnes

Les Felxbox

Le module des boîtes flexibles, aussi appelé « flexbox », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner.

L'intérêt du mode Flexbox est de permettre d'organiser et de redimensionner facilement des pages complexes. La page est décomposée en un agencement de boîtes qui peuvent se suivre et s'imbriquer. Il s'agit ensuite de définir leurs tailles et leurs interactions (entre boîtes voisines pour celles qui se suivent, entre boîtes et "boîtes ancêtres" pour celles qui s'imbriquent).

On peut par ce moyen remplir au mieux l'espace libre en permettant une adaptation automatique des éléments de la page lorsqu'elle est redimensionnée.

Pour en savoir plus sur leur fonctionnement rendez-vous sur la page Flexbox.

XML avec CSS

Association d'une feuille de style

  • Il est conseillé d'utiliser une feuille externe et ensuite l'importer:
<?xml-stylesheet type="text/css" href="feuille.css"?>
  • note: pas de feuilles de styles internes comme pour HTML !

Voici le début d'un fichier:

 <?xml version="1.0" encoding="ISO-8859-1"?>
 <?xml-stylesheet href="stepbystep.css" type="text/css"?>
 <!DOCTYPE Stepbystep SYSTEM "stepbystep-ex.dtd">
 <Stepbystep xmlns:xlink="http://www.w3.org/1999/xlink">
  <Doctitle>ATTENTION: Il ne s'agit ici que d'une démo XML + CSS. L'original de ce fichier se trouve

 ailleurs et a été modifié sans doute depuis ....
  </Doctitle>
  <Info>
   <Author Email="Stephane.morand@tecfa.unige.ch">
   </Author>
   <Version>Version 0.2</Version>
   <Para>installation brute de postnuke sur le serveur tecfaseed
   </Para>
  </Info>

Sélecteurs CSS2 pour XML et HTML

  • XML nécessite un navigateur qui supporte CSS2 (au moins en partie)
  • A part la notation Balise.classe les sélecteurs XML et HTML sont les mêmes !

sélection d'un élément

nom_de_l'élément

Exemple:

Step {
display: list-item;
list-style-type: decimal;
}

sélection d'un élément qui est l' enfant direct d'un élément

élément_mère > élément

Exemple:

Step > Title { .... }

sélection d'un élément qui est le descendant d'un élément

élément_mère élément

Exemple:

Step Title { .... }

Dans l'exemple suivant P est un descendant de LI, LI doit être un enfant direct de OL. OL est dans DIV.

DIV OL>LI P

sélection d'un élément qui est le frère d'un élément

élément_frère + élément

Exemple:

H1 + H2 { margin-top: -5mm }

(on réduit la distance)

sélection d'un élément qui possède un attribut

élément[attribut]

Exemple:

Title[status] { color: blue; }

(tous les titres qui un attribut "status" sont paints en bleu )

sélection d'un élément qui possède un attribut avec une valeur

élément[attribut="valeur"]

Exemple:

Title[status="brouillon"] { color: red; }

(tous les titres qui un attribut "status" avec valeur "brouillon" sont peints en rouge )

Note: au lieu de "=", on a aussi ~= et ¦= (voir la documentation)

Premières opérations à faire

  • Il faut d'abord indiquer pour chaque élément s'il est un "block" ou "inline"
  • Faire sortir les titres
  • Gérer les listes

Exemples

/* title et para sont des éléments "block", ils ont une petite marge
title, para {display: block; margin: 0.5em;}
/* les title sont un peu plus grands */
title {font-size: 1.5em;}
/* les item sont des list-item de type bullet */
item {display: list-item;list-style-type: bullet;}
/* strong est un élément inline, rendering on italic et bleu   */
strong {display: inline; font-style: italic; color: rgb(000,000,128);}

Exemple "Stepbystep"

(répertoire avec tous les fichiers)

  • Le DTD Stebbystep permet de formater des instructions de type "pas par pas", par exemple comment installer un logiciel.

Exemple Récit

( répertoire avec une solution CSS et une solution XSLT )

  • La DTD "RECIT" permet d'écrire des simples récits avec une grammaire génératrice.

Liens

Ressources CSS

Voir aussi:

Extensions FireFox
  • Web developper (menu: OUtils->Web developer->CSS->View Style Information, ensuite cliquer partout dans la page et regarder les infos)
  • Codeburner for Firefox Une référence HTML/CSS intégrée au navigateur (cet addon n'est plus fonctionnel)
Online Manuals
Standards
Compatibility tables
http://www.quirksmode.org/css/contents.html (consult this for IE 6/7! in particular)
CSS Validator (à utiliser SVP !!)
http://jigsaw.w3.org/css-validator/
Slides
Version anglaise

Cours

  • CSS Basics : Cours gratuit en anglais sur la plateforme edX par W3C. Certification payante. (lien corrigé)
  • OpenClassrooms : Cours gratuit pour créer un site avec HTML5 et CSS3

Astuces

Histoire