Un pequeño truco de primera letra.

Autor：Eve Cole Fecha de actualización：2010-03-19 16:24:49

Cuando OL define una lista ordenada, a menos que se especifique list-style-position:inside, el texto y los caracteres iniciales tienen sangría.

Pero a veces, los tipos de lista definidos por OL tienen restricciones. Por ejemplo, los caracteres chinos "uno, dos y tres" no se pueden definir. Tenemos que ingresar estos caracteres manualmente, pero esta vez el texto y los caracteres están conectados entre sí.

[Ctrl+A Seleccionar todos los consejos: primero puede modificar parte del código y luego presionar Ejecutar]

En este momento, puedes usar la pseudoclase de primera letra como ayuda:

Ejecutar cuadro de código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<título>primera letra</título>
<tipo de estilo="texto/css">
cuerpo {tamaño de fuente: 12 px; ancho: 600 px; margen: 2 em auto;}
ol.list {estilo de lista: ninguno}
ol.list li: primera letra { margen izquierdo: -2em; color: azul; peso de fuente: negrita;}
</estilo>
</cabeza>
<cuerpo>
<ol>
<li>Originalmente conocida como Box Model Acid Test, es una página web que se utiliza para probar navegadores. Desarrollado en octubre de 1998, se convirtió en un punto de referencia importante para la compatibilidad con los primeros navegadores, especialmente la compatibilidad del navegador con Cascading Style Sheets 1.0. Al igual que utilizar una prueba de ácido para medir rápida y visualmente la calidad de una pieza de metal, el objetivo de la prueba de ácido web es proporcionar una manera de indicar claramente si un navegador cumple con los estándares web. </li>
<li>Esta versión está diseñada por Web Standards Project para realizar pruebas exhaustivas de compatibilidad con los estándares HTML, CSS 2.0 e imágenes PNG[1]. </li>
<li>Lanzado oficialmente el 3 de marzo de 2008, sus pruebas se centran en ECMAScript, DOM Nivel 3, consultas de medios y datos: URL[3]. Después de abrir esta página web de prueba con un navegador, la página cargará funciones continuamente [4] y otorgará puntuaciones basadas en la situación de la prueba, con una puntuación total de 100</li>
</ol>
<hora/>
<ol clase="lista">
<li>1. Originalmente conocida como prueba ácida del modelo de caja, es una página web que se utiliza para probar navegadores. Desarrollado en octubre de 1998, se convirtió en un punto de referencia importante para la compatibilidad con los primeros navegadores, especialmente la compatibilidad del navegador con Cascading Style Sheets 1.0. Al igual que utilizar una prueba de ácido para medir rápida y visualmente la calidad de una pieza de metal, el objetivo de la prueba de ácido web es proporcionar una manera de indicar claramente si un navegador cumple con los estándares web. </li>
<li>2. Esta versión está diseñada por Web Standards Project para realizar pruebas integrales que admitan los estándares HTML, CSS 2.0 e imágenes PNG [1]. </li>
<li>3. Lanzado oficialmente el 3 de marzo de 2008, sus pruebas se centran en ECMAScript, DOM Nivel 3, consultas de medios y datos: URL[3]. Después de abrir esta página web de prueba con un navegador, la página cargará funciones continuamente [4] y otorgará puntuaciones basadas en la situación de la prueba, con una puntuación total de 100</li>
</ol>
<hora/>
<ol clase="lista">
<li>1. Originalmente conocida como prueba ácida del modelo de caja, es una página web que se utiliza para probar navegadores. Desarrollado en octubre de 1998, se convirtió en un punto de referencia importante para la compatibilidad con los primeros navegadores, especialmente la compatibilidad del navegador con Cascading Style Sheets 1.0. Al igual que utilizar una prueba de ácido para medir rápida y visualmente la calidad de una pieza de metal, el objetivo de la prueba de ácido web es proporcionar una manera de indicar claramente si un navegador cumple con los estándares web. </li>
<li>2. Esta versión está diseñada por Web Standards Project para realizar pruebas integrales que admitan los estándares HTML, CSS 2.0 e imágenes PNG [1]. </li>
<li>3. Lanzado oficialmente el 3 de marzo de 2008, sus pruebas se centran en ECMAScript, DOM Nivel 3, consultas de medios y datos: URL[3]. Después de abrir esta página web de prueba con un navegador, la página cargará funciones continuamente [4] y otorgará puntuaciones basadas en la situación de la prueba, con una puntuación total de 100</li>
</ol>
</cuerpo>
</html>

[Ctrl+A Seleccionar todos los consejos: primero puede modificar parte del código y luego presionar Ejecutar]

Esta vez, el personaje principal se mantiene a cierta distancia del texto y puedes controlar más estilos.
Sin embargo, el estilo de la coma después del carácter principal no se puede controlar, pero me pregunto si puedo configurar una imagen de fondo para reemplazarlo.
Una prueba simple encontró que controlar el fondo de la pseudoclase de primera letra es tan confuso como controlar la imagen de estilo de lista, por lo que se abandonó.

Además, cada navegador trata los símbolos junto al carácter principal de forma diferente. Como Safari no está instalado, no lo probé:

Código:

Resultado de renderizado:

IE8, FF3 y Opera se comportan igual. Chrome solo procesa los símbolos de la izquierda, mientras que IE6 y 7 solo procesan el primer carácter.