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 
?
Le
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 ?
Le
Retourner une image par symétrie.
La propriété transform offre de multiples possibilités. Cliquez sur les images pour voir les codes CSS.
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 href des balises
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.
Commentaires
Enregistrer un commentaire