Apostila_HTML_CSS_E-Jovem 11
73 pág.

Apostila_HTML_CSS_E-Jovem 11

Disciplina:Análise Textual7.934 materiais281.609 seguidores
Pré-visualização17 páginas
/* esta linha contém a declaração */ }  

Pode­se atribuir mais de uma declaração a um seletor, para isso, as declarações devem ser 
separadas por ponto­e­vírgula.

Por exemplo:

p { background: #FFFFFF;  color: #000000;}
Seletor é uma entidade que identifica um elemento HTML ou define uma classe ou pseudo 
classe na qual a regra de estilo será aplicada. 

Por exemplo:

p {font­size: 12px;} 

O seletor é p (elemento HTML parágrafo) e a regra escrita determina que os parágrafos 
terão uma fonte de tamanho 12px. 

p, ul {text­indent: 10pt;}

Os seletores são p e ul 

Agrupamento de seletores é uma forma compacta de reunir seletores que compartilham as 
mesmas regras de estilo.

Projeto e­Jovem ­ Módulo II: CSS 42

Por exemplo:

p { color:#000000;}
.classeb {color: #000000;} 
span {color: #000000;} 

Os seletores p.classeb e span correspondem em letras na cor preta, então podemos agrupá­
los assim como abaixo, porém note que os seletores agrupados devem ser separados por 
virgula:

p, .classeb, span { color:#000000;}

2.4.  Estruturando melhor o CSS

Até agora vimos como criar o CSS, mas dentro da TAG. Podemos fazer isso separadamente, 
o que inicialmente iremos fazer dentro do mesmo arquivo HTML, porém como vimos no 
exemplo anterior, já temos a necessidade de visualizar como iremos criar isso.

Você   pode  definir   regras  de  CSS  em  três   lugares.  E,  por  definição,  pode  utilizar  uma 
combinação dos três métodos nos seus web sites. A maneira como as regras interagem entre 
si está relacionada à parte "em cascata". Os três lugares são: 1) em um documento separado 
fora de todos os documentos HTML, 2) no cabeçalho de um documento HTML e 3) dentro 
de uma tag de HTML. 

Cada um destes métodos tem um nome e afeta as páginas HTML em seu site de um modo 
diferente, como discutido aqui:

• Externo  ­ significa que você  coloca as regras de CSS em um arquivo separado, e 
então sua página HTML pode fazer um link para esse arquivo. Essa abordagem lhe 
permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma 
página do seu web site.

• Incorporado  ­   significa   que   você   especifica   as   regras   de  CSS   no   cabeçalho   do 
documento. As regras incorporadas afetam somente a página atual.

• Inline ­ significa que você especifica as regras de CSS dentro da tag de HTML. Essas 
regras afetam somente a tag atual.

2.4.1.  Estilos externos
Para definir um conjunto de regras de estilo que você pode facilmente aplicar em alguma 
página do seu site, é preciso colocar as regras em um arquivo de texto. Você pode criar este 
arquivo com um editor de textos simples e dar ao nome desse arquivo a extensão .css. 

Sempre   que   quiser   utilizar   esses   estilos   em  uma  nova   página,   basta   colocar   uma   tag 
<LINK> no cabeçalho que referencie esse arquivo .css. Veja o exemplo:

Arquivo meu_estilo.css

H1 {font­family: 'Comic Sans MS'; font­size: 36pt; color: blue}

P {font­family: 'Courier'; margin­left: 0.5in}

Projeto e­Jovem ­ Módulo II: CSS 43

Agora, para utilizar os estilos definidos neste arquivo .css, você precisa adicionar a tag a 
seguir   ao   cabeçalho   da   página,   onde  nome_do_arquivo  é   uma   referência   absoluta   ou 
relativa ao arquivo .css.

<LINK   REL="STYLESHEET"   HREF="http://www.iecentral.net/meu_estilo.css" 
TYPE="text/css">

OBS:   Você   deve   inserir   este   texto   entre   as   tags   <HEAD>...</HEAD>   e   colocar   a 
localização correta do seu arquivo e seu nome.

2.4.2.  Estilos incorporados
Se quiser  criar  um conjunto de estilos  que se  aplicam a uma única página,  você  pode 
configurar os estilos exatamente como fizemos no exemplo dos estilos externos, mas, em 
vez de colocar as tags <STYLE>...</STYLE> e as regras em um arquivo separado, coloque 
estas tags na própria página HTML. A estrutura básica de uma página da web que utiliza 
estilos incorporados é semelhante ao seguinte código:

2.4.3.  Estilos inline
Os estilos inline são os que têm menos efeitos. Eles afetam somente a tag atual, não outras 
tags na página e tão pouco, outros documentos. A sintaxe para definir um estilo inline é a 
seguinte:  <TAG STYLE="regras css"> 

Exemplo: 

Note que em vez das tags <STYLE>...</STYLE>, você apenas utiliza um atributo STYLE 
dentro da tag para definir o estilo. 

2.5.  Propriedades e Valores de Fontes

Fontes são estilos de apresentação consistentes aplicados a alfabetos. 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.

Os atributos essenciais de uma fonte são:

• Seu tipo (ou família)

• Seu tamanho

• Seu estilo (regular, itálico, outline, etc.)

• Seu peso (normal, negrito, light, black)

Projeto e­Jovem ­ Módulo II: CSS 44

Para representar qualquer texto, portanto, é preciso escolher uma fonte, ou seja: um tipo, 
um estilo, um peso e um tamanho. Letras maiúsculas e minúsculas não são consideradas 
fontes diferentes, pois têm um significado distinto.

Os quatro atributos acima podem ser definidos em CSS através das propriedades: font­
family,   font­size,   font­style  e  font­weight.  Não é  preciso  definir   todas,  pois   sempre têm 
valores default. CSS oferece ainda font­variant, que permite considerar outras variações de 
uma fonte.

2.5.1.  font­family
Uma família de fontes (tipo) é selecionada com a propriedade font­family. Esta propriedade 
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

Exemplos:

O browser usará a primeira fonte da lista, se encontrá­la. 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.

As aspas podem ser apóstrofes simples (') ou aspas duplas ("). Os apóstrofes são necessários 
quando for preciso especificar estilos dentro de um atributo HTML:

2.5.2.  font­size
O tamanho de uma fonte é  alterado usando font­size. Pode ser especificado 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.

1. font­size: tamanho_relativo (smaller, larger)

2. font­size: comprimento (em ou ex)

3. font­size: porcentagem (%)

Projeto e­Jovem ­ Módulo II: CSS 45

Exemplos:

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 os mesmos 
podem   ser   alterados   pelos   usuários   nos   browsers   atuais.   As   unidades   válidas   são:   pt 
(pontos), px (pixels), pc (paicas), cm (centímetros), mm (milímetros) e in (polegadas).

2.5.3.  font­style e font­weight
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:

4. font­style: normal (ou italic, oblique)

      Exemplos:

      Sintaxe:

• 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

       Exemplos:

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,