CSS desmembrado
Neste tutorial, usaremos esse valor não definido em nosso código CSS e apresentaremos como ele funciona. Exploraremos exemplos em que aplicamos algumas propriedades e depois usamos o "Unset" para cancelar ou desfazer propriedades.”
Exemplo 1
Começaremos a escrever HTML criando um novo arquivo no Código do Visual Studio e escolhendo HTML como o idioma. O arquivo foi gerado, e tudo o que precisamos fazer agora é anexar o “!”Marque para obter as tags básicas. Como resultado, pressionar "Enter" faz com que o arquivo mostre todas as tags básicas do HTML. O corpo é a seção de onde começamos a codificar. Simplesmente colocamos um título "H1" e um parágrafo "P" no corpo. Também fornecemos um link para o arquivo CSS dentro da "cabeça" neste modelo HTML. Veja como esse valor não definido funciona no CSS.
Vamos estilizar o cabeçalho e o parágrafo. Definimos o título "Font-Family" primeiro, e estamos selecionando "calibri" para isso. Também mudamos sua "cor" e definimos "vermelho" para isso. Agora, também temos um parágrafo, e aqui apenas mudamos a "cor" do parágrafo. Agora, queremos desfazer a cor do parágrafo. Então, para isso, utilizamos o valor "não atendido" para a "cor" do parágrafo, então essa cor "verde" não é aplicada ao texto do parágrafo.
A saída mostra que a cor do cabeçalho e a família de fontes são alteradas, mas a cor do parágrafo permanece inalterada. Aqui você pode ver que a cor verde não é aplicada aqui ao texto do parágrafo porque despertamos a propriedade de cor do parágrafo.
Exemplo 2
Estamos utilizando o mesmo código HTML aqui que criamos em nosso exemplo anterior. Nós estilizamos o título utilizando duas propriedades. Uma delas é a propriedade "Font-Family", e definimos essa propriedade como "argelino.”A segunda propriedade que estamos usando aqui para o título é a propriedade“ cor ”e usamos“ azul ”aqui. Também aplicamos várias propriedades ao parágrafo aqui. A "cor" deste parágrafo é "verde" e o tamanho da fonte do parágrafo é "24px". Também usamos o “Times New Roman” como a “família de fontes.”Usamos a propriedade“ Decoração de texto ”para gerar o sublinhado para o título. Definimos o valor de "decoração de texto" como "sublinhado.”
Agora, estamos usando a palavra-chave "ousada" para o "peso da fonte" e alinhando este parágrafo no "centro", utilizando a propriedade "Text-Align". Mas agora, não queremos aplicar todas essas propriedades ao nosso parágrafo; portanto, em vez de escrever todas as propriedades separadamente e, em seguida, usando o valor "não atendido" em cada propriedade, apenas colocamos "tudo" e definimos seu valor para "não serem para o parágrafo. Nosso parágrafo permanecerá inalterado e nenhuma propriedade ou estilo será aplicado ao parágrafo.
A família de cor e fontes do cabeçalho foi alterada, enquanto o parágrafo permaneceu inalterado. Porque todas as propriedades que aplicamos ao parágrafo não foram definidas, utilizando "All: Unset" no CSS.
Exemplo 3
Neste código HTML dado, vamos colocar um título e uma div aqui e mudar para o CSS para aplicar estilo neles e cancelar ou desarmar alguns estilos usando “desmembrar.”
Apenas aplicamos algumas propriedades na div. Aqui, definimos seu "tamanho da fonte" e colocamos o valor do "tamanho da fonte" como "24px". Também utilizamos "ousado" para o "peso da fonte.”A“ cor ”que escolhemos aqui para esta div é“ vermelha ”e a“ família de fontes ”que estamos selecionando aqui é“ Arial.”Agora, não precisamos alterar a“ cor ”e“ peso-fonte ”dessa div, então, apenas colocamos essas duas propriedades dentro dos aparelhos de Div Curly e colocamos“ desmaios ”para ambos. As propriedades restantes se aplicarão ao elemento div, mas as propriedades de cor e peso da fonte não se aplicarão à div, pois despertarmos essas propriedades aqui.
A saída se renderiza aqui, e você pode ver que a “família da fonte” e o “tamanho da fonte” são alteradas aqui de acordo com os valores que definimos no código CSS, mas não há efeito no “peso da fonte” e “cor” da div. Isso ocorre porque despertamos esses valores. Dessa forma, podemos despertar algumas propriedades usando o nome da propriedade e definir o valor "não definido" para esta propriedade.
Exemplo 4
Vamos colocar um para aqui e depois colocar um parágrafo; Após este parágrafo, também colocamos um elemento div aqui e, no final, colocamos um elemento de extensão. Nós vamos estilizar tudo isso e depois despertar todos eles no CSS. Veja o arquivo CSS e veja como faremos isso.
O título "Font-Family" é a primeira propriedade que definimos, e escolhemos "argelino" para isso. Também ajustamos sua "cor", que definimos para "roxo" e "centralizar" esse cabeçalho também, utilizando o "alinhamento de texto.”Agora temos um parágrafo, e tudo o que devemos fazer é mudar a“ cor ”do parágrafo. O valor do atributo "cor" é definido como "verde" neste caso. O "tamanho da fonte" aqui é "24px". Como uma propriedade "na família da fonte", também utilizamos "Times New Roman."O atributo" decoração de texto "é usado para criar o sublinhado do texto. O valor de "decoração de texto" foi definido como "sublinhado."Agora estamos usando a palavra-chave" ousada "para" peso-fonte "e a propriedade" textilign "para posicionar este parágrafo no" centro.”
Agora, para a div, estamos utilizando as mesmas propriedades, mas alterando os valores dessas propriedades aqui. Nesta situação, o valor do atributo "cor" é "vermelho."O" tamanho da fonte "é" 22px "neste caso. Também usamos "Calibri" como uma propriedade "font-família". O valor para a "decoração de texto" foi alterado para "sublinhado.”Para colocar esta div no meio, estamos usando a propriedade“ Text-Align ”e defini-la como“ centro.”
Depois disso, temos o Span, "Blue" é o valor da propriedade "cor" do span. Nesse caso, o "tamanho da fonte" é "20px". "Cambria" também é definido aqui como um valor de propriedade "font-família". Também mudamos o "estilo de fonte" desse período para "itálico."O valor" Text-Decoration "que estamos usando aqui é" sublinhado.”Vamos mostrar como ficará quando todas as propriedades se aplicarem a eles e também quando nenhuma propriedade se aplicará a eles. Mostraremos duas saídas aqui para que você aprenda facilmente a diferença antes de usar "Unset" e depois de usar o valor "não atendido" para as propriedades "todas".
Veja esta primeira saída aqui; Todas as propriedades são aplicadas ao cabeçalho, parágrafo, div e span, porque não usamos "desmaios" aqui com qualquer propriedade. Agora, siga em frente e verifique como ele mostrará a saída quando usarmos “Unset.”
Neste arquivo CSS, apenas adicionamos "All: Unset" para o cabeçalho, parágrafo, div e span. Isso significa que “desmembramos” todas as propriedades que solicitamos para todos eles.
A saída mostra que não há propriedade aplicada em nenhum cabeçalho, parágrafo, div e para o elemento de span. Isso é apenas por causa do valor "não atendido" que usamos para "todos.”
Conclusão
Este tutorial foi desenvolvido para ajudá -lo a aprender o valor "não definido" do CSS que nos permite desfazer algumas propriedades e também desfazer todas as propriedades, apenas colocando isso "desmembrado" lá. Este tutorial passou por este tópico em detalhes. Examinamos quatro exemplos diferentes aqui, nos quais utilizamos esse valor "não atendido", bem como as saídas, para que você entenda facilmente como esse valor "não atingido" funções. Usamos o valor "não atendido" separadamente dos nomes de propriedades e também usamos isso com a propriedade "All" que cancelou todas as propriedades que aplicamos nos exemplos. Espero que você consiga despertar suas propriedades no CSS depois de seguir corretamente este tutorial.