CSS é a abreviatura de Cascade Styling Sheet, que significa Folha de Estilo em Cascata, e é a linguagem utilizada para controlar a apresentação de elementos em documentos HTML. A apresentação destes é especificada por uma série de regras que podem ser atribuídas em linha através dos atributos do elemento style ou através de regras incluídas dentro das tags na secção head dos documentos HTML, ou através de folhas de estilo externas (Leia: Tutorial: Aprender o básico sobre CSS ). Cada regra de estilização selecciona os elementos e depois aplica as regras aos mesmos.

O CSS foi criado pelo W3C para recuperar o controlo da markup de documentos à medida que o HTML ia evoluíndo a partir das tags primárias que definiam os elementos estruturais de um documento, como os cabeçalhos, parágrafos, hiperligações e listagens. Neste artigo Programação CSS para iniciantes (Parte XII) vamos mostrar como fixar posições do layout e introduzir o flutuamento de caixas de conteúdo em CSS.

CSS

Não perca os artigos anteriores desta série:

7. MANUSEAR A TRANSBORDAGEM DE CONTEÚDO

CSS fornece vários métodos de controlo para especificar o tamanho e posição das caixas de contéudo, mas não existe nenhuma garantia que o conteúdo irá se encaixar perfeitamente dentro dos seus limites em qualquer circunstância. Imagine que tem um texto dentro de uma caixa de conteúdo, e que pretende aumentar o seu tamanho? O texto irá sair fora dos limites e estragar o seu layout. Existe a propriedade overflow em CSS que permite determinar métodos de manuseamento relativamente à transbordagem de conteúdo , utilizando os valores hidden ou scroll.

Por outro lado, o conteúdo inserido dentro de caixas de conteúdo posicionadas em bloco pode ser cortado utilizando a propriedade clip, que irá utilizar as coordenadas dos cantos da caixa de conteúdo para determinar os seus limites. Em CSS, estas coordernadas são determinadas na propriedade clip, em uma lista dentro da palavra chave rect(), seguindo a ordem top-left, top-right, bottom-right e bottom-left.

Assim, iremos apresentar-lhe um exemplo da utilização destes métodos:

  1. Crie um documento HTML e insira o seguinte código para criar seis div’s que contêm a mesma imagem:
    <body>
    <div class="crop auto-clip"><img src="pic.png" alt="Blocos" /></div>
    <div class="crop block-clip"><img src="pic.png" alt="Blocos" /></div>
    <div class="crop line-clip"><img src="pic.png" alt="Blocos" /></div>
    <div class="spill show-overflow"><img src="pic.png" alt="Blocos" /></div>
    <div class="spill hide-overflow"><img src="pic.png" alt="Blocos" /></div>
    <div class="spill keep-overflow"><img src="pic.png" alt="Blocos" /></div>
    </body>
  2. Crie um ficheiro CSS, linke-o ao documento HTML e insira o seguinte código para determinar a posição dos elementos em 2 linhas:
    div.crop {position: absolute; top:20px; width:100px; height: 100px}
    div.spill {position: absolute; top:150px; width:75px; height: 75px}
  3.  De seguida crie uma regra de estilização que vai determinar o comportamento relativo à primeira imagem, fazendo com que seja “cortada” para o seu tamanho total:
    div.auto-clip {left:20px; clip:auto}
  4.  Adicione uma nova regra de estilização que vai cortar a área visível da segunda e terceira imagens, determinando através da propriedade rect() qual a área a deixar visível:
    div.block-clip{left:140px; clip: rect(25px, 100px, 100px, 25px)}
    div.line-clip{left:260px; clip: rect(25px,100px,50px,0px)}
  5.  Agora relativamente à quarta imagem, vamos determinar que o excedente dos limites estará visível:
    div.show-overflow {left: 20px; overflow: visible}
  6.  Quanto à quinta imagem, vamos fazer o inverso, esconder o que excede os limites:
    div.hide-overflow {left:140px; overflow: hidden}
  7.  O excedente da última imagem poderá ser visualizado, porém só será possível através do scroll, mantendo o tamanho determinado anteriormente:
    div.keep-overflow {left:260px; overflow: scroll}
  8. Guarde os documentos HTML e CSS e observe o resultado:
    Programação CSS para iniciantes (Parte XIII)

8. UTILIZAÇAO DE COLUNAS – ESQUEÇA AS TABELAS!

A tradição determinava que o layout de uma página fosse determinado através da utilização de tabelas, dando assim algum controle ao web designer de como o layout da sua página iria ficar, criando tabelas sem limites, com várias células dentro das quais o conteúdo era inserido. No entanto, esta prática caiu em desuso muito pela evolução do CSS, e hoje em dia é uma prática não aconselhada. Ao utilizar o CSS, você terá muito mais controle sobre o layout de suas páginas, contando ainda com todo o potencial, funcionalidades e particularidades que esta linguagem oferece – com CSS você terá muito mais precisão no posicionamento dos elementos e conteúdos em suas páginas do que com a utilização de tabelas, esqueça as tabelas!

Naturalmente que se você sempre esteve habituado a utilizar tabelas para criar os layouts de suas páginas, não está familizarizado com os métodos CSS para o fazer. Assim, vamos fazer uma introdução simples e direta a este tema, criando um layout básico utilizando colunas em CSS. O código é bastante perceptível, mas se tiver alguma dúvida não hesite em perguntar.

  1. Crie um documento HTML com o seguinte código, para criar os elementos para o cabeçalho, com as colunas e ainda o rodapé:
    <body>
    <div id="wrapper">
    <div id="header"><p>Cabeçalho</p></div>
    <div id="nav"><p class="menu">Menu de Navegação</p></div>
    <div id="ads"><p class="menu">Área de Anúncios (por ex.)</p></div>
    <div id="main"><p>Área de Conteúdos</p></div>
    </div>
    <div id="footer"><p>Rodapé</p></div>
    </body>
  2.  Agora crie um ficheiro de estilos CSS, linke-o ao documento HTML e insira o seguinte código para remover todas as margens, paddings e centrar o conteúdo:
    * {margin:0; padding:0; text-align:center}
  3.  Agora vamos determinar que a nossa página será do tamanho da janela do navegador:
    html,body {height: 100%}
  4.  Outro passo importante é determinar que o div onde está inserido todo o website irá ocupar toda a área da janela, com excepção de uma área no fundo que será ocupada pelo rodapé:
    #wrapper {min-height: 100%; height: auto !important; height:100%; margin:0 auto -40px}
  5.  Agora passamos à estilização dos elementos, começando pelo cabeçalho e pelo rodapé:
    #header {height:60px; background:#069}
    #footer {height:40px; background:#060}
  6. Finalmente vamos estilizar o menu de navegação, a área de anúncios e a área de conteúdos:
    #nav{float: left; width:100px; height:470px; background:#900}
    #ads{ float:right; width:100px; height:470px; background:#F60}
    #main{margin:0 100px; height:470px; background:#600}

    Neste caso introduzimos uma altura de 470px apenas para o propósito demonstrativo que iremos apresentar no resultado final.

  7.  Por último insira o seguinte código para estilizar o texto utilizado:
    p {font-size:34px}
    p.menu {font-size:22px}
  8. Guarde ambos os documentos e observe o resultado:
    Programação CSS para iniciantes (Parte XIII)

9. A NÃO ESQUECER

  • A regra de estilização margin:auto centra horizontalmente as caixas de conteúdo de bloco, à semelhança da antiga tag <center>
  • A regra de estilização text-align:center centra horizontalmente o texto dentro de uma caixa de contéudo
  • Os esquemas de posicionamento absolute, relative e fixed utilizam as propriedades top, right, bottom e left para determinar a posição
  • A regra position:absolute remove um elemento do seu posicionamento normal dentro de um layout
  • A regra position:relative remove um elemento do seu posicionamento normal mas conserva o espaço do seu posicionamento inicial
  • A regra position:fixed remove um elemento do seu posicionamento normal e posiciona-se em um determinado local, a uma determinada distância dos limites da janela
  • A propriedade float usa as propriedades left, right ou both para reposicionar um elemento dentro do layout
  • Nunca será demais relembrar: Esqueça as tabelas, utilize CSS para criar os seus websites

Abraço!

 

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. Gregoria Correia
    22 de junho de 2012

    Ola Diogo
    é um bom espaço, tenho a certeza que vou aprender muito aqui.
    Um abraço


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