Un petit truc de première lettre

Auteur：Eve Cole Date de mise à jour：2010-03-19 16:24:49

Lorsque OL définit une liste ordonnée, à moins que list-style-position:inside; ne soit spécifié, le texte et les caractères de début sont en retrait.

Mais parfois, les types de liste définis par OL ont des restrictions. Par exemple, les caractères chinois « un, deux et trois » ne peuvent pas être définis. Nous devons saisir manuellement ces caractères, mais cette fois le texte et les caractères sont connectés.

[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

À ce stade, vous pouvez utiliser la pseudo-classe de première lettre pour vous aider :

Boîte de code d'exécution
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>première lettre</title>
<style type="text/css">
corps{font-size:12px;width:600px;margin:2em auto;}
ol.list { style de liste: aucun }
ol.list li:première lettre { margin-left:-2em;color:blue;font-weight:bold;}
</style>
</tête>
<corps>
<ol>
<li>Connu à l'origine sous le nom de Box Model Acid Test, il s'agit d'une page Web utilisée pour tester les navigateurs. Développé en octobre 1998, il est devenu une référence importante en matière de compatibilité avec les premiers navigateurs, en particulier la prise en charge des feuilles de style en cascade 1.0. Tout comme l'utilisation d'un test acide pour mesurer rapidement et visuellement la qualité d'un morceau de métal, l'objectif du test Web est de fournir un moyen d'indiquer clairement si un navigateur est conforme aux normes du Web. </li>
<li>Cette version est conçue par le Web Standards Project pour des tests complets de prise en charge des normes HTML, CSS 2.0 et PNG pour les images[1]. </li>
<li>Officiellement publié le 3 mars 2008, ses tests se concentrent sur ECMAScript, DOM niveau 3, les requêtes multimédias et les données : URL[3]. Après avoir ouvert cette page Web de test avec un navigateur, la page chargera continuellement des fonctions [4] et donnera des scores basés sur la situation de test, avec un score complet de 100</li>
</ol>
<heure />
<ol class="liste">
<li>1. Initialement connu sous le nom de test de test du modèle de boîte, il s'agit d'une page Web utilisée pour tester les navigateurs. Développé en octobre 1998, il est devenu une référence importante en matière de compatibilité avec les premiers navigateurs, en particulier la prise en charge des feuilles de style en cascade 1.0. Tout comme l'utilisation d'un test acide pour mesurer rapidement et visuellement la qualité d'un morceau de métal, l'objectif du test Web est de fournir un moyen d'indiquer clairement si un navigateur est conforme aux normes du Web. </li>
<li>2. Cette version est conçue par le Web Standards Project pour des tests complets prenant en charge les normes HTML, CSS 2.0 et PNG [1]. </li>
<li>3. Officiellement publié le 3 mars 2008, ses tests portent sur ECMAScript, DOM niveau 3, les requêtes multimédias et les données : URL[3]. Après avoir ouvert cette page Web de test avec un navigateur, la page chargera continuellement des fonctions [4] et donnera des scores basés sur la situation de test, avec un score complet de 100</li>
</ol>
<heure />
<ol class="liste">
<li>1. Initialement connu sous le nom de test de test du modèle de boîte, il s'agit d'une page Web utilisée pour tester les navigateurs. Développé en octobre 1998, il est devenu une référence importante en matière de compatibilité avec les premiers navigateurs, en particulier la prise en charge des feuilles de style en cascade 1.0. Tout comme l'utilisation d'un test acide pour mesurer rapidement et visuellement la qualité d'un morceau de métal, l'objectif du test Web est de fournir un moyen d'indiquer clairement si un navigateur est conforme aux normes du Web. </li>
<li>2. Cette version est conçue par le Web Standards Project pour des tests complets prenant en charge les normes HTML, CSS 2.0 et PNG [1]. </li>
<li>3. Officiellement publié le 3 mars 2008, ses tests portent sur ECMAScript, DOM niveau 3, les requêtes multimédias et les données : URL[3]. Après avoir ouvert cette page Web de test avec un navigateur, la page chargera continuellement des fonctions [4] et donnera des scores basés sur la situation de test, avec un score complet de 100</li>
</ol>
</corps>
</html>

[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

Cette fois, le personnage principal est maintenu à une certaine distance du texte et vous pouvez contrôler davantage de styles.
Cependant, le style de la virgule après le caractère principal ne peut pas être contrôlé, mais je me demande si je peux définir une image d'arrière-plan pour la remplacer ?
Un test simple a révélé que contrôler l'arrière-plan de la pseudo-classe de première lettre est aussi déroutant que contrôler l'image de style liste, il a donc été abandonné.

De plus, chaque navigateur traite différemment les symboles à côté du caractère principal. Safari n'étant pas installé, je ne l'ai pas testé :

Code:

Résultat du rendu :

IE8, FF3 et Opera se comportent de la même manière. Chrome ne traite que les symboles de gauche, tandis qu'IE6 et 7 ne traitent que le premier caractère.