C A P I T U L O 0 1 I N T R O D U Ç Ã O XHTML - PDF
Download "C A P I T U L O 0 1 I N T R O D U Ç Ã O XHTML"
Alexandra Lúcia Salazar Felgueiras
1 C A P I T U L O 0 1 I N T R O D U Ç Ã O A O XHTML 1
2 O QUE É XHTML? XHTML significa Linguagem de Marcação de Hipertexto (Extensible Hypertext Markup Language) XHTML é quase idêntico ao HTML 4.01 XHTML é uma versão mais rígida e limpa do HTML XHTML é o HTML como uma aplicação XML XHTML É UMA RECOMENDAÇÃO DO W3C (WORLD WIDE WEB CONSORTIUM) O XHTML se tornou um padrão adotado pelo W3C em 2000, diante da bagunça causada pela guerra dos navegadores, com a intenção de padronizar as plataformas web para uma compatibilidade global. Todos os navegadores desde 2000 suportam XHTML. Para incentivar o uso e a especialização dos profissionais da área em XHTML, o W3C fornece três modos de validação para documentos XHTML: Strict (para quem domina XHTML) Transitional (para quem está em transição do HTML para o XHTML) Frameset (para quem utiliza técnicas de desenvolvimento com Frames baseado em XHTML) POR QUE XHTML? Muitas páginas na internet possuem códigos HTML ruins. O código HTML a seguir funcionará normalmente em qualquer navegador, mesmo não seguindo algumas regras. <html> <head> <title>este é um HTML ruin</title> <body> <h1>html ruin <p>este é um parágrafo </body> XML é uma linguagem de marcação onde tudo deve ser marcado corretamente, o que resulta em documentos bem estruturados. XML foi desenvolvido para descrever dados, e HTML foi desenvolvido para mostrar dados. O mercado de hoje consiste em navegadores para diferentes tecnologias, alguns navegadores rodam em computadores, e alguns navegadores rodam em telefones móveis ou aparelhos portáteis. Alguns não têm o poder de interpretar HTML mal estruturado. 2
3 Sendo assim, combinando a força do HTML e do XML, o W3C recomenda uma linguagem de marcação que será útil agora e sempre XHTML. ELEMENTOS XHTML Elementos XHTML são conhecidos como tags e são delimitados pelos símbolos < e >. A seguir alguns exemplos de tags XHTML: <head> <title> <body> <p> <img /> <br /> <h1> ATRIBUTOS XHTML Atributos pertencem a tags e caracterizam propriedades dessas tags, como titulo, largura, altura, etc. A seguir alguns exemplos de atributos XHTML: <table width= 300px > <div title= Titulo da Div > <img src= logo.gif alt= Imagem Logotipo title= Logotipo /> <input type= text /> DIFERENÇAS IMPORTANTES Elementos XHTML devem estar apropriadamente aninhados Elementos XHTML devem estar sempre fechados Elementos XHTML devem estar sempre em minúsculo Documentos XHTML devem conter apenas uma tag raiz ELEMENTOS XHTML DEVEM SER APROPRIADAMENTE ANINHADOS Em HTML, alguns elementos podem ser aninhados inapropriadamente como no exemplo: <b><i>este texto é negrito e itálico</b></i> Em XHTML, todos os elementos devem estar apropriadamente aninhados como no exemplo: <b><i>este texto é negrito e itálico</i></b> 3
4 ELEMENTOS XHTML DEVEM SER SEMPRE FECHADOS Elementos não vazios devem apresentar tags de fechamento. Confira nos exemplos: ERRADO <p>este texto é um parágrafo <p>este texto é outro parágrafo CORRETO <p>este texto é um parágrafo</p> <p>este texto é outro parágrafo</p> ELEMENTOS VAZIOS TAMBÉM DEVEM SER SEMPRE FECHADOS Elementos vazios devem ser fechados por um / antes do >. Confira nos exemplos: ERRADO Quebra de Linha <br> Linha Horizontal <hr> Imagem <img src= img.gif > CORRETO Quebra de Linha <br /> Linha Horizontal <hr /> Imagem <img src= img.gif alt= Imagem GIF title= Imagem GIF /> ELEMENTOS XHTML DEVEM ESTAR EM MINÚSCULO ERRADO <BODY> <P>Este texto é um parágrafo</p> </BODY> CORRETO <body> <p>este texto é um parágrafo</p> </body> 4
5 DOCUMENTOS XHTML DEVEM CONTER APENAS UM ELEMENTO RAIZ Todos os elementos XHTML devem estar contidos dentro do elemento raiz <html>. Elementos filho devem estar sempre em pares e corretamente aninhados dentro de seus respectivos elementos pai. Estrutura básica de um documento XHTML: <html> <head>... </head> <body>... </body> </html> MAIS ALGUMAS REGRAS DE SINTAXE XHTML Nomes de atributos devem estar em minúsculo Valores de atributos devem estar entre aspas Abreviação de atributos é proibida O tipo de documento XHTML determina os elementos obrigatórios NOMES DE ATRIBUTOS DEVEM ESTAR EM MINÚSCULO ERRADO <table WIDTH=100%> CORRETO <table width=100%> VALORES DE ATRIBUTOS DEVEM ESTAR ENTRE ASPAS ERRADO <table width=100%> CORRETO <table width= 100% > ABREVIAÇÃO DE ATRIBUTOS É PROIBIDA ERRADO <option selected> 5
6 CORRETO <option selected= selected > ATRIBUTOS MINIMIZADOS EM HTML E COMO DEVEM FICAR NO XHTML H T M L compact compact="compact" checked checked="checked" declare declare="declare" readonly readonly="readonly" disabled disabled="disabled" selected selected="selected" defer defer="defer" ismap ismap="ismap" nohref nohref="nohref" ELEMENTOS XHTML OBRIGATÓRIOS X H T M L Todos os documentos XHTML devem ter o DOCTYPE declarado. Os elementos html, head, title e body devem estar sempre presentes. Este documento contém o mínimo de tags requeridas para um documento XHTML: <!DOCTYPE Doctype goes here> <html xmlns=" <head> <title>title goes here</title> </head> <body> </body> </html> Nota: O DOCTYPE não é uma parte nativa do documento XHTML. Ele não é um elemento XHTML. Nota: O Atributo xmlns na tag <html>, especifica o nome do XML para um documento e é necessária em documentos XHTML. O xmlns = é padrão, e será adicionado à tag <html> mesmo se você não incluí lo. Agora que vimos como estruturar corretamente um código xhtml, vamos nos aprofundar em técnicas semânticas de desenvolvimento para que possamos escrever códigos concisos que sejam claros tanto para seres humanos quanto para máquinas. 6
7 C A P I T U L O 0 2 C O N H E C E N D O XHTML 7
8 ENTENDENDO AS TAGS OBRIGATÓRIAS Estas tags são as mínimas requisitadas para um documento XHTML, pois marcam as características mais básicas que um documento deve ter. <html></html> descreve um documento HTML (uma página web). <head></head> marca o cabeçalho do documento HTML (onde são encontradas configurações e descrições do documento). <title></title> marca o título da página (aquele que aparece na barra ativa do navegador). <body></body> marca o conteúdo visível do documento HTML. EDITANDO DOCUMENTOS HTML Qualquer editor de textos tem a capacidade de editar documentos HTML. Um documento HTML é caracterizado pela extensão do documento, que pode ser.html ou.htm Qual a diferença? O.htm é um formato mais antigo que era utilizado na época em que não existiam arquivos com extensão maior que 3 letras, mas nos dias atuais ambos funcionam corretamente em qualquer navegador. Profissionais utilizam editores como Adobe Dreamweaver e Microsoft Expression Web, que fornecem recursos complementares que ajudam na produção. COMENTÁRIOS HTML Comentários podem ser inseridos dentro do código HTML para torná lo mais legível e fácil de entender. Comentários não são interpretados por navegadores. Exemplo: <! Isto é um comentário > TÍTULOS HTML Títulos HTML são definidos pelas tags de <h1> a <h6>. Exemplo: <h1>isto é um título</h1> <h2>isto é um título</h2> <h3>isto é um título</h3> <h4>isto é um título</h4> <h5>isto é um título</h5> <h6>isto é um título</h6> Títulos HTML são importantes, e não devem ser utilizados somente para tornar textos GRANDES e negritos. Mecanismos de busca utilizam os títulos HTML como índice para o conteúdo de seu site. Os títulos são interpretados como muito importante para o H1 e decrescendo até o menos importante que é o H6. 8
9 LINHAS HTML A tag <hr /> cria uma linha horizontal utilizada para separar visualmente o conteúdo. Exemplo: <p>isto é um parágrafo</p> <hr /> <p>isto é outro parágrafo</p> PARÁGRAFOS HTML Parágrafos HTML são definidos pela tag <p>. Exemplo: <p>isto é um parágrafo</p> Nota: A maioria dos navegadores adiciona uma linha vazia antes e depois do parágrafo. QUEBRAS DE LINHAS HTML A tag <br /> marca uma quebra de linha. Pode ser utilizada tanto dentro quanto fora de blocos de conteúdo. Exemplo: <p>isto é um parágrafo <br /> com uma quebra de linha</p> FORMATANDO TEXTOS HTML Algumas tags que servem para formatação textos HTML: T A G D E S C R I Ç Ã O <b> Define um texto negrito <em> Define um texto enfatizado <i> Define um texto itálico <small> Define um texto com letras pequenas <strong> Define um texto forte <sub> Define um texto subescrito <sup> Define um texto sobrescrito <ins> Define um texto inserido <del> Define um texto deletado <abbr> Define uma abreviação <address> Define informações do autor da página <blockquote> Define uma citação longa <q> Define uma citação curta <cite> Define uma citação <dfn> Define um termo de definição 9
10 LINKS HTML Um Link (hyperlink) é uma palavra, grupo de palavras ou uma imagem que você pode clicar e acessar outro documento ou uma nova sessão no mesmo documento. Outra característica dos links é que quando você passa o mouse em cima de um link o cursor do mouse muda de uma seta para uma mão pequena. Links HTML são definidos pela tag <a>. Exemplos: <a href= endereco_do_documento.html title= link >Isto é um link</a> Para criar um link direcionado para outro documento, utiliza se o atributo href. <a name= topo_pagina title= Voltar ao topo >Voltar ao topo</a> Para criar um link direcionado para outra sessão do mesmo documento, utiliza se o atributo name. IMAGENS HTML Imagens HTML são definidas pela tag <img />. Exemplo: <img src= imagemlogo.gif title= Logotipo alt= Imagem Logotipo /> Para exibir uma imagem em um documento html, você precisa utilizar o atributo src. SRC significa source. O valor deste atributo deve ser o endereço URL da imagem que deseja exibir no documento. O atributo alt é obrigatório na marcação de uma imagem em um documento html, este atributo tem como finalidade exibir um texto alternativo no lugar da imagem, caso a imagem não possa ser carregada. TABELAS HTML Tabelas HTML são definidas pela tag <table>. Exemplo: <table> <thead> <tr> <th>célula 1</th> <th>célula 2</th> </tr> </thead> <tbody> <tr> <td>linha 1, célula 1</td> <td>linha 1, célula 2</td> </tr> <tr> <td>linha 2, célula 1</td> <td>linha 2, célula 2</td> </tr> </tbody> </table> 10
11 Especificando tabelas: <table> define uma tabela <th> define uma célula do cabeçalho da tabela <tr> define uma linha da tabela <td> define uma célula da tabela <caption> define a legenda da tabela <thead> define o grupo de células do cabeçalho da tabela <tbody> define o grupo de células do corpo da tabela <tfoot> define o grupo de células do rodapé da tabela LISTAS HTML Lista não ordenada é definida pela tag <ul>. Dentro da lista, cada item é definido pela tag <li>. Exemplo: <ul> <li>item 1</li> <li>item 2</li> </ul> Lista ordenada é definida pela tag <ol>. Dentro da lista, cada item é definido pela tag <li>. Exemplo: <ol> <li>item 1</li> <li>item 2</li> </ol> Lista de definição é definida pela tag <dl>. Dentro da lista, cada item é definido pela tag <dt>. A descrição do item de uma lista de definição é definida pela tag <dd>. Exemplo: <dl> <dt>item 1</dt> <dd>descrição do Item 1</dd> <dt>item 2</dt> <dd> Descrição do Item 2</dd> </dl> FORMULÁRIOS HTML Formulários HTML são definidos pela tag <form>. Exemplo: <form> <! Elementos do formulário > </form> 11
12 ELEMENTOS INPUT São os mais importantes elementos de um formulário. Elementos de entrada têm a função de receber informações do usuário. INPUT TEXT O elemento <input type= text /> define um campo de texto de uma única linha, onde o usuário pode entrar com informações no formato texto: <form> <label>nome:</label><input type= text name= txt_nome /> <label> </label><input type= text name= txt_ /> </form> INPUT PASSWORD O elemento <input type= password /> define um campo de texto para senhas: <form> <label>usuario:</label><input type= text name= txt_usuario /> <label>senha:</label><input type= password name= txt_senha /> </form> INPUT RADIO O elemento <input type= radio /> define um botão radio. Um botão radio é utilizado para exibir diversas opções para o usuário, das quais ele pode selecionar apenas uma única opção: <form> <input type= radio name= sexo value= feminino />Feminino <input type= radio name= sexo value= masculino />Masculino </form> INPUT CHECKBOX O elemento <input type= checkbox /> define uma caixa de seleção. Caixas de seleção permitem que o usuário selecione uma ou mais opções: <form> <input type= checkbox name= transporte value= motocicleta />Eu tenho uma Motocicleta <input type= checkbox name= transporte value= carro />Eu tenho um Carro </form> INPUT SUBMIT O elemento <input type= submit /> define um botão de envio. Botões de envio são utilizados para enviar as informações de um formulário para um servidor: <form action= envia_formulario.php method= post > <input type= submit value= Enviar /> </form> 12
13 ELEMENTO TEXTAREA Definido pela tag <textarea>. Define um campo de texto com múltiplas linhas, onde o usuário pode inserir grandes textos: <textarea> Digite sua mensagem aqui. </textarea> ELEMENTO LABEL Definido pela tag <label>. Define um campo não editável que funciona como uma etiqueta para outros elementos do formulário: <form> <label>nome:</label><input type= text name= txt_nome /> <label> </label><input type= text name= txt_ /> </form> ELEMENTO SELECT Definido pela tag <select>. Define uma lista com múltiplas opções que permite a seleção de apenas uma delas pelo usuário: <select name="carros"> <option value="volkswagen">volkswagen</option> <option value="chevrolet">chevrolet</option> <option value="fiat">fiat</option> <option value="ford">ford</option> </select> ELEMENTO BUTTON Definido pela tag <button>. Define um botão para o formulário. BUTTON RESET O elemento <button type= reset > define um botão que tem como finalidade limpar os campos de um formulário: <button type= reset >Limpar</button> BUTTON SUBMIT O elemento <button type= submit > define um botão que tem como finalidade envias as informações dos campos de um formulário para um servidor: <button type= submit >Enviar</button> 13
14 C A P I T U L O 0 3 I N T R O D U Ç Ã O A O CSS 14
15 O QUE É CSS? CSS significa Folhas de Estilo em Cascata (Cascade Style Sheet) O CSS define como os elementos HTML serão apresentados CSS foi implementado na versão 4.0 do HTML para resolver um problema Folhas de Estilo Externas podem economizar muito trabalho O CSS RESOLVEU UM GRANDE PROBLEMA O HTML nunca teve o propósito de formatar um documento, apenas marcar sua estrutura. Quando tags como <font>, e atributos que formatam cores e etc foram adicionados ao HTML 3.2, teve início um pesadelo para os desenvolvedores web. No desenvolvimento de grandes sites, quando informações de fonts e cores eram adicionadas a uma única página por vez, teve início um longo e trabalhoso processo. Para resolver este problema, o W3C criou o CSS. No HTML 4.0, todas as tags e atributos que formatavam o documento foram removidos. Todos os browsers hoje em dia suportam CSS. CSS ECONOMIZA MUITO TRABALHO CSS define como elementos HTML serão exibidos. Folhas de estilo são salvos em arquivos externos com extensão css. Folhas de estilo externas permitem que você formate a aparência e o posicionamento de elementos de todas as páginas do site, modificando apenas um arquivo. SINTAXE CSS Uma regra CSS é composta por duas partes: um seletor e uma ou mais declarações: SELETOR DECLARAÇÃO DECLARAÇÃO h1 { color: blue; font size: 12px; } PRODRIEDADE VALOR PRODRIEDADE VALOR SELETORES CSS Seletores CSS podem ser elementos html, ids ou classes. SELETORES ELEMENTOS HTML Seletores HTML são compostos apenas pelo nome da tag: h1 { color: red; } Esta regra atribui a cor vermelha a todos os elementos <h1> do documento HTML 15
16 SELETORES ID O seletor id deve ser utilizado para apontar apenas um único elemento no documento HTML. No CSS o id é identificado pelo símbolo # antes de seu nome: #menu { font size: 16px; } Esta regra atribui o tamanho 16 ao elemento com o id menu no documento HTML SELETORES CLASS O seletor class pode ser utilizado para apontar um ou mais elementos no documento HTML. No CSS a class é identificada pelo símbolo. antes de seu nome:.paragrafo_noticia { text align: justify; } Esta regra alinha o texto de todos os elementos com a classe paragrafo_noticia como justificado TRÊS FORMAS DE INSERIR CSS EM SEU DOCUMENTO HTML Importando documento CSS Folha de Estilo Externa Declarando uma sessão para CSS no documento HTML Folha de Estilo Interna Utilizando CSS misturado com código HTML Estilo em linha INSERINDO CSS FOLHA DE ESTILO EXTERNA Há duas formas de importar um documento CSS para um documento HTML: <link rel= stylesheet type= text/css href= arquivo.css /> Esta é totalmente legal para documentos HTML Strict, pois importamos um documento CSS através de uma tag HTML nativa <style type= text/css url( folha_estilo.css ); </style> Esta forma é hibrida, pois mistura o código css com o html. INSERINDO CSS FOLHA DE ESTILO INTERNA Esta forma utiliza um método hibrido, porém organizado. Com ela criamos uma sessão somente para o código CSS dentro do documento HTML, o lugar correto para declarar esta sessão é dentro do cabeçalho do documento HTML (entre as tags <head></head>): <head> <title>titulo da Página</title> <style type= text/css >...Seu código CSS... </style> </head> 16
17 INSERINDO CSS ESTILO EM LINHA Estilo em linha perde muitas das vantagens oferecidas pelo CSS, pois mistura totalmente o código CSS com o HTML, adotando as regras CSS como propriedades das tags HTML: <p style= color: red; text indent: 25px; text align: justify; >Isto é um parágrafo</p> MÚLTIPLAS FOLHAS DE ESTILO Múltiplas Folhas de Estilo são carregadas em cascata. É possível ter múltiplas folhas de estilo externas, internas e estilos em linha. Quando interpretados pelo navegador, todos estes estilos serão organizados em cascata em uma única e virtual folha de estilo seguindo uma ordem de prioridade: 1. Estilo em Linha 2. Folha de Estilo Interna 3. Folha de Estilo Externa 4. Padrão do Navegador O Estilo em linha apresenta a maior prioridade e o padrão do navegador a menor, ou seja, se tiver um estilo em linha em um parágrafo com o id paragrafo_destaque determinando que a cor dele seja azul e uma regra em um arquivo externo determinando que este parágrafo seja vermelho, ele será azul, pois o estilo em linha tem maior prioridade. Obs.: As múltiplas folhas de estilo externas e internas tomam maior prioridade com a ordem lógica do código, por exemplo: se tiver uma folha de estilo interna em um documento HTML e uma folha de estilo externa sendo importada após esta folha de estilo interna, a folha de estilo externa irá sobrescrever as regras especificadas na folha de estilo interna, caso haja regras repetidas. 17
18 C A P I T U L O 0 4 C O N H E C E N D O CSS 18
19 APROFUNDANDO SELETORES CSS Seletores CSS podem ser aninhados ou agrupados. SELETORES ANINHADOS Para atingirmos um parágrafo que está dentro de uma <div> com o id destaque devemos utilizar seletores aninhados: div#destaque p { Declarações CSS } SELETORES AGRUPADOS Para atingirmos um parágrafo e um título <h2> para criar uma mesma regra podemos agrupar os seletores para economizar código: p, h2 {...Declarações CSS... } ENTENDO DECLARAÇÕES CSS Declarações CSS são compostas por duas partes: propriedades e valores. Propriedade são as características que deseja modificar no código HTML como: border, color, background, font, margin, etc. Valores diferem entre propriedades como: numéricos para largura de bordas, códigos hexadecimais para cores ou palavras reservadas como none. UNIDADES DE MEDIDA CSS % porcentagem. in polegada. cm centímetro. mm milímetro. em unidade proporcional ao tamanho padrão da fonte especificada no navegador. Se o tamanho for 12px então 1 em = 12 px. pt 1 ponto é equivalente a 1/72 polegada. px 1 pixel é equivalente a 1 ponto no monitor. 19
20 VALORES DE CORES CSS Nome da Cor O nome da cor desejada, exemplo: red. rbg(x,x,x) Um valor RGB, exemplo: rgb(255,0,0). rbg(x%, x%, x%) Porcentagem de um valor RGB, exemplo: rgb(100%,0%,0%). #rrggbb Código hexadecimal, exemplo: #ff0000. MODELO DA CAIXA CSS Todos os elementos HTML podem ser vistos como caixas do ponto de vista do CSS: A caixa é formada por propriedades padrões que existem em todos os elementos HTML: o conteúdo, padding, border e margin. Padding Limpa a área em volta do conteúdo anterior à borda. Border Define a borda em torno do conteúdo e do padding. Margin Limpa a área em volta da borda. Em ordem para definir a largura e a altura de elementos corretamente em todos os navegadores, é necessário compreender como o modelo da caixa funciona. ENTENDENDO O MODELO DA CAIXA CSS Quando você especifica a largura e a altura de um elemento pelo CSS, você está especificando somente as dimensões do conteúdo. Para saber o tamanho total de um elemento é necessário adicionar os tamanhos do padding, border e margin. 20
21 A largura total do elemento a seguir é de 300px: width: 250px; padding: 10px; border: 5px solid gray; margin: 10px; Vamos calcular: 250px (width) + 20px (padding da esquerda e direita) + 10px (bordas da direita e da esquerda) + 20px (margem da direita e da esquerda) = 300px A largura total de um elemento deve ser sempre calculada assim: Largura_Conteúdo + Padding_Esquerda + Padding_Direita + Borda_Esquerda + Borda_Direita + Margin_Esquerda + Margin_Direita. A altura total de um elemento deve ser sempre calculada assim: Altura_Conteúdo + Padding_Cima + Padding_Baixo + Borda_Cima + Borda_Baixo + Margin_Cima + Margin_Baixo. POSICIONAMENTO CSS O CSS possui propriedades que permitem que você posicione elementos. Também permite que você ordene os e especifique o que acontecerá se o conteúdo for mais do que o tamanho do elemento. As proriedades top, bottom, left e right auxiliam o posicionamento de elementos. POSICIONAMENTO ESTÁTICO É definido pela propriedade: position: static;. Elementos HTML são posicionados de forma estática automaticamente. Um elemento posicionado estaticamente será sempre posicionado de acordo com o fluxo da página. Elementos posicionados estaticamente não são afetados pelas propriedades top, bottom, left e right. POSICIONAMENTO FIXO É definido pela propriedade: position: fixed;. Um elemento com posicionamento fixo é relativo à janela do navegador. Ele não irá se mover, mesmo que utilize scroll na janela do navegador. div.posicionamento_fixo { position: fixed; top: 15px; right: 5px; } Elementos com posicionamento fixo são removidos do fluxo normal da página. O documento e outros elementos irão se comportar como se o elemento com posicionamento fixo não existisse. Elementos com posicionamento fixo podem sobrepor outros elementos. 21
22 POSICIONAMENTO RELATIVO É definido pela propriedade: position: relative;. Um elemento com posicionamento relativo é relativo ao seu posicionamento no fluxo normal da página. div.posicionamento_relativo { position: relative; top: 20px; } O conteúdo de um elemento com posicionamento relativo pode ser movido e sobrepor outros elementos, mas o espaço reservado para este elemento no fluxo normal da página é preservado. POSICIONAMENTO ABSOLUTO É definido pela propriedade: position: absolute;. Um elemento com posicionamento absoluto esta relacionado com o primeiro elemento pai que tenha um posicionamento diferente de estático. Se não houver nenhum, ele toma o elemento <html> como referência. div.posicionamento_absoluto { position: absolute; width: 100%; top: 0px; right: 150px; } Elementos com posicionamento absoluto são removidos do fluxo normal da página. O documento e outros elementos irão se comportar como se o elemento com posicionamento absoluto não existisse. Elementos com posicionamento absoluto podem sobrepor outros elementos. SOBREPONDO ELEMENTOS É definido pela propriedade: z index: 1;. Quando elementos são posicionados fora do fluxo normal da página, eles podem ser sobrepostos por outros elementos. A propriedade z index especifica a ordem dos elementos (qual elemento fica na frente ou atrás de outro elemento). O elemento com o maior valor será o da frente. 22
23 ALINHANDO ELEMENTOS Além das propriedades de posicionamento, também podem alinhar elementos utilizando a propriedade margin, na qual podems especificar a distância de espaçamento em unidades de medidas ou alinhar dinamicamente ao centro especificando uma largura ao elemento e deixando as margens laterais automáticas. Exemplo de alinhamento dinâmico ao centro: div#container { width: 960px; margin: 0 auto; } DIMENSIONAMENTO Elementos podem ter altura e largura especificados: heigh Define a altura de um elemento. max height Define a altura máxima de um elemento. min height Define a altura mínima de um elemento. width Define a largura de um elemento. max width Define a largura máxima de um elemento. min width Define a largura mínima de um elemento. FORMATANDO TEXTOS COR É definido pela propriedade: color: #ff0000;. ALINHAMENTO É definido pela propriedade: text align: center;. Pode assumir os valores de alinhamento padrão de texto: left, right, center e justify. DECORAÇÃO É definido pela propriedade: text decoration: none;. Pode assumir os seguintes valores: overline, underline, line through, blink e none. TRANSFORMAÇÃO É definido pela propriedade: text transform: uppercase;. Pode assumir os seguintes valores: uppercase, lowercase e capitalize. INDENTAÇÃO É definido pela propriedade: text indent: 25px;. 23
24 FORMATANDO FONTS TIPO É definido pela propriedade: font family: verdana. ESTILO É definido pela propriedade: font style: italic. Pode assumir os seguintes valores: italic, oblique e normal. TAMANHO É definido pela propriedade: font size: 12px. PESO É definido pela propriedade: font weight: bold. Pode assumir os seguintes valores: normal, bold, bolder, lighter e valores numéricos de 100 a 900 sendo de 100 em 100 unidades: 100, 200, 300, 400, etc. ESTILIZANDO FUNDOS COR É definido pela propriedade: background color: #ff00ff;. IMAGEM É definido pela propriedade: background image: url( imagem.gif );. REPETIÇÃO É definido pela propriedade: background repeat: no repeat;. Pode assumir os seguintes valores: no repeat, repeat x e repeat y. POSICIONAMENTO É definido pela propriedade: background position: top left;. Pode assumir os seguintes valores: top, bottom, center, left e right. ESTILIZANDO LINKS Links podem ser estilizados com qualquer propriedade CSS (exemplo: fontfamily, font size, text decoration, background color, etc), porém o CSS possui alguns seletores personalizados para estilizar estados de links como: links visitados, links ativos, etc. São quatro os estados que um link pode assumir: a:link Um link normal, ainda não visitado. a:visited Um link já visitado pelo usuário. a:hover Um link quando o mouse está em cima dele. a:active Um link quando está sendo clicado. 24
25 ESTILIZANDO LISTAS IMAGEM É definido pela propriedade: list style image: url( item_lista.gif ). POSIÇÃO É definido pela propriedade: list style position: inside. Pode assumir os seguintes valores: inside e outside. TIPO É definido pela propriedade: list style type: square;. FLUTUANDO ELEMENTOS É definido pela propriedade: float: left;. O CSS tem uma propriedade que permite fazer com que elementos flutuem (saiam do fluxo normal da página). Elementos podem flutuar somente à direita e à esquerda. Elementos anteriores ao elemento flutuante não serão afetados, porém elementos após o elemento flutuante serão posicionados automaticamente em torno do elemento flutuante. Exemplo: se uma imagem flutua para a direita, o texto que vem logo abaixo desta imagem irá flutuar para sua esquerda. Exemplo: img { float: left; } Há uma propriedade que torna possível limpar os espaços laterais aos elementos flutuantes caso não deseje que o conteúdo seguinte seja posicionado ao seu lado. Esta propriedade é a clear, que pode assumir os seguintes valores: left, right ou both. Se não quisermos que nada fique à direita de nossa imagem flutuando à esquerda utilizamos o clear da seguinte forma: img { float: left; clear: right; } 25
26 CSS DISPLAY Esta propriedade define como e se um elemento será exibido na página. Os principais valores assumidos são: none, inline e block. Com esta propriedade podemos esconder um texto na exibição da página: h2 { display: none; } 26