CSS premier du type

Une feuille de style en cascade a une propriété pour mettre en évidence le premier contenu de HTML entre plusieurs types spécifiques, puis appliquer les effets. HTML et CSS joueront tous deux un rôle vital dans la mise en œuvre de ce phénomène.

Comment fonctionne la première propriété de type dans CSS?

Cette propriété fonctionne de telle manière que le contenu sur lequel nous souhaitons appliquer un effet spécifié est écrit avec les mots clés «premier de type». Il accède automatiquement au contenu déclaré la première fois à l'intérieur du code. La syntaxe de base de cette propriété est:

Tag de contenu html: premier de type
// Effets que vous souhaitez appliquer.

Pourquoi utilisons-nous d'abord le type en CSS?

Dans CSS, nous pouvons appliquer différents effets sur le contenu HTML. L'une des approches principales et importantes de l'application d'effets sur les balises HTML est le CSS interne, en ligne ou externe. Le CSS en ligne est écrit à l'intérieur des balises, ce qui signifie qu'il n'est utilisé que lorsqu'un effet est appliqué sur cette balise spécifiquement. Tandis que les CSS internes et externes sont utilisés lorsque les classes et les identifiants que nous utilisons dans la feuille de style sont accessibles uniquement par les balises où nous avons inclus les noms des classes et des identifiants.

Mais dans le cas de «premier de type», nous n'avons pas besoin d'utiliser des cours ou des identifiants. Cette propriété est utilisée lorsque vous souhaitez utiliser une balise HTML dans un nombre répétitif de fois, mais vous voudriez appliquer l'effet uniquement sur la balise qui apparaît en premier. Cette propriété a facilité le processus d'application des effets sur la balise par rapport à CSS en ligne. Ici, nous n'écrivons qu'un simple morceau de code au début dans la balise de style plutôt que de trouver chaque balise de contenu HTML et de mentionner la balise de style avec des effets à l'intérieur.

Exemple 1: Premier type dans le paragraphe et la rubrique

Cette propriété du premier type est appliquée simplement au paragraphe du contenu HTML.

Tout d'abord, la couleur d'arrière-plan de la page Web sera définie. C'est une propriété supplémentaire qui vient de rendre la sortie plus attrayante. Une rubrique est déclarée avec un

étiquette de tête. Encore une fois, un nouveau titre est utilisé ici. Cette fois, il se dirige 2

. Ensuite, une étiquette de paragraphe simple est utilisée. À l'intérieur des étiquettes d'ouverture et de clôture du paragraphe, nous avons ajouté un exemple de texte factice. Une nouvelle rubrique

est ajouté qui est à nouveau suivi d'une nouvelle balise de paragraphe. Ceci est la hiérarchie ou la séquence de tous les contenus HTML que nous avons utilisés:

…

…

…

…

…

Code corporel HTML

Ce premier type CSS est appliqué sur quelques-unes de ces balises HTML uniquement sur eux qui sont apparus en premier. Donc, cela aidera sûrement l'utilisateur à identifier les balises du premier arrivé.

Code HTML CSS

Après le corps HTML, vous devez ajouter CSS dans la section tête du code HTML. En position de tête, nous avons donné un titre à notre page. Ensuite, à l'intérieur de la balise de style, un paragraphe est ajouté à la propriété première de type. Nous avons ajouté de la couleur et italisé le style de police au paragraphe.

P: premier de type
La couleur rouge;
Style de police: italique;

De plus, en direction 3

est appliqué avec une couleur jaune et le style de police est choisi.

Fermez toutes les balises et enregistrez le code avec une extension HTML pour créer une page Web HTML sur le navigateur. Sinon, le '.TXT 'Extension ne formera que du texte pour apparaître sur le site Web lorsque vous ouvrez le fichier dans le navigateur Web.

Sortir

Lors de l'exécution du fichier, vous verrez que la propriété de premier type est appliquée à l'en-tête et au paragraphe.

Exemple 2: CSS d'abord du type dans la liste des description

Dans HTML, une liste de description est utilisée pour contenir le contenu HTML, tout comme une simple liste non ordonnée. Tout d'abord, ce sont quelques terminologies de base de la liste description qui seront utilisées dans l'exemple de code:

• est pour la liste description.

• Cette balise concerne la définition du terme descriptif ou le nom.
• il est utilisé pour décrire chaque terme mentionné.

Maintenant, nous verrons comment cela fonctionne dans le code corporel HTML. À l'intérieur du corps, une rubrique est ajoutée. Après cela, nous commençons la liste des description en utilisant

Tag puis deux

sont utilisés. À l'intérieur des deux tags à terme

, Nous avons utilisé 3 descriptions des termes

.Cet exemple montre les légumes et les fruits comme DT et les noms comme

. Un petit morceau de code est écrit ci-dessous.

Légumes:

1. Tomates

Après cela, fermez toutes les balises et avancez vers la partie CSS.

Code corporel HTML

Une fois que vous avez terminé avec la partie HTML dans la balise de style, appliquez un effet au

Tag avec le poids ou le style de police comme audacieux.

Dt
Police-poids: Bold;

Comme

Les balises sont deux, nous n'avons pas mentionné la propriété de premier type, cet effet sera appliqué à la fois

valeurs.

Tous les termes qui sont écrits comme

reçoivent une distance de rembourrage entre elles. Donc, nous avons simplement écrit le nom «DD» pour appliquer cet effet à tous les DD.

Dd
marge: 3px;

Code HTML CSS

Mais nous voulons appliquer un effet de frontière sur ce DD qui apparaît d'abord parmi les 6 <

Mots clés. Nous allons donc utiliser cette propriété CSS. De plus, l'effet de fond est ajouté au

Tag avec la bordure.

Dd: premier de type
Border: 2px pourpre solide;
Color d'arrière-plan: LightGreen;

Sortir

Sur l'exécution, vous verrez que le premier

est mis en évidence avec une couleur d'arrière-plan et une bordure.

Note
Dans le corps HTML, il n'y a aucun critère à mentionner à l'intérieur de la balise ou à mettre en surbrillance spécifiquement pour montrer qu'une balise particulière est la première ou que nous voulons appliquer un effet sur une balise spécifique. Il vous suffit de vous assurer que toutes les balises sont déclarées correctement avec les balises d'ouverture et de fermeture. Et l'ordre du contenu HTML doit être noté lors de l'écriture du code car cette première propriété de type sera appliquée uniquement au contenu déclaré en premier.

Conclusion

Dans cet article, nous avons essayé d'aider l'utilisateur à un aspect important de la conception CSS avec la propriété première de type. Cette propriété est utile lorsque vous devez appliquer les effets sur le tout premier contenu HTML déclaré parmi le nombre du même type de contenu. Tout d'abord, nous avons commencé avec le fonctionnement de base de l'effet premier de type et la nécessité de cette propriété dans la conception de la page Web. Nous avons expliqué deux exemples, notamment le titre et la sélection des paragraphes dans le premier exemple. Tandis que le deuxième exemple contient la liste description à affecter via cette propriété CSS.