CSS primeiro do tipo

Uma folha de estilo em cascata possui uma propriedade para destacar o primeiro conteúdo de html entre vários tipos específicos e depois aplicar os efeitos. HTML e CSS terão um papel vital na implementação deste fenômeno.

Como funciona o primeiro tipo de propriedade no CSS?

Esta propriedade funciona de tal maneira que o conteúdo em que queremos aplicar qualquer efeito especificado é escrito com as palavras-chave 'Primeiro do tipo'. Ele acessa automaticamente o conteúdo que é declarado pela primeira vez dentro do código. A sintaxe básica para esta propriedade é:

Tag de conteúdo HTML: Primeiro do tipo
// Efeitos que você deseja aplicar.

Por que usamos o primeiro do tipo em CSS?

No CSS, podemos aplicar efeitos diferentes no conteúdo HTML. Uma das principais e importantes abordagens para aplicar efeitos nas tags HTML é através do CSS interno, embutido ou externo. O CSS embutido é escrito dentro das tags, o que significa que é usado apenas quando um efeito é aplicado nessa tag especificamente. Enquanto os CSs internos e externos são usados ​​quando as classes e IDs que usamos na folha de estilo são acessados ​​apenas por aquelas tags onde incluímos os nomes de classes e IDs.

Mas no caso de 'primeiro do tipo', não precisamos usar aulas ou ids. Esta propriedade é usada quando você deseja usar uma tag HTML em um número repetitivo de vezes, mas você deseja aplicar o efeito apenas na tag que aparece primeiro. Esta propriedade facilitou o processo de aplicação de efeitos na tag em comparação com CSS em linha. Aqui, escrevemos apenas uma peça simples de código no início da tag de estilo, em vez de encontrar cada tag de conteúdo HTML e mencionar a tag de estilo com efeitos dentro dela.

Exemplo 1: Primeiro do tipo no parágrafo e no cabeçalho

Esta propriedade do primeiro tipo é aplicada simplesmente ao parágrafo do conteúdo HTML.

Primeiro, a cor de fundo da página será definida. É uma propriedade extra usada para tornar a saída mais atraente. Um título é declarado junto com um

tag de título. Novamente, um novo cabeçalho é usado aqui. Desta vez está indo 2

. Então, uma tag simples de parágrafo está em uso. Dentro das tags de abertura e fechamento do parágrafo, adicionamos um texto dummy de amostra. Um novo título

é adicionado que é novamente seguido por uma nova etiqueta de parágrafo. Esta é a hierarquia ou a sequência de todo o conteúdo HTML que usamos:

..

..

..

..

..

Código corporal HTML

Este primeiro do tipo CSS é aplicado em algumas dessas tags html apenas nelas que apareceram primeiro. Então, isso certamente ajudará o usuário a identificar as tags do primeiro a chegar.

Código HTML CSS

Após o corpo HTML, você precisa adicionar CSS na seção principal do código HTML. Na posição da cabeça, demos um título à nossa página. Em seguida, dentro da etiqueta de estilo, um parágrafo é adicionado à propriedade do primeiro do tipo. Adicionamos cores e italizou o estilo de fonte ao parágrafo.

P: Primeiro do tipo
Cor vermelha;
Estilo de fonte: itálico;

Além disso, indo 3

é aplicado com uma cor amarela e o estilo da fonte é escolhido.

Feche todas as tags e salve o código com uma extensão HTML para criar uma página da web html no navegador. Caso contrário, o '.A extensão txt 'formará apenas texto para aparecer no site quando você abrir o arquivo no navegador da web.

Saída

Na execução do arquivo, você verá que a primeira propriedade do tipo é aplicada ao cabeçalho e ao parágrafo.

Exemplo 2: CSS primeiro do tipo na lista de descrição

No HTML, uma lista de descrição é usada para conter o conteúdo HTML, assim como uma lista simples não ordenada. Primeiro, essas são algumas terminologias básicas da lista de descrição que serão usadas no código de exemplo:

• é para a lista de descrição.

• Esta tag é para a definição do termo descritivo ou o nome.
• é usado para descrever cada termo mencionado.

Agora, veremos como funciona no código corporal html. Dentro do corpo, um título é adicionado. Depois disso, iniciamos a lista de descrição usando

etiqueta e depois dois

são usados. Dentro dos dois tags do termo

, Usamos 3 descrições dos termos

.Este exemplo mostra os vegetais e frutas como dt e os nomes como

. Um pequeno pedaço de código está escrito abaixo.

Vegetais:

1. Tomates

Depois disso, feche todas as tags e mova -se em direção à parte do CSS.

Código corporal HTML

Depois de terminar com a parte html na tag de estilo, aplique um efeito ao

Marque com o peso ou estilo da fonte como ousado.

Dt
Intensidade da fonte: Negrito;

Como

Tags são duas, não mencionamos a primeira propriedade do tipo, esse efeito será aplicado a ambos

valores.

Todos os termos que são escritos como

recebem uma distância de estofamento entre si. Então, simplesmente escrevemos o nome 'DD' para aplicar esse efeito a todos os DDs.

Dd
margem: 3px;

Código HTML CSS

Mas queremos aplicar um efeito de fronteira apenas naquele dd que aparece primeiro entre todos os 6 <

Tag. Então, vamos usar esta propriedade CSS. Além disso, o efeito de fundo é adicionado ao

etiqueta com a fronteira.

DD: Primeiro do tipo
Borda: 2px roxo sólido;
Background-Color: Lightgreen;

Saída

Na execução, você verá que o primeiro

é destacado com uma cor de fundo e uma borda.

Observação
No corpo HTML, não há critérios para mencionar dentro da tag ou destacar especificamente para mostrar que uma tag específica é a primeira ou que queremos aplicar um efeito em uma tag específica. Você só precisa garantir que todas as tags sejam declaradas corretamente junto com as tags de abertura e fechamento. E a ordem do conteúdo HTML deve ser observada ao escrever o código, porque esta primeira propriedade do tipo será aplicada apenas ao conteúdo que é declarado primeiro.

Conclusão

Neste artigo, tentamos ajudar o usuário a um aspecto importante do design CSS com a propriedade do primeiro do tipo. Esta propriedade é útil quando você precisa aplicar os efeitos no primeiro conteúdo HTML declarado entre o número do mesmo tipo de conteúdo. Primeiro, começamos com o funcionamento básico do primeiro efeito do tipo e a necessidade dessa propriedade no design da página da web. Explicamos dois exemplos, incluindo o título e a seleção de parágrafos no primeiro exemplo. Enquanto o segundo exemplo contém a lista de descrição a ser afetada através desta propriedade CSS.