Sesion 3 CSS - jesusgpa/2023-2024-CSAAI GitHub Wiki
- Tiempo: 2h (50 + 50min)
- Fecha: Martes 13 de Febrero de 2024
-
Objetivos de la sesión:
- Aprender los conceptos básicos de estilo, usando el estándar CSS, para empezar a practicarlo en el laboratorio
- Introducción
- Regla de diseño: separar el contenido del estilo
- Estilo y propiedades
- Hoja de estilo
- Reglas de aplicación del estilo
- Modelo de caja
- Diseño de la página (layout)
- Autor
- Licencia
- Enlaces
- MDN CSS
- MDN Sintaxis CSS
- W3C Tutorial CSS
- CSS Tricks
- CSS Reset
- CSS Grid Layout
- Bootstrap Grid System
- Pixel
- Color Hex Color Codes
- Color Hex W3C
- Adobe Color
- Google Fonts
- Font Awesome
- Helvetica
- Hero Patterns
- Imagify
- Canva
- Hack Design
- Validar la calidad del código HTML
- Validar la calidad del código CSS
Con HTML definimos la estructura de nuestros documentos, para almacenar el contenido de forma estructurada.
A partir de este código el navegador crea una estructura de datos en forma de árbol, lo que permite que nuestros programas puedan acceder al contenido y cambiar las propiedades de sus contenedores.
Con CSS definimos el estilo con el que queremos que se muestre la información al usuario: colores, tipo de letra, tamaños, animaciones, colocación de los elementos, etc.
El contenido y el estilo son dos cosas diferentes, aunque están integrados en el resultado final, a la hora de trabajar es una buena práctica mantenerlos separados (excepciones).
Hacer esta separación tiene las siguientes ventajas:
Al separar el contenido de la presentación, se hace más sencillo realizar cambios en el diseño sin afectar la estructura del contenido.
Esto significa que puedes actualizar estilos sin tener que revisar todo el HTML, y viceversa.
La separación permite reutilizar los estilos en diferentes partes de un sitio web o aplicación, lo que reduce la duplicación de código y facilita la consistencia visual en todo el proyecto.
Mantener el HTML y el CSS separados ayuda a organizar el código de manera más clara y lógica.
Esto hace que sea más fácil de entender para otros desarrolladores que puedan trabajar en el proyecto en el futuro.
El estilo se define dando valores a las propiedades de los elementos.
Una propiedad es por ejemplo color.
Por ejemplo, para cambiar el color de la letra de un elemento hay que asignar un valor a la propiedad color.
Para cambiar su fondo, asignamos un valor a la propiedad background-color.
color: blue;
background-color: lightblue;Este es un listado de las propiedades que se suelen utilizar para dar formato con css:
- color: Cambia el color del texto.
- font-family: Especifica la fuente del texto.
- font-size: Define el tamaño del texto.
- font-weight: Controla el grosor del texto (normal, bold, etc.).
- text-align: Alinea el texto (izquierda, derecha, centrado).
- text-decoration: Aplica decoraciones al texto (subrayado, tachado, etc.).
- background-color: Establece el color de fondo de un elemento.
- background-image: Inserta una imagen de fondo.
- border: Define un borde alrededor de un elemento.
- border-radius: Da esquinas redondeadas a un elemento.
- padding: Espacio entre el borde del elemento y su contenido.
- margin: Espacio entre los bordes del elemento y otros elementos adyacentes.
- width: Ancho del elemento.
- height: Alto del elemento.
- display: Controla cómo se muestra el elemento (block, inline, none, etc.).
- position: Define el método de posicionamiento (static, relative, absolute, fixed).
- float: Permite alinear elementos a la izquierda o a la derecha del contenedor.
- z-index: Define el orden de apilamiento de elementos posicionados.
- opacity: Controla la opacidad del elemento.
- transition: Agrega efectos de transición suaves a las propiedades CSS cuando cambian.
¿Dónde asignamos estos valores del estilo?
Se puede hacer desde tres lugares diferentes:
- En las etiquetas HTML.
- En la cabecera HTML.
- Desde una hoja de estilo independiente.
También se puede aplicar CSS directamente a un elemento HTML utilizando el atributo style.
Por ejemplo:
<div style="color: blue;">Contenido</div>. Aunque esta práctica no es tan recomendada porque mezcla contenido y estilo, a veces es útil para estilos específicos en casos muy puntuales.
Es posible incluir CSS dentro del propio documento HTML utilizando la etiqueta <style> en la sección <head>.
Dentro de esta etiqueta, se pueden escribir las reglas de estilo directamente.
Esta es la forma más común de aplicar estilos CSS.
Se crea un archivo .css separado que contiene todas las reglas de estilo y luego se enlaza con el HTML utilizando la etiqueta <link> en la sección <head> del documento HTML.
Empezamos por el ejemplo Hola Mundo, que sólo define un encabezado h1 y un párrafo dentro del cuerpo.
Damos un color azul claro al fondo del cuerpo, color negro a las letras del encabezado y un color azul a las letras del párrafo.
Esto lo hacemos desde el atributo style de las etiquetas.
<!DOCTYPE html>
<html lang="en">
<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>Ejemplo 1</title>
</head>
<body>
<!-- Estilo añadido al cuerpo del documento -->
<body style="background-color: lightblue;">
<!-- Estilo añadido al encabezado -->
<h1 style="color:black">Encabezado H1</h1>
<!-- Estilo añadido a este párrafo -->
<p style="color:blue">Párrafo</p>
</body>
</html>El renderizado quedaría así:
La estructura la representamos con su estilo, para que sea más fácil entender algunos conceptos:
El color del fondo del cuerpo se ha establecido en azul claro, pero el color del fondo del resto de los elementos, h1 y p, NO se ha modificado.
Sin embargo también se ponen en azul porque lo heredan del cuerpo.
Las letras del cuerpo tienen un color por defecto, pero lo hemos cambiado a negro en la etiqueta H1 y azul para el párrafo.
Esta forma de asignar el estilo directamente desde las etiquetas NO SE DEBE USAR.
Se describe en este apartado para que se conozca la posibilidad, y porque a veces resulta útil para depurar, sin embargo va en contra la regla de diseño principal de la separación entre estructura y estilo: NO SE DEBEN MEZCLAR.
Otra manera de definir el estilo es usando la etiqueta style dentro de la cabeza del HTML.
En ella se establecen los valores de las propiedades usando los selectores, que veremos más adelante.
<!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>Ejemplo 2</title>
<!-- Definición del estilo -->
<style>
body {
background-color: lightblue;
}
h1 {
color:black;
}
p {
color:blue;
}
</style>
</head>
<body>
<h1>Encabezado H1</h1>
<p>Párrafo</p>
</body>
</html>El resultado es exactamente el mismo que en el ejemplo anterior.
Esta otra forma de asignar estilo, aunque es mejor que la anterior opción, TAMBIÉN SE DEBE EVITAR, por el mismo motivo: dentro del fichero HTML estamos mezclando estructura con estilo.
Esta es la forma correcta: utilizar una hoja de estilo externa.
De esta forma, la separación entre contenido y estilo es muy clara.
Se usa un fichero para cada cosa.
Las hojas de estilo tienen la extensión .css.
Para cargar la hoja de estilo se usa la etiqueta link desde la cabeza del documento HTML.
Se especifica el archivo mediante el atributo href.
En este caso se está usando el fichero 03-hello.css
<!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>Ejemplo 3</title>
<!--Hoja de estilo externa -->
<link rel="stylesheet" href="03-hello.css">
</head>
<body>
<h1>Encabezado H1</h1>
<p>Párrafo</p>
</body>
</html>La hoja de estilo es la siguiente (03-hello.css):
/* Ejemplo de hoja de estilo */
/* Estilo para el cuerpo del HTML */
body {
background-color: lightblue;
}
/* Estilo para las etiquetas de tipo h1 */
h1 {
color:black;
}
/* Estilo para los párrafos */
p {
color: blue;
}La hoja de estilo es un conjunto de reglas que indican cómo representar el contenido.
El estándar recibe el nombre de CSS que significa Hojas de estilo en cascada.
La sintaxis de las reglas es la siguiente:
Se colocan una a continuación de la siguiente.
El selector es el que permite seleccionar las etiquetas HTML a las que aplicar el estilo.
Para esas etiquetas se especifican las propiedades de estilo que se quieren modificar, y el valor que asignarles.
Al aplicar las reglas pueden surgir dos problemas:
- Que se apliquen diferentes reglas (contradictorias) a los mismos elementos.
Por ejemplo, que en una regla se diga que la letra de un párrafo es negra y en otra roja.
Esto se soluciona conociendo las prioridades: Unas reglas tiene más preferencia que otras.
- Que haya elementos sin reglas.
En ese caso heredan el estilo de otro ámbito.
En ambos caso es necesario conocer las reglas de aplicación del estilo, para saber qué se aplicará en cada momento.
Hay diferentes tipos de selectores.
Veremos algunos de ellos.
El que hemos estado usando hasta es el básico: selección por etiqueta.
Especificamos como selector la etiqueta HTML sobre la que queremos actuar.
Todo el contenido que esté bajo esas etiquetas se le aplicará el mismo estilo.
Como ejemplo usaremos este fichero 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>Ejemplo 4</title>
<!--Hoja de estilo externa -->
<link rel="stylesheet" href="04-sel-etiqueta.css">
</head>
<body>
<h1>Encabezado H1</h1>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<h2>Encabezado h2</h2>
</body>
</html>Y se define su estilo en esta hoja.
Se le da un color al fondo y letras del cuerpo, otro a los encabezados H1 y otro a los párrafos.
body {
background-color: lightblue;
color: black;
}
h1 {
background-color: yellow;
color: green;
}
p {
background-color: orange;
}El resultado es el siguiente:
Se aplica el estilo sólo a la etiqueta que tiene un identificador igual al del selector.
Se usa el símbolo # delante del identificador.
En este ejemplo se ha identificado un párrafo con la cadena "especial".
Mediante el selector #especial cambiamos el estilo de este párrafo únicamente.
Este es el fichero 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>Ejemplo 5</title>
<!--Hoja de estilo externa -->
<link rel="stylesheet" type="text/css" href="05-sel-id.css">
</head>
<body>
<h1>Encabezado H1</h1>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<p id="especial">Párrafo 3</p>
<h2>Encabezado h2</h2>
</body>
</html>Y esta es la hoja de estilo definida:
body {
background-color: lightblue;
color: black;
}
h1 {
background-color: yellow;
color: green;
}
p {
background-color: orange;
}
/* Estilo Solo para el párrafo "especial" */
#especial {
background-color: green;
color: white;
}Todos los párrafos tienen como color de su fondo naranja, salvo el párrafo "especial" que lo tiene verde.
Así es como se renderiza la página.
Todas las etiquetas que pertenezcan a la misma clase, definida con el atributo class, se seleccionan con un selector que comienza por un punto seguido del nombre de la clase.
En este fichero HTML hemos agrupado los encabezados h1 y h2 en la clase "migrupo".
<!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>Ejemplo 6</title>
<!--Hoja de estilo externa -->
<link rel="stylesheet" href="06-sel-class.css">
</head>
<body>
<h1 class="migrupo">Encabezado H1</h1>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<p>Párrafo 3</p>
<h2 class="migrupo">Encabezado h2</h2>
</body>
</html>Ahora aplicamos esta hoja de estilo.
Queremos que los encabezados de la clase "migrupo" tengan el mismo estilo: fondo azul y letras blancas.
body {
background-color: lightblue;
color:black;
}
.migrupo {
background-color: blue;
color: white
}
p {
background-color: orange;
}Este es el renderizado en el navegador.
Dado el siguiente documento 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>Ejercicio 1</title>
<link rel="stylesheet" href="Ej-01.css">
</head>
<body>
<h3 id="unico">Soy único</h3>
<h1 class="resaltado">Los amigos no mienten.</h1>
<h2 class="resaltado">¡D'Artagnan, mejor no te comas a ningún otro de nuestros amigos!</h2>
<p>No puedes deletrear América sin Erica.</p>
</body>
</html>Y dada esta hoja de estilo
#unico {
color: red;
}
.resaltado {
color: orange;
}
p {
color: blue;
}¿En qué colores aparecen los textos en la web?
El primer encabezado tiene el identificador "unico", cuyo estilo está definido por el selector #unico, por tanto sale en color rojo.
El segundo y tercer encabezados pertenecen al mismo grupo, definido por la clase resaltado.
Su estilo lo determina el selector de clase .resaltado.
Por tanto los encabezados h1 y h2 salen en color naranja.
Por último, el estilo del párrafo lo determina el selector de etiqueta p, que le asigna el color azul.
A la hora de aplicar el estilo, el navegador sigue las siguientes reglas de aplicación.
Es importante conocerlas.
Cuando se aplican valores contradictorios a la misma propiedad de un elemento, el último estilo definido es el que prevalece.
En este ejemplo se están aplicando los colores azul y verde a un mismo párrafo.
¿Cual prevalece?
<!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>Regla 1</title>
<link rel="stylesheet" href="R1.css">
</head>
<body>
<h1>Encabezado H1</h1>
<!-- Prueba de la Regla 1 -->
<!-- Que estilo gana? -->
<!-- R1: El último será el primero -->
<p style="color:blue; color:green">Párrafo</p>
</body>
</html>Aplicando la regla 1, será el color verde.
Siempre gana el último definido.
Lo mismo ocurre en las hojas de estilo.
Si aplicamos esta hoja al código anterior, que define dos colores diferentes para el encabezado h1, prevalece el color definido en la última regla:
/* R1: El último será el primero */
/* Se define el color del texto para etiquetas h1 */
h1 {
color: green;
}
/* Se define otro color del testo para etiquetas h1
Hay contradiccion entre las dos relas
¿Cual gana? */
h1 {
color: orange;
}
/* Aplicando la regla R1, el color de h1 es naranja */Al renderizar este HTML con su hoja de estilo, obtenemos esto:
El estilo aplicado directamente sobre las etiquetas HTML, en el fichero html, tiene prioridad sobre el estilo aplicado en la hoja de estilo.
O visto de otra manera, si definimos el estilo en las etiquetas, no podremos modificarlo con ninguna hoja de estilo.
- Ejemplo de uso de la regla.
Tenemos este código html, donde se ha definido que el párrafo sea de color azul.
<!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>Regla 2</title>
<link rel="stylesheet" href="R2.css">
</head>
<body>
<!-- Este estilo gana al definido en la hoja de estilo -->
<p style="color:blue;">Párrafo</p>
</body>
</html>Usamos esta hoja de estilo:
/* R2: El INLINE es INMODIFICBLE */
/* Color del texto de los parrafos */
p {
color: green;
}
/* Si el color se ha cambiado directamente en el html, en la etiqueta p
No podemos hacer nada desde la hoja de estilo */El resultado obtenido es este: El párrafo será azul
Si NO está definido un estilo de un elemento, lo heredará del elemento que lo contiene.
En este ejemplo hay un párrafo dentro de un bloque genérico div que a su vez está dentro del cuerpo.
<!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>Regla 3</title>
<link rel="stylesheet" href="R3.css">
</head>
<body>
<div>
<p>Párrafo. ¿De qué color soy?</p>
</div>
</body>
</html>Esta es la hoja de estilo aplicada.
El párrafo no tiene estilo definido.
Tampoco el bloque div.
Pero el cuerpo sí.
/* R3: El que no tiene hereda */
/* Color del texto de los elementos del cuerpo */
body {
color: green;
}El color de la letra del párrafo será verde, porque al no tener estilo propio lo herede de sus contenedores.
Si un elemento NO tiene un estilo definido, lo hereda del elemento superior más cercano que lo contiene, y que sí tiene estilo definido.
Usamos la misma estructura del ejemplo anterior: un párrafo dentro de un bloque div que a su vez está dentro del cuerpo:
<!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>Regla 4</title>
<link rel="stylesheet" href="R4.css">
</head>
<body>
<div>
<p>Párrafo. ¿De qué color soy?</p>
</div>
</body>
</html>Aplicamos esta hoja de estilo.
Ahora el bloque div sí tiene estilo definido, por tanto se heredará de él (y no del cuerpo como en el ejemplo anterior).
/* R4: El que no tiene hereda del más cercano */
div {
color: orange;
}
/* Color del texto de los elementos del cuerpo */
body {
color: green;
}El resultado es este:
Cuando a un elemento se le aplica el mismo estilo desde diferentes reglas, la prioridad la tienen la regla aplicada al identificador único.
Luego se aplica el estilo de la clase, y finalmente el resto de estilos.
En este HTML hemos definido un párrafo con el identificador único "yo" y pertenece a la clase "miclase".
<!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>Regla 5</title>
<link rel="stylesheet" href="R5.css">
</head>
<body>
<p class="miclase" id="yo">Párrafo. ¿De qué color soy?</p>
</body>
</html>Aplicamos la siguiente hoja de estilo:
/* R5: Primero yo, luego mi clase, y luego el resto */
/* Estilo para el elemento con identificador único yo */
#yo {
color: blue;
}
/* Estilo para los elementos de la clase miclase */
.miclase {
color: green;
}
/* Estilo para los párrafos */
p {
color: orange;
}Se ha definido el estilo para los párrafos (color naranja), para la clase "mi clase" (verde) y para el elemento "yo".
Como la prioridad la tiene "yo", el párrafo será de color azul.
Si no estuviese definida esa regla, se tomaría la de la clase, y sería de color verde.
Si tampoco estuviese definida, se tomaría la del párrafo, y sería naranja.
Dado el siguiente código 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>Ejercicio 2</title>
<link rel="stylesheet" href="Ej-02.css">
</head>
<body>
<div>
<p style="color:red;">P1</p>
<p id="quien">P2</p>
<p class="cual">P3</p>
<p>P4</p>
</div>
</body>
</html>al que se le aplica la siguiente hoja de estilo:
#quien {
color: orange;
}
.cual {
color: green;
}
/* Regla de estilo 1 */
p {
color: blue;
}
/* Regla de estilo 2 */
div {
color: yellow;
}
body {
color: pink;
}Determinar de qué color se renderizarán los textos P1, P2, P3 y P4.
¿Cuál sería el color de P4 si se elimina la regla de estilo 1?
¿Cuál sería el color de P4 si se eliminan las reglas de estilo 1 y 2?
El texto P1 está dentro de una etiqueta p, cuyo estilo está definido en la hoja de estilos (azul).
Pero por otro lado estamos definiendo su estilo dentro de la propia etiqueta: rojo.
Aplicando la regla R1, gana el color rojo. P1 sale en rojo.
El texto P2 está dentro otra etiqueta p, que le asigna el color azul.
Pero por otro lado el selector #quien le asigna el color naranja.
¿Quién gana? Aplicando la regla 5, gana el selector #quien. P2 sale en naranja
El texto P2 es otra etiqueta p, por lo que se le asigna el color azul.
Pero también pertenece a la clase "cual", cuyo color lo define el selector .cual, es el verde.
Aplicando la regla 5, gana el selector de clase. P3 sale en verde
Finalmente, el texto P4 está dentro de una etiqueta p, cuyo estilo está definido sin contradicciones.
Sólo se aplica ese estilo. P4 sale en azul
Si se elimina la regla de estilo 1, el texto P4 deja de tener estilo, por lo que se hereda de su contenedor más próximo, que en este caso es el bloque DIV.
El color de P4 será por tanto amarillo.
Si se eliminan las reglas de estilo 1 y 2, el texto P4 hereda su estilo del cuerpo, que es rosa. P4 saldrá en rosa
Todos los elementos HTML se tratan como cajas, a la hora de renderizarlos.
Cada caja tiene 4 partes: el contenido (content), el relleno (padding), el borde (border) y el margen (margin).
La parte central de la caja que contiene el contenido real del elemento, como texto, imágenes u otros elementos HTML.
Espacio transparente alrededor del contenido dentro del borde del elemento.
Se puede establecer con la propiedad CSS padding.
La línea que rodea el contenido y el relleno del elemento.
Se puede establecer con la propiedad CSS border.
Espacio transparente fuera del borde del elemento que separa este elemento de otros elementos circundantes.
Se puede establecer con la propiedad CSS margin.
Mediante las propiedades margin, padding y border cambiamos sus valores.
Como ejemplo, vamos a jugar con el modelo de caja de un párrafo.
Usamos este fichero HTML que define un cuerpo con un párrafo dentro.
<!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" href="box-test1.css">
</head>
<body>
<p>Estudiando el modelo de caja de un párrafo</p>
</body>
</html>En la hoja de estilo ponemos a cero las propiedades de la caja del cuerpo: margen 0, relleno 0 y borde deshabilitado.
Para el párrafo hacemos lo mismo pero activamos el borde, y le damos el color azul para resaltarlo.
/* Ponemos a cero todas las propiedades del cuerpo */
/* Sin margen, sin relleno y sin borde */
body {
padding: 0px;
margin: 0px;
border: none;
}
/* Propiedades de la caja del párrafo
Ponemos todo a cero, pero activamos el borde
para verlo. Y lo ponemos de color azul
*/
p {
margin: 0px;
padding:0px;
border:solid;
border-color: blue;
}Este es el aspecto al renderizarlo.
El borde está tocando las paredes del navegador porque no hemos puesto margen.
Y el texto interior está lo más cerca posible del borde.
Modificamos el HTML para incluir un párrafo adicional, que se colocará debajo del anterior.
<!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" href="box-test2.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>Como los márgenes están a 0, los bordes de ambos párrafos se tocan.
Modificamos el estilo del párrafo para incluir un relleno de 10 píxeles:
body {
padding: 0px;
margin: 0px;
border: none;
}
/* Propiedades de la caja del párrafo */
p {
margin: 0px;
padding: 10px; /* Relleno */
border:solid;
border-color: blue;
}Así es como queda el nuevo renderizado.
Ahora el texto de los dos párrafos está más alejado de los bordes.
El cuerpo es otro elemento html, que también se representa con el modelo de caja.
Modificamos el estilo para hacer visible el borde del cuerpo, y le damos el color rojo para resaltarlo.
/* Propiedades de la caja del cuerpo */
body {
padding: 0px;
margin: 0px;
border: solid;
border-color: red;
}
/* Propiedades de la caja del párrafo */
p {
margin: 0px;
padding: 10px; /* Relleno */
border:solid;
border-color: blue;
}Como no tiene ni márgenes ni relleno, el borde del cuerpo sale pegado a las paredes de la ventana del navegador y a los bordes azules de los párrafos.
El borde rojo del cuerpo lo separamos de las pareces de la ventana del navegador dando valores al margen.
Modificamos la hoja de estilo:
/* Propiedades de la caja del cuerpo */
body {
padding: 0px;
margin: 10px; /* Margen */
border: solid;
border-color: red;
}
/* Propiedades de la caja del párrafo */
p {
margin: 0px;
padding: 10px; /* Relleno */
border:solid;
border-color: blue;
}Y este es el resultado.
Los bordes rojo y azul todavía se tocan.
Pero el rojo ya no toca a los del navegador.
Ahora añadimos relleno al cuerpo.
La hoja de estilo queda:
/* 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: 0px;
padding: 10px; /* Relleno */
border:solid;
border-color: blue;
}Y en el renderizado vemos cómo ahora el marco rojo del cuerpo ya NO toca a los azules de los párrafos.
Aunque todavía los azules sí se tocan entre sí (porque no tienen margen).
Ya por último vamos a dar un valor de 10px a los márgenes de los párrafos, para que sus bordes no se toquen:
/* 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;
}El renderizado queda de la siguiente manera:
Cuando se establece el tamaño de cualquier objeto mediante las propiedades width y height, por defecto indican el tamaño interior.
El tamaño real será estas dimensiones más el relleno (padding) más el borde.
Esto puede resultar confuso, porque nos olvidamos de contar con el margen, o el padding que cambian las dimensiones del elemento.
Una manera sencilla de solucionarlo, y utilizar las dimensiones de manera más intuitiva, es cambiar este comportamiento utilizando la propiedad box-sizing: border-box;.
En muchos diseños veréis al comienzo algo como esto:
* {
box-sizing: border-box;
}
Significa que para TODOS los elementos que utiliza este modelo de dimensionado: lo que se especifica es el tamaño exterior (y no el interior).
Por lo tanto, cuando especificamos alto o ancho para un elemento no se ven afectados por el margen o el padding, y mantienen de esta manera sus dimensiones.
Aquí puedes encontrar más información sobre esta propiedad
En estos tutoriales del w3chool se puede encontrar más información sobre el modelo de caja.
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
