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 VII) vamos continuar a trabalhar as caixas e aprender como as alterar e estilizar para que possa tirar o melhor partido delas!

CSS

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

5. ADICIONAR PADDING

Cada caixa de conteúdo tem um espaço de padding adicionado à volta da área de conteúdo central, definida por uma regra de estilização atribuíndo um valor à propriedade padding. Um valor único pode ser definido para aplicar uma largura do padding de forma uniforme aos quatro lados da área de conteúdo, ou então uma lista de valores pode igualmente ser definida para aplicar valores de padding diferentes a cada um dos quatro lados.

Quando dois valores são definidos, o primeiro é aplicado ao topo e a baixo, e o segundo é aplicado ao lado esquerdo e ao lado direito. Quando três valores são definidos, o primeiro é aplicado ao topo, o segundo é aplicado ao lado esquerdo e ao lado direito, e o terceiro é aplicado à parte de baixo. Quando quatro valores são definidos, eles são aplicados de acordo com o sentido dos ponteiros do relógio, começando pelo topo – topo, direita, baixo e esquerda.

A propriedade padding pode ser definida como um valor de unidades ou através de percentagem. Quando é definido um valor em percentagem, a largura do padding é determinada relativamente á largura e altura do elemento, sendo o tamanho da área do padding ajustada se a área do elemento sofrer alterações no seu tamanho.

Definir o padding como percentagem pode criar resultados indesejados se o utilizador alterar o tamanho da janela do navegador, deverá especificar o valor em unidades para evitar este tipo de erro.

Se for necessário, é possível ter diferentes larguras de padding em cada um dos lados das áreas de conteúdo, podendo para isso utilizar diferentes propriedades para os quatro lados do padding: padding-top, padding-right, padding-bottom e padding-left.

Normalmente a área do padding é definida quando se adiciona um limite a um elemento para aumentar o espaço entre o conteúdo e o limite.

Passamos a testar a aplicação do padding em um documento HTML:

  1. Crie um documento HTML e insira o seguinte código dentro da tag <body>:
    <p> Conteúdo com
    <span id="pad-h">padding</span> horizontal </p>
    <br />
    <p> Conteúdo com
    <span id="pad-v">padding</span> vertical</p>
    <br />
    <p> Conteúdo com
    <span id="pad-hv">padding</span> horizontal e vertical</p>
  2. De seguida crie um documento CSS, linke-o ao documento HTML e insira o seguinte código para dar cor ao parágrafo e aos elementos span:
    p {background: #090}
    span { background: yellow; border: 0.3em red dotted}
  3. De seguida adicione a seguinte regra de estilização para adicionar um padding ao lado esquerdo e direito da primeira caixa de conteúdo com span:
    span#pad-h {padding: 0 3em 0 3em}
  4. De seguida adicione a seguinte regra de estilização para adicionar um padding ao topo e parte de baixo da segunda caixa de conteúdo com span:
    span#pad-v {padding: 1em 0 1em 0}
  5. De seguida adicione a seguinte regra de estilização para adicionar um padding uniforme aos quatro lados da terceira caixa de conteúdo com span:
    span#pad-hv {padding: 0.5em}
  6. Guarde o documento HTML e o CSS e observe o resultado:
    Programação CSS para iniciantes (Parte VII)

6. TRABALHAR AS MARGENS

Cada caixa de conteúdo pode ter uma margem exterior adicionar à volta do conteúdo, do padding e dos limites através de uma regra de estilização definindo um valor á propriedade margin. Um valor único pode ser definido para aplicar uma largura de margem uniforme aos quatro lados da caixa de conteúdo, ou uma lista de valores pode ser definida para aplicar difetentes larguras de margem a cada um dos lados.

Quando dois valores são definidos, o primeiro é aplicado ao topo e a baixo, e o segundo é aplicado ao lado esquerdo e ao lado direito. Quando três valores são definidos, o primeiro é aplicado ao topo, o segundo é aplicado ao lado esquerdo e ao lado direito, e o terceiro é aplicado à parte de baixo. Quando quatro valores são definidos, eles são aplicados de acordo com o sentido dos ponteiros do relógio, começando pelo topo – topo, direita, baixo e esquerda.

A propriedade margin tem um valor pré-definido de zero mas em termos reais o navegador aplica o seu valor pré-definido para determinar o espaçamento entre os elementos.

A título de exemplo, os elementos do cabeçalho permitem sempre que seja definida uma margem antes de um elemento de parágrafo que venha a seguir. A propriedade margin pode ser especificada como um valor em unidades, ou como percentagem, ou ainda alternativamente pode ser definida como auto para que seja o navegador a definir os valores das margens, como referimos anteriormente.

A capacidade de processar automaticamente o tamanho da margem é essencial para centrar o conteúdo

As margens não herdam nenhum background e são sempre transparentes, cumprindo a sua função de simplesmente separar os elementos por uma determinada distância.

Se necessário, pode aplicar diferentes valores de largura para os diferentes lados das margens, podendo aplicar os diferentes valores aos diferentes lados através das propriedes margin-top, margin-right, margin-bottom e margin-left. A título de exemplo, uma regra de estilo que defina margin-top: 0.3in; margin-bottom: 0.3in iria aplicar uma margem de 0.3 polegadas ao topo e à parte de baixo. Em alternativa poderíamos utilizar margin: 0.3in 0 0.3in 0 e obteríamos o mesmo resultado.

Passamos a testar a aplicação do margin em um documento HTML:

  1. Crie um documento HTML e insira o seguinte código dentro da tag <body>:
    <div><h2>Cabeçalho com margem default </h2>
    <p>Parágrafo com margem default </p></div>
    <div><h2 class="sem_m">Cabeçalho sem margem</h2>
    <p class="sem_m">Parágrafo sem margem</p></div>
    <div><h2 class="esquerda">Cabeçalho com margem à esquerda</h2>
    <p class="esquerda">Parágrafo com margem à esquerda</p></div>
  2. De seguida crie um documento CSS, linke-o ao documento HTML e insira o seguinte código para dar cor aos elementos:
    div {border: 1px solid black}
    h2 {background: yellow}
    p {background: red}
  3. De seguida adicione uma regra de estilização para remover todas as margens dos segundos elementos:
    .sem_m {margin:0}
  4. De seguida adicione uma regra de estilização para adicionar margem apenas do lado esquerdo dos terceiros elementos:
    .esquerda { margin: 0 0 0 0.6in }
  5. Guarde o documento HTML e o CSS e observe o resultado:
    Programação CSS para iniciantes (Parte VII)

A NÃO ESQUECER

Apesar de termos referenciado que tanto o padding como o margin podem ser  definidos através das propriedades padding-top, padding-right, padding-bottom, padding-left, margin-top, margin-right, margin-bottom e margin-lef, os valores para estas propriedades podem ser aplicados utilizando um formato encurtado que é extremamente útil, pois além de poupar tempo poupa também espaço nos documentos, aliviando o seu tamanho e tornando mais fácil a sua leitura e compreensão – então poderá utilizar padding: A B C D e margin: A B C D, em que A é o topo, B é a direita, C é a parte de baixo e D é o lado esquerdo.

Abraço e 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. Mestre dos sites
    4 de abril de 2012

    Sou frequentador do escola dinheiro, e me surpreendi com os artigoas da escola criatividade, principalmente esse aqui, ja ta favoritada essa serie, sou totalmente leigo em css =p



    • Diogo Espinha
      5 de abril de 2012

      Olá Mestre dos Sites, fico contente por os conteúdos da Escola Criatividade o terem surpreendido e ter gostado particularmente desta série que estamos a construir.
      Obrigado pela sua visita e comentário, abraço!



  2. 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