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 IX) vamos mostrar como fazer o posicionamento de fundos dos documentos em CSS de diferentes maneiras e fazer um pequeno resumo daquilo que você não deverá esquecer, mantendo sempre fresca a sua memória com alguns tópicos!

CSS

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

9. POSICIONAMENTO DE FUNDOS

Uma imagem de background é normalmente e por defeito posicionada a partir do canto superior esquerdo da área de conteúdo, mas esta particularidade pode ser alterada ao especificar um valor para a propriedade background-property. Esta propriedade aceita os valores left, center, right, top e bottom, os quais podem ser utilizados para fazer uma conjugação de dois valores para definir o posicionamento da imagem, por exemplo bottom center.

Em alternativa utilize apenas um dos valores, e o segundo valor será assumido por defeito como center. Estes valores são correspondentes a percentagens, como poderemos observar na imagem abaixo:

 Programação CSS para iniciantes (Parte IX)

Quando estiver a determinar uma posição utilizando percentagens, o primeiro valor é aquele que define a posição relativa ao eixo de X e o segundo valor é aquele que define a posição relativa ao eixo de Y. Se você apenas definir uma percentagem, a segunda será assumida como 50%.

A propriedade background-property também aceita valores em unidades para especificar uma posição de offset no canto superior esquerdo da imagem, a partir do canto superior esquerdo da área de conteúdo. No entanto isto é apenas útil quando o tamanho do conteúdo não se pode alterar. Para maior flexibilidade no uso das imagens de fundo, utilize os posicionamentos de fundos que estamos a exemplificar.

Durante o processo de computação, o navegador primeiro identifica um ponto na imagem nas coordenadas determinadas pelo posicionamento que se quer dar, e de seguida posiciona esse mesmo ponto no mesmo lugar dentro da área de conteúdo. Se por exemplo estiver a utilizar valores 50%, 50%, o navegador primeiro irá identificar onde fica o ponto 50% 50% na imagem, e de seguida posiciona a imagem no mesmo lugar mas dentro da área de conteúdo.

A propriedade background-attachment tem um valor scroll por defeito, que faz com que a imagem de fundo acompanhe o scroll da página. No entanto, através de uma regra de estilização poderá alterar isso para um valor fixed, fazendo com que  a imagem de fundo se mantenha numa determinada posição, não acompanhando o scroll da página, fazendo com que o conteúdo “passe” por cima da imagem de fundo.

Ambas os valores das propriedades background-position e background-attachment podem ser definidos na propriedade background, bem como o background-color, background-image e background-repeat (que falámos no artigo anterior).

Neste momento, após as primeiras palavras relativas ao posicionamento de fundos, depois de termos introduzido as propriedades e os termos a utilzar, chegamos ao ponto em que vamos praticar. Este é o passo que você deve sempre efectuar nos tutoriais, pois a pratica é extremamente importante.

  1. Crie um documento HTML e insira o seguinte código dentro da tag body:
    <p><span>Standard - Canto superior esquerdo</span></p>
    <p id="p1"><span>Canto inferior direito</span></p>
    <p id="p2"><span>20% 50%</span></p>
  2. Salve o documento HTML e crie um documento CSS. Linke os documentos e insira o seguinte código na folha de estilos CSS:
    (Note que definimos uma largura de 500px para que a imagem ficasse com um tamanho conveniente)

    span { background: red; margin: 0 0 0 10em}
    p { width: 500px; background: url(ec_small.png) black no-repeat; height: 3.5em }
  3.  Adicione ainda uma regra de estilo para determinar o posicionamento das imagens nos parágrafos, utilizando valores e palavras como falamos anteriormente:
    p#p1 {background-position: bottom right}
    p#p2 {background-position: 20% 50%}
  4.  Por fim adicione uma regra de estilo que vai determinar uma imagem que irá ficar posicionada no mesmo local, mesmo que faça scroll na página:
    body {background: url(ec_small.png) no-repeat bottom right fixed}
  5.  Guarde os documentos e observe o resultado. Experimente alterar o tamanho da janela de forma a forçar a barra de scroll, faça scroll e observe o que acontece com a imagem que está fixa no canto inferior direito.
    Programação CSS para iniciantes (Parte IX)

10. A NÃO ESQUECER

  • O núcleo das caixas de conteúdo pode ser rodeada por áreas de padding,border e margin.
  • A propriedade display de uma caixa de conteúdo pode ser utilizada para alterar o seu formato de display, de em linha para em bloco ou vice-versa.
  • As dimensões de uma caixa de conteúdo podem ser especificadas com o width e height, utilizando valores absolutos ( in, cm, mm, pt e pc) ou valores relativos (em, ex e px).
  • A propriedade border especificar propriedades individuais como border-width, border-color ou border-style.
  • Os estilos das borders podem ser solid, double, dotted, dashed, groove, ridge, inset, outset, hidden ou none.
  • A propriedade padding pode especificar propriedades individuais como padding-top, padding-right, padding-bottom e padding-left.
  • A propriedade margin pode especificar propriedades individuais como margin-top, margin-right, margin-bottom e margin-left.
  • As cores podem ser determinadas utilizando as palavras-chave de cores existentes, através de um valor rgb ou através de um código hexadecimal.
  • A propriedade background pode especificar propriedades individuais como background-color, background-image, background-repeat, background-position e background-attachment.
  • As imagems de fundo podem ser especificadas como um valor url() no qual é inserido o caminho para a imagem a utilizar.

No próximo artigo vamos entrar no campo 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


  1. Gilmar Coimbra
    29 de maio de 2012

    Parabéns, uma vez mais, pelas excelentes postagens!
    (Tinha fechado todas as guias dos tutorais, mas fiz questão de abri-las novamente para agradecer-te).

    Não vi referência de um possível livro teu, sobre o DreamWeaver, existe? Se existir, quero comprar um!

    Obrigado.


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