CSS é a abreviatura de Cascade Styling Sheet, que significa Folha de Estilo em Cascata, e é a linguagem utilizada para controlar a apresentação de elementos em documentos HTML. A apresentação destes é especificada por uma série de regras que podem ser atribuídas em linha através dos atributos do elemento style ou através de regras incluídas dentro das tags na secção head dos documentos HTML, ou através de folhas de estilo externas (Leia: Tutorial: Aprender o básico sobre CSS ). Cada regra de estilização selecciona os elementos e depois aplica as regras aos mesmos.

O CSS foi criado pelo W3C para recuperar o controlo da markup de documentos à medida que o HTML ia evoluíndo a partir das tags primárias que definiam os elementos estruturais de um documento, como os cabeçalhos, parágrafos, hiperligações e listagens. Neste artigo Programação CSS para iniciantes (Parte XIV) vamos mostrar como fazer a formatação de texto, aprendendo desde já como especificar tamanhos para os tipos de letra, escolher um tipo de letra ou definir o estilo da mesma, utilizando CSS.

CSS

Não perca os artigos anteriores desta série:

1. DEFINIR UM TIPO DE LETRA

É possível definir um tipo de letra através de uma regra de estilização CSS para determinar qual o tipo de letra e a sua estilização a utilizar em diferentes locais do layout de uma página. Isto pode ser alcançado criando uma regra de estilização utilizando a propriedade font-family, indo depois o navegador utilizar o tipo de letra se estiver disponível no sistema do visitante, ou caso contrário irá utilizar o tipo de letra standard.

O tipo de letra standard pode não ser a melhor escolha para o caso em questão, então é utilizada a propriedade font-family para sugerir um tipo genérico, como nos exemplos abaixo:

  • Serif – É um familia de tipos de letra proporcional em que os caracteres têm diferentes larguras para corresponder ao seu tamanho, com decorações. Um exemplo é o tipo de letra Times New Roman.
  • Sans-Serif – É uma familia de tipos de letra proporcional sem decorações. Um exemplo é o tipo de letra Arial.
  • Monospace – É uma família de tipos de letra não proporcionais em que os caracteres têm uma largura fixa. Um exemplo é o tipo de letra Courier.
  • Cursive – É uma família de tipos de letra que tentam emular a escrita humana. Um exemplo é o tipo de letra Comic Sans.
  • Fantasy – É uma família de tipos de letra que são estilizadas com decorações com uma aparência gráfica. Um exemplo é o tipo de letra Castellar.

Então, o navegador irá primeiro tentar aplicar o tipo de letra determinado na regra de estilização CSS e caso esse tipo de letra não esteja disponível, irá selecionar um tipo de letra a partir daqueles que estão disponíveis no sistema do visitante, um que mais se aproxime do pretendido pelo autor. Assim será possível preservar de certa forma a aparência pretendida e garantir que o texto é apresentado a todos os visitantes, mesmo que estes não tenham os tipos de letra utilizados originalmente.

Numa regra de estilo em que pretendemos definir uma família de tipos de letra e o tipo de letra, a ordem a seguir é a família e de seguida o tipo de letra, separado por uma virgula. Podem ser especificados vários tipos de letra numa lista separada por virgulas, tudo antes da definição da familia de tipos de letra.

Os nomes dos tipos de letra especificados que tenham mais que uma palavra devem ser introduzidos entre aspas, como “Times New Roman”, ou caso contrário não serão reconhecidos pelo navegador. Para praticar e ver aquilo que foi introduzido em ação, vamos criar um documento e inserir algum código:

  1. Crie um documento HTML e insira o seguinte código para criar parágrafos que iremos estilizar com CSS:
    <p><span class="serif">Aqui está estilizado com Serif, Times New Roman</span></p>
    <p><span class="fantasy">Aqui está estilizado com Fantasy, Castellar</span></p>
    <p><span class="mono">Aqui está estilizado com Monospace, Courier</span></p>
    <p><span class="cursive">Aqui está estilizado com Cursive, Comic Sans</span></p>
    <p><span class="sans-serif">Aqui está estilizado com Sans-Serif, Arial</span></p>
  2.  De seguida crie um documento CSS, linke-o ao documento HTML e insira o seguinte código para introduzir as regras de estilização para cada um dos parágrafos:
    span.serif{font-family:"Times New Roman", serif}
    span.fantasy{font-family:"Tribal Dragon", fantasy}
    span.mono{font-family:"Courier", monospace}
    span.cursive{font-family:"Lucida Handwriting", "Comic Sans", cursive}
    span.sans-serif{font-family:"Arial", sans-serif}
  3.  Guarde ambos os documentos e observe o resultado:
    Programação CSS para iniciantes (Parte XIV)

2. DEFINIR O TAMANHO DE UM TIPO DE LETRA

É possível definir o tamanho do tipo de letra utilizando uma propriedade dentro de uma regra de estilização CSS, atribuindo um valor à propriedade font-size. À primeira vista o mais óbvio é a utilização de valores inteiros como 10 ,12, 11, ou outro numero inteiro qualquer, mas também é possível definir o tamanho de letra através de palavras chave como large, larger, small, entre outros, ou através da utilização de outros como 5em ou 200%.

As palavras chave têm números aos quais são equivalentes, por isso aqui fica a lista:

  • xx-small – 7pt
  • x-small – 7.5pt
  • small – 10.5pt
  • medium – 12pt
  • large – 13.5pt
  • x-large – 17pt
  • xx-large – 24pt

Então para criar uma regra de estilização para definir o tamanho de uma letra, poderão ser utilizadas as seguintes formas:

#texto1{font-size: large}

#texto2{font-size: 2em}

#texto3{font-size: 300%}

#texto4{font-size: 15pt}

Para ver estes exemplos em ação, vamos praticar:

  1. Crie um documento HTML e insira o seguinte código para criar 4 parágrafos diferentes:
    <p id="par1">Primeiro parágrafo</p>
    <p id="par2">Segundo parágrafo</p>
    <p id="par3">Terceiro parágrafo</p>
    <p id="par4">Quarto parágrafo</p>
  2.  De seguida crie um documento CSS, linke-o ao documento HTML e insira o seguinte código para definir o tamanho do tipo de letra dos diferentes parágrafos:
    #par1{font-size: medium}
    #par2{font-size: 10pt}
    #par3{font-size: 3em}
    #par4{font-size: 200%}
  3. Guarde ambos os documentos e observe o resultado:
    Programação CSS para iniciantes (Parte XIV)

As técnicas aqui apresentadas são das mais fáceis de utilizar em CSS, pelo que não deverá ter dificuldades em completar estes passos e aplicar aquilo que aprendeu nos seus projetos web. No próximo artigo iremos continuar a abordar a formatação de texto em CSS, abordando o font-style e o font-weight. Não perca!

Abraço!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Gilmar
    30 de junho de 2012

    Diogo, os tutoriais IX e X estão com os mesmo links. Confirme isso, por favor. Pode ser engano meu!

    Valeu gente boa! Obrigado e mais sucesso!



    • Diogo Espinha
      30 de junho de 2012

      Olá Gilmar, de fato os links estavam iguais. Obrigado pela sua visita e pelo reparo dos links, abraço!



  2. Allan
    2 de julho de 2012

    Olá Diogo!

    parabéns pela maratona css, acredito que deve estar te dando imenso trabalho.

    fico com duas dúvidas sobre esse artigo em especial:

    1. Voce sabe me dizer porque a unidade pt do photoshop é diferente da unidade pt do css? uma fonte 21pt no photoshop é muito maior do que uma fonte 21pt no html/css, é muito diferente… e eu nao entendo porque já que é uma unidade, pelo qual então deveriam respeitar um padrão… todo layout que faç ao final sempre tenho que reencontrar os tamanhos das fontes

    2. Times roman é uma fonte serifada (serif), Arial é fonte sem serifa (sans-serif), assim como para as outras…. então qual objetivo de usar esses atributos (serif, sans serif) no css? Por exemplo, para uma font famosa como Rotis, nela sim temos em 3 versões: serifada, semi serifada e não serifda, pelo qual poderiamos optar para determinadas situações, diferente de times, arial e comics (pois só temos uma versã) no entanto, eu mencionaria apenas o nome da font para font-family… então, qual o propósito?


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz