73 pág.
Denunciar
Pré-visualização | Página 10 de 17
/* esta linha contém a declaração */ }
Podese atribuir mais de uma declaração a um seletor, para isso, as declarações devem ser
separadas por pontoeví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 {fontsize: 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 {textindent: 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 eJovem 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 {fontfamily: 'Comic Sans MS'; fontsize: 36pt; color: blue}
P {fontfamily: 'Courier'; marginleft: 0.5in}
Projeto eJovem 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 eJovem 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, fontsize, fontstyle e fontweight. Não é preciso definir todas, pois sempre têm
valores default. CSS oferece ainda fontvariant, que permite considerar outras variações de
uma fonte.
2.5.1. fontfamily
Uma família de fontes (tipo) é selecionada com a propriedade fontfamily. 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 é:
fontfamily: fonte1, fonte2, fonte3, ..., fontegené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. fontsize
O tamanho de uma fonte é alterado usando fontsize. Pode ser especificado em valores
absolutos ou relativos. Para especificar um valor absoluto, podese usar:
fontsize: número(pt | px | cm | mm | pc | in)
fontsize: xxsmall|xsmall|small|medium|large|xlarge|xxlarge
O tamanho também pode ser especificado relativo ao elemento no qual o atual objeto está
contido.
1. fontsize: tamanho_relativo (smaller, larger)
2. fontsize: comprimento (em ou ex)
3. fontsize: porcentagem (%)
Projeto eJovem 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. fontstyle e fontweight
O estilo de uma fonte é afetado através de duas diferentes propriedades: fontweight, que
altera o peso da fonte, e fontstyle, que altera o estilo ou inclinação.
Sintaxe:
4. fontstyle: normal (ou italic, oblique)
Exemplos:
Sintaxe:
• fontweight: normal | bold (normal=400 e bold = 700)
• fontweight: bolder | lighter (valores relativos)
• fontweight: 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,