"," ","

","
","
• ”. Todos os títulos são exemplos do elemento de bloco. Eles ocupam o máximo de espaço possível e ocupam espaço por padrão. Quando estamos usando a tag de parágrafo cada vez que há um

  Tag, inicia uma nova linha para este parágrafo. O mesmo é o caso a todos os elementos do bloco.

  Neste guia, usaremos todos esses elementos de bloco em nossos códigos e os explicaremos em detalhes. Também demonstraremos alguns exemplos neste guia.

  Exemplo 1

  Para usar esses elementos de bloco em nosso código HTML, devemos criar um arquivo HTML. Para isso, temos que abrir o código do Visual Studio, abrir um novo arquivo, selecionar o idioma como HTML e começar a codificar neste arquivo. Neste guia, forneceremos uma demonstração desses exemplos usando o software do Código do Visual Studio. Então, escrevemos o código html e salvamos. A extensão do arquivo a ser usada aqui é o “.html ”.

  Neste exemplo, usamos os dois elementos do bloco “

  " e "". Criamos dois parágrafos e dois elementos "div" no arquivo html. Definimos os nomes dos parágrafos como "Element1" e "Element2". Também definimos os nomes da classe "div" como "d1" e "d2". Usaremos esses nomes no código CSS. O primeiro "

  "Ocupa a linha horizontal completa enquanto o próximo" "começa a partir da nova linha. Aplicamos algum estilo a esses elementos de bloco usando as propriedades CSS.

  Código CSS:

  O código a seguir é o código CSS que estamos usando para o estilo dos elementos anteriores do bloco. Usamos as diferentes propriedades de estilo aqui.

  Usamos o nome do primeiro parágrafo que é "Element1" e escrevemos como "P.elemento1 ”. Em seguida, aplicamos as propriedades de estilo para este parágrafo. À medida que usamos a "fronteira" para aplicar a fronteira ao redor do parágrafo, você verá que essa fronteira é renderizada na linha completa. Aqui, o "3px" define a largura da fronteira, "sólido" define o tipo de borda e "laranja" é definir a cor da borda do parágrafo. A “família-família” do parágrafo está definida como “argelino”. E o estilo desta fonte é "itálico". O tamanho da fonte está definido como "25px".

  Usamos as mesmas propriedades e os mesmos valores para o segundo parágrafo. Aplicamos essas propriedades em “div”. Primeiro, definimos o nome do div para “div.D1 ”e depois aplique as propriedades aqui. Também criamos a borda ao redor das classes da div. Para o div, temos uma borda "pontilhada" de "4px" na cor "vermelha". A “família-família” deste “div” é “Times New Roman”. Também alinhamos o texto do "div" no "centro". Definimos seu "tamanho da fonte" como "30px". Todas essas propriedades que usamos no "D1" também são usadas no "D2". Então, o estilo de ambas as classes div é o mesmo.

  Saída:

  Ambos os parágrafos nesta saída parecem ser os mesmos. Você pode notar que a fronteira ocupa a linha completa enquanto o próximo parágrafo e div começa a partir da nova linha. Ambos os elementos div são do mesmo estilo e aparecem em uma linha separada. A fronteira de ambos os div também ocupa o espaço horizontal completo. Então, ambos os parágrafos são elementos de bloco.

  Exemplo #2

  No Exemplo 2, temos dois parágrafos e dois elementos div novamente. Mas aqui, os nomes dos parágrafos são "E1" e "E2". E os nomes dos elementos div são "div1" e "div2".

  Código CSS:

  O fundo do parágrafo é "laranja". A “família da fonte” que usamos aqui é “Cambria” com um tamanho de “30px”. A cor de seu texto é "verde". Usamos as propriedades e valores dessas propriedades para o parágrafo 2. Depois disso, estilizamos o “div”. Para a div, usamos uma família de "fantasia" e a "cor de fundo" da div é definida como "rosa". O tamanho do texto é definido como "tamanho da fonte: 32px". Sua cor é definida como "azul". Para a segunda div, os valores das propriedades que definimos para o div 1 são usados.

  Saída:

  Aqui, as cores de fundo para os parágrafos e elementos div mostram que esses são elementos de bloco. A cor do fundo é aplicada à linha horizontal completa e ao espaço vertical.

  Exemplo #3

  Usamos os elementos do bloco aqui. Criamos dois títulos diferentes chamados “

  " e "

  ”, E dois parágrafos diferentes chamados“ A1 ”e“ A2 ”. Depois disso, temos uma aula "". Dentro desta classe "" usamos o "

  " e "
  • ”Para criar a lista. Todos esses elementos são elementos de bloco.

    Código CSS:

    Definimos a fronteira do "div" para "2px", que descreve sua largura. O tipo de borda é definido como "sólido". E a cor da borda é definida como "roxa". O "H1" está alinhado no "centro". A “família-família” que usamos para os títulos é “argelino”. A “cor” descreve a cor da fonte que está definida como “azul”. Para o segundo título, usamos a "orquídea" como a cor do texto. Em seguida, temos o "Li" que representa a lista de itens. A “família-família” desta lista é “Arial” e definida como “18px” em tamanho. A cor do texto da lista é definida como "verde". Depois disso, aplicamos o estilo aos parágrafos, nos quais usamos o "Times New Roman" como a "Font-Family". O "19px" é o "tamanho da fonte" e a "cor" do texto é definida como "Orange-Red". Todas as mesmas propriedades são aplicadas ao segundo parágrafo.

    Saída:

    Exemplo #4

    Aqui, temos o "" da "lista1". Dentro disso "", criamos o "

    ","

    ", e "

  • ", E depois feche este primeiro" ". Depois disso, criamos outro "", outro "

    ", e outro "

    "Com o nome" P2 "e um"

  • ”. Novamente, dentro do segundo "". Todos esses elementos que usamos aqui são os elementos do bloco.

    Código CSS:

    A “cor de fundo” da div é definida como “verde-claro”. A borda está definida como "verde" e "sólida" com uma largura "4px". O "H3" é definido como "itálico". Para este título, definimos a “família da fonte” para “Times New Roman”. A "cor" do "H3" é "azul". Agora, temos que aplicar o estilo no "li" que é usado para a lista. A “família de fontes” da lista é “sem serrif”, é “20px” em tamanho e “marrom” em cores. Usamos o mesmo "estilo de fonte" para ambos os títulos que são "argelinos" e alinham os dois títulos ao "centro". A “cor de fundo” da outra “div” é “rosa leve”. A borda externa é "magenta" e é "4px" em largura.

    Saída:

    Aqui, você pode ver que a cor de fundo que usamos para a div também é aplicada ao parágrafo, no título e à lista, pois escrevemos todos esses elementos dentro da “div”. A cor e a borda de fundo são aplicados a todos os elementos. Você também pode notar que cada parágrafo, título e lista de itens aparecem na nova linha, enquanto cada elemento ocupa o espaço horizontal e vertical completo. Então, esses são todos os elementos do bloco.

    Conclusão

    Neste guia, discutimos o conceito de elemento do bloco. Aprendemos que os elementos do bloco sempre usam o espaço horizontal e vertical completo, e o próximo elemento do bloco sempre começa a partir da nova linha. Também aprendemos que eles ocupam espaço por padrão. Exploramos os quatro códigos deste guia, nos quais usamos o HTML e as propriedades do CSS.Discutimos esses códigos em detalhes neste guia. Também mostramos a saída e explicamos os elementos do bloco em detalhes. Mencionamos os elementos do bloco e usamos esses elementos de bloco em nossos códigos.