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

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Antonio
    29 de dezembro de 2010

    Gostei do tutorial embora ache que para quem está aprender CSS, mesmo que passando para o modo avançado, a utilização de exemplos ou resultados finais seria benéfico (tipo W3SCHOOLS).

    Um abraço.
    António



  2. Leandro
    30 de agosto de 2011

    Muito bom tutorial! Bem explicado e com detalhes.
    Estou entrando agora nesse meio e achei bem didatico.
    Obrigado!



    • Diogo Espinha
      31 de agosto de 2011

      Olá Leandro, obrigado pelo seu comentário!

      Abraço



  3. Eris
    19 de julho de 2012

    Legal, bom mesmo! Mas isso está longe de ser CSS avançado!!!
    Coloca como CSS intermediário.
    Abçs



  4. lena
    24 de outubro de 2012

    será possível alguém ajudar a calcular a potencia com um ciclo for em php???urgente


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz