Creación de Cajas con CSS en HTML

Formas de aplicar estilos CSS

• CSS permite aplicar estilos a párrafos o etiquetas de varias manera: en la propia línea de HTML (aplicación de estilos en línea), en la parte inicial del documento HTML (aplicación de estilos interna) o en un archivo de extensión .css independiente del archivo HTML (aplicación de estilos externa)

Estilos en línea

• Se utiliza el atributo style para aplicar estilos en línea a etiquetas HTML
• Sintaxis para aplicar un estilo en línea: ``
• Ejemplo: <p style="color:#0000FF;">

Propiedades de fondo

• La propiedad background-repeat controla la forma en que se repite la imagen de fondo
• Valores que puede tomar la propiedad background-repeat:
  • repeat: repite la imagen en sentido vertical y horizontal
  • repeat-x: repite la imagen solo en horizontal
  • repeat-y: repite la imagen solo en vertical
  • no-repeat: muestra una sola vez la imagen y no se repite en ninguna dirección
• La propiedad background-position controla la posición de la imagen de fondo

Creación de cajas con CSS

• Una caja es un elemento HTML con contenido que puede tener propiedades como color de fondo, relleno y bordes
• Para crear una caja, se utiliza la etiqueta div con el atributo id o class
• Una caja puede contener varios elementos como párrafos, imágenes, enlaces, etc.
• Propiedades CSS para definir una caja:
  • border: define el borde
  • padding: define el relleno
  • margin: define los márgenes
  • background-image y background-color: definen la imagen y el color de fondo

Tamaño y posición de cajas

• Se pueden definir el tamaño de una caja utilizando las propiedades width y height
• Se pueden posicionar los elementos utilizando las propiedades top, bottom, left, right
• Tipos de posicionamiento:
  • Posicionamiento relativo: el punto de referencia es la esquina superior izquierda del elemento contenedor
  • Posicionamiento absoluto: el punto de referencia es la ventana del navegador
• La propiedad position admite los siguientes valores:
  • static: valor por defecto, muestra los elementos tal y como se ven si no se aplica la propiedad
  • Otros valores de la propiedad position pueden ser utilizados para desplazar el elemento

Aprende cómo crear una caja con múltiples etiquetas HTML dentro de ella utilizando CSS. Desde agregar color de fondo, relleno y bordes a varios elementos como párrafos, imágenes y listas, hasta englobarlos con un borde común. Descubre cómo estructurar y diseñar cajas creativas en tu página web.