Lição 4: Fontes
[/size]
Nesta lição estudaremos as fontes e como aplicá-las usando CSS. Veremos como criar situações para que determinada fonte seja visualizada pelo usuário mesmo não estando instalada em seu sistema operacional. Descreveremos as seguintes propriedades CSS:
- font-family
- font-style
- font-variant
- font-weight
- font-size
- font
[size=150]
Família de fontes [font-family][/size]
A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina do usuário, deverá ser usada a segunda e assim por diante até ser encontrada uma fonte instalada.
Existem dois tipos de nomes para definir fontes: nomes para famílias de fontes e nomes para famílias genéricas. Os dois são explicados a seguir:
nome para famílias de fontes Exemplos para este tipo (normalmente conhecidas como "font") são "Arial", "Times New Roman" ou "Tahoma".
nome para famílias genéricas Famílias genéricas são fontes que pertencem a um grupo com aparência uniforme. Um exemplo são as fontes sans-serif que englobam a coleção de fontes que "não têm pé".
A diferença está mostrada na figura a seguir:
http://pt-br.html.net/tutorials/css/figure005-pt-br.gifAo listar fontes para seu website, comece com aquela preferida, seguindo-se algumas alternativas para ela. É recomendável encerrar a listagem das fontes com uma fonte genérica. Assim fazendo, em último caso a página será renderizada com fonte da mesma família das que foram especificadas quando todas as demais estiverem indisponíveis na máquina do usuário.
A seguir mostramos um exemplo de listagem de fontes:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Ver exemploCabeçalhos <h1> serão renderizados com fonte "Arial". Se o usuário não tiver a font Arial instalada, será usada a fonte "Verdana". Se ambas estiverem indisponíveis na máquina do usuário será usada uma fonte da família
sans-serif.
Notar que para especificar a fonte "Times New Roman" foram usadas aspas. Isto é necessário para fontes com nomes compostos e que contenham espaços entre os nomes.
[size=150]
Estilo da fonte [font-style][/size]
A propriedade font-style define a escolha da fonte em
normal,
italic ou
oblique. No exemplo a seguir todos as cabeçalhos <h2> serão em itálico.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
Ver exemplo[size=150]
Fonte variante [font-variant][/size]
A propriedade font-variant é usada para escolher as variantes
normal ou
small-caps. Uma fonte
small-caps é aquela que usa letras maiúsculas de tamanhos reduzidos. Confundiu? Dê uma olhada nos exemplos a seguir:
http://pt-br.html.net/tutorials/css/figure006.gifSe a propriedade font-variant for definida para
small-caps e não estiver disponível na máquina do usuário, será usada fonte em maiúscula.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Ver exemplo[size=150]
Peso da fonte [font-weight][/size]
A propriedade font-weight define quão negrito ou "pesada" deve ser renderizada a fonte. Uma fonte pode ser
normal ou
bold. Alguns navegadores suportam números de 100-900 (em intervalos de 100 em 100) para definir o peso da fonte.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Ver exemplo[size=150]
Tamanho da fonte [font-size][/size]
On tamanho da fonte é definido pela propriedade font-size.
Existem muitas unidades (p. ex.:. pixels e percentagens) que podem ser usadas para definir o tamanho da fonte. Neste tutorial nós usaremos as unidades mais comuns e apropriadas. Ver exemplos a seguir:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Ver exemploExiste uma diferença fundamental entre as quatro unidades adotadas no exemplo acima. As unidades '
px' e '
pt' são absolutas, enquanto '
%' e '
em' permitem ao usuário ajustar o tamanho das fontes ao seu gosto e necessidade. Muitos usuários têm restrições, como por exemplo, pessoas idosas, pessoas com visão limitada ou as que usam um monitor de baixa qualidade.
Para fazer seu site acessível a todos, você deverá usar unidades como '
%' ou '
em'.
Abaixo uma figura mostrando como ajustar o tamanho das fontes nos navegadores Mozilla Firefox e Internet Explorer. Tente você mesmo este ajuste — uma excelente funcionalidade do navegador, não é mesmo?
http://pt-br.html.net/tutorials/css/figure007-pt-br.gif[size=150]
Compilando [font][/size]
Usar font é uma abreviação que permite definir várias propriedades em uma só.
Veja a seguir quatro linhas de código usadas para definir propriedades de fonte para um parágrafo <p>:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Usar a abreviação simplifica o código como mostrado abaixo:
p {
font: italic bold 30px arial, sans-serif;
}
A ordem dos valores para font é a mostrada a seguir :
font-style | font-variant | font-weight | font-size | font-family
Lição 5: Textos
Formatar e estilizar textos é um item chave para qualquer web designer. Nesta lição você será apresentado às interessantes oportunidades que as CSS proporcionam para adicionar layout aos textos. Serão discutidadas as propriedades listadas abaixo:
- text-indent
- text-align
- text-decoration
- letter-spacing
- text-transform
[size=150]
Indentação de texto [text-indent][/size]
A propriedade text-indent permite que você aplique um recuo à primeira linha de um parágrafo. No exemplo a seguir um recuo de
30px é aplicado à todos os textos marcados com <p>:
p {
text-indent: 30px;
}
Ver exemplo[size=150]
Alinhamento de textos [text-align][/size]
A propriedade text-align corresponde ao atributo align das antigas versões do HTML. Textos podem ser alinhados à esquerda (
left), à direita (
right) ou centrados (
centred). E temos ainda o valor
justify que faz com o texto contido em uma linha se estenda tocando as margens esquerda e direita. Este tipo de alinhamento é usado em jornais e revistas.
No exemplo a seguir o texto contido na célula de cabeçalho <th> é alinhado à direita e os contidos nas células de dados <td> são centrados. E, os textos normais em parágrafos são justificados:
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
Ver exemplo[size=150]
Decoração de textos [text-decoration][/size]
A propriedade text-decoration possibilita adicionar "efeitos" ou "decoração" em textos. Você pode por rexemplo, sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o texto, etc. No exemplo a seguir os cabeçalhos <h1> são sublinhados, os cabeçalhos <h2> levam um linha em cima e os cabeçalhos <h3> são cortados por uma linha.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Ver exemplo[size=150]
Espaço entre letras [letter-spacing][/size]
O espaçamento entre os caracteres de um texto é controlado pela propriedade letter-spacing. O valor desta propriedade define o espaço entre os caracteres. Por exemplo, se você deseja um espaço de
3px entre as letras do texto de um parágrafo <p> e de
6px entre as letras do texto de um cabeçalho <h1> o código a seguir deverá ser usado.
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Ver exemplo[size=150]
Transformação de textos [text-transform][/size]
A propriedade text-transform controla a capitalização (tornar maiúscula) do texto. Você pode escolher
capitalize,
uppercase ou
lowercase independentemente de como o texto foi escrito no código HTML.
Como exemplo tomamos a palavra "cabeçalho" que pode ser apresentada ao usuário como "CABEÇALHO" ou "Cabeçalho". São quatro os valores possíveis para text-transform:
capitalize Capitaliza a primeira letra de cada palavra. Por exemplo: "john doe" transforma-se para "John Doe".
uppercase Converte todas as letras para maiúscula. Por exemplo: "john doe" transforma-se para"JOHN DOE".
lowercase Converte todas as letras para minúscula. Por exemplo: "JOHN DOE" transforma-se para"john doe".
none Sem trasformações - o texto é apresentado como foi escrito no código HTML.
Para exemplificar vamos usar uma lista de nomes. Os nomes estão marcados com o elemento <li> (item de lista). Vamos supor que desejamos os nomes capitalizados e os cabeçalhos em letras maiúsculas.
Ao consultar o exemplo sugerido para este código dê uma olhada no HTML da página e observe que os textos no código foram escritos com todas as letras em minúsculas.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Ver exemplo
Lição 6: Links[/center]
Você pode aplicar aos links tudo que aprendeu nas lições anteriores (i.e. mudar cores, fontes, sublinhados, etc). A novidade aqui é que você pode definir as propriedades de maneira diferenciada de acordo com o estado do link ou seja visitado, não visitado, ativo ou com o ponteiro do mouse sobre o link. Isto possibilita adicionar interessantes efeitos ao seu website. Para estilizar estes efeitos você usará as chamadas pseudo-classes.
[size=150]
O que é pseudo-classe?[/size]
Uma pseudo-classe permite estilizar levando em conta condições diferentes ou eventos ao definir uma propriedade de estilo para uma tag HTML.
Vamos ver um exemplo. Como você já sabe, links são marcados no HTML com tags <a>. Podemos então usar a como um seletor CSS:
a {
color: blue;
}
Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado ou não visitado. Você usará pseudo-classes para estilizar links visitados e não visitados.
a:link {
color: blue;
}
a:visited {
color: red;
}
Use as pseudo-classes a:link e a:visited para estilizar links não visitados e visitados respectivamente. Links ativos são estilizados com a pseudo-classe a:active e a:hover, esta última é a pseudo-classe para links com o ponteiro do mouse sobre ele.
A seguir explicaremos com mais detalhes e exemplificação, as quatro pseudo-classes.
[size=150]
Pseudo-classe: link[/size]
A pseudo-classe :link é usada para links não visitados.
No exemplo a seguir links não vistados serão na cor verde.
a:link {
color: green;
}
Ver exemplo[size=150]
Pseudo-classe: visited[/size]
A pseudo-clases :visited é usada para links visitados. No exemplo a seguir links visitados serão na cor amarela:
a:visited {
color: yellow;
}
Ver exemplo[size=150]
Pseudo-classe: active[/size]
A pseudo-classe :active é usada para links ativos.
No exemplo a seguir links ativos terão seu fundo na cor vermelha:
a:active {
background-color: red;
}
Ver exemplo[size=150]
Pseudo-classe: hover[/size]
A pseudo-classe :hover é usada para quando o ponteiro do mouse está sobre o link.
Isto pode ser usado para conseguir efeitos bem interessantes. Por exemplo, podemos mudar a cor do link para laranja e o texto para itálico quando o ponteiro do mouse passa sobre ele, o código CSS para estes efeitos é o mostrado a seguir:
a:hover {
color: orange;
font-style: italic;
}
Ver exemplo[size=150]
Exemplo 1: Efeito quando o ponteiro está sobre o link[/size]
É comum a criação de efeitos diferentes quando o ponteiro está sobre o link. Veremos a seguir alguns exemplos extras de estilização da pseudo-classe :hover.
Exemplo 1a: Espaçamento entre as letrasComo você deve estar lembrado da lição 5, o espaçamento entre as letras de um texto pode ser controlado pela propriedade letter-spacing. Isto pode ser aplicado aos links para obter um efeito interessante:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
Ver exemploExemplo 1b: UPPERCASE e lowercaseNa lição 5 vimos a propriedade text-transform, para estilizar com letras maiúsculas e minúsculas. Isto pode ser usado para estilizar links:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Ver exemploOs exemplos mostrados dão uma idéia das inúmeras possibilidades de combinação de diferentes propriedades. Você pode criar seus próprios efeitos — faça uma tentativa!
[size=150]
Exemplo 2: Removendo sublinhado dos links[/size]
Uma pergunta comum: Como remover o sublinhado dos links?
Você deve estudar com muito cuidado a necessidade de retirar o sublinhado dos links, pois isto poderá reduzir signifcativamente a usabilidade do website. As pessoas estão acostumadas com links na cor azul e sublinhados e sabem que ali há um texto a ser clicado. Até minha mãe sabe disto! Se você muda a cor e retira o sublinhado dos links, poderá confundir seus visitantes e em conseqüência não retirar o máximo dos conteúdos do seu website.
Feita esta ressalva, é muito fácil retirar o sublinhado dos links. Conforme explicado na lição 5, a propriedade text-decoration pode ser usada para definir se o texto é ou não sublinhado. Para remover o sublinhado, basta definir o valor none para a propriedade text-decoration.
a {
text-decoration:none;
}
Alternativamante, você pode definir text-decoration juntamente com outras propriedades para as quatro pseudo-classes.
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
Ver exemplo
