Css completo(2)

1

Profª Letícia Régis Di Maio

[email protected]

CSS – 1ª aula07.10.10

2

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.).


[email protected]

3

Existem 3 formas para aplicar estilos a documentos XHTML:

- Local (inline)

- Incorporado (embedded)

- Externo (linked)


[email protected]

CSSTipos de CSS

4

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


[email protected]

CSSTipos de CSS – Local (inline)

5

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 ( );


[email protected]

CSSTipos de CSS – Incorporado (embedded)

6

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>


[email protected]

CSSTipos de CSS – Externo (linked)

7

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”.


[email protected]

CSSTipos de CSS – Observações

8

<?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>


[email protected]

CSSTipos de CSS – Aplicando estilo Local (inline)

9

<?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>


[email protected]

CSSTipos de CSS – Aplicando estilo Incorporado (embedded)

10

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 ; }


[email protected]

CSSTipos de CSS – Aplicando estilo Externo (linked)

11

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>


[email protected]

CSSTipos de CSS – Aplicando estilo Externo (linked) - continuação

12

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”.


[email protected]

CSSValidação do arquivo CSS:

13

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.


[email protected]

CSSTipos de CSS – Aplicando estilo a múltiplas tags

14

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).


[email protected]

CSSDefinindo classes

15

<?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>


[email protected]

CSSDefinindo classes

16

É ú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.


[email protected]

CSSClasse de seletores

17

<?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>


[email protected]

CSSClasses de seletores - continuação

18

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 */

}


[email protected]

CSSUnidades de Medida

19

% : 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.


[email protected]

CSSUnidades de Medida Relativa

20

cm : centímetros

mm : milímetros

in : polegada

pt : pontos (equivalente a 1/72 polegadas)

pc : paica (equivalente a 12 pontos)


[email protected]

CSSUnidades de Medida Absoluta

21

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


[email protected]

CSSCores

22

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 : #00FF00maroon : #800000navy : #000080olive : #808000purple : #800080red : #FF0000silver : #C0C0C0teal : #008080white : #FFFFFFyellow : #FFFF00


[email protected]

CSSCores - continuação

23

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.


[email protected]

CSSModelos de Caixas (Box Model)

24

Graficamente, poderíamos representar o modelo de caixas como:

margin (margem)

conteúdo

width (largura)

height (altura)

border (borda)

padding (espaçamento)


[email protected]

CSSModelos de Caixas (Box Model) – continuação

25


[email protected]

CSSMargem (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

26

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">


[email protected]

CSSMargem (margin) - continuação

27

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


[email protected]

CSSBorda (border)

28

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


[email protected]

CSSBorda (border) - continuação

29

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 ;

}


[email protected]

30

<?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>


[email protected]

31


[email protected]

32

Propriedades:

- padding- padding-top- padding-right- padding- bottom- padding-left

Valores: unidades de medida: % ; em ; px ; cm; mm; in ; pt ; pc


[email protected]

CSSEspaçamento (padding)

33

<?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>


[email protected]

34

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.


[email protected]

CSSPosição (position)

35

-top- auto: o navegador decide a distância do elemento para o topo - unidades de medida: % ; em ; px ; cm; mm; in ; pt ; pc

- bottom (não se recomenda seu uso. Utilize a propriedade “top”)- auto: o navegador decide a distância do elemento para a base - unidades de medida: % ; em ; px ; cm; mm; in ; pt ; pc

- left- auto: o navegador decide a distância do elemento para a esquerda - unidades de medida: % ; em ; px ; cm; mm; in ; pt ; pc

- right (não se recomenda seu uso. Utilize a propriedade “left”)- auto: o navegador decide a distância do elemento para direita - unidades de medida: % ; em ; px ; cm; mm; in ; pt ; pc

- z-index : um elemento com valor numérico de “z-index” maior, será sobreposto a outro elemento com “z-index” menor. Isto fornece uma “sensação” de tridimensionalidade em relação aos elementos posicionados numa mesma posição da tela.


[email protected]

CSSPosição (position) - continuação

36

<?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>


[email protected]

37


[email protected]

38

<?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>


[email protected]

39


[email protected]

40


[email protected]

CSSCursor

41

Um cursor é uma imagem “.cur” ou “.ani” (para cursores animados). No diretório “C:\WINDOWS\Cursors” 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 .


[email protected]

CSSCursor - continuação

42

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


[email protected]

CSSTexto (text)

43

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)


[email protected]

CSSTexto (text) - continuação

44

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 .


[email protected]

CSSTexto (text) - continuação

45

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


[email protected]

CSSFonte (font)

46

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).


[email protected]

CSSFonte (font) - continuação

47

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”


[email protected]


48

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 .


[email protected]


49

Propriedade:

- color

Valores: as cores RGB.


[email protected]

CSSCor (color)

50

<?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>


[email protected]

51

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


[email protected]

CSSFundo (background)

52

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.


[email protected]

CSSFundo (background) - continuação

53

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 .


[email protected]


54

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>


[email protected]


55

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


[email protected]

CSSAltura (height) e Largura (width)

56

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


[email protected]

CSSTabela (table)

57

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


[email protected]

CSSTabela (table) - continuação

58

- 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


[email protected]


59

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


[email protected]

Documents

Css completo(2)