Acti 04 Css con html5 para creacion de web.pptx

1. CSS3

2. Indice:
El modelo de caja
Todo en CSS tiene una caja
alrededor, y comprender estas
cajas es clave para poder crear
diseños con CSS o para alinear
elementos con otros elementos.
1
Contenido
desbordado
El desbordamiento es lo que sucede
cuando hay demasiado contenido
para que pueda caber
cómodamente en una caja.
2
Task 3
Mercury is the closest
planet to the Sun
3
5
6
Task 4
Earth is the place
where we all live
Task 5
Jupiter is a gas giant
and the biggest planet
Task 6
Despite being red,
Mars is a cold place

3. Cajas en bloque y en línea
Si una caja se define como un bloque, se comportará de las maneras
siguientes:
 La caja fuerza un salto de línea al llegar al final de la línea.
 La caja se extenderá en la dirección de la línea para llenar todo el
espacio disponible que haya en su contenedor. En la mayoría de los
casos, esto significa que la caja será tan ancha como su contenedor,
y llenará el 100% del espacio disponible.
 Se respetan las propiedades width y height.
 El relleno, el margen y el borde mantienen a los otros elementos
alejados de la caja.
El modelo de caja

4. Cajas en bloque y en línea
Si una caja tiene una visualización externa de tipo inline, entonces:
 La caja no fuerza ningún salto de línea al llegar al final de la línea.
 Las propiedades width y height no se aplican.
 Se aplican relleno, margen y bordes verticales, pero no mantienen
alejadas otras cajas en línea.
 Se aplican relleno, margen y bordes horizontales, y mantienen
alejadas otras cajas en línea.
El modelo de caja

5. Cajas en bloque y en línea
El modelo de caja

6. ¿Qué es el modelo de cajas CSS?
El modelo de cajas CSS completo se aplica a cajas que presentan
comportamiento en bloque; las cajas con comportamiento en línea
solo usan una parte del comportamiento definido en el modelo de
cajas.
El modelo define cómo funcionan juntas las diferentes partes de una
caja (margen, borde, relleno y contenido) para crear una caja que
puedas ver en tu página.
El modelo de caja

7. Partes de una caja
 El contenido de la caja (o content box): El área donde se muestra el
contenido, cuyo tamaño puede cambiarse utilizando propiedades como
width y height.
 El relleno de la caja (o padding box): El relleno es espacio en blanco
alrededor del contenido; es posible controlar su tamaño usando la
propiedad padding y otras propiedades relacionadas.
 El borde de la caja (o border box): El borde de la caja envuelve el
contenido y el de relleno. Es posible controlar su tamaño y estilo
utilizando la propiedad border y otras propiedades relacionadas.
 El margen de la caja (o margin box): El margen es la capa más externa.
Envuelve el contenido, el relleno y el borde como espacio en blanco
entre la caja y otros elementos. Es posible controlar su tamaño usando la
propiedad margin y otras propiedades relacionadas.
El modelo de caja

8. El diagrama siguiente muestra estas capas:

9. El modelo de cajas CSS estándar
 En el modelo de cajas
estándar, cuando
estableces los atributos
width y height para una
caja, defines el ancho y
el alto del contenido de
la caja.
 Cualquier área de
relleno y borde se añade
a ese ancho y alto para
obtener el tamaño total
que ocupa la caja.
El modelo de caja

10. El modelo de cajas CSS alternativo
 Con este modelo,
cualquier ancho es el
ancho de la caja visible
en la página, por lo
tanto, el ancho del área
de contenido es ese
ancho menos el ancho
para el relleno y el
borde.
El modelo de caja
.box {
box-sizing: border-box;
}

11. Margen
 El margen es un espacio invisible que hay alrededor de la caja. Aleja el resto de
elementos de la caja. Los márgenes pueden tener valores positivos o
negativos.
 Podemos controlar todos los márgenes de un elemento a la vez usando la
propiedad margin, o cada lado individualmente usando las propiedades
equivalentes sin abreviar:
El modelo de caja
● margin-top
● margin-right
● margin-bottom
● margin-left

12. Relleno
 El relleno se encuentra entre el borde y el área de contenido. A diferencia de
los márgenes, el relleno no puede tomar valores negativos, por lo que el valor
debe ser 0 o positivo. Cualquier fondo aplicado a tu elemento se mostrará
detrás del área de relleno y, generalmente, se usa para mantener el contenido
alejado del borde.
El modelo de caja
 padding-top
 padding-right
 padding-bottom
 padding-left

13. Ejercicio:
Realizar un menú interactivo como se muestra en la imagen:
Para ello debe tener en cuenta lo siguiente:
1. Todo debe estar incluido en la etiqueta nav.
2. La etiqueta ul debe tener una clase llamada link-list.
3. La etiqueta ul debe contener el atributo inline-flex con lista de estrilo none.
4. La clase link-list debe tener color de fondo oscuro cualquiera, color de texto blanco no
debe estar decorado con margen 1px y con relleno de 10px con 20px
5. Al pasar el mouse por el menú esta debe cambiar a color negro con bordes redondeadas
de 5px y con relleno de 15px con 25px

14. Contenido desbordado
Ya sabemos que todo en CSS está dentro de una caja, y que podemos
restringir el tamaño de estas cajas asignándoles los valores width y
height (o inline-size y block-size).
El desbordamiento es lo que sucede cuando hay demasiado contenido
en una caja, y no cabe cómodamente en ella. El CSS te proporciona
varias herramientas para administrar este desbordamiento, y además
es un concepto que resulta útil de conocer desde las primeras etapas.
Contenido desbordado

15. El CSS trata de evitar «la pérdida de datos»
Vamos a comenzar con dos ejemplos que demuestran cómo se comporta el CSS
por defecto cuando ocurre un desbordamiento.
 Primer caso:
Contenido desbordado

16. El CSS trata de evitar «la pérdida de datos»
Vamos a comenzar con dos ejemplos que demuestran cómo se comporta el CSS
por defecto cuando ocurre un desbordamiento.
 Segundo caso:
Contenido desbordado

17. La propiedad overflow
 La propiedad overflow es el modo como tomas el control del desbordamiento
de un elemento y le dices al navegador cómo desea que se comporte. El valor
predeterminado para la propiedad overflow es visible, por lo que, de forma
predeterminada vamos a poder ver cuándo se desborda nuestro contenido.
 Si deseas cortar el contenido cuando se desborda, puedes establecer el valor
overflow: hidden en tu caja, que hace exactamente lo que dice: ocultar el
desbordamiento.
 Esto puede hacer que las cosas desaparezcan, por lo que solo debes utilizar
esta opción si ocultar contenido no te va a causar ningún problema.
 Si usas overflow: scroll, tu navegador siempre mostrará barras de
desplazamiento, incluso cuando no haya suficiente contenido
Contenido desbordado

18. La propiedad overflow
 Puedes especificar un desplazamiento en x y en y
utilizando la propiedad overflow y pasando dos
valores.
 Si especificas dos palabras clave, la primera se aplica a
overflow-x y la segunda a overflow-y.
 De lo contrario, tanto overflow-x como overflow-y se
fijan en el mismo valor.
 Por ejemplo, overflow: scroll hidden establece
overflow-x en scroll y overflow-y en hidden.
Contenido desbordado

19. Dimensionar elementos en CSS
 Es importante que comprendas qué tamaños van a
tener los diferentes elementos de tu diseño, y en este
artículo vamos a resumir las diversas formas en que
puedes asignar tamaños a los elementos con CSS y
definir algunos términos relativos al dimensionado que
te ayudarán en el futuro.
Dimensionar

20. El tamaño natural o intrínseco de las
cosas
 Una imagen tiene un ancho y una altura que están
definidos en el archivo de imagen que está incrustando
en la página. Este tamaño se describe como el tamaño
intrínseco, que proviene de la imagen misma.
Dimensionar

21. Configurar un tamaño específico
 podemos dar a los elementos de nuestro diseño un
tamaño específico. Cuando asignas un tamaño a un
elemento (al cual deberá ajustarse el contenido del
elemento) nos referimos a este como tamaño
extrínseco.
 Toma nuestro elemento <div> del ejemplo anterior:
podemos darle valores específicos como width y
height, y así tendrá ese tamaño sea cual sea su
contenido.
Dimensionar

22. Configurar un tamaño específico
Dimensionar
Si tienes una caja que puede
contener una cantidad
variable de contenido y
deseas que tenga siempre al
menos una altura
determinada, puedes
establecer la propiedad min-
height.
La caja siempre tendrá al
menos esta altura, pero
crecerá si hay más contenido
del que la caja puede
contener.

23. Configurar un tamaño específico
Dimensionar
Un uso común de max-width es para reducir el tamaño de las imágenes
si no hay suficiente espacio para mostrarlas en su ancho intrínseco, al
asegurarte de que no serán mayores que ese ancho.

24. Ejercicio:
Realizar un menú interactivo como se muestra en la imagen:
Para ello debe tener en cuenta lo siguiente:
1. Todo debe estar incluido en la etiqueta nav.
2. La etiqueta ul debe tener una clase llamada link-list.
3. La etiqueta ul debe contener el atributo inline-flex con lista de estrilo none.
4. La clase link-list debe tener color de fondo oscuro cualquiera, color de texto blanco no
debe estar decorado con margen 1px y con relleno de 10px con 20px
5. Al pasar el mouse por el menú esta debe cambiar a color negro con bordes redondeadas
de 5px y con relleno de 15px con 25px

25. Strategy for social media MK plan
Mars
Mars is red but is a very
cold place
60%
Earth
Earth is the place where
we all live
50%
Saturn
Saturn is a gas giant and
has several rings
25% Mercury
Mercury is the closest
planet to the Sun
75%

26. Strategy for social media MK plan
Mercury
Mercury is a very
small planet
Stage 1
Mercury is the
smallest planet
Mars
Mars was named
after a god
Stage 2
Mars is a very
cold place
Jupiter
Jupiter is a huge
gas giant
Stage 3
Jupiter is a really
big planet
Venus
Venus has a
beautiful name
Stage 4
Venus is a very
hot planet

27. Strategy for social media MK plan
MK plan
James Smith
Jenna Doe
Timmy Jimmy
Susan Harper
Team B
Earth is the place
where we all live
Team A
Saturn is a gas giant
and has several rings

28. Strategy for social media MK plan
Tasks Assigned to Priority Status
Mars is red but actually a
very cold place
John Doe Normal Completed
Earth is the third planet
from the Sun
Linda Smith Low In progress
Mercury is the closest
planet to the Sun
Timmy Jimmy High Completed
Saturn is the planet with
many rings
James Doe High Planned

29. Strategy for social media MK plan
M T W T F S S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
Month: June
Day: Wednesday 21
07:00 Neptune is far away from Earth
08:00 Earth is where we all live
09:00 Saturn is a gas giant with rings
10:00 Jupiter is the biggest planet
11:00 Mars is red but a cold place

30. Strategy for social media MK plan
Neptune is the farthest
planet from the Sun
MK plan
Team 1
Mars is red but
very cold
Task 2
Saturn is a planet
with many rings
Task 1
Jupiter is a huge
gas giant
Team 2
Mercury is the
smallest planet
Task 2
Venus has a
beautiful name
Task 1
Earth is where all
humans live

31. Strategy for social media MK plan
Task 1 Jupiter Jupiter is the biggest planet of them all
Task 2 Mars Mars is red but actually a very cold place
Task 3 Saturn Saturn is the planet with many rings
Task 4 Earth Earth is the place where we all live
Task 5 Mercury Mercury is the closest planet to the Sun
Task 6 Venus Venus has a beautiful name

32. Strategy for social media MK plan
Jun Jul Aug Sep Oct Nov Dec
Week 1 Project 1 Project 2
Week 2 Project 2
Week 3 Project 1 Project 4
Week 4 Project 3

33. Strategy for social media MK plan
Step 2
Earth is the
place where
we all live
Step 3
Saturn is the
planet with
many rings
Mars is red
but a very
cold place
Step 5
Step 1
Mercury is the
closest planet
to the Sun
Step 4
Jupiter is the
fifth planet
from the Sun

34. Strategy for social media MK plan
Team 5
Saturn is the
planet with
many rings
Team 2
Venus is the
second planet
from the Sun
Team 1
Mercury is the
closest planet
to the Sun
Team 3
Neptune is the
farthest planet
from the Sun
Team 4
Despite being
red, Mars is a
cold place
Team 6
Jupiter is a gas
giant and the
biggest planet
MK Plan

35. Strategy for social media MK plan
High
Mercury was named
after a Roman god
Venus is the second
planet from the Sun
Ceres is located in the
main asteroid belt
The Moon is Earth’s
only natural satellite
Task priority
Normal
Mars is red but a very
cold place
Jupiter a gas giant and
the biggest planet
Neptune is a planet far
away from us
Mercury is the closest
planet to the Sun
Low
Venus has a beautiful
name but it’s hot
Pluto is considered a
dwarf planet
Earth is the place
where we all live
Saturn is a gas giant
and has several rings

36. Strategy for social media MK plan
Budget B
Venus has a beautiful
name and is the second
planet from the Sun
50%
75%
Budget A
Mercury is the closest
planet to the Sun and
the smallest of them all
Budget C
Despite being red, Mars
is a cold place. It’s full
of iron oxide dust
60%

37. Strategy for social media MK plan
Tasks Week 1 Week 2 Week 3 Week 4 Week 5
Saturn is a gas
giant and has rings
Earth is the place
where we all live
Despite being red,
Mars is cold
Neptune is far
away from Earth

38. Strategy for social media MK plan
Objective 1
Venus has a
beautiful name
Month, Day 20XX - Main tasks
Mon Mercury is the smallest one in the Solar System
Tue Saturn is a gas giant and has several rings
Wed Neptune is the farthest planet from the Sun
Thu Jupiter is the biggest planet in the Solar System
Fri Mars is a cold place is full of iron oxide dust
Objective 2
Earth is the place
where we all live
Objective 3
Saturn is the
planet with rings

39. Strategy for social media MK plan
Stage 1 Earth is the place where we all live
Mars is red but a very cold place
Stage 2
Stage 3 Saturn is the planet with many rings
Stage 4 Jupiter is the biggest planet of them all
Stage 5 Mercury is the closest planet to the Sun

40. Strategy for social media MK plan
Deadlines
Earth is the place
where we all live
Tasks
Mars is red but actually
a very cold place
Objectives
Saturn is the planet
with many rings
Mon Tue Wed Thu Fri
07 am Earth Mercury Jupiter Mars Mercury
08 am Jupiter Mars Mercury Saturn Earth
09 am Mercury Saturn Mars Jupiter Saturn

41. Strategy for social media MK plan
Budget allocation
Follow the link in the graph to modify its data and then paste the new one here. For more info, click here
Project B
Despite being red,
Mars is a cold place
25%
Mercury is the closest
planet to the Sun
Project A
20%
Project D
Earth is the third
planet from the Sun
25%
Project C
Neptune is far away
from us
30%

42. Strategy for social media MK plan
Task Assigned to Deadline
Mars is red but a very cold place James Doe June 1st
Earth is the third planet from the Sun Timmy Jimmy June 15th
Mercury is the closest planet to the Sun Susan Harper July 6th
Saturn is the planet with many rings John Smith July 17th
Neptune is the farthest planet from the Sun Jenna Doe August 2nd
Jupiter is a gas giant and the biggest planet Linda Smith August 5th

43. Strategy for social media MK plan
Stage 2
Venus is the second
planet from the Sun
Mercury is a very
small planet
Stage 3
Stage 1
Mars is actually a
very cold place
Stage 3
Earth is the place
where we all live
Saturn is the planet
with many rings
Stage 1 Stage 2
Jupiter doesn’t have
a solid surface
Project 1
Project 2

44. Strategy for social media MK plan
MK Plan
Jupiter is the biggest planet in the Solar System. It’s the fourth-brightest object
in the night sky. It was named after the Roman god of the skies and lightning
Project A Project B
Earth is the place where we all live Saturn is the planet with many rings
Task 1 Task 2 Task 1 Task 2
Completed Work in progress Work in progress Completed

45. Strategy for social media MK plan
Project A Project B
Neptune is far away
from us
Task 1
Jupiter doesn’t have
a solid surface
Task 2
Earth is the place
where we all live
Task 3
Despite being red,
Mars is a cold place
Task 1
Venus has a very
beautiful name
Task 2
Saturn is the planet
with many rings
Task 3

46. Strategy for social media MK plan
Team 2
● Mercury is the closest
planet to the Sun
● Venus is the second
planet from the Sun
● Neptune is very far
away from the Sun
● Saturn is a gas giant
and has rings
● Mars is a planet full of
iron oxide dust
● Despite being red,
Mars is a cold place
Team 3
Team 1
● Earth is the place
where we all live
● Venus has a really
beautiful name
● Jupiter was named
after a Roman god
Assigned tasks

47. Strategy for social media MK plan
Task 1
Venus has a very
beautiful name
50%
Neptune is very far
away from us
Task 3
70%
Task 4
Pluto is considered
a dwarf planet
15%
Task 2
Saturn is a gas giant
and has rings
45%
Task 5
Earth is the planet
where we all live
80%
Despite being red,
Mars is a cold place
Task 6
90%

48. Strategy for social media MK plan
Earth
Phase 3
Earth is the
place where we
all live
Jupiter is a gas
giant and the
biggest planet
Jupiter
Phase 1
Mars
Phase 4
Mars is a cold
place full of iron
oxide dust
Saturn is the
planet with
many rings
Saturn
Phase 2

49. Strategy for social media MK plan
Team A Saturn is the planet with rings 25%
Venus has a beautiful name
Team B 55%
Team C Mars is red but a very cold place 70%

50. Strategy for social media MK plan
Growth
Time
Jun
We all live on
planet Earth
Jul
Mars is a very
cold place
Aug
Saturn has
many rings
Sep
Jupiter is a
gas giant
Oct
Mercury is
very small

51. Strategy for social media MK plan
01
Stage 1
Mercury is the
closest planet to
the Sun
Stage 2
Venus has a
beautiful name,
but it’s hot
02
Stage 3
Despite being
red, Mars is a very
cold place
03
MK Plan

52. Strategy for social media MK plan
Follow the link in the graph to modify its data and then paste the new one here. For more info, click here
Team 2
Despite being red,
Mars is a cold place
25%
Venus has a really
beautiful name
Team 1
35%
Team 4
Earth is the third
planet from the Sun
15%
Team 3
Saturn is the planet
with many rings
25%

53. Instructions for use
For more information about editing slides, please read our FAQs or visit our blog:
https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school
If you have a free account, in order to use this template, you must credit Slidesgo in your final presentation. Please refer
to the next slide to read the instructions for premium users.
As a Free user, you are allowed to:
- Modify this template.
- Use it for both personal and commercial projects.
You are not allowed to:
- Sublicense, sell or rent any of Slidesgo Content (or a modified version of Slidesgo Content).
- Distribute Slidesgo Content unless it has been expressly authorized by Slidesgo.
- Include Slidesgo Content in an online or offline database or file.
- Offer Slidesgo templates (or modified versions of Slidesgo templates) for download.
- Acquire the copyright of Slidesgo Content.

54. Instructions for use (premium users)
As a Premium user, you can use this template without attributing Slidesgo.
You are allowed to:
● Modify this template.
● Use it for both personal and commercial purposes.
● Share this template in an editable format with people who are not part of your team.
You are not allowed to:
● Sublicense, sell or rent this Slidesgo Template (or a modified version of this Slidesgo Template).
● Distribute this Slidesgo Template (or a modified version of this Slidesgo Template) or include it in a database or in
any other product or service that offers downloadable images, icons or presentations that may be subject to
distribution or resale.
● Use any of the elements that are part of this Slidesgo Template in an isolated and separated way from this
Template.
● Register any of the elements that are part of this template as a trademark or logo, or register it as a work in an
intellectual property registry or similar.
For more information about editing slides, please read our FAQs or visit our blog:
https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school

55. Infographics
You can add and edit some infographics to your presentation to present your data in a visual way.
● Choose your favourite infographic and insert it in your presentation using Ctrl C
+ Ctrl V or Cmd C + Cmd V in Mac.
● Select one of the parts and ungroup it by right-clicking and choosing
“Ungroup”.
● Change the color by clicking on the paint bucket.
● Then resize the element by clicking and dragging one of the square-shaped
points of its bounding box (the cursor should look like a double-headed arrow).
Remember to hold Shift while dragging to keep the proportions.
● Group the elements again by selecting them, right-clicking and choosing
“Group”.
● Repeat the steps above with the other parts and when you’re done editing, copy
the end result and paste it into your presentation.
● Remember to choose the “Keep source formatting” option so that it keeps the
design. For more info, please visit our blog.