CPW 07 ElementosSPANeDIV

Aula 07 Elemento SPAN e DIV
Construo de Pginas WEB

Professores: Glderson L. dos Santos e Vincius T. Guimares glederson@gmail.com e vicoguim@gmail.com
Campus Charqueadas Construo de Pginas WEB
Tags SPAN e DIV

As tags que uHlizamos at o momento indicavam um
signicado ao contedo HTML (por exemplo, p quer dizer pargrafo).
De forma contrria, as tags span e div, no tem signicado
algum, sendo uHlizadas para agrupar um bloco HTML e aplicar alguma informao a este bloco.
Antes de entendermos o uso e aplicao destas tags cabe
ressaltarmos a classicao que dada para cada elemento HTML.

Tags SPAN e DIV

Os elementos HTML podem ser classicados de duas formas: Elementos inline Elementos de bloco Esta classicao determina como o elemento HTML dever
ser exibido no navegador.
Tags SPAN e DIV

Elementos de Bloco: Um elemento de bloco uHliza toda a largura disponvel e
cria uma linha antes e depois de si, considerando o elemento HTML no qual est inserido. A propriedade que determina esta caractersHca a display
diplay: block;
Como exemplo de elementos de bloco temos: P DIV H1, H2, H3, H4 ...

Tags SPAN e DIV

Elementos inline: Um elemento inline no cria linhas antes e depois de si,
apenas se misturando com elementos que esto prximos.

A propriedade que determina esta caractersHca a display diplay: inline; Como exemplo de elementos de bloco temos: SPAN A STRONG

Tags SPAN e DIV

Vamos anlisar o exemplo abaixo:
exemplo1.html
<style> #red { color : #0000; } </style> ... <body> <p> Aqui eu tenho um pargrafo e uma palavra em <span id="red">vermelho</span>!</ p> </body>
Tags SPAN e DIV

Vamos anlisar o exemplo abaixo:
exemplo2.html
<style> #red { color : #0000; } </style> ... <body> <p> Aqui eu tenho um pargrafo e uma palavra em <div id="red">vermelho</div>!</p> </body>
SPAN
Conforme Hvemos condies de observar nos exemplos
anteriores, a tag span consHHu um elemento inline no documento HTML.
O SPAN uHlizado normalmente em pequenos blocos HTML,
especialmente em trechos de texto que necessitam de uma formatao especca.
Usualmente, se determina um idenHcador ou uma classe para
o elemento SPAN, a parHr dos quais se especica a formatao deseja com o uso de CSS. Observem o exemplo3.html .
Div
Criando um elemento <div> em documento um HTML
(exemplo4.html):
<html> <head>
Incio do bloco DIV <title>teste</title>
</head> <body> <div id="div1" align="center" title="DIV de TESTE!"> <h1>Ola aqui temos um DIV!</h1> </div> </body> </html> Fim do bloco DIV
Div
Principais atributos padro da tag <div>
class: atributo para especicar a classe de esHlo a ser
aplicada no elemento <div>; dir: indica a direo do texto no interior do elemento <div>; id: atributo uHlizado para especicar um idenHcador para o elemento <div>; style: atributo para especicar o esHlo de forma inline. 0tle: atributo para especicar uma informao adicional com relao ao elemento.
Dimenses
As propriedades de dimenso em CSS, iro nos permiHr
controlar a altura e largura dos elementos. A propriedades que poderemos uHlizar, so as seguintes:
height: permite congurar a altura de um elemento. Esta
propriedade possui os seguintes valores:

auto: o navegador calcula a altura atual do elemento. length: dene a altura em alguma unidade de medida (px,cm, etc.). %: dene a altura atravs de um percentual referente ao bloco no qual o elemento est conHdo.
Dimenses
width: permite congurar a largura de um elemento. Esta
propriedade possui os seguintes valores:
auto: o navegador calcula a largura atual do elemento. length: dene a largura em alguma unidade de medida
(px,cm, etc.). %: dene a largura atravs de um percentual referente ao bloco no qual o elemento est conHdo.
exemplo5.html
Dimenses
line-height: permite congurar a distncia entre linhas. Esta
propriedade possui os seguintes valores: normal: o valor padro. number: permite congurar um nmero, o qual ser mulHplicado pelo tamanho de fonte corrente, uHlizando o resultado para determinar a distncia entre linhas. length: permite ajustar uma distncia xa entre linhas, uHlizando neste caso uma unidade de medida. %: dene a distncia entre linhas atravs de um percentual referente ao tamanho da fonte que est sendo uHlizado.
Dimenses
Tem-se ainda as propriedade que permitem denir largura e
altura, mnima e mxima para um elemento. So eles:

max-height min-height max-width min-width

Os valores possveis para estas propriedades, seguem as
mesmas regras que uHlizamos para as propriedade height e width.
hep://www.w3schools.com/css/css_dimension.asp
Classificao
cursor:
permite especicar o Hpo de cursor que ser apresentado quando sobrepormos o mouse sobre o elemento. Exemplo:
#div1
{ width: 500px; height: 500px; background-color: #0000; cursor: help; }
exemplo6.html hXp://www.w3schools.com/CSS/pr_class_cursor.asp
Classificao
display: esta propriedade permite ajustar como e se um determinado ser
exibido no documento HTML. Para esta propriedade temos vrios valores possveis. Os mais comuns so:
none: indica que o elemento no ser apresentado na tela. block: o elemento ser apresentado no documento, com uma quebra de
linha antes e depois do elemento. inline: o padro para o span. O elemento ser apresentado como um elemento em linha, sem quebra de linha antes e depois do elemento. Os demais valores possveis podem ser acessados em: hep://www.w3schools.com/css/pr_class_display.asp Exemplos: hep://www.w3schools.com/css/tryit.asp?lename=trycss_display
hep://www.w3schools.com/css/tryit.asp?lename=trycss_display_block
Classificao
oat: esta propriedade dene onde uma imagem ou um texto ir aparecer em
outro elemento. Possveis valores para esta propriedade so:

le=: a imagem ou o texto so colocados esquerda do elemento pai. right: a imagem ou o texto so colocados direita do elemento pai. none: valor padro. A imagem ou o texto sero apresentados apenas onde
eles aparecem no texto.
Exemplos: hep://www.w3schools.com/css/tryit.asp?lename=trycss_oat2 hep://www.w3schools.com/css/tryit.asp?lename=trycss_oat3
Classificao
posi0on: esta propriedade possibilita ajustar o posicionamento do
elemento. Os possveis valores so:
sta0c: valor padro. Sempre ir posicionar o elemento uHlizando o uxo normal da
pgina, ignorando outras propriedades, tais como: top, bo>om, le= e right. rela0ve: move o elemento de forma relaHva a sua posio normal. Por exemplo, se a propriedade le= for determinada lep: 20 adiciona 20 pixels na distncia em relao margem esquerda do elemento. absolute: o elemento posicionado nas coordenadas relaHva ao bloco no qual o elemento est conHdo. O posicionamento do elemento especicado com o uso das propriedades le= , top , right e bo>om . xed: o elemento posicionado nas coordenadas relaHvas a janela do navegador. O posicionamento do elemento especicado com o uso das propriedades le= , top , right e bo>om .
Exemplo: hep://www.w3schools.com/css/pr_class_posiHon.asp
Classificao
visibility: esta propriedade dene se um elemento dever ser visvel ou
invisvel. Possveis valores para esta propriedade so:

visible: o elemento visvel. hidden: o elemento invisvel.
collapse: quando uHlizado em tabelas, este valor remove a linha ou
coluna, mas isto no afeta o layout da tabela. Se este valor for uHlizado em outros elementos, este ser renderizado como hidden.
Exemplo: hep://www.w3schools.com/css/tryit.asp?lename=trycss_visibility
hep://www.w3schools.com/css/tryit.asp?lename=trycss_visibility_collapse
Posicionamento
As propriedades de posicionamento permitem
especicar a posio de um elemento, com relao a seus limites superior (top), inferior (boeom), esquerdo (lep) e direito (right).

Posicionamento
bo>om: determina a distncia do limite inferior do elemento. Valores possveis, para
esta propriedade, so:

auto: o valor padro. Com este valor, o navegador ca encarregado de
determinar a posio com relao ao limite inferior do elemento. %: ajusta de forma percentual, em relao ao limite inferior da janela. length: ajusta a posio atravs de um valor determinado em uma unidade de medida, por exemplo pixel. So permiHdos valores negaHvos.
Exemplo: hep://www.w3schools.com/css/tryit.asp?lename=trycss_posiHon_boeom
hep://www.w3schools.com/css/tryit.asp?lename=trycss_posiHon_boeom_percent

Posicionamento
clip: permite efetuar um corte em determinado elemento. Os valores possveis para
esta propriedade so:

shape: permite congurar a rea de corte do elemento. Um exemplo vlido de
valor seria: rect (top, right, bo>om, le=). auto: valor padro. O navegador ajusta o corte no elemento.
Exemplo: hep://w3schools.com/css/tryit.asp?lename=trycss_clip

Posicionamento
le=: determina a distncia do limite esquerdo do elemento. Valores possveis, para

auto: o valor padro. Com este valor, o navegador ca encarregado de
determinar a posio com relao ao limite esquerdo do elemento. %: ajusta de forma percentual, em relao ao limite esquerdo da janela. length: ajusta a posio atravs de um valor determinado em uma unidade de medida, por exemplo pixel. So permiHdos valores negaHvos.
Exemplo: hep://www.w3schools.com/css/tryit.asp?lename=trycss_posiHon_lep
hep://www.w3schools.com/css/tryit.asp?lename=trycss_posiHon_lep_percent
Posicionamento
overow: esta propriedade permite ajustar o que dever acontecer quando o
contedo de um elemento excede sua rea.

visible: o valor padro. O contedo no cortado, ou seja, o contedo renderizado
mesmo que fora do elemento no qual est inserido. hidden: o contedo cortado e o navegador no apresenta barra de rolagem para o elemento. scroll: o contedo cortado, entretanto o navegador cria barra de rolagem no elemento para que o restante do contedo seja exibido. auto: caso o contedo seja cortado, o navegador poder exibir barra de rolagem para exibir o restante do contedo.
Exemplo:

hep://www.w3schools.com/css/tryit.asp?lename=trycss_overow
Posicionamento
right: determina a distncia do limite direito do elemento. Valores possveis, para

auto: o valor padro. Com este valor, o navegador ca encarregado de determinar a
posio com relao ao limite direito do elemento. %: ajusta de forma percentual, em relao ao limite direito da janela. length: ajusta a posio atravs de um valor determinado em uma unidade de medida, por exemplo pixel. So permiHdos valores negaHvos.
Exemplo: hep://www.w3schools.com/css/tryit.asp?lename=trycss_posiHon_right
hep://www.w3schools.com/css/tryit.asp?lename=trycss_posiHon_right_percent
Posicionamento
top: determina a distncia do limite superior do elemento. Valores possveis, para
auto: o valor padro. Com este valor, o navegador ca encarregado de determinar a
posio com relao ao limite superior do elemento. %: ajusta de forma percentual, em relao ao limite direito da janela. length: ajusta a posio atravs de um valor determinado em uma unidade de medida, por exemplo pixel. So permiHdos valores negaHvos.
Exemplo: hep://www.w3schools.com/css/tryit.asp?lename=trycss_posiHon_top
hep://www.w3schools.com/css/tryit.asp?lename=trycss_posiHon_top_percent
Posicionamento
ver0cal-align: esta propriedade permite ajustar o alinhamento verHcal do elemento.
Os valores possveis para esta propriedade podem ser encontrados em:
hep://www.w3schools.com/css/pr_pos_verHcal-align.asp

Posicionamento
z-index: esta propriedade dene a prioridade de exibio de determinado elemento.
Elementos como maior prioridade de exibio iro sobrepor-se a elementos com menor prioridade de exibio. Os valores possveis para esta propriedade so:
auto: valor padro. A prioridade de exibio a mesma dos elementos pai. number: nmero que ir determinar a prioridade de exibio do elemento.
Exemplo: hep://www.w3schools.com/Css/tryit.asp?lename=trycss_zindex

CPW 07 ElementosSPANeDIV

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

CPW 07 ElementosSPANeDIV

Caricato da

Copyright:

Formati disponibili

Aula 07 Elemento SPAN e DIV

Construo de Pginas WEB

Campus Charqueadas Construo de Pginas WEB

Tags SPAN e DIV

signicado ao contedo HTML (por exemplo, p quer dizer pargrafo).

De forma contrria, as tags span e div, no tem signicado

Antes de entendermos o uso e aplicao destas tags cabe

ressaltarmos a classicao que dada para cada elemento HTML.

Tags SPAN e DIV

ser exibido no navegador.

Construo de Pginas WEB

Tags SPAN e DIV

Tags SPAN e DIV

apenas se misturando com elementos que esto prximos.

Tags SPAN e DIV

Tags SPAN e DIV

anteriores, a tag span consHHu um elemento inline no documento HTML.

O SPAN uHlizado normalmente em pequenos blocos HTML,

especialmente em trechos de texto que necessitam de uma formatao especca.

Usualmente, se determina um idenHcador ou uma classe para

Incio do bloco DIV <title>teste</title>

Construo de Pginas WEB

Construo de Pginas WEB

propriedade possui os seguintes valores:

Construo de Pginas WEB

propriedade possui os seguintes valores:

Construo de Pginas WEB

Construo de Pginas WEB

altura, mnima e mxima para um elemento. So eles:

max-height min-height max-width min-width

mesmas regras que uHlizamos para as propriedade height e width.

Construo de Pginas WEB

outro elemento. Possveis valores para esta propriedade so:

eles aparecem no texto.

Exemplos: hep://www.w3schools.com/css/tryit.asp?lename=trycss_oat2 hep://www.w3schools.com/css/tryit.asp?lename=trycss_oat3

Construo de Pginas WEB

elemento. Os possveis valores so:

sta0c: valor padro. Sempre ir posicionar o elemento uHlizando o uxo normal da

invisvel. Possveis valores para esta propriedade so:

collapse: quando uHlizado em tabelas, este valor remove a linha ou

Construo de Pginas WEB

Construo de Pginas WEB

esta propriedade, so:

esta propriedade so:

Construo de Pginas WEB

esta propriedade, so:

Construo de Pginas WEB

contedo de um elemento excede sua rea.

esta propriedade, so:

Construo de Pginas WEB

esta propriedade, so:

auto: o valor padro. Com este valor, o navegador ca encarregado de determinar a

Construo de Pginas WEB

Os valores possveis para esta propriedade podem ser encontrados em:

Construo de Pginas WEB

Construo de Pginas WEB

Potrebbero piacerti anche