Ancho de columna CSS
Ejemplo 01: Uso de la propiedad de ancho de la columna CSS con la función automática en un elemento DIV en un archivo HTML
En este ejemplo, utilizaremos la técnica CSS de etiqueta de estilo para agregar el ancho de la columna a un elemento Div utilizando la función automática. En este ejemplo, usaremos un párrafo ficticio dentro del div.
Comenzaremos con el encabezado del archivo en este script, donde agregaremos una etiqueta de estilo para definir las propiedades de estilo para los diferentes elementos del archivo HTML. En esta clase de estilo, definiremos la propiedad de ancho de columna con la función automática que representa la vista predeterminada de un DIV en nuestra página web. Comenzaremos la etiqueta del cuerpo una vez que terminemos el estilo y la etiqueta de la cabeza. Usando el elemento H2, agregaremos una página que se dirige a la etiqueta del cuerpo. Luego, llamaremos a la etiqueta Div, que heredará automáticamente la clase de estilo, ya que se ha hecho con un nombre general para todos los elementos Div. Después de esto, cerraremos las etiquetas para Div y Body y guardaremos el archivo para ver más tarde en nuestro navegador.
Como podemos ver en la salida anterior, el elemento DIV está presente con el ancho de columna predeterminado como definimos en la clase de estilo para el elemento DIV.
Ejemplo 02: Uso de la propiedad de ancho de la columna CSS con valor de formato de píxel para un elemento DIV en un archivo HTML
Para agregar el ancho de la columna a un elemento Div con un valor de píxel, utilizaremos la técnica de etiqueta de estilo CSS. Este valor divide la columna en las secciones basadas en el valor dadas. En este ejemplo, usaremos un párrafo ficticio que estará contenido dentro del div.
En este script, comenzaremos con el encabezado del archivo, donde agregaremos una etiqueta de estilo para proporcionar configuraciones estilísticas para las diversas partes del archivo HTML. Solo aplicaremos una clase de estilo al elemento div en este script. En esta clase de estilo, definiremos la propiedad de ancho de columna con un valor de píxel que dividirá el DIV en nuestro sitio web en función de su longitud. Comenzaremos la etiqueta del cuerpo una vez que terminemos el estilo y la etiqueta de la cabeza. Luego llamaremos a la etiqueta Div, que heredará instantáneamente la clase de estilo porque se le dio un nombre genérico para todos los elementos Div. Después de eso, cerraremos las etiquetas Div y Body y terminaremos el archivo.
Como podemos ver en el fragmento anterior, el elemento div se divide en varias porciones basadas en el valor de píxel que especificamos en la clase de estilo del elemento Div.
Ejemplo 03: Uso de la propiedad de ancho de la columna CSS con la función automática en un elemento DIV en un archivo HTML
La técnica CSS de etiqueta de estilo se utilizará en este ejemplo para agregar el ancho de la columna a un elemento Div con la función inicial. Este valor devuelve el ancho de la columna a su valor predeterminado. En este ejemplo, utilizaremos un párrafo falso encerrado dentro del div.
En este script, comenzaremos con el encabezado del archivo y agregaremos una etiqueta de estilo para ofrecer opciones de estilo para los diversos componentes del archivo HTML. En este script, solo aplicaremos una clase de estilo al elemento div. En esta clase de estilo, definiremos la propiedad de ancho de la columna con una función inicial que establecerá el ancho de la columna en los valores predeterminados. Después de terminar el estilo y la etiqueta de la cabeza, comenzaremos en la etiqueta del cuerpo. Luego se llamará a la etiqueta Div, e inmediatamente heredará la clase de estilo porque se le dio un nombre genérico para todos los componentes Div.
El elemento DIV está presente en la salida anterior, con el ancho de columna predeterminado determinado en la clase de estilo para el elemento DIV por la función inicial.
Ejemplo 04: Uso de la propiedad de ancho de la columna CSS con valor de formato de píxel para un elemento div en un archivo HTML
En este ejemplo, el enfoque de etiqueta de estilo CSS se utilizará para agregar ancho de columna a un elemento divir con un valor unitario "em". Este valor divide la columna en las partes basadas en el valor especificadas.
Comenzaremos con el encabezado del archivo y agregaremos una etiqueta de estilo para proporcionar opciones de estilo para los diversos componentes del archivo HTML en este script. Simplemente aplicaremos una clase de estilo al elemento div en este script. En esta clase de estilo, especificaremos la propiedad de ancho de la columna con un valor "em", que es una unidad CSS que se puede usar en lugar de píxeles. Usando el elemento H2, agregaremos un encabezado de página a la etiqueta del cuerpo. Después de eso, insertaremos el párrafo dentro de las etiquetas, cerraremos las etiquetas DIV y el cuerpo, y guardaremos el archivo para ver más adelante en nuestro navegador.
Como se ve en el ejemplo anterior, el elemento div se divide en diferentes partes de acuerdo con el valor "em" especificado en la clase de estilo del elemento div.
Ejemplo 05: Uso de la propiedad de ancho de la columna CSS con la función inherente para un elemento DIV en un archivo HTML
En este ejemplo, la técnica CSS de etiqueta de estilo se utilizará para aumentar el ancho de la columna a un elemento Div utilizando la función de herencia. Este método devuelve el ancho de la columna al valor de su atributo principal anterior. Usaremos un texto ficticio en nuestro div en este ejemplo.
En este script, aplicaremos múltiples clases de estilo a los componentes DIV. Comenzaremos creando las clases de estilo en el encabezado del archivo. En la primera clase de estilo, le daremos a la propiedad de ancho de columna la función automática, que establecerá el ancho según la configuración predeterminada. La propiedad de ancho de la columna estará presente en la segunda clase, pero con el método de herencia, permitiendo que el ancho de la columna se establezca en el mismo valor que la propiedad principal más cercana. Luego cerraremos el estilo y las etiquetas de la cabeza e insertaremos dos elementos Div con contenido ficticio dentro de la etiqueta del cuerpo. El primer elemento div se creará con la clase de estilo DIV1, y el segundo elemento Div se creará con la clase de estilo Div2. Ambos componentes del divirán separados por un encabezado para designar el DIV apropiado.
En la salida, podemos ver que el segundo div ha heredado el primer div.'s de la columna debido a la función inherente definida con la propiedad de ancho de la columna.
Conclusión
En este artículo, discutimos la propiedad de ancho de columna que CSS proporciona en un archivo HTML. La propiedad de ancho de la columna se utiliza para definir la longitud de la columna de un Div. Esta propiedad se puede usar con diferentes valores y funciones, ya que es una propiedad flexible. Discutimos e implementamos las propiedades de ancho de columna con varias funciones como las funciones automáticas, heredadas y iniciales y también utilizamos valores de píxel y "em" para definir la propiedad de ancho de columna en un archivo HTML.