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:

5. FIXAR POSIÇÕES CONSTANTES

Um esquema de página com posições fixas, como o posicionamento absoluto, remove por completo as caixas de conteúdo selecionadas do layout standard da página. Ao contrário do posicionamento absoluto em que os valores offset estão relacionados com os limites do elemento contido, no posicionamento fixo os valores de offset estão relacionados com a vista no navegador, a posição é relativa à janela do navegador, e não relativa a qualquer parte do documento. Assim, os elementos podem ser posicionados de forma a dar a ilusão de uma interface baseada numa frame onde algumas das frames permanecem numa posição fixa independentemente se a página é movida na vertical ou não através do scroll. A título de exemplo, um banner publicitário pode ser fixo no topo da página de forma a ficar sempre visível enquanto o usuário faz scroll na página.

Para ver isto em ação, nada melhor que praticar e observar o código.

  1. Crie um documento HTML e insira o seguinte código que contém um elemento div para posicionar o banner, um elemento h1 e um p com texto para criar espaço para o scroll:
    <body>
    <center>
    <div id="banner">
    <img src="banner.png" width="468" height="60" alt="Banner" />
    </div>
    </center>
    <h1>Título</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta, libero id vehicula molestie, est leo sodales felis, quis dapibus urna quam ut nibh. Sed pretium leo at est consectetur eget lobortis dolor gravida. Praesent sed tortor nec justo laoreet pellentesque. Quisque sollicitudin, enim id pellentesque tincidunt, ante nunc iaculis sapien, dapibus varius urna ante nec velit. Etiam nec leo non elit suscipit laoreet sit amet ut enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla accumsan tortor quis libero eleifend vel lacinia nisl commodo. Suspendisse at vestibulum enim.</p>
    
    <p>Donec ac sagittis orci. Duis sed gravida est. Pellentesque eleifend pulvinar tellus, rhoncus auctor justo tempus luctus.
    Etiam egestas dolor ac lacus convallis at porttitor risus auctor. Curabitur tincidunt risus at massa congue porta. Nullam dignissim orci a nisi aliquet feugiat et ultricies risus. Nulla facilisi. Quisque vitae nisi ipsum. Quisque interdum, elit quis ultricies elementum, ligula purus posuere neque, at lobortis eros urna eget erat.</p>
    
    <p>Mauris ipsum erat, elementum et eleifend imperdiet, tempor sed sapien. Curabitur mattis pharetra sem eget venenatis. Cras sit amet interdum augue. Aliquam erat volutpat. Pellentesque fringilla, ante eu fermentum condimentum, erat arcu rhoncus mi, eget convallis dui sapien eu justo. Proin in elit ante. In dignissim, quam at egestas aliquet, nisl urna condimentum est, sit amet sollicitudin erat augue at eros.</p>
    
    <p>Etiam placerat vulputate ornare. Curabitur auctor, arcu eu ultrices ultrices, orci velit pulvinar diam, a pretium dolor urna at dolor. Nunc ligula neque, faucibus et facilisis id, molestie a urna. Suspendisse potenti.
    Morbi lorem magna, tincidunt vestibulum volutpat congue, adipiscing vel orci. Donec iaculis ornare enim eu faucibus. Suspendisse potenti. Nunc sollicitudin neque eu nulla auctor vel mattis lectus porttitor. Sed cursus viverra diam eget imperdiet. Nulla vulputate lacus eget nisl accumsan aliquet. Etiam eget viverra sapien. Mauris fermentum sem vel lectus luctus vel semper velit lacinia. Quisque ut tortor eu dui venenatis rutrum. Aenean ipsum velit, bibendum a pharetra eget, ornare sodales odio.</p>
    
    <p>Maecenas vestibulum libero in felis lobortis vestibulum. Donec nec urna sed nisi malesuada pharetra. Nulla laoreet nunc cursus dolor sodales sed eleifend eros rutrum. Sed neque risus, accumsan ac tincidunt ac, interdum et urna. Etiam eget massa et erat hendrerit iaculis eget nec mauris.
    Morbi elementum tortor ut lorem rutrum quis imperdiet quam lacinia. Curabitur eget quam quis massa sodales consequat. Phasellus at nibh non nisi blandit consectetur. Nam tincidunt tincidunt eros, et lacinia neque consequat auctor.</p>
    
      <p>Sed dictum, nisi quis dapibus gravida, urna est cursus magna, id congue leo eros a eros. Quisque congue lobortis metus, nec molestie velit auctor commodo. Aliquam erat volutpat. In nec magna purus. Praesent pharetra tempus tellus, ac suscipit massa imperdiet sed. Mauris convallis, leo at blandit aliquam, quam nunc posuere arcu, ut condimentum metus turpis eget enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    
    <p>Ut vehicula quam non purus vestibulum iaculis. Mauris ante quam, lobortis ac pellentesque sit amet, porta at urna. Curabitur et pellentesque ante. Ut iaculis arcu eget quam fringilla suscipit. Cras ac mauris vitae tellus feugiat tristique sed eget lectus.
    Ut ac massa ut risus scelerisque tempus. Praesent sed elementum nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ut scelerisque urna.</p>
    
      <p>Donec vulputate dignissim nisl, id euismod est mollis vestibulum. Aenean eros metus, luctus vitae mattis vitae, commodo ut dui. Nam pretium orci et lacus fermentum eleifend. Mauris aliquet ligula a est porttitor ac luctus erat rutrum. Fusce aliquet laoreet porttitor. Aliquam non erat massa, sit amet sollicitudin diam. Cras sollicitudin egestas orci eu ullamcorper. Suspendisse nisl turpis, fermentum non mollis at, imperdiet sit amet odio. Nullam laoreet quam nec eros auctor fermentum lobortis sem viverra. Vivamus scelerisque, mauris id pharetra commodo, tellus nulla scelerisque ligula, nec interdum lectus sapien vitae risus. Morbi ac sapien varius tellus volutpat fringilla a id mi. Pellentesque ac massa metus, sit amet dictum sem. Integer vel est vitae nulla volutpat aliquet. Aliquam elementum tincidunt tincidunt. Ut porttitor lobortis elit, ut luctus eros placerat eget. </p>
    </body>
  2.  Salve o documento HTML e de seguida crie um documento CSS para inserirmos a estilização, determinando assim a posição fixa do banner:
    #banner {position:fixed; top:0; left:0; margin:auto; width:100%; z-index:2}
  3.  De seguida insira o seguinte código para determinarmos alguns valores para os elementos h1 e p:
    h1 {position: relative; top: 50px; z-index:1}
    p {position: relative; top: 50px; text-align:justify}
  4.  Salve o documento HTML e o documento CSS e abra o documento no seu navegador de eleição:
    Programação CSS para iniciantes (Parte XII)
  5. Agora faça scroll na página e observe o resultado:
    Programação CSS para iniciantes (Parte XII)

6. CAIXAS DE CONTEÚDO FLUTUANTES

A propriedade CSS Float permite que uma caixa de conteúdo possa ser posicionada em um dos lados do elemento em que está contida, utilizando as palavras left ou right para determinar qual o lado em que esta deverá ser posicionada. As caixas de conteúdo não são removidas do esquema normal do layout, mas sim reposicionadas dentro do mesmo, e o espaço que ocupavam na sua posição original não é preservado, permitindo que outro conteúdo ocupe esse lugar. Normalmente esta técnica é utilizada para fazer com que texto preencha o espaço à volta deste elemento que foi reposicionado usando o float, dentro de um parágrafo.

Além de permitir que o texto preencha o espaço à volta do elemento, também é possível fazer com que isso não aconteça utilizando a propriedade CSS clear, em que você pode especificar qual o lado que deverá ser limpo, utilizando as palavras left, right ou both. Para observar como funciona, vamos praticar:

  1. Crie um documento HTML e insira o seguinte código para começar a determinar o layout do nosso documento:
    <body>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta, libero id vehicula molestie, est leo sodales felis, quis dapibus urna quam ut nibh. Sed pretium leo at est consectetur <img src="small_ec.png" width="130" height="115" alt="EC" /> eget lobortis dolor gravida. Praesent sed tortor nec justo laoreet pellentesque. Quisque sollicitudin, enim id pellentesque tincidunt, ante nunc iaculis sapien, dapibus varius urna ante nec velit. Etiam nec leo non elit suscipit laoreet sit amet ut enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla accumsan tortor quis libero eleifend vel lacinia nisl commodo. Suspendisse at vestibulum enim.</p>
    <br />
    <p>
    Donec ac sagittis orci. Duis sed gravida est. Pellentesque eleifend pulvinar tellus, rhoncus auctor justo tempus luctus. Etiam egestas dolor ac lacus convallis at porttitor risus auctor. Curabitur tincidunt risus <img src="small_ec2.png" width="130" height="115" alt="EC" /> at massa congue porta. Nullam dignissim orci a nisi aliquet feugiat et ultricies risus. Nulla facilisi. Quisque vitae nisi ipsum. Quisque interdum, elit quis ultricies elementum, ligula purus posuere neque, at lobortis eros urna eget erat.</p><br />
    <p class="clear">Duis sed gravida est. Pellentesque eleifend pulvinar tellus, rhoncus auctor justo tempus luctus</p>
    </body>
  2.  Salve o documento HTML, crie um documento CSS, linke-o ao HTML e insira o seguinte código para determinar o fundo dos parágrafos e o seu alinhamento:
    p {background: #CFF; text-align:justify}
  3.  Ainda no documento CSS, adicione o seguinte código para determinar o posicionamento da primeira imagem, em que vamos determiná-la como flutuante à direita. Além disso, determinámos uma margem à esquerda para afastar o texto um pouco da imagem:
    img[src="small_ec.png"] {float: right; border: 1px dotted red; margin-left: 5px;}
  4.  Agora repetimos o processo para a segunda imagem, incluindo uma margem à direita para afastar o texto um pouco da imagem:
    img[src="small_ec2.png"] {float: left; border: 1px dotted green; margin-right: 5px}
  5.  Salve ambos os documentos e abra o HTML no seu navegador de eleição e observe o resultado:
    Programação CSS para iniciantes (Parte XII)
  6.  Como referimos no inicio deste ponto, é possível evitar que o texto preencha espaço à volta da imagem utilizando a propriedade CSS clear. Insira o seguinte código no CSS e de seguida observe a diferença no último parágrafo:
    p.clear {clear:left}

    Programação CSS para iniciantes (Parte XII)

No próximo artigo iremos finalizar o capítulo relativo ao controlo do layout em CSS, não perca!

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

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