Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Cascading Style Sheets – CSS                   (Parte 1)    Centro Universitário de Patos de Minas FACIA – Faculdade de Ci...
CSS – Definição2       Consiste de uma ou mais definições de estilo        (tamanho de fonte, estilo da fonte, alinhament...
CSS – Uso de Estilos3       Existem várias formas de se definir estilos. Eles        podem ser inseridos inline, usando o...
CSS – Definição de Estilos4                                            Ver exemplo: 01 - style.html       <style>        ...
CSS – Definição de Estilos5       <link>         Marcação usada para ligar arquivos de estilos externos          (.css) ...
CSS – Definição de Estilos6     CSS externos são construídos de forma similar      ao CSS definido dentro do documento.  ...
CSS – Definição de Estilos7                               Ver exemplos: “02 - link.html” e “arquivos/estilos.css”       P...
Visão Geral dos Seletores CSS 2.18    Seletor    Formato                                 DescriçãoUniversal          *    ...
Visão Geral dos Seletores CSS 2.19        Seletor     Formato                                 DescriçãoPseudo classe      ...
CSS – Aplicação de Estilos10        Os seletores apresentados na tabela anterior         devem ser usados para se definir...
CSS – Aplicação de Estilos11     <head>       <style type = "text/css" >       <!--       p{           font-style: italic;...
CSS – Aplicação de Estilos12        A seguir, segue uma descrição mais detalhada do         uso de estilos e dos seletore...
CSS – O Atributo id13                                             Ver exemplo: 03 - id.html        Pode-se usar o atribut...
CSS – O Atributo class14                                                  Ver exemplo: 04 - class.html        Pode defini...
CSS – Aplicação Direta de Estilos15        Há uma forma de aplicar estilos diretamente a um         elemento individual. ...
CSS – Aplicação Direta de Estilos16                                             Ver exemplo: 05 - style direto.html      ...
CSS – O elemento <span>17                                        Ver exemplo: 06 - span.html        Pode-se também aplica...
Descritores HTML especiais18        <div> e <span> (descrito anteriormente).        <div> é um descritor que define um b...
CSS – Herança19        Os estilos "herdam" propriedades de várias         maneiras.        Uma das formas é através da p...
CSS – Herança20        Se um <i> está dentro de um <p> e todos os <p> são         declarados como tendo a cor vermelha, o...
Links (Pseudo-classes e Pseudo-elementos)21                          Ver exemplos: “07 - pseudo.html” e “arquivos/pseudo.c...
CSS – Seletores Mistos22                                    Ver exemplo: 08 - seletor misto.html        A implementação d...
CSS – Seletores de contexto23        Podem-se definir seletores que só serão aplicados se         estiverem no contexto d...
CSS – Cascata de folhas de estilo24        Há diferentes folhas de estilo que podem ser         definidas que serão estud...
CSS – Cascata de folhas de estilo25        Todas essas folhas de estilo diferentes podem         provocar uma grande conf...
CSS – Cascata de folhas de estilo26        Folhas de estilos que podem afetar um texto:          Folha de estilos defaul...
CSS – Cascata de folhas de estilo27        Folhas de estilos que podem afetar um texto (cont.):          Folha de estilo...
CSS – Cascata de folhas de estilo28        Folhas de estilos que podem afetar um texto (cont.):          Folha de estilo...
CSS – Fontes29        Fontes são estilos de apresentação consistentes         aplicados a caracteres de texto.        Um...
CSS – Fontes30        Os atributos essenciais de uma fonte são:          Tipo  (ou família): font-family          Taman...
CSS – Fontes31        Letras maiúsculas e minúsculas são consideradas         fontes diferentes, pois têm um significado ...
CSS – Fontes: font-family32        Aceita uma lista de valores separados por vírgulas         representando nomes de font...
CSS – Fontes: font-family33        Exemplos:         h1 { font-family: garamond }         h2 { font-family: arial, helvet...
CSS – Fontes: font-family34                       Ver exemplos: “09 - font-family.html” e “arquivos/fontes.css”    O brow...
CSS – Fontes: font-size35        Especifica o tamanho da fonte, pode ser em valores absolutos ou         relativos. Para ...
CSS – Fontes: font-size36        Exemplos:         h1 { font-size: 24pt }         h1 { font-size: x-large }         h1 { ...
CSS – Fontes: font-size37                       Ver exemplos: “10 - font-size.html” e “arquivos/fontes.css”        Os tam...
CSS – Fontes: font-size38        Os comprimentos referem-se a unidades comuns em         tipografia.        Um "em" é um...
CSS – Fontes: font-size39        As porcentagens são afetadas pela herança, por         exemplo:           .sec {font-siz...
CSS – Fontes: font-size40                    Ver exemplos: “10 - font-size.html” e “arquivos/fontes.css”        As porcen...
CSS – Fontes: font-style e font-weight41        O estilo de uma fonte é afetado através de duas         diferentes propri...
CSS – Fontes: font-style e font-weight42         A palavra "oblique" deve fazer com que fontes          chamadas de "obli...
CSS – Fontes: font-style e font-weight43                  Ver exemplos: “11 - font-style_weight.html” e “arquivos/fontes.c...
CSS – Fontes: font-variant44                     Ver exemplos: “12 - font-variant.html” e “arquivos/fontes.css”        At...
CSS – A propriedade font45        Para especificar várias propriedades de um seletor de uma         vez só, pode-se usar ...
Upcoming SlideShare
Loading in …5
×

Tutorial Css Parte 1

881 views

Published on

Mto bom esse tutorial sobre Css.

  • Be the first to comment

  • Be the first to like this

Tutorial Css Parte 1

  1. 1. Cascading Style Sheets – CSS (Parte 1) Centro Universitário de Patos de Minas FACIA – Faculdade de Ciências Administrativas Desenvolvimento para Web I Prof. Me. Willyan Silva http://wjsilva.com.br/cursos/desenvWebI
  2. 2. CSS – Definição2  Consiste de uma ou mais definições de estilo (tamanho de fonte, estilo da fonte, alinhamento de texto, cor de texto e do fundo, margens, altura da linha, etc.) para elementos HTML que podem ser referenciado ou embutidos em documentos HTML.  Esta funcionalidade foi criada para propiciar aos desenvolvedores e projetistas Web a possibilidade de contar com estilos e posicionamentos consistentes no documento.
  3. 3. CSS – Uso de Estilos3  Existem várias formas de se definir estilos. Eles podem ser inseridos inline, usando o atributo style definido na seção <style> ou referenciados usando o comando <link>.  Ainda existem várias formas de se aplicar um estilo. Podem ser aplicados globalmente no documento ou individualmente a cada elemento.
  4. 4. CSS – Definição de Estilos4 Ver exemplo: 01 - style.html  <style>  Possui um atributo type que informa ao browser qual tipo de estilo está sendo definido.  Para CSS, o valor desse atributo é “text/CSS”.  As propriedades declaradas em <style> sobrepõem qualquer propriedade anterior do elemento (inclusive as de uma folha de estilos importada, se houver).  É comum colocar todo o código entre comentários HTML (<!-- e -->) para proteger browsers antigos da exibição indesejada do código.
  5. 5. CSS – Definição de Estilos5  <link>  Marcação usada para ligar arquivos de estilos externos (.css) ao documento HTML (.html).  Caso se queira armazenar todos ou um conjunto de estilos em um único local para que as mudanças sejam globalmente aplicadas, pode-se criar um arquivo de estilos separado (com extensão .css) do código HTML (com extensão .html).  Os atributos type e href do elemento <link> são usados para definir o tipo de link e a URL que contém o estilo desejado, respectivamente.
  6. 6. CSS – Definição de Estilos6  CSS externos são construídos de forma similar ao CSS definido dentro do documento.  A folha de estilos é armazenada numa URL que contém as definições de estilos, mas os elementos HTML <style> e </style> não são necessários.  O elemento <link> deve estar contido na seção <head> do documento HTML.
  7. 7. CSS – Definição de Estilos7 Ver exemplos: “02 - link.html” e “arquivos/estilos.css”  Para se incluir um arquivo de estilos chamado “estilos.css” deve-se usar: <head> <link rel="stylesheet" type="text/css" href="arquivos/estilos.css" /> </head> Atributo rel: • Especifica o relacionamento entre o documento corrente e o documento referenciado. Pode ser: alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet, subsection. • Para o caso de arquivo de estilo deve ser stylesheet.
  8. 8. Visão Geral dos Seletores CSS 2.18 Seletor Formato DescriçãoUniversal * Casa com qualquer elemento.Tipo E Casa com qualquer elemento E.Classe .info Casa com qualquer elemento cujo atributo class tem o valor info.ID #footer Casa com qualquer elemento cuja id seja footer.Descendente EF Casa com qualquer elemento F que seja descendente do elemento E.Filho E>F Casa com qualquer elemento F que seja filho do elemento E.Adjacente E+F Casa com qualquer elemento F que se segue imediatamente a E. Casa com qualquer elemento E que tenha umAtributo E[att] atributo att independentemente do valor deste atributo. Casa com qualquer elemento E que tenha um atributo att de valor igualAtributo E[att=val] a val. Casa com qualquer elemento E que tenha um atributo att de valor igualAtributo E[att~=val] a um valor qualquer separado por um espaço de um valor igual a val. Casa com qualquer elemento E que tenha um atributo att de valor igualAtributo E[att|=val] a um valor qualquer separado por um hífen de um valor começando com val.
  9. 9. Visão Geral dos Seletores CSS 2.19 Seletor Formato DescriçãoPseudo classe E:first-child Casa com o elemento E que for o primeiro filho do seu elemento pai.:first-childPseudo classe E:link Casa com link ainda não visitado (:link) ou com link já visitadolink E:visited (:visited) links. E:activePseudo classes E:hover Casa com E quando de uma ação do usuário.dinâmicas E:focusPseudo classe E:lang(c) Casa com elementos E escritos no idioma c.:languagePseudo-elemento E:first-line Casa com o conteúdo da primeira linha do elemento E.:first-linePseudo-elemento E:first-letter Casa com a primeira letra do elemento E.:first-letterPseudo-elementos E:before Usado para gerar conteúdo antes ou depois do conteúdo do:before e :after E:after elemento E. Para mais informações sobre Seletores, visitar: http://maujor.com/tutorial/seletores_css21_parte1.php
  10. 10. CSS – Aplicação de Estilos10  Os seletores apresentados na tabela anterior devem ser usados para se definir e aplicar os estilos.  Para aplicar um estilo globalmente para cada instância do mesmo elemento, deve-se especificar o elemento e as mudanças de estilo correspondentes.  Por exemplo, para mudar todas as instâncias do elemento <p> para serem exibidas em tamanho 16 e itálico, deve-se inserir o seguinte código na seção <head>:
  11. 11. CSS – Aplicação de Estilos11 <head> <style type = "text/css" > <!-- p{ font-style: italic; font-size: 16pt; } --> </style> </head>
  12. 12. CSS – Aplicação de Estilos12  A seguir, segue uma descrição mais detalhada do uso de estilos e dos seletores para a aplicação de estilos CSS.
  13. 13. CSS – O Atributo id13 Ver exemplo: 03 - id.html  Pode-se usar o atributo id dos elementos HTML para a aplicação de estilo a um elemento específico do documento HTML.  Portanto, o elemento que possua o id específico para o qual foi aplicado um estilo sofrerá a modificação.  O caractere ‘#’ é usado para definir um estilo através do uso do atributo identificador (id).  O exemplo do arquivo “03 - id.html” mostra a criação de um estilo para o identificador “heading” usado no elemento HTML <p>.
  14. 14. CSS – O Atributo class14 Ver exemplo: 04 - class.html  Pode definir uma classe de estilos através do atributo por class.  Portanto, em qualquer elemento HTML que pertencer à classe de estilos definido por class será aplicado o estilo definido.  Classes de estilo são uma forma de agrupar propriedades de estilos que serão utilizadas em várias partes do documento.  O caractere ‘.’ é usado para definir um estilo através do uso de classes (class).  No próximo exemplo definem-se duas classes de estilo que são aplicados a diferentes elementos HTML <p> e <h1>.
  15. 15. CSS – Aplicação Direta de Estilos15  Há uma forma de aplicar estilos diretamente a um elemento individual.  Deve-se usar o atributo style em quase qualquer descritor.  Este método não corresponde exatamente a uma "folha" de estilos, pois os estilos aplicados não são reaproveitáveis.  Permite alterar a aparência de um único descritor, de um conjunto deles ou de um bloco de informações da página.
  16. 16. CSS – Aplicação Direta de Estilos16 Ver exemplo: 05 - style direto.html  Exemplo: <p style="color: blue; font-size: 20pt">Texto</p>  Esta propriedade é mais interessante quando aplicada a um descritor que é usado para agrupar vários outros, como <div>, que divide a página em seções ou <span>, usado em situações bem específicas.  Usar estilos desta forma é pouco diferente de usar atributos locais.  Os benefícios de poder mudar a fonte, cores e outras características em todo o documento ficam mais difíceis.
  17. 17. CSS – O elemento <span>17 Ver exemplo: 06 - span.html  Pode-se também aplicar estilo através dos elementos <span> e </span>.  Esses elementos são usados para marcar uma parte específica do texto na qual o estilo deve ser aplicado.  Usado quando um trecho do texto dentro de um elemento precisa ter um estilo aplicado.
  18. 18. Descritores HTML especiais18  <div> e <span> (descrito anteriormente).  <div> é um descritor que define um bloco ou seção da página.  Pode ser usado para dividir a página em seções (e subseções no IE) e permitir que sejam aplicados estilos específicos a essas seções.  Descritores de bloco são <p>, <h1>, <table>, etc.  <div> define um bloco sem função ou aparência definida.  A função e aparência serão determinadas em CSS.
  19. 19. CSS – Herança19  Os estilos "herdam" propriedades de várias maneiras.  Uma das formas é através da própria hierarquia do HTML.  Se forem declaras propriedades para <body> ou para *, todos os descritores serão afetados a não ser que tenham as suas propriedades redefinidas dentro de um novo bloco de declarações CSS.
  20. 20. CSS – Herança20  Se um <i> está dentro de um <p> e todos os <p> são declarados como tendo a cor vermelha, o <i> também será vermelho, a menos que haja um bloco posterior àquela declaração redefinindo as propriedades de <i>, por exemplo: p {font: 12pt "Times New Roman" bold; color: red} i {color: black}  faria com que "seletor", no texto a seguir permanecesse preto: <p>Um <i>seletor</i> é algo no qual se pode aplicar um estilo.</p>
  21. 21. Links (Pseudo-classes e Pseudo-elementos)21 Ver exemplos: “07 - pseudo.html” e “arquivos/pseudo.css” Para seletores especiais que mudam de estado, como o seletor <a>, é possível atribuir propriedades diferentes para cada estado: a:link {color: navy;} a:active {color: red;} a:visited {color: green;} a:hover {color: black; text-decoration: underline;} Muda as características de link não-visitado, ativo e visitado e do link quando o mouse passa sobre ele. Assim como qualquer seletor, os links podem ser combinados com outros descritores: ol, a:link, h2 {color: navy, text-decoration: none;}
  22. 22. CSS – Seletores Mistos22 Ver exemplo: 08 - seletor misto.html  A implementação de múltiplas folhas de estilo possibilita a definição de estilo múltiplo para elementos HTML.  Qualquer definição de estilo numa folha de estilo sempre terá precedência sobre qualquer estilo definido anteriormente no documento.
  23. 23. CSS – Seletores de contexto23  Podem-se definir seletores que só serão aplicados se estiverem no contexto de um outro seletor, por exemplo: p.verde em {color: #004400;}  indica que o <em> só terá sua cor alterada se ocorrer dentro de um bloco <p> da classe "verde". .especial p ul ul li a.classX:link {font-style: italic;}  fará com que apenas os links não visitados da classe "classX" que estejam dentro de itens de lista de segundo nível situados dentro de um parágrafo dentro de um bloco qualquer da classe "especial" sejam mostradas em itálico.
  24. 24. CSS – Cascata de folhas de estilo24  Há diferentes folhas de estilo que podem ser definidas que serão estudas posteriormente.  Há ainda, segundo a especificação, mais três folhas de estilos que podem afetar uma página:  1) Folha de estilos que é importada por outra folha de estilos  2) Folha de estilos definida pelo usuário (ou leitor da página)  3) Folha de estilos default do browser (que é usada quando outra folha não define os estilos).
  25. 25. CSS – Cascata de folhas de estilo25  Todas essas folhas de estilo diferentes podem provocar uma grande confusão se não houver uma regra clara de como devem ser consideradas.  Ainda há um outro fator que é a formatação introduzida pelo HTML, como nos descritores <font> ou atributos align=center.
  26. 26. CSS – Cascata de folhas de estilo26  Folhas de estilos que podem afetar um texto:  Folha de estilos default do browser: todos os browsers possuem regras comuns para formatar um texto. A especificação HTML não impõe uma formatação padrão.  Folha de estilos definida pelo leitor: a especificação define a possibilidade de o leitor estabelecer uma folha de estilos própria. Isto é parcialmente conseguido quando o browser permite que se escolha diferentes cores para fundo, texto e links.
  27. 27. CSS – Cascata de folhas de estilo27  Folhas de estilos que podem afetar um texto (cont.):  Folha de estilos vinculada ao HTML: é a folha de estilos que é importada pelo arquivo HTML através do descritor de ligação <link>.  Folha de estilos importada: uma folha de estilos externa (arquivo CSS) pode ser importada de dentro de outra folha de estilos (um outro arquivo CSS ou bloco <style> no HTML) usando um comando especial @import. Exemplo: @import url(arquivos/outroestilo.css);
  28. 28. CSS – Cascata de folhas de estilo28  Folhas de estilos que podem afetar um texto (cont.):  Folha de estilos embutida no HTML: é a folha de estilos que aparece na página HTML entre os descritores <style> e </style>.  Folha de estilos local: é aquela que é aplicada localmente a um descritor usando o atributo style="lista de declarações".  Estilo definido pelo HTML: atributos e descritores podem provocar alterações na aparência do texto, por exemplo: <font size>, <big>, <body bgcolor>, <p align="center">, etc.
  29. 29. CSS – Fontes29  Fontes são estilos de apresentação consistentes aplicados a caracteres de texto.  Uma fonte consiste de atributos que alteram a aparência de um símbolo, sem alterar o seu significado.  Oferecem as informações necessárias para que uma letra ou símbolo possa ser representado graficamente.
  30. 30. CSS – Fontes30  Os atributos essenciais de uma fonte são:  Tipo (ou família): font-family  Tamanho: font-size  Estilo (regular, itálico, outline, etc.): font-style  Peso (normal, negrito, light, black): font-weight  Para representar qualquer texto, portanto, é preciso escolher uma fonte, ou seja: um tipo, um estilo, um peso e um tamanho.
  31. 31. CSS – Fontes31  Letras maiúsculas e minúsculas são consideradas fontes diferentes, pois têm um significado distinto.  font-family, font-size, font-style e font-weight:  Não é preciso definir todas, pois sempre há valores default.  CSS oferece ainda font-variant, que permite considerar outras variações de uma fonte.
  32. 32. CSS – Fontes: font-family32  Aceita uma lista de valores separados por vírgulas representando nomes de fontes existentes ou não no sistema do usuário.  No final da lista, pode ser incluída uma referência a uma família genérica, que será usada caso nenhum dos nomes coincida com o nome de uma fonte do sistema.  A sintaxe é: font-family: fonte1, fonte2, fonte3, ..., fonte-genérica
  33. 33. CSS – Fontes: font-family33  Exemplos: h1 { font-family: garamond } h2 { font-family: arial, helvetica, sans-serif } h3 { font-family: courier, "courier new", monospaced } h4 { font-family: monospaced }  As fontes sans-serif e monospaced são nomes genéricos. Não se referem a uma fonte em particular, mas a um grupo genérico. Os outros são serif, cursive e fantasy.
  34. 34. CSS – Fontes: font-family34 Ver exemplos: “09 - font-family.html” e “arquivos/fontes.css” O browser usará a 1ª fonte da lista se a encontrar. Se não encontrar, irá procurar a fonte seguinte. Se o nome de uma fonte tiver mais de uma palavra, este deverá ser colocado entre aspas (simples – no arquivo de HTML – ou aspas duplas): <p style="font-family: times new roman, sans-serif">...</p>
  35. 35. CSS – Fontes: font-size35  Especifica o tamanho da fonte, pode ser em valores absolutos ou relativos. Para especificar um valor absoluto, pode-se usar: font-size: número(pt | px | cm | mm | pc | in) font-size: xx-small | x-small | small | medium | large | x- large | xx-large  O tamanho também pode ser especificado relativo ao elemento no qual o atual objeto está contido. font-size: tamanho_relativo (smaller, larger) font-size: comprimento (em ou ex) font-size: porcentagem (%)
  36. 36. CSS – Fontes: font-size36  Exemplos: h1 { font-size: 24pt } h1 { font-size: x-large } h1 { font-size: 1.5em } h1 { font-size: 150% }  Os tamanhos de pontos devem ser especificados como valores inteiros (mesmo se usados cm ou in).  Os browsers podem formatar os tamanhos de forma diferente e eles podem ser alterados pelos usuários nos browsers atuais.  As unidades válidas são:  px (pixels), pt (pontos), pc (paicas), cm (centímetros), mm (milímetros) e in (polegadas).
  37. 37. CSS – Fontes: font-size37 Ver exemplos: “10 - font-size.html” e “arquivos/fontes.css”  Os tamanhos absolutos chamados pelo nome (xx-small, etc.) correspondem aos tamanhos de 1 a 7 do descritor <font size> e podem variar de acordo com a família de fontes usada (variam bastante entre navegadores também).  Os tamanhos relativos funcionam como o <big> e <small>, aumentando a fonte atual por 150%. A diferença é que podem passar além do limite xx-large (ou <font size=7>) ou xx-small (font size=1>).
  38. 38. CSS – Fontes: font-size38  Os comprimentos referem-se a unidades comuns em tipografia.  Um "em" é uma distância horizontal equivalente ao tamanho de uma fonte  se uma fonte tem 20 pontos de tamanho, um "em" corresponde a uma distância de 20 pixels de largura).  Um "ex" é a altura das letras de caixa-baixa (sem incluir as hastes ascendentes e descendentes).  Tanto "em" como "ex" usam valores relativos ao elemento que contém o elemento atual. São úteis principalmente em espaçamento, sendo pouco usados em fontes.
  39. 39. CSS – Fontes: font-size39  As porcentagens são afetadas pela herança, por exemplo: .sec {font-size: 18pt} .sec H1 {font-size: 200%} .sec P {font-size: 50%}  No arquivo .html: <div class="sec"> Este é o texto desta seção. <h1>2 vezes maior</h1> <p>Este é um parágrafo da seção. O texto tem 50% do tamanho do texto da seção.</p> </div>
  40. 40. CSS – Fontes: font-size40 Ver exemplos: “10 - font-size.html” e “arquivos/fontes.css”  As porcentagens de 50% e 200% são aplicadas na fonte atual, que é a fonte do bloco que contém os dois elementos (<div>), e que tem tamanho 18pt.  O resultado é que o <h1> será exibido em tamanho 36pt e <p> em tamanho 9pt.
  41. 41. CSS – Fontes: font-style e font-weight41  O estilo de uma fonte é afetado através de duas diferentes propriedades: font-weight, que altera o peso da fonte, e font-style, que altera o estilo ou inclinação. Sintaxe: font-style: normal (ou italic, oblique) font-weight: normal | bold (normal=400 e bold = 700) font-weight: bolder | lighter (valores relativos) font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  42. 42. CSS – Fontes: font-style e font-weight42  A palavra "oblique" deve fazer com que fontes chamadas de "oblique" (se existirem no sistema) sejam usadas, assim como ocorre com fontes "italic".  A rigor, italic é uma fonte distinta da normal, e não meramente uma versão inclinada da mesma.  Os browsers, porém, não encontrando um equivalente "italic", "oblique", "kursiv" ou similar irão inclinar o texto, simulando um itálico.
  43. 43. CSS – Fontes: font-style e font-weight43 Ver exemplos: “11 - font-style_weight.html” e “arquivos/fontes.css”  Os valores numéricos para font-weight oferecem um controle excepcional sobre o peso da fonte na tela, embora isto esteja limitado aos níveis disponíveis nas fontes instaladas (para um mesmo nome de fonte).  Na prática, dos 9 níveis disponíveis de peso, se consegue 4 ou 5 níveis diferentes de mais pesado ou mais leve.  700 é o "bold" típico e 400 é o "normal".
  44. 44. CSS – Fontes: font-variant44 Ver exemplos: “12 - font-variant.html” e “arquivos/fontes.css”  Atualmente a única opção disponível para esta propriedade é “small-caps”, que deve colocar o texto selecionado em maiúsculas, porém menores que as capitulares.  Sintaxe: font-variant: small-caps  Exemplo: .sc { font-variant: small-caps }
  45. 45. CSS – A propriedade font45  Para especificar várias propriedades de um seletor de uma vez só, pode-se usar a propriedade font em vez de definir em separado font-size, font-weight, font-family, etc. Sintaxe: font: font-style font-variant font-weight font-size line-height font-family  Nesta sintaxe, a ordem dos fatores é importante, porém nem todos os elementos precisam estar presentes.  Exemplos: .prop_font { font: italic 700 24pt Tahoma, Arial, sans-serif; }

×