Este artigo traz um tópico interessante e importante conhecido como Seletores e acompanha com uma demonstração prática de apoio. As dicas a seguir serão abordadas neste artigo,
- Estilo de elementos HTML
- Seletores CSS
- Seletor de Id CSS
- Seletor de classe CSS
- CSS Universal Selector
- Seletores de grupo CSS
Então, vamos começar,
Estilo de elementos HTML
Vamos entender o que é CSS antes de chegarmos aos seletores de CSS. Se o HTML deve ser considerado um esqueleto, o CSS (Cascading Style Sheets) é como os músculos e a pele. O cérebro é JavaScript. Portanto, para uma página da web, os estilos CSS são essencialmente o layout e o design. Desde o posicionamento das imagens e do texto até o tamanho da fonte e a cor de fundo, o CSS controla a aparência dos elementos HTML em um navegador.
Você pode entender melhor o CSS, se tiver um bom conhecimento do que são seletores CSS. Esses seletores permitem direcionar elementos HTML específicos para que você possa aplicar o estilo certo a eles.
Vamos entender como podemos selecionar elementos HTML,
Como selecionar elementos?
Digamos que você queira que um determinado título tenha um estilo diferente do resto do conteúdo de uma página da web. Agora, usando seletores CSS, você pode direcionar esse elemento HTML para estilizá-lo de maneira diferente. Os seletores CSS ajudam a definir os elementos aos quais um determinado conjunto de regras CSS se aplica. Existem vários tipos de seletores CSS que permitem escolher com precisão os elementos que deseja estilizar. Você pode dar um estilo geral a toda a página da web e, em seguida, trabalhar para estilizar outros elementos da página.
Os seletores são parte de uma regra CSS e esses seletores vêm logo antes da declaração dos blocos CSS. Para um melhor entendimento, você pode consultar a imagem abaixo.
Continuando com o artigo Seletores CSS
Seletores CSS
Este seletor permite selecionar um elemento HTML pelo seu nome.
Considere o código abaixo:
p {alinhamento do texto: cor central: magenta}Este estilo será aplicado em todos os parágrafos.
Parágrafo 1
Parágrafo 2
Este código fornecerá a seguinte saída:
Este estilo será aplicado em todos os parágrafos
Parágrafo 1
Parágrafo 2
No código acima, os elementos HTML foram alinhados ao centro e têm a cor “magenta”.
vá para c ++
Continuando com o artigo Seletores CSS
Seletor de Id CSS
Ao selecionar o atributo id de um elemento HTML, você pode selecionar esse elemento específico. Visto que o id é único para uma página, você pode selecionar o elemento certo usando o atributo id.
Você pode selecionar o elemento HTML usando “#” seguido pelo id desse elemento. Por exemplo, “#primeiro nome” seleciona o elemento onde o id é “nome”.
Considere o seguinte código:
# para1 {text-align: center color: orange}Olá Mundo
Este parágrafo não será afetado.
A saída para o código acima é:
Olá Mundo
Este parágrafo não será afetado.
Como você pode ver na saída acima, incluindo id = ”para1 ″, fomos capazes de alterar a cor desse elemento para laranja. O outro elemento que não tem isso permanece inalterado.
Continuando com o artigo Seletores CSS
Seletor de classe CSS
Usando o seletor de classe, você pode selecionar elementos HTML que possuem um atributo de classe específico. Você pode definir o seletor usando um ponto (símbolo de ponto final) seguido pelo nome da classe. Por exemplo, .intro seleciona os elementos onde a classe é “intro”. Uma coisa a ter em mente é que você nunca pode começar o nome de uma classe com um número.
Considere o seguinte código:
.center {text-align: center color: pink}Este título é rosa e alinhado ao centro.
Este parágrafo é rosa e alinhado ao centro.
converter string para data java
A saída do código acima é:
Este título é rosa e alinhado ao centro.
Este parágrafo é rosa e alinhado ao centro.
Você pode usar seletores de classe CSS para um elemento específico. Se você deseja que apenas um elemento específico seja estilizado, você pode usar o nome do elemento junto com o seletor de classe.
Por exemplo, considere o seguinte código:
p.center {text-align: center color: pink}Este título não é afetado
Este parágrafo é rosa e alinhado ao centro.
A saída do código acima é:
Este título não é afetado
c ++ merge sort code
Este parágrafo é rosa e alinhado ao centro.
Como você pode ver na saída, o cabeçalho h2 não é afetado pelo estilo. Como especificamos “p.center”, apenas o parágrafo é afetado pelo estilo.
Continuando com este artigo sobre seletores CSS,
CSS Universal Selector
Este tipo de seletor pode ser considerado um caractere curinga que seleciona todos os elementos da página. Ele seleciona todos os elementos da página e é especificado por “*”.
Por exemplo, considere o código abaixo:
* {color: darkgreen font-size: 30px}Este é um teste (fonte menor)
Este é um parágrafo.
A saída para o código acima é:
Olá Mundo
Este é um teste (fonte menor)
Este é um parágrafo.
Como você pode ver na saída, todos os elementos que são definidos usando o seletor de grupo têm a mesma definição de estilo - eles são alinhados ao centro e a cor da fonte é ciano.
Isso nos leva ao final deste artigo.
Confira nosso que vem com treinamento ao vivo conduzido por instrutor e experiência em projetos da vida real. Este treinamento o torna proficiente em habilidades para trabalhar com tecnologias da web de back-end e front-end. Inclui treinamento em Desenvolvimento Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Tem alguma questão para nós? Mencione isso na seção de comentários do artigo e entraremos em contato com você.