CSS Introdução

Profª Letícia Régis Di Maio [email_address] CSS – 1ª aula 07.10.10

Cascading Style Sheets - CSS Para definir a aparência de páginas web, utiliza-se CSS, acrônimo para Cascading Style Sheet (Folha de Estilo em Cascata). Com CSS podem ser definidas características personalizadas (estilo, cor, tamanho, etc.), aplicando-as a um ou mais elementos. Assim, uma modificação no estilo do elemento, requer apenas uma nova referência ao estilo presente num arquivo CSS. Outra vantagem, é a portabilidade de documentos em diferentes tipos de mídia (vários arquivos CSS podem ser criados, em função do tipo de mídia apresentado: computadores, PDA’s, impressoras, etc.). Profª Letícia Régis Di Maio [email_address]

CSS Existem 3 formas para aplicar estilos a documentos XHTML: - Local (inline) - Incorporado (embedded) - Externo (linked) Profª Letícia Régis Di Maio [email_address] Tipos de CSS

O estilo é definido diretamente no elemento, ou então utilizando-se um dos elementos, por exemplo: <span>...</span> para aplicar o estilo a um elemento de uma linha <div>...</div> para aplicar o estilo aos elementos de um bloco Profª Letícia Régis Di Maio [email_address] CSS Tipos de CSS – Local (inline)

Os estilos são definidos entre <head>...</head> utilizando a tag <style>...</style>. Caso um navegador ignore a tag “style”, mostrará o conteúdo da tag na janela do navegador. Para evitar que isto aconteça, defina os estilos na seção de cabeçalho dentro de comentários ( ); Profª Letícia Régis Di Maio [email_address] CSS Tipos de CSS – Incorporado (embedded)

Os estilos são definidos em um arquivo em formato texto, com extensão “.css”, sendo referenciado ao documento XHTML pela tag link, como no exemplo abaixo: <link rel="stylesheet" type= "text/css" href="arq.css" /> Para facilitar sua localização, deve-se inserir entre <head>...</head> Profª Letícia Régis Di Maio [email_address] CSS Tipos de CSS – Externo (linked)

Pode haver conflito entre estilos (estilos diferentes podem ser atribuídos a um mesmo elemento, porém, um dos estilos estando num arquivo “.css” - externo - e o outro estilo definido no cabeçalho do documento - seção “head” ). Quando isto ocorre, o navegador aplica uma regra somente, selecionando a regra de mais alta precedência, seguindo a ordem (da maior para a menor precedência): locais  incorporadas  externas Devido aos estilos seguirem uma ordenação de precedência, é que se diz que se trata de “estilos em cascata”. Profª Letícia Régis Di Maio [email_address] CSS Tipos de CSS – Observações

<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Estilo inline</title> </head> <body> <h1 style="text-decoration:underline;text-align:center"> Título </h1> </body> </html> Profª Letícia Régis Di Maio [email_address] CSS Tipos de CSS – Aplicando estilo Local (inline)

<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Estilo inline</title> <style type="text/css"> h1 { text-decoration : underline ; text-align : center ; } </style> </head> <body> <h1>Título</h1> </body> </html> Profª Letícia Régis Di Maio [email_address] CSS Tipos de CSS – Aplicando estilo Incorporado (embedded)

Antes de criar o documento XHTML, deve-se criar o arquivo “.css” que conterá o(s) estilo(s) a ser(em) aplicado(s). O arquivo “ meu_estilo.css ” deverá conter a linha abaixo: h1 { text-decoration : underline ; text-align : center ; } Profª Letícia Régis Di Maio [email_address] CSS Tipos de CSS – Aplicando estilo Externo (linked)

Documento XHTML: <?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Estilo inline</title> <link rel=”stylesheet” type=”text/css” href=”meu_estilo.css” /> </head> <body> <h1>Título</h1> </body> </html> Profª Letícia Régis Di Maio [email_address] CSS Tipos de CSS – Aplicando estilo Externo (linked) - continuação

Acesse: http://jigsaw.w3.org/css-validator/ , clique em “ by File Upload ” (caso sua página não esteja publicada), entre com o arquivo “.css” a examinar (caminho completo) e clique em “ Check ”. Profª Letícia Régis Di Maio [email_address] CSS Validação do arquivo CSS:

Aplicando estilo a múltiplas tags: h1, h2, h3 { text-decoration : underline ; text-align : center ; } Dessa forma, as tags “h1”, “h2” e “h3” farão com que o texto entre <h1>... </h1> seja exibido sublinhado e centralizado na janela do navegador. Profª Letícia Régis Di Maio [email_address] CSS Tipos de CSS – Aplicando estilo a múltiplas tags

Você pode definir estilos em uma classe, a qual pode ser atribuída a qualquer elemento, bastando, para isso, que você associe o nome da classe ao atributo “class” do elemento. O nome da classe inicia com o caracter ponto ( . ), mas este caracter não é utilizado quando da associação do nome da classe ao atributo “class” do elemento. Exemplo: <style type="text/css"> . texto_negrito { font-weight : bold ; } </style> <p class= " texto_negrito " > Parágrafo em negrito! </p> A grande vantagem da criação de classes acontece quando um estilo não for aplicável a todo o documento (para o elemento especificado). Profª Letícia Régis Di Maio [email_address] CSS Definindo classes

<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Estilo inline </title> <style type="text/css"> h1 { text-decoration : underline ; text-align : center ; } . texto_negrito { font-weight : bold ; } </style> </head> <body> <h1> Título </h1> <p> Parágrafo normal! </p> <p class= "texto_negrito" > Parágrafo em negrito! </p> </body> </html> Profª Letícia Régis Di Maio [email_address] CSS Definindo classes

É útil quando se tem que aplicar um estilo a um determinado seletor. Altere o arquivo meu_estilo.css para conter o estilo: a.sem_sublinhado {text_decoration : none; } Esta classe só é aplicável às “âncoras”, e o texto delimitado pelas tags <a>...</a> não aparecerá sublinhado, como acontece normalmente. Profª Letícia Régis Di Maio [email_address] CSS Classe de seletores

<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Classe em CSS</title> <link rel="stylesheet" type="text/css" href=" meu_estilo.css " /> </head> <body> <h1>Título</h1> <p> <a href="http://www.uezo.rj.gov.br">UEZO</a> </p> <p class=" texto_negrito "> Parágrafo em negrito! </p> </body> </html> Profª Letícia Régis Di Maio [email_address] CSS Classes de seletores - continuação

Muitas propriedades utilizam unidades de medida, por exemplo: . imagem_inicio { position : absolute ; right : 5% ; top : 25% ; width : 380px ; /* largura da imagem: 380 pixels */ height : 300px ; /* altura da imagem: 380 pixels */ } Profª Letícia Régis Di Maio [email_address] CSS Unidades de Medida

% : porcentagem. em : a propriedade tem valor igual a n vezes o font-size do elemento pai, ou seja, do elemento que está definido antes do elemento atual. px : pixel. Profª Letícia Régis Di Maio [email_address] CSS Unidades de Medida Relativa

cm : centímetros mm : milímetros in : polegada pt : pontos (equivalente a 1/72 polegadas) pc : paica (equivalente a 12 pontos) Profª Letícia Régis Di Maio [email_address] CSS Unidades de Medida Absoluta

As cores utilizadas na web são especificadas em torno de seus valores RGB. Há várias formas de se referenciar uma cor em um documento XHTML, dentre elas listam-se 3 : 1ª) #RRGGBB : Valor hexadecimal (base 16), sendo: - Vermelho (red) : #FF0000 - Verde (lime) : #00FF00 - Azul (blue) : #0000FF 2ª) #RGB : Quando os valores são iguais, pode-se representar com esta notação mais resumida. Com ela, assume-se que os números estão repetidos. Assim, #F15 equivale a #FF1155 Profª Letícia Régis Di Maio [email_address] CSS Cores

3ª) POR NOME : o padrão VGA do dispositivo de exibição (monitor) define nomes para as seguintes cores: aqua : #00FFFF black : #000000 blue : #0000FF fuchsia : #FF00FF gray : #808080 green : #008000 lime : #00FF00 maroon : #800000 navy : #000080 olive : #808000 purple : #800080 red : #FF0000 silver : #C0C0C0 teal : #008080 white : #FFFFFF yellow : #FFFF00 Profª Letícia Régis Di Maio [email_address] CSS Cores - continuação

Uma informação é mostrada em um navegador num formato onde o conteúdo central está delimitado por um espaçamento (padding ), que separa este conteúdo central de uma borda ( border) , e por uma margem (margin) . Ambos os elementos “padding” e “margin” são transparentes. O modelo de caixas (box model) é uma recomendação da W3C para CSS. Profª Letícia Régis Di Maio [email_address] CSS Modelos de Caixas (Box Model)

Graficamente, poderíamos representar o modelo de caixas como: Profª Letícia Régis Di Maio [email_address] CSS Modelos de Caixas (Box Model) – continuação margin (margem) conteúdo width (largura) height (altura) border (borda) padding (espaçamento)

Profª Letícia Régis Di Maio [email_address] CSS Margem (margin) Propriedades: - margin: use esta propriedade para especificar todas as margens com o mesmo valor, ou especifique cada uma das margens: top (superior), right (direito), bottom (inferior) e left (esquerdo) - margin-top : margem superior - margin-right : margem direita - margin- bottom : margem inferior - margin-left : margem esquerda Valores: auto (o navegador decide) ; % ; em ; px ; cm ; mm ; in ; pt ; pc

Fazer: <div style= "margin: 10px 20px 10px 20px"> é o mesmo que fazer: <div style= "margin-top: 10px ; margin-right: 20px ; margin- bottom: 10px ; margin-left: 20px"> Fazer: <div style= "margin: 10px;"> é o mesmo que fazer: <div style= "margin: 10px 10px 10px 10px"> Profª Letícia Régis Di Maio [email_address] CSS Margem (margin) - continuação

Propriedades: border (borda) - border-top (lado superior da borda) - border-right (lado direito da borda) - border- bottom (lado inferior da borda) - border-left (lado esquerdo da borda) border-color (cor da borda) border-style (estilo da borda) border-width (largura da borda) - border-top-color - border-top-style - border-top-width - border-right-color - border-right-style - border-right-width - border- bottom-color - border- bottom-style - border- bottom-width - border-left-color - border-left-style - border-left-width Profª Letícia Régis Di Maio [email_address] CSS Borda (border)

Valores: - color : as cores RGB - style : pode assumir os valores: - none : nenhuma borda - dotted : pontilhada - dashed : tracejada - solid : linha sólida - inset : baixo relevo - outset : alto relevo - double : linha dupla - width : pode assumir os valores: - thin (fino) - medium (média) - thick (grossa) - unidades de medida: % ; em ; px ; cm ; mm ; in ; pt ; pc Profª Letícia Régis Di Maio [email_address] CSS Borda (border) - continuação

Arquivo CSS: h1 { text-decoration : underline ; text-align : center ; } .texto_negrito { font-weight : bold ; } a.sem_sublinhado {text-decoration : none; } p.sem_borda {border-style : none; } p.borda_pontilhada {border-style : dotted; } p.borda_tracejada {border-style : dashed; } p.borda_solida {border-style : solid; } p.borda_ baixorelevo {border-style : inset; } p.borda_altorelevo {border-style : outset; } p.borda_dupla {border-style : double; } p.borda_fina {border-style : solid; border-width : thin; } p.borda_media {border-style : solid; border-width : medium; } p.borda_grossa {border-style : solid; border-width : thick; } p.borda_personalizada { border-style : solid; border-top-width : 10 pt ; border-right-width : 10 pt ; border- bottom-width : 10 pt ; border-left-width : 10 pt ; } Profª Letícia Régis Di Maio [email_address]

<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Bordas em CSS</title> <link rel="stylesheet" type="text/css" href="meu_estilo.css" /> </head> <body> <p class="sem_borda" />elemento sem borda</p> <p class="borda_pontilhada" />borda pontilhada</p> <p class="borda_tracejada" />borda tracejada</p> <p class="borda_solida" />borda sólida</p> <p class="borda_baixorelevo" />borda em baixo relevo</p> <p class="borda_altorelevo" />borda em alto relevo</p> <p class="borda_dupla" />borda dupla</p> <p class="borda_fina" />borda fina</p> <p class="borda_media" />borda média</p> <p class="borda_grossa" />borda grossa</p> <p class="borda_personalizada" />borda personalizada: 10 pt</p> </body> </html> Profª Letícia Régis Di Maio [email_address]

Profª Letícia Régis Di Maio [email_address]

Propriedades: - padding - padding-top - padding-right - padding- bottom - padding-left Valores: unidades de medida: % ; em ; px ; cm ; mm ; in ; pt ; pc Profª Letícia Régis Di Maio [email_address] CSS Espaçamento (padding)

<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ajustando o espaçamento (padding)</title> </head> <body> <p> <img style = " border:solid; margin:30pt; padding: 30pt" alt="Sol nascente" src="sol_nascente.jpg" /> </p> </body> </html> Profª Letícia Régis Di Maio [email_address]

Propriedades: position: - static : o elemento é exibido na ordem em que está posicionado no documento, não importando as outras propriedades de posicionamento - relative : a posição obtida é relativa ao seu posicionamento no documento - absolute : o elemento é posicionado pelas propriedades “top” ou ”bottom” e “right” ou “left” - fixed : o elemento é posicionado pelas propriedades “top” ou ”bottom”e “right” ou “left”, e fica fixo nesta posição, mesmo que a janela sofra rolamento. Profª Letícia Régis Di Maio [email_address] CSS Posição (position)

[object Object],[object Object],Profª Letícia Régis Di Maio [email_address] CSS Posição (position) - continuação

<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Posição em CSS</title> </head> <body> <p> <img style="position:absolute; top:10%; left:10%;" alt="Sol nascente em Guaratiba - RJ" src="sol_nascente.jpg" /> </p> <p> <img style="position:absolute; top:20%; left:20%;" alt="Sol poente em Guaratiba - RJ" src="sol_poente.jpg" /> </p> </body> </html> Profª Letícia Régis Di Maio [email_address]

<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Posição em CSS</title> </head> <body> <p> <img style="position:absolute; top:10%; left:10%; z-index:2; " alt="Sol nascente em Guaratiba - RJ" src="sol_nascente.jpg" /> </p> <p> <img style="position:absolute; top:20%; left:20%; z-index:1; " alt="Sol poente em Guaratiba - RJ" src="sol_poente.jpg" /> </p> </body> </html> Profª Letícia Régis Di Maio [email_address]

Profª Letícia Régis Di Maio [email_address] CSS Cursor

Um cursor é uma imagem “ .cur ” ou “ .ani ” (para cursores animados). No diretório “C:INDOWSursors” há vários tipos de cursor. Supondo existir o diretório virtual “xhtml”configurado no “IIS”, altere a linha de configuração do cursor no arquivo CSS para: cursor:url(http://localhost/xhtml/drum.ani); Carregue o arquivo cursor.html . Profª Letícia Régis Di Maio [email_address] CSS Cursor - continuação

Propriedades: - text-align : alinhamento do texto - text-decoration : características de decoração do texto - text-indent : espaçamento de identação do texto (espaço de tabulação) - text-transform : características de capitalização do texto Profª Letícia Régis Di Maio [email_address] CSS Texto (text)

Valores: - align : pode assumir os valores: - left : alinha o texto à esquerda - right : alinha o texto à direita - center : centraliza o texto - justify : justifica o texto - decoration : pode assumir os valores: - none : texto sem decoração - underline : texto sublinhado - overline : texto com uma linha acima - line-through : uma linha passa pelo meio do texto (cortando-o) - blink : texto piscando (não funciona no Internet Explorer) Profª Letícia Régis Di Maio [email_address] CSS Texto (text) - continuação

Valores: - indent : pode assumir as unidades de medida: % ; em ; px ; cm ; mm ; in ; pt ; pc . - transform : pode assumir os valores: - none : nenhuma alteração - capitalize : a primeira letra de cada palavra é convertida para maiúscula, caso já não esteja - uppercase : todo o texto é mostrado em letras maiúsculas - lowercase : todo o texto é mostrado em letras minúsculas Carregue o arquivo: texto.html . Profª Letícia Régis Di Maio [email_address] CSS Texto (text) - continuação

Propriedades: - font : Esta propriedade é utilizada para especificar todas as características de uma fonte. Como há problemas de interpretação em alguns navegadores, especifique cada uma das propriedades separadamente. - font-family : define a fonte - font-size : tamanho da fonte - font-style : estilo da fonte - font-weight : negrito Profª Letícia Régis Di Maio [email_address] CSS Fonte (font)

Valores: - family : pode assumir os valores: serif , sans , cursive , fantasy e monospace . Também, pode assumir o nome de qualquer fonte instalada no sistema, como Arial , por exemplo. Pode-se definir mais de uma fonte, cujos nomes devem ser separados por vírgula. Fontes cujos nomes contenham espaço em branco, como 'Times New Roman’ devem ser limitados por apóstrofes (aspas simples). Profª Letícia Régis Di Maio [email_address] CSS Fonte (font) - continuação

Valores: - size : pode assumir as unidades de medida: % ; em ; px ; cm ; mm ; in ; pt ; pc . - style : pode assumir os valores: - normal : texto sem estilo - italic : texto em itálico - oblique : texto em itálico para algumas fontes específicas. Utilize “italic” Profª Letícia Régis Di Maio [email_address] CSS Fonte (font) - continuação

Valores: - weight: pode assumir os valores: - normal : texto normal (sem negrito) - bold : texto em negrito - bolder : texto em negrito (mais forte possível) - lighter : texto em negrito (mais fraco possível) - 100 a 800 : escala de “peso” da fonte. Quanto maior, maior o efeito de negrito. O valor “400” corresponde a “normal” e “700” corresponde a “bold” Carregue o arquivo fontes.html . Profª Letícia Régis Di Maio [email_address] CSS Fonte (font) - continuação

Propriedade: - color Valores: as cores RGB. Profª Letícia Régis Di Maio [email_address] CSS Cor (color)

<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Cor do texto</title> </head> <body> <p> <span style="color:red;">Texto na cor vermelha</span> <br /> <span style="color:#00FF00;">Texto na cor verde</span> <br /> <span style="color:#00F;">Texto na cor azul</span> <br /> </p> </body> </html> Profª Letícia Régis Di Maio [email_address]

Propriedades: - background : use esta propriedade para especificar todas as características do background de uma só vez, ou especifique cada um dos valores: color , image , attachment , position e repeat . - background-color : cor de fundo - background-image : imagem de fundo - background-attachment : se uma imagem for declarada em background-image, define se ela sofrerá “rolamento” junto com a tela - background-position : se uma imagem for declarada em background-image, define sua posição inicial na tela - background-repeat : se uma imagem for declarada em background-image e essa imagem for menor do que a janela do navegador, define se ela será repetida, e se for, como será a repetição Profª Letícia Régis Di Maio [email_address] CSS Fundo (background)

Valores: - color : as cores RGB. - image : pode assumir os valores: - none : não será utilizada imagem - url(uri) : define a localização do arquivo de imagem - position : pode assumir os valores: - X Y : coordenadas; definem a distância da imagem em relação à margem superior (top) e à margem esquerda (left). Podem ser utilizadas as unidades de medida: % ; em ; px ; cm; mm; in ; pt ; pc . - X Y : coordenadas relativas, sendo que X significa a distância em relação à margem esquerda e Y a distância em relação à margem superior. Pode-se utilizar as palavras-reservadas: left, center e right para X e top, center e bottom para Y. Profª Letícia Régis Di Maio [email_address] CSS Fundo (background) - continuação

Valores: - attachment : pode assumir os valores: - fixed : a imagem não sofrerá “rolamento” junto com a janela - scroll : a imagem sofrerá “rolamento” junto com a janela - repeat : pode assumir os valores: - repeat : a imagem é repetida tanto na horizontal, quanto na vertical - repeat-x : a imagem é repetida somente na horizontal - repeat-y : a imagem é repetida somente na vertical - no-repeat : a imagem não é repetida Carregue o arquivo: scroll.html . Profª Letícia Régis Di Maio [email_address] CSS Fundo (background) - continuação

Outro exemplo: <?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Cor de fundo</title> </head> <body style="background-color:aqua"> <p> <span style="color:red; background-color:yellow">Texto na cor vermelha com fundo amarelo</span> <br /> </p> </body> </html> Profª Letícia Régis Di Maio [email_address] CSS Fundo (background) - continuação

Quando se trabalha com imagens, é bastante útil, por vezes, alterar suas dimensões (diminuindo ou aumentando), uma vez que o tamanho inicial da imagem pode não ser conveniente para o trabalho desejado. Por exemplo, supondo existir a imagem “sol_nascente.jpg”, com dimensão de 154 x 115 pixels, pode-se exibi-la com três dimensões diferentes: 50x50 pixels, 100x100 pixels e 200x200 pixels. Carregue o arquivo: dimensao.html Profª Letícia Régis Di Maio [email_address] CSS Altura (height) e Largura (width)

Propriedades: - border-collapse : define se as células compartilharão a mesma borda - border-spacing : define a distância de separação entre bordas de células adjacentes - empty-cells : define se as bordas de células sem informação serão exibidas - caption-side : define a posição onde será exibida a legenda da tabela (elemento caption>...</caption> ) - table-layout : define como a tabela será criada na janela do navegador. Para tabelas muito grandes, definir a largura e/ou a altura, faz com que as células sejam criadas com valor fixo de altura e/ou largura, aumentando a velocidade de carregamento da página, pois o navegador não terá que se preocupar com o algoritmo de renderização (criação gráfica) da mesma. Observação: podem ser utilizadas em conjunto com as propriedades do atributo border Profª Letícia Régis Di Maio [email_address] CSS Tabela (table)

Valores: - border-collapse : pode assumir os valores: - collapse : as células compartilham as bordas - separate : cada célula possui uma borda própria - border-spacing: se “border-collapse” estiver com o valor “separate”, pode assumir os valores: - dist dist : define a distância entre as bordas das células adjacentes. Podem ser utilizadas unidades de medida: % ; em ; px ; cm ; mm ; in ; pt ; pc . - empty-cells : pode assumir os valores: - show : exibe as bordas das células sem conteúdo - hide : não exibe as bordas das células sem conteúdo Profª Letícia Régis Di Maio [email_address] CSS Tabela (table) - continuação

- caption-side : pode assumir os valores: - top : a legenda será exibida no topo da tabela - left : a legenda será exibida à esquerda da tabela - right : a legenda será exibida à direita da tabela - bottom : a legenda será exibida na parte inferior da tabela - table-layout: pode assumir os valores: - auto : a definição de altura e a largura ficará a cargo do navegador - fixed : todas as células terão valores fixos de altura e/ou largura Profª Letícia Régis Di Maio [email_address] CSS Tabela (table) - continuação

O arquivo tabela.html , exemplifica tem classe que é definida para a tabela de uma forma geral ( table.bordas { ) Em seguida, estende-se essa classe ao elemento “ th ” ( table.bordas th { ), isto é, somente os elementos “th” sofrerão a aplicação dos estilos lá definidos Por fim, estende-se a classe ao elemento “ td ” ( table.bordas td { ) Carregue o arquivo: tabela.html Profª Letícia Régis Di Maio [email_address] CSS Tabela (table) - continuação

CSS Introdução

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to CSS Introdução

Similar to CSS Introdução (20)

More from Sergio Finamore

More from Sergio Finamore (11)

CSS Introdução