L'heritage

Voir au format PDF

Vous êtes ici : >> HTML-CSS / L'heritage

Temps d'étude : 15 min.

Niveau : Facile.

Tags : L'heritage

Fichier(s) utile(s) pour ce cours : /

Qu'est-ce que l'héritage en CSS ?

Lorsque vous déclarez certaines balises, il arrive que ces éléments héritent d'un style prédéfini particulier.
Exemple Html :

heritage.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Page</title>
				<link rel="stylesheet" href="heritage.css">
			</head>
			<body>			
				
				<h1> h1 </h1>
				
				<p> p </p>
				
				<span> span </span> 
				
				<div> div </div>
				
			</body>
		</html>

Voici le résultat dans le navigateur :

explications Html / Css

Vous ne remarquez rien ?
Par exemple, en selectionnant le H1 avec l'aide de FireBug, on se rend compte que celui-ci possède et hérite d'une marge et d'une certaine taille de caractères alors que nous n'avons rien demandé de particulier en code CSS.
On nous impose des styles par défaut pour certaines balises, mais ces styles ne correspondent pas forcément à ce que l'on souhaite !

Bien entendu, nous pouvons par exemple redéfinir le style de notre h1 :

heritage.css

	h1{
	text-align: center; /* alignement */
	font-size: 20px; /* taille du texte */
	font-weight: bold; /* gras */
	margin: 10px 9px 8px 7px; /* marges ext. */
	padding: 20px; /* marges int. */
	border:1px solid; /* bordure */
	}

Cela peut être contraignant de toujours revenir sur les styles hérités par défaut.

C'est la raison pour laquelle il est souvent utile d'introduire un RESET CSS de manière à ré-initialiser tous les styles à 0.

Reset CSS

Pour effectuer un RESET CSS et ré-initiliser les styles, deux solutions sont possibles :

1ère solution avec l'appel de la plupart des balises existantes devant être remise à 0 :

	html, body, div, span, applet, object, iframe, h1, h2, h2, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 	figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {		
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* Pour les anciens navigateurs, cela permet de cibler les balises Html5 et de les rendre "block" */
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-spacing: 0;
		border-collapse: collapse;
	}

2ème solution, un raccourci consiste à appeler toutes les balises par l'intermédiaire du symbole "*" :

	* {		
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

Le 2e exemple est plus rapide à écrire, mais plus long à exécuter pour le navigateur en terme de performance.
Si l'on souhaite appliquer le reset partout sauf sur une balise, cela ne sera pas possible avec le symbole "*" dans le 2e cas, tandis que dans le 1er cas nous pouvons retirer la balise que nous ne souhaitons pas concerner par le RESET.

Allez au chapitre suivant : 9. Les Images