Autor: Fernando Vaz de Lima Pereira · 4 Propriedades CSS A partir de agora estudaremos as propriedades da CSS, através delas poderemos alterar fontes, cores, posicionamento e até

Autor: Fernando Vaz de Lima Pereira

Sumário 1 Introdução.........................................................................................................................................4

1.1 Estrutura....................................................................................................................................4 1.2 Sintaxe do CSS.........................................................................................................................4 1.3 Seletores....................................................................................................................................4 1.4 Propriedades..............................................................................................................................5 1.5 Comentários..............................................................................................................................5 1.6 Aplicando vários seletores simultaneamente............................................................................5

2 Criação de classes e id......................................................................................................................6 2.1 Começando com Classes..........................................................................................................6 2.2 Finalizando com ID..................................................................................................................6

3 Ligando o CSS ao HTML.................................................................................................................7 3.1 CSS Importado..........................................................................................................................7 3.2 CSS Incorporado.......................................................................................................................7 3.3 CSS Inline.................................................................................................................................8

4 Propriedades CSS.............................................................................................................................8 4.1 Font...........................................................................................................................................8 4.2 Atividade.................................................................................................................................11

5 Backgrounds...................................................................................................................................12 5.1 Propriedades backgrounds......................................................................................................12 5.2 Background-color...................................................................................................................12 5.3 Background-image..................................................................................................................13 5.4 Background-image repetindo horizontalmente, verticalmente e sem repetição.....................14 5.5 Repeat-X.................................................................................................................................14 5.6 Repeat-Y.................................................................................................................................15 5.7 Repeat-no................................................................................................................................16 5.8 Background-position...............................................................................................................18 5.9 Background-attachment..........................................................................................................20 5.10 Atividade...............................................................................................................................23

6 Propriedades de Texto.....................................................................................................................24 6.1 Propriedade color....................................................................................................................24 6.2 Propriedade de Alinhamento de Texto (Align).......................................................................24 6.3 Propriedade Text-Decoration..................................................................................................25 6.4 Propriedade Text-Transform...................................................................................................26 6.5 Propriedade Text-Indent..........................................................................................................27 6.6 Propriedade Text-shadow........................................................................................................27 6.7 Propriedade Vertical-Align.....................................................................................................29 6.8 Propriedade White-Space........................................................................................................29 6.9 Propriedade Word-Spacing.....................................................................................................30 6.10 Atividade...............................................................................................................................31

7 Propriedade Border.........................................................................................................................32 7.1 Border-Style............................................................................................................................32 7.2 Propriedade Border-Color.......................................................................................................34 7.3 Propriedade Border-Width......................................................................................................35 7.4 Atividade.................................................................................................................................36

8 Propriedade Margin........................................................................................................................37 8.1 Os elementos da propriedade Margin.....................................................................................37 8.2 CSS Margin individual:..........................................................................................................37 8.3 CSS Margin abreviada............................................................................................................37

9 Propriedade Padding.......................................................................................................................39

9.1 CSS Padding Individual..........................................................................................................40 9.2 CSS Padding Abreviada..........................................................................................................40 9.3 Atividade.................................................................................................................................42

10 Propriedade Float..........................................................................................................................43 10.1 Propriedade Clear.................................................................................................................44 10.2 Propriedade Overflow...........................................................................................................48 10.3 Atividade...............................................................................................................................51

11 Propriedade List............................................................................................................................53 11.1 Propriedades de listas da regra CSS......................................................................................53 11.2 Valores para serem aplicados na propriedade List................................................................53 11.3 List-style-image....................................................................................................................53 11.4 list-style-position...................................................................................................................54 11.5 List-style-type.......................................................................................................................54 11.6 Atividade...............................................................................................................................57

12 CSS Links.....................................................................................................................................58 12.1 Propriedade Text-Decoration................................................................................................59 12.2 Atividade...............................................................................................................................61

13 Posicionando elementos em CSS.................................................................................................62 13.1 Position fixed........................................................................................................................62 13.2 Position relative....................................................................................................................64 13.3 Posicionamento absolute.......................................................................................................67 13.4 Position static........................................................................................................................70 13.5 Propriedade z-index..............................................................................................................71 13.6 Atividade...............................................................................................................................74

14 Regras CSS para Tabelas..............................................................................................................75 14.1 Propriedades CSS para Table................................................................................................75

1 Introdução

A CSS ou (Cascading Style Sheet) é uma ferramenta utilizada para construir toda a aparência de páginas em HTML. Traduzindo para o português o significado de Cascading Style Sheet é Folha de Estilo em Cascata e hoje se tornou indispensável para qualquer desenvolvedor de sites, pois seus recursos otimizam a produtividade e tornam a codificação mais legível e organizada.

1.1 Estrutura

A linguagem CSS possui uma declaração com sintaxe própria, que indica como o estilo deverá ser aplicado aos elementos do HTML. Ela é composta por três partes distintas:

• Seletor• Propriedade• Valor

1.2 Sintaxe do CSS

seletor { propriedade: valor;}

Na sintaxe de uma regra em CSS, é necessário escrever o seletor, abrir chaves, digitar a propriedadesucedida por dois pontos e configurar o valor fechando-o com ponto e vírgula. Se o valor for uma palavra composta, ele deverá estar sempre entre aspas duplas ou simples.

P {font – family: “Comic Sans MS”;}

Para que haja um melhor entendimento e organização do código CSS, é aconselhável o uso de uma linha para escrever cada uma das declarações.

P {text-align: right;color: #006400;}

1.3 Seletores

São identificados genericamente por uma tag de HTML, por uma classe ou por um ID.

Exemplo:h1 { propriedade: valor;}#topo { propriedade: valor;}.artigo { propriedade: valor;}

1.4 Propriedades

É um atributo do elemento HTML onde será aplicada a regra de estilo.

Exemplo:h1 { color: valor;}

Valores

É o estilo que será configurado pela propriedade, ou seja, uma cor, uma fonte ou um posicionamento.

Exemplo:h1 { color: #00BFFF;}

1.5 Comentários

Dentro do código em CSS, também é possível inserir comentários no caso de haver a necessidade de uma código mais detalhado. É muito importante lembrar que um comentário não é executado pelo navegador.

Sintaxe:

/* comentário do código */

p {color: #FFF;}

1.6 Aplicando vários seletores simultaneamente

Existem alguns casos em que uma regra CSS possui vários seletores, neste caso é possível utilizar o recurso de agrupá-los semparando-os por vírgula.

Sintaxe:

h1, h2, h3, h4, h5 {color: #FF0000;}

2 Criação de classes e id

2.1 Começando com Classes

Para aplicar regras e estilos no CSS não é necessáriose limitar apenas aos elementos HTML (TAGS), também é possível criar classes e id's de seletores com qualquer nome e definindo suas regras. A sintaxe para uma classe de seletores é um elemento HTML juntamente de mais um nome precedido de um ponto.

Sintaxe:

elementoHTML.<nome da classe>{propriedade: valor;}Os nomes das classes não podem possuir números ou caracteres especiais, recomanda-se apenas o uso de letras.

H1.vermelho {color: #FF0000;}

No exemplo teríamos a seguinte regra aplicada no documento HTML:

<h1 class = “vermelho”>Este cabeçalho é vermelho!</p>

Outro exemplo de aplicação de classes em CSS é aplicá-la a qualquer elemento HTML, desta formabasta apenas omitir o nome do elemento e nomear apenas a classe:

.laranja {color: #FFA500;}

A seguir temos o exemplo do código no documento em HTML:

<h4 class=”laranja”>Este cabeçalho ficou laranja!!</h4>

2.2 Finalizando com ID

Este tipo de seletor é diferenciado da classe por ser único, podendo ser aplicado a somente um elemento HTML dentro do documento. Pode-se criar qualquer nome para as ID's e como sintaxe básica para o seletor segue-se o nome do ID precedido de (#).

#meuid {propriedade: valor;}

3 Ligando o CSS ao HTML

A principal vantagem de se trabalhar com CSS no desenvolvimento de sites para web é o fato de poder utilizar o mesmo estilo para várias páginas ou até mesmo sites diferentes. Existem três formasde incorporar as regras CSS ao HTML, são elas:

• Importadas• Incorporadas• Inline

3.1 CSS Importado

As regras CSS são importadas quando são declaradas em um documento externo, ou seja, fora do documento HTML. Desta forma a folha de estilo é criada em um arquivo separado do arquivo .htmle deve ter a extensão .css. Nesta técnica pode-se aplicar o estilo criado a vários sites ou paginas sema necessidade de edição individual. Para fazer o vínculo do arquivo .css ao .html deve-se incluir a seguinte linha de código no documento .html:

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

Desta maneira o navegador interpretará as regras do arquivo denominado estilo.css e aplicará a formatação no documento.

3.2 CSS Incorporado

Com este processo é possível aplicar regras de CSS somente no próprio documento onde está sendo declarado. Segue a sintaxe do CSS incorporado:

<head><style>body {background:#EE0000;}h2 {color: #00CC00;}</style></head>

3.3 CSS Inline

Neste caso as regras CSS são incorporadas dentro da tag do elemento HTML. Com este procedimento são perdidas muitas vantagens da CSS, pois o conteúdo é misturado com a apresentação, ocasionando muito mais trabalho ao desenvolvedor.

<p style=”color: #CC9900; font-size: 14px;”>Neste exemplo teremos um parágrafo marrom com fonte tamanho 14</p>

4 Propriedades CSS

A partir de agora estudaremos as propriedades da CSS, através delas poderemos alterar fontes, cores, posicionamento e até mesmo animar elementos.

4.1 FontAs propriedades de fontes das regras da CSS, definem as características dos caracteres que constituem os textos que compõem a página HTML.

As propriedades básicas para as fontes são:

color Cor da fonte

font-family Tipo de fonte

font-size Tamanho da fonte

font-style Estilo da fonte

font-variant Fontes maiúsculas e de menor altura2

font-weight Escurecimento da fonte (negrito)

font Maneira abreviada para todas as propriedades

Abaixo temos os exemplos dos valores para cada propriedade de fonte existente na CSS:

color

• Código hexadecimal: #FFFFFF;

• Código RGB: rgb(0-255,0-255,0-255);

• Nome da cor: red, blue, green.

font-family

• family-name: define pelo nome da fonte (courier, arial, verdana, etc);

• generic-family: define pelo nome genérico (sans-serif, cursive, serif, etc).

font-size

• xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger;

• length: tamanho da fonte nas medidas px, pt, em, cm.

font-style

• Normal: fonte normal na vertical;

• italic: fonte inclinada;

• Oblique: fonte oblíqua.

font-variant

• Normal: fonte normal;

• Small-caps: transforma em maiúsculas fontes de tamanhos menores.

font-weight

• Normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

Exemplo de aplicação das regras CSS nas fontes do código de uma página HTML:

<!doctype html>

<html lang=”pt-BR”>

<head>

<meta charset=”UTF-8”>

<link rel=”stylesheet” type=”text/css” href=”estilo1.css”>

<title>Regras CSS com Fontes</title>

</head>

<body>

<h1>Título com letras verdes</h1>

<h2>Título com letras vermelhas</h2>

<h3>Título com letras laranja</h3>

<p>Neste trecho você verá outras aplicações de regra CSS</p>

</body>

</html>

Salve o arquivo HTML como pag1.html, observe no código HTML que usaremos uma ligação importada, ou seja, o arquivo de estilo CSS está fora do código HTML.

Crie um novo arquivo em seu editor e salve-o como estilo1.css na mesma pasta em que está gravadoo arquivo pag1.html. Digite as regras da CSS como mostra o exemplo abaixo:

h1 {

color: #32CD32;

}

h2 {

color: #FF0000;

}

h3 {

color: #FFA500;

}

p {

font-size: 14px;

color: #1E90FF;

font-family: Verdana;

font: italic;

}

Resultado:

4.2 Atividade

Através do modelo abaixo aplique as seguintes regras:

• h1 – Fonte Verdana, cor Verde.

• h2 – Fonte Arial, cor Cinza.

• Class = “primeiro” - Fonte Comic Sans MS, cor Azul, estilo negrito, tamanho 12.

• Class = “segundo” - Fonte Verdana, cor vermelho, estilo itálico, tamanho 10.

• Class = “terceiro” - Fonte Arial, cor amarelo, estilo oblíqua, tamanho 14.

• Class = “quarto” - Fonte Courier New, cor cinza, estilo negrito, tamanho 16.

<h1>Coragem</h1>

<h2>Um Dia (David Nicholls)<h2>

<p class=”primeiro”>Só o resto das nossas vidas se abrindo a nossa frente- comentou ela sonolenta,sentindo o cheiro dele, morno, fresco e maravilhoso, e ao mesmo tempo com um arrepio de ansiedade percorrendo se corpo ao pensar no que estava por vir: uma vida adulta e independente. Mas ela não se sentia adulta.</p>

<p class=”segundo”>> Não estava preparada, de jeito nenhum. Era como se algum alarme de incêndio tivesse disparado de madrugada e ela se encontrasse no meio da rua com as roupas emboladas no braço. Se não tinha aprendido nada, o que iria fazer? </p><p class=”terceiro”>Como preencheria os próximos dias? não tinha a menor ideia. “o negócio era ser corajosa e ousada e realizar alguma coisa”, pensou consigo mesma. Não exatamente mudar o mundo, só um pouco à sua volta. Sair por ai com o diploma com honras de primeiro lugar em duas matérias, muita paixão e a nova máquina de escrever elétrica Smith Corona e trabalhar duro em… alguma coisa. </p><p class=”quarto”>Mudar a vida das pessoas através da arte, talvez. Escrever coisas bonitas. Agradar aos amigos, continuar fiel aos próprios princípios, viver plenamente, bem e com paixão. experimentar coisas novas. Amar e ser amada, se possível. Comer com moderação. Coisas assim.</p>

5 BackgroundsA propriedade background no CSS é utilizada para definir os efeitos de plano de fundo de um elemento ou página em HTML.

5.1 Propriedades backgroundsOs efeitos de background no CSS são:

• background-color

• background-image

• background-repeate

• background-attachment

• background-position

5.2 Background-colorA propriedade background-color especifica a cor de fundo do elemento de uma página ou da própriapágina do site. Observe o exemplo abaixo

<!doctype html>


<head>


<style>

body {

background-color: #EEE0E5;

}

</style>

</head>

<body>

<h1>Minhas propriedades CSS!</h1>

<p>Olá pessoal este é um exemplo desenvolvido por mim!!</p>

</body>

</html>

Resultado:

Neste exemplo aplicamos uma cor com tom arroxeado no fundo da página inteira do site

5.3 Background-imageA propriedade de background-image insere uma imagem para ser utilizada como plano de fundo deum elemento ou página do site.

Por padrão, as imagens são repetidas para cobrir todo o elemento.

No exemplo abaixo colocaremos uma imagem de fundo na página.

<!doctype html>


<head>


<style>

body {

background-image:url(”fundo.jpg”);

}

</style>

</head>

<body>



</body>

</html>

5.4 Background-image repetindo horizontalmente, verticalmente e sem repetição

5.5 Repeat-XExistem casos em que devemos repetir imagens verticalmente ou horizontalmente para que atendama uma determinada composição de layout de página web. No exemplo abaixo temos uma imagem com extensão .png gerada para fazer o preenchimento de fundo de uma página.

Neste caso faremos o preenchimento do fundo horizontalmente e utilizaremos a propriedade repeat-x.

<!doctype html>

<html lang="pt-BR">

<head>

<meta charset="UTF-8">

<style>

body {

background-image:url("gradiente.png");

background-repeat:repeat-x;

}

</style>

</head>

<body>



</body>

</html>

Resultado:

5.6 Repeat-YPodemos utilizar também a propriedade repeat-y, onde a imagem será repetida verticalmente à medida em que o conteúdo do site for se estendendo para baixa da página.

<!doctype html>

<html lang="pt-BR">

<head>


<style>

body {

background-image:url("gradiente.png");

background-repeat:repeat-y;

}

</style>

</head>

<body>



</body>

</html>

Resultado:

5.7 Repeat-noExiste também a possibilidade de não repetir uma imagem e alinhá-la à esquerda do site, neste propriedade usaremos o repeat-no para aplicar a regra citada. Lembro que por padrão a imagem é alinhada à esquerda, mais adiante estudaremos como alinhar em outras posições da página.

<!doctype html>

<html lang="pt-BR">

<head>


<style>

body {

background-image:url("menino.png");

background-repeat:no-repeat;

}

</style>

</head>

<body>



</body>

</html>

Resultado:

5.8 Background-positionNesta propriedade pode-se posicionar os elementos de fundo (imagens) em vários locais da página web, para isso será necessário o uso de alguns valores:

• top – topo da página

• bottom – rodapé da página

• right – lado direito

• left – lado esquerdo

• center – centro

No exemplo abaixo a imagem estará posicionada ao centro e no topo da página:

<!doctype html>

<html lang="pt-BR">

<head>


<style>

body {



background-position: top center;

}

</style>

</head>

<body>



</body>

</html>

Resultado:

Outra opção é a mesclagem de propriedades, pode-se aplicar cores de fundo juntamente com o uso de imagens:

<!doctype html>

<html lang="pt-BR">

<head>


<style>

body {



background-position: top center;

background-color:#CDC8B1;

}

</style>

</head>

<body>



</body>

</html>

No exemplo abaixo foi aplicada uma cor de tom cinza para o fundo e a imagem sobre o colorido.

Resultado:

5.9 Background-attachment

Esta propriedade especifica se uma imagem de fundo ficará fixa ou rolará juntamente com a página,para isso são necessários dois valores para a propriedade:

• Fixed

• Scroll

Neste exemplo iremos simular uma grande quantidade de texto onde haverá a necessidade do usuário utilizar a barra de rolagem para poder visualizá-lo, porém a imagem ficará fixa no topo à direita da página em decorrência ao valor fixed empregado à propriedade background- attachment:

<!doctype html>

<html lang="pt-BR">

<head>


<style>

body {

background-image:url("HardDrive.png");


background-position: right top;

background-color:#CDC8B1;

background-attachment:fixed;

}

</style>

</head>

<body>
































</body>

</html>

Resultado:

5.10 Atividade1. Crie o layout abaixo deixando o menu fixo no topo e ao centro da página e o conteúdo “rolando” por trás dele.

2. Crie o layout abaixo deixando a imagem fixa à esquerda no topo da página com o conteúdo rolando por cima.

6 Propriedades de Texto

As propriedades de texto são utilizadas para formatar posicionamentos, comportamentos, espaçamentos, decorações e cores.

6.1 Propriedade color

A propriedade color é usada para aplicar cor ao texto, em CSS podemos especificar os valores das cores das seguintes maneiras:

• Valor Hexadecimal - #ff0000;• Valor RGB - “rgb(255,0,0)”;• Valor por nome – green;

Sintaxe:

body {color: #9932CC ;}

h1 {color: #6A5ACD ;}

Resultado:

6.2 Propriedade de Alinhamento de Texto (Align)

Através desta propriedade podemos formatar o alinhamento horizontal do texto da página HTML. Otexto pode ser centralizado, alinhado à esquerda, direita ou justificado.

Sintaxe:

h1 {text-align: center;}p.primeiro {text-align: right;}

p.segundo{text-align: left;}p.terceiro{text-align: justify;}

Resultado:

6.3 Propriedade Text-Decoration

Esta propriedade é utilizada para remover decorações do texto, como, por exemplo, marcadores de listas e undelines de links.O valor que pode ser empregado é:

• none – nenhuma decoração

Sintaxe:

a {text-decoration: none;}

Também é possível aplicar decorações ao texto através desta propriedade, seguem os valores abaixo:

• underline – texto sublinhado• overline – texto sobrelinhado• line-through – linha sobre o texto• blink – efeito de texto piscante

Sintaxe:

h1 {text-decoration: overline;}

h2 {text-decoration: line-through;}

h3 {

text-decoration: underline;}

Resultado:

6.4 Propriedade Text-Transform

A propriedade text-transform é utilizada para especificar letras maiúsculas, minúsculas e capitalizar as letras iniciais de um texto, os valores são os seguintes:

• none: texto normal;• uppercase: todas as letras do texto em maiúscula;• lowercase: todas as letras do texto em minúscula;• capitalize: todas as letras iniciais do texto em maiúscula.

Sintaxe:

p.minusculo {text-transform: lowercase;}p.maiusculo{text-transform:uppercase;}p.capitalize {text-transform: capitalize;}

Resultado:

6.5 Propriedade Text-Indent

Esta propriedade é usada para formatar e especificar o recuo da primeira linha de um texto.

Sintaxe:

p {text-indent: 60px;}

Resultado:

6.6 Propriedade Text-shadow

Com esta propriedade é possível configurar vários tipos de sombreados no texto de uma página em HTML.

Valores da propriedade text-shadow:

• h-shadow – Define a posição horizontal do sombreado em relação ao texto que está em primeiro plano, este valor é declarado em px e pode ser negativo.

• v-shadow – Define a posição vertical do sombreado em relação ao texto que está em primeiro plano, este valor é declarado em px e pode ser negativo.

• blur-radius – Define um “borrão” por trás do texto, seu valor inicial é 0 e sua declaração é feita em px.

• color – Define a cor do sombreado.• none – Valor padrão, sem sombreado.• Initial – Define a propriedade text-shadow como padrão.

Sintaxe:

h1 {text-shadow: h-shadow v-shadow blur-radius color;

}

Exemplos:

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>CSS - Sombreado</title> <style> h1.sombrah { text-shadow:2px 2px red; }

h1.sombrav { text-shadow: 5px 5px green; }

h1.brilho { text-shadow: 5px 5px 5px blue; }

</style> </head> <body> <h1 class="sombrah">Este sombreado é formato horizontal</h1> <h1 class="sombrav">Este sombreado é formato vertical</h1> <h1 class="brilho">Este é um brilho por trás do texto</h1> </body> </html>

Resultado:

6.7 Propriedade Vertical-Align

Esta propriedade configura um alinhamento vertical a um elemento do HTML.

Valores da propriedade vertical-align

• baseline – Alinha a base do elemento ao elemento pai, este é o padrão da propriedade.• length - Aumenta ou reduz um elemento pelo comprimento especificado. Os valores

negativos são permitidos.• % - Aumenta ou reduz um elemento em um por cento da propriedade "line-height". Os

valores negativos são permitidos.• sub – Alinha o elemento como subescrito ao texto.• super – Alinha o elemento como superescrito ao texto.• top - A parte superior do elemento será alinhada com a parte superior do elemento mais alto

na linha.• text-top - A parte superior do elemento será alinhada com a parte superior da fonte do

elemento pai.• middle – O elemento é colocado no meio do elemento pai.• bottom – O elemento é alinhado a outro elemento mais baixo da linha.• text-bottom – O elemento é alinhado relativo à parte inferior da fonte do elemento pai.• initial – Configura o valor padrão do elemento.

6.8 Propriedade White-Space

Especifica um espaço em branco dentro do elemento.

Valores da propriedade white-space:

• normal – Neste valor os espaços em branco são ignorados pelo navegador.• pre – Os espaços em branco serão considerados pelo navegador;• nowrap – O texto é apresentado em uma única linha até que se aplique uma tag <br>

Resultado com o valor pre ou nowrap:

Resultado com valor normal:

6.9 Propriedade Word-Spacing

Com esta propriedade da CSS, pode-se definir espaços entre as palavras de um texto de página em HTML.Valores da propriedade word-spacing:

• normal – Espaçamento padrão• length – Define a quantidade de espaço entre as palavras do texto nas medidas px, pt, em ou

cm.

Resultado com 60px de espaço entre as palavras:

6.10 Atividade

Digite o poema de Luis de Camões e aplique as regras da CSS necessárias para que o texto fique com a mesma formatação do exemplo abaixo:

Poema de Luis de Camões

O amor é fogo que arde sem se ver.

Amor é fogo que arde sem se ver;É ferida que dói, e não se sente;É um contentamento descontente;É dor que desatina sem doer.

É um não querer mais que bem querer;É um andar solitário entre a gente;É nunca contentar-se de contente;É um cuidar que se ganha em se perder.

É querer estar preso por vontade;É servir a quem vence, o vencedor;É ter com quem nos mata, lealdade.

Mas como causar pode seu favorNos corações humanos amizade,Se tão contrário a si é o mesmo Amor?

7 Propriedade BorderA propriedade border permite especificar o estilo, tamanho e cor dos elementos que compõem as bordas.

7.1 Border-Style A propriedade border-style, especifica o tipo de borda que será mostrada pelo navegador Web.

Valores:

• none: Nenhuma borda

• dotted: Define um tipo de borda pontilhada

• dashed: Define um tipo de borda tracejada

• solid: Define uma borda sólida

• double: Define uma borda dupla

• groove: Define um efeito 3D entalhado. O efeito depende do valor border-color.

• ridge: Define um efeito 3D inserindo um sombreado na parte inferior externa da borda. O

efeito depende do valor border-color

• inset: Define um efeito 3D em baixo relevo. O efeito depende do valor border-color

• outset: Define um efeito 3D inserindo um alto relevo. O efeito depende do valor border-

color

• hidden: Define um estilo de borda “invisível”

Existem casos onde a regra é somente aplicada a uma determinada posição da borda (superior, inferior, direita e esquerda), para estes casos deve-se inserir as propriedades de posicionamento juntamente com a propriedade de estilo da borda:

• border-right-style: Aplica o estilo da regra CSS à direita da borda

• border-left-style: Aplica o estilo da regra CSS à esquerda da borda

• border-top-style: Aplica o estilo da regra CSS ao topo da borda

• border-bottom-style: Aplica o estilo da regra CSS ao topo da borda

<!doctype html>


<head>


<title>Estilos de Bordas</title>

<style>

p.semborda {border-style: none;}

p.pontilhada {border-style: dotted;}

p.linhas {border-style: dashed;}

p.solida {border-style: solid;}

p.dupla {border-style: double;}

p.chanfro1{border-style: groove;}

p.chanfro2 {border-style: ridge;}

p.chanfro3{border-style: inset;}

p.chanfro4{border-style: outset;}

p.invisivel{border-style: hidden;}

</style>

</head>

<body>

<p class="semborda">Exemplo sem borda</p>

<p class="pontilhada">Exemplo de borda pontilhada</p>

<p class="linhas">Exemplo de borda com linhas pontilhadas</p>

<p class="solida">Exemplo de borda sólida</p>

<p class="dupla">Exemplo de borda dupla</p>

<p class="chanfro1">Exemplo de 3D com chanfro superior externo</p>

<p class="chanfro2">Exemplo de 3D com chanfro inferior externo</p>

<p class="chanfro3">Exemplo de 3D com chanfro mais forte superior</p>

<p class="chanfro4">Exemplo de 3D com chanfro mais forte inferior</p>

<p class="invisivel">Exemplo de borda invisível</p>

</body>

</html>

Resultado:

7.2 Propriedade Border-Color

Define a cor das bordas de um determinado elemento de página HTML.

Os valores das cores podem ser declarados em:

• Hexadecimal: #CCCCCC;

• RGB: rgb(255, 200, 10);

• Nome da cor: green, red, yellow, gray;

Existem casos onde a regra é somente aplicada a uma determinada posição da borda (superior, inferior, direita e esquerda), para estes casos deve-se inserir as propriedades de posicionamento juntamente com a propriedade de cor da borda:

• border-right-color: Aplica a cor da regra CSS à direita da borda

• border-left-color: Aplica a cor da regra CSS à esquerda da borda

• border-top-color: Aplica a cor da regra CSS ao topo da borda

• border-bottom-style: Aplica a cor da regra CSS ao topo da borda

7.3 Propriedade Border-WidthEsta propriedade define a espessura da borda de um determinado elemento.

Valores:

• thin: borda fina

• medium: borda média

• thick: borda grossa

• length: espessura da borda, medida em px, pt, em ou cm

Existem casos onde a regra é somente aplicada a uma determinada posição da borda (superior, inferior, direita e esquerda), para estes casos deve-se inserir as propriedades de posicionamento juntamente com a propriedade de espessura da borda:

• border-right-width: Aplica a espessura da regra CSS à direita da borda

• border-left-width: Aplica a espessura da regra CSS à esquerda da borda

• border-top-width: Aplica a espessura da regra CSS ao topo da borda

• border-bottom-width: Aplica a espessura da regra CSS ao topo da borda

7.4 AtividadeCrie os estilos das bordas da página Web do exemplo abaixo:

8 Propriedade MarginA propriedade margin da CSS, define os espaços ao redor de um elemento de página HTML. As margens limpam uma área em torno do elemento em relação a sua borda. A propriedade margin nãopossui cor de fundo e são completamente transparentes.

8.1 Os elementos da propriedade MarginExistem duas maneiras de se compor as regras CSS com a propriedade margin, individualmente e abreviada:

8.2 CSS Margin individual:No caso da declaração individual é necessário declarar os lados do elemento em que será aplicada a regra CSS. Estes valores podem ser declarados em px, cm, em,% ou auto (valor padrão da margem):

margin-top: 50px;

margin-bottom: 70px;

margin-left: 70px;

margin-right: 100px;

8.3 CSS Margin abreviadaNeste caso declaramos apenas a propriedade padrão margin e as medidas de cada lado na mesma linha na seguinte ordem:

Top, right, bottom, left.

margin: 50px 70px 70px 100px;

Exemplo:

<!doctype html>

<html lang="pt-BR">

<head>


<title>Trabalhando com a propriedade MARGIN</title>

<style>

img.lost {

margin-top:70px;

margin-right:20px;

margin-bottom:100px;

margin-left:30px;

}

img.ai{

margin-top:70px;

margin-right:20px;

margin-left:20px;

margin-bottom:100px;

}

</style>

</head>

<body>

<h1>Posicionando imagens</h1>

<img class="lost"src="lost.jpg" alt="lost"><img class="ai" src="ai.jpg" alt="ai">

</body>

</html>

Resultado:

9 Propriedade PaddingA propriedade da CSS padding define o espaço entre a borda e o conteúdo dos elementos. Observando o exemplo abaixo podemos compreender a função de cada propriedade da regra CSS relativa aos elementos de pa ina.ǵ

Como a propriedade margin, a propriedade padding também pode ser declarada de maneira individual ou abreviada:

9.1 CSS Padding IndividualExemplos de valores para cada propriedade de padding:

• auto, px, cm, em ou %

img {padding-top: 25px;padding-right: 50px;padding-bottom: 25px;padding-left: 50px;}

9.2 CSS Padding Abreviada

p{

padding: 30px 70px;

}

Digite o código abaixo:

<!doctype html>

<html lang="pt-BR">

<head>


<title>Trabalhando com a propriedade PADDING</title>

<style>

.box {

width:300px;

height:200px;

background-color:#FAFAD2;

margin-top:50px;

margin-left:50px;

}

p.artigo{

padding-top:50px;

padding-left:10px;

padding-bottom:20px;

padding-right:10px;

}

</style>

</head>

<body>

<h1>Posicionando elementos</h1>

<div class="box">

<p class="artigo">Este é um parágrafo de demonstração para ilustrar o efeito da aplicação

da regra CSS com a propriedade PADDING</p>

</div>

</body>

</html>

Resultado:

9.3 AtividadeAgora vamos colocar todo o conhecimento em prática. Desenvolva o layout abaixo utilizando os recursos da regra CSS listadas abaixo:

Largura da página – 1024px;

Conteúdo centralizado;

Todos os elementos fazem parte de uma camada “pai”

1024 px

10 Propriedade Float A propriedade float especifica se um elemento de página deve flutuar para um determinado lado do site.

A propriedade float possui os seguintes valores:

none – Valor padrão o elemento não flutua na página

left – o elemento flutua para a posição da esquerda

right – o elemento flutua para a posição da direita

No exemplo abaixo demonstrarei o uso da propriedade float aplicada sobre uma lista e com o resultado de um menu horizontal:

<!doctype html>

<html lang="pt-BR">

<head>


<title>Trabalhando com o elemento float</title>

<style>

ul {

float: left;

width: 100%;

padding: 0;

margin :0;

list-style-type: none;

}

a {

float: left;

width: 150px;

text-decoration: none;

color: white;

background-color: purple;

padding: 10px 50px;

border-right: 1px solid white;

}

</style>

</head>

<body>

<ul>

<li><a href="#">Item 01</a></li>




</ul>

</body>

</html>

Resultado:

Neste exemplo a propriedade float aplica a regra CSS {float:left;} nos elemento de lista <ul> e link <a> e flutua cada um para a esquerda da página.

10.1 Propriedade ClearA propriedade clear é usada para controlar o comportamento dos elementos flutuantes. Usamos a propriedade clear para evitar que elementos “floats” flutuem em torno de outro elemento, através desta propriedade é possível definir em que lados de um elemento flutuante, não é permitido flutuar.

No exemplo abaixo temos uma div com largura de 280px e um parágrafo que irá flutuar à sua volta,pois a propriedade atribuída à camada é o float com valor left:

<!doctype html>

<html lang="pt-BR">

<head>


<title>Trabalhando com a propriedade Clear</title>

<style>

#figura1 {

float:left;

width:280px;

}

</style>

</head>

<body>

<h1>Linus Torvalds</h1>

<div id="figura1"><img src="linus_torvalds.jpg" alt="linus">

</div>

<p>Torvalds nasceu em Helsínquia, na Finlândia. Filho, ateu, dos jornalistas Anna e Nils Torvalds,e neto do poeta Ole Torvalds. Seus pais eram radicais do campus da Universidade de Helsínquia, na década de 1960. Sua família pertence à minoria de língua sueca (5,5 % da população da Finlândia).

Torvalds frequentou a Universidade de Helsínquia, entre 1988 e 1996, graduando-se com um Mestrado em Ciência da Computação a partir do grupo de pesquisa NODES.Sua carreira académica foi interrompida após seu primeiro ano de estudo, quando ele se juntouao Exército da Finlândia. No exército ocupa o posto de segundo tenente, com o papel de um oficial de cálculo balístico. Em 1990, ele retomou seus estudos universitários, e foi exposto a UNIX pelaprimeira vez, através de um computador DEC MicroVAX com o sistema ULTRIX. Sua tese de Mestrado em Ciências de Computação foi intitulada Linux: um sistema operacional portátil.</p>

</body>

</html>

Resultado:

No próximo exemplo usaremos uma classe ao elemento HTML <p> onde aplicaremos a propriedade clear, este propriedade possui 4 valores específicos:

• left – Não permite elementos flutuantes do lado esquerdo.

• right – Não permite elementos flutuantes do lado direito.

• both – Não permite elementos flutuantes em nenhum lado do elemento.

• none – Permite elementos flutuantes em ambos os lados.

<!doctype html>

<html lang="pt-BR">

<head>



<style>

#figura1 {

float:left;

width:280px;

}

p.limpa_lado{

clear:both;

}

</style>

</head>

<body>

<h1>Linus Torvalds</h1>

<div id="figura1"><img src="linus_torvalds.jpg" alt="linus">

</div>

<p class="limpa_lado">Torvalds nasceu em Helsínquia, na Finlândia.Filho, ateu, dos jornalistas Anna e Nils Torvalds,e neto do poeta Ole Torvalds. Seus pais eram radicais do campus da Universidade deHelsínquia, na década de 1960. Sua família pertence à minoria de língua sueca (5,5 % da população da Finlândia).

Torvalds frequentou a Universidade de Helsínquia, entre 1988 e 1996, graduando-se com um Mestrado em Ciência da Computação a partir do grupo de pesquisa NODES.Sua carreira académica foi interrompida após seu primeiro ano de estudo, quando ele se juntouao Exército da Finlândia. No exército ocupa o posto de segundo tenente, com o papel de um oficial de cálculo balístico. Em 1990, ele retomou seus estudos universitários, e foi exposto a UNIX pelaprimeira vez, através de um computador DEC MicroVAX com o sistema ULTRIX. Sua tese de Mestrado em Ciências de Computação foi intitulada Linux: um sistema operacional portátil.</p>

</body>

</html>

Resultado:

Observe que ao aplicar a propriedade clear com valor both, o texto é posicionado abaixo do elemento div id=figura.

10.2 Propriedade OverflowA propriedade overflow é aplicada no caso de existir um elemento de conteúdo maior do que o elemento que o contém. Pode-se ter uma imagem com altura maior do que o box (div) que a contémpara que não haja um problema de posicionamento aplica-se a propriedade overflow com valor auto. No exemplo abaixo não será aplicada a propriedade overflow, perceba que a imagem irá exceder o limite da borda do box do parágrafo:

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Trabalhando com a propriedade Clear</title> <style> #artigo{ border:solid 5px #000; } img{ float:right; }

</style> </head> <body> <h1>Linux</h1> <div id="artigo"><img src="tux.png" alt="tux" width="200px" height="150px"> <p>Linux é o núcleo do sistema operacional, programa responsável pelo funcionamento do computador, que faz a comunicação entre hardware (impressora, monitor, mouse, teclado) e software (aplicativos em geral). O conjunto do kernel e demais programas responsáveis por interagir com este é o que denominamos sistema operacional. O kernel é o coração do sistema.</p> </div> </body> </html>

No próximo exemplo será aplicada a propriedade overflow: auto ao parágrafo:

<!doctype html>

<html lang="pt-BR">

<head>



<style>

#artigo{

border:solid 5px #000;

overflow:auto;

}

img{

float:right;

}

</style>

</head>

<body>

<h1>Linux</h1>

<div id="artigo"><img src="tux.png" alt="tux" width="200px" height="150px">

<p>Linux é o núcleo do sistema operacional, programa responsável pelo funcionamento do computador, que faz a comunicação entre hardware (impressora, monitor, mouse, teclado) e software (aplicativos em geral). O conjunto do kernel e demais programas responsáveis por interagir com este é o que denominamos sistema operacional. O kernel é o coração do sistema.</p>

</div>

</body>

</html>

Resultado:

10.3 Atividade

Reproduza o layout abaixo baseando-se nas seguintes informações de regras da CSS:

Banner:

• margem automática para todos os lados;

• largura fixa de 1280px;

• altura fixa de 400px;

Título:

• Texto centralizado;

• Tamanho da fonte: 40 px;

Boxes:

• Lagura fixa: 400px;

• Altura fixa: 300px;

• Borda: cinza, sólida com espessura de 2px;

• Posicionamento: esquerda;

Conteúdo do box:

Imagem:

• Posição: esquerda;

• Largura: 200px;

• Altura: 150px;

Texto:

• Parágrafo.

BANNER

Título

Boxes

11 Propriedade ListEsta propriedade permite que sejam definidos diferentes marcadores para as listas não ordenadas, define diferentes marcadores para listas ordenadas e define imagens como marcadores nas listas.

Dentro da linguagem de marcação HTML, podemos encontrar dois tipos de listas que utilizam marcadores>

• <ul></ul> são tags que definem as listas não ordenadas representadas por marcadores;

• <ol></ol> são tags que definem as listas ordenadas que são representadas por números ou

letras.

11.1 Propriedades de listas da regra CSS list-style-image – imagens como marcadores de listas

list-style-position – posicionamento do marcador da listadas

list-style-type – tipo de marcador de listas

lista -style – abreviação para todas as propriedades

11.2 Valores para serem aplicados na propriedade List

11.3 List-style-imageNeste exemplo temos uma imagem (computer.png) gravada na mesma pasta do código HTML e servirá como marcador da lista não ordenada.

ul { list-style-image: url('computer.png');}

Resultado:

11.4 list-style-positionNesta exemplo é possível aplicar dois valores nas listas outside e inside:

ul.fora { list-style-position:outside;}

ul.dentro{list-style-position:inside;}

Resultado:

11.5 List-style-type

Valores da propriedade type:

a) none: sem marcador

b) disc: círculo (bolinha cheia) c) circle: circunferência (bolinha vazia) d) square: quadrado cheio e) decimal: números 1, 2, 3, 4, ... f) decimal-leading-zero g) lower-roman: romano minúsculo i, ii, iii, iv, ... h) upper-roman: romano maiúsculo I, II, III, IV, ... i) lower-alpha: letra minúscula a, b, c, d, ... j) upper-alpha: letra maiúscula A, B, C, D, ... k) lower-greek l) lower-latin m) upper-latin n) hebrew o) armenian p) georgian

Outside

Inside

q) cjk-ideographic r) hiragana s) katakana t) hiragana-iroha u) katakana-iroha

<!doctype html>

<html lang="pt-BR">

<head>

<meta charset="utf-8">

<title>Propriedades de Listas</title>

<style>

ul.a{

list-style-type:none;

}

ul.b{

list-style-type:circle;

}

</style>

<body>

<h1>Lista não ordenada com valores de TYPE</h1>

<ul class="a">

<li>Placa-mãe</li>

<li>CPU</li>

<li>Memória</li>

</ul>

<ul class="b">

<li>Batata</li>

<li>Farinha</li>

<li>Fermento</li>

</ul>

</body>

</html>

Resultado:

11.6 Atividade

A) Reproduza a lista com imagens como marcadores:

B) Teste os valores da propriedade TYPE e reproduza as duas listas do exemplo abaixo:

12 CSS LinksOs links são itens que podem ser decorados por qualquer propriedade CSS (color, font-family, background, etc). Além disso os links podem ser decorados de maneira diferente dependendo de seuestado e os links possuem 4 tipos de estados (comportamentos), que são:

• a: link – um link normal, sem visitas;

• a: visited - um link que o usuário visitou;

• a: hover - um link quando o usuário mouses sobre ele;

• a: active - um link do momento em que for clicado.

Digite o código abaixo para testar cada estado aplicado à tag <a>:

<!doctype html>

<html lang="pt-BR">

<head>


<title>Links</title>

<style>

a:link {

color: yellow;

}

a:visited {

color: gray;

}

a:hover {

color: red;

}

a:active {

color: black;

}

</style>

<body>

<h1>Comportamentos dos Links</h1>

<a href="http://advancepg.com.br">Site da Advance Praia Grande</a>

</body>

</html>

Após a digitação do código obteremos o seguinte efeito ao link:

• Estado amarelo para o link sem nenhuma visita;

• Estado cinza após ser visitado;

• Estado vermelho ao passar o cursor do mouse sobre o link;

• Estado preto ao clicar sobre o link.

Dica: Ao definir o estilo para vários estados de ligação, existem algumas regras de ordem:

• a: hover DEVE vir após a: link e a: visited

• a: active DEVE vir após a: hover

12.1 Propriedade Text-DecorationEsta propriedade é aplicada para remover o sublinhado dos links, no próximo exemplo será aplicadoum estilo sublinhado no estado hover e active do link:

<!doctype html>

<html lang="pt-BR">

<head>


<title>Links</title>

<style>

a:link {

color: yellow;

text-decoration:none;

}

a:visited {

color: gray;

text-decoration:none;

}

a:hover {

color: red;

text-decoration:underline;

}

a:active {

color: black;

text-decoration:underline;

}

</style>

<body>

<h1>Comportamentos dos Links</h1>

<a href="http://advancepg.com.br">Site da Advance Praia Grande</a>

</body>

</html>

12.2 AtividadeNeste tópico foi citado que qualquer propriedade de regra da CSS pode ser aplicada aos 4 estados dos links. Aplique as seguintes regras aos links abaixo:

• link – Cor preta, sem decoração (sublinhado);

• visitado – Cor cinza, sem decoração(sublinhado);

• hover – Cor vermelha, com decoração(sublinhado), alterar tamanho da fonte para 20px e

cor de fundo amarela ao passar o cursor do mouse sobre o link;

• link ativo – cor amarela, com decoração(sublinhado).

13 Posicionando elementos em CSSNesta propriedade é possível especificar o método de posicionamento que será aplicado a um elemento da página WEB. Ao inserir um elemento dentro do corpo da página ele irá atender às regras padrão de posicionamento, mas também é possível aplicar referências aos quatro lados dos elementos (top, right, bottom e left), que funcionarão de forma diferente dependendo do método de posicionamento escolhido. Além das referências de posicionamento, pode-se aplicar à propriedade position os seguintes valores:

• fixed

• relative

• absolute

• static

13.1 Position fixedUm posicionamento fixo (position: fixed) faz com que o elemento seja posicionado em relação à janela do navegador. Isso significa que se o usuário utilizar a barra de rolagem lateral para navegar pela página o elemento definido com posicionamento fixo continuará aparecendo na mesma posição.

posicionamento_fixo.html

<!doctype html>

<html lang="pt-BR">

<head>


<title>Posicionando Elementos</title>

<style>

p {

border: 1px solid red;

}

p.parado{

position: fixed;

top: 30px;

right: 10px;

background-color: green;

}

</style>

</head>

<body>

<h3>

Exemplo de posicionamento fixo.

</h3>

<p class="parado">

Posicionamento fixo

</p>

<p>

Aqui um texto de um parágrafo normal.

</p>

<p>

Aqui outro parágrafo sem uma definição especial de

posicionamento.

</p>

<p>

Os parágrafos sem uma definição de posicionamento

são considerados estáticos.

</p>

<p>

Note que se o conteúdo da página for extenso e a página

gerar

uma barra de rolagem, quando o usuário rolar a página

o elemento definido como fixo continuará aparecendo.

</p>

</body>

</html>

Resultado:

Com o exemplo acima nota-se que o elemento (p.parado) foi sobreposto ao restante do conteúdo, dessa maneira sempre que os elementos da página excederem sua largura ou altura é mostrada a barra de rolagem e ao aplicá-la o elemento com posicionamento fixo não é movimentado.

13.2 Position relativeUm elemento definido com posicionamento relativo (relative) é posicionado em relação à sua posição normal. Os valores definidos para o posicionamento do elemento definido como relativo vão alterar a sua posição em relação ao fluxo normal que ele teria.

posicionamento_rel.html

<!doctype html>

<html lang="pt-BR">

<head>



<style>

p {


padding: 5px;

background-color:lime;

}

p.relativa {

position: relative;

top: 30px;

left: 20px;

background-color: yellow;

color: blue;

font-weight: bold;

width: 150px;

}

</style>

</head>

<body>

<h3>

Exemplo de posicionamento relativo.

</h3>

<p class="relativa">

Posicionamento relativo.

</p>

<p>

Aqui um parágrafo normal.

</p>

<p class="relativa">

Aqui outro parágrafo com posicionamento relativo.

</p>

<p>

Os parágrafos sem uma definição de posicionamento

são considerados estáticos.

</p>

</body>

</html>

Resultado:

Note que o posicionamento do elemento é alterado mas o espaço que o mesmo ocuparia originalmente é mantido na página.

13.3 Posicionamento absoluteElementos definidos com posicionamento absoluto deixam de existir no fluxo normal do documento, afetando os elementos adjacentes.

Um elemento posicionado como absoluto tem sua posição definida em relação ao elemento que o contém (elemento pai) desde que esse elemento não esteja definido como estático.

posicionamento_abs.html

<!doctype html>

<html lang="pt-BR">

<head>



<style type="text/css">

.principal {

position: relative;

width: 250px;

height: 250px;

border: 1px solid black;

background-color: orange;

color: blue;

font-weight: bold;

padding: 5px;

}

.absoluta {

position: absolute;

top: 80px;

left: 60px;


background-color: lime;

color: blue;

font-weight: bold;

width: 180px;

padding: 5px;

}

</style>

</head>

<body>

<h3>

Exemplo de posicionamento absoluto.

</h3>

<div class="principal">

<p>

Este parágrafo está em uma div com posicionamento relativo.

</p>

<div class="absoluta">

<p>

Este parágrafo está em uma div definida com um posicionamento absoluto.

</p>

</div>

</div>

</body>

</html>

Resultado:

Perceba que o parágrafo interno está dentro de uma div definida com posicionamento absoluto.

Esta div está dentro de outra definida com posicionamento relativo. Por essa razão os valores definidos para o posicionamento do parágrafo que está na div mais interna é em relação à div mais externa. Para que fique mais claro, irei retirar a propriedade position:relative da classe principal, o posicionamento relativo da div mais externa, o posicionamento do parágrafo da div mais interno seria em relação ao corpo da página.

Obs: Para obter o resultado abaixo, retire a propriedade position:relative da classe .principal.

Resultado:

Ao visualizar a página, nota-se que o posicionamento do parágrafo presente na div mais interna agora está relacionado ao corpo do documento e não mais à div principal.

13.4 Position staticO posicionamento estático faz com que o elemento seja posicionado de acordo com o fluxo normal da página, e é o padrão caso nenhum posicionamento seja determinado. Elementos com posicionamento estático não são afetados pelas propriedades top, right, bottom e left.

13.5 Propriedade z-indexO posicionamento dos elementos no CSS2 ocorre em três dimensões e não somente em duas. Fora arelação “top” e “left” é possível fazer com que os elementos fiquem posicionados uns sobre os outros, dando a impressão de que alguns estão mais próximos. Quanto maior o valor definido, mais próximo do topo o elemento será renderizado. Os valores da propriedade z-index podem ser definidos como negativos ou positivos de acordo com o empilhamento dos elementos:

camadas.html

<!doctype html>

<html lang="pt-BR">

<head>



<style>

#primeira{

position: absolute;

background-color: yellow;

width: 200px;

height:250px;

border:solid 2px red;

z-index:1

}

#segunda{

position: absolute;

background-color: lime;

width: 150px;

height:100px;

border:solid 2px red;

z-index:2

}

#terceira{

position: absolute;

background-color: red;

width: 100px;

height:80px;

border:solid 2px green;

z-index:3

}

</style>

</head>

<body>

<h1>Camadas em CSS?? É possível??</h1>

<div id="primeira">

<p>Este é um parágrafo da camada "primeira"</p>

</div>

<div id="segunda">


</div>

<div id="terceira">


</div>

</body>

</html>

Resultado:

13.6 Atividade

14 Regras CSS para TabelasA utilização de regras CSS em seletores de tabelas é aceitável desde que sejam acatadas as recomendações de padronização estabelecidas pelo W3C. Utilizarei os elementos <table>, <th> e <td> que são seletores básicos de construção de elementos de uma tabela através das tags HTML. OW3C não recomenda a utilização dos demais elementos de construção, visando a simplificação do código.

14.1 Propriedades CSS para TablePara cada item citado no tópico anterior, temos as propriedades e seus valores para estilizar a tabela e seu conteúdo:

border – Aplica todas a propriedades referente a borda em apenas uma declaração;

border-collapse – Retira a espessura da borda deixando-a apenas como uma grade linear;

border-spacing - Especifica a distância entre as bordas das células adjacentes (top, left, right e bottom);

caption-side – Especifica a inserção de uma legenda em um dos lados da tabela;

empty-cells – Especifica se deve exibir ou não bordas e fundo de uma tabela;

table-layout – Define a largura do elemento da tabela de acordo com o valor determinado (fixed, auto).

No exemplo abaixo irei construir uma tabela simples com três campos e algumas informações comoconteúdo, mas não será aplicada nenhuma regra CSS.

<!doctype html>

<html lang="pt-BR">

<head>


<title>Tabelas</title>

</head>

<body>

<h1>Regras CSS para Tabelas</h1>

<table border="1">

<th>Nome</th><th>Idade</th><th>Gênero</th><tr>

<td>Fernando Vaz</td><td>42</td><td>Masculino</td><tr>

<td>Andréa Trindade</td><td>43</td><td>Feminino</td><tr>

<td>Fernanda Garcia</td><td>14</td><td>Feminino</td><tr>

<td>Lennon Garcia</td><td>12</td><td>Masculino</td><tr>

</table>

</body>

</html>

Resultado:

Agora serão aplicados os estilos para que seja possível perceber a influência das regras CSS nos seletores HTML que compreendem as tabelas.

<!doctype html>

<html lang="pt-BR">

<head>


<title>Tabelas</title>

<style>

table{

border-collapse:separate;

border-color:red;

border-spacing:5px;

}

td {

background-color:lime;

font-family:arial;

}

th{

background-color:yellow;

font-size:20px;

color:blue;

}

</style>

</head>

<body>

<h1>Regras CSS para Tabelas</h1>

<table border="1">

<th>Nome</th><th>Idade</th><th>Gênero</th><tr>

<td>Fernando Vaz</td><td>42</td><td>Masculino</td><tr>

<td>Andréa Trindade</td><td>43</td><td>Feminino</td><tr>

<td>Fernanda Garcia</td><td>14</td><td>Feminino</td><tr>

<td>Lennon Garcia</td><td>12</td><td>Masculino</td><tr>

</table>

</body>

</html>

Resultado:

Documents

Autor: Fernando Vaz de Lima Pereira · 4 Propriedades CSS A partir de agora estudaremos as propriedades da CSS, através delas poderemos alterar fontes, cores, posicionamento e até