Una hoja de estilo en cascada es un idioma que se utiliza para agregar efectos al idioma HTML. Sin CSS, HTML de alguna manera no puede mostrar su contenido en la forma en que será la página web. En otras palabras, ambos idiomas son responsables de desarrollar y diseñar páginas web. En este artículo, vamos a explicar una propiedad de CSS que es responsable de dar todas las dimensiones en un solo conjunto de propiedades, recuadro. Estas dimensiones incluyen propiedades derecha, inferior, superior e izquierda de cualquier contenido como texto o imagen, etc.

Para explicar el funcionamiento de la propiedad de inserción, hemos utilizado algunos ejemplos básicos en el editor de texto utilizando CSS en línea e interno. La sintaxis básica utilizada para la propiedad de inserción es:

No es necesario tomar todos los valores en píxeles, % se puede usar alternativamente. Del mismo modo, el orden para la dimensión no se especifica. Se puede cambiar.

Ejemplo 1:

Para explicar el funcionamiento de la propiedad de inserción CSS, crearemos un contenido HTML básico para formar una página web de muestra. Sin diseñar de qué son responsables las etiquetas HTML simples, esto se verá desde la salida. Esto se hace usando el encabezado

un texto simple en negrita y un párrafo que se menciona dentro del div. Todas estas etiquetas están escritas dentro de la etiqueta del centro, esta etiqueta alineará todo el contenido de HTML al centro. Este tipo de estilo es en línea CSS.

Guarde el código con la extensión HTML y ábralo en el navegador. Verá que una página web estática se forma solo con el texto como encabezado y un párrafo.

Ahora, agregaremos CSS internos a las etiquetas HTML anteriores. Todas las etiquetas son las mismas pero tienen una declaración de clase adicional.

Primero, crearemos un encabezado. Entonces, el texto en negrita. Dar algo de descanso
. Esta etiqueta es responsable de saltar a la siguiente línea y formar un espacio en blanco entre el texto sin formato y el div. Se utiliza una etiqueta DIV para crear un contenedor Div para almacenar otros contenidos de HTML (como texto, imágenes y etc.,) donde se declara un párrafo. Se menciona el nombre de clase 'uno' en el párrafo para que se accedan y se apliquen todos los efectos declarados en la hoja de estilo a este párrafo.

1

Cierre la etiqueta Div y la etiqueta central. Dentro de la sección principal, usaremos una etiqueta de título para dar un nombre al sitio web. Este título aparece en la pestaña del navegador.

Use la etiqueta de estilo. Dentro de esa etiqueta, use un estilo para el encabezado. Hemos aplicado un color de fuente al texto del encabezado. Este es un CSS interno. Del mismo modo, Div se usa para aplicar efectos sobre él. Primero, se establece el color de fondo del div. Luego, las dimensiones que son necesarias para el tamaño del DIV se agregan para formar un efecto. Estas dimensiones incluyen valores de ancho y altura en píxeles.

Después de aplicar estos efectos, hemos creado una clase ','.uno ', cuyo nombre fue mencionado en la etiqueta del párrafo. La clase se declara con un punto al principio que lo especifica como una clase.

La clase y los ID en HTML CSS se forman para aplicar el estilo al contenido HTML. Al usar este mecanismo, podemos abstenernos del estilo CSS en línea que hace que todo el código sea desordenado. Mientras que el CSS interno hace que el código de estilo sea fácilmente comprensible y hace que el código sea corto. Solo necesitamos agregar este nombre de clase e IDS de CSS. En esas etiquetas HTML específicas, donde queremos aplicar los efectos que se mencionan en la clase o IDS, mencionados en CSS interno.

Volviendo al '.Una clase ', en la propiedad de inserción para el párrafo, hemos usado 4 valores en píxeles. Los valores también se pueden mencionar en porcentajes. El valor de inserción contiene los 4 valores superior, derecha, inferior e izquierda para que el párrafo se forme dentro del contenedor Div.

1 2 3 4 5

.uno Recuadro: 10px 40px 30px 0px;

Estos 4 valores son los valores de margen del texto del párrafo porque estos valores alinean el texto dentro del div. El color de fondo también se da al párrafo. Todos los valores insertados de alineación son solo para el texto dentro del Div.

Cierre todas las etiquetas CSS y Head y guarde el archivo. Cuando ejecutaremos este archivo en el navegador, verá que se aplican todos los efectos que se aplican al contenido del cuerpo HTML, especialmente en la sección del párrafo. e han agregado el color de fondo al párrafo para mostrar los efectos de los valores insertados. Todos los 4 valores de inserción se aplican al texto del párrafo.

Ejemplo 2:

Span también es una especie de contenedor Div que en su mayoría lleva texto en él. Estos dos contenidos HTML Div y el tramo están diseñados a través de CSS internos. Así que primero explicaremos la sección de estilo. El contenedor Div se aplica con el color de fondo, las dimensiones de altura y ancho, y con el color de la fuente. Este estilo CSS creará un DIV con algunos efectos.

Ahora, la clase ".Ejemplo de texto ". Se accede a esta clase por el texto del tramo solo dentro del Div. El CSS de esta clase contiene un modo de escritura para el texto que es vertical para que el texto pueda ocupar menos espacio. Luego, la propiedad de inserción también se establece en consecuencia. Se proporcionan todos los valores insertados en píxeles para mantener la distancia marginal entre el texto y los límites de Div.

1 2 3 4 5 6 7

.Exampletext Modo de escritura: Vertical-RL; Posición: Absoluto; recuadro: 40px 50px 30px 60px; Color de fondo: #F8FC08;

Después de la sección de la cabeza, el cuerpo contiene solo la etiqueta Div y una etiqueta de tramo dentro del cuerpo de la etiqueta Div.

Guarde el código y ejecute el archivo. Verá que el div y el tramo se muestran de acuerdo con los valores de inserción aplicados al texto. Los valores de inserción se muestran de cerca para corregir el texto en él.

Ahora, si realizamos algunos cambios modificando los valores insertados de tal manera que usamos solo 2 valores de inserción en lugar de 4, mientras que todos los demás valores siguen siendo los mismos, entonces cuál será la imagen resultante?

1 2 3 4

.Exampletext recuadro: 4px 8px;

Hemos establecido 4 y 8px. La página web resultante contendrá el DIV y el texto que tiene el espacio cerca del DIV. Esto se debe a que hemos eliminado dos valores de la propiedad de inserción y también los primeros valores de la derecha superior también son equivalentes a 0px.

Conclusión:

La propiedad de inserción CSS se utiliza para agregar valores a la dimensión del contenido HTML colectivamente. Para dar más detalles sobre este concepto, comenzamos dando una visión general de HTML y CSS y los tipos que se utilizan en este artículo. La propiedad de inserción ayuda al usuario a agregar margen al contenido interno respectivo al exterior, ya sea teniendo las 4 dimensiones colectivamente o eliminando cualquier valor de la propiedad. Además, se discuten dos ejemplos para elaborar la función y el funcionamiento de la propiedad insertada en una página web.