28234 sujets

CSS et mise en forme, CSS3

Css: Ou les placer ?!?

Bonjour à tous
Tout d'abord, excusez moi, si je sujet à déjà été traité. Je ne l'ai pas trouvé. Ou pas bien cherché Smiley ohwell
Bon, voilà ma question.
Je débute dans les css et une question de base me pose problème.
Lors de la création d'un css, il est demandé de définir la localisation du CSS: -seulement ce document, ou nouvelle feuille de style !!
J'aimerai donc savoir quel option choisir et quels en sont les avantages et inconvénient.

Si la question peut paraitre idiote..., je ne suis que un débutant ! Smiley cligne
Merçi pour vos réponses
Bonne journée
Hello digitjd et bienvenue,

non seulement cette question n'est pas idiote mais elle est essentielle. Smiley cligne

il existe 3 façons d'appliquer des styles css à un document :

1) à l'aide d'une feuille de styles externe (extension .css) appelée à l'aide de <link /> ou @import.

feuille de style styles.css :
body {
	background: blue;
}
page index.htm :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styles.css" /> 
</head> 
<body> 
<p>Du contenu.</p>
</body> 
</html>


2) en utilisant l'élément STYLE dans le HEAD de la page.

page index.htm :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Test</title>
<style type="text/css">
body {
	background: blue;
}
</style>
</head> 
<body> 
<p>Du contenu.</p>
</body> 
</html>


3) en utilisant l'attribut style des éléments.

page index.htm :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Test</title>
</head> 
<body style="background: blue;"> 
<p>Du contenu.</p>
</body> 
</html>


Il est préconisé d'utiliser la première solution puisque :
* la même feuille de styles est utilisée pour toutes les pages d'un site, ce qui simplifie grandement la maintenance.
* par défaut cette feuille n'est chargée qu'une fois pour toutes lors de l'affichage de la première page et est ensuite directement disponible dans le cache du navigateur.

A l'inverse la dernière (sauf cas particulier) est à déconseiller puisqu'il faudrait styler chaque élément de chaque page et se passer des possibilités puissantes des sélecteurs CSS.
Modifié par Heyoan (03 Feb 2010 - 00:54)
Hello

Merçi Heyoan pour ta réponses claire et rapide. Smiley ravi

Je vais effectivement appliquer cette solution de feuille de style CSS a part.

Egalement, je reviens vers toi, dans le même esprit est-il donc conseiller d'avoir une feuille css par style(ou bloc) ou bien une feuille de css par style( bloc).

Je m'explique. Par exemple, pour deux bloc avec leurs propriété distinctes dans une même page.
Es-t-il préférable de créer deux pages css ou bien une page regroupant toute les données.

Merçi.

Bonne journée.
digitjd a écrit :
Egalement, je reviens vers toi, dans le même esprit est-il donc conseiller d'avoir une feuille css par style(ou bloc) ou bien une feuille de css par style( bloc).

Je m'explique. Par exemple, pour deux bloc avec leurs propriété distinctes dans une même page.
Es-t-il préférable de créer deux pages css ou bien une page regroupant toute les données.
Pas sûr d'avoir compris.

A priori une seule feuille de styles suffit. On peut en avoir plusieurs pour gérer notamment différents médias (print pour l'impression ou handled pour les mobiles), pour corriger quelques déclarations dans IE6 ou IE7 qui sont alors incluses à l'aide de commentaires conditionnels, lorsque l'on utilise un styleswitcher ou lorsque le site est très complexe et qu'on souhaite alors mieux classifier les css.

Pour un exemple de feuille de styles voir l'une de celles utilisées sur le forum.

A lire également : De l'ordre, que diable !
Sujet clos
Aller à