[resolu]Raccourci d'écriture en CSS

Bonjour a tous

Je ne comprend pas tellement les raccourcis d'ecriture en css.
Je voudrai 'synthetiser mon code pour ne plus avoir 1500 lignes...
Donc par exemple:

.h1{
	color:#0066CC;
	font-size:13px;
	line-height:1.5;
	font-weight: bold;
	text-decoration: underline;
}

pourrais donner (je sais que c'est érronné! juste pour que vous me compreniez):

.h1{
	font:13px :#0066CC bold underline 1.5;	
}

Quelle est la règle à appliquer?

Merci
Modifié par jeanloupdavid (30 Apr 2007 - 20:27)

Bonjour,

Une petite recherche sur Google voire ici-même te donnera pas mal de pistes pour alléger tes feuilles de styles.
Dans ton exemple, mis à part la couleur qu'on peut synthétiser ainsi:

color:#06c;

on ne peut simplifier davantage.
Par ailleurs, je serais curieux de savoir ce que tu comptes faire avec une classe nommée "h1"...

jeanloupdavid a écrit :

Quelle est la règle à appliquer?

Hello,

Voici la règle à appliquer : http://www.yoyodesign.org/doc/w3c/css2/fonts.html#propdef-font

Tu pourrais donc raccourcir ainsi :

.h1 {
	color:#0066CC;
	font: bold 13px/1.5;
	text-decoration: underline;
}

PS : toujours laisser un espace entre le sélecteur et l'accolade : "h1{" peut poser des problèmes sur certains navigateurs, alors que "h1 {" non

PS2 : au fait, quel est l'intérêt d'avoir créé une classe .h1 ? Pourquoi ne pas s'appliquer directement à la balise <h1> ?
Modifié par Raphael (29 Apr 2007 - 17:04)

Sans vouloir te contredire Raphael, font exige que l'on précise une police, on ne peut par conséquent simplifier plus le code de notre ami que ce que j'ai écrit dans mon post précédent.

Effectivement. Mais dans la pratique indiquer font: 13px/1.5em bold marche très bien (du moins avec IE6, FF2, Opera 9, Konqueror 3.5). Par contre, si le bold est indiqué avant la taille de texte, ça ne marche plus. Et si je rajoute (toujours à la fin) un italic, il ne sera pas pris en compte.

jeanloupdavid a écrit :
Je voudrai 'synthetiser mon code pour ne plus avoir 1500 lignes...

Si tu as 1500 lignes, il est également possible que ça vienne d'une mauvaise conception et d'une multiplication malvenue des classes dans tous les sens, d'une absence de factorisation, d'une mauvaise utilisation des sélecteurs CSS, etc.

Penser à utiliser correctement le sélecteur descendant améliore déjà beaucoup les chose.
(Note : le sélecteur descendant, c'est par exemple la première espace dans #menu a {...}.)
Modifié par Florent V. (29 Apr 2007 - 22:48)

merci pour vos conseil!
Je vais lire ce tutoriel avec attention. Ca a l'air tres bien expliqué dedans.

Je suis assez d'accord avec vous ; je dois certainement prendre pas mal de détours et mon code s'allonge beaucoup;.
J'ai 300 lignes de codes pour être precis dont la moitié en css...mais pas d'erreur à part le symbole € et les apostrophes (je vais lire le tutoriel car ça non plus je capte pas.....) quand je le valide sur le site du w3c;( )

Enfin ,je crois que j'aurai simplement du nommer mes classes autrement...

Pour info, coté code,c'est comme cela que j'ai procèdé (c'est sûrement pas l'idéal...soyez indulgent avec les débutants!):

.h3 {
	font-size:11px;
	font-style:italic
}

...

<li class="h2">Rez de chaussée</li>
		<li></li>
		<li class="h3">- Jolie cuisine tout equipée.</li>
		<li class="h3">- Grand séjour</li>
		<li class="h3">- une arrière cuisine.</li>
		<li class="h3">- WC</li>
		<li></li>

voila

bonne soirée à tous
Jean
Modifié par jeanloupdavid (30 Apr 2007 - 20:26)

Un petit avertissement relatif aux règles du forum :

Pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance.


Pour l'optimisation de ton code... je pense qu'avant de t'attaquer à l'optimisation du code CSS, il faudrait déjà avoir un code HTML cohérent. Quand je vois le bout de code HTML que tu postes dans le message ci-dessus, ça n'est pas très rassurant.

Je reprends la même chose (du moins si j'ai bien compris ce que ça représente) mais en plus cohérent :

<div class="descriptif">
<h2>Rez de chaussée</h2>
<ul class="machin">
	<li>Jolie cuisine tout equipée.</li>
	<li>Grand séjour</li>
	<li>une arrière cuisine</li>
	<li>WC</li>
</ul>
</div>

Après quoi, tu peux utiliser les sélecteurs suivants :

div.descriptif {...}
div.descriptif h2 {...}
div.descriptif ul {...}
div.descriptif li {...}

La manière dont j'ai remanié ton exemple ne sera pas forcément pertinente. C'est à toi de voir...

En tout cas, donner la même classe à tous les li d'une liste est idiot. Il suffit de donner une classe au ul ou ol, et d'utiliser un sélecteur de type ul.maclasse li {...}...

Quant aux titres, il est préférable d'utiliser de vrais titres de section. Par contre, les items de la liste qui suivent le titre de niveau deux ne sont pas eux-même des titres (on ne remplacera donc pas les li par des h3, car ils ne chapeautent aucun contenu.

ok
je vais aller m'acheter des neuronnes dès demain matin, c'est promis.

N'oublie pas d'éditer tes messages ci-dessus pour mettre en forme les blocs de code.

voila
a+