Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Astuces CSS

Dimensionner une image inline.

Il est souvent utile d'insérer des images dans une ligne de texte, par exemple des puces, des marques de séparation ou, comme ici, des petits logos. Mais comment faire pour que ces images s'adaptent à la taille du texte. On voit ci-dessous que ce n'est pas le cas par défaut.

Qu'est ce que le W3C ?

Le W3C (World Wide Web Consortium) est un organisme de standardisation chargé de promouvoir la compatibilité des technologies du Web telles que HTML, XML, CSS, etc.

Avec une simple règle CSS, on peut résoudre ce problème. Il suffit de se souvenir que l'unité em est relative à la taille courante des caractères. Voir {units->sizeLink}. En appliquant à l'image une hauteur de 1em, on lui donne donc la même hauteur que le texte. On ne précisera pas de largeur afin que les proportions de l'image soient conservées. Pour peaufiner, on définira aussi l'alignement vertical.
Cliquez sur le cadre pour afficher ou masquer le code CSS.

Qu'est ce que le W3C ?

Le W3C (World Wide Web Consortium) est un organisme de standardisation chargé de promouvoir la compatibilité des technologies du Web telles que HTML, XML, CSS, etc.

Retourner une image par symétrie.

La propriété transform offre de multiples possibilités. Cliquez sur les images pour voir les codes CSS.

Symétrie sur une image Symétrie sur une image

Distinguer les liens internes et les liens externes.

On appelle lien externe, un lien qui pointe vers un autre site, contrairement à un lien interne, qui lui pointe vers une autre page du même site. Pour distinguer les liens externes des liens internes, qui bien sûr sont tous des balises a, nous allons utiliser un sélecteur avec critère. Voir les . Notre critère sera la présence des caractères 'http' dans l'attribut href des balises a.

Après cela il sera facile d'appliquer une couleur différente aux liens externes. Nous allons aussi ajouter un petit symbole après les liens externes (un peu à la façon de Wikipedia). Nous avons choisi le caractère .

Remarque : il n'est malheureusement pas possible d'ajouter une image, ni aucune autre balise HTML, seulement un ou plusieurs caractères.