<span> - Destacando Elementos Inline no HTML &
No tutorial de CSS passado, falamos sobre a tag <div> e mostramos como é possível criar divisões para agrupar elementos que tem algum em comum, dentro de um mesmo local, um container, que é a div.Usar a tag div junto do seletor ID e do CLASS em CSS é uma prática bem comum, e vamos usar esse grupo de ferramentas durante todo nosso curso de CSS, em diversos tutoriais.
Porém, os seletores de tag e tag div, como o nome diz, agem nas tags por completo.
Por exemplo, se você coloca o seletor ID numa tag de parágrafo <p> e aplica um estilo à ela, todo o parágrafo é estilizado pela(s) regra(s) de CSS.
Logo, a tag div aplica um estilo em todas as tags (elementos, ou objetos) que estão dentro dela.
Se usar os seletores ID e CLASS em uma tag qualquer para estilizar, estará estilizando todo o conteúdo da tag, o que nem sempre é o que queremos, como veremos em exemplos deste tutorial de CSS.
Todas as tags, exceto a tag <span>, pois esta tag permite que usemos os seletores ID e CLASS em apenas um trecho da tag, ou seja, a tag span é uma tag inline, pois ela é usada dentro de outras tags, é uma espécie de elemento interno de outro elemento (de outra tag).
Como usar a tag <span> em HTML e CSS
Por exemplo, o seguinte código HTML:
<p>Para que serve a tag span - Tutorial de <span>HTML</span> e <span>CSS</span></p>
Tem o seguinte efeito:
Para que serve a tag span - Tutorial de HTML e CSS
Ou seja, simplesmente envolver um trecho com as tags span não produz nenhum efeito propriamente dito. Mas vamos aplicar estilo nessas tags span, vamos colocar cor azul na palavra HTML e cor vermelha na palavra CSS, o código HTML fica:
<p>Para que serve a tag span - Tutorial de <span style="color:blue">HTML</span> e <span style="color:red">CSS</span></p>
E o efeito ocorrido nas tags span estilizadas será:
Para que serve a tag span - Tutorial de HTML e CSS
Ou seja, colocamos as tags <span> dentro de outra tag, a <p>, e aplicamos um estilo somente dentro daquele trecho específico.
Exemplo de uso da tag <span>
Agora que já vimos neste tutorial de CSS a importância, uso e como usar a tag <span>, vamos dar um exemplo de uso mais comumente visto, que é feito usando a span junto com seletores do tipo ID ou CLASS.Vamos criar uma página que vai ter um artigo sobre "Tutorial de CSS", ou seja, um site com um texto.
Até aí tudo ok, vamos escrever um texto genérico sobre essa temática, porém vamos destacar duas coisas, sempre que aparecer "tutorial de CSS" no texto, vamos envolver esse trecho com uma <span class="tutorial">tutorial de css</span> e quando aparecer "Curso HTML Progressivo" vamos identificar este trecho com <span class="site">Curso HTML Progressivo</span>.
Recomendamos que primeiro escreva o texto, e só depois faça uma busca por "tutorial de css" e substitua esse texto por um com as tags span, e o mesmo para Curso HTML Progressivo.
Eu fiz essa substituição usando uma linguagem de programação, o JavaScript.
Agora que identificamos, vamos usar que aprendemos em CSS para estilizar cada vez que esses trechos apareçam em nossa página.
Sempre que aparecer "tutorial de CSS", vamos colocar um negrito e uma cor vermelha neste texto, pois queremos destacá-lo.
Já quando aparecer o nome do site, "Curso Progressivo", vamos aplicar um itálico, negrito, uma cor azul e uma fonte maior.
Nossa folha de estilos estilo.css fica:
.tutorial { font-weight: bold; color: red; } .site { font-style: italic; font-weight: bold; font-size: 20px; color: blue; }
Já nosso documento HTML com um texto genérico fica:
<!DOCTYPE html> <html> <head> <title>Tutorial de CSS - a tag <span></title> <meta name="description" content="Tutorial de CSS sobre a tag <span>"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="estilo.css"/> </head> <body> <h1><span class="tutorial">Tutorial de CSS</span></h1> <h2>Introdução</h2> <p>Neste artigo de nosso <span class="site">Curso HTML Progressivo</span>, iremos falar da importância do CSS para o desenvolvimento web e daremos uma dica sobre um excelente <span class="tutorial">tutorial de CSS</span> que é possível achar online, e gratuito para download.</p> <h2>A importância de um <span class="tutorial">tutorial de CSS</span></h2> <p>Achar um bom <span class="tutorial">tutorial de CSS</span> na internet não é nada fácil.<br /> É possível encontrar um ou outro <span class="tutorial">tutorial de CSS</span> solto, sobre assuntos desconexos, e a maioria já supõe que você saiba de muitas coisas.</p> <p>Um bom <span class="tutorial">tutorial de css</span>, é um que seja completo, assuma que o usuário nunca tenha estudado aquele assunto e que ensine da maneira mais clara e correta possível, passando informações e exemplos, pois só teoria não basta.</p> <h2>Onde achar um bom <span class="tutorial">tutorial de CSS</span> - <span class="site">Curso HTML Progressivo</span></h2> <p>Visando preencher a lacuna que faltava na internet brasileira, o <span class="site">Curso HTML Progressivo</span> oferta um tutorial completo de css, além de ensinar os conhecimentos necessários de HTML que você deve ter para estudar CSS.</p> <p>O <span class="tutorial">tutorial de css</span> da <span class="site">Apostila HTML Progressivo</span> é totalmente online, gratuito e não exige cadastro para o uso, basta acessar o site e começar a ler os artigos sobre CSS.</p> <p>Caso você seja iniciante, aconselhamos a seguir o conteúdo do Índice, pois fornece a ordem exata que você deve estudar pelo <span class="site">Curso HTML Progressivo</span>.</p> <p>Porém, se você não for iniciante, os artigos estão divididos em seções, e você pode usar qualquer <span class="tutorial">tutorial de CSS</span> como referência de consulta.</p> </body> </html>
Crie sua folha de estilos, seu documento.html e rode os códigos para ver o efeito.
Ok, não ficou muito bonito, tá parecendo o site do Restart, mas é só para mostrar o uso das tags <span>, em que situações e como devem ser usadas, é importante você ver o efeito do CSS em todos os artigos de nosso curso.
3 comentários:
Texto muito bom :)
Também gostei. Muito bom o site html progressivo. Parabéns.
Marcos
Ótima explicação
Postar um comentário