Quando OL define uma lista ordenada, a menos que list-style-position:inside seja especificado, o texto e os caracteres iniciais são recuados.
Mas às vezes, os tipos de lista definidos pelo OL têm restrições. Por exemplo, os caracteres chineses "um, dois e três" não podem ser definidos manualmente, mas desta vez o texto e os caracteres estão conectados.
Execute a caixa de código
<!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 ">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>primeira letra</title>
<style type="texto/css">
corpo{tamanho da fonte:12px;largura:600px;margem:2em auto;}
</estilo>
</head>
<corpo>
<ol>
<li>Originalmente conhecido como Box Model Acid Test, é uma página da web usada para testar navegadores. Desenvolvido em outubro de 1998, tornou-se uma referência importante para compatibilidade com os primeiros navegadores, especialmente suporte do navegador para Cascading Style Sheets 1.0. Assim como usar um teste ácido para medir rápida e visualmente a qualidade de um pedaço de metal, o objetivo do teste ácido da web é fornecer uma maneira de indicar claramente se um navegador está em conformidade com os padrões da Web. </li>
<li>Esta versão foi desenvolvida pelo Web Standards Project para testes abrangentes de suporte aos padrões HTML, CSS 2.0 e imagens PNG[1]. </li>
<li>Lançado oficialmente em 3 de março de 2008, seu foco de testes está em ECMAScript, DOM Nível 3, Media Queries e dados: URL[3]. Depois de abrir esta página de teste com um navegador, a página carregará continuamente funções [4] e fornecerá pontuações com base na situação de teste, com uma pontuação total de 100</li>
</ol>
<hr />
<ol style="list-style:none;">
<li>1. Originalmente conhecido como teste ácido do modelo de caixa, é uma página da web usada para testar navegadores. Desenvolvido em outubro de 1998, tornou-se uma referência importante para compatibilidade com os primeiros navegadores, especialmente suporte do navegador para Cascading Style Sheets 1.0. Assim como usar um teste ácido para medir rápida e visualmente a qualidade de um pedaço de metal, o objetivo do teste ácido da web é fornecer uma maneira de indicar claramente se um navegador está em conformidade com os padrões da Web. </li>
<li>2. Esta versão foi projetada pelo Web Standards Project para testes abrangentes de suporte aos padrões de imagem HTML, CSS 2.0 e PNG [1]. </li>
<li>3. Lançado oficialmente em 3 de março de 2008, seu foco de testes está em ECMAScript, DOM Nível 3, Media Queries e dados: URL[3]. Depois de abrir esta página de teste com um navegador, a página carregará continuamente funções [4] e fornecerá pontuações com base na situação de teste, com uma pontuação total de 100</li>
</ol>
</body>
</html>
[Ctrl+A Selecionar todas as dicas: você pode modificar parte do código primeiro e depois pressionar Executar]
Neste momento, você pode usar a pseudoclasse da primeira letra para ajudar:
Execute a caixa de código
<!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 ">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>primeira letra</title>
<style type="texto/css">
corpo{tamanho da fonte:12px;largura:600px;margem:2em auto;}
ol.list { estilo de lista: nenhum }
ol.list li:first-letter { margin-left:-2em;color:blue;font-weight:bold;}
</estilo>
</head>
<corpo>
<ol>
<li>Originalmente conhecido como Box Model Acid Test, é uma página da web usada para testar navegadores. Desenvolvido em outubro de 1998, tornou-se uma referência importante para compatibilidade com os primeiros navegadores, especialmente suporte do navegador para Cascading Style Sheets 1.0. Assim como usar um teste ácido para medir rápida e visualmente a qualidade de um pedaço de metal, o objetivo do teste ácido da web é fornecer uma maneira de indicar claramente se um navegador está em conformidade com os padrões da Web. </li>
<li>Esta versão foi desenvolvida pelo Web Standards Project para testes abrangentes de suporte aos padrões HTML, CSS 2.0 e imagens PNG[1]. </li>
<li>Lançado oficialmente em 3 de março de 2008, seu foco de testes está em ECMAScript, DOM Nível 3, Media Queries e dados: URL[3]. Depois de abrir esta página de teste com um navegador, a página carregará continuamente funções [4] e fornecerá pontuações com base na situação de teste, com uma pontuação total de 100</li>
</ol>
<hr />
<ol class="lista">
<li>1. Originalmente conhecido como teste ácido do modelo de caixa, é uma página da web usada para testar navegadores. Desenvolvido em outubro de 1998, tornou-se uma referência importante para compatibilidade com os primeiros navegadores, especialmente suporte do navegador para Cascading Style Sheets 1.0. Assim como usar um teste ácido para medir rápida e visualmente a qualidade de um pedaço de metal, o objetivo do teste ácido da web é fornecer uma maneira de indicar claramente se um navegador está em conformidade com os padrões da Web. </li>
<li>2. Esta versão foi projetada pelo Web Standards Project para testes abrangentes que suportam padrões de imagens HTML, CSS 2.0 e PNG [1]. </li>
<li>3. Lançado oficialmente em 3 de março de 2008, seu foco de testes está em ECMAScript, DOM Nível 3, Media Queries e dados: URL[3]. Depois de abrir esta página de teste com um navegador, a página carregará continuamente funções [4] e fornecerá pontuações com base na situação de teste, com uma pontuação total de 100</li>
</ol>
<hr />
<ol class="lista">
<li>1. Originalmente conhecido como teste ácido do modelo de caixa, é uma página da web usada para testar navegadores. Desenvolvido em outubro de 1998, tornou-se uma referência importante para compatibilidade com os primeiros navegadores, especialmente suporte do navegador para Cascading Style Sheets 1.0. Assim como usar um teste ácido para medir rápida e visualmente a qualidade de um pedaço de metal, o objetivo do teste ácido da web é fornecer uma maneira de indicar claramente se um navegador está em conformidade com os padrões da Web. </li>
<li>2. Esta versão foi projetada pelo Web Standards Project para testes abrangentes que suportam padrões de imagens HTML, CSS 2.0 e PNG [1]. </li>
<li>3. Lançado oficialmente em 3 de março de 2008, seu foco de testes está em ECMAScript, DOM Nível 3, Media Queries e dados: URL[3]. Depois de abrir esta página de teste com um navegador, a página carregará continuamente funções [4] e fornecerá pontuações com base na situação de teste, com uma pontuação total de 100</li>
</ol>
</body>
</html>
[Ctrl+A Selecionar todas as dicas: você pode modificar parte do código primeiro e depois pressionar Executar]
Desta vez, o caractere principal é mantido a uma certa distância do texto e você pode controlar mais estilos.
No entanto, o estilo da vírgula após o caractere inicial não pode ser controlado, mas gostaria de saber se posso definir uma imagem de fundo para substituí-la.
Um teste simples descobriu que controlar o plano de fundo da pseudoclasse da primeira letra é tão confuso quanto controlar a imagem do estilo de lista, por isso foi abandonado.
Além disso, cada navegador trata os símbolos próximos ao caractere inicial de maneira diferente. Como o Safari não está instalado, não o testei:
Código:
.png)
Resultado da renderização:
.jpg)
IE8, FF3 e Opera se comportam da mesma forma. O Chrome processa apenas os símbolos à esquerda, enquanto o IE6 e 7 processam apenas o primeiro caractere.