• Tweet
• Email

• Tweet
• Email

Dando continuidade à série de artigos, apresentamos-lhe hoje técnicas de CSS Avançado, depois de HTML5, Javascript Básico, Javascript Avançado, jQuery e CSS Básico. Embora o nome sugira que este artigo terá conteúdo de difícil aprendizagem, não terá que ser necessariamente assim, pois não há uma divisão dentro do CSS em que seja possível dizer que há uma parte básica e outra avançada. Foi feita uma divisão desta forma para que você possa ter uma boa curva de aprendizagem, com uma introdução com uma parte básica e agora este artigo com técnicas que requerem um pouco mais de trabalho. Mas é só isso mesmo, sem uma grande dificuldade acrescida. Com paciência e sem pressas irá compreender todo o conteúdo, pois como se costuma dizer, a pressa é inimiga da perfeição.

1. MODELO DE CAIXA

É usado o termo box model quando se fala do design ou do layout de uma página, em que os elementos serão considerados caixas onde se insere o conteúdo. O modelo de caixa (box model) em CSS é uma caixa que engloba o conteúdo HTML, e consiste em margens, limites, indentação e o conteúdo. Isto permite que seja inserido conteúdo dentro de uma caixa e sejam dados valores de espaçamento entre caixas para posicionamento do conteúdo.

Nada melhor que uma imagem para explicar o conceito:

2. AGRUPAMENTO/NINHO DE SELECTORES

De certeza que lhe irá acontecer ter na mesma folha de estilos elementos com o mesmo estilo. Então, ao invés de estar a estilizar cada um separadamente, faz agrupamentos por estilos, minimizando linhas de código.

Portanto em termos práticos este código:

h1
{
color:yellow;
}
h3
{
color:yellow;
}
p
{
color:yellow;
}

Passa a:

h1,h3,p
{
color:yellow;
}

Um processo simples que poupa algumas linhas de código!

Poderá também fazer ninhos de selectores, sendo possível fazer estilização para um selector, dentro de um selector. Vejamos:

p
{
color:black;
text-align:justify;
}
.marked
{
background-color:red;
}
.marked p
{
color:green;
}

Neste exemplo é estilizado o elemento “p” e uma estilização à parte é aplicada aos elementos “p” que estejam dentro da classe “marked”.

3. DIMENSÕES

Este é um item fácil e directa, sem necessitar de muita explicação. Fica aqui uma tabela que facilita o processo de aprendizagem.

4. VISIBILIDADE E IMAGEM

Alterando como um elemento é mostrado

Para alterar a maneira como um elemento é apresentado, entre inline e block , basta introduzir {display:inline;} ou {display:block;} no elemento:

/* Como block */
span {display:block;}
/* Como inline */
span {display:inline;}

Esconder elementos

É possível esconder elementos através da propriedade display alterando-a para none ou alterando a propriedade visibility para hidden. Desta forma o elemento não será mostrado, e as duas situações são diferentes uma da outra.

Enquanto que a propriedade visibility mantém o espaço do elemento quando este é escondido, com a propriedade display isto não acontece, e uma vez que o espaço do elemento é retirado, irá afectar o layout da página.

/* VISIBILITY */
h1.hidden {visibility:hidden;}

/* DISPLAY */
h1.hidden {display:none;}

5. POSICIONAMENTO

O Posicionamento em CSS é o que lhe permite posicionar os elementos onde quiser, um atrás de outro, definir o que acontece quando o conteúdo de um elemento é demasiado grande, entre outros. O posicionamento é feito dando valores ás propriedades top,bottom,left, e right. Estes só irão funcionar se a propriedade de posição estiver definida primeiro.

Posicionamento estático

Os elementos são posicionados estaticamente por defeito. Os elementos posicionados estaticamente não estão sujeitos aos valores das propriedades top,bottom,left, e right.

Posicionamento fixo

O posicionamento fixo é relativo à janela do navegador, e não se irá mexer mesmo que seja feito scroll na página.

p.pos_fixed
{
position:fixed;
top:15px;
right:25px;
}

Posicionamento relativo

O posicionamento relativo é relativo à sua posição normal:

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Posicionamento absoluto

O posicionamento absoluto é feito relativamente ao primeiro elemento que tenha uma posição diferente de posicionamento estático. Se nenhum elemento destes for encontrado, será feito em relação a <html>.

h2
{
position:absolute;
left:100px;
top:150px;
}

6. FLUTUAÇÃO

O CSS Float é quando um elemento pode ser movido para a direita ou esquerda, permitindo que outros elementos se ajustem a si. É muito usado com imagens, mas também é muito útil quando se está a trabalhar com lauouts.

Como funciona

Os elementos só flutuam horizontalmente, sendo que só poderá ser introduzido right e left na propriedade float. Os elementos afectados pelo float serão apenas os que estão depois do mesmo.

img
{
float:right;
}

Vários elementos flutuando

É possível ter vários elementos flutuando próximos uns dos outros, pois irão-se ajustar se no espaço que houver espaço para isso.

.thumbnail
{
float:right;
width:235px;
height:110px;
margin:7px;
}

Desligar a flutuação

Para remover a flutuação usa-se o clear. Isto é usado quando não se pretende que os elementos que estão depois do elemento flutuante sejam afectados.

.text_line
{
clear:both;
}

7. ALINHAMENTO

O alinhamento pode ser aplicado a texto (ver Tutorial: Aprender o básico sobre CSS ) e a elementos. Para fazer o alinhamento de elementos, podemos usar múltiplas propriedades, cada uma com as suas particularidades.

Alinhamento usando a margem

O alinhamento usando a propriedade margin é simples, sendo que se pretender centrar o elemento basta introduzir margens automaticas para a direita e esquerda:

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#FFFFFF;
}

Alinhamento usando a posição

Este alinhamento usando a propriedade position permite-lhe alinhar à direita e esquerda sem dificuldade.

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#FFFFFF;
}

Alinhamento usando o float

Também é possível fazer alinhamento através desta técnica:

.right
{
float:right;
width:300px;
background-color:#FFFFFF;
}

/* ou */

.left
 {
 float:left;
 width:300px;
 background-color:#b0e0e6;
 }

Incompatibilidades entre browsers

Para evitar que entre browser haja erros nas posições dos elementos, deve-se definir o espaçamento e margem para o elemento body. Existe ainda outro problema relacionado com o Internet Explorer, que quando a declaração !Doctype está em falta, é adicionada automaticamente uma margem de 17x do lado direito, que seria o espaço reservado para a barra de deslocamento. Assim, declare sempre !Doctype e defina o espaçamento e margem para o body.

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#FFFFFF;
}

8. BARRA DE NAVEGAÇÃO

Uma boa barra de navegação é importante numa página web. Com CSS conseguirá criar fantásticas barras de navegação super atractivas que irão deixar os seus visitantes extasiados!

Menu de navegação

<ul>
<li><a href="index.php">Inicio</a></li>
<li><a href="artigos.php">Artigos</a></li>
<li><a href="contactos.php">Contactos</a></li>
<li><a href="sobre.php">Sobre</a></li>
</ul>

Como poderá ver se testar, aparecerá uma lista. Para remover o espaçamento e aqueles pontos da lista, usa-se:

ul
{
list-style-type:none; /* retira os pontos */
margin:0; /* retira a margem */
padding:0; /* retira o espaçamento */
}

Tudo junto, e utilizando folha de estilos interna:

<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="index.php">Inicio</a></li>
<li><a href="artigos.php">Artigos</a></li>
<li><a href="contactos.php">Contactos</a></li>
<li><a href="sobre.php">Sobre</a></li>
</ul>

</body>
</html>

Barra de navegação vertical

Para criar uma barra vertical teremos de a mostrar como block. Assim sendo, e incluindo todo o código:

<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}

li
{
display:block;
}
</style>
</head>
<body>
<ul>
<li><a href="index.php">Inicio</a></li>
<li><a href="artigos.php">Artigos</a></li>
<li><a href="contactos.php">Contactos</a></li>
<li><a href="sobre.php">Sobre</a></li>
</ul>

</body>
</html>

Barra de navegação horizontal

Para criar uma barra de navegação horizontal, teremos de a mostrar como inline: Assim sendo, e incluindo todo o código:

<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}

li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="index.php">Inicio</a></li>
<li><a href="artigos.php">Artigos</a></li>
<li><a href="contactos.php">Contactos</a></li>
<li><a href="sobre.php">Sobre</a></li>
</ul>

</body>
</html>

9. GALERIA DE IMAGENS

Para criar uma galeria de imagens, o código é um pouco mais complexo, ainda assim, compreensível.

<html>
<head>
<style type="text/css">
div.img
{
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}
</style>
</head>
<body>

<div class="img">
 <a target="_blank" href="imagem1_big.htm"><img src="imagem1_small.jpg" alt="imagem1" width="110" height="90" /></a>
 <div class="desc">Adicione uma descrição da imagem aqui</div>
</div>
<div class="img">
 <a target="_blank" href="imagem2_big.htm"><img src="imagem2_small.jpg" alt="imagem2" width="110" height="90" /></a>
 <div class="desc">Adicione uma descrição da imagem aqui</div>
</div>
<div class="img">
 <a target="_blank" href="imagem3_big.htm"><img src="imagem3_small.jpg" alt="imagem3" width="110" height="90" /></a>
 <div class="desc">Adicione uma descrição da imagem aqui</div>
</div>
<div class="img">
 <a target="_blank" href="imagem4_big.htm"><img src="imagem4_small.jpg" alt="imagem4" width="110" height="90" /></a>
 <div class="desc">Adicione uma descrição da imagem aqui</div>
</div>

</body>
</html>

Gostou? Tem sugestões a fazer? Comente e participe!

Até já!