VIDEO
HIGHLIGHT
Log InSign up
TECNOLOGÍAS WEB 3_CSS
SummaryTranscriptChat

TECNOLOGÍAS WEB 3_CSS

Introducción al CSS y su Importancia

Conceptos Básicos de CSS

  • El CSS, o Hojas de Estilo en Cascada, define el estilo y diseño visual de una página web, complementando la estructura proporcionada por HTML.
  • Permite reutilizar estilos y simplificar el trabajo al cambiar solo la hoja de estilo para modificar completamente la apariencia de un sitio web.

Métodos de Integración del CSS

  • Existen tres maneras principales de integrar CSS en HTML:
  1. Usar el atributo style directamente en las etiquetas HTML.
  1. Incluir una etiqueta <style> dentro del documento HTML.
  1. Referenciar un archivo externo con la hoja de estilo.

Uso del Atributo Style y Etiquetas Style

Aplicación Directa del Estilo

  • Al usar el atributo style, se puede aplicar un estilo específico a una única etiqueta, como cambiar el color a azul para un encabezado <h1>.

Definición Interna vs. Externa

  • La segunda opción permite definir estilos dentro del mismo documento usando etiquetas <style>, lo que mantiene todo junto pero no es tan limpio como usar archivos externos.

Integración de Archivos Externos

Referencia a Hojas de Estilo Externas

  • Para utilizar un archivo externo, se debe incluir una línea <link> en el HTML que indique dónde se encuentra la hoja de estilo, permitiendo así mantener los estilos separados del contenido.

Sintaxis y Estructura del CSS

Selectores y Declaraciones

  • Un selector indica a qué elemento se aplicará el estilo; las declaraciones están encerradas entre llaves `` e incluyen propiedades y valores separados por punto y coma.

Propiedades Comunes

  • Ejemplos comunes incluyen color (para definir color), font-size (para tamaño de fuente), donde cada propiedad puede tener múltiples valores asociados.

Tamaños y Unidades en CSS

Diferentes Formas de Medir Tamaño

  • Se pueden utilizar diferentes unidades para definir tamaños:
  • Píxeles: unidad estándar.
  • Rem: relativo al tamaño base definido por el navegador.
  • Em: relativo al tamaño del elemento padre.

Relatividad en Tamaños

  • Los tamaños definidos con em son relativos al tamaño del texto padre, lo que permite flexibilidad en diseños responsivos.

Definición y Uso de Colores en CSS

Introducción a los Colores en CSS

  • Se discute el valor relativo del color en relación con otros atributos, como el color rojo definido para un selector h1.
  • Existen 140 nombres de colores predefinidos en CSS que se pueden utilizar fácilmente.

Métodos de Definición de Colores

  • Los colores pueden definirse mediante códigos hexadecimales, donde los dos primeros caracteres representan el rojo, los siguientes el verde y los últimos el azul.
  • Se introduce la notación RGB (Rojo, Verde, Azul), utilizando números enteros para definir colores específicos; por ejemplo, rgb(128, 0, 128) representa un color púrpura.

Estructura HTML y Referencias CSS

  • Se menciona la estructura básica del HTML donde se incluye una referencia al archivo CSS dentro del <head>, permitiendo aplicar estilos a elementos seleccionados.
  • El selector utilizado es h1, que se modifica para establecer propiedades como la familia de fuentes y tamaño.

Selectores de Clase e ID

  • Los selectores de clase permiten reutilizar declaraciones CSS en múltiples elementos. Se utiliza un punto (.) antes del nombre de la clase para identificarlos.
  • Un selector ID (#) identifica un único elemento dentro del documento HTML. Por ejemplo, un artículo puede ser identificado como ID si no hay más elementos con ese mismo nombre.

Ejemplo Completo de Estilos

  • Se presenta un ejemplo completo que incluye diferentes elementos HTML como clases y IDs.
  • En el archivo CSS se definen propiedades específicas como color, ancho y bordes para distintos elementos visuales en la página web.

Modelo de Caja en HTML y CSS

Introducción al Modelo de Caja

  • Todos los elementos de HTML tienen características de bloque que son importantes para el estilo. Se utiliza el modelo de caja para entender cómo se sitúan los elementos.

Estructura del Modelo de Caja

  • El contenido se encuentra en el centro, rodeado por un borde que puede ser modificado. Más allá del borde, hay un margen que separa este elemento de otros.

Propiedades del Borde y Margen

  • Se pueden definir propiedades como el tamaño del borde (ejemplo: 15 píxeles sólido y verde) y márgenes (ejemplo: 20 píxeles). Esto permite personalizar la apariencia visual.

Posicionamiento con Floats

  • La propiedad float es útil para posicionar elementos, especialmente imágenes. Puede tener valores como izquierda, derecha o ninguno.

Ejemplos Prácticos

  • En un ejemplo práctico, las imágenes en la etiqueta <img> flotan a la izquierda. Sin embargo, si se aplica CSS diferente, pueden aparecer en otras posiciones.

CSS Zen Garden: Ejemplos Visuales

Importancia del Diseño CSS

  • CSS Zen Garden muestra cómo cambiar el diseño puede transformar completamente una página web. Permite descargar ejemplos separados de HTML y CSS.

Variaciones en Diseño

  • Al aplicar diferentes estilos CSS a la misma página web, se pueden observar cambios significativos en la disposición y estética general.

Conclusiones sobre Herramientas Web

  • Comprender HTML y CSS es fundamental para desarrollar proyectos web. Tener conocimientos básicos permite utilizar herramientas más avanzadas eficazmente.