Propriedades css e propriedades de fontes de texto

355 visualizações

Publicada em

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

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
355
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Propriedades css e propriedades de fontes de texto

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

×