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

CSS

1. CONHECENDO AS CAIXAS DE CONTEÚDO

Os conteúdos numa página web estão disponibilizados em um sem número de caixas de conteúdo que não estão visíveis ao visitante e que são criadas pelo navegador, e estas podem estar em linha ou em bloco. As caixas de conteúdo em bloco normalmente têm linhas de quebra antes e depois da caixa, como um parágrafo, um cabeçalho ou elementos div. As caixas de conteúdo em linha pelo contrário não criar linhas de quebra e são criadas simplesmente dentro de linhas de texto, como span ou hiperligações.

Caixas de Conteúdo

As regras de estilização podem especificas valores para o padding, limites e propriedades da margem para alterar o aspecto das caixas de conteúdo, e todos estes se aplicam a caixas de conteúdo em bloco, mas algumas propriedades como a largura e a altura não são aplicáveis às caixas de conteúdo em linha. As propriedades margem e padding nas caixas em linha apenas são aplicaveis aos lados da área de conteúdo e não às áreas acima e abaixo.

Quando as propriedades padding, limites e margem têm largura zero, o tamanho da caixa de conteúdo será igual ao tamanho da àrea de conteúdo, a área visível, determinado pelas dimensões do conteúdo em si. Então, o padding, margem e limites que não tiverem um valor zero irão ser adicionados, como consta da imagem acima, mantendo o tamanho da área de conteúdo mas acrescentando os valores respectivos dessas propriedades.

Vamos agora praticar um pouco aquilo que estamos a falar, criando algumas caixas de conteúdo e alterando as suas propriedades:

  1. Crie um documento HTML com quatro parágrafos como descrito abaixo:
    <p>Caixa de conteúdo</p>
    <p class="padded">Caixa de conteúdo com padding</p>
    <p class="paddedborder">Caixa de conteúdo com padding e limites</p>
    <p class="paddedbordermargin">Caixa de conteúdo com padding, limites e margem</p>
  2. De seguida crie um ficheiro de folha de estilos e insira o seguinte código e linke-a ao documento HTML:
    p {background: red; width: 20em}
  3. De seguida adicione mais esta linha de código ao seu ficheiro CSS:
    p.padded {padding: 1em}

    Com esta linha estamos a adicionar padding de 1em à caixa de conteúdo

  4. De seguida adicione mais esta linha de código:
    p.margin {margin: 2em}

    Com esta linha estamos a adicionar uma margem de 2em à caixa de conteúdo

  5. Finalmente adicione esta linha de código:
    p.border {border: 0.5em green solid}

    Com esta última linha estamos a adicionar um limite de 0.5em de cor verde

  6. Guarde o ficheiro HTML e o ficheiro CSS e observe o resultado:
    Programação CSS para iniciantes (Parte V)

2. ALTERAR O ASPECTO

Uma página web centra-se basicamente na criação de caixas de conteúdo em bloco para criar o seu aspecto geral e a criação de conteúdo em linha para determinar o seu aspecto final. Isto faz com que o facto de um elemento seja como bloco em linha tenha grande importância para determinar o aspecto da página, e geralmente o aspecto geral para cada elemento. No entanto o conteúdo pode ser mostrado em um diferente formato sem que seja necessário alterar o código HTML da página, nomeadamente as tags.

Onde dois elementos bloco sejam seguidos um pelo outro, o primeiro pode ser definido para ser como um elemento em linha no início do segundo bloco, definindo a sua propriedade display como run-in. Podemos verificar isto no exemplo que vamos criar abaixo:

  1. Crie um documento HTML contendo o conteúdo abaixo dentro da tag <body:
    <ul>
    <li>Primeiro</li><li>Segundo</li><li>Terceiro</li></ul>
    <ul class="linha">
    <li>Primeiro</li><li>Segundo</li><li>Terceiro</li></ul>
  2. De seguida adicione dois blocos de cabeçalho, cada um seguido por um parágrafo em bloco, um dos quais definido com um atributo de classe:
    <h2>Cabeçalho em Bloco</h2><p>Parágrafo em bloco</p>
    <h2 class="run">Cabeçalho em Bloco</h2>
    <p>Parágrafo em bloco</p>
  3. De seguida adicione um parágrafo em bloco contendo três hiperligações em linha:
    <p>
    <a ref="1.html">Página 1</a>
    <a ref="2.html">Página 2</a>
    <a ref="3.html">Página 3</a>
    </p>
  4. Guarde o documento HTML e crie uma folha de estilos, linke-a ao documento e adicione o seguinte código:
    ul.linha li {display: inline; background: olive}
  5. Adicione uma nova regra de estilização ao codigo:
    h2.run{ display: run-in; background: yellow}
  6. Finalmente adicione uma última regra de estilização que vai dar o toque final:
    p a {display: inline-block; width: 4em: height: 4em; background: green}
  7. Guarde o documento HTML e o CSS e observe o resultado:
    Programação CSS para iniciantes (Parte V)

Não perca o próximo artigo onde vamos continuar a abordar as caixas de conteúdo em CSS!

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!

Templates Incríveis para seus Projetos:

  • SmartOn - Multi-Purpose Ultimate Joomla Theme
  • Merito - The Joomla Multipurpose Template
  • Attica - One page Restaurant Joomla Template
  • Arista - Creative One Page Drupal Theme
  • Wunderkind - One Page Parallax Joomla Template
  • Beuh - One Page Portfolio Joomla
  • Chester Multi-Purpose And Software Drupal 7 Theme
  • ST Metanic - One Page & Hikashop
  • Financial II - Responsive Financial Joomla Theme
  • Richer - Multi Purpose, eCommerce Drupal Theme
  • Argon - Full Screen Portfolio & Blog Joomla Theme
  • Elos - Responsive MultiPurpose Joomla Theme

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.

    Responder

Comente o Artigo!

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

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