No CSS, os elementos são tratados basicamente como caixas retangulares ou tiras. Para descrever as caixas, as seguintes propriedades – que vocês já devem conhecer – são usadas:
• width – largura do elemento
• height – altura do elemento
• left – afastamento à esquerda
• right – afastamento à direita
• top – afastamento para cima
• bottom – afastamento para baixo
• margin – margem externa
• border – borda do elemento
• padding – preenchimento interno, ou seja, a distância da borda para o conteúdo do elemento
Essas propriedades já foram apresentadas.
A largura total de um elemento é a soma da largura das respectivas medidas. (O mesmo vale para a altura).
Um exemplo:
div#box {
width: 100px;
padding: 20px; /* 20px para a esquerda e direita /
border: 2px sólido; / 2px para esquerda e direita /
margin: 0 30px; / 30px para esquerda e direita */
}Qual a largura deste bloco div? Vamos analisar os valores individuais:
• 100 pixels
• 2 vezes 20 pixels
• 2 vezes 2 pixels
• 2 vezes 30 pixels
Isso resulta em uma largura total do elemento de 204 pixels.
A largura e altura dos elementos são determinadas por width e height. Se essas medidas não estiverem especificadas na folha de estilo, o seguinte se aplica:
• Se faltar width, a caixa será tão larga quanto o elemento envolvente exibir.
• Se faltar height, o elemento será tão alto quanto seu conteúdo.
Um exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px sólido; /* 2px para esquerda e direita */
margin: 0 30px; /* 30px para esquerda e direita */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
No navegador, isso aparece da seguinte forma:
O elemento pai do elemento div é body. Portanto, o elemento é exibido com a largura do elemento body. Quanto à altura, ela é baseada no conteúdo.
Tudo em Zero
Cada navegador possui uma folha de estilo incorporada. Nestas folhas de estilo, alguns valores padrão são definidos. Isso se aplica, por exemplo, a padding e margin. Infelizmente, esses valores padrão variam entre os diferentes navegadores. Este aspecto torna difícil obter resultados idênticos nos respectivos navegadores, especialmente em relação ao modelo de caixa. Portanto, é recomendável definir as margens fornecidas pelos navegadores como zero. Isso pode ser feito da seguinte maneira:
* { padding: 0; margin: 0; }
Adicione essa linha no início da sua folha de estilo. Desta forma, você poderá começar a posicionar as caixas nos locais desejados.
Tipos de Caixas
Como um elemento é finalmente exibido e como influencia outros elementos depende do tipo de elemento. Na verdade, a especificação CSS diferencia entre elementos de bloco e elementos inline. (Existem outros tipos, que não serão considerados aqui, pois desempenham um papel secundário).
Elementos de bloco sempre geram uma nova linha. Elementos subsequentes também começam em uma nova linha. Elementos de bloco típicos incluem, por exemplo, p, div, h1, ul, etc. Para esses elementos, as propriedades de margem externa, margem interna, altura, largura e borda listadas anteriormente são aplicadas.
<h1>Digital Painting & Matte Painting: Definindo a estrutura da imagem</h1> <p>Módulo 2 - Parte 2: Uma imagem é sempre um todo. No entanto, é preciso considerar sempre onde o observador deve primeiro olhar.</p>
Uma olhada no resultado no navegador mostra que h1 e p geram uma nova linha cada.
Por outro lado, elementos inline não geram um parágrafo separado, mas são exibidos no fluxo normal de texto. Elementos inline típicos são span, em, strong, img, br, etc. Para elementos inline, não são aplicadas margens externas verticais nem medidas de largura e altura.
<h1><em>Digital Painting & Matte Painting</em>: Definindo a estrutura da imagem</h1> <p>Módulo 2 - Parte dois: <strong>Uma imagem é sempre um todo</strong>. No entanto, é preciso considerar sempre onde o observador deve primeiro olhar.</p>
E também aqui fica um olhar sobre o resultado:
Vocês podem transformar elementos, que são na realidade elementos de bloco, em elementos inline.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Módulo 2 - Parte 2: <em>Uma imagem é sempre um todo</em>. No entanto, é sempre necessário considerar para onde o observador deve olhar primeiro.</p>
</body>
</html>Visualizem o resultado no navegador.
A cor de fundo do título h1 sinaliza que o elemento ocupa toda a largura. A largura é orientada pelo elemento pai body.
Agora entra em jogo a propriedade display.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Módulo 2 - Parte 2: <em>Uma imagem é sempre um todo</em>. No entanto, é sempre necessário considerar para onde o observador deve olhar primeiro.</p>
</body>
</html>
Ao utilizar display: inline, a largura do elemento é alterada.
Na realidade, a largura do elemento agora se ajusta ao conteúdo existente. Aqui está uma visão geral dos valores que podem ser atribuídos ao display:
• none – sem exibição
• block – o elemento é exibido como um elemento de bloco, criando assim uma nova linha.
• inline – o elemento é exibido como um elemento inline, aparecendo no fluxo do texto.
• inline-block – cria externamente um bloco, no qual altura, largura e margens externas podem ser especificadas. No entanto, cada elemento permanece no fluxo do texto. Portanto, é uma combinação de um elemento de bloco e um elemento inline.
• list-item – o elemento é exibido como um elemento de bloco. No entanto, um marcador de lista é adicionado à frente dele.
• run-in – cria um elemento de bloco ou inline dependendo do conteúdo.
• table – funciona como o elemento table conhecido em HTML.
• inline-table – funciona como o elemento table em HTML, mas inline.
• table-row – o elemento contém elementos filhos arranjados horizontalmente, funcionando como o elemento tr em HTML.
• table-cell – o elemento representa uma célula de tabela e funciona como os elementos th e td em HTML.
• table-row-group – o elemento contém um grupo de elementos com vários elementos filhos arranjados horizontalmente e funciona como o elemento tbody em HTML.
• table-header-group – o elemento contém um grupo de elementos com vários elementos filhos arranjados horizontalmente e funciona como o elemento thead em HTML.
• table-footer-group – o elemento contém um grupo de elementos com vários elementos filhos arranjados horizontalmente e funciona como o elemento tfoot em HTML.
• table-column – descreve as propriedades das células de uma coluna. O table-column funciona como o elemento col em HTML.
• table-column-group – este elemento contém um grupo de elementos que descrevem as propriedades das células de uma coluna. Funciona como o elemento colgroup em HTML.
• table-caption – define o cabeçalho da tabela. A propriedade funciona como o elemento caption em HTML.
De fato, o CSS oferece diferentes opções de exibição para vários tipos de elementos. Essas opções desempenham um papel crucial na posição dos elementos. Mais informações nos próximos tutoriais.
