Bem vindo ao PROJECT-HTML
Aprenda mais sobre:
HTML, CSS, JavaScript, webmaster, Imagens, banners, wallpapers, videos aula, windows, utilitários para site/blogs, Jogos, animes e muito mais.
Basta se registrar!



 
InícioProject HTMLGaleriaFAQRegistrar-seConectar-se
Buscar
 
 

Resultados por:
 
Rechercher Busca avançada
Conectar-se
Nome de usuário:
Senha:
Conexão automática: 
:: Esqueci minha senha
Votação
Qual seu navegador favorito?
FireFox
29%
 29% [ 173 ]
Chrome
60%
 60% [ 356 ]
Internet Explorer
6%
 6% [ 36 ]
safari
1%
 1% [ 7 ]
Netscape
1%
 1% [ 3 ]
Opera
2%
 2% [ 11 ]
Avant
1%
 1% [ 3 ]
Total dos votos : 589
Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

O recorde de usuários online foi de 36 em 3/4/2016, 3:36 am
Últimos assuntos
» TAG´s (comandos)
4/8/2014, 10:15 am por robson

» Comandos básico de HTML - body (corpo da home page)
16/7/2014, 10:10 am por robson

» Apresentações aqui
15/7/2014, 4:14 pm por robson

» Como colocar "posts recomendados" no sou blog sou site.
24/3/2014, 8:05 pm por Otome

» Arquivo de ajuda sobre PHP, help para iniciantes e experientes
24/3/2014, 8:03 pm por Otome

» Imagens Exercício-6
22/3/2014, 5:19 pm por SY64

» Alinhamento de imagens
22/3/2014, 4:43 pm por SY64

» Link´s Exercicios-5
22/3/2014, 12:43 pm por SY64

» Criar um site passo a passo
1/8/2013, 4:41 pm por marlonsouzajs


Compartilhe | 
 

 Agrupando elementos (span e div)

Ir em baixo 
AutorMensagem
Diego
Admin
Admin
avatar

Masculino
Número de Mensagens : 321
Idade : 26
Localização : Aqui no PROJECT-HTML
Pontos : 5708
Reputação : 24
Data de inscrição : 04/07/2008

MensagemAssunto: Agrupando elementos (span e div)   12/9/2010, 12:56 am

Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id.

Nesta lição veremos com detalhes o uso dos elementos HTML <span> e <div> no que se refere a sua vital importância para as CSS.

Agrupando com <span>
Agrupando com<div>

Agrupando com <span>
O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no seu documento.

Um exemplo deste uso é mostrado na citação abaixo de autoria de Benjamin Franklin:
Código:

<p>Dormir cedo e acordar cedo faz o homem
saudável, rico e sábio.</p>

Vamos supor que queremos enfatizar na cor vermelha os benefícios apontados por Mr. Franklin pelo fato de não se passar o dia dormindo. Para isto marcamos os benefícios com <span>. A cada span atribuímos uma class, e estilizamos na folha de estilos:
Código:

<p>Dormir cedo e acordar cedo faz o homem
<span class="benefit">saudável</span>,
<span class="benefit">rico</span>
e <span class="benefit">sábio</span>.</p>

A folha de estilos:

Código:

span.benefit {
   color:red;
}

É claro que você pode usar id para estilizar o elemento <span>. Mas, como você deve estar lembrado, deverá usar uma única id para cada um os três elementos <span>, conforme foi explicado na lição anterior.

Agrupando com <div>
Enquanto <span> é usado dentro de um elemento nível de bloco como vimos no exemplo anterior, <div> é usado para agrupar um ou mais elementos nível de bloco.

Diferenças à parte, o agrupamento com <div> funciona mais ou menos da mesma maneira. Vamos ver um exemplo tomando duas listas de presidentes dos Estados Unidos agrupados segundo suas filiações políticas:
Código:

<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>

<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>

E na folha de estilos, podemos agrupar a estilização da mesma maneira como fizemos no exemplo acima:

Código:

#democrats {
   background:blue;
}

#republicans {
   background:red;
}

os exemplos mostrados acima usamos somente <div> e <span> para simples estilizações, tais como cores de textos e de fundos. Contudos estes dois elementos possibilitam estilizações bem mais avançadas como veremos adiante nas lições deste tutorial.


_________________
Quem pode faz, não copia!
[Você precisa estar registrado e conectado para ver esta imagem.]
s2 Diego e Barbara s2
Informações do meu PC:
Processador:Intel Core i5 760 @ 2.80GHz 8Mb cache
Placa mãe: ASUSTeK Computer INC. P7P55D-Deluxe
Memoria Ram: 4.0GB Único -Channel DDR3 @ 668MHz * 2 = 1333Mhz (9-9-9-24)
Placa de video: 512 MB GeForce 8400 GS (XFX Pine Group)
HD: 160GB SAMSUNG SAMSUNG HD161HJ (SATA)
Audio: SoundMAX Integrated Digital Audio
Sistema operativo: MS Windows 7 Ultimate 64-bit
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://www.projecthtml.tk
 
Agrupando elementos (span e div)
Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» Mudar posição de alguns elementos
» Elementos não recebem propriedades css
» Adicionar elementos ao grupo sem acessar o painel de controle
» [Pedido] Elementos de deserto
» Qual o id dessa div ou span?

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
 :: CSS - (Cascading Style Sheets) :: CSS - Basico-
Ir para: