Organiser une feuille de style

[Mado]

y'aurait pas moyen de faire plus court? je pense que si mais je ne connais pas les astuces encore mici mici

vous avez remarqué je suis revenue

body {

font-family: verdana, arial, helvetica, sans-serif;

margin :0;

padding: 0;

font-size : 80%;

color: #000000;

background-color: #FFD18C;

}

a {

font-size : 1.2em;

text-decoration: none;

font-weight: bold;

color: #1994d8;

outline: none;

}

a:visited {

color: #1994d8;

}

a:active {

color: #1994d8;

}

a:hover {

color: #1994d8;

text-decoration: underline;

}

strong, b {

font-weight: bold;

}

h1 {

font-size: 24px;

line-height: 44px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

h1.left {

color: #ff6600;

font-size: 1em;

margin-right: 1em;

text-align: left;

}

h1.inline {

color: #ff6600;

font-size: 1em;

margin-right: 1em;

text-align: left;

line-height: 20px;

}

h1.milieu {

color: #ff6600;

font-size: 1em;

margin-right: 1em;

text-align: right;

}

h1.center {

color: #ff6600;

font-size: 1em;

margin-right: 1em;

text-align: center;

}

h1.rouge{

color: #ffffff;

font-size: 1.2em;

margin-right: 0.5em;

text-align: center;

padding : 5px;

background-color: #f9558a;

width : 550px;

}

h1.coloriage{

color: #0066cc;

font-size: 1.2em;

margin-left:100px;

text-align: center;

padding : 5px;

background-color:#FFCA95;

width : 650px;

}

h1.comptine{

color: #0066cc;

font-size: 1.2em;

margin-left:100px;

text-align: center;

padding : 5px;

background-color: #55f9a2;

width : 650px;

}

h1.titre{

color: #ff6600;

font-size: 1.2em;

margin-right: 0.5em;

text-align: left;

padding : 5px;

background-color: #E8FFD0;

display : inline;

width : 405px;

}

h2 {

font-size: 18px;

line-height: 40px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

h3 {

font-size: 16px;

line-height: 22px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

h4 {

font-size: 14px;

line-height: 26px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

h5 {

font-size: 12px;

line-height: 22px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

h6 {

font-size: 10px;

line-height: 18px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

ul {

list-style-type: none;

margin-left: 0;

padding: 0;

}

li {

margin-bottom: 2px;

font-size : 1 em;

}

.menu a {

padding: 0;

height: 24px;

text-align: left;

text-decoration: none;

color: #1994d8;

}

li.coloriage {

background-color:#FFCA95;

}

li.jeux {

background-color:#FAD455;

}

li.chansons {

background-color:#C5FA54;

}

li.poesies {

background-color:#55f9a2;

}

li.dessins {

background-color:#54f9d7;

}

li.histoires {

background-color:#A6DBFF;

}

li.espace {

background-color:#f9558a;

}

li.blanc {

font-size : 1.2 em;

font-weight: bold;

background-color:#FFD18C;

}

img {

border: 0;

}

.nowrap {

white-space: nowrap;

font-size: 10px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

#conteneur {

text-align: center;

}

#bloc-centre {

margin-left: auto;

margin-right: auto;

width : 100%;

text-align:left;

}

#haut {

margin: 0;

padding: 0;

background-image: url(../images/fonds_haut.jpg);

background-repeat : no-repeat;

background: #A6DBFF;

height: 122px;

}

#gauche {

margin:0;

float:left;

padding: 0;

background: #ffffff;

width: 160px;

}

#milieu {

margin-left: 160px;

padding-left: 5px;

background-color: #ffffff;

width:auto;

height : auto;

}

#doigts {

margin-left: 10px;

padding-left: 5px;

background-color: #ffffff;

width:auto;

height : auto;

}

#droite {

margin:0;

float:right;

padding: 0;

background-color: #FCFED3;

width: 140px;

}

pre {

font-size: 12px;

line-height: 18px;

white-space: pre;

}

p.un{

background-color : #ffffff;

margin-left:5%;

margin-right:5%;

padding:10px;

text-indent : 3em;

}

img.construction {

position : relative;

border: 0;

padding: 10px;

margin: auto;

}

img.centre {

position : relative;

margin: auto;

}

img.logo {

border: 0;

float : left;

padding: 5px;

}

img.logo2 {

border: 0;

padding: 5px;

vertical-align : middle;

}

img.right {

/*border: 2px double #E8FFd0;*/

float : right;

margin-right: 10px;

margin-top: 30px;

}

#poesie {

margin : 5px;

padding:5px;

background-color:#DDEBFF;

border:1px dashed #999;

text-align: left;

}

#comptine {

margin : 8px;

padding: 3px;

background-color:#ffffff;

border:3px #55f9a2 solid;

text-align: left;

float : left;

height : 81px;

width : 450px;

}

p.deux{

background-color : #ffffff;

border-width:thin;

border-color:#cccccc;

border-style:dashed;

padding:5px

}

ul.pouce {

background-color:#ffffff;

border:3px #55f9a2 solid;

padding:5px;

list-style-type: none;

margin-left: 0;

width : 300px;

}

[Aprilwine]

Bonjour Mado,

Faut pas donner à chaque élément sa propre ligne... donc tu pourrais le faire:

body { font-family: verdana, arial, helvetica, sans-serif; margin :0; padding: 0; font-size : 80%; color: #000000; background-color: #FFD18C; }

et etcetera.

J'espère que cela t'aidera à abréger le code.

Aprilwine

[MissMonde]

Bonjour Marie,

tu peux faire un code commun aux élément qui ont les mêmes caractéristiques,comme par exemple les liens :

si j'ai bien compris ton code, la seule différence entre le hover et les autres, c'est le soulignement.

donc tu appliques ton code à tous les a, et ensuite tu donnes une particularité au a:hover qui est "text-decoration : underline".

ce qui donne :

a {

font-size : 1.2em;

text-decoration: none;

font-weight: bold;

color: #1994d8;

outline: none;

}

a:hover{

text-decoration:underline;

}

tu peux aussi regrouper les éléments qui ont beaucoup de code en commun et peu de différences.

le code commun s'écrit ainsi :

#element1, #element2, #element3{

...

code commun

...

}

et chaque différence est appliquée à chaque élément :

#element1{

propriété : valeur;

}

en revanche, je trouve la disposition plus lisible comme ça, plutôt que tout sur une même ligne, mais c'est affaire de goût , le résultat est le même.

[Guest CraJK]

Faut pas donner à chaque élément sa propre ligne... donc tu pourrais le faire:

body { font-family: verdana, arial, helvetica, sans-serif; margin :0; padding: 0; font-size : 80%; color: #000000; background-color: #FFD18C; }

Entièrement d'accord, on le dit jamais assez.

[LaurentDenis]

Pour compléter les excellents conseils de Monique, diverses propriétés de ta feuille de style peuvent être indiquées pour un seul élément parent : elles sont alors appliquées automatiquement à ses éléments enfants par héritage.

C'est le cas par exemple de tes divers margin:0 que tu peux simplifier à partir d'un

body {
margin: 0;
}

Sur l'optimisation des feuilles de styles, voir l'excellent (mais malheureusement pas encore traduit en français) How to write Efficient CSS.

Sinon, l'indentation du code est une politesse élémentaire quand on donne une CSS à lire, comme ici. Et un bon moyen d'éviter pas mal d'erreurs élémentaires. Pourquoi donc croyez-vous que le validateur du W3C affiche systématiquement un code CSS indenté, que la source le soit ou non ?