Largura da coluna CSS
Exemplo 01: Usando a propriedade de largura da coluna CSS com a função automática em um elemento div em um arquivo html
Neste exemplo, utilizaremos a técnica CSS de etiqueta de estilo para adicionar largura da coluna a um elemento div usando a função automática. Neste exemplo, usaremos um parágrafo fictício dentro da div.
Começaremos com o cabeçalho do arquivo neste script, onde adicionaremos uma tag de estilo para definir propriedades de estilo para os diferentes elementos do arquivo html. Nesta aula de estilo, definiremos a propriedade de largura da coluna com a função automática representando a visualização padrão de uma div em nossa página da web. Começaremos a etiqueta corporal assim que terminarmos o estilo e a etiqueta da cabeça. Usando o elemento H2, adicionaremos uma página para a etiqueta corporal. Em seguida, chamaremos a tag div, que herdará automaticamente a classe de estilo como foi feita com um nome geral para todos os elementos da div. Depois disso, fecharemos as tags para div e corpo e salvaremos o arquivo para visualização posterior em nosso navegador.
Como podemos ver na saída acima, o elemento div está presente com a largura da coluna padrão, conforme definido na classe de estilo para o elemento div.
Exemplo 02: Usando a propriedade de largura da coluna CSS com valor de formato de pixel para um elemento div em um arquivo html
Para adicionar a largura da coluna a um elemento div com um valor de pixel, utilizaremos a técnica de tag de estilo CSS. Este valor divide a coluna nas seções baseadas em valor fornecido. Neste exemplo, usaremos um parágrafo dummy que estará contido dentro da div.
Neste script, começaremos com o cabeçalho do arquivo, onde adicionaremos uma tag de estilo para fornecer configurações estilísticas para as várias partes do arquivo html. Aplicaremos apenas uma classe de estilo ao elemento div neste script. Nesta classe de estilo, definiremos a propriedade de largura da coluna com um valor de pixel que dividirá a div em nosso site com base em seu comprimento. Começaremos a etiqueta corporal assim que terminarmos o estilo e a etiqueta da cabeça. Em seguida, chamaremos a tag div, que instantaneamente herdará a classe de estilo porque recebeu um nome genérico para todos os elementos div. Depois disso, fecharemos as tags de div e corpo e encerraremos o arquivo.
Como podemos ver no trecho acima, o elemento div é dividido em várias partes com base no valor de pixel que especificamos na classe de estilo do elemento div.
Exemplo 03: Usando a propriedade de largura da coluna CSS com a função automática em um elemento div em um arquivo html
A técnica CSS de etiqueta de estilo será usada neste exemplo para adicionar largura da coluna a um elemento div com a função inicial. Este valor retorna a largura da coluna ao seu valor padrão. Neste exemplo, utilizaremos um parágrafo falso incluído na div.
Neste script, começaremos com o cabeçalho do arquivo e adicionaremos uma tag de estilo para oferecer opções de estilo para os vários componentes do arquivo html. Neste script, apenas aplicaremos uma classe de estilo ao elemento div. Nesta classe de estilo, definiremos a propriedade de largura da coluna com uma função inicial que definirá a largura da coluna para os valores padrão. Depois de terminarmos o estilo e a cabeça, começaremos a etiqueta corporal. A tag Div será chamada, e herdará imediatamente a classe de estilo porque recebeu um nome genérico para todos os componentes div.
O elemento div está presente na saída acima, com a largura da coluna padrão determinada na classe de estilo para o elemento div pela função inicial.
Exemplo 04: Usando a propriedade de largura da coluna CSS com valor de formato de pixel para um elemento div em um arquivo html
Neste exemplo, a abordagem CSS de etiqueta de estilo será usada para adicionar largura da coluna a um elemento div com um valor unitário “em”. Este valor divide a coluna nas peças baseadas em valor especificadas.
Começaremos com o cabeçalho do arquivo e adicionaremos uma tag de estilo para fornecer opções de estilo para os vários componentes do arquivo HTML neste script. Vamos apenas aplicar uma classe de estilo ao elemento div neste script. Nesta classe de estilo, especificaremos a propriedade de largura da coluna com um valor "Em", que é uma unidade CSS que pode ser usada em vez de pixels. Usando o elemento H2, adicionaremos um cabeçalho de página à etiqueta corporal. Depois disso, inseriremos o parágrafo dentro das tags, fecharemos as tags DIV e do corpo e salvará o arquivo para visualização posterior em nosso navegador.
Como visto no exemplo acima, o elemento div é dividido em diferentes partes de acordo com o valor “Em” especificado na classe de estilo do elemento div.
Exemplo 05: Usando a propriedade de largura da coluna CSS com a função inerente a um elemento div em um arquivo html
Neste exemplo, a técnica CSS de etiqueta de estilo será usada para aumentar a largura da coluna para um elemento div usando a função herdada. Este método retorna a largura da coluna para o valor de seu atributo pai anterior. Usaremos um texto fictício em nossa div neste exemplo.
Neste script, aplicaremos várias classes de estilo aos componentes da div. Começaremos criando as classes de estilo no cabeçalho do arquivo. Na primeira aula de estilo, daremos à propriedade de largura da coluna a função automática, que definirá a largura de acordo com as configurações padrão. A propriedade da largura da coluna estará presente na segunda classe, mas com o método herdado, permitindo que a largura da coluna seja definida com o mesmo valor que a propriedade pai mais próxima. Em seguida, fecharemos o estilo e as tags de cabeça e inseriremos dois elementos de div com conteúdo fictício dentro da etiqueta corporal. O primeiro elemento Div será criado com a classe Div1 Styling, e o segundo elemento div será criado com a classe Div2 Styling. Ambos os componentes da DIV serão separados por um cabeçalho para designar a divisão apropriada.
Na saída, podemos ver que o segundo div herdou a primeira div.A largura da coluna da coluna devido à função inerente definida com a propriedade de largura da coluna.
Conclusão
Neste artigo, discutimos a propriedade de largura da coluna que o CSS fornece em um arquivo HTML. A propriedade de largura da coluna é usada para definir o comprimento da coluna de uma div. Esta propriedade pode ser usada com diferentes valores e funções, pois é uma propriedade flexível. Discutimos e implementamos as propriedades da largura da coluna com várias funções como as funções auto -herdadas, herdas e iniciais e também usamos valores de pixel e “em” para definir a propriedade de largura da coluna em um arquivo html.