Informatique


Wablief CSS

Aller à


CSS donc...

CSS est l'acronyme de Cascading Style Sheet pour "Feuille de styles en cascade".
Le CSS sépare le contenu et la mise en page d'un document HTML. Cette séparation était impossible avant CSS.
En conséquence, la modification d'un style dans la fs permet de cibler plusieurs pages html en une fois, la mise à jour du site est donc grandement facilitée.


Tous les fichiers .html d'un site vise un et un seul fichier .css


Et on fait comment?

Il existe 3 façons d'intégrer une fs dans une page html: la fs liée, la fs globale et la fs en ligne.
La fs liée
La plus utilisée, à juste titre. On lie un fichier .css à la page html au moyen de la balise link.

	<head>
		<link rel="stylesheet" href="mywork/mfs.css">
	</head>
		
La fs globale
La fs "globale" ne concerne que la page dans laquelle elle est décrite, elle est donc utilisée uniquement dans un contexte particulier.
Par exemple pour expliquer le fonctionnement d'un style, cela évite de devoir manipuler 2 fichiers. Dans les exemples j'utiliserai souvent la fs globale pour éviter des fichiers inutiles.
La balise style permet de définir une fs dans une page html.
Démo
	<head>
		<style>
			.contenu	{
				background:red;
				width:300px;
				height:200px;
				padding:20px;
			}
		</style>
	</head>
	<body>
		<div class="contenu">
			L'agent D, mon meilleur ennemi... sur fond rouge.
		</div>
	</body>
		
La fs en ligne
La fs "en ligne" est à éviter, elle ne concerne que la balise dans laquelle elle est décrite.
Démo
	<body>
		<div style="background:yellow;width:300px;height:200px;padding:20px;">
			L'agent D, mon meilleur ennemi... sur fond jaune.
		</div>
	</body>
		

Les préfixes

Les spécifications CSS sont progressivement implentées par les navigateurs.
Souvent elles sont le fruit d'une expérimentation qui, si elle s'avère bénéfique, est officialisée par le W3C. C'est pourquoi on utilise les préfixes des navigateurs lorsqu'on désire utiliser des propriétés qui sont à l'état expérimental chez un ou plusieurs navigateurs.
Navigateur Préfixe
-webkit-
-moz-
-ms-