“Block elements “e “inline elements”

3>3 modos de exibição para elementos HTML

Por defeito, os elementos HTML são exibidos num dos seguintes modos:

1- Block / block

Occupies the entire available width. Quando 2 elementos de bloco seguem um ao outro numa página, são posicionados (por defeito) um por baixo do outro.

p>Exemplo típico de um elemento de bloco: o elemento<p> (o parágrafo). 2- Inline / inline

elementos lado a lado ocupa apenas a largura necessária para exibir o conteúdo e não causa quebras de linha. Quando 2 elementos em linha se sucedem numa página, são posicionados um ao lado do outro (se a largura da página o permitir).

p>Exemplo típico de um elemento em linha: o elemento<img> (imagem). 3- Invisível / não exibido

elemento invisívelalguns elementos são apenas utilizados para fornecer informação invisível ao utilizador da web.

Exemplo típico de um elemento não exibido:o elemento <meta> elemento.

Papel dos elementos mais comuns

Os elementos “em bloco” são geralmente os utilizados para a disposição da página, enquanto que os elementos “em linha” são principalmente utilizados para atribuir estilo a uma porção de texto.

Existem alguns elementos de bloco com os quais se pode estar familiarizado:

  • <div>: multipurposetag. Esta etiqueta é frequentemente utilizada para posicionar o conteúdo dentro da página.
  • <h1><h6>: enquadra um título ou subtítulo.
  • <p>: parágrafo.
  • <ul><ol><dl> : Listas (não ordenadas, ordenadas ou com definição).
  • <li><dt><dd>: Listar item, definição, e título da definição.
  • <tabela> :table.
  • <blockquote> :parágrafo indentado (deslocado para a direita) normalmente utilizado para apresentar a citação.
  • <pre> :bloco de descodificação pré-formatado.
  • <form>>
  • :formulário de entrada.

    E aqui estão alguns elementos em linha que já deve ter utilizado:

    • <span> : marcação polivalente, muito útil para aplicar um estilo CSS a uma porção de texto, por exemplo.
    • <a>: âncora, permite-lhe criar uma ligação de saída ou permite-lhe especificar um ponto específico na página para a qual pretende dirigir uma ligação.
    • <strong>: utilizado para marcar a importância particular de uma porção de texto. Todos os navegadores actuais irão exibir esta parte em negrito. NOTA: a antiga etiqueta <b> (negrito) é obsoleta e não deve ser mais utilizada.
    • <em>: usado para enfatizar a importância de uma porção de texto (menos fortemente que <strong>). Todos os navegadores actuais irão exibir esta parte em itálico. NOTA: a antiga etiqueta <i> (itálico) é obsoleta e já não deve ser usada.
    • <img>: imagem,permite colocar uma imagem no meio do fluxo de texto.
    • <br>>

    : quebra de linha. Este é um caso muito especial de elemento em linha, que provoca uma quebra de linha. Apesar desta peculiaridade,<br>> não é definitivamente um bloco e deve ser classificado como um elemento em linha.

  • <input>: campos de entrada num formulário, tal como ou
  • <abbr>: assinala uma abreviatura (coloque o cursor sobre ela para ver como funciona). Nota: Internet Explorer não suporta esta etiqueta em versões anteriores à versão 7.
  • Nesting of block and inline elements

    Generalmente falando, um elemento em linha pode aninhar-se dentro de um elemento de bloco, enquanto que o inverso não é verdade.

    Aninhamento permitido:

    <p>
    Phrase avec un <strong> mot</strong> important
    </p>

    Aninhamento permitido:

    INTERDIT:

    <strong>
    <p>Première phrase</p>
    <p>Deuxième phrase</p>
    </strong>

    Este último exemplo provavelmente funciona em alguns navegadores, mas não está em conformidade com as convenções relativas ao aninhamento de elementos e não deve ser utilizado nas suas páginas.

    P>Pode, no entanto, aninhar um elemento de bloco dentro de outro elemento de bloco ou um elemento em linha dentro de outro elemento em linha sem qualquer problema.

    Estas regras gerais têm algumas excepções, uma lista das quais pode ser encontrada em alsacreations.

    Mudar o modo de exibição de um elemento

    Por vezes pode ser bastante conveniente (mesmo essencial!) mudar a forma como um elemento é exibido.

    A propriedade CSS “exibir” permite-lhe mudar de um modo de exibição para outro muito simplesmente escrevendo :

    display:block
    display:inline
    ou
    display:none

    Como exemplo, eis como exibir e gerir um link(inline element <a>) em forma de bloco:

    Código:

    <a href="bloc-en-ligne.php" style="background-color:#FFCCCC;display:block;">
    <img src="images/blocs-lignes.gif" alt="">
    Exemple de lien
    </a>

    >/div>

    Resultado:

    Link de exemplo

    Aqui está como este link ficaria sem o "display:block" propriedade:

    Link de exemplo

    Nota importante: embora a propriedade “exibir” lhe permita alterar a forma como um elemento é exibido no ecrã, não altera de forma alguma a sua natureza real. “Bloco “elementos não podem ser aninhados dentro de elementos “em linha”, mesmo que tenha alterado as suas propriedades de visualização!

    propriedades do CSS reservadas para “bloco “elementos

    geralmente falando, a maioria das propriedades do CSS destinadas a posicionar um elemento na página estão reservadas para “bloco “elementos ou tendo a propriedade “display:block”.

    Este é por exemplo o caso para as seguintes propriedades:

    • posição(estática, absoluta, relativa, fixa): permite definir como um elemento se posiciona em relação a outros elementos da página.
    • esquerda, superior,direita,inferior :posicionar os lados dos elementos.

    (Um pouco)casos especiais

    h4>1- Posicionamento de elementos em linha

    Como acabámos de ver no capítulo anterior, a “propriedade “posição” não pode ser aplicada a um elemento em linha. Contudo, podemos posicionar este tipo de elemento usando a propriedade “float”.

    Esta propriedade permite-nos posicionar qualquer tipo de elemento à esquerda (float:esquerda;)ou à direita (float:direita;)lateral de um bloco de texto, por exemplo. A imagem que este parágrafo contém é posicionada usando um “float:left”. Para saber mais sobre como usar esta propriedade, ver a nossa página intitulada Layout com CSS.

    2- Altura e largura para elementos em linha

    Em geral, os elementos em linha não têm uma largura ou altura pré-definidas. É o seu conteúdo que determinará estes valores.

    Por isso seria tentado pensar que estas etiquetas não podem ter uma propriedade de largura ou altura.

    No entanto, existem algumas etiquetas em linha que têm um significado. Estes são:

    • <img>
    • <input>
    • <textarea>
    • <select>
    • <

    object>

    que são chamados elementos “substituídos” ou “substituídos”,dependendo da tradução.

    h4>3- Molduras e margens para elementos em linha

    Os elementos em linha podem ser perfeitamente dotados de margens internas e externas (almofadado e margem),bem como de margens (borda)ou de fundo (fundo).

    Contrário ao que se pode pensar, um elemento em linha pode, portanto, ter o aspecto de uma “caixa”.

    Exemplo:

    <p>Exemple de mot <span style="border-style:solid;border-width:2px"> encadré</span></p>

    Resultado:

    Exemplo de uma palavra em caixa

    Deixe uma resposta

    O seu endereço de email não será publicado. Campos obrigatórios marcados com *