Unidad 2 A
Unidad 2 A
Unidad 2 A
1. Introducción a CSS
o Definición: CSS (Cascading Style Sheets) se utiliza para agregar diseño y estilo
a páginas web.
Introducción a CSS
3. Diseño responsive: Hace que los sitios sean adaptables a diferentes tamaños de
pantalla, mejorando la experiencia del usuario en dispositivos móviles y de
escritorio.
Este enfoque permite a los desarrolladores trabajar de forma más eficiente y centrarse en crear
diseños más atractivos y accesibles.
2. Estructura de CSS
o Reglas básicas:
o Tipos de declaraciones:
Reglas básicas
Selectores: Los selectores en CSS se utilizan para identificar los elementos HTML a los
que se aplicarán los estilos. Pueden ser de varios tipos, como selectores de tipo (por
ejemplo, p para párrafos), selectores de clase (por ejemplo, .miClase), selectores de ID (por
ejemplo, #miID), y más. Los selectores permiten aplicar estilos específicos a elementos
específicos en una página web
Tipos de declaraciones
o Colores y fondos:
color, background-color.
o Bordes y márgenes:
Texto
font-family: Esta propiedad se utiliza para especificar la fuente del texto. Puedes definir
una lista de fuentes, de modo que, si la primera no está disponible, el navegador intentará usar la
siguiente. Por ejemplo, font-family: Arial, sans-serif;
font-size: Controla el tamaño del texto. Puedes usar unidades como píxeles (px), ems
(em), porcentajes (%), entre otras. Por ejemplo, font-size: 16px; establece el tamaño del texto a
16 píxeles
text-align: Define la alineación del texto dentro de su contenedor. Los valores comunes
incluyen left, right, center y justify. Por ejemplo, text-align: center; centra el texto en su
contenedor
Colores y fondos
color: Esta propiedad establece el color del texto. Puedes usar nombres de colores (red),
valores hexadecimales (#ff0000), RGB (rgb(255, 0, 0)), entre otros. Por ejemplo, color:
blue; cambia el color del texto a azul
Bordes y márgenes
border: Esta propiedad es una abreviatura para definir el ancho, estilo y color del borde
de un elemento. Por ejemplo, border: 1px solid black; crea un borde negro sólido de 1 píxel de
ancho