Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS Modelos de caja - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 29 de diciembre de 2020 por Amadeo M.

103 visualizaciones

Más información Transcripción

Descargar la transcripción

A la hora de diseñar una página HTML, uno de los elementos más importantes es cómo vamos a encajar la información. 00:00:01
En cajas visibles o no visibles, pero cómo vamos a ir poniendo esa información, distribuyéndola. 00:00:09
Para ello, hay dos elementos que son importantísimos, el margin y el padding. 00:00:14
El margin es el margen exterior a la información y el padding el margen interior a la información. 00:00:19
Vemos aquí perfectamente cómo tenemos un elemento, que es este de aquí. 00:00:26
Esto de aquí es un elemento que tiene un borde, este borde de aquí, y dentro hay un padding o margen interior y fuera de ese hay un margen exterior. 00:00:29
Y el siguiente elemento que se escriba vendrá después de ese margen exterior. 00:00:41
Bien, podemos ir cambiando elementos del modelo de cajas, perfectamente cambiándolo, cambiando una serie de componentes. 00:00:46
Entonces podemos decir, por ejemplo, que el tamaño de la caja va a estar con un border box 00:00:54
De tal manera que aquí definimos su ancho y su alto y su borde 00:00:59
Y entonces decimos que esa va a ser la manera de introducirlo 00:01:05
Bueno, aquí más ejemplos del mismo tipo 00:01:10
Otro elemento muy importante es el display 00:01:14
Cómo vamos a mostrar cualquier información 00:01:17
No solamente las cajas, casi cualquier información 00:01:20
con non simplemente no se genera esa información 00:01:23
con block se muestra como un bloque 00:01:27
inline va incluyendo como continuación de una línea 00:01:29
inline block lo que hace es que forma como un bloque pero al lado de la línea 00:01:34
running lo que hace es un tipo inline pero que se añade al principio del elemento siguiente 00:01:39
list item es de tipo block pero incluye también el marcador 00:01:45
Y después hay varios elementos, cajas, que forman parte de una tabla 00:01:49
Que son todas estas y que ya las veremos en su entorno correspondiente 00:01:53
Bueno, dicho eso, vamos a ver cómo manejamos bordes 00:01:58
Entonces tenemos aquí bordes de todo tipo 00:02:01
En los cuales lo más habitual es que lo que digamos sea el color, su grosor o su estilo 00:02:04
Podemos poner border-top o border-pero 00:02:09
Pero esto, border a pelo, significa simplemente un borde alrededor de todo 00:02:14
Pueden ser valores fijos o puede ser fin fino, medio o thick grueso 00:02:19
Y el color puede ser también el valor transparente o el código de algún color 00:02:26
Que puede ser el nombre del color o su etiqueta hexadecimal precedida de una almohadilla 00:02:31
O su código RGB entre paréntesis los valores 00:02:37
Bien, tenemos un borde que es rojo de 5 píxeles y sólido 00:02:40
Pues esta es la información que tenemos 00:02:47
aquí tenemos un borde que es rojo 00:02:48
5 píxel, pero que no tiene 00:02:51
ningún tipo, entonces aquí ni aparece 00:02:53
¿de acuerdo? con lo cual 00:02:55
vemos que los tipos son 00:02:57
ninguno, oculto 00:02:58
que aparentemente es lo mismo 00:03:01
a puntos 00:03:02
a rayitas 00:03:05
sólido, voy a seguir 00:03:06
por aquí, doble 00:03:08
el tipo groove, o donde 00:03:10
fíjense que hay como 00:03:13
como un espejo 00:03:14
del marco 00:03:17
que se ve por un lado o por otro 00:03:20
por un sitio es un poco más arriba que otro 00:03:22
inset y offset, ¿de acuerdo? 00:03:24
dando un aspecto como que estamos dentro 00:03:26
o fuera 00:03:28
ese efecto tridimensional que dicen aquí 00:03:29
yo no lo veo tan tridimensional, pero bueno, eso que dicen 00:03:31
para las tablas 00:03:34
cuando ponemos una tabla en principio 00:03:36
no hay que decir si tiene un borde o no 00:03:38
entonces podemos decir que la tabla puede estar 00:03:40
los bordes colapsados 00:03:42
es decir, las celdas están pegaditas 00:03:43
unas con otras 00:03:46
O podemos también ir definiendo cada uno de los bordes interiores 00:03:47
Entonces, por ejemplo, aquí algunos van sin borde 00:03:55
Estas dos celdas no llevan borde, con lo cual las podemos ocultar 00:03:57
O podemos aquí decir simplemente que no haya 00:04:01
Entonces las ponemos aquí 00:04:06
Bien, hay borde en la parte de arriba, border top 00:04:08
En la parte de abajo, border bottom 00:04:13
a la izquierda border-left y a la derecha border-right 00:04:15
y yo puedo definir las características de cada una de ellas por separado 00:04:18
aquí vemos varios ejemplos 00:04:22
y también existen propiedades de border-color, border-width y border-style 00:04:24
es decir, color, ancho y estilo 00:04:29
entonces nosotros podemos ir definiendo toda esta información 00:04:32
si solamente ponemos un valor, ahora lo vamos a ver mejor 00:04:35
si solamente ponemos un valor, este valor se aplica a todo 00:04:39
por ejemplo, el color es rojo, pues todo es rojo 00:04:42
Si ponemos dos valores, se aplica arriba y abajo el primero, y el segundo a la derecha y a la izquierda. 00:04:44
Si ponemos tres valores, se aplica el primero arriba, el segundo a la derecha, el tercero abajo, y el cuarto es el segundo que teníamos puesto. 00:04:53
Y he seguido este orden porque va a ser el orden del reloj para entendernos. Primero, segundo, tercero y cuarto. 00:05:07
¿De acuerdo? Ese es el orden que se va a seguir 00:05:14
Aparte puedo indicar características 00:05:16
Características, por ejemplo, color rojo y negro 00:05:19
Como sé que es rojo y negro, rojo será arriba y abajo 00:05:23
Y negro, derecha e izquierda 00:05:26
¿De acuerdo? 00:05:29
Podemos ir aplicando a cada elemento 00:05:30
Características distintas 00:05:32
Estas son las propiedades individuales 00:05:35
Tema aparte son los bordes redondeados 00:05:38
bordes redondeados, esto hasta hace 00:05:42
no mucho no existía siquiera 00:05:44
y poco a poco va introduciéndose 00:05:45
en todos los navegadores 00:05:47
y bueno, pues aquí lo que vamos 00:05:50
diciéndole es como es ese 00:05:52
ese borde 00:05:54
como es y como es el radio 00:05:57
que se va a aplicar en los sitios 00:05:59
correspondientes, como solo ponemos uno 00:06:01
pues se aplica en todos los sitios 00:06:03
si pusiéramos top left 00:06:04
pues arriba y aquí 00:06:06
a este lado, etc 00:06:09
esto ya es simplemente ir jugando 00:06:10
para obtener todo este tipo de salidas. 00:06:13
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
103
Fecha:
29 de diciembre de 2020 - 9:59
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
06′ 23″
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
42.02 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid