No CSS, temos um asterisco "*" que é usado para selecionar todos os elementos do HTML e aplicá -los ao estilo. No CSS, se usarmos apenas "*" e aplicarmos o estilo no aparelho encaracolado, ele aplicará esses estilos a todos os elementos da página HTML. Mas se mencionarmos os filhos de um pai em particular, ele receberá todos os filhos daquele pai e aplicará o estilo a todos os filhos daquele pai, por assim dizer. Neste tutorial, usaremos esse asterisco no CSS e mostraremos como funciona. Nós lhe daremos exemplos diferentes e seus resultados neste tutorial.

Sintaxe

*
Valor da propriedade

OU
*pai
Valor da propriedade

Exemplo 1

Crie o arquivo HTML e escreva parágrafos e títulos no arquivo HTML para que possamos estilizá -los usando o seletor CSS “*”. Neste tutorial, o software que estamos usando para executar exemplos é o Visual Code Studio. Então, abrimos o arquivo HTML neste código do Visual Studio e escrevemos o código HTML aqui. Nós também fornecemos o código. Este arquivo é salvo usando o “.Extensão de arquivo html ”.

Você pode ver que temos um cabeçalho1 no corpo do HTML e depois uma classe "" na qual temos dois parágrafos diferentes usando o “

”Tag e depois feche esta“ div ”. Depois disso ", temos outro parágrafo"

"Que está fora do" ". Aqui, fechamos o corpo e salvamos. Em seguida, estamos passando para o nosso arquivo CSS, onde usamos o asterisco "*" para aplicar estilos diferentes nesta página HTML.

Código CSS

Aqui, criamos nosso arquivo CSS e usamos o “.Extensão de arquivo CSS ”com este arquivo. Devemos vincular este arquivo ao arquivo html. Então, todo o estilo que mencionamos aqui será aplicado ao arquivo html que criamos antes disso.

Primeiro, usamos o seletor "*" e depois usamos diferentes propriedades de estilo dentro dos aparelhos encaracolados deste seletor "*". Usamos a propriedade “Background-Color” e selecionamos a cor “amarela” para o fundo desta página. Em seguida, temos a propriedade "cor" e esta propriedade "cor" muda a cor do texto para "roxo". Ele mudará todas as cores de texto que estão escritas no arquivo html para "roxo". Além disso, use a propriedade "Font-Family", que é usada para mudar o estilo da fonte e defina-a como "Times New Roman". Todo o texto será escrito neste estilo de fonte. Todas as propriedades de estilo que estamos usando serão aplicadas na página HTML completa porque usamos "*" e não mencionamos nenhum nome com este "*".

Saída

Recebemos essa saída clicando com o botão direito do mouse no arquivo HTML e selecionando “Abrir no navegador padrão”. A saída mostra como esse seletor "*" funciona no CSS.

Você pode observar que todo o texto é exibido na cor "roxa" e todo o texto é escrito no estilo "Times New Roman" e toda a cor de fundo é "amarelo". Então, quando usamos o seletor "*", não precisamos aplicá -lo separadamente a cada elemento. O seletor "*" leva todos os elementos do arquivo html e aplica o estilo a todos eles.

Exemplo 2

Temos o Exemplo 2 e alteramos o código HTML. Estamos criando três parágrafos no “div” e um parágrafo fora da div neste código HTML dado.

Código CSS

Neste arquivo CSS, vamos mencionar o "div" com o "*" Asterisk. Em seguida, use as propriedades de estilo para este "div". Esses estilos se aplicarão a todos os elementos da “div”.

Usamos “div *” e colocamos aparelhos encaracolados nos quais usamos as propriedades do estilo. Aqui, estamos usando "Blue claro" como "cor de fundo" apenas para os elementos da div. Então, o "azul-violeta" está definido para a cor do texto ou fonte. Além disso, mude o estilo da fonte dos elementos de div para "argelino" usando a propriedade "font-família". Estamos alinhando o texto dos elementos "div" no "centro" com a ajuda de "text-align".

Saída

Nesta saída, o cabeçalho é simples. Não há estilo aplicado a este cabeçalho, pois este título está escrito fora da “div”. Aplicamos o estilo apenas aos elementos "div". Agora, as próximas três linhas foram escritas dentro da “div”. Seu estilo de fonte é alterado, sua cor da fonte é alterada e também o texto é colocado no centro e o fundo dessas linhas é azul. Todos os estilos que usamos em nosso arquivo CSS são aplicados a todos os elementos "div". O último parágrafo também é simples, pois também está escrito fora da “div”.

Exemplo 3

Também realizamos outro exemplo, para que você possa facilmente obter a diferença entre como o seletor "*" funciona sozinho e como ele funciona quando usamos qualquer nome com este seletor "*".

Neste arquivo html, estamos criando o cabeçalho 1 usando o “

" marcação; uma classe div usando a tag ""; parágrafos usando o “

" marcação; e também uma aula de span usando a tag “”. Aplicaremos diferentes estilos em "H1", "Div", "P" e "Span" usando CSS.

Código CSS

Primeiro, usamos apenas o seletor "*" para alterar toda a cor de fundo da página HTML. A cor "rosa" é selecionada como uma "cor de fundo" para a página HTML. Em seguida, usamos "P" com o "*" para que todo o estilo seja aplicado aos parágrafos escritos no arquivo html. A “cor de fundo” de todos os parágrafos é definida como a cor “verde claro”. O tamanho do texto escrito na etiqueta do parágrafo será renderizado em "Monospace" à medida que definimos o tamanho do texto do parágrafo para "Monospace". Todas essas propriedades de estilo são aplicadas aos parágrafos.

Então, vamos estilizar os elementos de classe "span" usando o "span" com o "*". A cor de fundo dos elementos da extensão é "azul claro" e o estilo da fonte é "itálico" e "ousado". Então, temos uma classe "div" e vamos estilizar isso. Mudamos sua cor de fundo para "amarelo". O "tamanho da fonte" é "130%" para os elementos da div. Todo o texto do elemento div é renderizado no centro, à medida que usamos "alinhamento de texto". A "fonte da fonte" para isso é "argelino". O "H1" permanece. Então, temos que aplicar algum estilo neste H1. A “cor de fundo” do cabeçalho 1 é “laranja” e o texto deste título 1 é definido como “verde” em cores. O tamanho da fonte do cabeçalho 1 é "25px" e está "central" alinhado.

Saída

A saída mostra que o cabeçalho é de cor diferente e também o estilo deste cabeçalho é diferente. Usamos duas classes “div” e esses dados de duas classes div. Você pode ver que existem quatro parágrafos e a cor de fundo desses quatro parágrafos é verde. As classes de extensão são as mesmas em estilo e a cor de fundo da classe Span é azul claro. Todo o fundo é o mesmo que usamos esta propriedade "Background-Color" com a "*".

Conclusão

Neste tutorial, aprendemos o uso do asterisco "*" no CSS. Estudamos como funciona sozinho e como funciona quando escrevemos qualquer nome com este seletor "*". Aprendemos que esse seletor de asterisco leva todos os elementos da página HTML e aplicou o estilo a todos esses elementos. Exploramos exemplos diferentes nos quais usamos esse seletor "*" no CSS e renderizamos a saída de todos esses exemplos. Fornecemos o código HTML e CSS neste tutorial junto com as saídas desses códigos.