:: CSS desde o início ::
Autor: Joe Gillespie
URL do original: https://www.wpdfd.com/editorial/basics/index.html
Título original: CSS from the Ground Up
Traduzido com autorização expressa do autor
Etapa número 3 - Estilizando texto
Embora já tenhamos livrado nossa página do austero preto e branco, mudando para cores ao nosso gosto, ainda podemos fazer muitas coisas. Podemos alterar o tipo e o tamanho das letras, o espaçamento entre linhas e adicionar outros detalhes tal como indentação de parágrafos.
O estilo para fontes
Iremos trabalhar de início com o estilo das fontes (typeface) pois esta alteração fará uma diferença marcante na página. Diferentemente de projetos para impressão, as páginas Web só conseguem mostrar os tipos de fontes que estejam instalados na máquina do usuário, assim não podemos empregar no nosso projeto um tipo de fonte de nossa livre escolha, mas teremos que escolher uma, dentre aquelas que mais comumente encontram-se instaladas nos computadores - uma que venha pré instalada com o sistema operacional. Isto limita consideravelmente nossa escolha. Você acabará descobrindo que está limitado a duas ou três fontes do tipo serif (com serifas) duas ou três do tipo sans-serif (sem serifas) e uma do tipo monospaced, (dactilográfica). Em lugar de escolher um tipo único de fonte, nós especificamos um conjunto de fontes no pressuposto que uma delas esteja instalada no computador do usuário.
Abaixo um exemplo mostrando os tipos de fontes mais comuns pré instaladas em computadores Windows e Machintosh. Você não pode assumir que a fonte que escolheu esteja instalada no computador do usuário e por isso deverá fornecer alternativas.
A seguir uma especificação típica para escolha de uma família de fontes do tipo sem serifas.
font-family: Verdana, Geneva, Arial, sans-serif;
E, para fontes com serifas
font-family: Georgia, "Times New Roman", Times, serif;
Observe que nomes de fontes composto por mais de uma palavra devem ser escritos entre aspas - "Times New Roman"
Vamos adicionar fontes sem serifas nos estilos para a nossa página e ver o que acontece.
Nossa página com fontes sem serifas »
O tamanho das fontes
A especificação do tamanho de fonte é um assunto controverso. Para impressão você poderá tranquilamente especificar um tamanho em 'points' (pontos) e terá sempre aquele tamanho na impressão. A quantidade de espaço de impressão assim como as quebras de linha serão sempre exatamente como você as especificou. Na Web os tamanhos de fonte não seguem um padrão rígido variando de um computador para outro, e em alguns casos, uma variação drástica. Dependendo do tamanho da tela do usuário, do seu sistema operacional e do navegador usado um mesmo tamanho de fonte pode variar desde de tão pequeno que se torne ilegível até tamanhos enormes semelhantes àqueles usados em livros grandes, para crianças. Felizmente os navegadores permitem aos usuários definir suas preferências pessoais de tamanhos, o que vem a atenuar as grandes variações, mas mesmo assim poderá haver diferenças entre o que você projetou e espera, e aquilo que será de fato apresentado ao usuário.
Com a crescente popularidade dos dispositivos Wi-Fi (acesso sem fio) e portáteis, as condições de navegação por sua página sofrerão uma mudança drástica nos próximos anos. Projetar hoje páginas Web para o futuro implica em considerar designs fluídos que se auto adaptem aos diferentes tamanhos de tela.
Repita comigo, "A Web não é igual a uma impressora!"
Tamanhos relativos para fontes
Se você quer servir sua página Web ao maior número possível de usuários é melhor especificar um tamanho de fonte relativo àquele escolhido como padrão pelo usuário. Várias são as maneiras de especificar fontes relativas. Você pode usar percentagem (%) da fonte padrão do usuário ou uma unidade de medida chamada 'em', o que é o mesmo que 100%. 1.2 em é o mesmo que 120%. A maneira preferencial de especificar tamanhos relativos de fontes é através do método descritivo de tamanhos, algo parecido com a especificação de tamanhos de camisas ( T-shirt). 'Medium' (médio) é o mesmo que 100% ou 1em. 'Smaller' (pequeno) é um tamanho menor que 'medium' e 'Larger' (grande) é um tamanho maior que 'medium'. Há também os tamanhos x-small, xx-small, x-large e xx-large (algo como - extra pequeno, super extra pequeno, extra grande, super extra grande). A vantagem deste sistema sobre as percentagens e ems é que os navegadores não tornarão os textos ilegíveis. Você pode por exemplo, especificar um tamanho de fonte de 0.7 em ou 70% e isto ficar perfeito no seu PC. Para alguém usando um Mac com um tamanho de fonte definido smaller por padrão, 70% poderá resultar em um tamanho ilegível. xx-small é o menor tamanho de fonte capaz de ser apresentado por um computador.
xx-largex-large large medium small x-small xx-small
xx-small type This type is small but not too small to render
This type is way too small This type is way too small>
Tamanhos absolutos para fontes
Se o público para o qual você projetar seu site for bastante específico e usa basicamente as mesmas configurações e tipo de computador que o seu, você poderá especificar o tamanho de suas fontes em pixels. Pixels não variarão muito de um para outro desktop e assim os tamanhos de fontes serão similares quando não idênticos. Uma vez que você utilize laptops ou dispositivos portáteis ou mesmo monitores com resolução muito alta, os tamanhos em pixel irão variar de acordo com o dispositivo usado.
Para que você tenha uma idéia exata destas variações, eu construi três parágrafos usando três métodos diferentes para definir o tamanho da fonte - percentagens - tamanhos T-shirt e pixels. Na tela do meu computador, usando um navegador Mozilla, os tamanhos são bem parecidos, mas poderão não ser para você.
Para esta linha foi definido um tamanho de fonte de 85% do tamanho das fontes deste tutorial.
Esta linha foi definida com o tamanho de fonte x-small
Esta linha foi definida com um tamanho de fonte absoluto de 11px
Convém ressaltar que você nunca deverá usar 'points' para definir tamanhos de fonte para tela (screen), use-o somente para impressão (print).
Espaçamento entre linhas
O espaçamento padrão entre linhas é de aproximadamente 120% do tamanho da fonte. Aumentar um pouco este espaçamento em geral resulta em melhoria da legibilidade, especialmente se as linhas são muito longas. Irei discutir esta questão mais adiante. Para a nossa página no estágio atual o comprimento das linhas é determinado pela largura da janela do navegador, assim, talvez um pouco maior do que o ideal.
Para definir o espaçamento entre as linhas podemos novamente optar por medidas relativas (% or ems) ou absoluta (px). Neste exemplo eu defini para toda a página, a altura da linha (line height), que vem a ser a altura do caracter (fonte) mais o espaço extra acima, em 180% do tamanho da fonte (small). Como as definições de estilo para body estão crescendo, eu coloquei as regras, cada uma em uma linha diferente, (isto não fará qualquer diferença para o browser) para que as regras de estilo fiquem mais fáceis de serem lidas por humanos. É de boa prática sempre colocar um ponto e vírgula ao terminar de escrever uma regra.
body {
background-color: #e8eae8;
color: #5d665b;
margin: 50px;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
line-height: 180%;
}
Agora estamos com um página mais 'arejada'' »
Parágrafos
Tudo o que fizemos até agora afeta a página toda. Agora iremos ver como definir estilos para áreas específicas da página.
Como eu já havia mencionado anteriormente, blocos de texto podem ser divididos em parágrafos para facilitar a leitura. Existem várias maneiras de visualmente separar parágrafos uns dos outros. Você poderá acrescentar espaços extras entre as linhas ou indentar a primeira linha.
Projetos tipográficos as vezes se utilizam de outras técnicas menos comuns tais como grandes indentações ou mesmo exdentações (o oposto de indentação). Com CSS é possível conseguir todos estes efeitos, mas por padrão o separador de parágrafos é o 'paragraph space' que equivale a metade da altura da linha 'line-height'.
Para fazer com que um bloco de texto se transforme em um parágrafo, basta colocá-lo dentro de um par de tags <p>...</p>. Para manipular os estilos a aplicar em um parágrafo nós adicionaremos p { } logo após às regras já definidas para body e a seguir, do sinal de chaves { }, acrescentaremos a declaração text-indent: 3em
<style type="text/css" title="mystyles" media="all">
<!--
body { background-color: #e8eae8;
color: #5d665b;
margin: 50px;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
line-height: 180%;
}
p { text-indent: 3em;}
-->
</style>
Observe que o primero parágrafo não está indentado - ele não foi colocado dentro das tags <p>...</p> e em consequência em termos de HTML ele não é oficialmente um parágrafo.
Títulos
Eu já expliquei os seis níveis de títulos padrão do HTML. Nós não temos que ficar restritos a eles, pois podemos redefiní-los de acordo com nossas necessidades. Novamente, isto é uma simples questão de definir mais umas regras de estilo.
Títulos por padrão são grandes e em negrito com um espaçamento extra acima e abaixo. Lembre-se que títulos dos níveis h1, h2 e h3 são maiores que o texto normal e dos níveis h5 e h6 são menores. Vamos trabalhar com o título h3 e alterar sua fonte e cor.
h3 {color:#966b72;
font-family:Georgia,"Times New Roman",Times,serif;}
Você deve ter observado que eu adicionei uma linha em branco acima do segundo título. Se você simplesmente colocar ali um parágrafo vazio <p></p> isto não vai funcionar pois sempre é necesário existir alguma coisa dentro das tags. Colocar um espaço em branco dentro de <p></p> também não vai funcionar pois o HTML ignora espaços em branco que não estejam entre dois caracteres. O que nós precisamos ali é de um caracter invisível e o HTML nos disponibiliza um, chamado de 'non-breaking space' que é escrito desta forma veja a seguir...
<p> </p>
O caracter 'non-breaking space' é bastante útil também para você evitar que certas palavras sejam quebradas ao fim de uma linha - palavras como nomes de pessoas ou de instituições.
Dicas extras
Antes de passar para a próxima etapa vamos experimentar alguns 'truques' na nossa página.
Na tag body eu defini uma margem de 50px para os quatro lados (ao redor de toda a página). Nós podemos definir margens diferentes para cima, para os lados direito e esquerdo e para baixo (top, right, left e bottom). Para isto basta que se declare as margens separadamente como mostrado abaixo:-
margin-top: 70px;
margin-left: 120px;
margin-right: 50px;
margin-bottom: 70px;
Isto faz nossa página se parecer a uma página impressa, com uma margem maior no lado esquerdo. Defini também na nossa página uma das palavras em negrito e outra em itálico. Atenção que o itálico pode ser renderizado erroneamente em alguns computadores e tornar-se ilegível em tamanhos de fontes pequenos.
Ver nossa página com textos estilizados »
Bem, agora você está com uma página onde acresentou algum estilo - sem muito esforço. Contudo a página ainda se parece com um documento datilografado ou produzido em um processador de textos. A seguir veremos algumas possibilidades interessantes de estilização para o layout.
Enquanto espera, você poderá fazer experiências com a página que acabamos de criar, modificando os valores das declarações de estilos. Tente mudar os tipos e tamanhos de fontes e os espaçamentos entre as linhas, porém o mais importante é que você carregue sua página em diferentes navegadores para observar quão diferente sua página possa parecer.
Navegação pelo tutorial
- » Introdução - página básica
- » Folha de estilos
- » Estilizando texto
- » Mais texto
- » As listas
- » Os links
- » Boxes CSS
- » DIV's
- » Juntando tudo
- » DOCTYPE
- » Estilos externos
- » Estilizando tabelas
- » Estilizando formulários
- » Browsers
- » O futuro
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.
Criado em: 2005-04-08
