Uma folha de estilo em cascata é um idioma usado para adicionar efeitos à linguagem HTML. Sem CSS, o HTML não consegue exibir seu conteúdo na maneira como a página da web é ser. Em outras palavras, ambos os idiomas são responsáveis ​​por desenvolver e projetar páginas da web. Neste artigo, vamos explicar uma propriedade do CSS responsável por fornecer todas as dimensões em um único conjunto de propriedades, inserindo. Essas dimensões incluem propriedades direita, inferior, superior e esquerda de qualquer conteúdo como texto ou imagem, etc.

Para explicar o funcionamento da propriedade Insert, usamos alguns exemplos básicos no editor de texto usando CSS embutido e interno. A sintaxe básica usada para a propriedade Insert é:

Não é necessário obter todos os valores em pixels, % pode ser usado alternativamente. Da mesma forma, a ordem para a dimensão não é especificada. Pode ser alterado.

Exemplo 1:

Para explicar o funcionamento da propriedade CSS Inset, criaremos algum conteúdo básico de HTML para formar uma página da Web de amostra. Sem estilizar pelo qual as tags html simples são responsáveis, isso será visto na saída. Isso é feito usando o título

um texto ousado simples e um parágrafo mencionado dentro da div. Todas essas tags são escritas dentro da etiqueta do centro, essa tag alinhará todo o conteúdo de HTML ao centro. Este tipo de estilo é CSS embutido.

Salve o código com a extensão HTML e abra -o no navegador. Você verá que uma página da Web estática é formada apenas com o texto como título e um parágrafo.

Agora, adicionaremos CSS internos às tags html acima. Todas as tags são iguais, mas têm uma declaração de classe adicional.

Primeiro, vamos criar um título. Então, o texto ousado. Dê alguma pausa
. Esta tag é responsável por pular para a próxima linha e formar um espaço em branco entre o texto simples e o div. Uma tag div é usada para criar um contêiner de div para armazenar outros conteúdos de HTML (como texto, imagens e etc.,) onde um parágrafo é declarado. O nome da classe 'One' no parágrafo é mencionado para que todos os efeitos declarados na folha de estilo sejam acessados ​​e aplicados a este parágrafo.

1

Feche a tag Div e a etiqueta central. Dentro da seção da cabeça, usaremos uma tag de título para dar um nome ao site. Este título aparece na guia do navegador.

Use a etiqueta de estilo. Dentro dessa etiqueta, use um estilo para o título. Aplicamos uma cor de fonte no texto do cabeçalho. Este é um CSS interno. Da mesma forma, o div é usado para aplicar efeitos nele. Primeiro, a cor de fundo da div está definida. Então, as dimensões necessárias para o tamanho da div são adicionadas para formar um efeito. Essas dimensões incluem valores de largura e altura em pixels.

Depois de aplicar esses efeitos, criamos uma aula, '.um ', cujo nome foi mencionado na etiqueta do parágrafo. A classe é declarada com um ponto no início que a especifica como uma aula.

A classe e os IDs no HTML CSS são formados para aplicar o estilo ao conteúdo HTML. Ao usar esse mecanismo, podemos nos abster do estilo CSS embutido que deixa todo o código bagunçado. Considerando que o CSS interno torna o código de estilo facilmente compreensível e torna o código curto. Precisamos apenas adicionar o nome da classe e IDS do CSS. Nessas tags HTML específicas, onde queremos aplicar os efeitos mencionados na classe ou IDs, mencionados no CSS interno.

Voltando ao '.Uma aula, na propriedade Insert para o parágrafo, usamos 4 valores em pixels. Os valores também podem ser mencionados em porcentagens. O valor inserido contém todos os 4 valores superiores, direito, inferior e esquerdo para o parágrafo a serem formados dentro do contêiner Div.

1 2 3 4 5

.um Inserção: 10px 40px 30px 0px;

Esses 4 valores são os valores da margem do texto do parágrafo, porque esses valores alinham o texto dentro da div. A cor de fundo também é dada ao parágrafo. Todos os valores de alinhamento inseridos são para o texto apenas dentro da div.

Feche todos os CSs e tags de cabeça e salve o arquivo. Quando executarmos esse arquivo no navegador, você verá que todos os efeitos aplicados ao conteúdo do corpo HTML são aplicados, especialmente na seção de parágrafos. E adicionou a cor de fundo ao parágrafo para mostrar os efeitos dos valores de inserção. Todos os 4 valores de inserção são aplicados ao texto do parágrafo.

Exemplo 2:

Span também é uma espécie de recipiente de div um que carrega texto nele. Esses dois conteúdos HTML Div e Span são denominados através de CSS internos. Então, primeiro vamos elaborar na seção de estilo. O contêiner Div é aplicado com a cor de fundo, as dimensões de altura e largura e com a cor da fonte. Este estilo CSS criará uma div com alguns efeitos.

Agora, a classe “.Exampletext ”. Esta aula é acessada pelo texto do span apenas dentro da div. O CSS desta classe contém um modo de escrita para o texto que é vertical para que o texto possa ocupar menos espaço. Então, a propriedade inserida também é definida de acordo. Todos os valores de inserção em pixels são fornecidos para manter a distância marginal entre o texto e os limites da div.

1 2 3 4 5 6 7

.Exampletext Modo de escrita: vertical-rl; Posição: Absoluto; Inserção: 40px 50px 30px 60px; Background-Color: #F8FC08;

Após a seção da cabeça, o corpo contém apenas a etiqueta div e uma tag de extensão dentro do corpo da tag div.

Salve o código e execute o arquivo. Você verá que a div e a extensão são exibidos de acordo com os valores de inserção aplicados ao texto. Os valores de inserção são exibidos de perto para consertar o texto nele.

Agora, se fizermos algumas alterações modificando os valores de inserção de tal maneira que usamos apenas 2 valores de inserção em vez de 4, enquanto todos os outros valores permanecem os mesmos, qual será a imagem resultante?

1 2 3 4

.Exampletext Inserção: 4px 8px;

Nós definimos 4 e 8px. A página da web resultante conterá a div e o texto que tem o espaço próximo ao div. Isso ocorre porque removemos dois valores da propriedade Insert e também os primeiros valores superiores certos também são equivalentes a 0px.

Conclusão:

A propriedade CSS Insert é usada para adicionar valores à dimensão do conteúdo HTML coletivamente. Para elaborar esse conceito, começamos fornecendo uma visão geral do HTML e CSS e os tipos que são usados ​​neste artigo. A propriedade Insert auxilia o usuário a adicionar margem ao conteúdo interno, respectivamente ao externo, seja com todas as quatro dimensões coletivamente ou eliminando qualquer valor da propriedade. Além disso, dois exemplos são discutidos para elaborar a função e o trabalho da propriedade Insert em uma página da web.