Les feuilles de style CSSAuteur : Julien Gauchet le 03/07/2017 (1 revision)

Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

1. Composition des feuilles de style css

1.1. Syntaxe

Pour définir un élément de style, on utilise une syntaxe particulière. Le premier élément permet de récupérer les objets html sur lesquels on souhaite appliquer le style, c'est le sélecteur. Dans chaque sélecteur, on déclare un certain nombre de propriétés de style. La syntaxe est la suivante

Format d'une déclaration CSS

1.2. Exemples

body {
	background-color: lightblue;
}
h1 {
	color: white;
	text-align: center;
}
p {
	font-family: verdana;
	font-size: 20px;
}

2. Les sélecteurs css

2.1. Sélecteur d’élément

Un sélecteur désigne un élément d'une page html par exemple p, div, body, h1. Dans ce cas, tous les éléments du type sélectionné se verront appliquer le style décrit.

Il est possible de définir des sélecteurs qui pointent sur des éléments respectant un enchaînement précis. Pour cela, on décrit l'enchaînement en écrivant les balises à pointer dans leur ordre d'apparition.

Par exemple pour ne sélectionner que les titres de premier niveaux contenus dans une balise p :

p h1 {}

Pour appliquer le même style à deux éléments, on les sépare par des virgules. Par exemple :

h1, h2, h3 {}

Deux éléments html ont été créés uniquement pour être pointés par des sélecteurs css : div : qui correspond à au moins une ligne et span qui permet d'entourer une portion de phrase. Par exemple :

<div>
Texte normal <span>texte dans span</span> fin
</div>

2.2. Sélecteur d’identifiant

Il est possible de définir dans la page html un identifiant sur une balise en précisant l'attribut id="". Un id doit être unique dans une page html.

<p id="important">

</p>

Dans notre feuille de style, on peut sélectionner l'élément ayant un id particulier en utilisant la syntaxe suivante

/* Sélectionne les balises p avec un id=important */
p#important {

}
/* Sélectionne toutes les balises avec un id=important */
#important {

}

2.3. Sélecteur de classes

On peut définir une classe d'éléments. Une classe d'éléments regroupe un certain nombre d'éléments partageant des caractéristiques communes. Par exemple, nous pourrons avoir deux classes de tableaux différents sur lesquels appliquer deux styles différents.

Pour définir une classe, on utilise l'attribut class.

<ul>
	<li class="important">Ligne 1</li>
	<li class="important">Ligne 2</li>
	<li>Ligne 3</li>
</ul>

Pour intercepter l'ensemble des éléments d'une classe

/* Sélectionne les balises li avec class=important */
li.important {

}
/* Sélectionne toutes les balises avec class=important */
.important {

}

2.4. Les sélecteurs d’états

Le style peut être définit en fonction de l'état d'un élément (aussi appelé pseudo-classe). Les états sont différents en fonction des éléments html.

2.5. Survol des composants

L'état le plus couramment utilisé est hover : il décrit les éléments qui sont survolés par la souris, il s'agit de l'état hover dont un exemple est donné ci-dessous :

CodeRésultat
<html>
<head>
	<style>
		h1:hover {
			color: red;
		}
	</style>
</head>

<body>
	<h1>Titre</h1>
</body>
</html>

Cet attribut est généralement utilisé pour les liens qui changent de couleur au survol de la souris.

2.6. La pseudo-classe first-child

La pseudo-classe :first-child permet de cibler un élément qui est le premier élément fils par rapport à son élément parent.
CodeRésultat
<html>
<head>
	<style>
		li {
			color:red;
		}
		li:first-child{
			color:green;
		}
	</style>
</head>

<body>
	<ul>
		<li>element 1</li>
		<li>element 2</li>
	</ul>
</body>
</html>

2.7. La pseudo-classe nth-child

La pseudo-classe :nth-child(an+b) permettra de cibler les éléments fils d'un élément dont les positions correspondent au motif an+b.

Pseudo-classe Elements sélectionnés
tr:nth-child(2n+1); Les lignes impaires d'un tableau
tr:nth-child(odd); tr:nth-child(2n);
Les lignes paires d'un tableau tr:nth-child(even);
span:nth-child(0n+1); un élément <span> qui est le premier fils de son parent. Cela aura le même effet que la pseudo-classe :first-child
span:nth-child(-n+3) Un élément si celui-ci fait partie des trois premiers fils d'un parent et que c'est également un élément span

3. Les couleurs

Les couleurs peuvent êtres définies de trois façons :

3.1. Couleurs prédéfinies

Certains noms de couleur sont directement utilisables en CSS :

  • red
  • green
  • blue
  • orange
  • yellow
  • cyan
  • black
  • white

3.2. La notation RGB

La notation RGB (rouge, vert, bleu) peut être utilisée en précisant la valeur rgb(red, green, blue). Par exemple rgb(255, 0, 0) correspond à la couleur rouge.

3.3. Notation hexadécimale

Le niveau RGB peut également être définit en hexadécimal : #RRGGBB où RR est la valeur pour le rouge (entre 0 et 255 : FF) idem pour GG et BB. Par exemple #FF0000 est rouge, #00FF00 est vert et #0000FF est bleu. De nombreux sites internet proposent de convertir une couleur en hexadécimal.

4. Formatage du texte

4.1. Couleur du texte

Pour définir la couleur du texte d'un composant, on utilise la déclaration color :

CodeRésultat
<html>
<head>
	<style>
		h1 {
			color: red;
		}
	</style>
</head>

<body>
	<h1>Le titre rouge</h1>
</body>
</html>

4.2. Alignement

Pour définir l'alignement du texte, on utilise la déclaration text-align qui permet de centrer le texte mais également le contenu d'un composant. Les valeurs possibles sont :

  • center
  • left
  • right
  • justify

CodeRésultat
<html>
<head>
	<style>
		h1 {
			text-align: center;
		}
	</style>
</head>

<body>
	<h1>Le titre centré</h1>
</body>
</html>

4.3. Soulignement

Le soulignement est géré par la déclaration text-decoration. Les valeurs possibles sont :

  • overline
  • underline
  • line-trough
  • none

CodeRésultat
<html>
<head>
	<style>
		h1 {
			text-decoration: underline;
		}
	</style>
</head>

<body>
	<h1>Le titre souligné</h1>
</body>
</html>

4.4. La police du texte

4.4.1 Le choix de la police

La déclaration gérant la police du texte est font-family. La déclaration font-family prend en valeur le nom de la police à appliquer. Plusieurs noms peuvent être définis : le navigateur parcourt les noms et applique la première police qu'il supporte.

CodeRésultat
<html>
<head>
	<style>
		p {
			font-family: Arial;
		}
	</style>
</head>

<body>
	<p>Texte en arial</p>
</body>
</html>

4.4.2 La taille de la police

Pour définir la taille de la police en pixel, on utilise la déclaration font-size :

CodeRésultat
<html>
<head>
	<style>
		p {
			font-size: 20px;
		}
	</style>
</head>

<body>
	<p>Paragraphe en police 20</p>
</body>
</html>

La taille de la police peut également être exprimée en em. 1em est la taille par défaut du composant. Pour la majorité des navigateurs 1em=16px. Dans ce cas, 1.5em=34px.

4.4.3 Les caractères gras

Les caractères gras sont définis grâce à la déclaration font-weight bold signifie gras. Pour utiliser un font normal, on utilise normal.

CodeRésultat
<html>
<head>
	<style>
		p {
			font-weight: bold;
		}
	</style>
</head>

<body>
	<p>Paragraphe en gras</p>
</body>
</html>

4.4.4 Le style italic

Le style du font (font-style) est soit normal, soit italic soit oblic.

CodeRésultat
<html>
<head>
	<style>
		p {
			font-style: italic;
		}
	</style>
</head>

<body>
	<p>Paragraphe en italic</p>
</body>
</html>

4.4.5 Autres déclarations de formatage du texte

Il existe de nombreux autres paramètres permettant de mettre en forme le texte, je liste ici quelques propriétés simples à mettre en œuvre.

  • text-transform permet de passer le texte en majuscule (uppercase), en minuscule (lowercase)
  • text-indent permet de définir une tabulation en début de ligne. On précise le nombre de pixels qui définit la tabulation.
  • letter-spacing définit le nombre de pixels séparant deux lettres
  • line-height définit la hauteur d'une ligne de texte
  • direction (rtl ou ltr) définit la direction d'écriture du texte : rtl : de droite à gauche et ltr de gauche à droite.
  • word-spacing définit l'espacement en pixel entre deux mots.

CodeRésultat
<html>
<head>
	<style>
		h1 {
			text-transform: uppercase;
			text-ident: 40px;
			letter-spacing: 3px;
			word-spacing: 20px;
			direction: rtl;
		}
	</style>
</head>

<body>
	<h1>Titre étrangement présenté</h1>
</body>
</html>

5. L'arrière-plan (background)

La déclaration background-color définir la couleur de l'arrière-plan, background-image permet de placer une image en arrière-plan

CodeRésultat
<html>
<head>
	<style>
		h1 {
			background-color: blue;
		}
		body {
			background-image: url(img/img.png);
		}
	</style>
</head>

<body>
	Texte du document
</body>
</html>

Lorsqu'une image est en arrière-plan, elle est répétée sur l'ensemble du composant afin de couvrir la totalité de celui-ci.

La répétition de l'image peut être :

  • uniquement verticale si on spécifie background-repeat: repeat-y
  • uniquement horizontale si on spécifie background-repeat: repeat-x
  • Annulée si on spécifie background-repeat : no-reapeat

CodeRésultat
<html>
<head>
	<style>
		body {
			background-image: url(img/img.png);
			background-repeat: repeat-y;
		}
	</style>
</head>

<body>
	Texte du document
</body>
</html>

Il est possible de fixer une image en précisant background-attachment: fixed; et en précisant où la fixer avec background-position right|left top|bottom.

CodeRésultat
<html>
<head>
	<style>
		body {
			background-image: url(img/img.png);
			background-repeat: no-repeat;
			background-position: right top;
			background-attachment: fixed;
		}
	</style>
</head>

<body>
	Texte du document
</body>
</html>

6. Les marges internes et externes

La déclaration padding permet de définir une marge interne au composant. C'est la marge qui sera appliquée au contenu de celui-ci.

La déclaration margin permet de définir une marge externe qui sera appliquée lors de l'insertion du composant sur la page autour de celui-ci.

Format d'une déclaration CSS

Pour définir les marges internes ou externes, il existe deux solutions :

  • Définir toutes les marges en pixel séparément : padding-top, padding-bottom, padding-left ou padding-right et idem pour les marges externes margin-top, margin-left, etc.
  • Déclarer padding ou margin et définir les marges en commençant par la marge en haut du composant puis droite puis en dessous du composant puis à gauche :

CodeRésultat
<html>
<head>
	<style>
		p.niveau1{
			background-color: Orange;
			padding: 15px 30px 5px 10px;
			margin-top:5px;
		}
		p.niveau2 {
			background-color: red;
			margin: 0 0 0 30px;
		}
	</style>
</head>

<body>
	<p class="niveau1" >
		Haut
	</p>
	<p class="niveau2">
		Bas
	</p>
</body>
</html>

7. Les bordures

Il est possible de créer une bordure autour d'un composant. Pour cela, on utilise la propriété border. La façon la plus directe d'utiliser cette propriété est de décrire la totalité de la bordure dans une seule déclaration, il est également possible de ne tracer qu'une bordure partielle (sur un côté uniquement, dans ce cas, on précisera lequel) :

border:<taille> <type> <couleur>;
border-top:<taille> <type> <couleur>;
border-left:<taille> <type> <couleur>;

Les types possibles sont :

  • solid : un trait plein
  • double : deux traits pleins
  • dotted : des pointillés
  • dashed : des tirets

CodeRésultat
<html>
<head>
	<style>
		p {
			border: 2px solid blue;
		}
	</style>
</head>

<body>
	<p>Paragraphe</p>
</body>
</html>

8. Les liens

Les liens peuvent être modifiés comme tous les autres éléments d'une page avec CSS. Mais il est également possible de modifier l'apparence des liens en fonction de leur état, ils sont au nombre de 4 :

  • a:link un lien non visité
  • a:visited : un lien que l'utilisateur a déjà visité
  • a:hover : un lien survolé par le pointeur de la souris
  • a:active : le lien au moment où il est cliqué

CodeRésultat
<html>
<head>
	<style>
		a:link {
			color: orange;
		}
		a:visited {
			color: green;
		}
		a:hover {
			color: red;
		}
		a:active {
			color: yellow;
		}
	</style>
</head>

<body>
	<a href="inexistant.php">Lien inexistant (donc non visité)</a>
	<br />
	<a href="html.php">Lien support html (actif)</a>
</body>
</html>

9. Disposition des éléments

9.1. Notions de base

La mise en place des différents éléments de la page se fait par défaut selon le Flux courant.

Les éléments (balises) sont placés les uns après les autres dans le code HTML de la page.

L'ordre dans lequel apparaissent les balises dans le code HTML sera l'ordre dans lequel ils seront affichés et apparaîtront dans le document, c'est le Flux. Cela signifie que, par défaut, chaque élément est dépendant des éléments frères qui l'entourent.

Par défaut, les balises Bloc et les balises En-ligne ont un comportement différent dans le flux normal.

Pour positionner un élément, il existe quatre propriétés : right, left, top et bottom. Positionner un élément signifie placer un de ses coins (et un seul).

L'image ci-dessous illustre les points possibles à définir pour placer un composant.

Format d'une déclaration CSS

Il est possible de ne définir qu'un seul côté dans ce cas-là, la valeur par défaut de l'autre côté est appliquée. Si tous les côtés sont définis, c'est la valeur left, top qui prime.

9.2. Le mode d'insertion d'un élément

La propriété display spécifie si et comment un élément doit être affiché.

Il existe différents types d'éléments :

  • Les "Block-Level elements" commencent toujours sur une nouvelle ligne et se terminent par une nouvelle ligne : par exemple div, h1, p, table, section.
  • Les "Inline elements" s'insèrent dans un élément parent sans ajouter de nouvelle ligne. Par exemple span, img, a.

Il est possible de modifier le mode d'insertion des éléments grâce à la propriété display. Ses valeurs possibles sont block, inline ou none. La valeur none sert généralement à cacher un élément.

Il existe d'autres modes d'insertion propres à certains composants.

La modification du mode d'insertion peut être utilisée pour créer des menus horizontaux avec des ul de la manière suivante :

CodeRésultat
<html>
<head>
	<style>
		ul.menu li {
			display: inline;
		}
	</style>
</head>

<body>
	<ul class="menu">
		<li><a href="#">Menu1</a></li>
		<li><a href="#">Menu2</a></li>
		<li><a href="#">Menu3</a></li>
	</p>
</body>
</html>

9.3. La taille des composants

Les propriétés height et width servent à définir respectivement la hauteur let la largeur d'un composant. Ces longueurs peuvent être définies en pixels (px) ou en pourcentages.

CodeRésultat
<html>
<head>
	<style>
		p {
			background: orange;
			width: 50%;
			height: 40px;
		}
	</style>
</head>

<body>
	<p>Paragraphe</p>
</body>
</html>

9.4. La position des éléments

La propriété position choisit des règles alternatives pour le positionnement des éléments.

9.4.1 Positionnement static

p {
	position: static;
}
Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés top, right, bottom, left ne s'appliquent pas.

9.4.2 Positionnement relative

p {
	position: relative;
}

Ce positionnement dispose tous les éléments comme s'ils n'étaient pas positionnés relativement puis ajuste la position de l'élément, sans modifier la présentation (et laisse ainsi un espace où l'élément aurait du être s'il n'avait pas été positionné).

L'élément est ainsi déplacé par rapport à sa position d'origine selon les coordonnées d'un point comme précisé dans la première partie.

CodeRésultat
<html>
<head>
	<style>
		p {
			position: relative;
			left: 30px;
			top: 10px;
			background: orange;
		}
	</style>
</head>

<body>
	<p>Paragraphe</p>
</body>
</html>
CodeRésultat
<html>
<head>
	<style>
		p {
			position: relative;
			right: 30px;
			top: 10px;
			background: orange;
		}
	</style>
</head>

<body>
	<p>Paragraphe</p>
</body>
</html>

9.4.3 Positionnement fixed

p {
	position: fixed;
}

La position est définie par défaut de la même manière que dans le paragraphe précédent et ne bouge pas même lors du déplacement de la page. Ce positionnement est parfois utilisé pour que le menu d'une application soit disponible même lorsqu'on est en bas de la page.

9.4.4 Positionnement absolute

p {
	position: absolute;
}

Les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments. Un élément positionné de façon absolue est positionné par rapport à son plus proche ancêtre positionné ou au conteneur initial.

CodeRésultat
<html>
<head>
	<style>
		div.relative {
			position: relative;
			width: 400px;
			height: 200px;
			background: lightgray;
		}
		
		div.absolute {
			position: absolute;
			top: 80px;
			right: 0;
			width: 200px;
			height: 100px;
			background: orange;
		}
	</style>
</head>

<body>
	<div class="relative">div position relative</div>
	<div class="absolute">div position absolute</div>
</body>
</html>

9.5. Ancrage des éléments (float et clear)

La propriété float indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (inline) entoureront alors l'élément flottant.

Par exemple, dans le cas d'une image : celle-ci sera placée à l'endroit où la balise img sera créée, parfois au milieu d'un texte comme illustré ci-dessous.

Si on veut placer l'image à côté du texte, il est possible de définir la propriété float avec la valeur left ou right afin de placer l'image à gauche ou à droite du texte.

CodeRésultat
<html>
<head>
	<style>
		img {
			float: right;
			margin: 0 0 10px 10px;
		}
	</style>
</head>

<body>
	<img src="img/img.png" />
	<p>Paragraphe</p>
</body>
</html>

Il est possible que l'image ayant float:right soit plus haute que le composant dans laquelle elle est insérée. Dans ce cas, lorsqu'on ajoute un composant celui-ci se retrouve à côté de l'image. Pour éviter cela, on utilise la propriété clear (right ou left).

CodeRésultat
<html>
<head>
	<style>
		img {
			float: right;
			margin: 0 0 10px 10px;
		}
		p {
			clear: right;
		}
	</style>
</head>

<body>
	<img src="img/img.png" />
	<p>Paragraphe</p>
</body>
</html>

9.6. Les dépassements de taille

Sur chaque composant, le contenu peut être plus grand que le contenant : par exemple, un paragraphe (p) de hauteur 50px peut contenir suffisamment de texte pour qu'il ne soit plus assez grand pour l'afficher. Par défaut, le contenu sera affiché comme dépassant du cadre comme le montre l'exemple ci-dessous.

CodeRésultat
<html>
<head>
	<style>
		p {
		    background-color: #eee;
		    width: 200px;
		    height: 50px;
		    border: 1px solid black;
		}
	</style>
</head>

<body>
	<p>Très long texte, Très long texte,
	Très long texte, Très long texte, Très long texte, 
	Très long texte, Très long texte</p>
</body>
</html>

La propriété overflow définit comment rogner le contenu, comment afficher les barres de défilement ou encore comment afficher le contenu sortant du cadre dans un élément de type bloc.

CodeRésultat
<html>
<head>
	<style>
		p {
		    background-color: #eee;
		    width: 200px;
		    height: 50px;
			overflow:hidden;
		    border: 1px solid black;
		}
	</style>
</head>

<body>
	<p>Très long texte, Très long texte,
	Très long texte, Très long texte, Très long texte, 
	Très long texte, Très long texte</p>
</body>
</html>
CodeRésultat
<html>
<head>
	<style>
		p {
		    background-color: #eee;
		    width: 200px;
		    height: 50px;
			overflow:scroll;
		    border: 1px solid black;
		}
	</style>
</head>

<body>
	<p>Très long texte, Très long texte,
	Très long texte, Très long texte, Très long texte, 
	Très long texte, Très long texte</p>
</body>
</html>
CodeRésultat
<html>
<head>
	<style>
		p {
		    background-color: #eee;
		    width: 200px;
		    height: 50px;
			overflow:auto;
		    border: 1px solid black;
		}
	</style>
</head>

<body>
	<p>Très long texte, Très long texte,
	Très long texte, Très long texte, Très long texte, 
	Très long texte, Très long texte</p>
</body>
</html>

10. Tableau CSS

Les tableaux ont des propriétés CSS particulières permettant de les mettre en forme.

10.1. Définition de la bordure

La définition d'une bordure se fait comme pour tous les autres composants
CodeRésultat
<html>
<head>
	<style>
		table, th, td {
		   border: 1px solid black;
		}
	</style>
</head>

<body>
	<table>
	  <thead>
	    <tr>
	      <th>Groupe</th>
	      <th>Effectif</th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr>
	      <td>Groupe java</td>
	      <td>25</td>
	    </tr>
	    <tr>
	      <td>Groupe SAS-SQL</td>
	      <td>6</td>
	    </tr>
	    <tr>
	      <td>Groupe Géo</td>
	      <td>3</td>
	    </tr>
	  </tbody>
	</table>
</body>
</html>

Le problème est que tous les composants ont une bordure, les lignes, les cellules et la table, il est donc possible de préciser que toutes les bordures doivent se confondre grâce à la déclaration border-collapse.

CodeRésultat
<html>
<head>
	<style>
		table {
		    border-collapse: collapse;
		}
		table, th, td {
		   border: 1px solid black;
		}
	</style>
</head>

<body>
	<table>
	  <thead>
	    <tr>
	      <th>Groupe</th>
	      <th>Effectif</th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr>
	      <td>Groupe java</td>
	      <td>25</td>
	    </tr>
	    <tr>
	      <td>Groupe SAS-SQL</td>
	      <td>6</td>
	    </tr>
	    <tr>
	      <td>Groupe Géo</td>
	      <td>3</td>
	    </tr>
	  </tbody>
	</table>
</body>
</html>

10.2. Alignements

L'alignement horizontal est géré grâce à la propriété text-align et l'alignement vertical grâce à la propriété vertical-align. Cette gestion est effectuée au niveau de la cellule, c'est à dire td ou th ou les deux.

CodeRésultat
<html>
<head>
	<style>
		table {
		    border-collapse: collapse;
		}
		table, th, td {
		   border: 1px solid black;
		}
		th, td {
		   vertical-align: bottom;
		   text-align:center;
		}
	</style>
</head>

<body>
	<table>
	  <thead>
	    <tr>
	      <th>Groupe</th>
	      <th>Effectif</th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr>
	      <td>Groupe java</td>
	      <td>25</td>
	    </tr>
	    <tr>
	      <td>Groupe SAS-SQL</td>
	      <td>6</td>
	    </tr>
	    <tr>
	      <td>Groupe Géo</td>
	      <td>3</td>
	    </tr>
	  </tbody>
	</table>
</body>
</html>

10.3. Survol des lignes

Le sélecteur:hover sur l'élément tr permet de coloriser la ligne survolée par le pointeur de la souris.

CodeRésultat
<html>
<head>
	<style>
		table {
		    border-collapse: collapse;
		}
		table, th, td {
		   border-bottom: 1px solid black;
		}
		tr:hover {
		   background-color: #D8D8D8;
		}
	</style>
</head>

<body>
	<table>
	  <thead>
	    <tr>
	      <th>Groupe</th>
	      <th>Effectif</th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr>
	      <td>Groupe java</td>
	      <td>25</td>
	    </tr>
	    <tr>
	      <td>Groupe SAS-SQL</td>
	      <td>6</td>
	    </tr>
	    <tr>
	      <td>Groupe Géo</td>
	      <td>3</td>
	    </tr>
	  </tbody>
	</table>
</body>
</html>

10.4. Table zébrée

Il est possible d'alterner les couleurs d'une ligne sur deux ou d'une colonne sur deux en utilisant la pseudo-classe nth-child.

CodeRésultat
<html>
<head>
	<style>
		table {
		    border-collapse: collapse;
		}
		table, th, td {
		   border-bottom: 1px solid black;
		}
		tbody tr:nth-child(odd) {
		   background-color: #D8D8D8;
		}
	</style>
</head>

<body>
	<table>
	  <thead>
	    <tr>
	      <th>Groupe</th>
	      <th>Effectif</th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr>
	      <td>Groupe java</td>
	      <td>25</td>
	    </tr>
	    <tr>
	      <td>Groupe SAS-SQL</td>
	      <td>6</td>
	    </tr>
	    <tr>
	      <td>Groupe Géo</td>
	      <td>3</td>
	    </tr>
	  </tbody>
	</table>
</body>
</html>
CodeRésultat
<html>
<head>
	<style>
		table {
		    border-collapse: collapse;
		}
		table, th, td {
		   border-bottom: 1px solid black;
		}
		tbody tr td:nth-child(odd) {
		   background-color: #D8D8D8;
		}
	</style>
</head>

<body>
	<table>
	  <thead>
	    <tr>
	      <th>Groupe</th>
	      <th>Effectif</th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr>
	      <td>Groupe java</td>
	      <td>25</td>
	    </tr>
	    <tr>
	      <td>Groupe SAS-SQL</td>
	      <td>6</td>
	    </tr>
	    <tr>
	      <td>Groupe Géo</td>
	      <td>3</td>
	    </tr>
	  </tbody>
	</table>
</body>
</html>

11. Organiser une page web

11.1. Nouvelles balises html5

Html5 propose de typer certaines sections pour faciliter leur positionnement en css. Ces sections ne sont pas positionnées par défaut, on leur donnera le sens que nous souhaitons et leur positionnement sera effectué en css.

  • <main> définit le document en entier, il ne peut y avoir qu'un seul main dans un document
  • <header> définit l'entête du document, il s'agit du bandeau supérieur contenant le titre
  • <nav> définit la zone dans laquelle les liens assurant la navigation sont placés : il s'agit du menu.
  • <section> définit une section du document
  • <aside> définit un contenu à côté du contenu principal : une sidebar
  • <footer> définit le pied de la page

11.2. Premier exemple de disposition

Pour présenter un document avec un menu sur la gauche et des sections au centre de la page, on peut écrire le code suivant :

CodeRésultat
<html>
<head>
	<style>
		main {
			border: 3px solid blue;
			overflow: auto;
		}
		nav {
			float: left;
			width: 200px;
			border: 3px solid #73AD21;
		}
		section {
			margin-left: 206px;
			border: 3px solid red;
		}
	</style>
</head>

<body>
	<!DOCTYPE html>
	<html>
	<body>
	<main>
		<nav>
			Menu :
			<ul>
				<li><a href="#">Accueil</a></li>
				<li><a href="#">Menu 1</a></li>
				<li><a href="#">Menu 2</a></li>
				<li><a href="#">Menu 3</a></li>
			</ul>
		</nav>
		<section>
			<p>Texte de la section 1</p>
		</section>
		<section>
			<p>Texte de la section 2</p>
		</section>
	</main>
	</body>
	</html>
</body>
</html>

11.3. Second exemple de disposition

Pour présenter un document avec un menu en haut de la page et des sections en dessous tout en laissant une marge à gauche autour des sections

CodeRésultat
<html>
<head>
	<style>
		main {
		  border: 3px solid blue;
		  width: 100%;
		  margin: 0px;
		  overflow:hidden;
		}
		nav {
		  border: 3px solid #73AD21;
		  width: 100%;
		  margin: 0px;
		}
		nav ul li {
		  display:inline;
		}
		section {
		  margin-left: 190px;
		  padding: 1em;
		  overflow: hidden;
		  border: 3px solid red;
		}
	</style>
</head>

<body>
	<!DOCTYPE html>
	<html>
	<body>
	<main>
		<nav>
			Menu :
			<ul>
				<li><a href="#">Accueil</a></li>
				<li><a href="#">Menu 1</a></li>
				<li><a href="#">Menu 2</a></li>
				<li><a href="#">Menu 3</a></li>
			</ul>
		</nav>
		<section>
			<p>Texte de la section 1</p>
		</section>
		<section>
			<p>Texte de la section 2</p>
		</section>
	</main>
	</body>
	</html>
</body>
</html>

12. Complément : les icônes

Les icônes sont des objets CSS3 qui représentent des images mais qui ne sont pas des images : il s'agit de représentations texte d'images : elles sont donc envoyées au navigateur et affichées beaucoup plus rapidement et ne perturbent pas le fonctionnement du site.

Il est possible d'en créer mais le plus simple est de les récupérer dans des feuilles de styles existantes en créant un lien vers la css.

Pour afficher une icône, on utilisera la balise <i>, la classe de la balise définit l'icône à afficher

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="site-reference.css">
	</head>
	<body>
		<i class="classe-cible" />
	</body>
</html>

Par exemple, les icônes Google :

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">