Programação CSS para iniciantes (Parte XVI)

CSS é a abreviatura de Cascade Styling Sheet, que significa Folha de Estilo em Cascata, e é a linguagem utilizada para controlar a apresentação de elementos em documentos HTML. A apresentação destes é especificada por uma série de regras que podem ser atribuídas em linha através dos atributos do elemento style ou através de regras incluídas dentro das tags na secção head dos documentos HTML, ou através de folhas de estilo externas (Leia: Tutorial: Aprender o básico sobre CSS ). Cada regra de estilização selecciona os elementos e depois aplica as regras aos mesmos.

O CSS foi criado pelo W3C para recuperar o controlo da markup de documentos à medida que o HTML ia evoluíndo a partir das tags primárias que definiam os elementos estruturais de um documento, como os cabeçalhos, parágrafos, hiperligações e listagens. Neste artigo Programação CSS para iniciantes (Parte XIV) vamos mostrar como fazer a formatação de texto, aprendendo desde já como especificar tamanhos para os tipos de letra, escolher um tipo de letra ou definir o estilo da mesma, utilizando CSS.

CSS

Não perca os artigos anteriores desta série:

4. INDEXAÇÃO E ESPAÇAMENTO DE TEXTO

uma das funcionalidades mais comuns no texto impresso é a identação da primeira linha de cada um dos parágrafos, que faz com que o texto seja mais legível. Em HTML e CSS isto pode ser feito facilmente através da utilização da propriedade text-ident para determinar o tamanho da identação a aplicar, como por exemplo 10px. Este valor da identação pode ser determinado em outras unidades, como “em” ou percentagem, e no caso da percentagem, esta será relativamente ao tamanho total da linha. Imaginando que um parágrafo tem 500px de largura, se aplicarmos um tamanho de identação de 10%, este será de 50px. Também é possível determinar valores negativos para a propriedade text-ident, no entanto é uma prática não aconselhada devido à sua inconsistência e falta de fiabilidade.

O espaço entre cada palavra num parágrafo pode ser alterada, mudando o valor por defeito (normal) ao determinar um valor para a propriedade word-spacing. De notar que qualquer valor que seja atribuido a esta propriedade, irá ser adicionado ao valor por defeito – quer isto dizer que se você determinar um word-spacing de 10px, o espaçamento entre as palavras será a soma entre o valor standard + os 10px determinados na propriedade word-spacing. Ainda dentro do espaçamento, mas desta vez no espaçamento entre caracteres, também é possível determinar qual o espaçamento entre cada caracter ao definir um valor para a propriedade letter-spacing.

Tal como no exemplo anterior, o espaçamento entre caracteres já tem um valor por defeito, e ao determinar um valor para a propriedade letter-spacing, este será somado com o valor por defeito e o resultado da soma irá ditar qual o espaçamento entre caracteres a ser aplicado. Quer isto dizer que se você determinar um letter-spacing de 10px, o espaçamento entre caracteres será a soma entre o valor standard + os 10px determinados na propriedade letter-spacing.

De notar que ambas as propriedades word-spacing e letter-spacing aceitam o valor “normal” para aplicar o espaçamento por defeito. Para ver isto em ação, vamos praticar:

Crie um documento HTML e insira o seguinte código para criar os parágrafos com texto que iremos estilizar com CSS para criar o espaçamento entre caracteres e entre palavras:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="letspac">Mauris elit metus</span>, feugiat sit amet porttitor varius, porta sed libero. Duis porta, mi eget pretium condimentum, quam libero ultrices metus, ut sodales nibh elit eget metus. Donec faucibus nibh in eros molestie sit amet commodo erat vulputate. Praesent porta venenatis gravida. Duis ut justo eros. Vestibulum volutpat bibendum arcu et posuere. Integer sed mauris massa, laoreet gravida nunc. Praesent metus magna, pellentesque vitae tempus quis, laoreet vitae odio. Phasellus eget metus eu mauris porttitor viverra.</p>

<p>In vulputate, metus vitae feugiat <span class="letspac">semper, augue nulla lacinia</span> lorem, quis aliquet eros purus ac dolor. Vestibulum risus metus, bibendum et bibendum eget, venenatis sit amet orci. Duis tempus eros orci, et blandit libero. Maecenas non turpis felis. Sed at metus sem, sed ullamcorper elit. <span class="wordspac">Aenean nec felis ut justo facilisis sollicitudin vitae ut odio.</span> Sed condimentum mollis nulla in vehicula. Duis a lorem magna, eu vulputate leo. Fusce iaculis diam et elit posuere blandit. Nam iaculis augue ac lorem dignissim pharetra.</p>

O próximo passo é criar as regras de estilização que irão determinar os valores para as propriedades text-ident, letter-spacing e word-spacing. Crie um documento CSS, linke-o ao documento HTMl e insira o seguinte código:
```
p{ text-indent:4em}
span.letspac{ letter-spacing:1em; background: green}
span.wordspac{ word-spacing:1.5em; background: red}
```
Guarde ambos os documentos e observe o resultado:

5. DECORAÇÃO DE TEXTO

A estilização de texto é feita através de regras de estilização que podem adicionar vários tipos de decoração ao texto, como o sublinhado, linha por cima do texto e linha ao meio do texto. Isto pode ser feito através da propriedade text-decoration, utilizando as palavras chave underline, overline e line-through. Como referenciámos, estas palavras-chave são por sí só explanatórias e não necessitam de grandes introduções. No entanto as palavras chave que podem ser utilizadas não ficam por aqui, poderá também utilizar o blink, que irá fazer com que o navegador faça desaparecer e reaparecer o texto em que tenha sido aplicada esta propriedade, dando um efeito como se estivesse a piscar.

Por último, se pretender que nenhuma decoração seja aplicada a um determinado texto por engano, determine o valor none para a propriedade text-decoration e fará com que nenhuma decoração seja aplicada do mesmo (em jeito de exemplo, isto é particularmente útil quando se pretende retirar o sublinhado de uma hiperligação). A propriedade text-decoration admite múltiplos valores, separados por vírgulas.

Text-decoration não é a única propriedade que permite aplicar decorações aos textos, podendo também utilizar o text-transform em que poderá determinar se quer o texto em maiúsculas, minúsculas ou capitalizado. Para observar estas propriedades em ação, vamos praticar:

Crie um documento HTML e insira o seguinte código para criar o texto que iremos estilizar com CSS tirando partido das propriedades citadas acima:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="sublinhado capital">Mauris elit metus</span>, feugiat sit amet porttitor varius, porta sed libero. <span class="sublinhado">Duis porta</span>, mi eget pretium condimentum, quam libero ultrices metus, ut sodales nibh elit eget metus. Donec faucibus nibh in eros molestie sit amet commodo erat vulputate. <span class="rasurado">Praesent porta</span> venenatis gravida. Duis ut justo eros. Vestibulum volutpat <span class="maiuscula">bibendum arcu et posuere</span>. Integer sed mauris massa, laoreet gravida nunc. Praesent metus magna, pellentesque vitae tempus quis, laoreet vitae odio. <span class="minuscula">PHASELLUS EGET METUS</span> eu mauris porttitor viverra.</p>

<a href="www.escolacriatividade.com/">Escola Criatividade</a> | <a class="none" href="www.escolacriatividade.com/">Escola Criatividade</a>

O próximo passo é criar um documento CSS, linká-lo ao documento HTML e inserir o seguinte código para introduzir as regras de estilização que irão decorar o texto:

span.sublinhado{text-decoration: underline}
span.rasurado{text-decoration:line-through}
span.minuscula {text-transform:lowercase}
span.maiuscula {text-transform: uppercase}
span.capital{text-transform:capitalize}
a.none{text-decoration:none}

Salve ambos os documentos e observe o resultado:

FICHEIROS FONTE

Caso pretenda ter acesso aos ficheiros fonte deste artigo, poderá baixá-los aqui. Desta forma terá acesso aos ficheiros concluídos com o código necessário, e perceber in-loko como foi feito o artigo.

Abraço!