Procurar
Entrar
Últimos assuntos
Os membros mais ativos da semana
Nenhum usuário |
aula de CSS Nº3 - Fontes
3 participantes
Programadores :: Dúvidas e Suporte :: Suporte/Aulas :: CSS
Página 1 de 1
aula de CSS Nº3 - Fontes
Hoje vamos falar de fontes e como modificar a sua aparência.
Eis as propriedades de que vamos falar nesta aula:
FONT-FAMILY
A propriedade font-family é usada para definir uma lista de fontes e a sua prioridade de apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada no computador do usuário, deverá ser usada a segunda e assim por diante até ser encontrada uma fonte instalada.
Ao listar fontes para o 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 uma fonte da mesma família das que foram especificadas quando todas as demais estiverem indisponíveis no computador do usuário.
Exemplo:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Na primeira linha de código definiu-se que para os cabeçalhos 1 usa-se por ordem de preferência as fontes: arial, verdana e em seguida qualquer outra fonte da família sans-serif. Já na segunda linha de código escolheu-se a fonte Times New Roman (como ela têm espaços no meio do nome deve ser colocada entre aspas) e em seguida qualquer outra fonte da família serif.
EXEMPLO AQUI
FONT-STYLE
A propriedade font_style define se a fonte deve ser apresentada em italico, normal ou oblique.
EXEMPLO AQUI
FONT-VARIANT
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.
EXEMPLO AQUI
FONT-WEIGHT
A propriedade font-weight é usada para escolher as variantes bold e normal.
EXEMPLO AQUI
FONT-SIZE
A propriedade font-size define o tamanho da fonte e há muitas unidades possíveis para o fazer alguns exemplos são: px, %, pt e em.
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
h4 {font-size: 1em;}
EXEMPLO AQUI
E assim acaba mais uma aula.
Na próxima aula vamos falar de textos.
Eis as propriedades de que vamos falar nesta aula:
- font_family
- font_style
- font_variant
- font_weight
- font_size
FONT-FAMILY
A propriedade font-family é usada para definir uma lista de fontes e a sua prioridade de apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada no computador do usuário, deverá ser usada a segunda e assim por diante até ser encontrada uma fonte instalada.
Alguns exemplos de familias de fontes:
Ao listar fontes para o 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 uma fonte da mesma família das que foram especificadas quando todas as demais estiverem indisponíveis no computador do usuário.
Exemplo:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Na primeira linha de código definiu-se que para os cabeçalhos 1 usa-se por ordem de preferência as fontes: arial, verdana e em seguida qualquer outra fonte da família sans-serif. Já na segunda linha de código escolheu-se a fonte Times New Roman (como ela têm espaços no meio do nome deve ser colocada entre aspas) e em seguida qualquer outra fonte da família serif.
EXEMPLO AQUI
FONT-STYLE
A propriedade font_style define se a fonte deve ser apresentada em italico, normal ou oblique.
CÓDIGO | DESCRIÇÃO |
font-style:italic; | A fonte será definida para itálico |
font-style:normal; | A fonte será definida para normal |
font-style:oblique; | A fonte será definida para oblique |
EXEMPLO AQUI
FONT-VARIANT
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.
CÓDIGO | DESCRIÇÃO |
font-variant: normal; | define a fonte para normal |
font-variant: small-caps; | define a fonte para small-caps |
EXEMPLO AQUI
FONT-WEIGHT
A propriedade font-weight é usada para escolher as variantes bold e normal.
CÓDIGO | DESCRIÇÃO |
font-weight: normal; | define a fonte para normal |
font-weight: bold; | define a fonte para bold |
EXEMPLO AQUI
FONT-SIZE
A propriedade font-size define o tamanho da fonte e há muitas unidades possíveis para o fazer alguns exemplos são: px, %, pt e em.
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
h4 {font-size: 1em;}
EXEMPLO AQUI
E assim acaba mais uma aula.
Na próxima aula vamos falar de textos.
Re: aula de CSS Nº3 - Fontes
o que significa, no caso das fontes, ter ou não ter "pé"?
Henrique_GJ- Regular
- Mensagens : 76
Reputação : 0
Data de inscrição : 18/07/2011
Re: aula de CSS Nº3 - Fontes
Realmente estou gostando desta linguagem, vou ver se coloco uma área para tutoriais de CSS, ok?
Re: aula de CSS Nº3 - Fontes
ata, reparei nisso agora, legal xDD
Henrique_GJ- Regular
- Mensagens : 76
Reputação : 0
Data de inscrição : 18/07/2011
Tópicos semelhantes
» aula de CSS Nº2 - Backgrounds
» aula de HTML Nº4 - Texto
» aula de HTML Nº5 - Imagens
» aula de CSS Nº1 - O que é e como começar
» aula de HTML Nº2 - Hiperligações
» aula de HTML Nº4 - Texto
» aula de HTML Nº5 - Imagens
» aula de CSS Nº1 - O que é e como começar
» aula de HTML Nº2 - Hiperligações
Programadores :: Dúvidas e Suporte :: Suporte/Aulas :: CSS
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Seg Nov 14, 2011 1:36 pm por luiz_100juizo
» Olá caro programadores!
Sáb Out 29, 2011 7:58 am por AllanXD! Soft
» Eae Galera
Sáb Out 01, 2011 7:10 am por MegafireWoody
» [Atualização do fórum]Alguns ícones modificados
Sex Ago 05, 2011 2:49 pm por Henrique_GJ
» Amem Cheguei Manolo
Sex Ago 05, 2011 2:48 pm por Henrique_GJ
» aula de CSS Nº2 - Backgrounds
Sex Ago 05, 2011 2:47 pm por Henrique_GJ
» [Atualização do fórum]Atualização nas publicidades
Sex Ago 05, 2011 2:46 pm por Henrique_GJ
» Comple na área
Sex Ago 05, 2011 2:45 pm por Henrique_GJ
» [Atualização no fórum]Área de suporte para o CSS
Sex Ago 05, 2011 2:45 pm por Henrique_GJ