Sesion Laboratorio 4 Practica 1 3 - jesusgpa/2023-2024-CSAAI GitHub Wiki
- Tiempo: 2h
- Fecha: Jueves, 15 de Febrero de 2024
-
Objetivos de la sesión:
- Practicar con CSS y Visual Code
- Manejar el editor de estilos del navegador
- Aplicar estilos al CV
- Introducción
- Hola mundo con estilo desde VSCode
- Modificando el fichero css y viendo los cambios
- Usando el editor de estilos del navegador
- ¡A practicar!
- Resumen de tareas a realizar
- Conclusiones
- Autores
- Licencia
- Enlaces
Para dar estilo a nuestras páginas HTML tenemos que crear archivos CSS.
Utilizaremos el VScode para crearlos y realizar las previsualizaciones.
Al crear los archivos CSS tenemos disponible la lista de todas las propiedades, con autocompletado, lo que nos ayudará mucho.
Empezamos escribiendo el fichero HTML hola mundo, que ya conocemos.
Colocamos un encabezado H1 y un párrafo.
Crea la carpeta S3 dentro de la carpeta P1 de tu repositorio de prácticas.
Llama a este archivo test-01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test 01</title>
</head>
<body>
<h1>Encabezado H1</h1>
<p>Esto es un párrafo</p>
</body>
</html>Como no hemos definido estilo todavía, al previsualizarlo lo veremos en los colores por defecto.
En mi caso como tengo el tema oscuro se verá en letras blancas sobre fondo negro, pero en el navegador se en letras negras sobre fondo blanco
Vamos a crear el fichero test-01.css que contendrá el estilo.
Creamos un fichero nuevo y lo guardamos como test-01.css.
Aprovechamos para poner comentarios.
En CSS se ponen igual que en el lenguaje C, comenzando por /* y terminando con *\
Comenzaremos cambiando el color del fondo de la página. Para ello tenemos que asignar un valor a la propiedad background-color del cuerpo (body).
Esta es la regla:
body {
background-color: lightblue;
}Empezamos escribiendo body.
Antes de terminar nos aparece las sugerencias.
La primera es la etiqueta body.
Es lo que queremos.
Le damos al TAB y se nos autocompleta.
No añade nada más.
Al poner la primera llave ({) automáticamente nos aparecerá la llave de cierre y el cursor se situará entre ellas:
Pulsamos Enter.
El cursor pasa a la siguiente línea y aplica automáticamente un indentado.
Comenzamos a escribir la propiedad background-color, en cuanto hemos escrito las primeras letras nos aparecen las sugerencias:
Pulsamos TAB. Se coloca automáticamente el carácter : y nos aparecen la lista de posibles valores para esta propiedad
Vamos a poner el color lightblue.
Empezamos a escribirlo hasta que nos aparezca el color en la primera opción de las opciones
Pulsamos el TAB para que se autocomplete
Añadimos otra propiedad: color, para establecer el color de las letras del cuerpo a azul.
Repetimos la operación anterior, pero con el nuevo atributo y su valor.
En esta animación se muestra el proceso completo
El siguiente paso es ligar este fichero de estilo con el documento HTML.
Nos vamos al fichero HTML y dentro de la cabeza escribimos link
Seleccionamos la opción que pone link:css
y el cursor se coloca en el atributo href.
Escribimos el nombre del fichero de estilo: test-01.css, le damos al TAB y guardamos el fichero
Ahora, con el fichero html seleccionado en el editor, le damos a la opción de previsualización y veremos cómo nos aparece la página hola mundo con el fondo cambiado
¡Hemos aplicado nuestro primer estilo! 🙂
Comprueba que también te funciona correctamente en el navegador en tu ordenador:
Luego súbelo al repositorio remoto y visualízalo como página web.
Ahora lo podrás ver también desde el teléfono móvil.
Ahora activamos en el editor el fichero css.
Vamos a cambiar la propiedad de color del encabezado H1, para que en vez de negro, salga en blanco.
Añadimos una nueva regla:
h1 {
color: white;
}Guardamos el fichero (recuerda que se guarda muy fácilmente con el atajo Control-S).
La previsualización todavía NO se actualiza.
Vamos a la pestaña del fichero test-01.html y lo guardamos (o pulsamos Control-S).
Ahora ya sí que se actualiza.
En esta animación lo podemos ver:
Los navegadores integran herramientas para trabajar con ficheros HTML y para examinar y editar el estilo.
Vamos a comprobarlo.
Abrimos el fichero box-test7.html que contiene la última versión del ejemplo del modelo de cajas que usamos en la sesión de teoría.
Se reproducen aquí el fichero html y el css
- Fichero box-test7.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modelo de caja del párrafo</title>
<link rel="stylesheet" type="text/css" href="box-test7.css">
</head>
<body>
<p>Estudiando el modelo de caja de un párrafo</p>
<p>Este es otro párrafo, que se coloca debajo del anterior</p>
</body>
</html>- Fichero: box-test7.css:
/* Propiedades de la caja del cuerpo */
body {
padding: 5px; /* relleno */
margin: 10px; /* Margen */
border: solid;
border-color: red;
}
/* Propiedades de la caja del párrafo */
p {
margin: 10px;
padding: 10px; /* Relleno */
border:solid;
border-color: blue;
}Al abrirlo en el navegador queda así:
Entramos en el menú Web developer y pinchamos en Inspector
Nos aparece un panel en la parte inferior (En realidad este panel se puede poner en cualquier posición.
Se puede configurar pinchando en el menú de los tres puntos)
En la parte izquierda está el documento HTML.
Por defecto estará señalado el cuerpo (body).
En el centro está la regla que se está aplicando para el estilo del cuerpo y en la parte derecha vemos el modelo de caja del cuerpo.
Aquí están los tamaños de las diferentes partes: el cuerpo tiene un margen de 10px, un borde de 3px y un relleno de 5px
Si pasamos el ratón por las zonas del modelo de caja, las veremos resaltadas en la página web
En el panel central vemos la regla de estilo que se está aplicando al cuerpo.
Al entrar con el ratón aparecen unas casillas de verificación que nos permite activar/desactivar una determinada propiedad.
También podemos cambiar sus valores
Desactivamos el borde del cuerpo, pinchando en la casilla de verificación correspondiente
También podemos editar el código css desde el navegador.
Para ello pinchamos en la pestaña Style Editor.
Se nos abre un editor donde vemos el css.
La línea 6 está comentada: es porque hemos deshabilitado el borde del cuerpo anteriormente
Modificamos el color del borde los párrafos.
Lo ponemos por ejemplo en verde, cambiando la propiedad border-color directamente en el css.
Vemos cómo cambia en el navegador
Ahora lo grabamos, pinchando en Save
Comprobamos que también se nos actualiza en el VSCode. Pulsamos Control-S en el html para actualizar la previsualización
De esta forma podemos trabajar en paralelo con el VSCode y el navegador
Para practicar con CSS haz desde cero los ejemplos mostrados en la sesión 3 de teoría. Guárdalos en ficheros independientes y súbelos al directorio P1/S3 de tus prácticas.
Comprueba su funcionamiento con la previsualización de VSCode y súbelos al repositorio
Comprueba cómo se ven tanto desde el ordenador como desde el móvil
Continúa con la creación de tu CV.
Ya tienes todos los ingredientes.
- Haz los ejemplos de la sesión 3 de teoría en P1/S3
- Súbelos al repo y compruébalos desde el ordenador y el teléfono móvil
- Continua trabajando en tu práctica del CV
Ya sabemos dar propiedades a los diferentes elementos usando CSS.
Hay muchísimas propiedades.
Para aprenderlas deberás practicar.
NOTA: Al principio CSS puede ser muy frustrante porque quieres poner los elementos de una determinada manera en la página y no lo consigues.
O se te rompe todo.
Paciencia.
Si no se pone como tú quieres, no pasa nada.
Ponlo de otra forma.
Y poco a poco irás aprendiendo.
Saber manejar bien el estilo da para una asignatura completa, y en CSAAI tenemos que seguir viendo otras cosas.
Jesús Parrado Alameda (jesusgpa)
- Creado a partir del contenido generado por el profesor Jose María Cañas
- Creado a partir del contenido generado por el profesor Juan Gonzalez-Gomez
