Slides sobre Propriedades css propriedades de fontes de texto onde são abordados principais estilos de fontes, e as propriedades css.

1. 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

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 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.

4. 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.

5. 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.

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çã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.

8. 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.

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-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)

11. 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.

12. 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
}

13. 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 }

14. 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;
}

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’
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.

17. 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.