Scroll Top

Aprenda tudo que você precisa para criar o seu negócio na internet.  São 30 vídeos aulas totalmente gratuitas. Basta se cadastrar em um de nossos formulário.

Tutoriais

DIV em css junto com SPAN agrupando elementos

div em cssA div em css e span são conhecidos como os elementos <span> e <div> e são usados para agrupar e estruturar o documento que são freqüentemente usados em conjunto com os atributos class e id que estudamos anteriormente. Isso é div em css, ou estilo de css para div.

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

· Agrupando com <span>

· Agrupando com div em css <div>

Caso não tenha lido as postagens anteriores você precisará aprender sobre servidor local, e editor de código notepad+ +, estude um pouco usando os links nas palavras destacadas para a cessar o conteúdo citado.

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:

<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 na frase. Para isto marcamos os benefícios com <span>. A cada span atribuímos uma class, e estilizamos na folha de estilos:

Digite o código abaixo e salve na pasta indicada pelo seu servidor local como index.html:

<html>
<head>
<title> Agrupando com Span</title> /* Título da Página*/
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/> /* Link para chamar o arquivo estilo.css*/
<style type=”text/css”>
</head>
<body>
<p>Dormir cedo e acordar cedo faz o homem
<span class=”beneficio”>saudável</span>,
<span class=”beneficio”>rico</span>
e <span class=”beneficio”>sábio</span>.</p>
</body>
</html

Agora digite o código abaixo e save na mesma pasta indicada pelo seu servidor local como estilo.css:

span.beneficio {
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.

Agora visualize o código usando o botão abaixo:

 

visualizar

 

 

Agrupando com div em css<div>

Enquanto <span> é usado dentro de um elemento nível de bloco como vimos no exemplo anterior, a div em css ou <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:

Digite os códigos abaixo como o seu editor de código e salve no arquivo index.html:

<html>

<head>

<title>Agrupando com DIV</title>

<body>

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

</body>

</html>

E no arquivo estilo.css , coloque o código abaixo e podemos agrupar a estilização da mesma maneira como fizemos no exemplo acima:

#democrats {
background:blue;
}
#republicans {
background:red;
}

Abra no seu navegador e deverá aparecer uma imagem semelhante a que você verá após abrir o o código usando o botão Visualizar logo abaixo:

 

visualizar

 

Nos 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 mais adiante nas lições deste tutorial.

 

Continue estudando CSS na sequencia, vá para a página inicial clicando no botão abaixo:

 

voltaravançar

Está Gostando do Artigo?

Se inscreva em nossa lista e receba 30 vídeos aulas grátis, ensinando como criar o seu negócio na internet a partir do zero.

| Website

Sou blogueiro por que gosto de ler e escrever. Criei este blog para te ajudar a criar o seu negócio na internet e ter um novo estilo de vida.

  • I just want to mention I’m beginner to blogging and site-building and actually savored you’re web site. Likely I’m planning to bookmark your website . You actually come with superb posts. Bless you for sharing with us your blog site.

    Tradução:
    Eu só quero falar que eu sou iniciante em blogs e de criação de sites e realmente saboreado você está web site. Provável que eu estou planejando para marcar seu website. Você realmente vêm com mensagens maravilhosas. Deus te abençoe por compartilhar conosco o seu blog.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
error: Este conteúdo está protegido ! Se precisar de alguma coisa envie mensagem pelo formulário de contato.