Propriedades css propriedades de fontes de 
texto 
Filipe Resende 
filipe.olate@hotmail.com 
Pedro Luan 
Pedro_cruz.23@hotmail.com 
Eryc ney 
Eric.ney@hotmail.com 
Alacy Pinheiro 
Alacypinheiro.ap@gmail.com 
Osmarildo Reis 
Osmarreis12@hotmail.com 
Eduardo Filipe 
Edu14_2007@hotmail.com
O que é CSS ? 
CSS, é uma tecnologia que nos permite criar 
páginas web de uma maneira mais exata. 
Graças às CSS somos muito mais donos dos 
resultados finais da página, podendo fazer 
muitas coisas que não se podia fazer utilizando 
somente HTML, como incluir margens, tipos de 
letra, fundos, cores... 
O CSS traz toda a informação do layout, isto é, 
cores, posicionamento, fontes, tamanhos e 
imagens de fundo, enquanto o HTML deve 
fornecer uma “arquitetura” para o conteúdo.
O que eu posso fazer com CSS? 
CSS é uma linguagem para estilos que define o 
layout de documentos HTML. Por 
exemplo, CSS controla fontes, cores, margens, 
linhas, alturas, larguras, imagens de fundo, 
posicionamentos e muito mais. Aguarde e você verá! 
HTML pode ser (in)devidamente usado para definir o 
layout de websites. Contudo CSS proporciona mais 
opções e é mais preciso e sofisticado. CSSé 
suportado por todos os navegadores atuais. 
Depois de estudar algumas poucas lições deste 
tutorial, você estará em condições de projetar uma 
folha de estilos, usando CSS para dar um grande 
visual ao seu website.
Quais são os benefícios do uso de CSS? 
 CSS é uma revolução no mundo do web design. Os 
benefícios concretos do uso de CSS incluem: 
 controle do layout de vários documentos a partir de 
uma simples folha de estilos; 
 maior precisão no controle do layout; 
 aplicação de diferentes layouts para servir diferentes 
mídias (tela, impressora, etc.); 
 emprego de variadas, sofisticadas e avançadas técnicas 
de desenvolvimento.
Propriedades CSS 
A linguagem utilizada atualmente para definir o layout dos 
documentos HTML é a CSS, uma abreviação para o termo em 
inglês Cascading Style Sheet que, traduzido para o português, 
ficou como folhas de estilo em cascata. 
CSS fornece muito poder ao atributo 'CLASS', tanto que 
em muitos casos não importa para qual elemento HTML 
a classe foi definida -- é possível fazer qualquer 
elemento emular qualquer outro. O abuso deste poder 
não é recomendado, porque ele retira a característica 
estrutural aceita universalmente para os elementos 
HTML. Uma estrutura baseada em classes apenas é útil 
dentro de um ambiente bem restrito, onde a definição 
de cada classe tenha sido aceita por todos.
Propriedades de Dimensão: 
As propriedades de Dimensão permitem-lhe controlar a altura e a largura 
de um elemento. Também permitem-lhe aumentar o espaço entre duas 
linhas.
Propriedades de Classificação em CSS 
As propriedades de Classificação permitem-lhe controlar como exibir um 
elemento, especificar onde uma imagem aparecerá em outro elemento, 
posicionar um elemento em relação à sua posição normal, posicionar um 
elemento usando um valor absoluto, e como controlar a visibilidade de um 
elemento.
A Sintaxe das pseudo-classes: 
Classes CSS também podem ser usadas com pseudo-classes: 
Pseudo-classes em CSS 
As Pseudo-classes são usadas na CSS para adicionar efeitos 
diferentes em alguns seletores, ou a uma parte de alguns 
seletores. 
Pseudo-classes Âncora 
Um link ativo, visitado, não visitado, ou quando o mouse está 
sobre um link, podem todos ser exibidos de diferentes 
maneiras em um navegador.
A Pseudo-classe :lang 
A pseudo-classe: lang permite ao autor especificar a linguagem a 
ser usada em um documento ou a ser usada num elemento 
específico. 
No exemplo abaixo, a regra especifica o tipo de marcas de citação 
para um documento em HTML que está em português: 
html:lang(pt) 
{ 
quotes: '« ' ' »' 
}
CSS Pseudo-elements 
Pseudo-elementos são usados em CSS para adicionar efeitos 
diferentes em alguns seletores, ou parte de alguns seletores. 
The :first-line Pseudo-element 
O pseudo-elemento "first-line" é usado para adicionar estilos 
especiais à primeira linha de um texto em um seletor: 
Observação: As seguintes propriedades aplicam-se ao 
pseudo-elemento "first-line": 
font properties (propriedades de fonte) 
color properties (propriedades de cor) 
background properties (propriedades de plano de fundo) 
word-spacing (espaçamento enter palavras) 
letter-spacing (espaçamento entre letras) 
text-decoration (decoração de texto) 
vertical-align (alinhamento vertical) 
text-transform (transformação de texto) 
line-height (altura da linha) 
clear (limpar)
A saída poderia ser algo assim: 
No exemplo acima a primeira letra do parágrafo será vermelha com um tamanho de fonte de 24pt. O resto da primeira linha seria azul enquanto que o resto do parágrafo estaria Pseudo-elementos Múltiplos 
Vários pseudo-elementos podem ser combinados: 
p {font-size: 12pt} 
p:first-letter {color: #FF0000; font-size: 200%} 
p:first-line {color: #0000FF} 
<p>As primeiras palavras de um artigo</p> 
A saída poderia ser algo assim: 
/ s primeiras 
/— palavras de 
um artigo. 
No exemplo acima a primeira letra do parágrafo será 
vermelha com um tamanho de fonte de 24pt. O resto da 
primeira linha seria azul enquanto que o resto do parágrafo 
estaria na cor padrão.
PROPRIEDADE ‘FONT-FAMILY’ 
O VALOR DESTA PROPRIEDADE CONSISTE NUMA 
RELAÇÃO DE NOMES ESPECÍFICOS DE FAMÍLIAS DE 
FONTES OU DE SEUS NOMES GENÉRICOS. AO 
CONTRÁRIO DE OUTRAS PROPRIEDADES CSS1, OS 
VALORES NA RELAÇÃO DE NOMES SÃO SEPARADOS 
POR VÍRGULAS PARA INDICAR QUE ELES SÃO 
ALTERNATIVOS: 
BODY { FONT-FAMILY: GILL, HELVETICA, SANS-SERIF 
}
PROPRIEDADE ‘FONT-STYLE’ 
A PROPRIEDADE 'FONT-STYLE' DEFINE SE A FONTE É NORMAL 
(ALGUMAS VEZES CHAMADA DE 'ROMANA'), ITÁLICA OU 
OBLÍQUA. 
FONTES QUE CONTENHAM AS PALAVRAS 'OBLIQUE', 
'SLANTED' OU 'INCLINE' EM SEUS NOMES SÃO CLASSIFICADAS 
COMO 'OBLIQUE'. JÁ AS FONTES COM ITALIC, CURSIVE OU 
KURSIV SÃO CLASSIFICADAS COMO 'ITALIC‘: 
H1, H2, H3 { FONT-STYLE: ITALIC }H1 EM { FONT-STYLE: 
NORMAL }
PROPRIEDADE ‘FONT-VARIANT’ 
Esta propriedade é muito interessante. 
Ele faz com que as letras minúsculas 
pareçam letras maiúsculas. 
p { 
font-family: Times, "Times New 
Roman", Serif; 
font-style: italic; 
font-variant: small-caps; 
}
PROPRIEDADE ‘FONT-WEIDHT’ 
 A PROPRIEDADE 'FONT-WEIGHT' SELECIONA 
A INTENSIDADE DE UMA FONTE. NA 
SEQÜÊNCIA DE VALORES DE '100' A '900', 
CADA NÚMERO INDICA UMA FONTE MAIS 
INTENSA (ESCURA) QUE O VALOR ANTERIOR. 
P { FONT-WEIGHT: NORMAL } /* 400 */ 
H1 { FONT-WEIGHT: 700 } /* BOLD */
PROPRIEDADE ‘FONT-SIZE’ 
A PROPRIEDADE FONT-SIZE É USADA PARA 
INDICAR O TAMANHO DA LETRA(FONTE) EM 
CSS. ESTE TAMANHO PODERÁ SER 
ESPECIFICADO EM VÁRIAS UNIDADES DE 
MEDIDAS.
PROPRIEDADE ‘FONT’ 
A PROPRIEDADE 'FONT' É UM ATALHO PARA 
DEFINIR 'FONT-STYLE', 'FONT-VARIANT', 
'FONT-WEIGHT', 'FONT-SIZE', 
'LINE-HEIGHT' E 'FONT-FAMILY' EM 
UM ÚNICO LOCAL DA FOLHA DE ESTILO.

Propriedades css e propriedades de fontes de texto

  • 1.
    Propriedades css propriedadesde fontes de texto Filipe Resende filipe.olate@hotmail.com Pedro Luan Pedro_cruz.23@hotmail.com Eryc ney Eric.ney@hotmail.com Alacy Pinheiro Alacypinheiro.ap@gmail.com Osmarildo Reis Osmarreis12@hotmail.com Eduardo Filipe Edu14_2007@hotmail.com
  • 2.
    O que éCSS ? CSS, é uma tecnologia que nos permite criar páginas web de uma maneira mais exata. Graças às CSS somos muito mais donos dos resultados finais da página, podendo fazer muitas coisas que não se podia fazer utilizando somente HTML, como incluir margens, tipos de letra, fundos, cores... O CSS traz toda a informação do layout, isto é, cores, posicionamento, fontes, tamanhos e imagens de fundo, enquanto o HTML deve fornecer uma “arquitetura” para o conteúdo.
  • 3.
    O que euposso fazer com CSS? CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. Aguarde e você verá! HTML pode ser (in)devidamente usado para definir o layout de websites. Contudo CSS proporciona mais opções e é mais preciso e sofisticado. CSSé suportado por todos os navegadores atuais. Depois de estudar algumas poucas lições deste tutorial, você estará em condições de projetar uma folha de estilos, usando CSS para dar um grande visual ao seu website.
  • 4.
    Quais são osbenefícios do uso de CSS?  CSS é uma revolução no mundo do web design. Os benefícios concretos do uso de CSS incluem:  controle do layout de vários documentos a partir de uma simples folha de estilos;  maior precisão no controle do layout;  aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.);  emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.
  • 5.
    Propriedades CSS Alinguagem utilizada atualmente para definir o layout dos documentos HTML é a CSS, uma abreviação para o termo em inglês Cascading Style Sheet que, traduzido para o português, ficou como folhas de estilo em cascata. CSS fornece muito poder ao atributo 'CLASS', tanto que em muitos casos não importa para qual elemento HTML a classe foi definida -- é possível fazer qualquer elemento emular qualquer outro. O abuso deste poder não é recomendado, porque ele retira a característica estrutural aceita universalmente para os elementos HTML. Uma estrutura baseada em classes apenas é útil dentro de um ambiente bem restrito, onde a definição de cada classe tenha sido aceita por todos.
  • 6.
    Propriedades de Dimensão: As propriedades de Dimensão permitem-lhe controlar a altura e a largura de um elemento. Também permitem-lhe aumentar o espaço entre duas linhas.
  • 7.
    Propriedades de Classificaçãoem CSS As propriedades de Classificação permitem-lhe controlar como exibir um elemento, especificar onde uma imagem aparecerá em outro elemento, posicionar um elemento em relação à sua posição normal, posicionar um elemento usando um valor absoluto, e como controlar a visibilidade de um elemento.
  • 8.
    A Sintaxe daspseudo-classes: Classes CSS também podem ser usadas com pseudo-classes: Pseudo-classes em CSS As Pseudo-classes são usadas na CSS para adicionar efeitos diferentes em alguns seletores, ou a uma parte de alguns seletores. Pseudo-classes Âncora Um link ativo, visitado, não visitado, ou quando o mouse está sobre um link, podem todos ser exibidos de diferentes maneiras em um navegador.
  • 9.
    A Pseudo-classe :lang A pseudo-classe: lang permite ao autor especificar a linguagem a ser usada em um documento ou a ser usada num elemento específico. No exemplo abaixo, a regra especifica o tipo de marcas de citação para um documento em HTML que está em português: html:lang(pt) { quotes: '« ' ' »' }
  • 10.
    CSS Pseudo-elements Pseudo-elementossão usados em CSS para adicionar efeitos diferentes em alguns seletores, ou parte de alguns seletores. The :first-line Pseudo-element O pseudo-elemento "first-line" é usado para adicionar estilos especiais à primeira linha de um texto em um seletor: Observação: As seguintes propriedades aplicam-se ao pseudo-elemento "first-line": font properties (propriedades de fonte) color properties (propriedades de cor) background properties (propriedades de plano de fundo) word-spacing (espaçamento enter palavras) letter-spacing (espaçamento entre letras) text-decoration (decoração de texto) vertical-align (alinhamento vertical) text-transform (transformação de texto) line-height (altura da linha) clear (limpar)
  • 11.
    A saída poderiaser algo assim: No exemplo acima a primeira letra do parágrafo será vermelha com um tamanho de fonte de 24pt. O resto da primeira linha seria azul enquanto que o resto do parágrafo estaria Pseudo-elementos Múltiplos Vários pseudo-elementos podem ser combinados: p {font-size: 12pt} p:first-letter {color: #FF0000; font-size: 200%} p:first-line {color: #0000FF} <p>As primeiras palavras de um artigo</p> A saída poderia ser algo assim: / s primeiras /— palavras de um artigo. No exemplo acima a primeira letra do parágrafo será vermelha com um tamanho de fonte de 24pt. O resto da primeira linha seria azul enquanto que o resto do parágrafo estaria na cor padrão.
  • 12.
    PROPRIEDADE ‘FONT-FAMILY’ OVALOR DESTA PROPRIEDADE CONSISTE NUMA RELAÇÃO DE NOMES ESPECÍFICOS DE FAMÍLIAS DE FONTES OU DE SEUS NOMES GENÉRICOS. AO CONTRÁRIO DE OUTRAS PROPRIEDADES CSS1, OS VALORES NA RELAÇÃO DE NOMES SÃO SEPARADOS POR VÍRGULAS PARA INDICAR QUE ELES SÃO ALTERNATIVOS: BODY { FONT-FAMILY: GILL, HELVETICA, SANS-SERIF }
  • 13.
    PROPRIEDADE ‘FONT-STYLE’ APROPRIEDADE 'FONT-STYLE' DEFINE SE A FONTE É NORMAL (ALGUMAS VEZES CHAMADA DE 'ROMANA'), ITÁLICA OU OBLÍQUA. FONTES QUE CONTENHAM AS PALAVRAS 'OBLIQUE', 'SLANTED' OU 'INCLINE' EM SEUS NOMES SÃO CLASSIFICADAS COMO 'OBLIQUE'. JÁ AS FONTES COM ITALIC, CURSIVE OU KURSIV SÃO CLASSIFICADAS COMO 'ITALIC‘: H1, H2, H3 { FONT-STYLE: ITALIC }H1 EM { FONT-STYLE: NORMAL }
  • 14.
    PROPRIEDADE ‘FONT-VARIANT’ Estapropriedade é muito interessante. Ele faz com que as letras minúsculas pareçam letras maiúsculas. p { font-family: Times, "Times New Roman", Serif; font-style: italic; font-variant: small-caps; }
  • 15.
    PROPRIEDADE ‘FONT-WEIDHT’ A PROPRIEDADE 'FONT-WEIGHT' SELECIONA A INTENSIDADE DE UMA FONTE. NA SEQÜÊNCIA DE VALORES DE '100' A '900', CADA NÚMERO INDICA UMA FONTE MAIS INTENSA (ESCURA) QUE O VALOR ANTERIOR. P { FONT-WEIGHT: NORMAL } /* 400 */ H1 { FONT-WEIGHT: 700 } /* BOLD */
  • 16.
    PROPRIEDADE ‘FONT-SIZE’ APROPRIEDADE FONT-SIZE É USADA PARA INDICAR O TAMANHO DA LETRA(FONTE) EM CSS. ESTE TAMANHO PODERÁ SER ESPECIFICADO EM VÁRIAS UNIDADES DE MEDIDAS.
  • 17.
    PROPRIEDADE ‘FONT’ APROPRIEDADE 'FONT' É UM ATALHO PARA DEFINIR 'FONT-STYLE', 'FONT-VARIANT', 'FONT-WEIGHT', 'FONT-SIZE', 'LINE-HEIGHT' E 'FONT-FAMILY' EM UM ÚNICO LOCAL DA FOLHA DE ESTILO.