[Home] [HTML] [CSS] [Contacto]


SMPW


CSS


CSS: Cascading Style Sheets


Aula OT: 20/03/2024


Elementos HTML

Existem dois tipos de elementos

BLOCOS: Block-level Elements

Um elemento com nível de bloco começa sempre numa nova linha e os browsers adicionam automaticamente algum espaço (uma margem) antes e depois do elemento.
Um elemento com nível de bloco ocupa sempre toda a largura disponível (estende-se para a esquerda e para a direita tanto quanto possível).
Dois elementos de bloco comumente usados ​​são: <p> e <div>. Em que o elemento <div> define uma secção de um documento HTML.

Exemplo:

Parágrafo

Secção


EMBUTIDOS: Inline Elements

Um elemento embutidio (inline) não começa numa nova linha.
Um elemento embutido ocupa apenas a largura que necessita.

O elemento embutido é: <span>.

Exemplo:

Este parágrafo contém um elemento inline, dentro do mesmo parágrafo.


Exemplo de aplicação de secções <div>:

Famalicão

Estes blocos tem todos a mesma formatação, mas distinta da formação do resto da página

...

Porto

Estes blocos tem todos a mesma formatação, mas distinta da formação do resto da página

...

Lisboa

Estes blocos tem todos a mesma formatação, mas distinta da formação do resto da página

...

... continuação do site ...


Como fazer para ter diferentes formatações para diferentes blocos ?

Solução: Utilizar o atributo CLASS, neste caso pretende uma cor distinta para cada pólo.

Famalicão

Associar uma cor distinta a cada pólo da UL

...

Porto

Associar uma cor distinta a cada pólo da UL

...

Lisboa

Associar uma cor distinta a cada pólo da UL

...


Exercício: Bloco Embutido utilizando display:inline-block; <div>

Alterar a propriedade de exibição do elemento <div> de bloco para bloco embutido. Ao utilizar display:inline-block; os elementos <div> não adicionarão quebras de linha antes nem depois. São exibidos lado a lado, em vez de um em cima do outro.

display: inline-block;

Exemplo (com inline style):

Famalicão

Associar uma cor distinta a cada pólo da UL

...

Porto

Associar uma cor distinta a cada pólo da UL

...

Lisboa

Associar uma cor distinta a cada pólo da UL

...


[Topo]