Définition de style - Formats courts

Tagged:

La définition d'un style peut se faire de plusieurs façons ... Il y en a qui sont plus ou moins pénible... Cela dit, si je parle de tout ça c'est parsqu'une feuille de style ne doit pas être trop volumineuse de façon a ce qu'elle soit vite prise en compte, même par les gens n'ayant pas une connexion ADSL (sisi il y en a :)). L'effet marche aussi pour ceux qui ont l'adsl puisque la feuille de style devient insignifiante ...

Bref ce dont je vous parle c'est ceci par exemple :

border-style:solid;
border-width:3px;
border-color:blue;
 
background-color:red;
background-image:url(images/truc.png);
background-position:top left;
background-repeat:no-repeat;
background-attachment:scroll;

Voila j'ai marqué plein de lignes, et toutes ces lignes prennent une place folle ... Il existe des formats réduits, prenant compte de toutes ces propriétées, et permettant de réduire l'écriture ...

border:3px solid blue;

On voit bien l'intéret pour définir des bordures différentes :

border-left:7px solid black;
border-bottom:1px solid black;

Pour les background c'est pareil :

background:red url(images/truc.png) top left no-repeat scroll;

De façon générale pour spécifier une couleure il suffit d'écrire :

background:red;

Il existe aussi des façons de factoriser pour les margin et padding, par exemple :

margin:2px 1em 0 3em;
padding:5em 2px;

la première notation spécifie dans l'ordre : top right bottom left (en partant du haut dans le sens des aiguilles d'une montre). La seconde précise le couple top/bottom et left/right ensemble ...

voila j'espère que ça vous servira, personnellement je n'ai pas découvert ça de suite et j'avais pris l'habitude de tout écrire ... maintenant cette façon de factoriser me sert tout le temps ...

Edit 11/4/5 Prise en compte du commentaire de NiKo ... merci :)

Comments

On peut écrire background: red url(images/truc.png) top left no-repeat scroll; , non ?

Je note, je note ... je vais tester, corriger le post, et me mettre une baffe pour ne jamais y avoir pensé ... merci :)

lol ba de rien, moi même j'en apprends tous les jours sur CSS ;)

lol ba de rien, moi même.