CSS primero de tipo

Una hoja de estilo en cascada tiene una propiedad para resaltar el primer contenido de HTML entre varios de un tipo específico y luego aplicar los efectos. HTML y CSS desempeñarán un papel vital en la implementación de este fenómeno.

¿Cómo funciona la primera propiedad de tipo de tipo en CSS??

Esta propiedad funciona de tal manera que el contenido en el que queremos aplicar cualquier efecto especificado se escribe con las palabras clave 'Primero de tipo'. Accede automáticamente al contenido que se declara la primera vez dentro del código. La sintaxis básica para esta propiedad es:

Etiqueta de contenido HTML: primero de tipo
// Efectos que desea aplicar.

¿Por qué usamos primero de tipo en CSS??

En CSS, podemos aplicar diferentes efectos sobre el contenido de HTML. Uno de los enfoques principales e importantes para aplicar efectos en las etiquetas HTML es a través del CSS interno, en línea o externo. El CSS en línea está escrito dentro de las etiquetas, lo que significa que solo se usa cuando se aplica un efecto en esa etiqueta específicamente. Mientras que se usan CSS internos y externos cuando las clases e IDS que usamos en la hoja de estilo solo son accedidas por aquellas etiquetas donde hemos incluido los nombres de clases e IDS.

Pero en el caso de 'primero de tipo', no necesitamos usar clases o identificaciones. Esta propiedad se usa cuando desea usar una etiqueta HTML en un número repetitivo de veces, pero desea aplicar el efecto solo en la etiqueta que aparece primero. Esta propiedad ha facilitado el proceso de aplicar los efectos en la etiqueta en comparación con CSS en línea. Aquí, solo escribimos una pieza de código simple al comienzo en la etiqueta de estilo en lugar de encontrar cada etiqueta de contenido HTML y mencionar la etiqueta de estilo con efectos dentro de él.

Ejemplo 1: Primero de tipo en el párrafo y el rumbo

Esta propiedad del primero de tipo se aplica simplemente al párrafo del contenido HTML.

Primero, se establecerá el color de fondo de la página web. Es una propiedad adicional que solo se usa para hacer que la salida sea más atractiva. Se declara un título junto con un

etiqueta de encabezado. De nuevo, se usa un nuevo encabezado aquí. Esta vez se dirige 2

. Entonces, una etiqueta de párrafo simple está en uso. Dentro de las etiquetas de apertura y cierre del párrafo, hemos agregado un texto de muestra ficticia. Un nuevo encabezado

se agrega que nuevamente es seguido de una nueva etiqueta de párrafo. Esta es la jerarquía o la secuencia de todos los contenidos HTML que hemos utilizado:

…

…

…

…

…

Código corporal HTML

Este CSS primero de tipo se aplica en algunas de estas etiquetas HTML solo en ellas que aparecieron primero. Por lo tanto, esto seguramente ayudará al usuario a identificar las etiquetas de primer momento.

Código CSS HTML

Después del cuerpo HTML, debe agregar CSS en la sección Cabeza del código HTML. En la posición de la cabeza, hemos dado un título a nuestra página. Luego, dentro de la etiqueta de estilo, se agrega un párrafo a la primera propiedad. Hemos agregado color e valiente el estilo de fuente al párrafo.

P: Primero de tipo
Color rojo;
Estilo de fuente: cursiva;

Además, encabezando 3

se aplica con un color amarillo y se elige el estilo de fuente.

Cierre todas las etiquetas y guarde el código con una extensión HTML para crear una página web HTML en el navegador. De lo contrario, el '.La extensión de TXT solo formará texto para aparecer en el sitio web cuando abra el archivo en el navegador web.

Producción

En la ejecución del archivo, verá que la propiedad de primer tipo se aplica al encabezado y al párrafo.

Ejemplo 2: CSS primero de tipo en la lista de descripción

En HTML, se utiliza una lista de descripción para contener el contenido HTML como lo hace una lista simple de desordenada. Primero, estas son algunas terminologías básicas de la lista de descripción que se utilizarán en el código de ejemplo:

• es para la lista de descripción.

• Esta etiqueta es para la definición del término descriptivo o el nombre.
• se usa para describir cada término mencionado.

Ahora, veremos cómo funciona en el código de cuerpo HTML. Dentro del cuerpo, se agrega un encabezado. Después de eso comenzamos la lista de descripción usando

etiqueta y luego dos

son usados. Dentro de ambas etiquetas de término

, Hemos usado 3 descripciones de los términos

.Este ejemplo muestra las verduras y frutas como DT y los nombres como

. Un pequeño trozo de código se escribe a continuación.

Verduras:

1. Tomates

Después de eso, cierre todas las etiquetas y avance hacia la parte CSS.

Código corporal HTML

Una vez que haya terminado con la parte HTML en la etiqueta de estilo, aplique un efecto al

etiqueta con el peso o el estilo de fuente como audaz.

Dt
Font-Weight: Bold;

Como

Las etiquetas son dos, no hemos mencionado la propiedad de primer tipo, este efecto se aplicará a ambos

valores.

Todos los términos que se escriben como

se les da una distancia de acolchado entre sí. Entonces, simplemente hemos escrito el nombre 'DD' para aplicar este efecto a todos los DDS.

DD
margen: 3px;

Código CSS HTML

Pero queremos aplicar un efecto fronterizo solo en ese DD que aparece primero entre todos los 6 <

etiquetas. Entonces usaremos esta propiedad CSS. Además, el efecto de fondo se agrega al

Etiqueta con el borde.

DD: primero de tipo
Border: 2px Purple sólido;
Color de fondo: Lightgreen;

Producción

En la ejecución, verá que el primero

se resalta con un color de fondo y un borde.

Nota
En el cuerpo HTML, no hay criterios que mencionar dentro de la etiqueta o resaltar específicamente para mostrar que una etiqueta en particular es la primera o que queremos aplicar un efecto en una etiqueta específica. Solo debe asegurarse de que todas las etiquetas se declaren correctamente junto con las etiquetas de apertura y cierre. Y el orden de contenido HTML debe tenerse en cuenta al escribir el código porque esta primera propiedad de tipo se aplicará solo al contenido que se declara primero.

Conclusión

En este artículo, tratamos de ayudar al usuario con un aspecto importante del diseño CSS con la propiedad de primer tipo de tipo. Esta propiedad es útil cuando necesita aplicar los efectos en el primer contenido HTML declarado entre el número del mismo tipo de contenido. Primero, comenzamos con el funcionamiento básico del primer efecto de tipo y la necesidad de esta propiedad en el diseño de la página web. Hemos explicado dos ejemplos que incluyen el encabezado y la selección del párrafo en el primer ejemplo. Mientras que el segundo ejemplo contiene la lista de descripción que se verá afectada a través de esta propiedad CSS.