Médiaforma

All posts tagged raccourcir

Deux propriétés CSS permettent de définir l’espace autour des éléments de type box : margin et padding :

  • margin définit l’espace entre un élément et les autres éléments qui l’entourent ;
  • padding définit l’espace entre la bordure de l’élément et son contenu.

Il est possible de définir des marges supérieure, inférieure, gauche et droite en accolant (respectivement) les suffixes top, bottom, left et right aux mots-clés margin et padding et en les séparant par un tiret.

Examinons le code suivant :

Deux balises <div> de classe conteneur et interieur sont imbriquées. Ces classes contiennent un peu de texte issu du site http://fr.lipsum.com/.

La classe conteneur définit une couleur d’arrière-plan rose pâle et fixe les dimensions de la balise.

La classe interieur définit une couleur d’arrière-plan jaune pâle, une bordure noire épaisse de deux pixels, des marges extérieures de 10 pixels et des marges intérieures de 40 pixels.

Voici le résultat dans Internet Explorer :

Les quatre marges intérieures étant identiques, les quatre propriétés padding peuvent se résumer à une seule :

padding: 40px;

Il en va de même pour les marges extérieures qui se résument en :

margin: 10px;

Supposons maintenant que nous voulions utiliser les marges intérieures suivantes :

  • Gauche : 40px ;
  • Droite : 41px ;
  • Supérieure : 42 px :
  • Inférieure : 43px.

La forme condensée de la propriété padding sera :

padding: 42px 41px 43px 40px;

Vous voyez donc que les quatre marges sont spécifiées dans l’ordre suivant : haut, gauche, bas et droite. Pour retenir cet ordre, imaginez que vous partez d’en haut et que vous décrivez un cercle dans le sens inverse des aiguilles d’une montre.

Il en va de même en ce qui concerne les marges extérieures. Supposons que nous voulions utiliser les marges extérieures suivantes :

  • Gauche : 10px ;
  • Droite : 11px ;
  • Supérieure : 12 px :
  • Inférieure : 13px.

La forme condensée de la propriété margin sera :

margin: 12px 11px 13px 10px;

Supposons maintenant que les marges extérieures gauche et droite soient identiques et égales à 15 pixels, et que les marges extérieures supérieure et inférieure soient identiques et égales à 20 pixels. La propriété margin pourra être condensée comme ceci :

margin: 20px 15px;

Cette remarque s’applique également aux marges intérieures.


Plusieurs propriétés CSS font permettent de définir la police, la graisse, la taille et le style des caractères affichés dans une page Web. Dans cet exemple :

  • les caractères ont une taille supérieure de 20% à la normale (font-size: 120%) ;
  • les lignes ont un espacement supérieur de 70% à la normale (line-height: 170%) ;
  • les caractères sont gras (font-weight: bold), italiques (font-style: italic) et affichés en petites capitales (font-variant: small-caps) ;
  • la police utilisée est Verdana ou Arial (font-family: verdana, arial).

Voici le résultat de ce code dans un navigateur :

Toutes ces propriétés peuvent être remplacées par une seule, en indiquant les propriétés dans l’ordre suivant : font-style, font-variant, font-weight, font-size/line-height, font-family.

L’instruction permettant de regrouper les six propriétés dont nous venons de parler est la suivante :

font: italic small-caps bold 120%/170% verdana,arial;

Bien entendu, cette instruction produit le même effet que les six précédentes lorsqu’elle est interprétée dans le navigateur.


Il existe plusieurs propriétés CSS relatives à l’arrière-plan :

  • border-width définit l’épaisseur de la bordure ;
  • border-style définit le style de la bordure :
    • none : aucune bordure ;
    • dotted : pointillés ;
    • dashed : tirets ;
    • solid : bordure continue ;
    • double : trait double ;
    • groove : bordure creuse ;
    • ridge : bordure en relief ;
    • inset : bordure 3D en relief intérieur ;
    • outset : bordure 3D en relief extérieur.
  • border-color définit la couleur de la borduure.

Dans cet exemple, le code HTML définit une balise <div> de classe box. Le code CSS détermine les dimensions de la balise, ainsi que l’épaisseur, le style et la couleur de la bordure.

Voici comment ce code est interprété dans Internet Explorer :

Nous allons maintenant remplacer les trois propriétés CSS relatives à la bordure par une seule :

Sauvegardez le nouveau code et affichez le résultat dans Internet Explorer.


Bien entendu, le résultat est le même …


Il existe plusieurs propriétés CSS relatives à l’arrière-plan :

  • background-color définit la couleur de l’arrière-plan ;
  • background-image utilise une image en arrière-plan ;
  • background-repeat indique si l’image est répétée horizontalement et/ou verticalement ;
  • background-attachment indique si l’arrière-plan est fixe ;
  • background-position définit les coordonnées de l’image d’arrière-plan.

Dans cet exemple, le code HTML définit une balise <div> de classe box. Le code CSS détermine les dimensions de la balise, la couleur d’arrière-plan, l’image d’arrière-plan, le mode de répétition de l’image (ici la répétition est verticale mais pas horizontale), le type d’attachement de l’image d’arrière-plan (ici, il s’agit d’un arrière-plan fixe) et la position de l’image d’arrière-plan (à gauche et centrée).

Voici le résultat dans Internet Explorer :

Toutes les propriétés de préfixe background peuvent être rassemblées dans une seule :

.box {
background : #abcdef url(‘neige.jpg’) repeat-y fixed left center;
}

Bien entendu, le résultat est le même …


Si vous insérez une adresse Web longue et/ou complexe dans un e-mail, un post Twitter, un message Facebook ou un article dans un blog ou un forum, les problèmes ne sont pas loin : l’adresse peut être coupée sur deux lignes car trop longue, et ne plus être fonctionnelle, ou les personnes qui l’utiliseront risquent de mal la recopier et d’atterrir sur une page inexistante.

Pourquoi ne pas utiliser un raccourcisseur d’URL Read more