O índice relativo ao texto é o deslocamento dos caracteres em relação à linha de base para cima ou para baixo. Dependendo do valor positivo ou negativo do deslocamento, o índice é denominado superior ou inferior, respectivamente. Eles são usados ​​​​ativamente em matemática, física, química e para designar unidades de medida. HTML oferece dois elementos para criar um índice: ^{(do sobrescrito em inglês) - sobrescrito e _{(do subscrito em inglês) - índice inferior. O texto colocado em um desses contêineres é designado como menor que o texto base e é deslocado para cima ou para baixo em relação a ele. O exemplo 1 mostra compartilhamento elementos e estilos especificados para alterar a aparência do texto.}}

Exemplo 1: Criando um sobrescrito e um subscrito

Equação característica de uma superfície de segundo grau

λ ³-EU ₁λ ²+eu ₂λ - eu ₃ = 0

No exemplo, tanto o subscrito quanto o sobrescrito aparecem simultaneamente. Para alterar o estilo da fonte do índice, são utilizados estilos que definem um design uniforme (Fig. 1).

Arroz. 1. Visualização dos índices após aplicação de estilos

Você pode parar de usá-lo completamente ^{E _{em favor dos estilos. Um análogo desses elementos é a propriedade vertical-align, que faz com que o texto seja deslocado verticalmente em uma distância especificada. Especificamente, no Exemplo 2 o valor é 0,8em para o sobrescrito e -0,5em para o subscrito. Em é uma unidade relativa igual ao tamanho da fonte atual. Por exemplo, 0,5em indica que o texto deve ser deslocado pela metade do tamanho da fonte.}}

Exemplo 2: Usando estilos para gerenciar índices

Polinômio de grau n

f(x) = uma 0+um 1 x + ... + uma n-1 x n-1+um n x n

No exemplo, a própria fórmula é exibida em tamanho ampliado, os símbolos sobrescritos são colocados em vermelho e os inferiores em azul (Fig. 2).

Olá. Às vezes, ao criar páginas web é necessário especificar algumas palavras com usando css maiúscula ou sobrescrito. Vamos ver como isso é feito.

Maiúsculas e minúsculas usando css

Em geral, ainda hoje você pode colocar o texto desejado em tags _{^{e obter a exibição desejada, mas vamos ver também como isso pode ser feito usando css porque a técnica é um pouco diferente.}}

Por exemplo, você precisa escrever a fórmula H 2 O em um documento HTML. Isso é feito assim:

• A fórmula em si está escrita
• As palavras e números que precisam ser exibidos no índice superior ou inferior são colocados em uma tag span, à qual precisa ser atribuída alguma classe. Por exemplo: caracteres a serem produzidos
• No css você precisa definir este elemento:

  Índice superior (
  Alinhamento vertical: super;
  }

Esta propriedade é responsável pelo alinhamento vertical do texto. Seu valor super especifica que o texto será exibido em sobrescrito. Mas o tamanho da fonte permaneceu o mesmo do texto normal. Para deixar tudo mais bonito, você também deve definir o tamanho da fonte um pouco menor usando a propriedade font-size.

É assim que a propriedade simplesmente funciona. Assim, para produzir em subscrito você precisa escrever assim:

Índice superior (
Alinhamento vertical: sub;
}

A diferença das tags HTML semelhantes é que essas regras não alteram o tamanho da fonte, portanto, se precisar fazer isso, você terá que escrever um novo tamanho na folha de estilos.

Isso é tudo que você precisa saber sobre sobrescrito e subscrito em CSS. Nenhum recursos adicionais a propriedade não fornece e eles não são necessários. Se desejar, você pode criar este texto de uma maneira especial, mas isso raramente é necessário.

Onde pode ser útil

Texto sobrescrito e subscrito pode ser usado ao escrever fórmulas, adicionar notas e notas a artigos. Por exemplo, a Wikipedia fornece fontes e notas para cada artigo. À medida que o artigo avança, eles são colocados na forma de pequenos sobrescritos. Isso não irrita os leitores e ao mesmo tempo permite dar aos artigos a aparência desejada.

A propriedade é totalmente compatível com vários navegadores e suportada em todas as versões de CSS.

Etiquetas HTML _{E ^{- Texto subscrito e sobrescrito}}

Definição e Uso

Marcação _{define texto interlinear. O texto sublinear tem metade da altura e aparece abaixo da linha de base. O texto interlinear pode ser usado ao escrever fórmulas químicas, como H 2 O.}

Marcação ^{define texto sobrescrito. O texto sobrescrito tem metade da altura e aparece acima da linha de base. O texto sobrescrito pode ser usado ao escrever notas de rodapé, como WWW.}

Suporte ao navegador

Etiquetas _{E ^{suportado por todos os principais navegadores.}}

Diferenças entre HTML e XHTML

Atributos padrão

Coluna DTD especifica em qual tipo de documento o atributo HTML 4.01/XHTML 1.0 DTD é permitido. S=Estrito, T=Transicional e F=Conjunto de quadros.

Etiquetas _{E ^{suporta os seguintes atributos padrão:}}

Mais informações sobre atributos padrão.

Atributos do Evento

Etiquetas _{E ^{suporta os seguintes atributos de evento:}}

Mais informações sobre

Há várias lições que estamos ficando mais sofisticados na formatação de texto usando CSS e, desta vez, estamos aprendendo como alterar a caixa do texto. Nesse sentido, as folhas de estilo em cascata abrem possibilidades muito amplas para nós e, para ser mais preciso, podemos:

• Exibir todo o texto em letras maiúsculas;
• Selecione todo o texto em letras minúsculas;
• Certifique-se de que a primeira letra de cada palavra comece com maiúscula.

“Tudo isso é bom, é claro, mas quando será necessário?” - você pergunta. Vamos imaginar uma situação em que você precise exibir todos os itens do menu em letras maiúsculas. Para isso, não é necessário digitá-los, inclusive com a tecla CapsLock, ou mantendo pressionado o botão Shift. Será suficiente definir todos os itens da lista para serem exibidos em letras maiúsculas, criando uma regra correspondente no arquivo CSS. E esta é apenas uma das muitas situações possíveis.

propriedade de transformação de texto

Controlaremos a caixa do texto usando a propriedade text-transform. Possui 4 valores principais - maiúsculas (letras maiúsculas), minúsculas (letras minúsculas), maiúsculas (maiúsculas para cada primeira letra da palavra, outros valores não mudam), nenhum (a formatação não é aplicada) . À primeira vista, tudo isso pode parecer muito complicado para você.

Mas na prática tudo é bastante simples, como você verá agora. O principal é escolher o seletor correto, pois os valores da propriedade text-transform são herdados.

Capitalizar

Em primeiro lugar, sugiro definir todo o texto em letras maiúsculas, para o que criamos a seguinte regra CSS:

Corpo (transformação de texto: maiúscula;)

Em princípio nada complicado, apenas usamos o valor maiúsculo. Como se costuma dizer, tudo é intuitivo. Isto é o que parece na vida real:

Minúsculas - aplica-se a todos

A próxima etapa é aplicar letras minúsculas em todos os lugares, escrevendo o seguinte:

Corpo (transformação de texto: minúsculas;)

Como você provavelmente já adivinhou, os dois significados que acabamos de conhecer são, até certo ponto, antônimos. E na ilustração abaixo você confere o resultado da propriedade recém criada.

Coloque a primeira letra de cada palavra em maiúscula

Para fazer isso, só precisamos usar o valor correspondente:

Corpo (transformação de texto: capitalizar;)

Não sei com que frequência você usará essa regra CSS, mas não fará mal nenhum saber dessa possibilidade, especialmente ao resolver problemas não triviais. O resultado pode ser visto na imagem abaixo.

Finalmente, vamos dar uma olhada rápida no último valor – nenhum. Como já disse, pode ser usado para cancelar a herança de um dos pais. Por exemplo, vamos imaginar que temos todas as regras anteriores em vigor, e para os parágrafos devemos cancelá-las, para isso escrevemos o seguinte:

P (transformação de texto: nenhum;)

Atrevo-me a supor que tudo está claro para você, caso contrário, tire suas dúvidas nos comentários. E isso é tudo para mim. Espero que este tutorial CSS tenha sido útil para você. Se for assim:

• Reposte este artigo em redes sociais para que mais pessoas se beneficiem;
• Assine minha newsletter para não perder postagens úteis e interessantes no blog.

É aqui que não digo adeus a você. Obrigado pela atenção e até as próximas publicações!