A porcentagem é outra das medidas ou unidades que podemos utilizar nos atributos de folhas de estilo em cascada (CSS) para definir um tamanho. Neste artigo, veremos exemplos sobre como modificar os tamanhos dos textos por meio de porcentagens, para conseguir novos tamanhos que sejam relativos aos que se estão utilizando.

Por exemplo, poderíamos definir um estilo para escrever com um texto com o dobro de tamanho do que se estiver trabalhando:

<span style="font-size:200%">Este texto tem o dobro de tamanho</span>

Isto quer dizer que o texto terá o dobro e tamanho, 2 pelas unidades de texto que estivermos trabalhando. Por exemplo, se estivermos trabalhando com tamanhos de texto de 10pt, o texto dentro do anterior span seria 20pt. O do seguinte código exemplifica este caso concreto:

<span style="font-size:10pt;">Ola amigos <span style="font-size:200%">Este texto tem o dobro de tamanho</span> </span>

O mesmo pode ser feito, porém para definir um texto menor, atribuindo porcentagens abaixo de 100%. Por exemplo, se quiséssemos fazer um texto com a metade do tamanho utilizaríamos a seguinte etiqueta:

<span style="font-size:50%">Este texto é a metade do anterior<,/span>

Se estivéssemos trabalhando com um tamanho de texto de 16pt, com a anterior etiqueta se escreveria com tamanho 8pt. O código seria o seguinte:

<span style="font-size:16pt;">Ola amigos
<span style="font-size:50%">Este texto é a metade do anterior</span>
</span>

Agora vamos definir um par de classes para um texto maior e menor, que poderíamos utilizar para aumentar e reduzir o texto respectivamente.

<style type="text/css">
   .mayor {font-size:150%}
   .menor {font-size:75%}
</style>

Este código indica que a classe maior é um texto de 150%, ou seja, a metade mais que o anterior, e a classe menor um texto de 75%, ou seja, três quartas partes do anterior. Poderíamos utilizar estas classes com um código como este:

Este é um texto normal <span class="maior">e este é maior</span>, este volta a ser normal <span class="menor">e este é menor</span>

Os diferentes exemplos deste artigo podem ser vistos em uma página a parte.