Índice - wordpress.com · 2011-05-11 · trabalhando com xhtml e css ... capítulo 6 – links e...

Índice Capítulo 1 – A linguagem HTML .............................................................................................................................................. 7

1. Evolução do HTML ...................................................................................................................................................... 7

2. Porque utilizamos tags com letras minúsculas?! ........................................................................................................ 9

3. Validando Seus Documentos ...................................................................................................................................... 9

4. Separando Conteúdo da Apresentação ...................................................................................................................... 9

5. Trabalhando com XHTML e CSS .................................................................................................................................. 9

6. Escolhendo o Navegador Web .................................................................................................................................... 9

7. Introduzindo o URL ..................................................................................................................................................... 9

8. Os Componentes de um URL .................................................................................................................................... 10

9. URLs Absolutos e Relativos ....................................................................................................................................... 10

Capítulo 2 – O Básico de XHTML e CSS ................................................................................................................................. 12

1. Tipos de tags HTML ................................................................................................................................................... 12

1.1 Seletores para as tags de nível de bloco ........................................................................................................... 12

1.2 Seletores das tags inline .................................................................................................................................... 12

1.3 Seletores das tags substituídas ......................................................................................................................... 13

2. Elementos Aninhados ............................................................................................................................................... 13

3. Espaços em Branco ................................................................................................................................................... 13

4. Adicionando Comentários ......................................................................................................................................... 13

5. Elementos e Atributos .............................................................................................................................................. 14

Capítulo 3 ‐ O Elemento <head> (cabeçalho do documento) ............................................................................................... 15

1. A Informação Contida no Elemento <head> ............................................................................................................. 15

2. Elementos de cabeçalho (<head>) ............................................................................................................................ 15

3. A declaração DOCTYPE .............................................................................................................................................. 15

4. O elemento <meta> .................................................................................................................................................. 16

1.1 Palavras‐chave para os motores de pesquisa ................................................................................................... 16

1.2 Valores desconhecidos para o atributo name do elemento <meta> ............................................................... 16

5. A Declaração XML ..................................................................................................................................................... 16

6. O Elemento HTML ..................................................................................................................................................... 16

1.3 Atributos Necessários ....................................................................................................................................... 17

1.4 Atributos opcionais ........................................................................................................................................... 17

1.5 Atributos padrão ............................................................................................................................................... 17

7. Tipos de conteúdo (CONTENT TYPES) ....................................................................................................................... 17

Capítulo 4 ‐ Listas .................................................................................................................................................................. 18

1. A tag ul ...................................................................................................................................................................... 18

1.1 Atributos Obrigatórios ...................................................................................................................................... 18


2. A tag ol ...................................................................................................................................................................... 18



3. A tag li ....................................................................................................................................................................... 19



Listas de Definições ....................................................................................................................................................... 20

4. A tag dl ...................................................................................................................................................................... 20



5. A tag dt ...................................................................................................................................................................... 20



6. A tag dd ..................................................................................................................................................................... 20



Capítulo 5 – Elementos de Texto Estruturado ...................................................................................................................... 22

1. A tag EM .................................................................................................................................................................... 22

2. A tag STRONG ............................................................................................................................................................ 22

3. A tag CITE .................................................................................................................................................................. 22

4. A tag Q ....................................................................................................................................................................... 22

5. A tag DFN .................................................................................................................................................................. 22

6. A tag CODE ................................................................................................................................................................ 23

7. A tag SAMP ................................................................................................................................................................ 23

8. A tag KBD: .................................................................................................................................................................. 23

9. A tag VAR: ................................................................................................................................................................. 23

10. A Tag BDO ............................................................................................................................................................. 23

11. A tag ABBR ............................................................................................................................................................ 23

12. A tag ACRONYM .................................................................................................................................................... 23

13. A tag INS ................................................................................................................................................................ 23

14. A tag DEL ............................................................................................................................................................... 23

15. A tag HR ................................................................................................................................................................. 24

16. Marcas de citação: os elementos BLOCKQUOTE e Q ............................................................................................ 24

1.1 Representação das citações .............................................................................................................................. 25

1.2 Sub‐índices e super‐índices: Os elementos SUB e SUP ..................................................................................... 25

17. Linhas e parágrafos ............................................................................................................................................... 26

1.1 Parágrafos: o elemento P .................................................................................................................................. 26

1.2 Controle das mudanças de linha ....................................................................................................................... 26

Capítulo 6 – Links e Âncoras ................................................................................................................................................. 28

1.1 O que é um hiperlink? ....................................................................................................................................... 28

1.2 Atributos do Hiperlink ....................................................................................................................................... 28

1.3 Indicadores (Âncoras) ....................................................................................................................................... 28

Capítulo 7 ‐ Tabelas Semanticamente Corretas .................................................................................................................... 29

1. TAG table ................................................................................................................................................................... 29

2. TAG CAPTION ............................................................................................................................................................ 29

3. TAG TH ...................................................................................................................................................................... 30

4. TAGS THEAD TBODY e TFOOT ................................................................................................................................... 31

5. ATRIBUTOS COLSPAN E ROWSPAN ........................................................................................................................... 31

6. ATRIBUTO SUMARY ................................................................................................................................................... 32

7. TABELA COMPLETA ................................................................................................................................................... 32

Capítulo 8 ‐ Fundamentos do CSS ......................................................................................................................................... 33

1. O nascimento do HTML ............................................................................................................................................. 33

2. O HTML atual ............................................................................................................................................................ 33

3. Os problemas criados ................................................................................................................................................ 33

4. A solução proposta ................................................................................................................................................... 33

5. As restrições .............................................................................................................................................................. 34

6. O efeito "cascata" ..................................................................................................................................................... 34

7. Regra CSS................................................................................................................................................................... 34

1.1 Regra CSS e sua sintaxe .............................................................................................................................. 34

1.2 Agrupamento de Seletores ........................................................................................................................... 35

1.3 O seletor classe .............................................................................................................................................. 35

1.4 O seletor ID ..................................................................................................................................................... 36

1.5 Inserindo comentários nas CSS .................................................................................................................. 37

8. Maneiras de vincular Folhas de Estilo a documentos ............................................................................................... 37

1.6 Os três tipos de vinculação de folhas de estilo ......................................................................................... 37

1.7 Folha de estilo externa .................................................................................................................................. 37

1.8 Folha de estilo incorporada ou interna ........................................................................................................ 37

1.9 Folha de estilo inline ...................................................................................................................................... 38

1.10 Folhas múltiplas de estilo .............................................................................................................................. 38

9. A propriedade font .................................................................................................................................................... 39

1.1 As letras nos elementos HTML .................................................................................................................... 39

1.2 Valores válidos para as propriedades da letra .......................................................................................... 39

1.3 color - A cor da letra ....................................................................................................................................... 40

1.4 font-family - O tipo de letra ............................................................................................................................ 40

1.5 font-size - O tamanho de letra ...................................................................................................................... 41

1.6 font-style - O estilo de letra ........................................................................................................................... 41

1.7 font-variant - Letras maiúsculas "menores" ............................................................................................... 42

1.8 font-weight - Peso das letras - negrito (intensidade da cor) .................................................................... 42

1.9 font - Todas as propriedades das letras em uma declaração única ...................................................... 42

10. A propriedade text ................................................................................................................................................ 43

1.1 Os textos nos elementos HTML ................................................................................................................... 43

1.2 Valores válidos para as propriedades do texto ......................................................................................... 43

1.3 color - A cor do texto ...................................................................................................................................... 44

1.4 letter-spacing - O espaço entre letras ......................................................................................................... 44

1.5 word-spacing - O espaço entre palavras .................................................................................................... 45

1.6 text-align - Alinhar o texto ............................................................................................................................. 45

1.7 text-decoration - Decoração do texto .......................................................................................................... 46

1.8 text-indent - Recuo do texto .......................................................................................................................... 46

1.9 text-transform - Forma das letras do texto ................................................................................................. 47

11. A propriedade margin ........................................................................................................................................... 47

1.1 As margens nos elementos HTML .............................................................................................................. 47

1.2 Valores válidos para as propriedades de margem ................................................................................... 48

1.3 margin-top - A margem superior .................................................................................................................. 48

1.4 margin-right - A margem direita ................................................................................................................... 48

1.5 margin-bottom - A margem inferior .............................................................................................................. 48

1.6 margin-left - A margem esquerda ................................................................................................................ 49

1.7 margin - Todas as quatro margens em uma declaração única ............................................................... 49

12. A propriedade border ........................................................................................................................................... 50

1.1 As bordas nos elementos HTML .................................................................................................................. 50

1.2 Valores válidos para as propriedades das bordas .................................................................................... 50

1.3 border-width, border-style e border-color – espessura, estilo e cor da borda ...................................... 51

13. A propriedade padding ......................................................................................................................................... 53

1.1 Os espaçamentos nos elementos HTML ................................................................................................... 53

1.2 Valores válidos para as propriedades de espaçamento .......................................................................... 53

1.3 padding-top - O espaçamento superior ...................................................................................................... 53

1.4 padding-right - O espaçamento direito ........................................................................................................ 54

1.5 padding-bottom - O espaçamento inferior .................................................................................................. 54

1.6 padding-left - O espaçamento esquerdo .................................................................................................... 54

1.7 padding - Todos os quatro espaçamentos em uma declaração única .................................................. 54

14. A propriedade background ................................................................................................................................... 55

1.1 O fundo dos elementos HTML ..................................................................................................................... 55

1.2 Valores válidos para as propriedades do fundo ........................................................................................ 55

1.3 background-color - A cor do fundo .............................................................................................................. 56

1.4 background-image - A imagem de fundo ................................................................................................... 56

1.5 background-repeat - Repetir verticalmente a imagem de fundo ............................................................. 57

1.6 background-repeat - Repetir horizontalmente a imagem de fundo ........................................................ 57

1.7 background-position - Posicionar uma imagem de fundo ........................................................................ 57

1.8 background-attachment - Ajustar uma imagem de fundo fixa, que não "rola" com a tela. ................. 58

1.9 background...Todas as propriedades do fundo em uma declaração única .......................................... 58

15. A propriedade list .................................................................................................................................................. 58

1.1 Mudando o estilo das listas HTML .............................................................................................................. 58

1.2 Valores válidos para as propriedades do lista ........................................................................................... 58

1.3 list-style-image - Imagem para marcadores de lista ................................................................................. 59

1.4 list-style-position - posição dos marcadores de lista ................................................................................ 60

1.5 list-style-type - Os tipos de marcadores de lista ........................................................................................ 60

Definir os marcadores de listas não ordenadas .................................................................................................... 60

1.6 list-style - Duas propriedades das listas em uma declaração única ...................................................... 63

16. Pseudo‐elementos ................................................................................................................................................ 63

1.1 Sintaxe ............................................................................................................................................................. 63

1.2 O pseudo elemento "first-letter" ................................................................................................................... 63

1.3 O pseudo elemento "first-line" ...................................................................................................................... 64

17. Controlando as entrelinhas e o espaçamento entre elementos HTML ................................................................ 65

1.4 As propriedades "line-height" e "margin" .................................................................................................... 65

1.5 Alterando o espaçamento entre linhas ....................................................................................................... 66

1.6 E o espaçamento (a distância) entre os parágrafos? ............................................................................... 67

18. As medidas CSS de comprimento ......................................................................................................................... 68

1.1 Introdução ........................................................................................................................................................ 68

19. Incrementando cabeçalhos com CSS .................................................................................................................... 70

Efeitos CSS em Cabeçalhos ................................................................................................................................................... 70






20. CSS Links ................................................................................................................................................................ 72

Pseudo-classes .......................................................................................................................................................... 73

1.1 Diferentes estilos de links em uma mesma página web .......................................................................... 75

21. Botões com CSS ..................................................................................................................................................... 76

1.2 Como criar botões com CSS ........................................................................................................................ 76

22. Estilos CSS em objetos de formulários .................................................................................................................. 78

1.1 As tags HTML para formulários e sua estilização com CSS ................................................................... 78

1.2 Estilo CSS na tag <input> ............................................................................................................................. 78

1.3 Estilo CSS na tag <select> ........................................................................................................................... 79

1.4 Estilo CSS na tag <textarea> ....................................................................................................................... 80

1.5 Estilo CSS em formulário para LOGIN ....................................................................................................... 81

Capítulo 1 – A linguagem HTML

1. Evolução do HTML O HTML é uma Linguagem de marcação de texto. Mais especificamente, uma linguagem de marcação de hiper texto. Portanto, antes de começar a falar de HTML, vamos entender o que vem a ser uma linguagem de marcação. Linguagens de marcação (markup languages em inglês) são linguagens que combinam texto com informações extras sobre o texto. Essa informação extra pode ser representada por diversos símbolos ou palavras‐chave diferentes, dependendo da linguagem de marcação com que estivermos trabalhando. O HTML não era uma linguagem de formatação de textos qualquer, ela possibilitava ligar textos que estavam num computador a textos que estavam num outro computador, usando como meio a internet. O processador e visualizador de HTML são chamados de navegador pela característica do hipertexto que permite ao usuário "nadar" na informação.

O navegador (também chamado de browser ), nada mais faz do que abrir arquivos de computador e, caso esses arquivos contenham códigos HTML, interpretá‐los segundo o padrão do hipertexto e gerar a "página html", que é a manifestação gráfica dos códigos ‐ aquilo que você usualmente vê quando navega pela internet . Por convenção, os nomes dos

arquivos em HTML terminam com “.html”. Exemplo: index.html, foo.bar.html e etc.hml (existem também arquivos html que terminam com .shtml e outras extensões). Observe que esses arquivos podem estar tanto no computador do usuário que usa o navegador quanto em outros computadores: o navegador é capaz de abrir esses arquivos desde que eles estejam acessíveis.

Uma página HTML é dividida em duas partes, a cabeça e o corpo (<head> e <body>). Na cabeça (ou cabeçalho) são definidos os atributos principais do documento, como o título e as palavras‐chave. O corpo contém a parte visível do documento, ou seja, aquela que você verá processada em seu navegador.

A linguagem HTML surgiu em 1993 com a versão 1.0 até a versão XHTML em 2000. A versão XHTML possui três variantes, conforme mostrado abaixo:

• HTML 1.0 (1993)

• HTML 2.0 (1995)

• HTML 3.0 (1996)

• HTML 4.0 (1997)

• HTML 4.01 (1999)

• XHTML 1.0 (2000) eXtensible HTML que pode ser subdividida em: o XHTML 1.0 Strict (estrito) o XHTML 1.0 Transitional (Transicional) o XHTML 1.0 Frameset (frames estão em desuso)

A linguagem HTML, da versão 1.0 até a 4.01 incluindo a XHTML, passou por diversas alterações. Dentre as alterações mais importantes, podemos destacar a reprovação (deprecação) de algumas tags e atributos. A seguir, mostramos uma tabela com as tags reprovadas pelo W3C (World Wide Web Consortium) e como substituí‐las:

Tags HTML Reprovadas Tag Reprovada Descrição Substituir por <applet> Insere Applet <object>

<basefont> Fonte do documento todo font style sheets<center> Centraliza elemento <div style="text‐align:center"> <dir> Lista de Diretório <ul><font> Aplica Estilo da Fonte font style sheets<isindex> Adiciona Campo de Busca <form>

<menu> Lista de Menu <ul><s> Sobretachado text style sheets<strike> Sobretachado text style sheets<u> Sublinhado text style sheets

A tag <center>, que é reprovada, tem sido utilizada para centralizar estruturas dentro de uma página e não apenas texto, inclusive tabelas. O uso de tabelas para layout também foi reprovado. Tabelas são para estruturas dados tabulares – para aquelas situações onde se necessita mostrar dados numa grade.

Há também atributos de tags que foram reprovados. Somente os atributos das tag já listadas como reprovadas estão excluídas desta lista.

Atributos da tags HTML reprovados

Atributos Reprovado se usado em: align <caption>, <img>, <table>, <hr>,<div>, <h1..6>, <p> alink <body>background <body>bgcolor <body>, <table> <tr> <td> <th>clear <br> compact <ol>, <ul>color <basefont>, <font> border <img>, <object>hspace <img>,<object>link <body>noshade <hr> nowrap <td>, <th>size <basefont>, <font>, <hr>start <ol> text <body>type <li> value <li> vlink <body>width <hr>, <pre>, <td>, <th>vspace <img>,<object>

Todos estes atributos reprovados podem ser substituídos por controles de folhas de estilo. A maioria pode ser simplesmente trocado por uma folha de estilo, como por exemplo, o arquivo mailme.gif adicionado em cada página de um website possui atributos pré‐definidos em folhas de estilo, podendo ser utilizado da seguinte maneira: supondo que

a tag img apareça como se segue: <img src=”mailme.gif” id=”figura” />. Podemos formatá‐la com CSS conforme:

#figura { vertical-align:middle; padding:25px; width:29; height:31; border-style:none; }

Cada vez que a imagem for utilizada, somente o src e o id são usados (navegadores mais antigos ainda precisam do atributo borda zero – border=”0” ‐, mas você terá que utilizar o HTML4 Transitional ao invés do Strict . Se você utilizar a mesma imagem mais de uma vez, utilize um identificador de classe (que veremos mais adiante).

Perceba também que <td width=> está reprovado. Para controlar a largura de colunas de tabelas, utilize as tags <colgroup> e <col>.

2. Porque utilizamos tags com letras minúsculas?! Em HTML os nomes das tags e elementos podem ser escritos tanto com letras maiúsculas quanto com letras minúsculas, tanto que <B> é a mesma coisa que <b>. Se você observar em tutoriais encontrados pela Web, vai notar que os mais antigos geralmente utilizam letras maiúsculas para escrever os nomes das tags, mas os mais modernos utilizam exclusivamente letras minúsculas.

A nova geração do HTML é uma aplicação do XML e é designada por XHTML. O XHTML é a melhor linguagem para se criar páginas para a Web, mas é mais restrita do que o HTML (“rouba” algumas das liberdades que o HTML oferece). Ao contrário do que acontece em HTML, em XML as etiquetas <B> e <b> representam elementos diferentes, visto que em XHTML foi adotado uma convenção segundo a qual todas as etiquetas devem ser escritas com letras minúsculas. Por este motivo é extremamente recomendável que se escreva todas as etiquetas com letras minúsculas. Deste modo, você estará adquirindo bons modos e quase não terá trabalho de converter suas páginas HTML para XHTML.

3. Validando Seus Documentos • Utilizando uma ferramenta de autoria (Dreamweaver, Frontpage, por exemplo)

• W3C – HTTP://validator.w3.org

4. Separando Conteúdo da Apresentação 1990 – Surgimento do CSS (Cascading Style Sheets).

5. Trabalhando com XHTML e CSS Por se tratar de um texto plano, pode‐se utilizar qualquer editor de textos, como o bloco de notas, vi (Linux) ou TextEditor (Mac).

6. Escolhendo o Navegador Web • Microsoft Internet Explorer é o browser padrão nos sistemas Windows.

• Apple Safari é o browser padrão para o Mac OS X.

• Mozilla Firefox é o browser gratuito disponível para Windows, Mac OS X e Linux (http://www.mozilla.com/firefox/).

• Netscape Navigator está disponível para Mac OS X e Linux e é baseado no mesmo software que impulsiona o Firefox (http://browser.netscape.com).

• Opera é outro browser gratuito disponível para uma grande gama de sistemas operacionais (http://www.opera.com).

• Konqueror é um browser e gerenciador de arquivos gratuito para Linux (http://www.konqueror.org).

• OmniWeb é um browser para Mac OS X que custa uma pequena taxa e uma avaliação gratuita (http://www.omnigroup.com/applications/omniweb/).

7. Introduzindo o URL Cada arquivo ou documento disponível na web residem em um endereço único chamado de localizador de recurso uniforme (URL). O termo Identificador de Recurso Uniforme (URI) é usado às vezes como URL, embora URI seja um termo mais geral; um URL é um tipo de URI. Usaremos o termo URL nesta apostila para discutir posições dirigidas a

endereços de arquivos. É este endereço que permite que um dispositivo conectado à Web encontre um arquivo específico em um servidor específico a fim de baixar e exibir ao usuário (ou para empregar em alguma outra finalidade; nem todos os arquivos na Web podem ser mostrados).

8. Os Componentes de um URL Um URL segue uma sintaxe padrão que pode ser dividido em pequenos termos‐chave, diagramado na Figura 1‐2. Cada segmento do URL comunica a informação específica ao cliente e ao usuário. O protocolo indica uma de um conjunto de regras diferentes que ditam o movimento dos dados sobre a Internet. A Web usa o protocolo de transferência de hipertexto (HTTP) que é o protocolo padrão usado na transmissão de dados codificados em hipertextos de um computador a outro. O protocolo é separado do resto do URL por dois pontos e por duas barras inclinadas para frente (://). O nome do host é o nome do site a partir do qual o browser irá obter o arquivo.

O endereço verdadeiro do servidor Web é um endereço numérico único do Protocolo de Internet (IP), e cada computador conectado à Internet tem um. Os endereços IP parecem‐se com algo como "65.19.150.101" que não é muito fácil aos olhos humanos e é certamente um desafio armazená‐lo na memória. Um Nome de Domínio (Domain Name) é um pseudônimo mais passível de memorizar e ser usado para direcionar o tráfego da Internet a um endereço IP. Muitos nomes de host (hostname) na Web caracterizam‐se por possuírem um prefixo do domínio, adicionado ao nome do servidor que está sendo conectado (especialmente quando há múltiplos usuários dentro de um único domínio), embora esse prefixo seja freqüentemente opcional. Um prefixo pode ser quase toda a etiqueta curta do texto, mas "WWW" é tradicional. É possível para outro Web site inteiro existir separadamente dentro de um domínio sob um prefixo diferente, conhecido como subdomínio. Um hostname caracterizará também um sufixo de domínio (chamado às vezes uma extensão) para indicar a categoria de domínio em que o host reside, como o .com para um domínio comercial localizado nos ESTADOS UNIDOS, "edu" para uma instituição educacional, ou "co.uk" para um Web site comercial no Reino Unido.

9. URLs Absolutos e Relativos Um URL pode ser obtido de uma das duas formas quando aponta para um recurso dentro do Web site. Um URL Absoluto é aquele que inclui o caminho completo, incluindo o protocolo e o nome do host, não deixando margem a dúvidas quanto à localização do recurso. Você usará URL absoluto quando fizer um link para um site fora de seu domínio.

Um URL relativo é aquele que aponta para um recurso dentro de seu próprio domínio ou site referenciando somente pelo caminho e/ou arquivo, omitindo o domínio e o protocolo desde que eles possam ser seguramente assumidos. Parece‐se mais ou menos com o seguinte:

exemplos/capitulo1/exemplo.html

Se o arquivo estiver armazenado dentro do mesmo diretório onde o arquivo que está fazendo o link está, o trajeto pode ser suposto que seja também no mesmo diretório, assim, somente o nome e a extensão do arquivo são requeridos, assim como:

exemplo.html

Se o destino está num diretório hierarquicamente acima do arquivo fonte, o caminho relativo pode ser indicado por dois pontos e uma barra (../), instruindo o navegador a subir um nível para encontrar o recurso. Cada ocorrência de ../ indica um nível acima, então um URL apontando dois diretórios acima deverá parecer‐se com:

../../ exemplo.html

URLs relativos são uma maneira útil de manter as referências aos arquivos portáveis; um Web site inteiro pode ser movido para outro provedor e outro domínio sem alterar seus links internos.

Capítulo 2 – O Básico de XHTML e CSS

1. Tipos de tags HTML Na linguagem HTML existem três tipos de tags: as tags de bloco, as inline e as substituídas. Esta classificação é importante porque os estilos devem ser adequadamente aplicados a cada tag. O fato de determinada propriedade da CSS poder ser aplicada depende da natureza da tag. Em sua maior parte, o fato de uma propriedade poder ser aplicada a determinada tag (ou não) é relativamente óbvio. Por exemplo, você não esperaria que a propriedade de recuo de texto, que recua a primeira linha de um parágrafo, se aplicasse a uma tag inline, tal como o negrito. Quando precisar de ajuda nessa área, consulte as tabelas abaixo para saber quais propriedades podem ser usadas com determinado tipo de tag HTML.

1.1 Seletores para as tags de nível de bloco SELETOR USO NA HTML blockquote Endentaçãocenter (reprovada) Centralizar textodd Descrição da definiçãodfn Termo definidodir lista de diretóriosdiv Divisão lógicadl lista de definiçõesdt Termo de definiçãoh1‐h6 Níveis de cabeçalho 1‐6li Item de listaol lista ordenadap Parágrafotable Tabelatd Dados de tabelath Título de tabelatr Linha de tabelaul lista não ordenada

1.2 Seletores das tags inline SELETOR USO NA HTML a Link ancoradob Negrito (somente visual)small Texto menorbig Texto maiorcite Citação curtacode Código fonteem Ênfasefont Aparência da fonte (reprovada)i Itálico (somente visual)pre Texto pré‐formatadospan Container inlinestrike Sobretachado (reprovada)strong Ênfase forte (visual e semântico)sub Subscritosup Sobrescritott Teletipo (somente visual)u Texto sublinhado (reprovada)

Além da tag <body>, existem três tipos básicos de tags HTML:

• As tags de nível de bloco colocam uma quebra de linha antes e depois do elemento. Confira a relacão dos seletores de nível de bloco que podem ser usados pela CSS.

• As tags inline não têm quebras de linhas associadas ao elemento. Confira a lista de seletores de tag inline que a CSS pode usar.

• As tags substituídas têm dimensões definidas ou calculadas. Confira a lista de seletores de tag substituídos que a CSS pode usar.

1.3 Seletores das tags substituídas SELETOR USO NA HTML Img Imagem incorporadaInput Objeto de entradaobject Incorporação de objetoselect Selecionar área de entradatextarea Área de entrada de texto

2. Elementos Aninhados Uma das principais características da linguagem HTML é o fato de as tags serem, obrigatoriamente, aninhadas. O que isto quer dizer? Isto significa que uma tag de abertura inicial deve possuir sua correspondente de fechamento por último. Por exemplo, suponha o seguinte trecho de código HTML:

<b><i>Texto em negrito e itálico.</i></b> (correto)

<b><i>Texto em negrito e itálico.</b></i> (errado) Observe que a tag <b> no exemplo acima começou abrindo, mas foi a última a fechar, enquanto que no exemplo seguinte, não foi observado seu correto aninhamento ocasionando erro de renderização pelo navegador. Observe

também que algumas tags não possuem suas respectivas tags de fechamento, como a <br />, <hr />, etc.

3. Espaços em Branco Quando você cria seus documentos XHTML como texto plano, você está livre para formatá‐lo como quiser. Quebras de linha e endentações podem ajudá‐lo a fazer sua marcação mais legível conforme você trabalha. Navegadores Web ignoram quebras de linha extras, convertendo inúmeros espaços em um único espaço em branco. Para ilustrar um pouco, observe o seguinte exemplo:

<p>

Wide open

spaces!

</p>

Será mostrado no navegador:

Wide open spaces

4. Adicionando Comentários Para adicionarmos comentários num código HTML, procedemos da seguinte forma:

5. Elementos e Atributos Um elemento ou descritor HTML é uma estrutura semântica, composta de uma tag de abertura, conteúdo e uma tag de

fechamento. Alguns descritores não possuem uma tag de fechamento, como é o caso das tags <br />, <hr /> e <img />. Os documentos HTML são arquivos de texto plano que contêm "tags de marcação”. Essas tags (etiquetas) definem os elementos da linguagem HTML e os seus conteúdos. A lista seguinte indica algumas de suas características:

• As "tags de marcação" do HTML são usadas para definir os elementos.

• As tags HTML escrevem‐se utilizando os caracteres “<” e ” >” e entre eles o nome do elemento e os seus atributos.

• A primeira tag do par é a tag de início (ou de abertura) e a segunda do par é a tag de fim (ou de fechamento).

• Tudo o que se encontrar entre as tags de início e de fim fazem parte do conteúdo do elemento.

• Em XHTML as tags devem ser escritas sempre com letras minúsculas, fazendo com que as tags <b> e <B> não representem o mesmo elemento.

Exemplo de uma tag com atributo:

<div id=”texto” class=”vermelho”>Texto qualquer</div>

A tag <div> recebeu os atributos id e class. Atributos são elementos colocados numa tag para modificá‐la ou destacá‐la

permitindo alterações em sua funcionalidade. Alguns autores também denominam o conjunto completo ‐ <div id=”texto” class=”vermelho”>Texto qualquer</div> - uma tag.

Capítulo 3 O Elemento <head> (cabeçalho do documento) O elemento <head> contém informação de caractere geral, também designada por meta‐ informação, sobre o conteúdo do documento e sobre a forma como ele deve ser apresentado. Podemos dizer que o termo meta‐ informação (ou meta‐dados ) significa dados que descrevem outros dados ou informações.

1. A Informação Contida no Elemento <head> Os elementos cont idos dentro do elemento <head> não são exibidos na tela do navegador. O padrão HTML estabelece que só um pequeno número de elementos pode aparecer dentro do cabeçalho. Eles são:

<base>, <link>, <meta>, <title>, <style> e <script>.

A construção seria a seguinte:

<head><p>Aqui temos algum texto</p></head>

Na situação acima, o navegador pode reagir de duas formas:

• Apresentar o texto porque ele se encontra dentro de um elemento <p>

• Esconde o texto porque ele pertence ao cabeçalho.

Se você colocar um elemento não autorizado, como <h2> ou <p>, dentro do cabeçalho, a maioria dos navegadores vai escrever este elemento na página. Aparentemente, as pessoas que são responsáveis pela concepção dos browsers acham que este gênero de erros é aceitável. Esta e outras deficiências dos browsers são parcialmente responsáveis pelas más práticas de codificação adquiridas por muitos criadores de páginas HTML. Uma das razões que levaram à criação da linguagem XHTML foi a necessidade de acabar com a criação de páginas mal‐formadas e semanticamente incorretas.

2. Elementos de cabeçalho (<head>) Elemento Descrição <head> Contém informação importante a respeito do documento, mas que não deve ser apresentada no corpo da página<title> Define o título da página que aparecerá na barra de títulos do navegador<base> Define um URL base comum para todas as ligações relativas da página<link> Faz referência a um recurso externo e estabelece a ligação com ele<meta> Dá informação sobre aquilo que o documento contém

3. A declaração DOCTYPE A declaração DOCTYPE serve para indicar o DTD a usar para validar na página. Quando utilizada, deve aparecer logo no início da página, antes do elemento <html>. Sua origem se deve ao fato de, nos primórdios do CSS, cada desenvolvedor de browser ter sua própria implementação das folhas de estilo, fazendo com que os webdesigners tivessem que desenvolver sites diferentes para cada tipo de navegador. Quando o W3C resolveu padronizar o CSS, foi necessário resolver o problema das páginas já desenvolvidas. A maneira que encontraram foi criar uma diretiva que desse instruções ao navegador como interpretar o código HTML: se seria feito rigorosamente dentro dos padrões ou se o navegador utilizaria uma espécie de “modo de compatibilidade” para que não fosse necessário reescrever toda a página já feita nos padrões antigos.

Declaração Descrição <!DOCTYPE> Define o tipo de documento. Deve ser colocada antes de qualquer elemento pelo que fica

mesmo antes do elemento <html>

XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd">

XHTML 1.0 Transitional: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd">

XHTML 1.0 Frameset: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐frameset.dtd">

4. O elemento <meta> O elemento <meta> contém informação de caractere geral (meta‐informação) sobre o documento e deve ser colocado

dentro do elemento <head>. Sua finalidade é fornecer informação que descreve o documento.

1.1 Palavraschave para os motores de pesquisa Durante alguns anos a utilização mais freqüente da informação fornecida pelo elemento <meta> foi a criação de índices para sites de busca. Atualmente somente alguns buscadores ainda usam esta informação para indexar páginas, e os de maior sucesso ignoram este elemento. No entanto, há partes que continuam a ser t idas em consideração pelos agentes (robots) dos buscadores, como por exemplo, as indicações dadas sobre as pastas em que não deve ser feita qualquer indexação. Alguns sistemas de busca (não muitos) usam a informação contida nos elemento meta para indexar as páginas. No fragmento de código seguinte, o elemento <meta> contém uma breve descrição da página:

<meta name="description" content="Tutoriais, referências técnicas de HTML, CSS, JavaScript, XML, XSLT, SVG">

Na parte do código abaixo o elemento <meta> contém uma palavras‐chave para indexar a página:

<meta name=" keywords " content="HTML, DHTML, CSS, XML, XHTML, JavaScript, XSLT, SVG">

Como acabamos de ver, os nomes dados ao atributo name indicam claramente a final idade da informação contida no elemento meta. Infelizmente, muitos criadores de páginas para a Web abusaram do elemento meta e usaram de forma contrária à sua filosofia para enganar os motores de pesquisa. Em conseqüência disso, os sites de busca passaram a

ignorar cada vez mais o elemento <meta>, o que acabou dificultando todos aqueles que pretendiam usá‐lo de forma correta.

1.2 Valores desconhecidos para o atributo name do elemento <meta> Algumas vezes encontramos situações em que o atributo name do elemento <meta> contém um valor desconhecido, como no exemplo seguinte:

<meta name="security" content="low">

Numa situação destas devemos interpretar o elemento meta como contendo informação que é específica do web site. Essa informação pode ser importante para o autor da página, mas provavelmente é irrelevante para os visitantes. É possível que essas informações sejam úteis para algum software que leia a página.

5. A Declaração XML Para ser honesto, um documento XHTML não deveria ter uma declaração XML antes do DOCTYPE. Esta declaração especial indica que o documento foi codificado como XML e opcionalmente especifica a versão do XML e a codificação de caracteres: <?xml version="1.0" encoding="UTF‐8"?>

O Internet Explorer para Windows é de longe o navegador mais comum utilizado hoje, dominando 70% a 90% entre os navegadores web. E, infelizmente, o Internet Explorer não reconhece uma declaração XML. Cuidado, pois o IE pode não renderizar seus documentos XHTML de maneira correta.

6. O Elemento HTML O elemento HTML, colocado após o doctype, age como um container para o documento inteiro. Ele é conhecido como

o elemento raiz. O elemento html não possui propriedades próprias; é estritamente um contêiner que define onde o

documento começa e termina. Qualquer elemento ou conteúdo que estiver fora dele tornará o documento todo inválido.

1.3 Atributos Necessários xmlns: Um URL especificando um namespace XML, que é http://www.w3.org/1999/xhtml para documentos XHTML.

1.4 Atributos opcionais Não há atributos opcionais para o elemento HTML.

1.5 Atributos padrão • dir

• id

• lang

• xml:lang

Um namespace é um local onde são especificados nomes e atributos de um elemento para documentos XML. Como o XML é uma linguagem de marcação extensível, em que os autores definem seus próprios elementos e atributos. Por exemplo, um elemento animal com um atributo espécie é útil em documentos sobre animais, e tais nomes customizados podem definir um namespace especial. O XHTML 1.0, por outro lado, possui um conjunto predefinido de elementos e atributos, e o URL correto de seu namespace é http://www.w3.org/1999/xhtml. O namespace é declarado

em um documento XHTML através do atributo xmlns do elemento html. Os atributos lang e xml:lang são opcionais para o elemento html. A linguagem declarada no elemento html será passada aos demais elementos dentro dele.

7. Tipos de conteúdo (CONTENT TYPES) Servidores e clientes Web confiam em tipos de conteúdo padronizados para diferenciar um tipo do outro para

determinar que tipo de dado processar. Texto plano não formatado é entregue como tipo text/plain, uma imagem

JPEG é entregue com um tipo de conteúdo image/jpeg, e assim por diante. Tudo isto é feito por trás das cenas da web e geralmente os autores não têm que se preocupar com isto. Os tipos de conteúdo também são conhecidos como Internet media types ou tipos MIME (MIME é o acrônimo para Multipurpose Internet Mail Extensions). Documentos

HTML usam o tipo de conteúdo text/html, então ambos servidor e cliente sabem exatamente o que é o documento e como lidar com ele.

Capítulo 4 Listas Uma lista é simplesmente uma coleção de dois ou mais itens relacionados. Uma lista que possui apenas um único item é válida e pode estar semanticamente correta em alguns casos, mas normalmente agrupa diversos itens. Há três tipos de listas em XHTML: Listas não‐ordenadas (unordered lists), Listas ordenadas (ordered lists), e Listas de definições (definition lists).

1. A tag ul Uma lista não‐ordenada é designada pela tag <ul> e é utilizada quando a seqüência dos itens não é especificamente importante, como uma lista de ingredientes de uma receita. Cada item da lista é definido por seu próprio elemento <li>. As tags <ul> e <li> são de bloco. Somente as tags <li> são permitidas dentro de uma tag <ul> como elemento‐filho. Nenhum outro elemento pode estar dentro da <ul> sem que estejam encampadas pelas tags <li>. Exemplo de lista não‐ordenada:

<ul> <li>1 cup warm water</li> <li>1 packet active dry yeast</li> <li>2 1/2 to 3 cups all-purpose flour</li> <li>2 tablespoons olive oil</li> <li>1/2 teaspoon salt</li> </ul> OBS: existe um atributo type nas listas ordenadas e não‐ordenadas que altera o tipo de marcador (quadrado, círculo, disco, algarismos arábicos, algarismos romano e numerais), mas foram reprovadas pelo W3C. Caso queira alterar o marcador, utilize folhas de estilo.

1.1 Atributos Obrigatórios Esta tag não possui nenhum atributo obrigatório.

1.2 Atributos padrão • class

• dir

• id

• lang

• style

• title

• xml:lang

2. A tag ol Uma lista ordenada é designada pela tag <ol> e é utilizada quando a seqüência dos itens é especificamente importante, como uma lista de ações a serem seguidas em uma receita. Cada item da lista é definido por seu próprio elemento <li>. As tags <ol> e <li> são de bloco. Somente as tags <li> são permitidas dentro de uma tag <ol> como elemento‐filho. Nenhum outro elemento pode estar dentro da <ol> sem que estejam encampadas pelas tags <li>. Exemplo de lista ordenada:

<ol> <li>Combine the water, yeast, oil, salt and two thirds of the flour in a large bowl and mix thoroughly.</li> <li>Gradually add the remaining flour until the dough holds its shape, being careful not to let it become too dry. You may not need all the flour.</li> <li>Place the dough on a lightly floured surface and knead for five minutes until it becomes smooth and elastic.</li>

<li>Transfer the dough to a lightly oiled bowl, cover with plastic wrap and let it rise until it has doubled in size.</li> <li>When the dough has risen, place it on a floured surface, divide it into two equal portions rolled into balls. Allow the dough to rest for 15 minutes before forming your pizzas.</li> </ol>



• dir

• id

• lang

• style

• title

• xml:lang

3. A tag li Serve tanto para a tag <ul> como para a <ol>. Ela especifica cada item da lista individualmente. Um item da lista pode conter texto ou outros elementos, inclusive outras listas.

<h2>Specialty Pizzas</h2> <ul> <li> <h3>Barbecue Chicken Pizza</h3> <p>This hearty American departure from Italian tradition is one of our most popular pizzas.</p> <ul> <li>Spicy barbecue sauce.</li> <li>Chunks of mesquite grilled chicken.</li> <li>Blend of three cheeses: <ul> <li>Mozzarella</li> <li>Monterey Jack</li> <li>Smoked Gouda</li> </ul> </li> <li>Thin-sliced red onion.</li> <li>Roasted red peppers.</li> </ul> </li> </ul> Quando uma lista é aninhada com outra, a lista interna será, por padrão, ser estilizada de maneira diferente (uma bola ao invés de um quadrado, etc.), conforme seu nível de aninhamento.



• dir

• id

• lang

• style

• title • xml:Lang

Listas de Definições Uma lista de definições não é apenas uma coleção de itens, mas uma coleção de itens e suas respectivas definições. Diferentemente de uma <ol> ou <ul>, ela não possui a tag <li> como delimitador de elementos. Ela consiste de termos de definição (definition term) ‐ <dt> e de descritores de definição ‐ <dd>. Há uma conexão semântica entre um termo e suas descrições.

4. A tag dl A tag <dl> cria uma lista de definição. É um elemento de bloco que, por sua vez, deve possuir ao menos um termo ‐ <dt> ‐ ou ao menos uma descrição ‐ <dd>. Somente os elementos dt e dd são permitidos como filhos de uma dl.



• dir

• id

• lang

• style


5. A tag dt A tag dt pode ter somente texto ou elementos inline (itálicos, citações curtas, negritos, etc.). Ele designa um termo ou item a ser descrito. Um termo de definição é relacionado a cada descrição que o segue até que um novo elemento dt apareça para iniciar uma nova seqüência (ou até a lista encontrar a tag de fechamento </dl>).



• dir

• id

• lang

• style


6. A tag dd O elemento dd contém a descrição do elemento dt. Em caso de múltiplas descrições de um único termo, cada um deve ser encampado pelo seu próprio elemento dd. Esta tag é de bloco. Esta tag permite tanto texto, elementos inline e de bloco dentro dela.



• dir

• id

• lang

• style


<dl> <dt>Pizza</dt> <dd> <p>A flat, open-faced baked pie of Italian origin, consisting of a layer of bread dough covered with tomato sauce, cheese and a wide variety of optional toppings.</p> <p>Also called <em>pizza pie</em>.</p> </dd> <dt>Pasta</dt> <dd>Unleavened dough that is molded into any of a variety of shapes and boiled.</dd> <dd>A prepared dish containing pasta as its main ingredient.</dd> </dl>

Capítulo 5 – Elementos de Texto Estruturado Elementos de frase: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR e ACRONYM

Atributos definidos:

• id, class (identificadores ao longo do documento)

• lang (informação referente à linguagem),

• dir (direção do texto)

• title (título do elemento )

• style (informação referente ao estilo "inline")

• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (acontecimentos intrínsecos )

Os elementos da frase adicionam informação estrutural aos fragmentos de texto. Os elementos da frase assumem os seguintes significados:

1. A tag EM Indica‐nos uma ênfase. Visualmente, aplica um estilo itálico à fonte. Possui semântica, o que não ocorre com a tag <i>

2. A tag STRONG Indica‐nos uma ênfase mais acentuada. Visualmente, aplica um peso negrito à fonte. Possui semântica, o que não ocorre com a tag <b>.

3. A tag CITE Contém uma citação ou uma referência feita a outras fontes. Não confundi‐la com o parâmetro cite de algumas tags, como a <blockquote>.

<p>Restaurant critic <cite>Norm Deplume</cite> had this to say about our eatery:</p> <blockquote cite="http://example.com/food/reviews/SpaghettiCruft/"> <p>Spaghetti and Cruft offers tasty wood-fired pizzas at affordable prices, served in a hip, relaxed atmosphere. Comfortable seats, free WiFi and abundant power outlets make this a popular spot for the neighborhood technophiles to linger with their laptops.</p> <p><cite>Gotham Examiner, November 22, 2006</cite></p> </blockquote>

4. A tag Q (Quote) Contém uma citação curta. Deve possuir um atributo cite com o URL da citação. Ex.:

<p>Norm Deplume, food critic for <cite>The Gotham Examiner</cite>, recently commended our geek-friendly attitude, even saying that we're <q cite="http://example.com/food/reviews/SpaghettiCruft/">a popular spot for the neighborhood technophiles to linger with their laptops.</q></p>

5. A tag DFN (Definição) Indica‐nos que neste ponto se define a instância do termo que foi encerrado, ou seja, esta tag é usada para definir termos num texto. Ex.:

<p>Spaghetti and Cruft offers free wireless broadband internet access so laptop-toting patrons can check their e-mail, publish updates to their <dfn title="short for weblog, a kind of online journal">blogs</dfn>, or even do some honest work.</p>

6. A tag CODE Designa o fragmento de um código computadorizado. Utiliza‐se quando desejamos exibir um trecho de um código‐fonte de algum programa ou até mesmo código HTML.

7. A tag SAMP Designa exemplos de saídas de programas, scripts, etc.

8. A tag KBD: Indica‐nos dados de entrada em um programa de computador. Numa página HTML onde o autor quer demonstrar um código‐fonte, utiliza‐se o KBD para indicar quais dados deram entrada do programa.

9. A tag VAR: Indica‐nos um exemplo de uma variável ou argumento de um programa.

<pre><code> function helloWorld() { var button = document.getElementById("button"); if (button) { button.onclick = function(){ alert("Hello world!"); } } } </code></pre> <address> Jon Hicks <br />Illustrator and cheese lover <br />http://hicksdesign.co.uk </address>

10. A Tag BDO Define a direção de um segmento de texto. Pode ser da direita pra esquerda ou vice‐versa. Ex.:

<p>A passage of text containing one <em lang="en" xml:lang="en"> <bdo dir="rtl">reversed</bdo></em> word.</p>

11. A tag ABBR Indica‐nos a abreviação de um termo (exemplo: WWW, HTTP, URI, Mass., etc.).

12. A tag ACRONYM Indica‐nos um acrônimo (exemplo: WAC, sonar, etc.). Ex.:

<p>We accept all major credit cards, as well as <abbr title="Automatic Teller Machine">ATM</abbr> cards (you'll need to provide your <acronym title="Personal Identification Number">PIN</acronym>).</p>

13. A tag INS Insere um fragmento de texto. Pode, opcionalmente, ter como atributo o URL que contém informações sobre as alterações feitas no texto, bem como a data de alteração. Observe o exemplo do DEL.

14. A tag DEL Marca o texto (sobretachado) indicando uma alteração no conteúdo sem apagá‐lo. Ex.:

<p>Beginning <del datetime="2007-01-04T06:49:15-08:00">January 5th</del> <ins datetime="2007-01-04T06:49:35-08:00" title="Delayed one week while we hire more wait staff">January 12th</ins>, we'll be open until 2AM on Fridays and Saturdays.</p>

15. A tag HR Régua Horizontal. Cria uma régua horizontal, uma linha divisória entre seções de conteúdo. Ex.:

<h2>Customer feedback</h2> <p>Our loyal customers love us (and we love them).</p> <hr /> <h2>Reviews</h2> <p>Even those stuffy restaurant critics can't resist our charms.</p> EM e STRONG são usados para indicar uma ênfase. Os outros elementos da frase assumem um significado especial nos documentos técnicos. Estes exemplos ilustram alguns casos contendo elementos de frase:

Tal como <CITE>Harry S. Truman</CITE> teve a oportunidade de referir, <Q lang="en-us">The buck stops here.</Q> Informações mais detalhadas poderão ser encontradas em <CITE>[ISO-0000]</CITE>. Utilize por favor a seguinte referência em correspondências futuras: <STRONG>1-234-55</STRONG> A apresentação dos elementos das frases depende em muito do agente usado pelo usuário. Geralmente, os agentes visuais apresentem o texto EM em estilo itálico e o texto STRONG a negrito. Os agentes de voz sintetizada poderão alterar conforme os parâmetros de síntese, tais como o volume, o tom e a velocidade.

Os elementos ABBR e ACRONYM permitem aos autores indicar claramente a ocorrência de abreviações e de acrônimos. As linguagens ocidentais fazem um uso alargado dos acrônimos, tais como "GmbH", "NATO" e "F.B.I.", como também ainda de abreviações tais como "M.", "Inc.", "et al.", "etc.". Tanto no Chinês como no Japonês, são usados mecanismos de abreviação análogos, as referências subseqüentes de um nome longo se dão, usando um sub‐conjunto de caracteres do tipo Han a partir da ocorrência original. Ao se marcarem estas construções, fornece‐se informação preciosa aos agentes e a ferramentas de edição, tais como os verificadores de ortografia, os sintetizadores de voz, sistemas de tradução e os indexadores das máquinas de busca.

O conteúdo dos elementos ABBR e ACRONYM, especifica a expressão abreviada, tal como ela aparece normalmente definida no texto. O atributo "title" desses elementos poderá ser usado para fornecer a forma completa ou expandida da expressão. Eis aqui alguns exemplos do uso de ABBR:

<P> <ABBR title="World Wide Web">WWW</ABBR> <ABBR lang="fr" title="Société Nationale des Chemins de Fer"> SNCF </ABBR> <ABBR lang="es" title="Doña">Doña</ABBR> <ABBR title="Abbreviation">abbr.</ABBR> Note‐se que as abreviações e os acrônimos possuem muitas das vezes pronúncias idiossincráticas. Por exemplo, enquanto que "IRS" e "BBC" são tipicamente pronunciadas letra por letra, "NATO" e "UNESCO" são pronunciadas foneticamente. Existem ainda outras abreviações (exemplo: "URI" e "SQL"), as quais são soletradas por algumas pessoas e faladas como palavras por outras. Sempre que necessário, os autores deverão usar folhas de estilo a fim de especificar a pronunciação das abreviações.

16. Marcas de citação: os elementos BLOCKQUOTE e Q cite = uri [CT]. O valor deste atributo é‐nos dado sob a forma de um URI, o qual designa o documento fonte ou a mensagem original.Pretende‐se, com o uso deste atributo, fornecer informação acerca da fonte de onde a citação foi retirada.

Atributos definidos noutros lugares:


• lang (informação referente à linguagem), dir (direção do texto)


• style (informação referente ao estilo "inline")

• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (acontecimentos intrínsecos)

Estes dois elementos definem citações de texto BLOCKQUOTE é usado para as citações mais longas (conteúdo em bloco) e Q é usado para as citações mais curtas (conteúdo "inline"), as quais não requeiram mudanças de parágrafo. Este exemplo de formatação foi extraído de "The Two Towers", escrito por J.R.R. Tolkien, como sendo uma citação de bloco (do Inglês: BLOCKQUOTE).

<BLOCKQUOTE cite="http://www.mycom.com/tolkien/twotowers.html"> <P>They went in single file, running like hounds on a strong scent, and an eager light was in their eyes. Nearly due west the broad swath of the marching Orcs tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as they passed.</P> </BLOCKQUOTE>

1.1 Representação das citações De uma forma geral, os agentes visuais representam BLOCKQUOTE como sendo um bloco recortado. Os agentes visuais deverão assegurar que o conteúdo do elemento Q seja representado com as respectivas marcas de citação (aspas). Os autores não deverão colocar as referidas marcas nem no princípio nem no fim do conteúdo do elemento Q. Os agentes devem representar as marcas de citação de acordo com a linguagem (ver o atributo lang). Muitas das linguagens adotam diferentes estilos para as citações externa e interna (integradas), as quais deveriam ser respeitadas pelos agentes usados pelos usuários. O exemplo que se segue ilustra‐nos citações integradas através do elemento Q.

O João disse: <Q lang="en-us">Eu vi a Lucília à hora do almoço... ela disse-me: <Q lang="en-us">A Maria quer que tu compres sorvetes, de regresso a casa.</Q> Penso que irei comprá-los no Ben and Jerry's, na Rua Castilho.</Q> Dado que a linguagem das duas citações é o Inglês‐Americano, os agentes deverão representá‐las sem qualquer tipo de problemas, por exemplo, com apóstrofes à volta da citação interna e aspas à volta da citação externa:

O João disse: "Eu vi a Lucília à hora do almoço... ela disse-me: 'A Maria quer que tu compres sorvetes, de regresso a casa.' Penso que irei comprá-los no Ben and Jerry's, na Rua Castilho." Nota: recomenda‐se que as implementações das folhas de estilo forneçam um mecanismo de inserção destinado às marcas de citação antes e depois de uma citação delimitada pelo elemento BLOCKQUOTE, de acordo com o contexto da linguagem em questão e o grau de integração das respectivas citações. Contudo, dado que alguns autores usam BLOCKQUOTE meramente como um mecanismo para acentuar um texto, de modo a preservar a intenção dos autores, os agentes não deveriam inserir as marcas de citação no estilo que é definido por padrão. O uso de BLOCKQUOTE para recortar ou acentuar um texto está reprovado, em favor das folhas de estilo.

1.2 Subíndices e superíndices: Os elementos SUB e SUP Atributos definidos:




• style ( informação referente ao estilo "inline" )


Muitas linguagens (exemplo: Francês), requerem sub‐índices ou super‐índices para uma representação adequada dos fatores. Nesses casos, devem‐se usar os elementos SUB e SUP na marcação do texto.

H<sub>2</sub>O E = mc<sup>2</sup> <SPAN lang="fr">M<sup>lle</sup> Dupont</SPAN>

17. Linhas e parágrafos De uma forma geral, os autores dividem os seus pensamentos e argumentos por seqüência de parágrafos. A organização da informação em parágrafos não é afetada pela forma como esses parágrafos são representados: os parágrafos duplamente justificados contêm os mesmos pensamentos que os parágrafos justificados apenas do lado esquerdo. A marcação HTML para a definição de um parágrafo é direta: o elemento P define o parágrafo. Contudo, a representação visual dos parágrafos não é assim tão simples. Existe certo número de parâmetros, ambos de ordem estilística e técnica, que terão de ser preenchidos:

• Tratamento ou processamento do espaço em branco

• Salto e mudança automática de linha

• Justificação de parágrafos

• Hífenização

• Direcionalidade e convenções respeitantes à linguagem escrita em questão

• Formatação de parágrafos, no que diz respeito ao conteúdo envolvente ou circundante

1.1 Parágrafos: o elemento P Atributos definidos:





• align (alinhamento)


O elemento P representa um parágrafo. Ele não pode conter elementos de bloco (incluindo o próprio P). Aconselha‐se que os autores não devem usar os elementos P vazios.

1.2 Controle das mudanças de linha Aqui, a mudança de linha é definida como sendo um retorno do carro ( ), um avanço de linha (
) ou ambos. Todas as mudanças de linha constituem um espaço em branco. Para mais informações relacionadas com este tema, consulte, por favor, as notas relacionadas com as mudanças de linha, situadas no apêndice da especificação SGML.

Forçar a mudança de linha: o elemento BR Atributos definidos:




• clear (alinhamento e objectos flutuantes )

O elemento BR interrompe a linha do texto, no ponto onde ele for inserido. Nos agentes visuais, o atributo clear poderá ser usado para determinar se a marcação que se segue ao elemento BR flui à volta das imagens e dos outros objetos que flutuam na margem esquerda ou na margem direita, ou se ela começa abaixo desses objetos. Ser‐lhe‐ão dados mais detalhes na seção.

Capítulo 6 – Links e Âncoras Nesta lição, você aprenderá a usar descritores e URLs para criar hiperlinks para documentos e serviços locais e remotos na Web.

1.1 O que é um hiperlink? Não há dúvida de que você usou hiperlinks enquanto surfava na World Wide Web. O seu conhecimento sobre tags e URLs, juntamente com a nova tag âncora a ser apresentada neste capítulo, permitirá que você acrescente hiperlinks destacados aos seus documentos HTML. Hiperlinks são palavras e frases destacadas que você vê nos documentos Web. Ao dar um clique com o mouse sobre eles, você salta para outros documentos no servidor Web local, documentos, arquivos ou serviços em algum lugar na Internet, no outro lado da cidade ou em qualquer lugar do mundo. Para inserir um link em um documento, utilizamos a tag <a>, da seguinte forma:

<a href = "arq_destino">Hiperlink</a>

onde arq_destino é o URL do documento de destino e Hiperlink é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino.

1.2 Atributos do Hiperlink A tag <a> tem vários atributos utilizados de acordo com a ação associada ao link. Os mais usados são:

• href Indica o arquivo de destino da ligação de hipertexto. • target Indica o frame em que será carregado o arq_destino. • name Marca um indicador, isto é, uma região de um documento como destino de uma ligação.

1.3 Indicadores (Âncoras) Como foi dito anteriormente, o atributo NAME permite indicar um trecho de documento como ponto de chegada de uma ligação hipertexto.

A formatação:

<a name="inicio">Indicadores (uso de links)</a> faz com que a âncora Indicadores (uso de links) seja o destino de um link. Se escrevermos:

<a href="#inicio">topo do documento</a> teremos uma ligação hipertexto para um trecho deste mesmo documento:

Da mesma forma, construímos links para trechos determinados de outros documentos, desde que saibamos quais trechos do documento destino estão marcados para ponto de chegada de um link. Por exemplo:

Fortaleza é um <a href= "/ambiente/histprog.html#polo">pólo de alta tecnologia</a>. produz um link para um parágrafo marcado com <A NAME="polo"> no arquivo histprogr.html sobre a cidade de São Fortaleza, no diretório /ambiente/

Capítulo 7 Tabelas Semanticamente Corretas Ultimamente as tabelas têm sido consideradas as vilãs da Web. Termos que ajudaram a disseminação dos Web Standards como o Tableless (sem tabelas) depreciavam esse elemento HTML. Não gosto muito do termo Tableless, prefiro usar Layout CSS, pois Tableless significa “sem tabelas” e pode ser muito mal interpretado por parte de algumas pessoas, principalmente iniciantes.

As tabelas foram criadas para dados tabulares, mas por serem um meio muito amigável de aninhar a estrutura de uma página, foram e ainda são muito usadas para layout. Há alguns anos não uso mais tabelas para layout. Felizmente a Adobe está fazendo a sua parte também, na versão CS3 do dreamweaver esses recursos ainda existem, mas perderam destaque.

1. TAG table As principais tags de tabelas são:

• table ‐ (tabela) Determina um elemento de dados tabulares

• tr ‐ (table row) Insere linhas em uma tabela.

• td ‐ (table data) Insere células e colunas na tabela

Uma estrutura básica de uma tabela seria:

<table> <tr> <td>DADOS 1</td> <td>DADOS 2</td> </tr> <tr> <td>DADOS 3</td> <td>DADOS 4</td> </tr> </table> Com isso temos duas linhas com a tag <tr> e dentro dessas linhas temos duas células com a tag <td>. Essas duas células formarão colunas. Para visualizarmos a estrutura da tabela iremos inserir o atributo border com o valor 1. Esse atributo e de apresentação e não deve ser usado. Como estamos somente conhecendo as tags HTML vamos usá‐lo, mais a frente iremos retirá‐lo. Então a primeira linha do código ficaria assim:

<table border="1"> E a nossa tabela seria exibida assim:

DADOS 1 DADOS 2

DADOS 3 DADOS 4

Dica: É recomendado que todas as tags de dados <td> tenham conteúdo. Em último caso use o caractere especial de espaço ( ) se elas precisarem ficar vazias.

2. TAG CAPTION A tag <caption> como o próprio nome já sugere é para inserir o título na tabela. Vamos ao código:

<table border="1"> <caption>Nome da tabela</caption> <tr>

<td>DADOS 1</td> <td>DADOS 2</td> </tr> <tr> <td>DADOS 3</td> <td>DADOS 4</td> </tr> </table>

Resultado:

DADOS 1 DADOS 2

DADOS 3 DADOS 4

Por padrão, o caption fica no topo da tabela, mas você pode mudar a sua posição inserindo o atributo align com os

valores: left, rigth, bottom e top. Você pode estar perguntando se isso não é apresentação. Também classifico

como apresentação, mas infelizmente o CSS possui uma propriedade caption-side que nos meus testes só

funcionou no nosso amigo Firefox. Como atributo align para o caption é valido no XHTML 1.1 não teremos problemas.

3. TAG TH A tag <th> é usada para inserir uma legenda para colunas e linhas da tabela. Apesar da tag <th> ser inserida como uma

célula e já ficar posicionada corretamente, devemos usar o atributo scope para reforçarmos a declaração de sua

posição. O atributo scope recebe os valores col para cabeçalhos de coluna e row para cabeçalhos de linha.

<table border="1"> <caption>Nome da tabela</caption> <tr> <th scope="col">COLUNA 1</th> <th scope="col">COLUNA 2</th> </tr> <tr> <td>DADOS 1</td> <td>DADOS 2</td> </tr> <tr> <td>DADOS 3</td> <td>DADOS 4</td> </tr> </table> Resultado:

COLUNA 1 COLUNA 2

DADOS 1 DADOS 2

DADOS 3 DADOS 4

O conteúdo as tags <th> por padrão são exibidos em negrito e centralizados.

4. TAGS THEAD TBODY e TFOOT As tags <thead>, <tbody> e <tfoot>servem para aperfeiçoar a estrutura de uma tabela. Elas definem onde será exibido um determinado bloco de elementos e seu respectivo conteúdo:

• <thead> ‐ topo da tabela

• <tfoot> ‐ rodapé da tabela. Deve ser inserido antes da tag <tbody>

• <tbody> ‐ todo o conteúdo da tabela

<table border="1"> <caption>Nome da tabela</caption> <thead> <tr> <th scope="col">COLUNA 1</th> <th scope="col">COLUNA 2</th> </tr> </thead> <tfoot> <tr> <th scope="col">RODAPÉ 1</th> <th scope="col">RODAPÉ 2</th> </tr> </tfoot> <tbody> <tr> <td>DADOS 1</td> <td>DADOS 2</td> </tr> <tr> <td>DADOS 3</td> <td>DADOS 4</td> </tr> </tbody> </table>

OBS: usaremos os caracteres especiais acentuados sem codificá‐los para melhorar a leitura do código no tutorial. É aconselhado o uso dos códigos HTML para caracteres especiais. As tags <thead>, <tbody> e <tfoot> são ignoradas no Netscape 4. Na impressão o conteúdo das tags <thead> e <tfoot> deveriam ser repetidos em todas as páginas que contenham dados de uma tabela. Infelizmente, testei esse recurso no IE6, IE7, Firefox 1.5, Ópera e Amaya da W3 e esse recurso só funcionou no Firefox. Você pode criar uma página de teste inserindo várias linhas dentro da tag <tbody> e usar o recurso de “Visualizar a Impressão” dos Browsers. Mas não deixe de usar as tags de estrutura, pois os dispositivos de acessibilidade a cada dia melhoram o seu suporte à essas estruturas semânticas.

5. ATRIBUTOS COLSPAN E ROWSPAN Os atributos colspan e rowpan podem ser usados para mesclar células, mas com bom senso, pois diminuem a acessibilidade de uma tabela por deixar o código um pouco confuso para dispositivos de acessibilidade.

<table border="1"> <caption>Nome da tabela</caption> <tr> <td colspan="2">Linha 1 com 2 Colunas mescladas </td> </tr> <tr> <td rowspan="2">Linhas 2 e 3 mescladas na Coluna 1 </td> <td>Linha 2 Coluna 2 </td> </tr> <tr> <td>Linha 3 Coluna 2 </td>

</tr> <tr> <td>Linha 4 Coluna 1 </td> <td>Linha 4 Coluna 2 </td> </tr> </table> Resultado:

Linha 1 com 2 colunas mescladas

Linhas 2 e 3 mescladas na Coluna 1 linha 2 coluna 2

linha 3 coluna 2

Linha 4 Coluna 1 linha 4 coluna 2

6. ATRIBUTO SUMARY O atributo sumary é muito importante para browsers não visuais. Ele deve oferecer ao usuário uma breve descrição do conteúdo.

<table sumary = "resumo do conteúdo da tabela">

7. TABELA COMPLETA Segue abaixo a estrutura completa de uma tabela:

<table border="1" sumary="Descrição do conteúdo"> <caption>Nome da tabela</caption> <thead> <tr> <th scope="col">COLUNA 1</th> <th scope="col">COLUNA 2</th> </tr> </thead> <tfoot> <tr> <th scope="col">RODAPÉ 1</th> <th scope="col">RODAPÉ 2</th> </tr> </tfoot> <tbody> <tr> <td>DADOS 1</td> <td>DADOS 2</td> </tr> <tr> <td>DADOS 3</td> <td>DADOS 4</td> </tr> </tbody> </table>

Capítulo 8 Fundamentos do CSS

1. O nascimento do HTML Primeiramente, é necessário enfatizar que todo o conteúdo deste capítulo foi extraído do web site do Maujor – www.maujor.com – e que lá possui diversos exemplos de utilização do CSS.

A linguagem de marcação HTML (Hyper Text Markup Language) foi desenvolvida e aperfeiçoada até tornar‐se tal como a conhecemos nos dias atuais a partir de uma “invenção” devida a pesquisadores para tráfego de seus textos e informações de natureza científica. Assim, o embrião do HTML surgiu para servir a uma comunidade bastante restrita (a de cientistas). Com a introdução gradativa de novas tags e aplicações específicas àquela linguagem de marcação, A HTML tornou‐se o padrão mundial de exibição de conteúdo na Web.

2. O HTML atual E, já com várias inovações, o HTML era usado para construção de páginas Web, que no início limitavam‐se a exibir informações contidas nos documentos Web. A evolução vinha atropelando tudo com uma avalanche de novos aplicativos, facilidades, softwares, hardware e etc. E o HTML não passou ao largo, pelo contrário, a simples linguagem de marcação destinada a apresentar conteúdos carecia de uma maior flexibilidade no sentido de manipular visualmente os

conteúdos Web. Novas tags e atributos foram inventados tais como a tag <font> e o atributo “color” que permitiam alterar a aparência de textos. Assim nasceu a “estilização” dos conteúdos Web. E a evolução trazendo novas descobertas, corre célere neste dinamismo alucinante que estamos testemunhando. Novas tags e novos atributos de estilo são introduzidos no HTML. Com isso, a velha linguagem de marcação passou a exercer uma dupla função na exibição de conteúdos. A função de exibir o conteúdo e a função de estilizá‐lo (dar‐lhe a aparência visual).

3. Os problemas criados Mas, esta dupla função do HTML, paradoxalmente que possa parecer acabou trazendo sérios problemas aos projetistas Web. O crescimento e sofisticação dos documentos Web publicados na Internet, estavam fugindo do controle de seus criadores. Para uma idéia concreta do a que me refiro imagine a seguinte situação: seu melhor cliente telefona às 17:00h da tarde de uma sexta‐feira (sempre ligam nesta hora para solicitar alguma coisa não é mesmo?) e diz o seguinte; “teremos uma reunião aqui na empresa, na segunda‐feira às 0800h com um potencial comprador e é nossa intenção fazer uma apresentação dos nossos produtos através do site que você criou e mantém. Seguindo uma sugestão do nosso departamento de marketing precisamos mudar a cor de todos os títulos no site de verde para vermelho, pois que esta é a cor principal da marca do nosso comprador e com isso pretendemos fixar uma cumplicidade subliminar. Isto é bem simples de fazer, não é? Afinal é só mudar a cor! Dá para você “botar no ar” até às 19:30h ? Quero dar uma olhadinha antes de encerrar o expediente. OK? Claro que você concorda e responde que vai providenciar rapidinho, afinal é só para mudar a cor. Mas, são 180 páginas no site! E os títulos são tags de cabeçalho deste tipo: <h1><font color=”#00FF00”>Texto do título</font></h1> Supondo uma média de 3 títulos por página, você tem

um total de 540 tags <font> para editar e mudar o atributo “color”. E se o seu cliente tivesse pedido para mudar a cor dos textos, e do fundo? Bem, este exemplo simples dá uma dimensão de um dos problemas criados com a mistura de marcação com estilização!

4. A solução proposta Cada vez mais ficava evidente que a mistura de marcação com estilização que maravilhou os projetistas Web no início, tornara‐se uma grande dor de cabeça. E é claro, a solução passava por dissociar linguagem de marcação da estilização. Desta necessidade, eu diria mesmo uma imposição, nasceu a CSS, sigla em inglês para “Cascading Style Sheet” que em português foi traduzido para Folha de Estilo em Cascata”. A partir de então, para conseguir esta dissociação, usaremos os elementos (tags) HTML exclusivamente para marcar e estruturar o conteúdo do documento. Nenhum elemento HTML será usado para alterar o visual, ou seja estilizar o conteúdo. A tarefa de estilização ficará a cargo das CSS que

nada mais é do que um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os elementos do HTML. Estas declarações de estilo quer sejam estruturadas em um arquivo externo com extensão .css quer sejam declaradas de outros modos (incorporadas, importadas e inline) contém todas as regras de estilo para os elementos do documento HTML. Voltando àquela situação criada no item anterior, agora você mudaria a cor de TODOS os cabeçalhos <h1> em TODO o site em CINCO SEGUNDOS. Às 19:20h você retorna a ligação do cliente e pede para a secretária avisá‐lo de que “já está no ar”, sem maiores traumas, correrias e estresses. Ah e mais, mesmo que o site tivesse 1.800 páginas e não as 180 da situação criada, você gastaria os mesmos cinco segundos.

5. As restrições A idéia, a filosofia mesmo, de projeto web aponta para uso amplo das CSS, ainda não explorada em toda sua potencialidade por ocorrências de incompatibilidades de certas propriedades CSS com navegadores mais antigos e até mesmo com as interpretações diferentes das CSS por parte das aplicações de usuários de fabricantes distintos. Há uma tendência (e torcemos para que se concretize) de que as novas tecnologias voltadas para o desenvolvimento, não só das variadas aplicações de usuário como também de softwares e hardwares, atendam e se enquadrem dentro das recomendações e especificações dos órgãos normatizadores com ênfase para a W3C. Quando o projeto Web em todas as suas incontáveis variantes seguir a normatização e padronização recomendada pelos órgãos oficiais, teremos uma Web muito mais fácil, dinâmica e agradável.

6. O efeito “cascata” Que estilo será aplicado, quando há mais de um estilo especificado para um elemento HTML? Aqui entra o efeito cascata que nada mais é do que uma prioridade definida segundo regras conforme abaixo mostrado, onde o número quatro tem a prioridade a mais elevada:

1. Estilo padrão do browser; 2. Folha de Estilo Externa (importada e linkada);

3. Folha de Estilo Incorporada (definida na tag <head> do documento); 4. Estilo inline (dentro de um elemento HTML)

Assim, um estilo inline (dentro de um elemento HTML) tem a prioridade a mais elevada, o que significa que prevalecerá sobre aquele definido na tg <head> e este sobre o definido em uma Folha de Estilo Externa, e este sobre um inerente ao estilo padrão do browser.

7. Regra CSS

1.1 Regra CSS e sua sintaxe Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML. Um conjunto de regras CSS forma uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compõe‐se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:

seletor { propriedade: valor; }

Seletor: genericamente, é o elemento HTML (ou uma classe pré‐definida ou pseudo‐seletor, conforme veremos adiante) para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, . minhaclasse, etc...);

Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...).

Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)

Na sintaxe de uma regra CSS, escreve‐se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve‐se usar ponto‐e‐vírgula para separá‐las. O ponto‐e‐vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade no caso de mais de uma.

No entanto é de boa técnica usar‐se sempre o ponto‐e‐vírgula após cada regra para uma propriedade.

Ver os exemplos abaixo:

p { font-size: 12px; /* ponto-e-vírgula é facultativo */ } body { color: #000000; background: #FFFFFF; font-weight: bold; /*ponto-e-vírgula é facultativo */ }

No exemplo abaixo, o seletor é o "documento todo" (body ‐ a página web), a propriedade é o fundo do documento e o valor é a cor branca.

body { background: #FFFFFF; }

Se o valor for uma palavra composta, deverá estar entre aspas duplas " ", ou simples ' ':

h3 { font-family: "Comic Sans MS" }

Para tornar mais legível as definições de estilo, você deve descrever uma propriedade e seu valor, em cada linha, como abaixo:

p { text-align: right; color: #FF0000; }

Isto não é obrigatório! A regra abaixo tem o mesmo efeito da regra acima e ambas as sintaxes estão corretas:

p {text-align: right; color: #FF0000; }

NOTA: A razão do uso de ponto e vírgula na última declaração ou mesmo quando só há uma declaração é que durante a fase de projeto da Folha CSS quase sempre estaremos acrescentando novas declarações e a última declaração quase nunca é a última na fase de projeto. Assim, esta prática certamente nos poupará revisões por ter esquecido um ponto e vírgula!

1.2 Agrupamento de Seletores Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos cabeçalho. A cor de todos os cabeçalhos será verde.

h1, h2, h3, h4, h5, h6 {color: #00FF00;}

1.3 O seletor classe Mas você não está restrito somente aos elementos HTML (tags) para aplicar regras de estilo! Você pode "inventar" um nome e com ele criar uma classe a qual definirá as regras CSS. E o mais interessante das classes, é que elas podem ser aplicadas a qualquer elemento HTML. E mais ainda, você pode aplicar estilos diferentes para o mesmo tipo de elemento

do HTML, usando classes diferentes para cada um deles. A sintaxe para o seletor classe é mostrada abaixo. Elemento HTML mais um nome qualquer que você "inventa" precedido de “.” (ponto):

elementoHTML.minhaclasse { propriedade: valor;}

Nota: para o nome que você "inventa" evite usar números e caracteres especiais. Tanto quanto possível use só letras de a‐z e de A‐Z. Há restrições quanto ao uso de números e caracteres. Minha experiência e conselho: Use só letras! Por exemplo: suponha que você queira ter dois tipos de parágrafos em seu documento: um parágrafo com letras na cor preta e um parágrafo com letras na cor azul.

p.corum { color:#000000; } p.cordois { color:#0000FF; }

No seu documento HTML as regras seriam aplicadas conforme abaixo:

<p class ="corum"> este parágrafo terá cor preta. </p> <p class ="cordois"> este parágrafo terá cor azul. </p>

Não é permitido atribuir mais de uma classe para um elemento HTML. O exemplo abaixo está errado:

<p class ="corum" class ="cordois"> Aqui há um erro. </p>

Ao criar uma classe você talvez queira que ela seja aplicável a qualquer elemento HTML. Neste caso basta que se omita o nome do elemento antes da classe. Por exemplo: a regra CSS a seguir pode ser aplicada a qualquer elemento HTML ao qual você deseja atribuir cor azul:

.cortres { color: #0000FF }

No exemplo a seguir tanto o cabeçalho h2 como o parágrafo p terão cor azul:

<h2 class="cortres"> Este cabeçalho é azul. </h2> <p class="cortres"> Este parágrafo é azul. </p >

1.4 O seletor ID O seletor ID difere do seletor de classe, por ser ÚNICO. Um seletor ID só pode ser aplicado a UM e somente UM elemento HTML dentro do documento. Você pode "inventar" um nome e com ele criar um ID que definirá as regras CSS. Um ID só pode ser aplicado a UM elemento HTML. A sintaxe para o seletor ID é mostrada abaixo. Um nome qualquer que você "inventa" precedido de # ("cerquilha", "jogo‐da‐velha" :‐)):

#minhaID { propriedade: valor;}

Nota: para o nome que você "inventa" evite usar números e caracteres especiais. Tanto quanto possível use só letras de a‐z e de A‐Z. Há restrições quanto ao uso de números e caracteres. Minha experiência e conselho: use só letras!

1.5 Inserindo comentários nas CSS Você pode inserir comentários nas CSS para explicar seu código, e principalmente ajudá‐lo a relembrar de como você estruturou e qual a finalidade de partes importantes do código. Daqui a alguns meses a menos que você seja um privilegiado, terá esquecido a maior parte daquilo que você levou horas para "bolar". O comentário introduzido no código será ignorado pelo browser. Um comentário nas CSS começa com o "/*", e termina com " */". Veja o exemplo abaixo:

/* este é um comentário*/ p { font-size: 14px; /* este é outro comentário*/ color: #000000; font-family: Arial, Serif; }

8. Maneiras de vincular Folhas de Estilo a documentos

1.6 Os três tipos de vinculação de folhas de estilo As folhas de estilo podem ser vinculadas a um documento de três maneiras distintas:

• Importadas ou lincadas;

• Incorporadas;

• Inline.

1.7 Folha de estilo externa Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo html e que tem a extensão .css. Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha de estilo externa, você pode mudar a aparência de um site inteiro mudando um arquivo apenas (o arquivo da folha de estilo). O arquivo .css da folha de estilo externa deverá ser lincado ao documento HTML através da tag <link> dentro da tag <head> do documento. A sintaxe para lincar uma folha de estilo chamada meuestilo.css é mostrada abaixo.

<head> ........... <link rel="stylesheet" type="text/css" href="estilo.css"> .......... </head>

O browser lerá as regras de estilo do arquivo estilo.css, e formatará o documento de acordo com elas. Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter nenhuma tag HTML. As folhas de estilo devem ser "salvas" com uma extensão .css

1.8 Folha de estilo incorporada ou interna Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no próprio documento HTML. Uma folha de estilo incorporada ou interna é ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo esta incorporada. As regras de estilo, válidas para o documento, são declaradas na seção <head> do documento com a tag de estilo <style>, conforme sintaxe mostrada abaixo:

<head> ........... <style type="text/css"> <!-- body { background: #000000;

url("imagens/minhaimagem.gif"); } h3 { color: #FF0000; } p { margin-left: 15px; padding:1.5em; } --> </style> ........... </head>

O browser lerá agora as regras de estilo na própria página, e formatará o documento de acordo com elas.

Nota: Um browser ignora normalmente as tags desconhecidas. Isto significa que um browser velho que não suporte estilos, ignorará a tag <style>, mas o conteúdo da tag será mostrado na tela. É possível impedir que um browser velho mostre o conteúdo da tag, "escondendo‐o" através do uso da marcação de comentário do HTML.

Observe a inclusão dos símbolos <!‐‐ (abre comentário) ‐‐> (fecha comentário) no código acima.

1.9 Folha de estilo inline Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do elemento HTML. Um estilo inline só se aplica a um elemento HTML. Ele perde muito das vantagens das folhas de estilo, pois mistura o conteúdo com a apresentação. Use este método excepcionalmente, como quando quiser aplicar um estilo a uma única ocorrência de um elemento. A sintaxe para aplicar estilo inline é mostrada a seguir:

<p style="color:#000000; margin: 5px;"> Aqui um parágrafo de cor preta e com 5px nas 4 margens. </p>

1.10 Folhas múltiplas de estilo Se alguma propriedade for definida para um mesmo elemento em folhas de estilo diferentes, entrará em ação, o EFEITO CASCATA e prevalecerão os valores da folha de estilo mais específica. Suponha uma folha de estilo externa com as seguintes propriedades para o seletor h2:

h2 { color: #FFCC00; text-align: center; font: italic 9pt Verdana, Sans-serif; }

e, uma folha de estilo interna com as seguintes propriedades para o seletor h2:

h2 { color: #FFCC00; text-align: center; font: italic 10pt Verdana, Sans-serif; }

Se ambas as páginas estiverem vinculadas ao documento, como há um conflito no tamanho das letras para <h2>, prevalecerá a folha interna e a letra de <h2> terá o tamanho igual a 10 pt.

9. A propriedade font

1.1 As letras nos elementos HTML As propriedades para as letras definem as características (valores) das letras que constituem os textos dentro dos elementos HTML. As propriedades para letras são as listadas abaixo:

• color:...................cor da letra

• font‐family:..........tipo de letra

• font‐size:.............tamanho de letra

• font‐style:............estilo de letra

• font‐variant:.........letras maiúsculas de menor altura

• font‐weight:.........quanto mais escura a letra é (negrito)

• font:....................maneira abreviada para todas as propriedades

1.2 Valores válidos para as propriedades da letra • color:

o código hexadecimal: #FFFFFF o código rgb: rgb(255,235,0) o nome da cor: red, blue, green...etc

• font‐family: o family‐name: define‐se pelo nome da letra, p. ex:"verdana", "helvetica", "arial", etc. o generic‐family: define‐se genericamente, p. ex:"serif", "sans‐serif", "cursive", etc.

• font‐size: o xx‐small o x‐small o small o medium o large o x‐large o xx‐large o smaller o larger o length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) o %

• font‐style: o normal: letra normal na vertical o italic: letra inclinada o oblique:letra obliqua

• font‐variant: o normal: letra normal o small‐caps: transforma em maiúsculas de menor altura

• font‐weight: o normal o bold o bolder o lighter o 100

o 200 o 300 o 400 o 500 o 600 o 700 o 800 o 900

Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.

Como estudar e entender os exemplos

Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras. A seguir mostramos o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS.

1.3 color - A cor da letra <html> <head> <style type="text/css">  </style> </head> <body> <h1>Cabeçalho com letras vermelhas</h1> <h2>Cabeçalho com letras verdes</h2> <p>Parágrafo com letras azuis</p> </body> </html>

Este é o efeito da folha de estilo acima:

Cabeçalho com letras vermelhas

Cabeçalho com letras verdes Parágrafo com letras azuis

1.4 font-family - O tipo de letra <html> <head> <style type="text/css">  </style> </head> <body> <h2>Família por nome: arial, helvetica, serif;</h2> <p>Família genérica: sans-serif;<p> </body> </html>

Família por nome: arial, helvetica, serif;

Família genérica: sans-serif;

Notas: A propriedade font‐family é usada para definir uma lista de tipos de letras.

O browser assume o primeiro nome que ele reconhece na lista. Separar cada nome por uma vírgula e sempre prever um nome genérico. Se o nome da letra for composto (mais de uma palavra, p. ex: Comic Sans MS), usar aspas duplas no nome. Se estiver definindo um atributo de "style" em HTML, onde as aspas duplas já estão presentes usar no nome de fonte composto, aspas simples.

1.5 font-size - O tamanho de letra <html> <head> <style type="text/css">  </style> </head> <body> <h1>Letras com tamanho: 14px</h1> <h2>Letras com tamanho: smaller</h2> <p>Letras com tamanho:100%</p> </body> </html>


Letras com tamanho: 14px Letras com tamanho: smaller

Letras com tamanho:100%

1.6 font-style - O estilo de letra <html> <head> <style type="text/css">  </style> </head> <body> <h1>Este é o estilo italic</h1> <h2>Este é o estilo normal</h2> <p>Este é o estilo oblique</p> </body> </html>


Este é o estilo italic Este é o estilo normal

Este é o estilo oblique

1.7 font-variant - Letras maiúsculas "menores" <html> <head> <style type="text/css">  p</style> </head> <body> <h3>Este cabeçalho com letras normais</h3> <p>Este parágrafo com letras em "small-caps"</p> </body> </html>


Este cabeçalho com letras normais ESTE PARÁGRAFO COM LETRAS EM "SMALL-CAPS"

1.8 font-weight - Peso das letras - negrito (intensidade da cor) <html> <head> <style type="text/css">  </style> </head> <body> <p> Este é um parágrafo em negrito</p> </body> </html>


Este é um parágrafo em negrito

1.9 font - Todas as propriedades das letras em uma declaração única Esta é a maneira abreviada de você escrever uma regra para as propriedades das letras. A sintaxe geral é esta:

font: [style] [variant] [weight] size [/line‐height] family;

Você pode declarar todas ou algumas das propriedades. Os valores size e family são obrigatórios. Os demais são facultativos (se você os omitir será adotado o valor default ou herdado do elemento pai). Os valores style, variant e weight podem ser declarados em qualquer ordem.

html> <head> <style type="text/css">

</style> </head> <body> <p>Parágrafo em declaração única</p> </body> </html>


PARÁGRAFO EM DECLARAÇÃO ÚNICA

10. A propriedade text

1.1 Os textos nos elementos HTML As propriedades para textos definem as características (valores) dos textos inseridos dentro dos elementos HTML. As propriedades para textos são as listadas abaixo:

• color.....................cor do texto;

• letter‐spacing........espaçamento entre letras;

• word‐spacing.........espaçamento entre palavras;

• text‐align..............alinhamento do texto;

• text‐decoration......decoração do texto;

• text‐indent............recuo do texto;

• text‐transform.......forma das letras;

• direction...............direção do texto;

• white‐space.........como o brownser trata os espaços em branco;

1.2 Valores válidos para as propriedades do texto • color:


• letter‐spacing: o normal: é o espaçamento default o lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos

• word‐spacing: o normal: é o espaçamento default o lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos

• text‐align: o left: alinha o texto a esquerda o right: alinha o texto a direita o center: alinha o texto no centro o justify: força o texto a ocupar toda a extensão da linha da esquerda a direita

• text‐decoration: o none: nenhuma decoração o underline: coloca sublinhado no texto o overline: coloca um sobrelinhado no texto o line‐through: coloca uma linha em cima do texto o blink: faz o texto piscar

• text‐indent:

o lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) o % : porcentagem da largura do elemento pai

• text‐transform: o none: texto normal o capitalize: todas as primeiras letras do texto em maiúsculas o uppercase: todas as letras do texto em maiúsculas o lowercase: todas as letras do texto em minúsculas

• direction: o ltr: texto escrito da esquerda para a direita o rtl: texto escrito da direita para a esquerda

• white‐spacing: o normal: os espaços em branco serão ignorados pelo browser o pre: os espaços em branco serão preservados pelo browser o nowrap: o texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser

encontrada uma tag <br>


Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras. A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS.

1.3 color - A cor do texto <html> <head> <style type="text/css">  </style> </head> <body> <h1>Este cabeçalho é vermelho</h1> <h2>Este cabeçalho é verde</h2> <p>Este parágrafo é azul</p> </body> </html>


Este cabeçalho é vermelho

Este cabeçalho é verde Este parágrafo é azul

1.4 letter-spacing - O espaço entre letras <html> <head> <style type="text/css"> <!--

h2 {letter-spacing: 1.2em;} p {letter-spacing: 0.4cm;} --> </style> </head> <body> <h2> Este é o cabeçalho</h2> <p> Este é o parágrafo</p> </body> </html>


E s t e é o c a b e ç a l h o

E s t e é o p a r a g r á f o

1.5 word-spacing - O espaço entre palavras <html> <head> <style type="text/css">  </style> </head> <body> <h2> Este é o cabeçalho</h2> <p> Este é o parágrafo</p> </body> </html>


Este é o cabeçalho

Este é o paragráfo

1.6 text-align - Alinhar o texto <html> <head> <style type="text/css">  </style> </head> <body> <h1>Este é o cabeçalho 1</h1> <h2>Este é o cabeçalho 2</h2> <h3>Este é o cabeçalho 3</h3> <p>Este é o parágrafo cujo texto ...</p> </body> </html>

Este é o cabeçalho 1



Este é o parágrafo cujo texto foi alongado para mais de duas linhas para que você possa visualizar o efeito de text-align: justify que força o texto a estender-se desde a direita até a esquerda.

1.7 text-decoration - Decoração do texto <html> <head> <style type="text/css">  </style> </head> <body> <h1>Texto com sublinhado</h1> <h2>Texto com linha em cima</h2> <h3>Texto com sobrelinhado</h3> <p> <a href="http://www.maujor.com"> Este é um link sem sublinhado</a> </p> </body> </html>


Texto com sublinhado

Texto com linha em cima

Texto com sobrelinhado

Este é um link sem sublinhado

1.8 text-indent - Recuo do texto <html> <head> <style type="text/css">

</style> </head> <body> <h3>Texto com recuo de 80 pixel</h3> <p>Texto com recuo de 3.0em</p> </body> </html>


Texto com recuo de 80 pixeis

Texto com recuo de 3.0em

1.9 text-transform - Forma das letras do texto <html> <head> <style type="text/css">  </style> </head> <body> <h1>Texto com letras como digitadas</h1> <h2>Texto com primeira letra das palavras, maiúsculas</h2> <h3>Texto com todas letras, maiúsculas</h3> <h4>Texto com letras minúsculas</h4> </body> </html>


Texto com letras como digitadas

Texto com primeira letra das palavras, maiúsculas

TEXTO COM TODAS LETRAS, MAIÚSCULAS

Texto com letras minúsculas

11. A propriedade margin

1.1 As margens nos elementos HTML A propriedade para margens define um valor para espessura das margens dos elementos HTML. As propriedades para margens são as listadas abaixo:

• margin‐top..........define a margem superior;

• margin‐right........define a margem direita;

• margin‐bottom.......define a margem inferior;

• margin‐left.........define a margem esquerda;

• margin..............maneira abreviada para todas as margens

1.2 Valores válidos para as propriedades de margem • todas as propriedades:

o auto: valor default da margem o length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) o %: porcentagem da largura do elemento pai


Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para um elemento HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras. A seguir mostramos o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS.

1.3 margin-top - A margem superior <html> <head> <style type="text/css">  </style> </head> <body> <p>Uma margem superior de 2cm</p> </body> </html>


Uma margem superior de 2cm

1.4 margin-right - A margem direita <html> <head> <style type="text/css">  </style> </head> <body> <p>Uma margem direita de 300px nesta frase mais longa dentro do parágrafo</p> </body> </html>


Uma margem direita de 300px nesta frase mais longa dentro do parágrafo

1.5 margin-bottom - A margem inferior <html> <head> <style type="text/css">

</style> </head> <body> <p>Uma margem inferior de 2.0em</p> </body> </html>


Uma margem inferior de 2.0em

1.6 margin-left - A margem esquerda <html> <head> <style type="text/css">  </style> </head> <body> <p>Uma margem esquerda de 10%</p> </body> </html>


Uma margem esquerda de 10%

1.7 margin - Todas as quatro margens em uma declaração única A propriedade da margin permitem que você controle o espaçamento em volta dos elementos HTML. São válidos valores negativos para margem, com o objetivo de sobrepor elementos. Em declaração única a ordem das margens é: superior, direita, inferior e esquerda (dica: siga os ponteiros do relógio começando de cima).

Há quatro modos de se declarar abreviadamente as margens:

1 margin: valor1......as 4 margens terão valor1; 2 margin: valor1 valor2......margem superior e inferior terão valor1 ‐ margem direita e esquerda terão valor2 3 margin: valor1 valor2 valor3......margem superior terá valor1 ‐ margem direita e esquerda terão valor2 ‐ margem

inferior terá valor3 4 margin: valor1 valor2 valor3 valor4....margens superior, direita, inferior e esquerda nesta ordem.

<html> <head> <style type="text/css">  </style> </head> <body> <p>Uma margem superior de 20px, uma margem direita de 40px, uma margem inferior de 80px e uma margem esquerda de 5px</p> </body> </html>


Uma margem superior de 20px, uma margem direita de 40px, uma margem inferior de 80px e uma margem esquerda de 5px

12. A propriedade border

1.1 As bordas nos elementos HTML As propriedades para as bordas definem as características (valores) das quatro bordas de um elemento HTML. As propriedades para as bordas são as listadas abaixo:

• border‐width:................espessura da borda

• border‐style:................estilo da borda

• border‐color:................cor da borda

• border‐top‐width:............espessura da borda superior

• border‐top‐style:............estilo da borda superior

• border‐top‐color:............cor da borda superior

• border‐right‐width:.........espessura da borda direita

• border‐right‐style:..........estilo da borda direita

• border‐right‐color:..........cor da borda direita

• border‐bottom‐width:.........espessura da borda inferior

• border‐bottom‐style:.........estilo da borda inferior

• border‐bottom‐color:.........cor da borda inferior

• border‐left‐width:...........espessura da borda esquerda

• border‐left‐style:...........estilo da borda esquerda

• border‐left‐color:...........cor da borda esquerda

• border‐top:...maneira abreviada para todas as propriedades da borda superior

• border‐right:..maneira abreviada para todas as propriedades da borda direita

• border‐bottom:..maneira abreviada para todas as propriedades da borda inferior

• border‐left:..maneira abreviada para todas as propriedades da borda esquerda

• border:.........maneira abreviada para todas as quatro bordas

1.2 Valores válidos para as propriedades das bordas • color:


• style: o none: nenhuma borda o hidden: equivalente a none o dotted: borda pontilhada o dashed: borda tracejada o solid: borda contínua o double: borda dupla o groove: borda entalhada o ridge: borda em ressalto o inset: borda em baixo relevo o outset: borda em alto relevo

• width: o thin: borda fina o medium: borda média o thick: borda grossa

o length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)

Vamos a seguir analisar algumas delas detalhadamente através de exemplos práticos.

Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras. A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser.

1.3 border-width, border-style e border-color – espessura, estilo e cor da borda <html> <head> <style type="text/css">  </style> </head> <body> <h3>Borda média, contínua e azul</h3> <p>Borda 6px, tracejada e vermelha</p> </body> </html>


Borda média, contínua e azul

Borda 6px, tracejada e vermelha

Nota: A propriedade "border‐color" não é reconhecida pelo Internet Explorer se for usada isolada. Use a propriedade "border‐style" para ser reconhecida pelo Internet Explorer.

Nota: A propriedade "border‐color" não é reconhecida pelo Netscape. Use a propriedade "border" para ser reconhecida pelo Netscape.

border-style O estilo da borda Abaixo os estilos de bordas obtidos com a declaração border‐style: valor (dotted, dashed, etc..)

Borda dotted

Borda dashed

Borda solid

Borda double

Borda groove

Borda ridge

Borda inset

Borda outset

border-width A espessura das bordas Estude o código abaixo e tire suas conclusões de como obter outros efeitos com espessuras de bordas

<html> <head> <style type="text/css"> p { border-style: solid; border-bottom-width: 10px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; } </style> </head> <body> <p>Borda com espessura inferior de 10px</p> </body> </html>


Borda com espessura inferior de 10px

Nota: A propriedade "border‐bottom‐width" não é reconhecida pelo Internet Explorer se usada isoladamente. Use "border‐style" para ser reconhecida pelo Internet Explorer.

Definir a espessura das bordas superior, esquerda e direita Proceda de modo semelhante ao mostrado acima.

border Todas as propriedades das bordas em uma declaração única Esta é a maneira abreviada de você escrever uma regra para as propriedades das bordas. Você pode declarar todas as três propriedades das bordas em uma regra única: a sintaxe geral é esta: border: size style color; em qualquer ordem. Nota: Aconselho a adotar sempre a mesma ordem. Eu uso a ordem acima!

<html> <head> <style type="text/css"> <!-- p { border: thick groove rgb(255,0,255) } </style> </head> <body>

<p>Bordas em declaração única</p> </body> </html>


Bordas em declaração única

Propriedades CSS das bordas As propriedades das bordas permitem que você controle o estilo a cor e a espessura das bordas de um elemento HTML. As propriedades são muitas e como você viu, podem ser declaradas para cada uma das quatro bordas individualmente.

13. A propriedade padding

1.1 Os espaçamentos nos elementos HTML A propriedade para espaçamentos define um valor para os espaçamentos entre o conteúdo e as bordas dos elementos HTML. As propriedades para espaçamentos são as listadas abaixo:

• padding‐top..........define a espaçamento superior;

• padding‐right........define a espaçamento direita;

• padding‐bottom.......define a espaçamento inferior;

• padding‐left.........define a espaçamento esquerda;

• padding..............maneira abreviada para todas os espaçamentos

1.2 Valores válidos para as propriedades de espaçamento • todas as propriedades:

o auto: valor default do espaçamento o length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) o %: porcentagem da largura do elemento pai


Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para um elemento HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.

A seguir mostramos o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser.

1.3 padding-top - O espaçamento superior <html> <head> <style type="text/css">  </style> </head> <body> <p>Um espaçamento superior de 2cm</p> </body> </html>

Um espaçamento superior de 2cm

1.4 padding-right - O espaçamento direito <html> <head> <style type="text/css">  </style> </head> <body> <p>Um espaçamento direito de 300px nesta frase mais longa dentro do parágrafo</p> </body> </html>


Um espaçamento direita de 300px nesta frase mais longa dentro do parágrafo

1.5 padding-bottom - O espaçamento inferior <html> <head> <style type="text/css">  </style> </head> <body> <p>Um espaçamento inferior de 2.0em</p> </body> </html>


Um espaçamento inferior de 2.0em

1.6 padding-left - O espaçamento esquerdo <html> <head> <style type="text/css">  </style> </head> <body> <p>Um espaçamento esquerdo de 10%</p> </body> </html>


Um espaçamento esquerdo de 10%

1.7 padding - Todos os quatro espaçamentos em uma declaração única A propriedade padding permite que você controle o espaçamento entre o conteúdo e as bordas dos elementos HTML. Não são válidos valores negativos para espaçamento. Em declaração única a ordem das espaçamentos é: superior, direito, inferior e esquerdo.

Há quatro modos de se declarar abreviadamente os espaçamentos:

1 padding: valor1......os 4 espaçamentos terão valor1; 2 padding: valor1 valor2......espaçamento superior e inferior terão valor1 ‐ espaçamento direito e esquerdo terão

valor2 3 padding: valor1 valor2 valor3......espaçamento superior terá valor1 ‐ espaçamento direito e esquerdo terão valor2 ‐

espaçamento inferior terá valor3 4 padding: valor1 valor2 valor3 valor4....os espaçamentos superior, direito, inferior e esquerdo nesta ordem.

<html> <head> <style type="text/css">  </style> </head> <body> <p>Um espaçamento superior de 20px, um espaçamento direito de 40px, um espaçamento inferior de 80px e um espaçamento esquerdo de 5px</p> </body> </html>


Um espaçamento superior de 20px, um espaçamento direito de 40px, um espaçamento inferior de 80px e um espaçamento esquerdo de 5px

14. A propriedade background

1.1 O fundo dos elementos HTML A propriedade background define as características (valores) do fundo dos elementos HTML. As propriedades background são as listadas abaixo:

• background‐color............... cor do fundo;

• background‐image............. imagem de fundo;

• background‐repeat............. maneira como a imagem de fundo é posicionada;

• background‐attachment.......se a imagem de fundo "rola" ou não com a tela;

• background‐position............como e onde a imagem de fundo é posicionada;

• background........................maneira abreviada para todas as propriedades;

1.2 Valores válidos para as propriedades do fundo • background‐color:

o código hexadecimal: #FFFFFF o código rgb: rgb(255,235,0) o nome da cor: red, blue, green...etc o transparente: transparent

• background‐image: o URL: url(caminho/imagem.gif)

• background‐repeat: o não repete: no‐repeat o repete vertical e horizontal: repeat

o repete vertical: repeat‐y o repete horizontal: repeat‐x

• background‐attachment: o imagem fixa na tela: fixed o imagem "rola" com a tela: scroll

• background‐position: o x‐pos y‐pos o x‐% y‐% o top left o top center o top right o center left o center center o center right o bottom left o bottom center o bottom right


Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras. A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser.

1.3 background-color - A cor do fundo <html> <head> <style type="text/css">  </style> </head> <body> <h2>Estude CSS</h2> <p>Com CSS você controla melhor seu layout</p> </body> </html>


Estude CSS

Com CSS você controla melhor seu layout

1.4 background-image - A imagem de fundo <html> <head> <style type="text/css"> <!-- body { background-image: url("/images/css.gif");}

--> </style> </head> <body> </body> </html>


1.5 background-repeat - Repetir verticalmente a imagem de fundo <html> <head> <style type="text/css">  </style> </head> <body> </body> </html>


1.6 background-repeat - Repetir horizontalmente a imagem de fundo <html> <head> style type="text/css">  </style </head> <body> </body> </html>


1.7 background-position - Posicionar uma imagem de fundo <html> <head> <style type="text/css">  </style> </head> <body> </body> </html>

Este é o efeito da folha de estilo acima: a imagem esta posicionada a 200 pixeis da margem esquerda e 70 pixeis da margem superior

1.8 background-attachment - Ajustar uma imagem de fundo fixa, que não "rola" com a tela. <html> <head> <style type="text/css">  </style> </head> <body> </body> </html>

O valor fixed para a propriedade background‐attachment é interpretado de maneiras diferentes pelos browsers. O MSIE fixa a imagem em relação a caixa onde ela foi inserida. O Netscape fixa a imagem em relação ao corpo do documento <body> geralmente o canto superior esquerdo da TELA. Assim,neste Tutorial, no MSIE você verá a imagem nesta caixa e no Netscape você não a verá.

1.9 Background - Todas as propriedades do fundo em uma declaração única Esta é a maneira abreviada de você escrever uma regra para as propriedades do fundo. Você pode declarar todas ou algumas das propriedades estudadas em uma regra única: a sintaxe geral é esta: background: color image repeat attachment position; em qualquer ordem, podendo ser omitido um mais valores. Veja o exemplo abaixo:

<html> <head>> <style type="text/css">/>  </style> </head>

15. A propriedade list

1.1 Mudando o estilo das listas HTML A propriedade list define as características (valores) das listas HTML. As propriedades list são as listadas abaixo:

• list‐style‐image............. imagem como marcador da lista;

• list‐style‐position..........onde o marcador da lista é posicionado;

• list‐style‐type...............tipo do marcador da lista; • list‐style........................maneira abreviada para todas as propriedades;

1.2 Valores válidos para as propriedades da lista • list‐style‐image:

o none o URL: url(caminho/marcador.gif)

• list‐style‐position: o outside: marcador fora do alinhamento do texto o inside: marcador alinhado com texto

• list‐style‐type: o none: sem marcador o disc: círculo (bolinha cheia) o circle: circunferência (bolinha vazia) o square: quadrado cheio o decimal: números 1, 2, 3, 4, ... o decimal‐leading‐zero o lower‐roman: romano minúsculo i, ii, iii, iv, ... o upper‐roman: romano maiúsculo I, II, III, IV, ... o lower‐alpha: letra minúscula a, b, c, d, ... o upper‐alpha: letra maiúscula A, B, C, D, ... o lower‐greek o lower‐latin o upper‐latin o hebrew o armenian o georgian o cjk‐ideographic o hiragana o katakana o hiragana‐iroha o katakana‐iroha

OBS: os tipos de 11 a 20 são de uso específico e sem suporte total pelos navegadores atuais e não serão tratados neste tutorial.


Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para o elemento lista HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras. A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser.

1.3 list-style-image - Imagem para marcadores de lista Este exemplo demonstra como definir uma imagem de marcador de listas

<html> <head> <style type="text/css">  </style> </head>

<body> <ul> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> </body> </html>

A folha de estilo acima resultará nesta lista:

Item um Item dois Item tres

1.4 list-style-position - posição dos marcadores de lista Este exemplo demonstra como posicionar os marcadores de listas

html> <head> <style type="text/css">  </style> </head> <body> <<ul class="inside"> <li>Este texto destina-se a demonstrar o valor: "inside" dos marcadores de listas.</li> <li>E aqui continuamos com mais texto para fixar o valor:"inside" dosmarcadores de listas.</li> </ul> <ul class="outside"> <li>Este texto destina-se a demonstrar o valor: "outside" dos marcadores de listas.</li> <li>E aqui continuamos com mais texto para fixar o valor:"outside" dos marcadores de listas.</li> </ul> </body> </html>


Este texto destina-se a demonstrar o valor: "inside" dos marcadores E aqui continuamos com mais texto para fixar o valor:"inside" dos marcadores de listas.

Este texto destina-se a demonstrar o valor: "outside" dos marcadores E aqui continuamos com mais texto para fixar o valor:"outside" dos marcadores de listas.

1.5 list-style-type - Os tipos de marcadores de lista

Definir os marcadores de listas não ordenadas Este exemplo demonstra como definir os marcadores de listas não ordenadas.

<html>

<head> <style type="text/css">  </style> </head> <body> <ul class="none"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> <ul class="disc"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> <ul class="circle"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> <ul class="square"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> </body> </html>






Definir os marcadores de listas ordenadas Este exemplo demonstra como definir os marcadores de listas não ordenadas.

<html>

<head> <style type="text/css">  </style> </head> <body> <ol class="decimal"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> <ol class="lroman"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> <ol class="uroman"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> <ol class="lalpha"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> <ol class="ualpha"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> </body> </html>


1. Item um 2. Item dois 3. Item tres

i. Item um ii. Item dois iii. Item tres

I. Item um

II. Item dois III. Item tres

a. Item um b. Item dois c. Item tres

A. Item um B. Item dois C. Item tres

1.6 list-style - Duas propriedades das listas em uma declaração única Esta é a maneira abreviada de você escrever uma regra para as propriedades das listas. Você pode declarar duas das propriedades estudadas em uma regra única: a sintaxe geral é esta: list‐style: position; imagemou list‐style: position; type podendo inverter a ordem. Veja o exemplo abaixo:

<html> <head> <style type="text/css">  </style> </head> <body> <ul> <li>Texto para demonstrar a propriedade de declaração única para listas usando CSS - Folhas de Estilo em Cascata;</li> <li>Item dois;</li> <li>Item tres.</li> </ul> </body> </html>


Texto para demonstrar a propriedade de declaração única para listas usando CSS - Folhas de Estilo em Cascata; Item dois; Item tres.

16. Pseudoelementos São usados em CSS, para adicionar efeitos a um seletor, ou a parte de um seletor.

1.1 Sintaxe A sintaxe dos pseudo‐elementos:

seletor:pseudo-elemento {propriedade: valor}

As classes em CSS podem também ser usadas com pseudo‐elementos. Esta regra permite que você defina diferentes efeitos para pseudo‐elementos localizados em diferentes lugares em uma mesma página.

seletor.classe:pseudo-elemento {propriedade: valor}

1.2 O pseudo elemento "first-letter" O pseudo‐elemento "first‐letter" é usado para obter um efeito especial na primeira letra de um texto.

p {font-size: 12pt} p:first-letter {font-size:300%; } <p>Este texto destina-se a demosnstrar a pseudo-classe first-letter, bla...bla...bla... bla... bla...bla...bla...bla...bla... bla...bla... bla... bla...bla...bla...bla...bla... bla...bla... bla... bla...bla...bla...bla...bla... bla...bla... bla... bla...bla...bla...bla...bla... bla...bla...

O código acima produzirá esse efeito

Este texto destina-se a demonstrar a pseudo-classe first-letter, bla...bla...bla... bla... bla...bla...bla...bla...bla... bla...bla... bla... bla...bla...bla...bla...bla... bla...bla... bla... bla...bla...bla...bla...bla... bla...bla... bla... bla...bla...bla...bla...bla... bla...bla...

O pseudo‐elemento "first‐letter" somente pode ser usado com elementos de bloco.

Propriedades aplicáveis ao pseudo-elemento "first-letter" • font ‐ propriedades de letras

• color ‐ propriedades de cores

• background ‐ propriedades de fundo

• margin ‐ propriedades de margens

• padding ‐ propriedades de espaçamentos

• border ‐ propriedades de bordas

• text‐decoration

• vertical‐align (somente para "float: none)

• text‐transform

• line‐height

• float

• clear

1.3 O pseudo elemento "first-line" O pseudo‐elemento "first‐line" é usado para obter um efeito especial na primeira linha de um texto.

p {font-size: 12pt} p:first-line { color: #0000FF; font-variant: small-caps; } <p>Um texto qualquer dentro de uma pseudo-classe first-line, para um efeito especial na primeira linha</p>


Um texto qualquer dentro de uma pseudo-classe first-line, para um efeito especial na primeira linha. notar a mudança de cor e do tamanho de letra na primeira linha.

No exemplo acima toda a primeira linha sofre o efeito da definição do pseudo‐elemento. A "quebra" da linha depende do tamanho da janela do browser. O pseudo‐elemento "first‐line" somente pode ser usado com elementos de bloco.

Propriedades aplicáveis ao pseudo-elemento "first-line" • font ‐ propriedades de letras

• color ‐ propriedades de cores

• background ‐ propriedades de fundo

• word‐spacing ‐ espaçamento entre palavras

• letter‐spacing ‐ espaçamento entre letras

• text‐decoration

• vertical‐align

• text‐transform

• line‐height

• clear

Pseudo-elementos e Classes CSS Pseudo‐elementos podem ser combinados com Classes CSS

p.combinado:first-letter { color: #FF0000; font-size:xx-large; } <p class="combinado"> Uma frase com efeito especial combinado </p>


Uma frase com efeito especial combinado

17. Controlando as entrelinhas e o espaçamento entre elementos HTML

1.4 As propriedades "line-height" e "margin" A propriedade CSS de dimensionamento "line‐height" permite controlar o espaçamento entre linhas e a propriedade CSS "margin" permite controlar o espaçamento entre elementos HTML. Observe abaixo o código HTML para um texto composto de dois parágrafos:

<html> <head> </head> <body> <p> 1o. Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis. </p> <p> 2o.Parágrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor. </p> </body> </html>

O código acima é renderizado pelo navegador conforme mostrado abaixo. Notar a distância entre as linhas em cada parágrafo, ou seja, as entrelinhas (não confunda com distância entre parágrafos):

1o. Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

2o.Parágrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor.

1.5 Alterando o espaçamento entre linhas No código HTML mostrado acima vamos inserir uma regra CSS para "line‐height" que é a propriedade CSS que controla as entrelinhas. Observe abaixo o mesmo código com a regra, definindo uma entrelinha igual a 200%.

Nota: A entrelinha default do bronwser é 100%.

Você pode usar qualquer medida de comprimento, válida em CSS (px, cm, em, %, in...) para o valor da propriedade line‐height.

<html> <head> <style type="text/css">  </style> </head> <body> <p> 1o. Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis. </p> <p> 2o.Parágrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor. </p> </body> </html>

O código acima é renderizado pelo navegador conforme mostrado abaixo. Notar que a entrelinha que era default 100%, agora está 200% ou seja dobrou.

Nota: Faça algumas experiências com o valor de line‐height, usando inclusive valores abaixo de 100% e também outras medidas válidas (por exemplo: 12px, 2.3em, 3cm...etc...) e você vai constatar que tem o controle total das entrelinhas.

1.6 E o espaçamento (a distância) entre os parágrafos? Aqui também o controle é todo seu via CSS. E quem dita as regras para este espaçamento é a propriedade margin. Vamos acrescentar mais uma regra CSS no nosso código. Se você não lembra da propriedade margin, dê uma olhadinha neste Tutorial margens:

<html> <head> <style type="text/css">  </style> </head> <body> <p> 1o. Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis. </p> <p> 2o.Parágrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor. </p> </body> </html>

O código acima é renderizado pelo navegador conforme mostrado abaixo. Notar que a entrelinha continua em 200% e agora o espaçamento entre parágrafos cresceu para 40 pixels, cumprindo a regra CSS, escrita.

Você deve ter notado que o espaçamento do 1o. parágrafo para a borda superior do quadro amarelo e também a do 2o. parágrafo para a borda inferior do quadro amarelo, ambas AUMENTARAM. Sim, este aumento no espaçamento cumpriu o prescrito na nova regra, ou seja: 40 pixel de margem superior e 40 pixel de margem inferior nos parágrafos. Mas lembre‐se o controle é SEU. Tem como evitar este espaçamento não previsto :‐) Veja o item 1) abaixo.

Dicas adicionais 1) Para evitar aquele espaçamento referido acima, crie e aplique uma classe no parágrafo superior com margin‐top: 0 (ou n pixels) e outra classe ao parágrafo inferior com margin‐bottom: 0 (ou n pixels);

Você pode também declarar: margin: 0 0 40px 0; e suprimir o espaçamento superior, ou ainda margin: 40px 0 0 0; e suprimir o espaçamento inferior. E, uma série de outras combinações que ficam a título de exercícios para você.

2) Se você deseja aplicar regras CSS em alguns elementos do documento e não em todos (por exemplo: alguns parágrafos na página seguirão uma regra line‐height outros não) crie classes e aplique aos elementos.

18. As medidas CSS de comprimento

1.1 Introdução Unidades de medida de comprimento CSS

As unidades de medida de comprimento CSS referem‐se a medidas na horizontal ou na vertical (e em sentido mais amplo, em qualquer direção). O formato para declarar o valor de uma unidade de medida CSS é um número com ou sem ponto decimal imediatamente precedido do sinal '+' (mais) ou do sinal '‐' (menos), sendo o sinal '+' (mais) o valor "default" e imediatamente seguido por uma unidade identificadora (medida CSS válida ‐ p.ex., px, em, deg, etc...). A unidade identificadora é opcional quando se declara um valor '0' (zero). Algumas das propriedades CSS permitem que sejam declarados valores negativos para unidades de medida. A adoção de valores negativos pode complicar a formatação do elemento e devem ser usados com cautela. Se valores negativos não forem suportados pela aplicação de usuário, eles serão convertidos para o valor mais próximo suportado (e isso pode tornar‐se desastroso para um layout).

Unidades de medida de comprimento CSS válidas São dois os tipos de unidade de medida de comprimento CSS:

UNIDADE RELATIVA • em

• ex

• px ‐ pixel

• % ‐ percentagem

• as unidades relativas são referenciadas a outras unidades como veremos a seguir.

UNIDADE ABSOLUTA • pt ‐ point : 1/72 in;

• pc ‐ pica : 12 points ou 1/6 in;

• mm ‐ milímetro : 1/10 cm;

• cm ‐ centímetro : 1/100 m;

• in ‐ polegada : 2,54 cm;

Unidade relativa ‐ é aquela tomada em relação a uma outra medida. Folhas de Estilo em Cascata que usam unidades de comprimento relativas são mais apropriadas para ajustes de uso em diferentes tipos de mídia. (p. ex., de uma tela de monitor para uma impressora laser). O valor é tomado em relação:

• em : ...ao tamanho da fonte ('font‐size') herdada;

• ex : ...a altura da letra x (xis) da fonte herdada;

• px : ...ao dispositivo (midia) de exibição;

• % : ... a uma medida previamente definida.

Unidade absoluta ‐ é aquela que não esta referenciada a qualquer outra unidade e nem é herdada. São unidades de medida de comprimento definidas nos sistemas de medidas pela física e em fim são os conhecidos "(centímetros, polegadas etc.). São indicadas para serem usadas quando as mídias de exibição são perfeitamente conhecidas. Abaixo exemplos ilustrativos do uso destas medidas de comprimento CSS:

div { margin: 1.5em; } h4 { margin: 2ex; } p { font-size: 14px; } .classe { padding: 90%; } hr { width: 14pt; } h1 { margin: 1pc; } h2 { font-size: 4mm; } p.classe { padding: 0.3cm; } h5.classe { padding: 0.5in; }

Nota: Relembro que uma regra CSS tem a seguinte sintaxe: seletor {propriedade: valor;}

Entendendo as unidades de medida CSS Vamos a seguir definir e analisar cada uma das unidades de medida CSS e apresentar exemplos práticos.

A unidade de medida - pixel

A unidade de medida de comprimento pixel é relativa a resolução do dispositivo de exibição (p.ex: a tela de um monitor). Sem entrar em maiores considerações teóricas a mais simplista definição de pixel que encontrei é esta: Pixel é o menor elemento em um dispositivo de exibição, ao qual é possivel atribuir‐se uma cor. Considere um dispositivo de exibição construido com uma densidade de 90 dpi (dpi = dots per inch = pontos por polegada). Por definição, a referência padrão para pixel é igual a um ponto no citado dispositivo. Daí pode‐se concluir que 1 pixel naquele dispositivo de exibição é igual a 1/90 inch = 0,28 mm. Para uma densidade de 300 dpi 1 pixel é igual a 1/300 inch = 0,085mm. Assim, pixel é uma medida relativa a resolução do dispositivo de exibição.

A unidade de medida - em

A unidade de medida de comprimento em referencia‐se ao tamanho da fonte (letra) do seletor onde for declarada. Quando em for declarada para a propriedade font‐size referencia‐se ao tamanho da fonte (letra) do elemento pai. Quando em for declarada para o elemento raiz do documento (p. ex: <html> em documentos html) referencia‐se ao valor inicial (default) do tamanho de fonte (letra). Os exemplos abaixo esclarecem as definições:

h1 { line-height: 1.2em } line-height de <h1> será 20% maior do que o tamanho das letras de <h1> h1 { font-size: 1.2em } font-size de <h1> será 20% maior do que o tamanho das letras herdado por <h1> p.ex.: se h1 estiver contido numa div com font-size=10px então font-size de h1 = 12px

A unidade de medida - ex

A unidade de medida de comprimento ex é igual a altura da letra x (xis) minúscula).

A unidade de medida - percentagem, %

Valores em percentagem são relativos a um outro valor anterior declarado. Este valor anterior há que estar bem definido e em geral esta definição está em uma determinada propriedade do mesmo elemento, na propriedade do

elemento "pai" (por exemplo: uma medida CSS de comprimento) ou mesmo no contexto geral da formatação (por exemplo: a largura do bloco de conteúdo).

p { font-size: 10px } p { line-height: 120% }/*120% de'font-size'=12px*/

19. Incrementando cabeçalhos com CSS Com CSS você pode obter variados efeitos nos cabeçalhos de sua página. Apresento a seguir alguns exemplos com a finalidade de mostrar as definições básicas para este processo. As possibilidades são ilimitadas, bastando um pouco de criatividade para se obter efeitos bastante interessantes e decorativos. Para cada efeito apresento o resultado visual final do efeito e logo a seguir a regra CSS para obtê‐lo. Vamos a eles:

Cabeçalho: Efeito 1

Efeitos CSS em Cabeçalhos Este é o primeiro parágrafo e lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

h1 { font-family: Verdana, Arial, sans; font-size:150%; color:#03c; margin-bottom:0; padding-left: 2px; border-top: 3px solid #00f; border-bottom: 2px solid #00f; } p { font-family: Verdana, Arial, sans; color: #000; }


Efeitos CSS em Cabeçalhos Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

h1 { font-family: Verdana, Arial, sans; font-size:150%; color:#f00; padding-left: 2px; border-top: 2px solid #c36; border-bottom: 2px dotted #c36; text-align:left; } p { font-family: Verdana, Arial, sans; color: #000; }

Cabeçalho: Efeito 3 Efeitos CSS em Cabeçalhos Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

h1 { float:left; font-size:150%; color:#999; padding-left: 2px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin:0 10px 0 0; } p { font-family: Verdana, Arial, sans; color: #000; }



h1 { color:#fff; font-size:150%; background:#999; padding:5px 0px 5px 10px; border-top: 2px solid #000; border-bottom: 2px solid #000; border-left: 20px solid #000; border-right: 2px solid #000; width:18.0em; } p { font-family: Verdana, Arial, sans; color: #000; }



h1 { font-family: Verdana, Arial, sans; font-size:150%; color:#039; padding: 8px 0 10px 12px; border-left: 1px solid #039; border-top: 1px solid #039; margin-bottom:0;

} p { font-family: Verdana, Arial, sans; color: #000; border-left:1px solid #069; padding: 0 0 12px 12px; margin-top:0; }

Cabeçalho: Efeito 6 s CSS em Cabeçalhos Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

h1 { font-family: Verdana, Arial, sans; text-align:left; color:#fff; font-size:150%; background:#fff url(fcabecalho.gif) left center no-repeat; padding: 5px 0 5px 80px; border:0; margin-bottom:10px; } p { font-family: Verdana, Arial, sans; color: #000; }



h1 { font-family: Verdana, Arial, sans; color:#fff; font-size:150%; background:#548b54; padding:5px 0px 5px 10px; border: 3px outset #ccc; margin-bottom:10px; width:22.0em; } p { font-family: Verdana, Arial, sans; color: #000; }

20. CSS Links O CSS possibilita definir uma variedade infinita de layouts e efeitos para um link ou um conjunto de links. O limite é a sua imaginação! Um link visitado, não visitado, ativo ou no estado hover (quando você passa o mouse sobre ele) pode assumir aspectos (cores, fundos, etc...) diferentes através de CSS. Abordarei neste tutorial as técnicas básicas de manipular os quatro seletores de link.

Pseudo-classes Os efeitos em links são possíveis através de declarações de regras de estilo para as pseudo‐classes do elemento <a> do HTML. As pseudo‐classes são usadas em CSS, para adicionar efeitos diferentes a alguns seletores, ou a uma instância de alguns seletores.

Sintaxe A sintaxe das pseudo‐classes:

seletor:pseudo-classe {propriedade: valor}

As classes em CSS podem também ser usadas com pseudo‐classes. Esta regra permite que você defina diferentes efeitos para links localizados em diferentes lugares em uma mesma página. No último item deste tutorial "Diferentes estilos de links em uma mesma página web" veremos este efeito.

seletor.class:pseudo-class {propriedade: valor}

Os "seletores:pseudo-classe" de links São quatro as pseudo classes dos links:

• a:link........define o estilo do link no estado inicial;

• a:visited...define o estilo do link visitado;

• a:hover.....define o estilo do link quando passa‐se o mouse sobre ele;

• a:active....define o estilo do link ativo (o que foi "clicado").

Vamos a seguir analisar cada um deles detalhadamente através de exemplos práticos.

Como estudar e entender os exemplos Para cada seletor apresento as regras CSS definidas dentro de uma folha de estilos incorporada, e a seguir os efeitos em um link, onde se aplicam as regras. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser.

Grande flexibilidade É perfeitamente possível com CSS definir‐se um estilo diferente para cada um dos quatro seletores, de forma semelhante como é definido para qualquer texto HTML.

Prioridade nas declarações para links É importante a ordem de definição das regras para os estados dos links. Lembre‐se de que pelo "efeito cascata", as regras mais próximas do elemento prevalecem sobre as mais distantes. Assim, por exemplo: se voce define a: hover ANTES de a: visited, esta prevalecerá sobre a: hover e em consequência: O link visitado pela primeira vez assumirá a regra definida em a: visited e a partir de então a: hover não mais funcionará naquele link pois a: visited prevalecerá sobre a: hover. Qual é a ordem normal é lógica das declarações? É simples concluir! Senão vejamos:

1.) a: link é o estado inicial dos links; a:link deverá ser a primeira declaração; 2.) a: active deverá acontecer mesmo em links já visitados; a: active deverá ser declarado depois de a:visited; 1.) a: hover não precisa funcionar em a:active; a:active pode ser declarado depois de a:hover. Em consequência a ordem das declarações deve ser: a:link

a:visited a:hover a:active

Nota: Esta é a seqüência reconhecida e adotada por padrão. Note, no entanto, que se a:hover for declarado em último lugar (mais alta prioridade), o funcionamento dos links não ficará comprometido.

Exemplos de efeitos em links A seguir exemplos dos efeitos mais comuns e simples aplicando CSS aos seletores de links

Removendo o sublinhado do link Típicamente, por default, os links são sublinhados e na cor azul. Um efeito muito comum em páginas web é o de se retirar o sublinhado do link normal, mudar a cor e fazer "aparecer" o sublinhado, quando o mouse é passado sobre ele. Esse efeito obtém‐se facilmente com CSS. Abaixo a regra para esse simples efeito:

<style type="text/css">  </style> PASSE O MOUSE AQUI

Adicionando sublinhado e sobrelinhado Este efeito semelhante ao anterior, consiste em um sobrelinhado adicional no link hover. Abaixo a regra para esse efeito:

<style type="text/css">  </style> PASSE O MOUSE AQUI

Acrescentando um fundo Este efeito simulando um "rollover" simples, consiste em acrescentar uma cor de fundo no link hover. Abaixo a regra para esse efeito:

<style type="text/css"> <!-- a:link, a:visited, a:active { text-decoration: underline; } a:hover {text-decoration: underline; background:#ffc; color: #FF0000; }

--> </style> PASSE O MOUSE AQUI

Link com um fundo de uma cor que muda no link hover Este efeito também simula um "rollover" simples, consiste em mudar a cor de fundo no link hover. Abaixo a regra para esse efeito:

<style type="text/css">  </style> PASSE O MOUSE AQUI

Link que muda o tamanho da letra no link hover Neste efeito há uma mudança no tamanho da letra (em geral para maior) no link hover. Abaixo a regra para esse efeito:

<style type="text/css">  </style> PASSE O MOUSE AQUI

1.1 Diferentes estilos de links em uma mesma página web É possível definir diferentes estilos para os 4 seletores de links para serem usados em uma mesma página. Isso se consegue utilizando os seletores de contexto que consiste em adicionar uma classe aos seletores. Assim cada conjunto dos 4 seletores de uma classe assumem o comportamento daquela classe e você pode definir quantas classes quiser. Por exemplo:

<html> <head> <style type="text/css"> <!-- .classe1 a:link {text-decoration: none} .classe1 a:visited {text-decoration: none} .classe1 a:hover { text-decoration: underline; color: #FF0000; } .classe1 a:active {text-decoration: none}

.c te } .c te } .c co } .c te } -- </ </ <b Este

<s <a ES </ </ <s <a ES </ </ ES ES No cou márea

21.

1.2NestbasiprojUmaseu nest

Nosso elfacilcham

....<bod

classe2 a:ext-decora


classe2 a:olor: #00F


-> /style> /head> body>

e é o códi

span classa href="htSTE É O LI/a> /span> span classa href="htSTE É O LI/a> /span>

STE É O LI

STE É O LI

código HTMmesmo todaa contida

Botões co

Como criate tutorial vocamente emetando‐se ua para o estaprograma grte tutorial sã

so botão seremento <a>itar nosso cmar a classe

..........dy>

:link { ation: und

:visited {ation: und

:hover {teFF00;

:active { ation: und

igo HTML:

s="classe1ttp://www.INK DA cla

s="classe2ttp://www.INK DA cla

INK DA cla

INK DA cla

ML usamos a uma áreana tag <s

om CSS

ar botões coou explicar cm utilizar‐se auma gif animado normal dráfico preferão estas que

botao_lin

botao_ho

rá para "acio></a>. E, vamcontrole soba criar de: .b

...

erline ove

erline ove

xt-decorat

erline ove

"> maujor.comsse1

"> maujor.comsse2

sse1

sse2

a tag <spa de links pan>

om CSS omo fazer fuas propriedadmada para a do link e umaido as duas ivocê vê abai

nk.gif (dimens

over.gif (dime

onar" um linkmos colocar re a "estilizabotao. Esse r

erline

erline

tion: unde

erline

m">

m">

an> para dque segui

uncionar botdes dos seletimagem do a para o estaimagens de aixo e estão d

sões: 120 x 24

nsões: 120 x 2

k em conseqo elemento

ação" CSS, araciocínio de

erline;

definir a cirão as reg

tões dinâmictores a:link eestado a:ho

ado "mouse sacordo com disponíveis p

4 pixeis)

24 pixeis)

üência temoo <a></a> datravés da crefine a marca

classe do gras daque

os com CSS.e a:hover paover. Então, sobre", sendsuas preferêara downloa

os o primeiroentro de umriação de umação HTML p

link. Issoela classe.

A técnica é ra se fazer avamos prec

do esta últimências e necead, caso quei

o elemento dma outra "cama classe papara o botão

o permite . Obviamen

relativament troca de umcisar de duasa, uma gif anessidades. Asira usá‐las.

da marcaçãoaixa" o elemara o elemen:

definir umnte trata-

te simples e ma imagem ds imagens dnimada! Cons imagens qu

o HTML já demento <p></nto <p></p>

m link se da

consiste de fundo, o botão. nstrua no ue usarei

efinido. É /p>, para >. Vamos

<p class="botao"> <a href="#" title="Meu Link">Botão CSS</a> </p> .............

Esta marcação ainda sem aplicação do estilo produz na tela o seguinte:

Botão CSS

Vamos então estilizar a classe .botão

1o.) ‐ posicionamento do botão na tela:

.botao { position:absolute; top:20px; left:50px; margin:0px; padding:0px; }

2o.) ‐ definições para o elemento link em seu estado inicial:

• propriedades da fonte, como tamanho, cor, alinhamento, sublinhado, familia;

• dimensões da "caixa" (essas dimensões devem ser iguais as dimensões das gif's do fundo ‐ no nosso caso 120px por 24px);

• espaçamentos e margens;

• alinhamentos;

• fundo;

.botao a { font: bold 12px/24px arial, helvetica, sans-aerif; padding:0px; text-decoration: none; text-align:center; color:#ccc; background: #666 url('botao_link.gif') no-repeat center center; width:120px; height:24px; display:block; }

E, finalmente o estado over do link:

.botao a:hover { background: #666 url('botao_hover.gif') no-repeat center center; color:#999; }

E o código completo do botão:

<head> ................ <style type="text/css"> <!-- .botao { position:absolute; top:20px; left:50px; margin:0px; padding:0px; }

.botao a { font: bold 12px/24px arial, helvetica, sans-aerif; padding:0px; text-decoration: none; text-align:center; color:#ccc; background: #666 url('botao_link.gif') no-repeat center center; width:120px; height:24px; display:block; } .botao a:hover { background: #666 url('botao_hover.gif') no-repeat center center; color:#999; } --> </style> </head> <body> <p class="botao"> <a href="#" title="Meu Link">Botão CSS</a> </p> .............

....e, o botão funcionando! (passe o mouse em cima)

Botao CSS

Nota: A gif animada do estado over não funcionou no navegador Opera 6.05

22. Estilos CSS em objetos de formulários

1.1 As tags HTML para formulários e sua estilização com CSS Os diferentes tipos de formulários que você insere em seu documento HTML são apresentados com um formato e cores padrão, que nem sempre estão de acordo com o projeto visual da sua página. Com uso de CSS você pode alterar a apresentação dos diferentes objetos de formulário. Neste tutorial mostraremos as regras CSS básicas que permitem o controle sobre a apresentação dos formulários. As tags HTML para formulários abordadas são as listadas abaixo:

• input;

• select;

• textarea;

• form;

1.2 Estilo CSS na tag <input> Abaixo os objetos de formulário do tipo input com sua apresentação (visual) default.

A se

<htm<hea<sty </st</he<bod<for<inp val</fo<for<inp val</fo<for<inp</fo<for<inpvalu</fo</bo</ht

Este

1.3Aba

eguir a folha

ml> ad> yle type="te- ut { kground-colot: 12px verdor:#003399; der:2px soli

tyle> ead> dy> rm name="forput type="ralue="radiobuorm> rm name="forput type="chlue="checkboorm> rm name="forput type="teorm> rm name="forput type="suue="Enviar">orm> ody> tml>

e é o efeito d

Estilo CSSixo o objeto

de estilo inco

ext/css">

or: #B0E0E6dana, arial

id #000099;

rm1" methodadio" name=utton">

rm2" methodheckbox" naox">

rm3" methodext" name="

rm4" methodubmit" name>

a folha de es

S na tag <sede formulár

orporada e o

6; l, helvetica

;

d="post" act="radiobutto

d="post" actame="checkbo

d="post" act"textfield">

d="post" acte="Submit"

stilo acima, n

elect> rio do tipo se

o código HTM

a, sans-ser

tion=""> on"

tion=""> ox"

tion=""> >

tion="">

nos objetos d

elect com sua

ML, para os o

rif;

de formulári

a apresentaç

objetos input

o:

ção (visual) d

t.

default.

A se

<htm<hea<sty </st</he<bod<formeth<sel<optitem<optitem<optitem<optitem</se</fo </bo</ht

Este

1.4Aba

guir a folha de

ml> ad> yle type="te- ect { kground-colot:12px verdaor:#003399;

tyle> ead> dy> rm name="forhod="post" alect name="stion value="m_1 da listation value="m_2 da listation value="m_3 da listation value="m_4 da listaelect> orm>

ody> tml>

e é o efeito d

Estilo CSSixo o objeto

e estilo incorp

ext/css">

or: #B0E0E6ana, arial,

rm5" action=""> select"> "item_1"> a</option> "item_1"> a</option> "item_1"> a</option> "item_1"> a</option>

a folha de es

S na tag <tede formulár

orada e o cód

6; , helvetica,

stilo acima, n

extarea> rio do tipo te

digo HTML, pa

, sans-seri

no objeto de

extarea com

ara os objeto s

if;

e formulário

sua apresent

select

select

tação (visual) default.

A seguir a folha de estilo incorporada e o código HTML, para o objeto textarea

<html> <head> <style type="text/css">  </style> </head> <body> <form name="form6" method="post" action=""> <textarea name="textarea" rows="9"></textarea> </form> </body> </html>

Este é o efeito da folha de estilo acima, no objeto de formulário textarea

1.5 Estilo CSS em formulário para LOGIN

O formulário login padrão Abaixo o código HTML e o objeto de formulário do tipo login padrão, com sua apresentação (visual) default.

<form name="login"method="post" action="#"> <label>Usuário: <input name="user" type="text" tabindex="1" size="15"> </label> <label>Senha: <input name="password" type="password" tabindex="2" size="15"/> <input type="submit" name="Submit" value="OK" tabindex="3"> </label> </form>

1o. passo: Dimensionar e aplicar um fundo no formulário Vamos assumir que nosso formulário terá 380 pixels de largura total e um fundo na cor bege (#FFFFCC). Para estilizar o formulário criamos uma classe (vamos denominá‐la .login) a ser aplicada na tag form em conseqüência teremos um seletor de classe com esta sintaxe: form.login. Observe o código a seguir:

<html> <head>

<sty </st</he<bod<foracti<lab<inptabi</la<lab<inptabi<inpvalu</la</fo</bo</ht

Este

2o. Vamacre

<htm<hea<sty </st</he<bod<foracti<lab<inptabi</la<lab<inptabi<inpvalu</la</fo</bo</ht

Este

yle type="te- m.login { kground-coloth:380px;}

tyle> ead> dy> rm name="logion="#" clasbel>Usuário:put name="usindex="1" siabel> bel>Senha: put name="paindex="2" siput type="suue="OK" tabiabel> orm> ody> tml>

e é o efeito d

passo: Estmos definir tescentadas n

ml> ad> yle type="te- m.login { bath:380px; t: 11px Verdor: #003399;ding-left:10


e é o efeito d

ext/css">

or: #FFFFCC

gin"method=ss="login">: ser" type="ize="15">

assword" tyize="15"> ubmit" nameindex="3">

a folha de es

tilizar as letrtipo e cor do código a se

ext/css">

ackground-c

dana, sans-;border: 2p0px;

gin"method=ss="login">: ser" type="ize="15">

assword" tyize="15"> ubmit" nameindex="3">

a folha de es

C;

="post" >

"text"

ype="passwor

e="Submit"

stilo acima, n

tras e aplicade letra, coloeguir:

color: #FFFF

-serif; px solid #00

="post" >

"text"

ype="passwor

e="Submit"

stilo acima, n

rd"

no objeto de

ar uma bordocar uma b

FCC;

000FF;

rd"

no objeto de

e formulário

da no formuorda e um

e formulário

login

ulário espaçament

login

to a esquerdda. Observee estas novaas regras

3o. VamUmaclassacre

<htm<hea<sty </st</he<bod<foracti<lab<inptabi</la<lab<inptabi<inpvalu</la</fo</bo</ht

Este

4o. VamObs

<htm<hea<sty<!--form bacwidtfontcolopadd} .cambackfontcolo} .botback

passo: Estmos assumir a margem ese (vamos descentadas n

ml> ad> yle type="te- m.login { ckground-colth:380px; t: 11px Verdor: #003399;ding-left:10

mpos { kground-colot: 11px georor:#0033CC; gin-right: 2


e é o efeito d

passo: Estmos assumir erve estas no

ml> ad> yle type="te- m.login { ckground-colth:380px; t: 11px Verdor: #003399;ding-left:10

mpos { kground-colot: 11px georor:#0033CC;m

tao { kground-colo

tilizar as tagque estes casquerda de denominá‐la o código a se

ext/css">

lor: #FFFFC


or:#B0E0E6;rgia, sans-

20px;

gin"method=ss="login">: ser" type="ize="15" cl

assword" tyize="15" clubmit" nameindex="3">

a folha de es

tilizar a tag que o botãoovas regras a

ext/css">

lor: #FFFFC


or:#B0E0E6;rgia, sans-margin-righ

or: #CC3300

gs <input> ampos terão20 px irá se.campos) a eguir:

CC;


; -serif;

="post" >

"text" lass="campos

ype="passworlass="campose="Submit"

stilo acima, n

<input> "boo terá uma cacrescentada

CC;


; -serif; ht: 20px;

0;

"usuário" eo um fundo eeparar estes ser aplicada

000FF;

s">

rd" s">

no objeto de

otão OK" or em tom aas no código

000FF;

e "senha" em tom azucampos e oa na tag inp

e formulário

avermelhadoo a seguir:

l médio (#B0o botão OK.put do usuár

login

o escuro (#C

0E0E6) e as Para estilizario e da sen

CC3300) e as

letras tom aar o estes cnha. Observe

letras tom a

azul claro (#0ampos criame estas nova

azul claro (#

0033CC). mos uma as regras

#CCFFFF).

fontcolo} --> </st</he<bod<foracti<lab<inptabi</la<lab<inptabi<inpvalu</la</fo</bo</ht

Este

Nestpropprimna p

t: 10px Ariaor: #CCFFFF;


e é o efeito fi

te tutorial mpiciará a vocmeiro exercícprimeira linha

al, sans-se;

gin"method=ss="login">: ser" type="ize="15" cl

assword" tyize="15" clubmit" nameindex="3" c

inal da aplica

mostramos acê, criar umcio, sugiro esa, senha na s

erif;

="post" >

"text" lass="campos

ype="passworlass="campose="Submit" class="botao

ação de estilo

as linhas gea série de ostilizar este msegunda linh

s">

rd" s">

o">

o, no objeto

rais da técnoutros efeitomesmo formha e botão na

de formulár

nica pra estios bastante ulário de loga terceira lin

rio login

ilizar formulinteressantegin de modoha.

ários. O entes na estiliz a que ele fiq

tendimento ação de forque disposto

do que foi mulários. Coo na vertical.

exposto omo seu . Usuário

Índice - wordpress.com · 2011-05-11 · trabalhando com xhtml e css ... capítulo 6 – links e...

Documents