Css

Desenvolvida exclusivamente para o Apostilando.com por Marcos Paulo Furlan

1

ÍNDICE ÍNDICE ..................................................................... .......................................................................................................................................... ..................................................................... 2 HTML ............................................................................................................................................. ............................................................................................................................................. 5

XHTML ........................................................................................................ 5 Como se cria um documento HTML ............................................................... 6 Tags ou comandos HTML ........................................................................... 7 Estrutura Básica ............................................................................................. 8 Comentários .............................................................................................. 10 Parágrafos e quebras de linha ...................................................................... 10 O Comando
....................................................................................... 10 Alinhando parágrafos ................................................................................ 11 O Comando
..................................................................................... 11 O Comando
.................................................................................... 11 Alterando o formato de linha de separação........................ ............ ......................... ....................... .......... 11 USANDO IMAGENS COMO LINHAS SEPARADORAS .......................... ............. ............... 12 DIV ............................................................................................................ 12 blockquote ................................................................................................. 12 Estilos de Texto e Fonte ............................................................................... 12 Alterando o tamanho da fonte ................................................................... 13 Size ........................................................................................................... 13 Face .......................................................................................................... 13 Color.......................................................................................................... 13 Cabeçalhos ................................................................................................... 14 Alinhando cabeçalhos ............................................................................... 14 Listas ............................................................................................................ 15 Listas Ordenadas ...................................................................................... 15 Listas Não ordenadas ............................................................................... 16 Lista de Definição ...................................................................................... 16 Imagens ........................................................................................................ 17 urls e links ..................................................................................................... 19 URL ........................................................................................................... 20 Criando um Link com Arquivos Locais ...................................................... 20 Usando uma Imagem como Hiperlink ....................................................... 20 Vinculando Arquivos de outros diretórios ......................... ............ .......................... ......................... ............ 21 CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA .............................. ...................... ........ 21 Criando uma Âncora ................................................................................. 21 Enviando E-Mail diretamente da Página HTML ........................................ 21 Definindo Destinos .................................................................................... 21 TABELAS ...................................................................................................... 22 Elementos básicos de tabelas ...................................................................... 22 Parâmetros ................................................................................................ 23 Parâmetros do elemento .......................................................... 23 Parâmetros do elemento ................................................................. 24 Parâmetros dos Elementos Trata-se de um elemento opcional que define o título da tabela, e deve constar entre as marcas que definem a tabela, mas separado das marcas que definem linhas e colunas. Sem parâmetros, o título á apresentado acima da tabela e centralizado. ~~...~~ Table Row ou Linha de tabela Este é o elemento utilizado na definição de linhas de tabelas. Tabelas são definidas em linhas, sendo as linhas compostas de células. O número de linhas de uma tabela corresponde ao número de . Table Data ou Dados de Tabela Marcas que delimitam as células que compõem as linhas, e assim sendo devem estar inseridas entre as marcas de linhas. Uma célula pode conter tudo

22

o que normalmente consta do corpo de um documento HTML – Links, referências a imagens, textos, e até tabelas. O alinhamento padrão de uma célula é à esquerda horizontalmente e centralizado verticalmente, e caso o número de células varie de uma linha para outra, as linhas com menos células são completadas à direita com células em branco. ~~Table Header ou Cabeçalho de Tabela Elemento que define células de cabeçalho. Células de cabeçalho têm características idênticas a células de dados definidas por~~
e ................................................ 24 META ............................................................................................................ 26

2

Informações específicas............................................................................ 26 Variações do comando meta......................... ............ .......................... .......................... ......................... .................. ...... 27 Multimídia ..................................................................................................... 27 Consideração no uso de multimídia .......................................................... 28 FOLHAS DE ESTILO ......................................................................... .................................................................................................................. ......................................... 28

Versões da CSS ........................................................................................ 28 CSS - 1 ...................................................................................................... 28 CSS – Position (CSS-P) ............................................................................ 29 CSS – 2 ..................................................................................................... 29 CSS – 3 ..................................................................................................... 29 Regras da CSS ......................................................................................... 29 Incluindo CSS no Documento ................................................................... 30 Incluindo a CSS em uma página WEB ......................... ............ .......................... .......................... ................ ... 31 Incluindo a CSS em um site da WEB ........................................................ 32 Principais atributos de uma folha de estilo ......................... ............. ......................... ....................... .......... 33 Definindo classes ...................................................................................... 35 Definindo IDS ............................................................................................ 35 Definindo TAGS dentro do contexto ......................... ............ .......................... ......................... .................... ........ 36 Definindo a CSS para impressão .............................................................. 37 Definindo Quebras de página para a impressão ......................... ............ .......................... ............... 38 Controles de Texto .................................................................................... 38 Ajustando as Entrelinhas........................................................................... 39 Definindo Segundo Plano .......................................................................... 39 Bordas ....................................................................................................... 40 Envolvendo um elemento elemento com texto ......................... ............ .......................... ......................... .................. ...... 40 Posicionamentos ....................................................................................... 41 Posicionamento Estático ........................................................................... 41 Posicionamento Relativo ........................................................................... 41 Posicionamento Absoluto .......................................................................... 42 Posicionamento 3D ................................................................................... 42 Regras, declarações e seletores ............................................................... 42 Múltiplas declarações e seletores ............................................................. 43 Comentários e instruções .......................................................................... 44 Valores ...................................................................................................... 45 Herança ..................................................................................................... 46 Como incluir estilos em uma página ............................................................. 47 Classes e IDs ................................................................................................ 50 Links (pseudo-classes e pseudo-elementos) ......................... ............. ......................... ....................... .......... 51 Fontes ........................................................................................................... 51 font-family .................................................................................................. 52 font-size ..................................................................................................... 53 font-style e font-weight .............................................................................. 55 font-variant ................................................................................................ 56 text-transform ............................................................................................ 56 text-decoration .......................................................................................... 57 text-align e vertical-align............................................................................ 58 text-indent ................................................................................................. 58

3

line-height .................................................................................................. 59 letter-spacing ............................................................................................. 59 Propriedade Color ......................................................................................... 59 background-color ...................................................................................... 60 background-image .................................................................................... 60 Propriedades de Classificação ..................................................................... 63 display ....................................................................................................... 63 white-space ............................................................................................... 63 list-style ..................................................................................................... 63 Blocos ........................................................................................................... 64 margin e padding ...................................................................................... 65 border-width .............................................................................................. 66 border-color ............................................................................................... 67 border-style ............................................................................................... 68 border ........................................................................................................ 69 width e height ............................................................................................ 69 float ........................................................................................................... 69 clear .......................................................................................................... 70 Posicionamento ............................................................................................ 70 position, top e left ...................................................................................... 70 z-index ....................................................................................................... 70 visibility ...................................................................................................... 71 HTML 5........................................................................................................................................ 71

Exemplo de um código HTML5 ................................................................. 71

4

HTML HTML (acrônimo para a expressão inglesa Hypertext Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.

XHTML O XHTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML, baseada em XML. Combina as tags de marcação HTML com regras da XML. Este processo de padronização tem em vista a exibição de páginas Web em diversos dispositivos (televisão, palm, celular, etc). Sua intenção é melhorar a acessibilidade. O XHTML consegue ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as máquinas. O HTML não consegue esta implementação. No entanto, não existem muitas diferenças entre o HTML e o XHTML. Para verificar se uma página XHTML está bem construída, o melhor método é validar o código através de uma aplicação Web disponibilizado pela organização W3C. A Recomendação XHTML original da W3C, XHTML 1.0, foi simplesmente uma reformulação do HTML 4.01 em XML. Existem três diferentes "DTDs" de XHTML 1.0, cada qual com equivalência a uma versão em HTML 4.01. •

•

•

XHTML 1.0 Strict é o mesmo que HTML 4.01 Strict, mas segundo regras de sintaxe XML. XHTML 1.0 Transitional é o mesmo que HTML 4.01 Transitional, mas segue as regras de sintaxe XML. Ele suporta tudo encontrado no XHTML 1.0 Strict, mas também permite o uso de vários elementos e atributos que são julgados presencionais, para facilitar a transição de HTML 3.2 e mais recentes. Isso inclui , , , e . XHTML 1.0 Frameset: é o mesmo que HTML 4.01 Frameset, mas segundo as regras de sintaxe XML. Ele permite a definição de um

5

frameset HTML, uma prática comum em versões de HTML anteriores ao HTML 4.01. A mais recente Recomendação XHTML da W3C é o XHTML 1.1: Module-based XHTML, que é uma reformulação do XHTML 1.0 Strict, com pequenas modificações, usando alguns módulos de um conjunto definido em Modularização de XHTML[1], uma Recomendação W3C que cria uma modularização de frames, um padrão de módulos, e várias outras definições. Todas as ferramentas depreciadas de HTML, como elementos presencionais e framesets, e até mesmo os atributos lang e o atributo de âncoras name, que ainda eram permitidos no XHTML 1.0 Strict, foram removidos desta versão. A apresentação é controlada puramente pelas Folhas de Estilo em Cascata (CSS). Esta versão também permite suporte à marcação rubi, necessária para línguas do Extremo Oriente (especialmente CJK). Além da Modularização de XHTML permitir pequenas ferramentas XHTML serem reutilizadas por outras aplicações XML de uma maneira bem definida, e que o XHTML seja estendido para alguns propósitos, XHTML 1.1 adiciona o conceito de um documento "estritamente conformado": esses documentos definidos nos módulos requeridos para XHTML 1.1. Por exemplo, se um documento é estendido para usar o módulo XHTML Frames (frameset), ele também pode ser descrito como XHTML 1.1, mas não estritamente conforme o XHTML 1.1. Ao invés disso, ele deve ser descrito como um XHTML Host Language Conforming Document[2], se a ferramenta for relevante e necessária. Como se cria um documento HTML

Uma página Web é composta de textos e comandos especiais (tags). Assim como qualquer linguagem, o programador deve escrever o código-fonte seguindo as regras da linguagem. Esse código-fonte é posteriormente interpretado pelo browser, que se encarregará de executar os comandos (tags) do código para formatar e acessar recursos da Web. O código fonte pode ser escrito usando-se o mais simples dos editores de texto. Até o programa Bloco de Notas pode ser usado para esta tarefa. Mas

6

existem editores WYSIWYG (What you see is what you get, ou o que você vê é o que realmente obtém) como exemplo podemos citar o Dreamweaver. Existem ainda editores não WYSIWIG, onde você tem que construir o código, mas ele completa muitos comando, como exemplo podemos citar o Sothink HTML Editor (disponível na pasta do Dreamweaver), e na própria Internet existem vários destes editores gratuitos.

Tags ou comandos HTML As TAGS normalmente são especificadas em pares, delimitando um texto que sofrerá algum tipo de formatação. As TAGS são identificadas pelo sinais < > ou . Entre os sinais <> são especificados os comandos propriamente ditos. No caso de tags que necessitam envolver um texto, sua finalização deve ser feita usando-se a barra de divisão / , indicando que a TAG está finalizando a marcação de texto. Os principais elementos de página HTML são, títulos, textos, parágrafos, imagens e links, responsáveis pela chamada de outras páginas para a tela: Título: É o texto que aparece na barra de título do browser. Imagem: São figuras, desenhos e fotos usados para ilustrar a página.

7

Texto: É a informação mais comum dentro de uma página. Pode ser formatado através de comandos. Link: É um trecho que aparece destacado do restante do texto, normalmente sublinhado e com outra cor. Ao clicar no Link, o browser acessa outra região da página atual ou uma página localizada em qualquer lugar na Internet. Uma figura também pode ser usada como link, ou seja, clicando na figura saltamos para outro local. Cabeçalho: São linhas de texto com tamanhos especiais. Existem seis tamanhos de cabeçalhos. Estrutura Básica A estrutura básica de um documento HTML é a seguinte:

Título do Documento Aqui deverá ser digitado e criado a maioria dos itens que irão aparecer em sua Home Page Vamos ver um pouco sobre os elementos básicos do HTML: : Indicam respectivamente o início e o fim do documento. Todo o resto deve estar entre estas marcas. : Delimitam a seção de cabeçalho do documento. Trata-se da primeira seção do documento. : Indicam o título do documento, que será apresentado na barra superior do browser. Estas marcas devem constar da seção de cabeçalho. : Corpo do documento. Entre estas marcas estará o conteúdo a ser apresentado, textos, cores, imagens, etc. Este elemento pode conter cinco parâmetros opcionais:

8

BACKGROUND: configura especificar uma imagem como fundo da página. EX. configura uma página com a imagem fundo.gif como fundo. BGCOLOR: Configura a cor de fundo da página. EX: configura uma página com fundo branco (padrão). TEXT: configura a cor padrão do texto da página. EX: configura uma página com texto em cor preta. (padrão). LINK, ALINK, VLINK: configura as cores dos links da página. ALINK configura a cor do link ativo, isto é quando é clicado, e VLINK configura a cor de um link já visitado. EX: configura uma página com links azuis, links ativos vermelhos e links visitados roxos. Esta estrutura inicial é simples, no entanto existem detalhes que devem ser respeitados: Todas as marcas apresentadas são do tipo início-fim, ou seja, funcionam em pares. Em cada documento HTML só deve haver uma marca de cada tipo acima. Existe uma ordem seqüencial lógica entre as marcas. Estes detalhes devem ser respeitados, senão o browser não conseguirá apresentar o documento. Como HTML não é uma linguagem de programação, você não será avisado de erros que tenha cometido na edição do seu documento. Criando o primeiro documento HTML Este é o meu primeiro documento em HTML Agora no corpo do texto vou digitar o meu primeiro texto em Html, no momento não usarei nenhuma formatação especial aqui dentro.

9

Comentários Podemos também acrescentar comentários ao nosso código HTML, estes comentários não aparecem para no navegado e somente no código, são representados pela seguinte TAG , finaliza o comentário. São utilizados para ocultar scripts dentro do código Html, pois caso o script não possa ser processado o mesmo será ignorado pelo navegador. Caracteres especiais Existem caracteres que não podem ser obtidos através de teclado. Eles podem ser inseridos em sua página através da especificação de um código especial que o browser interpreta e substitui por um caractere específico. Esses códigos podem ser obtidos utilizando-se uma nomenclatura definida pela norma ISO. Alguns dos símbolos mais utilizados no HTML é o que corresponde ao espaço do teclado, já que na HTML ele considera apenas um espaço. Para uma tabela mais completa visite o link http://www.w3.org/TR/html401/sgml/entities.html Parágrafos e quebras de linha

Ao contrário dos editores de texto comum, nos quais você insere uma quebra ou avanço de linha toda vez que pressiona a tecla ENTER, em um programa HTML é necessário colocar um comando específico para que o browser entenda que você deseja mudar de linha e iniciar uma nova linha ou começar um novo parágrafo. Existem dois comandos para criar quebras de linha e novos parágrafos. São os comandos
e

O Comando
Para forçar um novo parágrafo, ou seja, avançar uma linha em branco e iniciar o texto na segunda linha após o final do parágrafo anterior deve ser usado o comando
.

10

Alinhando parágrafos O Comando
inicia um novo parágrafo onde o texto é automaticamente alinhado pela margem esquerda da tela. Através do parâmetro ALIGN, pode-se mudar o alinhamento de forma que o texto do parágrafo inteiro fique centralizado ou alinhado à direita. Nesse caso, deve-se usar um par de comandos
envolvendo o parágrafo. ALIGN=CENTER ALIGN=RIGHT ALIGN=JUSTIFY ALIGN=LEFT

Centraliza o texto. Alinha pela margem direita Alinha pelas duas margens Alinha pela margem esquerda (padrão)

O Comando
O comando
insere uma linha em branco no seu local ou na linha seguinte à qual ele foi inserido, caso esteja no meio de uma linha de texto e não em seu final. O comando
tem como função avançar para a linha imediatamente após àquela em que ele se encontra, sem, contudo, deixar uma linha em branco.

O Comando
O comando
tem como finalidade inserir uma linha divisória na posição em que foi especificado. Seu uso é recomendado para criar uma divisão na página.

Alterando o formato de linha de separação As linhas criadas pelo comando
podem Ter o seu tamanho alterado pelos parâmetros SIZE e WIDTH. O parâmetro SIZE altera a espessura (altura) da linha, deixando-a mais grossa em função do valor especificado. Esse valor é expresso em pixels. A largura ou comprimento da linha é alterada pelo parâmetro WIDTH e pode ser expresso em pixels, sendo que, nesse caso, o tamanho da linha é fixo ou utiliza uma porcentagem relativa à largura da janela. Assim, seu tamanho varia

11

em função da largura da janela. Veja o código abaixo:

USANDO IMAGENS COMO LINHAS SEPARADORAS Em vez de usar o comando
como separador, podemos usar uma imagem com o comando . Assim como o comando HR, podemos usar os parâmetros WIDTH e HEIGHT para alterar o tamanho da imagem.

DIV A Tag
envolve uma área do texto ou divisão que pode receber parâmetros específicos de alinhamento, como é o caso de ALIGN, para alinhar o texto. Podemos envolver vários parágrafos com o elemento DIV

blockquote O comando Blockquote permite dar recuos de parágrafos aos parágrafos, e pode ser cumulativo Estilos de Texto e Fonte Assim como no editor de textos, você pode criar uma série de efeitos no texto, alterando a forma ou o tipo da fonte. Todos os comandos que alteram o estilo do texto são do tipo contêiner ou liga desliga, ou seja, precisam ser especificados em pares, marcando o início e fim do texto que sofrerá a

formatação. Os principais comandos de estilo de texto são: Comando

Sintaxe

Função

Negrito

Texto

Aplica o estilo Negrito

Itálico

Texto

Aplica o estilo Itálico

Sublinhado Texto Strong

Aplica o estilo sublinhado(Não funciona em alguns Browsers

Texto

Typerwriter Texto

Deixa o texto com espaçamento regular

12

Big

Texto

Aumenta a fonte e aplica negrito

Small

Texto

Sobrescrito ^Texto

Eleva o texto e diminui seu corpo

Subscrito

_Texto

Rebaixa o texto e diminui seu corpo

Pulsante

Texto funciona no IE 4.

Alterando o tamanho da fonte Um dos recursos de tratamento do texto mais interessantes da linguagem HTML é a possibilidade de alterar o tamanho, a cor e o tipo da fonte do texto utilizado. O comando responsável por isso é o comando , que é do tipo liga desliga.

Size O parâmetro size especifica o tamanho da fonte utilizada. Os valores permitidos vão de 1, o menor até 7, o maior. O padrão é 3. Se for especificado um número antecedido pelo sinal de adição ou de subtração, o tamanho da fonte atual será aumentado ou diminuído nesse valor. Por exemplo, se a fonte atual é 3 e for especificado o texto será exibido no tamanho 5. Se o valor for especificado sem sinal, a fonte será exibida no tamanho especificado.

Face Esse parâmetro permite que seja escolhida uma fonte diferente para o texto. Podemos especificar várias fontes, de maneira que, se o sistema não possuir a primeira opção, a segunda é carregada. Se não for encontrada nenhuma das fontes especificadas, o texto é exibido na fonte padrão.

Color Esse parâmetro especifica a cor do texto. Seu valor pode ser especificado no

13

formato hexadecimal, RGB ou através de um nome predefinido de cores como mostra a tabela abaixo: Cor

Código

Cor

Código

Aqua

#70DB93

Blue

#0000FF

Black

#000000

Cyan

#00FFFF

Fúcsia

#FF00FF

Gray

#C0C0C0

Green

#00FF00

Lime

#32CD32

Brown

#800000

Navy

#23238E

Olive

#808000

Red

#FF0000

Silver

#E6E8FA

Teal

#008080

White

#FFFFFF

Yellow

#FFFF00

Não exagere na quantidade cores e tamanho das letras do texto ou a sua página parecerá uma mensagem enviada por código. Cabeçalhos

Outra forma muito usada para mudar o tamanho da letra e aplicar um efeitos em textos é utilizando cabeçalhos. A linguagem HTML possui seis comandos de cabeçalho de
até
. Além do tamanho diferenciado, o comando cabeçalho insere uma linha em branco antes e depois da linha que contém o comando. Eles são perfeitos para criar títulos e iniciar seções dentro de uma página. O comando
possui o maior tamanho enquanto que
possui o menor tamanho de fonte.

Alinhando cabeçalhos Como padrão um cabeçalho gerado pelo comando é sempre posicionado no lado esquerdo da linha. Usando o parâmetro ALIGN pode-se centralizar ou ajustar o cabeçalho à direita da linha. Veja o código:

14

Alinhando Cabeçalhos
Cabeçalho sem alinhamento especial

Cabeçalho com alinhamento centralizado

Cabeçalho com alinhamento à direita
Listas Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definições (DL). Um detalhe interessante é que podem ser criadas listas aninhadas, ou seja, listas dentro de listas. A seguir, veremos as características

de cada umas delas.

Listas Ordenadas
...
são os elementos delimitadores de listas ordenadas (OL – Ordered Lists). A estrutura das listas ordenadas é bastante simples: entre os elementos de início e fim, os itens da lista são definidos pelos elementos
. Os itens são apresentados em linhas consecutivas e precedidos por uma numeração atribuída pelo paginador. O parâmetro opcional TYPE define como será o tipo de numeração de cada linha. Os tipos disponíveis são: “A” (A,B,...Z), “a”(a,b,...z), “I” (I,II,III, etc.), “i’ (i,ii,iii,etc), e “1” (1,2,3,etc). Se omitido, é utilizado o tipo padrão (1,2,3, etc). O parâmetro opcional START define a partir de que elemento a numeração deve se iniciar. Ele deve receber como valor um número indicando em que posição a contagem deve se iniciar.

15

Listas Não ordenadas
...
são os elementos delimitadores de listas sem ordenação (UL – Unordered Lists). A estrutura das listas sem ordenação é a mesma das listas ordenadas, sendo que, na apresentação, os itens serão precedidos por um marcador (bullet). No caso de listas sem ordenação aninhadas (listas dentro de listas), o paginador utilizará um marcador (bullet) diferente para os itens de cada lista. Como já foi visto acima
...
é o elemento que define um item de uma lista ordenada ou sem ordenação. O seu conteúdo pode ser texto, outras listas, imagens, links ,etc.

Lista de Definição
...
são as marcas que englobam uma lista de definições, ideais para a criação de glossários e coisas do gênero. A estrutura desta lista é diferente das outras, pois existem dois elementos – o termo a ser definido (DT), e a definição propriamente dita (DD). Na apresentação cada termo aparece em uma linha, e a respectiva definição na linha seguinte, deslocada para a direita. Listas de definição
Listas de definição

HTML

Hiper Text Markup Language

OL

Listas ordenadas com numeração.

UL

Listas sem ordenação

LI

16

Elemento da Lista

Listas não ordenadas combinadas
com Definição

Parâmetro do elemento OL

TYPE

START

Parâmetros do elemento IMG

SRC

ALT

BORDER

WIDTH

HEIGHT

VSPACE

HSPACE

uma

lista

de

Imagens

Você pode obter uma imagem através de uma cópia feita a partir de uma página da Internet, através de CDs ROMs, Scanners, etc. ou pode criá-las a

17

partir de um programa de imagens. O comando img Esse comando define a posição de uma imagem que aparece no corpo do documento. ALIGN=| “BOTTOM” | “TOP” | “MIDLE” SRC=”URL

É o nome da figura, se estiver no mesmo diretório do programa ou seu caminho completo.

ALT=”texto”

Exibe o texto quando o browser não encontra a imagem, ou uma legenda quando o cursor do mouse passa sobre ela mostrando o texto especificado.

ALIGN=”TOP” | Especifica o alinhamento da imagem “MIDLE” | “BOTTOM” relativamente à linha de texto onde é exibida. ALIGN=”LEFT” “RIGHT” WIDTH=”número”| ”número%”

| Especifica o alinhamento da imagem relativamente às bordas laterais da janela Esse parâmetro especifica a largura de exibição da imagem independentemente do seu tamanho físico. Se a imagem for maior ou menor do que o valor especificado, ela será esticada ou comprimida para caber no espaço especificado. Se for o colocado o sinal de porcentagem, ele é relativo à largura da janela.

18

HEIGHT=”número”

Especifica a altura de exibição da imagem independentemente de seu tamanho físico. Se a imagem for maior ou menor do que o valor especificado.

BORDER=”número”

Especifica em pixels a largura da borda da imagem. O valor zero remove a imagem

VSPACE=”número”

Determina em pixels o espaço que deve ser deixado em branco na parte de cima e na parte de baixo da imagem.

HSPACE=”número”

Determina em pixels o espaço que deve ser deixado em branco nas laterais da imagem

Com exceção do parâmetro SRC, todos os demais são opcionais. Portanto, para exibir uma imagem chamada foto.gif que esteja no mesmo diretório do programa deve ser especificado o seguinte comando: IMG SRC=”foto.gif” urls e links

Até agora você aprendeu como criar documentos interessantes, mas que poderiam ter sido criados em um processador de textos. O Principal atrativo da Internet é a criação de documentos com o conceito de hipertexto, ou seja , um documento que se liga a outros por meio de vínculos especiais chamados hyperlinks. Com esse conceito você pode criar documentos que façam referência a um endereço qualquer do computador ou da Web e permitam ao usuário acessar essas referências, não importando se elas estão em outra página WEB, no seu micro ou em qualquer servidor da rede.

19

URL A Internet usa uma nomenclatura específica para indicar o endereço de um documento. Chamada de Uniform Resource Locator (Localizador Universal de Recursos) ou URL, essa nomenclatura inclui três componentes. Ela deve conter o protocolo do documento, (como por exemplo http. Gopher ou WAIS), o endereço servidor e a localização do arquivo, usando a seguinte sintaxe: Protocolo://servidor.NomeDoArquivo http://www.apostilando.com/index.htm http: É o protocolo www.apostilando.com: É o nome do servidor index.htm: É o nome do documento que será acessado.

Criando um Link com Arquivos Locais Vincular um texto com uma página local é uma tarefa bastante simples. Você precisa apenas especificar o nome completo do arquivo que será chamado, utilizando o comando de âncora. Veja a sintaxe básica deste comando: caracteres Principais parâmetros: HREF=”URL”

NAME=”String”

Especifica o endereço do URL ao qual o link está associado. Pode ser usado dentro e fora do documento. Especifica o nome da seção de um documento à qual um link de hipertexto faz referência.

Usando uma Imagem como Hiperlink Você pode usar uma imagem como hiperlink envolvendo-a com o comando . Em vez de especificar um texto de hiperlink, você usa o comando para colocar a imagem.

20

Vinculando Arquivos de outros diretórios Você pode especificar o endereço de outros diretórios usando um esquema de caminhos parecido com DOS. Existe uma diferença entre esses caminhos. Na Web você deve inverter a barra de espaços, usando a barra / no lugar da barra \, para separar diretórios.

CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA Para dominar o uso do hipertexto, o programador em HTML deve conhecer bem o funcionamento do comando e dois de seus parâmetros da linguagem. Um é o , usado para criar o link em si, e o outro é o , que cria âncoras ou endereços de seções de um documento, permitindo seu endereçamento.

Criando uma Âncora Para interligar uma página, você precisa criar uma âncora (também chamado de indicador em alguns editores de HTML) no inicio de cada seção do documento. Essa âncora recebe um nome que será mencionado pelo link que acessará. Texto Opcional Iremos criar agora uma página Web com exemplos de links e âncoras : Neste código criamos primeiramente os links com as âncoras da página, e depois as âncoras, aproveitamos também e trabalhamos com inserção de imagens na página:

Enviando E-Mail diretamente da Página HTML Você pode acionar o programa padrão de e-mail diretamente de uma página HTML usando uma variação do comando , que usa a opção MAILTO no lugar da URL. Tire as suas dúvidas

Definindo Destinos Podemos também definir destinos para os nossos links,(recurso muito utilizado

21

em frames) através do parâmetro target: . E podem ser _self: Mesmo quadro, _top: página inteira, _blank: nova janela e _parent: quadro pai. TABELAS

Assim com as listas que nós já vimos, no HTML existem elementos específicos para a criação e formatação de tabelas. O recurso de tabelas é muito interessante e muito usado nas páginas Web. O conceito é o mesmo conhecido usualmente: ela tem linhas e colunas, e na interseção delas estão as células. Na linguagem HTML, você pode inserir nas células tudo o que normalmente faz parte do corpo de um documento, como textos, links, imagens, listas e até outras tabelas. Elementos básicos de tabelas

...
São as marcas que englobam a definição de uma tabela. Todas as demais marcas referentes a tabelas – linhas e células – somente serão consideradas se incluídas entre e
.
...
... ... , a não ser pelo alinhamento horizontal, que é centralizado, e pela utilização de fonte em Negrito.

Parâmetros Estes elementos básicos, entretanto, possuem alguns parâmetros que permitem um maior controle sobre alguns detalhes da apresentação da tabela.

Parâmetros do elemento BORDER A apresentação padrão de uma tabela é sem bordas. A presença do parâmetro BORDER indica justamente que deve ser desenhada uma borda em torno de cada célula da tabela. Pode ser usado para indicar a espessura da borda (em pixels), com BORDER=X. Exemplo:
BORDERCOLOR Permite que se coloque cores nas bordas de sua tabela e possui duas variações: bordercolorlight e bordercolordark, permitindo que se coloque duas cores de bordas em volta de sua tabela. WIDTH Especifica a largura da tabela, que pode ser definida em pixels ou em percentual referente à largura da janela. Caso não seja especificado, o próprio browser se encarrega de determinar a largura mais adequada, baseado nos textos inseridos nas células. Exemplo:
CELLSPACING

23

Define o espaço entra as células, ou seja, a largura das linhas de grade (as bordas que envolvem as células). É especificado em pixels. Exemplo:

CELLPADDING Determina, em pixels, o espaço entre o conteúdo e as bordas da célula. Exemplo:
ALIGN Configura o alinhamento horizontal da tabela em relação aos outros elementos da página. Pode conter os valores LEFT (esquerda), CENTER (centro) ou RIGHT( direita). Este parâmetro não funciona em alguns browsers. BGCOLOR Define a cor de fundo da tabela.

Parâmetros do elemento ALIGN Configura o alinhamento horizontal dos elementos contidos nas células de uma linha. Pode conter os valores LEFT, CENTER OU RIGHT. Se omitido, o alinhamento é à esquerda para as células de dados (

), e centralizado para células de cabeçalho ( ). VALIGN Define o alinhamento vertical dos elementos contidos nas células de uma linha. Pode conter os valores TOP(topo), MIDLE(meio) ou BOTTOM (fundo). Se omitido, o alinhamento é ao meio. BGCOLOR Define a cor de fundo da linha.

Parâmetros dos Elementos e ALIGN Configura o alinhamento horizontal dos elementos contidos na célula. Pode conter os valores LEFT, CENTER OU RIGHT. Se omitido, o alinhamento é à esquerda para as células de dados ( ), e centralizado para células de cabeçalho ( ).

24

VALIGN Define o alinhamento vertical dos elementos contidos na célula. Pode conter os valores TOP (topo), MIDLE(meio) ou BOTTON(fundo). Se omitido, o alinhamento é ao meio. BGCOLOR Define a cor de fundo da linha. NOWRAP Quando este parâmetro encontra-se associado a uma célula, o browser entende que o texto dentro daquela célula não pode ser dividido em mais de uma linha. Este parâmetro deve ser utilizado com cuidado, para evitar colunas demasiadamente largas. COLSPAN Especifica o número de colunas de uma tabela a ser ocupado por uma célula. Deve ser utilizado para expandir uma célula horizontalmente. Se atribuirmos COLSPAN=2 a uma célula, ela ocupará o seu espaço e o espaço de mais uma célula para a direita, assim esta linha deverá possuir uma célula a menos que as demais, já que uma de suas células “vale”por duas. ROWSPAN Define o número de linhas a ser ocupado por uma célula. Deve ser utilizado para expandir uma célula verticalmente (para baixo). Ao atribuir ROWSPAN=2 para uma célula, diminuirá em 1 o número de células da linha de baixo. Vamos a um exemplo: Tabelas

bordercolorlight="#000080"

25

Título da Tabela

Texto1 Texto 2 Texto 3

Atenção: Além de criar tabelas para exibir dados como numa planilha, os elementos de tabelas são usados para formatar páginas de uma forma geral. Eles são usados para criar textos com elementos na tela de forma mais fácil, para delimitar áreas de uma página e diversas outras utilidades que você nem imagina. Por exemplo, podemos usar tabelas para garantir que o texto fique na posição A da tela e a imagem fique na posição B, independente da resolução de vídeo do visitante de sua página. Utilizando uma tabela de tamanho definido, podemos evitar que a página fique grande demais para resoluções de 640x480, podemos simular colunas de texto, entre outras aplicações. META

O comando META é um dos comandos pouco explorados da linguagem HTML. Contudo, é responsável por importantes aspectos de uma página HTML. Através dele, podemos criar documentos dinâmicos, informações especificas que serão usadas pelo servidor, em resposta a uma solicitação do usuário, ou pelos mecanismos de busca na Internet.

Informações específicas Esse comando das linguagem HTML pode ser usado para criar metainformação ou variáveis, e seus conteúdos descrevem características do

26

documento HTML, como o nome do autor, data de vencimento ou criação do documento, palavras-chave, etc. <META HTTP-EQUIV=resposta CONTENT=descrição NAME=descrição URL=url> O comando META deve ser especificado entre os comandos .

Variações do comando meta Usar o recurso do autocarregamento é indicado quando você deseja exibir alguma informação inicial e depois outra informação. Por exemplo o usuário acessa uma página que exibe informações sobre a empresa, depois de um tempo carrega outra página. Isso é possível da seguinte forma: <META HTTP-EQUIV=”Refresh” CONTENT=”5 ; URL=arquivo.htm”> Outro grande uso do comando META é para que possa ser usado para as consultas em mecanismos de busca, ou seja os mecanismos verificam no comando META de sua página qual é a sua descrição e quais são as palavras chaves do site. <meta name="description" content="Site sobre Informática"> <meta name="keywords" content="Photoshop, Flash, Fireworks, Dreamweaver, HTML"> Podemos também especificar o autor e programa gerador do código HTML através do comando META <meta name="author" content="Marcos Paulo Furlan"> <meta name="generator" content="HTML-Kit"> Multimídia

O principal elemento de sucesso da Internet é o hiperlink. Que permite a criação de documentos com ligações para outros contidos em qualquer computador ligado à Internet. A maioria dos usuários que acessa a Internet faz isso a partir de ambientes gráficos, como o Windows, e conhecendo o Windows todos sabemos de sua capacidade em trabalhar com multimídia. Esse é o

27

propósito deste capítulo, vamos aprender a trabalhar com os elementos multimídia em nossas páginas. Os principais elementos multimídia para uma aplicação são: Fotos ou imagens estáticas Animação Áudio Vídeo

Consideração no uso de multimídia O grande inimigo da utilização de multimídia é o mesmo relacionado com as imagens, a velocidade de transferência de informações via Internet. Se uma imagem de 70Kb pode levar vários segundos, ou até mesmo minutos para ser carregada imagine a execução de um clipe de vídeo com mais de 1MB. Os vídeos vão se popularizar mais quando a Internet a cabo se tornar mais acessível.

FOLHAS DE ESTILO A CSS traz para a WEB a mesma conveniência de “um só lugar” para definir os estilos que estão disponíveis na maioria dos editores de texto. Você pode definir uma CSS em uma localização central para afetar a aparência das tags HTML em uma única página da WEB ou em todo um site da WEB. Embora a metodologia da CSS funcione com a HTML, não é HTML. Em vez disso, a CSS é um código separado que amplia as capacidades da HTML, permitindo que você redefina o modo como as tags HTML funcionam.

Versões da CSS A CSS evoluiu nos últimos anos sob a orientação do W3C ( www.w3.org/Style/CSS/ ) até a sua versão atual a 2(dois). Embora a maioria dos browsers modernos suporte a versão mais recente, os browsers mais antigos suportam as combinações das versões antigas da CSS. Elas são:

CSS - 1 O W3C lançou a primeira versão oficial da CSS em 1996. Essa primeira versão

28

incluía a capacidade de núcleo associada às CSS, tais como a capacidade de formatar texto, definir fontes e margens.

CSS – Position (CSS-P) Os criadores da WEB precisavam de uma forma de posicionar os elementos na tela de forma precisa. A CSS 1 já havia sido lançada e a CSS-2 ainda estava distante, de modo que a W3C lançou uma solução intermediária: A CSSPositioning. Esse padrão de destinava a ser uma proposta que seria discutida pelas várias partes envolvidas antes de ele ser oficializado. A Firefox, Opera, Chrome e a Microsoft assumiram essas propostas, porém, e incluíram as idéias preliminares nas versões 4 de seus navegadores. Embora a maioria dos recursos básicos sejam suportados em ambos os browsers como o nome de “marca” diversos recursos forma deixados de fora.

CSS – 2 A versão mais recente da CSS surgiu em 1998. O nível 2 inclui todos os atributos das duas versões anteriores mais uma ênfase maior na facilidade de acesso e na capacidade de especificar CSSs especificas de mídia. A partir do IE e Firefox, Opera, Chrome 6 suportam CSS 2.

CSS – 3 Este padrão ainda está em desenvolvimento, e mesmo após o lançamento geralmente leva alguns anos para que os navegadores suportem o padrão. Sem dúvida, a nova adição será o Scalable Vector Graphics (SVG). Esse é um formato que permite incluir formas (linhas, círculos, curvas e outras), como vetores e não bitmaps, levando o poder dos gráficos baseados no vetor e na tipografia à WEB.

Regras da CSS O melhor da folha de estilo em cascata é que ela é incrivelmente fácil de configurar. Não exige plug-ins ou softwares diferente – apenas regras. Podemos definir regras que dizem a uma tag HTML especifica o seu conteúdo, ou pode criar regras genéricas e, em seguida, aplicá-las às TAGS como quiser. Existem três etapas na regras da CSS. Seletor HTML: A parte de texto de uma TAG HTML se chama seletor. Exemplo:

29

p {font: bold 12pt times;} Classe: Uma classe é uma regra de “agente livre” que pode ser aplicada a qualquer tag HTML de acordo com a sua vontade. Você pode dar à classe o nome que quiser. Uma classe é o tipo de seletor mais versátil. Exemplo: .minhaclasse{font bold 12pt times;} ID: As regras de ID funcionam como os seletores de classe, porque podem ser aplicadas, a qualquer Tag HTML. Os seletores de ID, porém, geralmente são aplicados somente uma vez na página a determinada TAG HTML para criar um objeto para ser usado com uma função JavaScript. Exemplo: #objeto{font bold 12pt times;}

Incluindo CSS no Documento Embora a CSS signifique nunca ter que definir a aparência de cada tag individualmente, você ainda tema liberdade de definir os estilos dentro das TAGS individuais. Isso é particularmente útil para substituir cada um dos outros estilos que estão definidos para a página. Veja o exemplo abaixo: CSS

A Bruxa de Blair

O Filme

o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme

30

Incluindo a CSS em uma página WEB A principal utilização da CSS é para definir as regras de todo um documento. Para fazer isso, você deve inclui as regras de estilo no título do documento aninhado dentro de um contêiner de estilo. Embora os resultados do acréscimo de estilo dessa forma possam parecer idênticos ao acréscimo dos estilos diretamente em uma TAG HTML, a colocação dos estilos em uma localização comum permite alterar os estilos de um documento a partir de um único lugar. Veja o mesmo exemplo acima como ficaria: CSS

A Bruxa de Blair

O Filme


31

Incluindo a CSS em um site da WEB Um dos benefícios da CSS é a possibilidade de criar uma folha de estilo para ser usada não apenas em um único documento HTML, mas através de todo um site da WEB. Você pode aplicar essa folha de estilo externa a uma centena de documentos HTML. O estabelecimento de um arquivo de CSS externo é um processo de duas etapas. Em primeiro lugar, configure as regras em um arquivo de texto. Em seguida, configure as regras em um arquivo e vincule ao seu documento HTML, o arquivo que contém as formatações deve possuir a extensão CSS. Veja o mesmo exemplo: Arquivo CSS: body{background-color:black;} h1{color:red;} h2{color:yellow;} p{color:white;} Arquivo HTML CSS

32

A Bruxa de Blair

O Filme


Principais atributos de uma folha de estilo Atributos de Posição Elemento

Definição

Exemplo de Atributo

Position

Tipo de Posicionamento

Absolute ou relative

Top

Distância Vertical para o canto 10in, 150px, 30 cm superior esquerdo do quadro

Left

Distância Horizontal para o 10in, 150px, 30 cm canto superior esquerdo do quadro

Width

Largura do Quadro

10in, 150px, 30 cm

Height

Altura do Quadro

10in, 150px, 30 cm

Z-index

Camada usada sobrepondo quadros

Padding

Margem entre as bordas do 2,5,10,17 quadro e o texto interno ao quadro

Margin

Margem entre as bordas do 1,2,3,4 quadro e o texto externo ao

quando 1,2,3,4

33

quadro Border-width Largura da borda do quadro

Thin, medium, thick

Border-color

Cor da borda do quadro

Yellow,#00FFAA

Border-style

Estilo da Borda

None,dotted,dashed,s olid,double

Broder-width Largura da borda do quadro

Thin,medium,thick

Atributos de Fontes Elemento

Definição

Exemplo de Atributo

Font-family

Fonte que será usada para Helvetica, mostrar o texto Courier

Font-size

Tamanho da Fonte

12pt,10cm, 5in

Font-style

Estilo

Normal, italic

Font-weight

Peso da fonte

Bold, lighter,100,300

Arial,

Atributos e Cores de Fundo da Página Elemento

Definição

Exemplo de Atributo

Color

Cor do texto

Marrom,#ffffcc

Backgrouncolor

Cor de fundo

Marrom,#ffffcc

Background- Imagem de fundo image

Imagem.gif

Atributos de Texto Elemento

Definição

Exemplo de Atributo

Word-spacing Espaçamento entre as palavras 1em, 5pt Letterspacing

Espeçamento entre as letras

0,1em, 0,1cm, 2 pt

Textdecoration

Decoração de texto

None, underline, blink

Vertical-align Alinhamento vertical

Middle, top, sub, super

34

Text-align

Alinhamento Horizontal

Left,center, right

Text-height

Altura da Linha

200%, 1.2, 20pt

Definindo classes O uso de seletor de classes permite configurar um estilo independente que você pode aplicar em seguida a qualquer TAG HTML Para definir um seletor de classe digite um ponto (.) e um nome de classe. Em seguida, abra a sua definição com uma chave ({) O nome da classe pode ser o que você quiser, desde que use letras e números. Por exemplo podemos criar uma classe chamada .copy{. Ela é uma classe independente e você pode usá-la com qualquer TAG HTML, com uma condição: as propriedades definidas para a classe devem funcionar com o tipo de tag com a qual você a usa. Para aplicar a sua classe a uma tag HTML inclua class=”nome” na tag na qual você deseja aplicar a classe. Exemplo:
...
.

Definindo IDS Assim como o seletor de classe, o seletor de ID pode ser usado para criar estilos exclusivos que são independentes de qualquer TAG HTML em particular. Assim sendo, eles podem ser designados a qualquer TAG HTML que se aplique. As regras de ID sempre começam com (#) e, sem seguida, o nome do ID. O nome pode ser uma palavra ou qualquer conjunto de letras ou números que você quiser. Digite as suas definições para essa classe separando-as com um ponto e vírgula. Você pode usar um ID com qualquer tipo de propriedade, mas o melhor uso para os seletores de ID é para definir os objetos exclusivos na tela. Um ID não funcionará até ser especificada com uma TAG HTML individual dentro de um documento. Exemplo: #area{color:red;margin-left:9em;position:relative;}
...
.

35

Definindo TAGS dentro do contexto Quando uma TAG é cercada por outra TAG, uma dentro da outra, são chamadas de tags aninhadas. Em um conjunto aninhado, a TAG externa é chamada de pai e a interna de filha. Digite o seletor HTML da TAG pai seguida por um espaço. Você pode digitar quantos seletores, HTML quiser para quantos pais e TAGS aninhadas diferentes tiver, mas o último seletor da lista é aquele que recebe todos os estilos da regra. Veja o exemplo abaixo: Tags Aninhadas
< Capitulo Anterior Próximo Capítulo >

Novo Capítulo

Teste de parágrafo Efeito curiosos

36

Definindo a CSS para impressão Quando a maioria das pessoas pensam em páginas WEB, pensa nessas páginas exibidas na tela. Entretanto, mais cedo ou mais tarde, a maioria das pessoas quer imprimir pelo menos algumas páginas da WEB. O que parece bem na tela nem sempre é bom quando impresso. A CSS permite dizer ao browser para usar folhas de estilo diferentes dependendo da página da WEB se destinar ao monitor do computador ou a impressora. Crie duas folhas de estilo (arquivos.css), uma otimizada para o uso em uma tela de computador e outra adaptada para a impressão. Veja os códigos abaixo: CSS para Tela: body{ color:white; font-family:Arial; background:black url(images/backarvore.jpg) no-repeat;} h1,h2{ font-weight:bold;} .cassea{ color:#999999;} CSS para Impressão: body{ color:black; font-family:Arial; h1,h2{ font-weight:bold;} .cassea{ color:#999999;} Código no HTML:

37

Midias Diferentes
Mídia de tela

O que pode ser visto na tela será diferente na impressão

Teste

Definindo Quebras de página para a impressão Um problema que você encontrará ao tentar imprimir um site da WEB são as quebras de página. Na verdade, uma página da WEB pode conter diversas páginas impressas. Assim sendo, o cabeçalho de uma seção pode aparecer na parte inferior de uma página e seu texto na parte superior da próxima página. Podemos forçar uma quebra de página ao imprimir uma página da WEB, para isso utilize: < TAG style=”page-break-before:always;”>.... Onde always Força a quebra de página antes do elemento. Auto  permite que o browser coloque as quebras de página.

Controles de Texto O Kerning se refere à quantidade de espaço que há entre as letras de uma palavra. Geralmente, quando há mais espaço entre as letras a facilidade de leitura é maior. Por outro lado, espaço de menos pode impedir a leitura, fazendo com que as palavras individuais apareçam menos distintas na página. Para definir o Kerning:

38

Letter-spacing: 2em. Um valor positivo para o espaçamento de letras inclui mais espaço na quantidade padrão; um valor negativo fecha o espaço. Podemos também ajustar o espaçamento entre as palavras. A inclusão de um pequeno espaço entre as palavras na tela pode ajudar a tornar o seu texto mais fácil de ler, mas espaço demais interrompe o caminho do olho do leitor na tela. Para definir estes espaçamento: Word-spacing: 8px;

Ajustando as Entrelinhas O espaço entre as linhas também podem ser aumentados para dar um efeito dramático, criando áreas de espaço em negativo no texto. Mas também podem ser usados para facilitar a leitura e inclusão de comentários em seu texto. Para definir o espaçamento entra linhas: Line-height:2; ou line-height:12px ou line-height:%

Definindo Segundo Plano Podemos usar a propriedade background para definir a imagem e a cor do segundo plano de toda a página ou a imagem e cor de segundo plano imediatamente atrás de cada elemento individual da página. Para definir o segundo plano iniciamos a digitação com a propriedade background seguida de dois pontos e em seguida dos valores de segundo plano: White  Digite um valor para a cor que você deseja para o segundo plano seguido de um espaço. Esse valor pode ser o nome da cor, um valor hexadecimal de cor ou um valor RGB. url(imagem/figura.jpg)  Para utilizar uma figura de fundo podemos definir a localização do arquivo. Alternativamente pode-se usar none em vez de url, ele instrui a browser a não utilizar uma imagem de segundo plano. Repeat Defina qual será o modo de repetição a ser utilizado eles podem ser: Repeat-x: Instrui o browser para repetir o gráfico de segundo plano na horizontal.

39

Repeat-y: Instrui o browser para repetir o gráfico de segundo plano na vertical. No-repeat: faz com que o gráfico de segundo plano apareça apenas uma vez. Fixed: Instrui para que a figura fique fixa ou seja não role com o site. Scroll: Instrui para que a imagem role junto com a tela. Right top: Digite dois valores separados por um espaço para especificar o lugar onde o segundo plano deve aparecer em relação ao canto superior esquerdo do elemento.

Bordas Para definir um atributo de borda para uma caixa simultaneamente a CSS fornece a propriedade border, você pode usar border para definir a largura, o estilo e/ou a cor. Também é possível definir a borda do elemento em cada lado da caixa individualmente. As principais propriedades para bordas são: border-width, border-style, bordercolor. Boder style

Border width

None

Thin

Dotted

Medium

Dashed

Tick

Solid

lenght

Double Groove Ridge Inset outset

Envolvendo um elemento com texto No inicio do desenvolvimento HTML, quando a capacidade de fazer o texto flutuar ao redor de um gráfico foi incluída, os designers de toda parte estavam maravilhados. A CSS levou este passo um pouco adiante, permitindo que o texto não apenas flutue ao redor do texto, mas também que flutue ao redor dos outros blocos de texto e do texto ao redor das tabelas, para isso usamos a

40

propriedade float. Inicie sua definição digitando a propriedade float seguida de dois pontos. A seguir digite uma palavra-chave para dizer ao browser o lado da tela no qual o elemento deve flutuar, e estas podem ser : right, left e none. Por exemplo Img{float:right;}

Posicionamentos Quando você define os atributos de uma tag HTML, por meio de um seletor em uma CSS, na verdade, você separa todo o conteúdo dentro de um contêiner daquela TAG como sendo um elemento exclusivo da janela. Em seguida é possível manipular esse elemento exclusivo por meio do posicionamento da CSS. Um elemento pode ter um de quatro valores de posicionamento – estático, relativo, absoluto ou fixo – embora apenas os três primeiros normalmente estejam disponíveis na maioria dos browsers. O tipo de posicionamento diz ao browser como ele deve tratar o elemento ao posicioná-lo na janela.

Posicionamento Estático Como padrão, os elementos são posicionados como estáticos dentro da janela, a menos que você os defina com os outros posicionamentos. Entretanto o posicionamento estático é diferente, porque um elemento estático não pode ser posicionado ou reposicionado explicitamente.

Posicionamento Relativo Um elemento definido como sendo posicionado relativamente fluirá até o seu lugar dentro da janela ou dentro de seu elemento pai, assim como o comportamento padrão de qualquer outro elemento da HTML – ou seja, ele aparece após tudo que está antes dele na HTML e antes de tudo que está após ele na HTML. Você pode mover um elemento posicionado relativamente a partir de sua posição natural na janela usando as propriedades top e left. Essa técnica é útil para controlar o modo como os elementos aparecem com relação aos outros elementos da janela.

41

Posicionamento Absoluto O posicionamento absoluto cria um elemento independente – um agente livre – separado do restante do documento, no qual você pode colocar qualquer tipo de conteúdo HTML que quiser. Os elementos que são definidos dessa forma são colocados em um ponto exato da janela por meio das coordenadas x e y. O canto superior esquerdo da janela ou de seu elemento contêiner é a origem.

Posicionamento 3D Apesar da área da tela ser bidimensional, os elementos que são posicionados podem receber uma terceira dimensão: uma ordem de empilhamento na qual um elemento se relaciona ao outro. Os elementos posicionados recebem números automáticos de empilhamento, a partir do 0 (zero)incrementalmente com 1,2,3 e assim por diante. Esse sistema é chamado de índice Z. O número de índice Z de um elemento é um valor que mostra sua relação 3D com os outros elementos da janela. Para definir o índice Z de um elemento, primeiro defina o posicionamento (ex: absolute) depois z-index:nº. css- cascading style sheet Uma folha de estilos é um conjunto de regras que informa a um programa, responsável pela formatação de um documento, como organizar a página, como posicionar e expor o texto e, dependendo de onde é aplicado, como organizar uma coleção de documentos. Na Web, os "parágrafos" são blocos marcados por descritores HTML como
,
, etc. Para fazer com que todos os blocos de textos marcados com
em um documento sejam exibidos em tamanho de 48 pontos, basta definir a regra: H1 {font-size: 48pt} dentro de uma "folha de estilos" aplicada ao documento. A folha de estilos pode ser um arquivo de textos simples com a extensão .css. Para vinculá-lo a uma página HTML, esta deve ter dentro do seu bloco ... o seguinte descritor:

Regras, declarações e seletores A estrutura dos estilos é bastante simples. Consiste de uma lista de regras.

42

Cada regra possui um bloco, entre chaves ({ e }), de uma ou mais declarações aplicáveis a um ou mais seletores. Um seletor é algo no qual se pode aplicar um estilo. Pode ser um descritor HTML, uma hierarquia de descritores ou um atributo que identifique um grupo de descritores. Uma folha de estilos consiste de uma ou mais linhas de regras, da forma: seletores { declarações } “As regras podem estar dentro de um arquivo de texto com extensão “.css" ou embutidas em um arquivo HTML (as várias maneiras de aplicar estilos a um arquivo HTML serão vistas na seção seguinte). Um exemplo de folha de estilos com apenas uma regra foi mostrada na seção anterior: H1 {font-size: 48pt} Nesta regra, H1 é o seletor e {font-size: 48pt} é o bloco da declaração, que estabelece um tamanho de fonte (prop. font-size) para todos os objetos (parágrafos) marcados com
. As declarações são feitas usando a sintaxe: propriedade: valor Observe que se usa dois-pontos (:) e não igual (=) para aplicar um valor a uma propriedade. Pode haver mais de uma declaração de estilo para um seletor. Isto pode ser feito em outro bloco. Cada linha acrescenta ou sobrepõe declarações feitas em linhas anteriores: H1 {font-size: 24pt} H1 {color: blue} H1 { font-size: 18pt } No trecho acima, o texto marcado com
será azul e terá tamanho de 18pt porque a regra H1 { font-size: 18pt } ocorreu depois da regra H1 { font-size: 24pt }.

Múltiplas declarações e seletores Várias declarações de estilo podem ser aplicadas de uma vez a um seletor. As declarações, então, precisam ser separadas por ponto-e-vírgula (;) : H1 {font-size: 18pt; color: blue; font-family: Caslon, serif}

43

BODY {background: navy; color: white} Os espaços em branco (espaços, novas-linhas e tabulações) são ignorados pelo browser na hora de interpretar uma folha de estilos e podem ser usados para melhorar a sua legibilidade. As duas linhas acima ficariam mais legíveis da forma: BODY {background : navy; color : white } H1 {color: blue; font-size: 18pt; font-family: Caslon, serif } Uma declaração só termina com uma fecha-chaves (}) ou com um ponto-evírgula (;). Dependendo da propriedade, esta pode ter vários valores separados por vírgulas ou valores compostos com as palavras separadas por espaços: P { font: 12pt "Times New Roman" bold } H2 { font-family: Arial, Helvetica, Sans-serif } As aspas devem ser usadas quando uma palavra que tem espaços precisar ser usada. No exemplo acima, o nome "Times New Roman" deveria ser tratado como o nome de uma fonte distinta, e não como três valores, o que ocorreria se as aspas não estivessem presentes. Assim como um seletor pode ter várias propriedades definidas para ele, um mesmo conjunto de propriedades pode ser aplicado a um grupo de seletores, separando-os com vírgulas: H1, H2, H3 { color: blue; font-size: 18pt; font-family: Arial, Helvetica, Sans-serif } Ao utilizar folhas de estilo, deve-se respeitar os elementos HTML que possuem descritores finais freqüentemente ignorados, como
, , etc. A falta do
pode causar o "vazamento" das declarações de estilo para fora do parágrafo em alguns browsers.

Comentários e instruções Além das regras, um arquivo CSS pode ter ainda comentários e instruções

44

(precedidas de @). No CSS1 apenas uma instrução é definida: @import. Ela é usada para que uma folha de estilos possa importar estilos de outro arquivo CSS através de uma URL. Os estilos importados sempre têm menos precedência que os locais (ou seja, os locais podem sobrepor os importados). A sintaxe da instrução @import é: @import url(url_da_folha_de_estilos) Não deve haver outras estruturas (a não ser comentários) na linha onde há uma instrução. Exemplos do uso de @import: @import url(../estilo.css) @import url(http://www.apostilando.com/estilo.css) Pode-se inserir trechos que serão ignorados pelo browser ao interpretar folhas de estilo usando blocos de comentário. Comentários em folhas de estilos são iguais a comentários em linguagens como Actionscipt: entre /* e */:

Valores Os valores que são aplicados às propriedades têm uma sintaxe que depende da propriedade que os usa. Propriedades que envolvem tamanho (tamanho de fontes, espaçamento, etc.) geralmente recebem valores que consistem de um número e uma unidade ou porcentagem. O sinal de porcentagem ou unidade deve estar junto ao número correspondente sem espaços. Ou seja, deve-se escrever font-size: 24pt e não font-size: 24 pt. Cores e arquivos externos podem requerer uma função para serem definidos. São duas as funções (ou procedimentos) do CSS1: rgb(), que constrói uma cor, e url(), que retorna um vínculo para uma imagem ou arquivo CSS (usada em instruções @import). Há quatro maneiras diferentes de especificar cores em CSS: usando o nome do sistema (red, yellow, blue, black, lightGray), usando seu código RGB hexadecimal (ff0000, ffff00, 0000ff, 34adfc, 80a7a7) ou usando a função rgb(). A função rgb() requer três argumentos que representam a intensidade dos componentes vermelho (R), verde (G) e azul (B) de uma cor em forma de luz (não opaca). A intensidade pode ser expressa em valores inteiros de 0 (mínimo) a 255 (máximo) ou em valores fracionários de 0% a 100%. As instruções abaixo definem a mesma cor para um parágrafo:

45

P {color: red} P {color: ff0000} P {color: rgb(100%, 0%, 0%)} P {color: rgb(255, 0, 0)} Não deve haver espaço entre o "b" de rgb e o abre-parênteses. A função URL pode ser usada em propriedades que requerem arquivos (no caso, imagens) como valores. Ela recebe um argumento apenas com a URL (relativa ou absoluta) da imagem: P {background-image: url(imagem/textura.jpg)} P {background-image: url(http://www.apostilando.com/imagem/textura.jpg)}

Herança Os estilos "herdam" propriedades de várias maneiras. Uma das formas é através da própria hierarquia do HTML. Se você declara propriedades para BODY, todos os descritores serão afetados a não ser que tenham as suas propriedades redefinidas dentro de um novo bloco de declarações CSS. Se um está dentro de um
e todos os
são declarados como tendo a cor vermelha, o também será vermelho a menos que haja um bloco, posterior àquela declaração, redefinindo as propriedades de , por exemplo: P {font: 12pt "Times New Roman" bold; color: red } I {color: black } Faria com que o texto "seletor", no texto a seguir permanecesse preto:
Um seletor é algo no qual se pode aplicar um estilo.
Se você definir atributos para os descritores ou , toda a página será afetada. No exemplo a seguir, uma cor de texto definida para BODY será usada para colorir todo o texto do documento, a não ser que sejam sobrepostos por uma regra subseqüente: BODY {color: navy } H1, H2 {color: yellow } Os blocos acima farão com que todo o texto seja azul marinho, exceto aquele

46

marcado com H1 ou H2, que será amarelo.

Os browsers comerciais têm problemas principalmente com a aplicação de estilos em BODY, portanto, freqüentemente é preciso mexer nas declarações de estilo, acrescentando propriedades redundantes para adaptá- los à realidade. No site do W3C (http://www.w3.org) há links para documentos que

analisam

essas

diferenças

entre

browsers.

O

site

http://www.w3.org/Styçe/CSS/Test/ é uma plataforma de testes que pode ser usada para verificar se um browser suporta ou não determinada propriedade.

Como incluir estilos em uma página Há três formas de aplicar uma folha de estilos a uma página Web. Estas formas irão determinar a abrangência dos estilos: se afetarão um trecho limitado de uma página, se a toda a página, ou se irão afetar todo um site. A primeira forma, mais abrangente, é a vinculação a um arquivo CSS. Isto é feito ligando a página HTML a um arquivo de folha de estilo, usando do descritor . Este método permite que múltiplas páginas ou um site inteiro usem a mesma folha de estilos.

Para fazer um vínculo a uma folha de estilos externa, deve-se criar um arquivo de texto contendo um conjunto de regras de estilo em CSS, salvá-lo com uma extensão ".css" e chamá-lo a partir de todos os documentos HTML onde o estilo será aplicado. Não é preciso compilar ou qualquer coisa do tipo. Depois que as definições estiverem prontas, o estilo estará pronto para ser usado. Pode ser importado através do descritor LINK: Uma segunda forma, permite que estilos sejam aplicados localmente, em uma única página, embutindo uma folha de estilos diretamente na página HTML dentro de um bloco formado pelos descritores . Este método permite que você altere as propriedades de estilo de uma única

47

página. A linguagem que é embutida em um bloco deve ser usado em . Um atributo type informa o tipo de arquivo utilizado:

As propriedades declaradas no bloco

48

Finalmente, há uma forma de aplicar estilos diretamente a um descritor individual. Para fazer isto se deve usar o atributo STYLE em quase qualquer descritor. Este método não corresponde exatamente a uma "folha" de estilos, pois os estilos aplicados não são reaproveitáveis. Permite alterar a aparência de um único descritor, de um conjunto deles ou de um bloco de informações da página. Por exemplo:
Teste
Esta propriedade é mais interessante quando aplicada em um descritor que é usado para agrupar vários outros, como
, que divide a página em seções ou , usado em situações bem específicas. Usar estilos desta forma é pouco diferente de usar atributos locais. Os benefícios de poder mudar a fonte, cores e outras características em todo o documento ficam mais difíceis. Pode-se usar um, dois ou os três métodos ao mesmo tempo. As características definidas pelos mais específicos sobrepõem as definidas pelos mais genéricos. Por exemplo, suponha que o arquivo estilos.css contenha apenas as seguintes regras: H1 { color: green; font-size: 24pt} P { color: blue} Suponha que ele seja carregado na página a seguir que possui um bloco Mais adiante, existe um parágrafo e um título da forma:

49

Apostilando

Webkit – Aplicações Dinâmicas
Qual estilo irá predominar? Pela regra de que o mais específico sobrepõe o mais geral, teremos uma página onde os
têm tamanho 24pt (do estilo importado), cor preta (valor sobreposto pelo estilo da página) e os
são vermelhos (sobreposto pelo estilo da página). Nas duas linhas acima (e nelas apenas), o
será azul marinho (sobrepondo o estilo da página) e o
será preto. Classes e IDs Às vezes um parágrafo tem uma aparência diferente dos outros parágrafos em certa parte do texto. Para mudar o estilo dele, pode-se incluir as declarações em um atributo STYLE. Mas, se tal procedimento torna difícil a localização e a gerência dos estilos, pode-se usar um recurso para marcá-lo de forma que seja considerado diferente. Isto pode ser feito atribuindo-lhe uma identificação única. Em HTML,

pode-se usar o atributo ID:
Texto
Para alterar as características deste parágrafo agora, pode-se usar o seu ID como seletor, da forma: #w779 {color: cyan } Se isto estiver em um arquivo CSS, todas as páginas que o usam e que tiverem um elemento com o ID #w779 serão afetadas. Se houver mais de um com o mesmo ID apenas o primeiro será afetado. Melhor que usar ID é agrupar características semelhantes em classes. Uma classe é uma variação de um determinado objeto. Por exemplo, um texto teatral pode ter três parágrafos com apresentação diferente, representando as falas de três personagens. Se quiséssemos que cada um tivesse uma cor diferente, poderíamos declarar cada um como sendo de uma classe distinta:
Aplicações Ricas

Aplicações Dinâmicas

CMS

RIAS

50

Uma classe também pode conter descritores diferentes. Se todos os textos citados por certo autor tivessem que estar em outra cor ou fonte, poderíamos criar uma classe sem citar o descritor: .verde { color: green } Todos os descritores que tiverem o atributo CLASS=verde serão afetados, por exemplo:
,
, , etc. Links (pseudo-classes e pseudo-elementos) Para seletores especiais que mudam de estado, como o texto marcado com , é possível atribuir propriedades diferentes para cada estado: A:link {color: red} A:active {color: 660011} A:visited {color: black; text-decoration: none} A:hover {color: blue; text-decoration: underline} Muda as características dos links não-visitados, ativos e visitados. Assim como

qualquer seletor, os links podem ser combinados com outros descritores: P, A:link, H2 {color: red} Fontes Fontes são estilos de apresentação consistentes aplicados a alfabetos. Uma fonte consiste de atributos que alteram a aparência de um símbolo, sem alterar o seu significado. Oferecem as informações necessárias para que uma letra ou símbolo possa ser representado graficamente.

Os atributos essenciais de uma fonte são: Seu tipo (ou família) •

Seu tamanho

•

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

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

51

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

font-family Uma família de fontes (tipo) é selecionada com a propriedade font-family. Esta propriedade aceita uma lista de valores separados por vírgulas representando nomes de fontes existentes ou não no sistema do usuário. No final da lista, pode ser incluída uma referência a uma família genérica, que será usada caso nenhum dos nomes coincida com o nome de uma fonte do sistema. A sintaxe é: font-family: fonte1, fonte2, fonte3, ..., fonte-genérica Exemplos: H1 { font-family: garamond } H2 { font-family: arial, helvetica, sans-serif } H3 { font-family: courier, "courier new", monospaced } H4 { font-family: monospaced }

Uma forma de facilitar a aplicação e a criação de estilos é com o Adobe Dreamweaver.Ele possui uma janela de configuração de estilos.

52

Na parte de baixo do painel estão disponíveis os botões de link,que permite ligar um arquivo externo ao seu HTML. O botão ao lado permite criar um novo estilo, e o terceiro botão (forma de lápis), permite editar um estilo existente.

font-size O tamanho de uma fonte é alterado usando font-size. Pode ser especificado em valores absolutos ou relativos. Para especificar um valor absoluto, pode-se usar: font-size: número(pt | px | cm | mm | pc | in) font-size: xx-small|x-small|small|medium|large|x-large|xx-large O tamanho também pode ser especificado relativo ao elemento no qual o atual objeto está contido. font-size: tamanho_relativo (smaller, larger) font-size: comprimento (em ou ex) font-size: porcentagem% Exemplos: H1 { font-size: 24pt} H1 { font-size: x-large} H1 { font-size: smaller}

53

H1 { font-size: 1.5em} H1 { font-size: 150%}
Os tamanhos de pontos devem ser especificados como valores inteiros (mesmo se usados cm ou in). Os browsers podem formatar os tamanhos de forma diferente e os mesmos podem ser alterados pelos usuários nos browsers atuais. As unidades válidas são: pt (pontos), px (pixels), pc (paicas), cm (centímetros), mm (milímetros) e in (polegadas). Os tamanhos absolutos chamados pelo nome (xx-small, etc.) correspondem aos tamanhos de 1 a 7 do descritor e podem variar de acordo com a família de fontes usada (variam bastante entre plataformas também). Os tamanhos relativos funcionam como o e , aumentando a fonte atual por 150%. A diferença é que podem passar além do limite xx-large (ou ) ou xx-small (font size=1>). Os comprimentos referem-se a unidades comuns em tipografia. Um "em" é uma distância horizontal equivalente ao tamanho de uma fonte (se uma fonte tem 20 pontos de tamanho, um em corresponde a uma distância de 20 pixels de largura). Um "ex" é a altura das letras de caixa-baixa (sem incluir as hastes ascendentes e descendentes). Tanto "em" como "ex" usam valores relativos ao elemento que contém o elemento atual. São úteis principalmente em espaçamento, sendo pouco usados em fontes. As porcentagens são afetadas pela herança, por exemplo:
Texto.>
2 vezes maior

54

Este é um parágrafo da seção. O texto tem 50% do tamanho do texto da seção.

font-style e font-weight O estilo de uma fonte é afetado através de duas diferentes propriedades: fontweight, que altera o peso da fonte, e font-style, que altera o estilo ou inclinação. Sintaxe: font-style: normal (ou italic, oblique) Exemplos: H1 { font-style: italic } I { font-style: normal }
...
Sintaxe: font-weight: normal | bold (normal=400 e bold = 700) font-weight: bolder | lighter (valores relativos) font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 Exemplos: H1 { font-weight: normal } B { font-weight: 900 } ... ... ... A palavra oblique deve fazer com que fontes chamadas de "oblique" (se existirem no sistema) sejam usadas, assim como ocorre com fontes "italic". A rigor, italic é uma fonte distinta da normal, e não, meramente uma versão inclinada da mesma. Os browsers, porém, não encontrando um equivalente "italic", "oblique", "kursiv" ou similar irão inclinar o texto, simulando um itálico. Os valores numéricos para font-weight oferecem um controle excepcional sobre o peso da fonte na tela, embora isto esteja limitado aos níveis disponíveis nas fontes instaladas (para um mesmo nome de fonte). Na prática, dos 9 níveis disponíveis de peso, se consegue 4 ou 5 níveis diferentes de mais pesado ou mais leve. 700 é o "bold" típico e 400 é o "normal".

55

font-variant Atualmente a única opção disponível para esta propriedade é small-caps, que deve colocar o texto selecionado em maiúsculas, porém menores que as capitulares. Sintaxe: font-variant: small-caps Exemplos:
Um texto simples sem SmallCaps...

Um texto simples com SmallCaps...

Os small-caps acima, no Internet Explorer 4, são falsos. As letras maiúsculas não deveriam ter sido afetadas.

Um texto simples com SmallCaps... verdadeiros.

text-transform A propriedade text-transform realiza transformações no formato caixa-alta ou caixa-baixa do texto. Sintaxe: text-transform: capitalize text-transform: uppercase text-transform: lowercase text-transform: none (valor default) Exemplos: H1 {text-transform: capitalize} Capitalize coloca a primeira letra de cada palavra em maiúsculas. Uppercase coloca tudo

56

em maiúsculas e lowercase coloca tudo em minúsculas. None remove qualquer transformação deixando o texto da forma como foi definido antes das transformações.
Sem transformação: É preciso conhecer bem HTML e CSS

Uppercase: É preciso conhecer bem HTML e CSS

Capitalize: É preciso conhecer bem HTML e CSS

Lowercase: É preciso conhecer bem HTML e CSS

text-decoration A propriedade text-decoration permite colocar (ou tirar) sublinhados, linhas sobre e atravessando o texto, etc. Sintaxe: text-decoration: underline (default em links) text-decoration: overline text-decoration: line-through text-decoration: blink text-decoration: none (default) Exemplos: h1 {text-decoration: overline} Link sem sublinhado

text-align e vertical-align CSS oferece propriedades que permitem controlar o alinhamento horizontal do texto, seu alinhamento vertical e endentação do texto na primeira linha. O alinhamento horizontal é o mesmo conseguido com o atributo align do HTML, só que o da folha de estilos tem precedência. A sintaxe é: text-align: left | right | center | justify O alinhamento só se aplica a elementos de bloco (
,
, H1, etc.) e elementos como applets e imagens. A característica é herdada para sub-blocos. O valor default é sempre left. Exemplo: DIV { text-align: center } Alinhamento vertical em HTML só pode ser aplicado a tabelas e imagens. Com CSS, esta propriedade é estendida a qualquer elemento de texto e imagens. A sintaxe é: vertical-align: baseline | top | text-top | middle | bottom | text-bottom vertical-align: sub | super vertical-align: porcentagem % O valor default é baseline. As porcentagens referem-se à altura da linha (lineheght) do próprio elemento. Usando porcentagens negativas consegue-se sobrepor elementos.

text-indent A propriedade text-indent se aplica a elementos de bloco e realiza a endentação da primeira linha. A sua sintaxe é: text-indent: comprimento text-indent: porcentagem A porcentagem ocorre em relação à largura do elemento que contém o seletor.

58

Pode ser a largura total da página, a largura da célula de uma tabela, etc. Exemplos: P { text-indent: 1 cm } P {text-indent: 50% }

line-height Este atributo é usado para controlar o espaço que existe antes e depois de uma linha de texto. Ela especifica a altura total de uma linha de texto. Se você tem um texto de 10 pontos e uma line-height de 20 pontos (line-height: 2), haverá 5 pontos antes e 5 pontos depois de cada linha de texto (espaço duplo). O espaço simples equivale geralmente a line-height: 120%. Uma line-height menor que o tamanho da fonte produzirá sobreposição de texto. Embora ambos os browsers mais populares suportem este recurso, ele não ocorre da maneira correta. Os browsers não acrescentam a mesma quantidade de espaço antes e depois como esperado.

letter-spacing A propriedade letter-spacing altera o espaço entre as letras. A sua sintaxe é: letter-spacing: normal letter-spacing: comprimento As unidades podem ser quaisquer uma das unidades válidas para tamanho de fontes (pt, px, pc, cm, in, mm, em e ex). Na tipografia, é mais comum usar "em" como medida de espaçamento por ser proporcional ao tamanho da fonte.

Propriedade Color Define a cor do texto. A propriedade color substitui totalmente o descritor

com vantagens. Pode ser aplicada localmente em um descritor (usando o atributo style) ou globalmente na página e no site, como qualquer outra propriedade de estilo. A sintaxe da propriedade color é: color: nome_de_cor color: #número_hexadecimal

59

color: rgb(vermelho, verde, azul) Exemplos: H1 { color: green } P { color: #fe0da4 } EM { color: rgb (255, 127, 63) } Os nomes são qualquer nome válido de cor. Se o browser não encontrar o nome ao qual o estilo se refere, deve exibir a cor default (ou herdada). O símbolo "#" é opcional no código hexadecimal. A intensidade da cor pode ser expressa em valores absolutos (0 a 255) ou percentagens (0.0-100.0%).

background-color As cores de fundo de qualquer elemento podem ser alteradas através da propriedade background-color. A sintaxe é: background-color: transparent (valor default) background-color: nome_de_cor background-color: #número_hexadecimal background-color: rgb(vermelho, verde, azul) Exemplos: H1 { background-color: green } P { background-color: #fe0da4 } EM { background-color: rgb (255, 127, 63) } O fundo transparente simplesmente deixa à mostra o fundo do objeto que o contém. O fundo, para texto, ocupa todo o espaço da fonte (inclusive espaço em branco acima e abaixo que fazem parte da fonte). A cor não é estendida quando o espaçamento entre linhas é aumentado em alguns browsers.

background-image Com background-image é possível atribuir a qualquer elemento HTML uma imagem que será exibida no fundo, assim como as cores de fundo. A sintaxe é: background-image: none (valor default) background-image: url(URL_da_imagem)

60

Exemplos: H1 { background-image: url(http://www.apostilando.com/imagens/textura.jpg) } B {background-image: url(imagens/textura.jpg) navy
As URLs são relativas à localização do arquivo que contém a folha de estilos (pode ser a própria página ou não). A cor de backup é usada para 'vazar' pelas partes transparentes da imagem ou prevenir contra o não carregamento do fundo (para permitir a leitura em fundo escuro pode-se usar preto como cor de backup de uma imagem escura). CSS permite mais controle ainda sobre a imagem de fundo, facilitando a maneira como a mesma irá se repetir. A propriedade é background-repeat. Sintaxe: background-repeat: repeat (default) background-repeat: repeat-x background-repeat: repeat-y background-repeat: no-repeat Exemplos: BODY {background-image: url(imagens/textura.jpg); background-repeat: repeat-x } TABLE{background-image: url(imagens/textura.jpg) background-repeat: no-repeat } O valor repeat é default e faz com que a imagem ocupe toda a tela. repeat-x faz com que a imagem seja repetida apenas horizontalmente e repeat-y faz com que ela seja repetida apenas verticalmente. no-repeat faz com que a imagem não seja repetida de forma alguma (aparecerá uma imagem apenas no canto superior esquerdo). Para fazer a imagem aparecer em outros lugares, pode-se usar as propriedades de posicionamento do fundo da tela. O posicionamento e a forma de exibição do papel de parede são controlados pelas propriedades background-attachment e background-position. A primeira define se o fundo irá ou não se mover com o texto ou ficar fixo na tela. A segunda permite o posicionamento do fundo em um local exato da tela.

61

Sintaxe: background-attachment: fixed background-attachment: scroll Exemplo: BODY {background-image: url (imagem/textura,jpg); background-attachment: fixed } Sintaxe: background-position: porcentagem_horiz% porcentagem_vert% background-position: comprimento comprimento background-position: posição_vertical posição_horizontal Exemplos: BODY {background-image: url(imagem/textura.jpg); background-repeat: no-repeat; background-position: 50% 100% } BODY {background-image: url(imagem/textura.jpg); background-repeat: no-repeat; background-position: 25pt 2.5cm } BODY {background-image: url(imagem/textura.jpg); background-repeat: no-repeat; background-position: center top } BODY {background-image: url(imagem/textura.jpg); background-repeat: no-repeat; background-position: left bottom } Os valores de porcentagem são relativos à posição do elemento sobre o qual se aplica o estilo. As posições são sempre dadas em pares, tendo os valores separados por espaços. O primeiro valor é sempre um valor horizontal e o segundo um valor vertical. O browser coloca o bloco afetado dentro de uma "caixa invisível" e a posiciona de acordo com as porcentagens. Um valor de 100% para o primeiro valor, empurra a margem direita (oposta) desta "caixa invisível" contra a margem direita do browser. Os valores de comprimento, assim como os de porcentagem também são dados em pares. O primeiro é à distância da margem horizontal a partir do

62

canto superior esquerdo do objeto; o segundo é à distância da margem superior. As unidades válidas são as mesmas usadas em fontes (cm, mm, in, pc, px, pt, em, ex) e podem ser misturadas nos dois valores do par. Os valores de posição são palavras-chave usadas também aos pares. São equivalentes das porcentagens básicas de alinhamento. O primeiro par pode ter left (0%), right (100%) ou center (50%). O segundo par pode ser top (0%), bottom (100%) ou center (50%). Propriedades de Classificação Estas propriedades classificam os elementos em categorias que podem receber estilos. Categorias podem ser listas, blocos, trechos de blocos ou itens invisíveis.

display Esta propriedade define como um elemento é mostrado. A propriedade none desliga o elemento e fecha o espaço que o objeto antes ocupava (torna o objeto invisível). block abre uma nova caixa onde o objeto é posicionado, relativo aos outros blocos, list-item é um bloco com um marcador de lista e inline define um elemento como parte de um bloco. Sintaxe: display: block | inline | list-item | none Exemplo: P {display: list-item} IMG {display: none} // desliga todas as imagens

white-space Define como o espaço em branco do elemento é gerenciado (se as linhas devem ser quebradas para que apareçam na tela ou não (nowrap) ou se os espaços em branco, tabulações, etc. devem ser considerados (pre). white-space: normal | pre | nowrap

list-style Esta propriedade e as propriedades list-style-type, list-style-image e list-style-

63

position definem atributos para objetos de lista, como tipo de marcador, imagem do marcador e posição. list-style-type: disc | circle | square | decimal | lower-roman upper-roman | lower-alpha | upper-alpha | none list-style-image: url(url_da_imagem) list-style-position: inside | outside Exemplo: list-style-image: url(bullet.gif) É possível definir as três propriedades através de um atalho usando list-type. A ordem dos fatores é importante neste caso. list-style: list-style-type list-style-image list-style-position Exemplo: list-style: url(bullet.gif) list-style: square outside Blocos Uma “caixa” é uma propriedade de qualquer elemento de bloco no HTML (H1, P, DIV, etc. que automaticamente definem seu próprio bloco ou parágrafo). A

caixa de um objeto consiste das partes seguintes: •

O elemento em si (texto, imagem) •

•

As margens internas do elemento (padding)

•

A borda em torno das margens internas (border)

•

A margem em torno da borda (margin)

Todo elemento de bloco tem essas propriedades. As propriedades CSS que

64

veremos nesta seção mostrarão como alterá-las. A cor e tamanho da borda podem ser alterados assim como o fundo (como vimos na seção anterior). A margem externa é sempre transparente mas a margem interna herda a cor de fundo do objeto. Também são alteráveis as margens internas e externas, larguras de borda, cor de borda e estilo de borda de cada um dos quatro lados de uma caixa individualmente, identificados pelos nomes top, right, bottom e left:

margin e padding As margens externas são definidas usando a propriedade margin (que afeta todas as margens ao mesmo tempo) ou as propriedades margin-top, marginbottom, margin-right e margin-left que permite alterar as margens individualmente. Sintaxe: margin-top: comprimento | porcentagem % | auto margin-bottom: comprimento | porcentagem % | auto margin-right: comprimento | porcentagem % | auto margin-left: comprimento | porcentagem % | auto Exemplo: margin-top: 1cm; margin-left: 12pt; A propriedade margin afeta vários aspectos das margens externas de uma vez só. A ordem dos fatores é importante. Podem ser incluídos todos quatro valores, apenas um (todas as margens iguais) ou dois (margens horizontais e verticais). Sintaxe: margin: margin-top margin-right margin-bottom margin-left margin: margin-top% margin-right% margin-bottom% margin-left%

65

margin: espaço_vertical espaço_horizontal margin: margem_de_todos_os_lados Exemplos: margin: 5cm // vale para as quatro margens margin: 5cm 2cm // 5cm margs verticais, 2cm margs horizontais margin: 5cm 3cm 2cm 1cm // sent. horário: top, right, bottom, left // (em cima 5; à direita 3; em baixo 2;... As margens internas (padding) são definidas usando a propriedade padding (que afeta todas as margens internas ao mesmo tempo) ou as propriedades padding-top, padding-bottom, padding-right e padding-left. Sintaxe: padding-top: comprimento | porcentagem % padding-bottom: comprimento | porcentagem % padding-right: comprimento | porcentagem % padding-left: comprimento | porcentagem % A propriedade padding afeta vários aspectos das margens internas de uma vez só. A ordem dos fatores é importante. Podem ser incluídos todos quatro valores ou apenas um. Sintaxe: padding: padding-top padding-right padding-bottom padding-left padding: padding-top% padding-right% padding-bottom% padding-left% padding: espaço_vertical espaço_horizontal padding: margem_de_todos_os_lados

border-width Pode se controlar vários aspectos das bordas como a sua espessura em cada um dos quatro lados, suas cores (também cada um dos quatro lados) e estilos (idem). Isto pode ser feito de diversas maneiras. Para que as bordas apareçam é preciso primeiro que o estilo (border-style) seja definido. Por exemplo: border-style: solid A espessura das bordas pode ser controlada através da propriedade borderwidth, afetando as espessuras de todos os lados da borda, ou individualmente através de border-top-width, border-bottom-width, border-right-width e border-

66

left-width. Sintaxe: border-top-width: comprimento | thin | medium | thick border-bottom-width: comprimento | thin | medium | thick border-right-width: comprimento | thin | medium | thick border-left-width: comprimento | thin | medium | thick Exemplos: border-bottom-width: thick; border-right-width: 5.5px; border-left-width: 0.2cm As propriedades das bordas podem ser tratadas em grupo, com border-width. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores, dois (referindo-se às bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe: border-width: border-top-width border-right-width border-bottom-width border-left-width Exemplos: border-width: 5cm // vale para as quatro bordas border-width: 5cm 2cm // 5cm verticais, 2cm horizontais border-width: 5cm 3cm 2cm 1cm // horário: top, right, bottom, left

border-color A propriedade border-color é um atalho que permite que se altere a cor de uma ou de todas as quatro bordas ao redor de um elemento que também podem ser definidas individualmente através de border-top-color, border-bottom-color, border-right-color e border-left-color. border-top-color: cor (nome ou código) border-bottom-color: cor (nome ou código) border-right-color: cor (nome ou código) border-left-color: cor (nome ou código) Exemplos: border-bottom-color: rgb(231,45,112); border-right-color: 0fa97b; border-left-color: navy As propriedades das bordas podem ser tratadas em grupo, com border-color. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores,

67

dois (referindo-se às bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe: border-color: border-top-color border-right-color border-bottom-color border-left-color Cada um dos border-xxx-color acima é uma cor (RGB, hexadecimal ou nome). Pode-se alterar todas as bordas de uma vez, apenas as duas verticais e horizontais ou as quatro individualmente. Exemplos: border-color: red // red para as quatro bordas border-color: rgb(255, 0, 0) // red border-color: rgb(100%, 0, 0) // red border-color: red 0000ff // red verticais, 0000ff horizontais border-color: red blue yellow cyan // 4 cores sentido horário

border-style O estilo de cada uma das quatro bordas pode ser alterado com border-style. Também é possível defini-los individualmente usando border-top-style, borderbottom-style, border-right-style e border-left-style. São vários os estilos disponíveis (tracejado, pontilhado, várias versões de 3D, etc.). border-top-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset border-bottom-style: nome de estilo (um dos nomes acima) border-right-style: nome de estilo border-left-style: nome de estilo Exemplos: border-bottom-style: none border-right-style: solid; border-left-style: inset As propriedades das bordas podem ser tratadas em grupo, com border-style. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores, dois (referindo-se às bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe: border-style: border-top-style border-right-style border-bottom-style border-left-style

68

Exemplos: border-style: solid none inset outset; border-style: solid border-style: inset outset Cada um dos border-xxx-style acima é um dos seguintes valores: none, dotted, dashed, solid, double, groove, ridge, inset, outset. No Netscape e Internet Explorer, funcionam os estilos solid, inset (efeito baixo-relevo) e outset (efeito alto-relevo).

border As propriedades border-top, border-bottom, border-left e border-right agrupam as propriedades de cor, estilo e espessura para cada uma das quatro bordas. border-top: border-width border-style border-color border-bottom: border-width border-style border-color border-left: border-width border-style border-color border-right: border-width border-style border-color A propriedade border é uma forma reduzida de definir tudo isto de uma vez só para todas as bordas e de forma idêntica (não é possível especificar valores diferentes para as bordas neste caso). Todos os itens não precisam aparecer, mas a ordem dos fatores é importante: border: border-width border-style border-color

width e height As propriedades width e height modificam a altura e largura de um bloco da mesma forma que atributos HTML width e height usados em imagens e applets no HTML. Com folhas de estilos podem ser usados para redimensionar a "caixa" de qualquer elemento de bloco. Sintaxe: width: comprimento | auto height: comprimento | auto

float A propriedade float permite que um bloco qualquer seja posicionado à direita ou esquerda da janela do browser, fazendo com que o texto restante flua em

69

sua volta. Permite que qualquer bloco se comporte como uma imagem que faz uso dos atributos align=left e a-lign=right no HTML. Sintaxe: float: left | right | none

clear E finalmente, para evitar que um bloco flua em torno de uma imagem ou bloco que utiliza a propriedade float, existe a propriedade clear, que deve ser atribuída a um bloco ou parágrafo que é afetado pela flutuação de um bloco. Faz a mesma coisa que o atributo clear, usado no
em HTML, só que aqui ela é suportada em qualquer elemento (bloco ou não). clear: none | left | right | both Posicionamento O posicionamento de objetos em HTML pode ser conseguido em termos absolutos ou relativos usando CSS 2. As propriedades permitem o posicionamento em três dimensões (horizontal, vertical e em camadas).

position, top e left Esta propriedade precisa de mais duas propriedades que definem o posicionamento de um objeto. Os atributos localizam o objeto na tela de forma absoluta ou de forma relativa. A origem da posição absoluta será a posição do objeto no nível imediatamente superior. O posicionamento relativo se refere à posição anterior do objeto. Sintaxe: position: absolute | relative left: comprimento | porcentagem | auto top: comprimento | porcentagem | auto

z-index A propriedade z-index permite ordenar os objetos em camadas. É um eixo de profundidade. Para usá-la, basta definir em cada objeto: z-index: número onde número é a camada de exibição. Quanto maior o número, mais alta a camada. o corresponde à camada do texto. Se um objeto tiver z-index menor que zero aparecerá atrás do texto. Se z-index for maior que zero, aparecerá na frente. Quando não é definido ou quando z-index: 0 o bloco

70

ocupará a mesma camada que o texto.

visibility Esta propriedade serve para tornar um bloco visível ou invisível. Difere de display porque não remove o espaço antes ocupado pela imagem: visibility: hidden | visible Exemplo: IMG {visibility: hidden} // torna invisíveis todas as imagens

HTML 5 HTML5 (Hypertext Markup Language, versão 5) é a quinta versão da linguagem HTML. Esta nova versão traz consigo importantes mudanças quanto ao papel do HTML no mundo da Web, trazendo novas funcionalidades como semântica e acessibilidade, com novos recursos antes só possíveis por meio de outras tecnologias, e trazendo uma importante disseminação dentre todos os novos navegadores de internet, tornando-o mais universal. Esta evolução da linguagem padrão para web pode eliminar a necessidade de plug-ins para aplicações multimídia em navegadores. Diversos críticos consideram a tecnologia como um forte concorrente ao Flash, da Adobe, ao Silverlight, da Microsoft, e ao recente JavaFX, da Sun (Oracle). Estas tecnologias precisarão se adaptar rapidamente para conseguir manter-se no mercado, tão populares quanto hoje. Na avaliação do co-diretor de ferramentas da Mozilla, Ben Galbraith, as tecnologias viabilizadas pelo HTML5 como o Canvas para desenhos 2D e o armazenamento de conteúdos no desktop, permitirão que "usemos mais o browser do que nunca".

Exemplo de um código HTML5 HTML5 <meta charset="UTF-8" />

71

Report "Css"

Your name

Email

Reason

Description

Copyright © 2025 IDOC.TIPS. All rights reserved.
About Us | Privacy Policy | Terms of Service | Copyright | Contact Us | Cookie Policy

Sign In

Email

Password

Remember me Forgot password?

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

...

Css

Recommend Documents

até

. Além do tamanho diferenciado, o comando cabeçalho insere uma linha em branco antes e depois da linha que contém o comando. Eles são perfeitos para criar títulos e iniciar seções dentro de uma página. O comando

possui o maior tamanho enquanto que

Cabeçalho sem alinhamento especial

Cabeçalho com alinhamento centralizado

Cabeçalho com alinhamento à direita

Listas de definição

Listas não ordenadas combinadascom Definição

A Bruxa de Blair

O Filme

A Bruxa de Blair

O Filme

A Bruxa de Blair

O Filme

Novo Capítulo

Mídia de tela

Teste

, , etc. Para fazer com que todos os blocos de textos marcados com

Apostilando

têm tamanho 24pt (do estilo importado), cor preta (valor sobreposto pelo estilo da página) e os são vermelhos (sobreposto pelo estilo da página). Nas duas linhas acima (e nelas apenas), o

2 vezes maior

Listas não ordenadas combinadas
com Definição

,
, etc. Para fazer com que todos os blocos de textos marcados com

têm tamanho 24pt (do estilo importado), cor preta (valor sobreposto pelo estilo da página) e os
são vermelhos (sobreposto pelo estilo da página). Nas duas linhas acima (e nelas apenas), o