Sección 4.1: Introducción a CSS
CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo utilizado para controlar la presentación y el diseño de páginas web HTML. Permite definir el aspecto visual de los elementos HTML, como colores, fuentes, márgenes, tamaños y más. Algunos conceptos clave de CSS incluyen:
- Reglas de Estilo: Las reglas de estilo en CSS consisten en un selector (el elemento HTML al que se aplicará el estilo) y un bloque de declaración que contiene propiedades y valores.
- Propiedades: Las propiedades definen qué aspecto se cambiará (por ejemplo, «color» para el color del texto) y los valores especifican cómo se cambiará (por ejemplo, «blue» para texto azul).
- Selección de Elementos: Puedes seleccionar elementos HTML por etiqueta, clase, identificador u otras características para aplicar estilos.
Sección 4.2: Novedades de CSS3
CSS3 es la última versión de CSS y trae consigo muchas características nuevas y emocionantes. Algunas de las novedades más destacadas incluyen:
- Selectores Avanzados: CSS3 introduce nuevos selectores que permiten una mayor precisión en la selección de elementos, como el selector
:nth-childpara seleccionar elementos específicos de una lista. - Sombras y Bordes: Puedes aplicar sombras y bordes de manera más avanzada con las propiedades
box-shadowyborder-radius. - Animaciones y Transiciones: CSS3 permite crear animaciones y transiciones suaves sin necesidad de JavaScript.
- Fuentes Web: Con CSS3, puedes utilizar fuentes personalizadas cargadas desde la web con
@font-face.
Sección 4.3: Ejemplos y Ejercicios Resueltos
Ejemplo de Regla de Estilo Básica:
/* Estilo para todos los párrafos */
p {
color: blue;
font-size: 16px;
margin-top: 10px;
}
Ejercicio 1: Cambiar el Color de Texto
Crea un archivo CSS llamado «estilos.css» y cambia el color del texto de todos los párrafos en un archivo HTML llamado «index.html» a rojo.
/* estilos.css */
p {
color: red;
}
Ejercicio 2: Estilo para Títulos
Agrega estilos a los títulos de nivel 1, nivel 2 y nivel 3 en tu página web para que tengan diferentes colores y tamaños de fuente.
/* estilos.css */
h1 {
color: blue;
font-size: 24px;
}
h2 {
color: green;
font-size: 20px;
}
h3 {
color: red;
font-size: 16px;
}
Ejercicio 3: Crear un Botón de Estilo Personalizado
Crea un botón en tu página web utilizando un elemento <button> y aplícale un estilo personalizado en tu archivo CSS para cambiar el fondo, el color del texto y el tamaño.
<!-- index.html -->
<button class="boton-estilo">Haz Clic</button>
/* estilos.css */
.boton-estilo {
background-color: #4CAF50;
color: white;
font-size: 18px;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.boton-estilo:hover {
background-color: #45a049;
}
Estos ejemplos y ejercicios te introducirán a los conceptos básicos de CSS y te permitirán aplicar estilos a elementos HTML en tu página web. A medida que avanzas, puedes explorar las características avanzadas de CSS3 para lograr diseños más complejos y atractivos.
Selección de Elementos HTML con CSS
Sección 4.4: Selección de Elementos por Tipo, Clase e Identificador
La selección de elementos HTML con CSS es fundamental para aplicar estilos a tu página web. Aquí te explicaré cómo seleccionar elementos por tipo, clase e identificador:
- Selección por Tipo: Puedes seleccionar todos los elementos de un tipo específico, como párrafos (
<p>), encabezados (<h1>,<h2>, etc.), o listas (<ul>,<ol>,<li>).
/* Selecciona todos los párrafos y cambia su color a azul */
p {
color: blue;
}
Selección por Clase: Agregar clases a elementos HTML te permite seleccionar grupos específicos de elementos. Para seleccionar por clase, utiliza un punto antes del nombre de la clase.
/* Selecciona elementos con la clase "destacado" y cambia su color de fondo a amarillo */
.destacado {
background-color: yellow;
}
Selección por Identificador: Los identificadores son únicos para cada elemento en una página. Para seleccionar por identificador, utiliza un símbolo de almohadilla (#) antes del nombre del identificador.
/* Selecciona el elemento con el identificador "encabezado" y cambia su tamaño de fuente */
#encabezado {
font-size: 24px;
}
Sección 4.5: Combinación de Selectores
Puedes combinar selectores para apuntar a elementos de manera más específica. Esto es útil cuando deseas seleccionar elementos anidados o elementos que cumplen múltiples condiciones. Algunos ejemplos incluyen:
- Selección de Elementos Anidados: Puedes seleccionar elementos dentro de otros elementos anidados utilizando un espacio entre los selectores.
/* Selecciona todos los párrafos dentro de un elemento con la clase "contenedor" y cambia su margen superior */
.contenedor p {
margin-top: 10px;
}
Selección de Elementos con Múltiples Clases: Puedes seleccionar elementos que tengan múltiples clases utilizando un selector sin espacio entre las clases.
/* Selecciona elementos que tienen ambas clases "importante" y "destacado" y cambia su color de texto a rojo */
.importante.destacado {
color: red;
}
Sección 4.6: Ejemplos y Ejercicios Resueltos
Ejemplo de Combinación de Selectores:
/* Selecciona todos los párrafos dentro de un elemento con la clase "contenido" y cambia su margen superior */
.contenido p {
margin-top: 10px;
}
Ejercicio 1: Estilo para Títulos de un Blog
Crea un archivo CSS llamado «estilos.css» y selecciona todos los títulos de nivel 2 (<h2>) dentro de un artículo (<article>) para aplicarles un color y tamaño de fuente específicos.
/* estilos.css */
article h2 {
color: #3366CC;
font-size: 24px;
}
Ejercicio 2: Estilo para Botones de Compra
Agrega estilos a todos los botones con la clase «comprar» (<button class="comprar">) para cambiar su color de fondo y su color de texto.
/* estilos.css */
.comprar {
background-color: #4CAF50;
color: white;
}
Ejercicio 3: Estilo para un Elemento Específico
Selecciona el elemento con el identificador «encabezado» (<div id="encabezado">) y cambia su tamaño de fuente y color de fondo.
/* estilos.css */#encabezado { font-size: 30px; background-color: #FFD700;}Estos ejemplos y ejercicios te permitirán comprender cómo seleccionar elementos HTML con CSS y aplicar estilos de manera precisa. La habilidad para seleccionar y estilizar elementos es esencial en el diseño de páginas web.
Sección 4.7: Diseño de Páginas Web Responsivas
El diseño de páginas web responsivas es esencial en la creación de sitios que se adapten a diferentes dispositivos y tamaños de pantalla. Aquí hay algunos conceptos clave y técnicas:
- Media Queries: Las media queries son reglas CSS que permiten aplicar estilos específicos basados en las características del dispositivo, como el ancho de la pantalla. Esto permite adaptar el diseño y la disposición de los elementos.
/* Ejemplo de una media query que aplica estilos cuando la pantalla tiene un ancho máximo de 600px */@media (max-width: 600px) { /* Estilos para pantallas pequeñas */}Diseño Fluidos: Utiliza porcentajes en lugar de unidades fijas (como píxeles) para definir anchos y altos, lo que permite que los elementos se escalen automáticamente según el tamaño de la pantalla.
/* Utilización de porcentajes para un diseño fluido */
.container {
width: 80%;
}
Imágenes Adaptativas: Utiliza la propiedad max-width: 100%; en imágenes para que se redimensionen de manera automática y no se desborden en pantallas más pequeñas.
/* Imágenes adaptativas */
img {
max-width: 100%;
height: auto;
}
Sección 4.8: Aplicación de Estilos a una Tienda en Línea
El diseño de una tienda en línea es un ejemplo común de cómo aplicar estilos a un sitio web. Aquí hay ejemplos de cómo aplicar estilos a diferentes partes de una tienda en línea:
- Estilo para Encabezados y Logotipos:
/* Estilo para el encabezado y logotipo */
header {
background-color: #333;
color: #fff;
padding: 10px;
}
#logo {
font-size: 24px;
font-weight: bold;
}
Estilo para Categorías de Productos:
/* Estilo para las categorías de productos */
.categoria {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
text-align: center;
background-color: #f9f9f9;
}
.categoria a {
text-decoration: none;
color: #333;
}
Estilo para Productos Individuales:
/* Estilo para productos individuales */
.producto {
border: 1px solid #ddd;
padding: 10px;
margin: 10px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.producto img {
max-width: 100%;
height: auto;
}
Sección 4.9: Ejemplos y Ejercicios Resueltos
Ejercicio 1: Creación de una Tienda en Línea Responsiva
Crea una página web que simule una tienda en línea y aplica estilos responsivos para que se vea bien en pantallas grandes y pequeñas. Utiliza media queries y un diseño fluido.
/* Establece un diseño de 2 columnas en pantallas grandes */
@media (min-width: 768px) {
.producto {
width: 48%;
}
}
/* Cambia a una sola columna en pantallas pequeñas */
@media (max-width: 767px) {
.producto {
width: 100%;
}
}
Ejercicio 2: Estilo para el Carrito de Compras
Agrega estilos al carrito de compras de tu tienda en línea, aplicando colores de fondo, bordes y márgenes para que se destaque.
/* Estilo para el carrito de compras */
#carrito {
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
Ejercicio 3: Estilo para Botones de Compra
Aplica un estilo a los botones de compra para que tengan un color de fondo atractivo y un color de texto blanco.
/* Estilo para los botones de compra */
.boton-comprar {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
Estos ejemplos y ejercicios te ayudarán a aplicar estilos responsivos a una tienda en línea y a comprender cómo el diseño web adaptativo mejora la experiencia del usuario en dispositivos de diferentes tamaños. El diseño responsivo es esencial para garantizar que tu sitio web sea accesible y atractivo para una amplia audiencia.
