Orden CSS

El concepto de orden también es ampliamente conocido entre los programadores de computadoras, los desarrolladores y la gente común. Como lo demuestra el título, el estilo CSS de Hyper Text Markup Language (HTML) también utiliza la propiedad de pedido para organizar los elementos de un archivo HTML de acuerdo con la elección de uno. Esta propiedad de pedido se puede aplicar a más de un elemento del mismo tipo utilizando sus respectivas etiquetas HTML en el script HTML. Si no tiene ningún conocimiento previo sobre la propiedad de "orden" del estilo CSS, este artículo demostrará el uso de la propiedad de "pedido" de CSS.

Ejemplo

Comencemos con la primera ilustración de este artículo para demostrar el uso de la propiedad "Orden" del estilo CSS dentro del HTML. Necesita un archivo de tipo "HTML" para agregar y ejecutar el código HTML. Entonces, hemos creado un nuevo archivo, "Prueba.HTML ", dentro de nuestra carpeta" Artículos "y la abrió con el código de Visual Studio. El código HTML debe iniciarse con el "

Comenzaremos a explicar este ejemplo de la etiqueta básica de "cabeza". Dentro de esta etiqueta, hemos estado utilizando las diferentes propiedades CSS para elementos HTML particulares definidos en este archivo HTML a través de la etiqueta "Estilo". Primero, hemos estado diseñando la etiqueta principal "Div" utilizada en el "cuerpo" de nuestra página HTML a través de su ID especificada, I.mi., "principal". Las etiquetas "Div" siempre se usan para dividir la página en secciones o piezas para separar algunos de los elementos y contenidos de una página HTML de otros. Hemos estado utilizando el ancho y la altura de la propiedad para definir el ancho y la longitud de este elemento "div" en la página HTML en píxeles, i.mi., Ancho de 400 px y altura de 70px.

Esta área de "Dib" contendría el borde sólido de un borde negro de cinco píxeles a su alrededor. Este borde definiría el límite del área principal "Div". Luego, utilizamos la identificación principal de la etiqueta divir principal para aplicar el CSS en las etiquetas "Div" del niño. Hemos establecido el ancho en 100 píxeles y la altura a 70 píxeles para las cinco etiquetas de elementos "div" internas, que se encuentran dentro de la sección "div" principal de la etiqueta HTML. Estas alturas y anchos para elementos DIV internos y externos se especifican para que se ajusten igualmente a las cinco etiquetas DIV dentro de la etiqueta externa. Después de eso, utilizamos las cinco ID de etiqueta DIV por separado en cinco líneas para diseñar todas las cinco secciones "Div" en consecuencia y de manera diferente. Aquí viene la propiedad "Orden" del estilo CSS para ordenar las cinco etiquetas DIV de acuerdo con los números. El "div" marrón se mostrará en el 3^rd, Azul en el 5^th, verde en el 2^{Dakota del Norte}, Púrpura en el 1^calle, y naranja en el 4^th. El estilo y la etiqueta de cabeza se cerraron aquí.

Comencemos a explicar la etiqueta básica de "cuerpo" utilizada para definir y representar los elementos básicos en la página web de nuestro navegador. Dentro de esta etiqueta, hemos utilizado la etiqueta principal de taller uno, la etiqueta principal "div" y las cinco etiquetas "div" de los cinco niños enumeradas una tras otra. La etiqueta principal "Div" se ha especificado con la ID, "principal", para diseñarla dentro de la etiqueta de la cabeza y se puede diferenciar fácilmente. Las cinco etiquetas interiores "div" se han especificado con algunos estilo y sus identificaciones separadas, yo.mi., marrón, azul, verde, morado y naranja.

Estas ID se utilizarían para diseñar estas etiquetas "Div" por separado en la etiqueta de estilo. Hemos estado diseñando las cinco etiquetas utilizando el elemento "estilo" dentro de la apertura de las cinco etiquetas DIV utilizando el método de estilo CSS en línea. La propiedad de color de fondo se ha utilizado para especificar los colores para las cinco etiquetas Div por separado, yo.mi., marrón, azul, verde, morado y naranja. Estos cinco colores se llenarían en las cajas creadas por los elementos "Div" en la página web y se veían bien en la pantalla. La etiqueta principal "div" y la etiqueta principal "cuerpo" se han cerrado aquí. Además, nuestro cierre principal de la etiqueta "HTML" se utilizaría aquí para finalizar el código HTML y hacer que se ejecute sin problemas.

Primero, guardemos este código con Ctrl+S. Luego, toque el menú "Ejecutar" desde la barra de tareas de su herramienta de código de estudio Visual Studio. Toque la opción Mostrada "Ejecutar sin depuración" y seleccione el navegador para continuar. Usaremos el navegador Google Chrome para ejecutarlo.

La pestaña de salida del navegador Chrome muestra la siguiente imagen de cinco partes DIV dentro de un "div" principal del borde negro sólido. La secuencia de las cajas "Div" infantiles es la misma que hemos descrito en la explicación de un código, i.mi., morado 1^calle, Verde 2^{Dakota del Norte}, Marrón 3^rd, naranja 4^th, y azul 5^th. Aunque hemos definido la secuencia aleatoria de elementos "div" en el estilo CSS, no afecta la salida y se muestra como se define en el estilo.

La ilustración del código anterior y su salida de página web nos muestran el uso de números aleatorios dentro de la propiedad "Orden" para establecer las etiquetas "DIV" en posiciones aleatorias. Esos valores para la propiedad de "orden" fueron enteros positivos simples. Por lo tanto, no tenemos problemas para usar esos. ¿Qué pasa si un usuario intenta establecer la propiedad de pedido con los valores negativos en la etiqueta de estilo?? Intentemos esto para ver los resultados. Entonces, hemos estado actualizando nuestro código para hacerlo. Dentro de la etiqueta de estilo, hemos estado actualizando el valor de la propiedad de "pedido" para cada etiqueta interna "div". Para Brown, son 3. Para el azul, es -1. Para el verde, son 2. Para el púrpura, es -2. Por último, para naranja, es 0. Estos valores definen el índice de un elemento principal "div". Guardemos este código para ver.

Ejecutando este código actualizado en el navegador Chrome, tenemos el resultado de salida actualizado que se muestra a continuación. Como hemos definido 0 para la propiedad de la orden del Div "Naranja", se ha mostrado en el medio del Div principal. Las etiquetas "div" verdes y marrones se muestran en el lado derecho después del naranja "Div". El uso de -2 para Purple Div y -1 para la etiqueta azul ha mostrado las etiquetas "div" internas de acuerdo con la secuencia de enteros negativos.

Conclusión

Este artículo contiene una explicación simple y breve del uso de la propiedad CSS "orden" en el código HTML. Para esto, hemos explicado un breve ejemplo de código HTML. Este ejemplo contenía el uso de elementos "div" para elaborar adecuadamente el concepto de propiedad CSS de "orden". Hemos discutido el análisis detallado del uso de los valores enteros positivos para la propiedad de pedido y lo comparamos con el uso de valores enteros negativos para la misma propiedad.