Ordem CSS

O conceito de ordem também é amplamente conhecido entre programadores de computadores, desenvolvedores e pessoas comuns. Como o título demonstra, o estilo CSS da Hyper Text Markup Language (HTML) também usa a propriedade Order para organizar os elementos de um arquivo HTML de acordo com a escolha de alguém. Esta propriedade de ordem pode ser aplicada a mais de um elemento do mesmo tipo usando suas respectivas tags HTML no script html. Se você não tiver nenhum conhecimento prévio sobre a propriedade "Order" do estilo CSS, este artigo demonstrará o uso da propriedade "Order" CSS.

Exemplo

Vamos começar com a primeira ilustração deste artigo para demonstrar o uso da propriedade "Order" do estilo CSS no HTML. Você precisa de um arquivo do tipo "html" para adicionar e executar o código HTML. Então, criamos um novo arquivo, “Teste.HTML ”, dentro da nossa pasta“ Artigos ”e a abriu com o código do Visual Studio. O código HTML deve ser iniciado com o “

Começaremos a explicar este exemplo da etiqueta básica de "cabeça". Dentro dessa tag, usamos as diferentes propriedades CSS para elementos HTML específicos definidos neste arquivo HTML através da tag "Style". Primeiro, estamos estilizando a principal tag "div" usada no "corpo" da nossa página HTML por meio de seu ID especificado, i i.e., "principal". As tags “div” são sempre usadas para dividir a página em seções ou peças para separar alguns dos elementos e conteúdos de uma página HTML de outros. Usamos a largura e a altura da propriedade para definir a largura e o comprimento deste elemento “div” na página HTML em pixels, i i.e., 400px de largura e 70px de altura.

Esta área "DIB" conteria a borda sólida de uma borda preta de cinco pixels ao redor. Esta fronteira definiria o limite da área principal “div”. Em seguida, usamos o ID principal da tag principal para aplicar o CSS nas tags da criança “div”. Definimos a largura para 100 pixels e a altura para 70 pixels para todas as cinco tags internas de elementos "div", que estariam na seção "div" da tag html. Essas alturas e larguras para elementos de div integral e externa são especificados para se ajustarem igualmente nas cinco tags div dentro da etiqueta externa. Depois disso, usamos os cinco IDs de tags div separadamente em cinco linhas para estilizar todas as cinco seções "div" de acordo e diferente. Aí vem a propriedade "Order" do estilo CSS para pedir as cinco tags div de acordo com os números. O "div" marrom será exibido no 3^rd, azul no 5^º, Verde no 2^nd, roxo no 1^st, e laranja no 4^º. O estilo e a cabeça da cabeça foram fechados aqui.

Vamos começar a explicar a tag "do corpo" básica usada para definir e representar os elementos básicos na página da web do nosso navegador. Dentro dessa tag, usamos a tag principal do tamanho um, a tag "div" principal e as cinco tags de "div" de crianças listadas uma após a outra. A tag "div" principal foi especificada com o ID, "Main", para estilizá -la na etiqueta da cabeça e pode ser diferenciada facilmente. As cinco tags internas de "div" foram especificadas com algum estilo e seus IDs separados, eu.e., marrom, azul, verde, roxo e laranja.

Esses IDs seriam usados ​​para estilizar essas tags "div" separadamente na tag de estilo. Estamos estilizando todas as cinco tags usando o elemento "estilo" na abertura de todas as cinco tags div usando o método de estilo CSS em linha. A propriedade cor de fundo foi usada para especificar as cores para todas as cinco tags div separadamente, i i.e., marrom, azul, verde, roxo e laranja. Essas cinco cores seriam preenchidas nas caixas criadas pelos elementos "div" na página da web e pareciam ótimos na tela. A tag "div" principal e a principal tag "corporal" foram fechadas aqui. Além disso, nosso fechamento de tag "html" seria usado aqui para encerrar o código HTML e fazê -lo funcionar bem.

Primeiro, vamos salvar este código com Ctrl+s. Em seguida, toque no menu "Executar" da barra de tarefas da sua ferramenta de código do Visual Studio. Toque na opção "Executar sem depuração" mostrada e selecione o navegador para continuar. Usaremos o navegador do Google Chrome para executá -lo.

A guia Saída do navegador Chrome exibe a seguinte imagem de cinco partes div em uma “div” principal da borda preta sólida. A sequência das caixas da criança “div” é a mesma que descrevemos na explicação de um código, eu.e., roxo 1^st, Verde 2^nd, Brown 3^rd, laranja 4^º, e azul 5^º. Embora tenhamos definido a sequência aleatória de elementos “div” no estilo CSS, ela não afeta a saída e é exibida conforme definido no estilo.

A ilustração de código anterior e sua saída de página da web mostram -nos o uso de números aleatórios na propriedade "Order" para definir as tags "div" para posições aleatórias. Esses valores para a propriedade "Ordem" eram números inteiros positivos simples. Portanto, não temos problemas em usar esses. E se um usuário tentar definir a propriedade Order com os valores negativos na tag de estilo? Vamos tentar isso para ver os resultados. Então, estamos atualizando nosso código para fazer isso. Dentro da tag de estilo, estamos atualizando o valor da propriedade "Order" para cada tag "div" interna. Para Brown, é 3. Para azul, é -1. Para Green, é 2. Para o roxo, é -2. Por fim, para laranja, é 0. Esses valores definem o índice de um elemento "div" principal. Vamos salvar este código para ver.

Executando este código atualizado no navegador Chrome, temos o resultado de saída atualizado mostrado abaixo. Como definimos 0 para a propriedade Ordem do Div "Orange", ela foi exibida no meio da div principal. As etiquetas “div” verdes e marrons são exibidas no lado direito após a laranja “div”. O uso de -2 para divisão roxo e -1 para tag azul exibiu as tags internas “div” de acordo com a sequência de números inteiros negativos.

Conclusão

Este artigo contém uma explicação simples e breve do uso da propriedade "Order" CSS no código HTML. Para isso, explicamos um breve exemplo de código HTML. Este exemplo continha o uso de elementos "div" para elaborar adequadamente o conceito de propriedade "Order" CSS. Discutimos a análise detalhada do uso dos valores inteiros positivos para a propriedade da ordem e a comparamos com o uso de valores inteiros negativos para a mesma propriedade.