Elementos em nível de bloco e em nível linha
Esta aula apresenta o conceito de blocos de conteúdo e introduz as propriedades de estilização de blocos. Também passaremos a conhecer as tags div e span, as quais nos permitirão a construção de páginas HTML mais elaboradas.
Elementos de bloco e de linha
O modelo de formatação CSS organiza o conteúdo de uma página HTML em blocos de conteúdo. Estes blocos são criados por elementos específicos denominados elementos em nível de bloco tais como p e h1. Já os elementos que não criam blocos de conteúdo, como a e img, são chamados de elementos em nível de linha. Visualmente, estes dois tipos de elementos definem uma caixa que envolve o conteúdo do elemento. Observe o exemplo a seguir:
p { background-color: pink; }
a { background-color: yellow; }
<p>
Visite nosso <a href="http://www.site.com">site</a> para obter mais informações.
</p>
Um elemento de linha segue o fluxo de apresentação da linha em que se encontra inserido. Já um elemento de bloco interrompe este fluxo, forçando a quebra de linha. Este comportamento pode ser visualizado no próximo exemplo. Repare que o elemento de bloco ul realiza uma quebra de linha e encerra o bloco de conteúdo do elemento p.
p { background-color: pink; }
a { background-color: yellow; }
ul { background-color: aqua; }
<p>
Lorem ipsum dolor sit amet, <a href="http://www.site.com">LINK</a>
consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
<ul>
<li>Ut enim ad minim veniam</li>
<li>quis nostrud exercitation</li>
<li>ullamco laboris nisi ut aliquip</li>
</ul>
ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
Vários elementos visuais em uma página HTML definem uma caixa que envolve o conteúdo do elemento. Esta caixa segue o modelo ilustrado na figura abaixo:
As margens (margin) definem a espessura da separação entre caixas adjacentes e são sempre transparentes. A borda é um contorno que possui as propriedades espessura (border-width), cor (border-color) e estilo (border-style). A propriedade padding define o espaçamento entre a área de conteúdo e a borda e, assim como a margem, é sempre transparente. O exemplo abaixo ilustra a estilização destas quatro propriedades.
body { background-color: aqua; }
p {
margin: 15px;
border-width: 5px;
border-color: black;
border-style: solid;
padding: 30px;
background-color: pink;
}
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</body>
Para cada uma das propriedades de caixa apresentadas, existem mais quatro propriedades para estilização específica por dimensão. Por exemplo, para a margem temos margin-top, margin-bottom, margin-left e margin-right. Veja o próximo exemplo:
body { background-color: aqua; }
p {
margin-top: 50px;
margin-left: 30%;
border-top-width: 3px;
border-top-style: dotted;
border-bottom-width: 3px;
border-bottom-style: solid;
background-color: pink;
}
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</body>
Também é possível a utilização da forma abreviada para estilização das quatro dimensões. Basta declarar a propriedade em questão e utilizar espaço para separar os valores. A ordem seguida é top, right, bottom e left (sentido horário començando em top).
body { background-color: aqua; }
p {
margin: 20px 3px 0px 20px;
border-width: 1px 3px 6px 12px;
border-style: solid dashed dotted double;
background-color: pink;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
Elementos div e span
A tag div é um elemento em nível de bloco que não possui significado (semântica) específico. Possui a capacidade de agrupar elementos tanto em nível nível de linha quanto em nível de bloco. Uma div pode, assim, incluir outras divs ou outros elementos de bloco. Sua principal finalidade é a de realizar agrupamento de elementos HTML. Anteriormente, div era muito utilizada na definição de regiões da página como cabeçalho, menu e rodapé:
#cabecalho {
font-size: 18px;
border-bottom-style: double;
border-bottom-width: 4px;
border-bottom-color: black;
}
#conteudo {
font-size: 16px;
margin-top: 10px 5px 10px 5px;
background-color: pink;
}
#rodape {
font-size: 12px;
border-top-style: double;
border-top-width: 4px;
border-top-color: black;
}
<body>
<div id="cabecalho">
<h1>DIATINF</h1>
</div>
<div id="conteudo">
<p>
A Diretoria Acadêmica de Gestão e Tecnologia da Informação (DIATINF)
oferta cursos técnicos integrados e cursos superiores de tecnologias.
A DIATINF também organiza os procedimentos administrativos que envolvam
alunos e professores, como registro acadêmico, elaboração de horários e
coordenação das aulas nos laboratórios.
</p>
</div>
<div id="rodape">
<p>
IFRN - Campus Natal Central <br/>
Av. Sen Salgado Filho, 1559, Tirol. Natal - RN
</p>
</div>
</body>
Atualmente, o uso de div não é mais recomendado para a defnição de áreas como cabeçalho, corpo de conteúdo e navegação pois a HTML já prevê tags específicas para isso. A orientação é que a tag div seja utilizada quando houver a necessidade de realizar agrupamento de elementos, mas este agrupamento não reflete a semântica de alguma tag mais específica como p ou article.
A tag span é um elemento em nível de linha capaz de agrupar outros elementos de linha. Geralmente este agrupamento é realizado para aplicação de formatação específica ou para o compartilhamento de valores de atributos (e.g., lang). Assim como na tag div, o uso de span somente é recomendado quando não houver outra tag em nível de linha mais específica como strong ou em. A seguir é apresentado um exemplo de uso de span para aplicação de formatação específica.
.codigo {
font-family: monospace;
}
.valor {
font-family: Arial;
font-style: italic;
}
.obs {
font-weight: bold;
color: red;
}
<p>
A propriedade <span class="codigo">border-style</span> também aceita os valores
<span class="valor">groove</span>, <span class="valor">ridge</span>,
<span class="valor">inset</span> e <span class="valor">outset</span>.
<br/>
<span class="obs">ATENÇÃO: </span> o IE 6 não segue o comportamento padrão
para estas opções de borda.
</p>
Exercícios
1) Escreva o código HTML para gerar a página a seguir. Utilize tags h1, h2 e h3 e as regras margin:0px, border-width:10px e padding:10px.
2) Escreva o código HTML para gerar a página a seguir. Utilize tags div para realizar as divisões da página.
3) Escreva o código HTML para gerar a página a seguir. Utilize tags span para aplicar formatação diferenciada aos acordes da música.
Fonte: www.cifraclub.com.br
4) Escreva o código HTML para gerar a página a seguir. Utilize tags span para aplicar formatação diferenciada nos trechos apontados pelas setas.
Referências
- SILVA, Maurício Samy. Construindo sites com CSS e (X)HTML: sites controlados por folhas de estilo em cascata. São Paulo: Novatec, 2008.
- MACEDO, Marcelo da Silva. Construindo sites adotando padrões Web. Rio de Janeiro: Ciência Moderna, 2004.