CSS: pseudo-elementos e pseudo-classes

Às vezes, parece que para sobreviver emo mundo moderno, você precisa saber como criar sites. Mesmo nas escolas, eles ensinam o básico do HTML. Mas isso não é suficiente para criar um recurso de qualidade. Você ainda precisa conhecer os fundamentos da folha de estilos em cascata, em particular pseudo-classes e pseudo-elementos CSS.

O que é isso?

De acordo com a lei tácita, todos os estilos queO assistente da Web inscreve-se na marcação CSS, usada para os elementos da estrutura que podem ser vistos no código-fonte. No entanto, há grupos de elementos que não são prescritos no documento HTML, mas também precisam especificar estilos.

Por exemplo, no arquivo HTML não há uma tag queseria responsável pelo projeto da letra maiúscula de um novo parágrafo ou área que está na frente de um determinado elemento. E as tags não podem mostrar a atividade do link ou alterar a imagem quando o cursor do mouse está apontando para ela. Para fazer estes e muitos outros valores, existem seletores CSS: pseudo-classes e pseudo-elementos.

Pseudo-classes são os seletores que afetamnos elementos existentes do documento. Os pseudo-elementos geralmente especificam e alteram a área que estava originalmente ausente do arquivo de origem. Simplificando, os pseudoelementos definem novas áreas de páginas que não estavam na marcação HTML e pseudo-classes definem o estado dos objetos sob certas condições.

Depois: depois

A primeira coisa que você deve prestar atenção épseudo-elementos CSS antes e depois, como cada recurso de auto-respeito usa-los para melhorar a aparência, legibilidade e atratividade do site. Esses elementos fornecem a capacidade de adicionar novas áreas, rótulos e estilos antes ou depois do documento original.

Todo mundo já viu pelo menos uma vezanúncios do site de publicações, após o que as palavras: "New", "New" ou "Shock", "Favoritos", "Melhor", "Super", etc Estes objetos foram especificados usando o CSS após o pseudo-elemento.

Para criar essa posição, você precisa adicionar o seguinte código à folha de estilo em cascata:

Aqui, a palavra new é o nome de uma nova classe,então, antes do parágrafo necessário na marcação HTML, você precisa digitar: class = "new". O nome da classe deve estar entre os colchetes da tag de abertura. Se tudo for feito corretamente, em seguida, após o final do parágrafo na página do navegador aparece a inscrição "algo novo".

Naturalmente, o exemplo especifica um script para simplesinscrições, mas ninguém disse que você não pode alterar o tamanho, cor e posicionamento. Todos os parâmetros necessários podem ser inseridos na classe new após as características do conteúdo. Separe-os com um ponto-e-vírgula e feche a chave no final.

Antes: antes

Características quase idênticas têmPseudo-elemento CSS antes. Com uma pequena diferença: é projetado para adicionar os elementos necessários na frente do objeto. É gravado exatamente o mesmo que depois, apenas com a palavra anterior.

Antes do próximo parágrafo do texto, você pode adicionarpalavras que atraem a atenção, ou você pode simplesmente colocar uma imagem ou elemento de Unicode na frente do texto. Por exemplo, abrindo aspas ou recuos. Para dar vida a isso, você precisa adicionar uma nova classe à marcação CSS e definir as características necessárias. A solução mais simples seria a seguinte:

Para recuar no final do documento, você precisa criar uma pseudo-classe depois e em vez de conteúdo: aberto escrever conteúdo: fecharmudar de acordoposicionamento. Se a pseudo-classe anterior foi recuada da margem esquerda, então na classe posterior ela deve ser da direita. Você também pode adicionar uma imagem à marcação (digamos, as mesmas aspas), e o texto não mais parecerá uma folha opaca.

Saga épica: primeiro

Muito popular na criação de novos projetosusa o pseudo-elemento CSS primeiro. Em particular, isso se aplica a projetos com entretenimento e temas fabulosos, assim como recursos da web de direção histórica e científica.

Este pseudoelemento CSS tem duas características - linha e letra:

• Carta - altera a primeira letra desse fragmento de texto paraao qual é adicionado. Assim, forma uma letra inicial - um elemento no qual a linha de base é algumas linhas abaixo em relação ao texto principal. Para definir este parâmetro na folha de estilo em cascata, você precisa definir as características do parágrafo. Por exemplo P: primeira letra {***} - e já entre parênteses indicam todos os necessáriosParâmetros como cor, fonte, tamanho. Se a letra inicial precisa ser criada apenas para o primeiro parágrafo, então uma nova classe é criada (como no exemplo novo: depois).
• Line - esta posição muda completamente a primeira linhaparágrafo. É muito conveniente usar em publicações científicas, se você quiser destacar informações importantes. É gravado da mesma forma que outros exemplos. Mas aqui é importante lembrar que o pseudoelemento não seleciona uma sentença, mas uma string. Dependendo de qual navegador o usuário usa, sua primeira linha pode ser mais longa ou mais curta, por isso é importante garantir que essa seleção não pareça ridícula. Para esses casos, o pseudoelemento de quebras de linha foi criado em CSS.

Nova linha

Na verdade, esse elemento é raramente usado, porqueEle é substituído com sucesso pela tag do Google. No entanto, há situações em que é necessário especificar uma quebra de linha com pseudo-elementos. Para esses fins, você pode usar o mesmo depois. Para isso, o seguinte código é escrito: depois de {content: "A"; espaço em branco: pre;}. O nome da classe deve ser inserido entre os parênteses da tag de abertura, assim que for fechado, depois disso e uma quebra de linha se seguirá.

Essa opção leva mais tempo ao construir conteúdo legível e, se não houver necessidade de trabalhar com navegadores anormalmente desconhecidos, é melhor limitar-se à tag do Google.

Sintaxe de Pseudoclasse

Como já mencionado, as pseudo-classes definemo estado dos elementos com os quais o usuário interage. Ao contrário dos pseudoelementos CSS, que definem as características da estrutura invisível, as classes imaginárias se concentram em fatores comportamentais. Para torná-lo mais claro, você pode dar um pequeno exemplo. Suponha que haja uma lista de links úteis no site, o usuário navegue através deles, leia informações, mas depois de algum tempo encontre o conteúdo que já foi visto. Ele só foi para esta página novamente, porque há muitos links, e eles não são diferentes. Para evitar que isso aconteça, os webmasters adicionam uma pseudo-classe que altera a cor do link varrido e, em seguida, o usuário saberá exatamente o que leu e para onde ainda não passou.

Todas as pseudo-classes são registradas em uma folha de estilo em cascata com uma sintaxe simples e comprovada:

• Seletor: Pseudoclasse {características do estilo: cor, tamanho, recuo, posicionamento etc.}

Essas classes podem ser divididas em três grupos principais:

• aqueles que determinam o estado do elemento;
• aqueles relacionados a pseudo-elementos;
• classes fictícias que definem o idioma do conteúdo.

Pseudo-classes e estado dos elementos

Considere em ordem, o que pode serpseudo-classes A primeira subespécie é caracterizada por uma mudança no estado de um elemento, dependendo do seu estado em um determinado momento. Foi assim no exemplo acima: se você clicou no link, ele mudará de cor. Estes incluem tais pseudo-classes:

• :ativo. Se você aplicar essa pseudo-classe, quando você passar o mouse sobre um fragmento separado, ela ficará ativa. Isso irá se manifestar em uma mudança de cor, um aumento no tamanho ou uma animação aparecerá.
• :link. Principalmente se aplica a links que o usuário ainda não visitou. Eles permanecem inalterados.
• : foco. Geralmente usado para documentos de texto,quando o usuário, definindo o cursor no campo, pode alterar a cor do texto. Às vezes é usado para imagens. Por exemplo, eles expõem uma imagem sombreada, mas quando clicados, ela adquire uma cor natural.
• :pairar. Quando o usuário simplesmente move o mouse para um objeto específico, ele pode alterar a cor ou a forma, enquanto ele não precisa clicar.
• :visitado. Basicamente, essa pseudo-classe é destinada a links visitados que mudam de cor para roxo por padrão.

Os iniciantes erroneamente assumem que essas pseudo-classes são destinadas apenas a links, mas com o desejo e a imaginação adequados, você pode alterar qualquer elemento do site.

Especialmente para pseudo-elementos CSS

Este grupo de seletores inclui pseudo-classes que podem alterar pseudo-elementos. Tal pseudo-classe é : primeiro filho. Na folha de estilo em cascata, você precisa criar uma nova classe para : primeiro filho e defina a cor do texto ou seu tamanho. O resultado será o seguinte:

• B: primogênito {cor: vermelho; }

Na maioria das vezes isso é feito quando necessário.selecione vários fragmentos de texto em negrito e apenas o início do parágrafo deve ser diferente. Portanto, a classe é chamada igual à tag, que é responsável pelo texto em negrito. Se aplicarmos isso na prática, então, graças à pseudo-classe, somente o primeiro fragmento destacado em negrito terá uma cor vermelha, as demais palavras serão pretas padrão.

Também : primeiro filho usado para remover o recuo no primeiro parágrafo e, em vez disso, cor: vermelho; precisará escrever recuo de texto: 0;e B é substituído por P (também indicado pela tag responsável pelo início do parágrafo).

Linguagem de conteúdo

Pseudoclasse : lang basicamente se aplica a textos queescrito em diferentes idiomas. Por exemplo, se o artigo tiver cotações no idioma original, você poderá definir características separadas para elas. A sintaxe deste cluster será a seguinte:

• Nome da classe: lang (idioma) {características do texto (cor, fonte, tipo, etc.)}

Como para a posição "idioma", é denotadode acordo com os padrões aceitos. Por exemplo, inglês-en, russo-ru, alemão-de, etc. Graças a essa pseudo-classe, você pode alterar o estilo de um texto estrangeiro em todo o documento.

Conclusões

Pseudo-classes e pseudo-elementos CSS são um dosessas perguntas em folha de estilo em cascata que causam dificuldade de compreensão. No entanto, não há nada complicado, o principal é entender que uma pseudo-classe é um certo estado que é preenchido nas condições especificadas anteriormente. Por exemplo, quando você passa o mouse ou clica. Um pseudoelemento é uma parte independente de um documento que não faz parte da marcação HTML, mas pode ter seu próprio estilo. Você poderia até dizer que isso é HTML virtual. Se você olhar a situação desta perspectiva, então tudo se torna extremamente simples e compreensível, e com esse conhecimento você já pode começar a criar websites.