Bloque de CSS: David Bernal González

Bloque de CSS
David Bernal González

¿Qué es CSS?
CSS Es el lenguaje mediante el cual controlamos el aspecto y la
presentación de los distintos elementos de una página web
(HTML)
CSS = Cascade Style Sheets (o Hojas de estilos en cascada)
□ Hojas de estilo: que contienen estilos CSS lo que provoca que se
llame así a los ficheros CSS.
□ En cascada, ya que las reglas estás se interpretan de arriba
hacía abajo (en una especie de cascada). Por lo que si aplicamos
una reglas CSS apuntando hacía un mismo elemento y con un
mismo peso, estás se aplicarán en el orden en el que estén
definidas. Por ejemplo si cambiamos dos veces el color de fondo
(background) de nuestra web, primeramente se aplicará el
primer estilo hasta llegar a la segunda regla que finalmente
definirá el color de la web. Esto pasa internamente durante el 2
render de la página que no podemos verlo por el navegador.
¿Qué es CSS?
▪ CSS es el único lenguaje de diseño
dentro de la web/HTML. Por lo que
podemos utilizar otros lenguajes
pero dichos lenguajes estarán
basados en CSS
▪ No necesitamos instalar nada nos basta con abrir el documento HTML sobre el que
añadiremos el CSS desde un navegador.
▪ El navegador interpretará el código mediante su motor de render (rendering engine) que
no tiene porque ser el mismo para cada uno de los browsers. Y el cual es el encargado de
interpretar el CSS y posteriormente pintar las instrucciones en pantalla.
▪ Por lo que renderizar será el proceso en el que el rendering engine interpretar y
posteriormente construirá nuestro HTML y CSS. 3
MANERAS DE
TRABAJAR CON CSS
4
Maneras de trabajar con CSS
▪ Existen distintas formas de trabajar con CSS. Vamos a ver las maneras en el
orden de menos recomendado a más recomendado.
▪ Las maneras son 4 maneras:
□ Añadiendo un atributo style sobre el elemento HTML y definiendo las reglas CSS.
□ Desde dentro del documento HTML con <style></style> dentro del HEAD del documento
□ Desde dentro del documento HTML con <style></style> dentro del HEAD del documento
pero con import url
□ Desde un fichero externo CSS asociado a un HTML mediante a
<link rel="stylesheet" href="style.css">
5
Manera 1: atributo style dentro de un
elemento HTML
La forma menos recomendada de trabajar con CSS es
que vamos a ver en esta diapositiva. Si os fijáis
estamos añadiendo los estilos directamente en los
atributos mediante a la etiqueta style:
Los principales motivos por los que se recomienda no
realizar esto de dicha manera son:
□ Si queremos utilizar un mismo estilo varias veces
debemos de repetir los estilos para poder
aplicarlos en cada uno de los elementos.
□ Los reglas CSS que definen los estilos de nuestros
documentos no están separadas de los documentos 6
HTML por lo que no podemos reutilizarlas.
Manera 2: <style> en el HEAD del HTML
La segunda forma menos recomendada de trabajar con CSS es la que vamos a ver
en esta diapositiva. Si os fijáis continuamos trabajando desde dentro del documento
HTML pero hemos definido un bloque dentro del HEAD mediante el elemento STYLE y
dentro definimos el conjunto de reglas CSS que aplicaremos al documento:
Los principales motivos por los que se recomienda no realizar esto de dicha
manera son:
□ Los reglas CSS que definen los estilos de nuestros documentos no están
separadas de los documentos HTML. Por lo que el documento puede ser
demasiado grande.
□ Y aunque de esta manera es más fácil reutilizar las reglas CSS, el principal
problema que nos encontramos es que si reutilizamos las reglas CSS en otro
documento las tendremos duplicadas en ambos documentos. Lo que provocará
que para mantenerlas tengamos que modificar varios documentos perdiendo más
tiempo y aumentando el tamaño de los ficheros.
El beneficio respecto a trabajar con el atributo style, es que podemos reutilizar 7
reglas CSS sobre varios elementos de una forma más sencilla:
Manera 3: <style> e import URL
También existe la posibilidad de importar un
fichero CSS desde el dentro de la etiqueta
style. El principal problema de esto, es que
es asíncrono. Es decir, primero se carga la
web y, posteriormente, se cargan y aplican
los CSS uno a uno de forma asíncrona. Lo que
puede producir que se hasta que se carguen
los CSS el documento se visualice de una
forma y posteriormente, una vez se cargan
los CSS el documento cambie su
presentación. Por lo que se desaconseja esta
forma de trabajar en la amplia mayoría de
casos.
8
Manera 4: mediante a un fichero
externo
▪ La manera más recomendada de trabajar con los ficheros CSS es la siguiente. Ya que si
tuviéramos dos páginas sobre las que quisiéramos aplicar los mismos estilos, lo podríamos
hacer sin problema. Además tenemos separados los estilos y la estructura de nuestro
HTML. Vamos a ver un ejemplo:
9
1
Ejercicios de como asociar un documento
CSS en un HTML
▪ A partir de la estructura básica de un HTML y realizando todas las llamadas a las
distintas formas de llamar a un CSS desde el mismo documento de HTML realiza
lo siguiente:
□ Manera 1: Define un estilo en línea que modifique alguna propiedad de CSS de dicho
elemento mediante a <div style=""></div>
□ Manera 2: Define una etiqueta <style></style> dentro del head del documento que
modifique alguna propiedad de algún elemento de CSS mediante a un selector.
□ Manera 3: Dentro de la etiqueta <style></style> definida anteriormente, haz una
llamada a un fichero externo de CSS mediante a @import url.
□ Manera 4: Mediante a la etiqueta <link rel="stylesheet" href="./style.css"> 10
realiza la llamada a un fichero externo de CSS.
HISTORIA DE CSS
11
Historia de CSS: antes de CSS
▪ Antes de su nacimiento las webs solamente estaban formadas por páginas, textos
e imágenes. Las webs se veían de la siguiente manera:
12
Historia de CSS: antes de CSS
▪ Podemos ver como que incluso las webs de los buscadores más famosos como
Yahoo o Google también eran bastante cutres:
13
Historia de CSS: nacimiento de CSS1
▪ CSS nace en 1996, cuando la W3 define el
estándar de la primera versión de CSS
(más conocida popularmente como CSS1).
▪ El W3 es el encargado de
definir/mantener el estándar de CSS
▪ Podemos visitar el estándar que definió
la W3 en la siguiente web:
https://www.w3.org/TR/REC-CSS1/
14
Historia de CSS: nacimiento de CSS2
▪ Más tarde, ya en 1998, se publica
CSS2 el segundo estándar de CSS.
▪ Esta versión contenía lo definido en
CSS1 y, además, añadía algunas
novedades en las que se había ido
trabajando durante estos años que
mejoraban a la primera versión de
CSS (CSS1) haciendo que CSS fuera
más completo.
▪ Podemos visitar el estándar que
definió la W3 en la siguiente web:
https://www.w3.org/TR/REC-CSS2/ 15
Historia de CSS: nacimiento de CSS2.1
▪ En 2011, se publica la versión 2.1 de CSS. El
cual añadía las novedades que mejoraban a
su predecesor CSS 2.
▪ Y justamente este año, en 2011, fue cuando
la W3 decide tras ver que web no paran de
surgiendo nuevas necesidades dejar de
continuar publicando versiones de CSS “en
bloque”. Ya que esta forma de trabajar le
impide subir sus novedades (los cambios)
hasta que se lanza otra versiones y eso
pasa cada bastantes años habitualmente.
▪ Por lo que subdivide el lenguaje en 16
distintos módulos:
Historia de CSS: modularicación de CSS
▪ Tal y como podemos ver en la siguiente imagen,
algunos de estos módulos se encuentran actualmente
en la versión 1, otros en la 2, otros en la 3, 4, 5…
▪ El principal beneficio de la moduralización de CSS es
que nos ha permitido que cada uno de estos módulos
puede avanzar de forma independiente.
▪ Algunos de los principales módulos son:
□ Selectors
□ Box Model
□ Backgrounds and Borders
□ Image Values and Replaced Content
□ Text Effects
□ 2D/3D Transformations
□ Animations 17
□ Multiple Column Layout
Historia de CSS: nacimiento de “CSS3”
▪ Si nos métenos en
https://www.w3.org/TR/2001/WD-css3-
roadmap-20010523/ podemos ver que la
W3 lanzó en 2001 un Working Draft (un
borrador). Y, que por tanto, no existe
oficialmente como una “especificación”
ya solamente esto simplemente es un
borrador y no una recomendación de la
W3 tal y como veíamos en las otras
versiones .
18
Historia de CSS: nacimiento de “CSS3”
▪ Si queremos ver las últimas novedades de CSS
vamos a https://www.w3.org/TR/css-2021/. Y si
concretamente dentro del documento buscamos
CSS level 4 podemos ver que se utiliza para
referirse a las versiones de CSS que no son
monolíticas, es decir, que no suben todos los
cambios en una misma versión. Por lo que
realmente cuando hablamos de CSS3 no nos
estamos refiriendo a una versión en concreto
sino al cambio en la forma de trabajar
19
Historia de CSS: modularicación de CSS
▪ Por tanto:
□ Cuando hablamos de CSS2 por ejemplo nos estamos refiriendo a "una especificación"
□ En cambio, cuando hablamos de CSS Nivel 3 nos referimos a "una colección de
especificaciones". En la que cada especificación (es decir, cada módulo) define un conjunto (en
gran medida) independiente de funciones relacionadas
20
SELECTORES
21
¿Qué son los selectores?
Los selectores son la forma mediante a la cual seleccionamos
elementos (ya sea uno o varios) para poder aplicar
declaraciones que unos permitan modificar nuestros estilos.
Una regla está formada por el selector y el conjunto de
declaraciones (que a su vez está formada por propiedades y
valores).
Las propiedades nos permiten modificar características de un
elemento mediante a valores
Los declaraciones deben de estar separadas por ; a excepción
de la última declaración que pese a no ser obligatoria ya que
al no haber mas bloques no es obligatorio si que es altamente
22
recomendable poner el ; al final de cada declaración
Tipos de selectores CSS
▪ Como ya hemos dicho anteriormente es el mecanismo mediante
el cual seleccionamos nuestros estilos para finalmente añadir
declaraciones que nos permitan añadir estilos a nuestros
elementos. Principalmente se subdividen en:
□ Selectores simples Selectores compuestos
 Selectores elementales Selectores agrupados: .title, p, #logo{}
▬ Selector universal *{} Selectores Combinados
▬ Selector de tipo/etiqueta: h1{}, body{], p{} ▬ Selector descendiente: div .title{}
▬ Selectores de atributo: [href]{} ▬ Selector hermanos:
▬ Id #id{} - Siguiente: div + .title-1{}
▬ Clase .className{} - Todos: div ~ p{}
▬ Otros atributos (los veremos más adelante) - Hijo directo: div > p{}
Pseudoclases-pseudoelementos
23
SELECTORES
ELEMENTALES
24
Selectores elementales: selector
universal *
▪ El selector universal nos
permite seleccionar todos los
elementos. En la gran mayoría
de casos no es muy
recomendable su uso, ya que
afecta a todos los elementos.
Pero pese a ello, vamos a ver
un ejemplo en el que queremos
poner todo el texto del
documento en green:
25
Selectores elementales: selector de
tipo/atributo
▪ El selector de atributo o
de tipo, nos permite
seleccionar elementos
mediante al nombre de
su etiqueta. Vamos a ver
un ejemplo:
26
SELECTORES
DE ATRIBUTO
27
Selectores de atributo: por ID #
▪ El selector de atributo por ID nos
permite seleccionar a un elemento
que es único en todo el documento. Ya
que no pueden existir dos IDs iguales
dentro de un mismo documento. Por
ello, es recomendable solamente
trabajar con ID en las situaciones en
las que esto tenga sentido.
▪ Son keysensitive, por lo que
distinguen mayúsculas y minúsculas.
Por ello, se aconseja siempre trabajar
con lowercase (minúsculas) 28
Selectores de atributo: por clase .
▪ El selector de atributo por clase nos
permite seleccionar a un elemento
que es único en todo el documento. Ya
que no pueden existir dos IDs iguales
dentro de un mismo documento. Por
ello, es recomendable solamente
trabajar con ID en las situaciones en
las que esto tenga sentido.
▪ Son keysensitive, por lo que
distinguen mayúsculas y minúsculas.
Por ello, se aconseja siempre trabajar
con lowercase (minúsculas) 29
SELECTORES
DE ATRIBUTO
30
Selectores de atributo: [atributo]
▪ Nos permiten seleccionar cualquier elemento que tenga dicho atributo. En este caso,
por ejemplo todos los elementos que contengan un ID:
31
Selectores de atributo: [atributo=“valor”]
▪ Nos permiten seleccionar cualquier elemento que tenga dicho atributo con dicho valor.
En este caso, por ejemplo todos los elementos que contengan un href con
https://www.google.es:
32
Selectores de atributo: [atributo^=“valor”]
▪ Nos permiten seleccionar cualquier elemento que tenga dicho atributo y que el valor
del atributo empiece por el carácter que le especifiquemos. En este caso, por ejemplo
todos los elementos que contengan el atributo href con un valor que empiece por http:
33
Selectores de atributo: [atributo*=“valor”]
▪ Nos permiten seleccionar cualquier elemento que tenga dicho atributo y que el valor
contenga en cualquier parte el texto que le especifiquemos. En este caso, por ejemplo
todos los elementos que contengan el atributo href con un valor que contenga google:
34
Selectores de atributo: [atributo$=“valor”]
▪ Nos permiten seleccionar cualquier elemento que tenga dicho atributo y en el que
valor acabe con el texto que le especifiquemos. En este caso, por ejemplo todos los
elementos que contengan el atributo href con un valor que acabe en .es:
35
Selectores de atributo: [atributo|=“valor”]
▪ Nos permiten seleccionar cualquier elemento que tenga dicho atributo y en el que
valor contenga el texto que le especifiquemos o bien el texto y algo más con un -
loquesea. En este caso, por ejemplo todos los elementos que contengan el atributo
class con un valor title o title-loquesea:
36
SELECTORES
COMPUESTOS
37
Selectores compuestos: agrupados
▪ Son aquellos que están compuestos por dos o más selectores. Se utilizan para dar
estilos a varios elementos y cada uno de los elementos va separado por una coma.
Vamos a ver un ejemplo:
38
SELECTORES
COMBINADOS
39
Selectores combinados: descendente
▪ Seleccionar todos los elementos hijos del
padre.
▪ En el ejemplo, el primer elemento es main
y los hijos que se seleccionarán serán los
definidos en el segundo elemento en este
caso los H2 que estén dentro de main:
▪ Aunque es posible trabajar con más
elementos, es recomendable no trabajar
con más de dos selectores a la vez. Ya que
si trabajamos con muchos esto nos puede
afectar a la especificidad (que 40
explicaremos un poquito más adelante)
Selectores combinados: descendente
▪ También nos permiten
seleccionar solamente
determinados elementos
de una clase. Vamos a
verlo:
41
Selectores combinados: el siguiente del
actual (el siguiente hermano)
▪ Nos permite seleccionar el
siguiente elemento, es decir, el
que está inmediatamente
después de nuestro elemento.
▪ En este ejemplo, hemos
seleccionado el elemento DIV ya
que es justamente el siguiente
a H2:
▪ Y el H2 que es el siguiente 42
hermano de main:
Selectores combinados: el siguiente del
actual (solamente el siguiente hermano)
▪ Si intentamos seleccionar un
elemento que no es el siguiente
al actual podemos ver que no
hará nada:
43
Selectores combinados: todos los
hermanos
▪ Podemos seleccionar todos los
hermanos al primer elemento.
Por ejemplo si quisiéramos
todos los H2 que sean
hermanos del H1 haríamos lo
siguiente:
elementos hermanos de H1
utilizando el * como segundo 44
selector.
Selectores combinados: hijo directo

hermanos al primer elemento
de la siguiente manera:
45
Resumen de selectores
▪ Breve resumen de
los principales
selectores:
▪ https://www.w3
schools.com/css
ref/css_selector
s.asp
46
PSEUDO-SELECTORES
y PSEUDO-CLASES
47
Pseudo-elements vs pseudo-clases
▪ La diferencia entre pseudo-
clases y pseudo-elementos
es muy pequeña. En general,
los pseudo-elementos
suelen hacer referencia a
determinadas partes de un
elemento, mientras que las
pseudo-clases suelen hacer
referencia al estado del
elemento.
▪ Podéis ver el listado completo de ambas en el siguiente link a la MDN
48
Pseudo-elements
▪ Vamos a ver un ejemplo de pseudo-elements. En este caso en concreto, vamos a marcar la
primera línea del DIV:
49
Pseudo-clases
▪ Vamos a ver un ejemplo de pseudo-clases. En este caso en concreto, vamos a marcar la
primera línea del DIV:
50
Pseudo-clases
▪ Ejemplo:
51
2
Input CSS
▪ 1. Define un input de tipo numérico que nos permita solamente introducir la edad de una
persona con un rango del 0 al 120
▪ 2. Crea label y asóciala a dicho input
▪ 3. Define dos reglas CSS una para cuando el valor del input es haya introducido
correctamente y otra para cuando se haya introducido incorrectamente.
52
3
Ejercicios de selectores
A partir de la siguiente web,

https://flukeout.github.io/
resuelve todos los ejercicios y
guarda las respuesta dentro
de un fichero .md (de
Markdown). Vamos a ver un
ejemplo:
53
4
A partir de la siguiente web, https://toolness.github.io/css-selector-game/ resuelve todos los ejercicios y guarda las
respuesta dentro de un documento de Word. Vamos a ver un ejemplo:
54
5
A partir del siguiente archivo realiza lo siguiente:
1. Selecciona todos los elementos
2. Selecciona todos los elementos que sean de tipo P
3. Selecciona el elemento con ID title-1
4. Selecciona todos los elementos que pertenezca a la clase .bg-yellow
5. Selecciona todos los elementos que tengan el atributo ID
6. Selecciona todos los elementos que tengan el atributo ID y como valor title-1
7. Selecciona todos los elementos que tengan el atributo HREF con un valor https://www.yahoo.com
8. Selecciona todos los elementos que tengan el atributo class con un valor que empiece por title
9. Selecciona todos los elementos que tengan el atributo HREF y que acaben en .com
10. Selecciona todos los elementos que tengan el atributo class con un valor title, title-1, title-2...
11. Selecciona todos los elementos que tengan un atributo href y cuyo valor contenga 127
12. Selecciona todos los elementos que tengan el atributo href y cuyo valor empieze por http
13. Selecciona los elementos que sean A, P, o H1 desde una única regla CSS
14. Selecciona todos los elementos que pertezcan a main y que sean P
15. Selecciona el siguiente elemento que sea hermano de H1
55
16. Selecciona todos los elementos que sean hermanos de H1
17. Selecciona todos los elementos hijos directos de main
6
A partir de la siguiente web, https://css-speedrun.netlify.app/ resuelve todos los ejercicios y guarda las respuesta
dentro de un fichero .md (de Markdown). Vamos a ver un ejemplo:
56
ESPECIFIDAD, PESO
DE SELECTORES,
!IMPORTANT Y
CASCADA
57
Especifidad y cascada
▪ Cuando trabajamos con
CSS, si nos situamos sobre
un elemento podemos ver
que cada uno de los
selectores tiene un cierto
peso:
▪ En este caso el elemento
que se aplicará será el de
la línea 9 por lo que el H1 se
pondrá en purple. ¿Pero
porque pasa esto? 58
Según developer.mozilla.org (MDN), “La
especificidad son los medios por los que el
navegador decide qué valores de una
propiedad de CSS son más relevantes para
un elemento y, por lo tanto, serán
aplicados“.
59
▪ Cuando trabajamos con
CSS, si nos situamos sobre
un elemento podemos ver
que cada uno de los
selectores tiene un cierto
peso:
▪ Esto es muy importante
para CSS ya ante el caso de
que existan varias reglas
CSS que afecten a un mismo
elemento. Se aplicará la 60
regla que más peso tenga.
Peso de los selectores
▪ En función del tipo de
selector que utilizemos
tendremos más o menos
peso en la especifidad lo
que será determinante ante
el caso que apliquemos
varias reglas CSS a un
mismo elemento:
61
Peso de los selectores
▪ Los estilos declarados con
style dentro del propio
documento HTML tienen
más peso que todo lo que
hemos visto anteriormente:
62
▪ Si existen varias reglas aplicadas en un mismo elemento y con distinto peso se utilizará la
especifidad y se aplicará la que más peso tenga.
▪ En cambio, si por ejemplo solamente existen dos reglas CSS que afectan a un mismo selector y
ambas tienen el mismo peso se aplica la cascada, es decir, la de más abajo:
▪ Por tanto, la cascada solamente funcionará cuando la especifidad que aplicamos sobre un
elemento sea la misma. Si no tiene el mismo peso ambas reglas se utilizará la especifidad y no
63
la cascada
!Important
▪ Si utilizamos !important, le indicamos al navegador que esto tiene prioridad sobre el resto de
selectores independientemente del peso.
▪ Es habitual que la gente haga “ñapas” para solucionar sus problemas en el CSS mediante a
!important
64
!Important
▪ No es recomendable su uso vamos a ver porque:
▪ Como es el elemento con más peso de todo CSS, solamente lo podemos pisar utilizando
nuevamente !important sobre otro selector y aplicando la cascada:
65
!Important
66
Pero ¿Porque pasa todo esto?
▪ Es recomendable siempre trabajar con clases y así poder aplicar la cascada evitando así el
encontrarnos con estos problemas de especificidad y uso de !important.
▪ De hecho, existe una web llamada CSS Specificity Graph Generator que nos permite ver si
nuestro CSS tiene muchos saltos y por tanto no está bien especificado (ejemplo de la izquierda).
O en cambio, si tiene pocos saltos y por tanto está bien especificado (ejemplo de la derecha).
67
Os recomiendo visitar la siguiente web
▪ Ya que nos permite aprender más
sobre el peso de los selectores
mediante a personajes de Star Wars:
68
7
*, .container, .container href, h1, #titulo, !important
¿Cuál es el peso de los siguientes selectores de CSS? ¿Cuál pesa más? ¿Cuál pesa menos?
Define el peso de cada uno de estos selectores y ordenadores de más específicos a menos específicos.
Aunque lo ideal es que lo calcules automáticamente mirando los apuntes, puedes comprobar posteriormente si
los resultados son correctos mirando algunos de los TIPS que se detallan más abajo.
SOLUCIÓN: !important /
TIPS: style / #título / container
href / container / h1 / *
 Puedes ayudarte de la siguiente web: https://specificity.keegan.st/
 O bien, ponerte encima del selector de CSS desde VSC para comprobar su peso
69
HERENCIA
70
Herencia
▪ Cuando hablamos
de herencia nos
referimos a ciertas
propiedades que
hereda un elemento
de su padre, el
padre de su padre…
Es decir, de otro ▪ Si nos fijamos, nosotros solamente hemos especificado que el
elemento el cual DIV tenga el texto de color rojo y por defecto todos los elementos
contiene a dicho que lo contienen utilizan este estilo. Aunque esto no se produce
elemento. Vamos a con todas las declaraciones de CSS suele aplicarse en
ver un ejemplo: determinadas como el color, el tamaño de la fuente. 71
Herencia
▪ Lo mismo que existen elementos que heredan de sus ancestros, existen otros
que no. Un ejemplo de ello, es un enlace, ya que tiene que destacar entre el
resto del texto. Y, por tanto, no hereda propiedades por defecto:
72
Herencia: uso de initial (reset property)
▪ Lo mismo que existen elementos que heredan de sus ancestros, existen otros
que no. Un ejemplo de ello, es un enlace, ya que tiene que destacar entre el
resto del texto. Y, por tanto, no hereda propiedades por defecto:
73
Herencia: uso de inherit (reset property)
▪ Lo mismo que tenemos la
opción de resetear con
initial los elementos que
heredan de su padre,
también tenemos la
opción de sobre los
elementos que no heredan
de su padre, de decirle a
CSS que si que queremos
que herede. Lo haremos
mediante a inherit de la
siguiente manera: 74
ENFOCANDO EL
INSPECTOR DE
ELEMENTOS HACÍA CSS
75
Maneras de abrir el inspector del navegador
▪ Para abrir el
inspector del
navegador (las
devTools) utilizamos:
□ F12
□ CONTROL + SHIFT + I
□ Botón derecho >
Inspeccionar
□ Más herramientas
> Herramientas
para
desarrolladores
76
Identificando estilos propios y del browser
▪ Si nos metemos sobre un elemento
podemos ver que algunas reglas de
CSS son definidas desde un fichero.
Por ejemplo style.css y otras desde
user agent stylesheet:
▪ Los de users agent stylesheet son
los propios del navegador.
▪ En cambio, si hacemos clic sobre
los nuestros nos llevará hacía
nuestra el punto en concreto del
documento CSS que afecta a dicho
77
elemento:
▪ De hecho, si nos situamos sobre el párrafo, podemos ver que tenemos dos colores
aplicados, el rebeccapurple que está tachado y el greenyellow, que finalmente es
el que se aplica:
78
Si vamos a computed podemos ver el listado de
por ejemplo todas las propiedades que han
afectado a un atributo de un elemento.
Por ejemplo, si nos situamos sobre la propiedad
color, podemos ver todos los colores que se
están aplicando a dicho elemento:
Además de que el color anterior está tachado lo
que nos está indicando que se aplicará el verde.
Pero pese a ello, podemos ver todos los colores
que se están aplicando sobre dicho elemento.
Por lo que esto nos puede ayudar mucho para 79
resolver conflictos dentro de nuestro CSS:
NORMALIZACIÓN
DE WEBS
E IDENTIFICANDO
ESTILOS
80
Normalizando de webs
▪ Los navegadores por defecto tienen unos estilos predeterminados. Aunque a día
de hoy cada vez es más habitual que casi todos los navegadores (que estén
actualizados) compartan prácticamente la totalidad de los estilos. Existen
algunas situaciones en las que estilos CSS no iguales en todos los navegadores
por ejemplo en navegadores que no han sido actualizados a la última versión.
81
Normalizando las webs
▪ Por ello, y para
asegurarnos que todas
las webs se ven igual
en todos los
navegadores, se
aconseja normalizar
nuestras webs
mediante a como la
siguiente
82
Normalizando las webs
▪ Aplicamos el normalice antes de nuestros estilos. Para así poder pisar dichos estilos si
queremos mediante a especificación o cascada.
83
PREFIJOS DE
NAVEGADOR
84
Prefijos de navegador
▪ Desde CSS3, trabajamos a nivel de modulo y no a partir
de versiones como si pasaba con CSS1, CSS2 o CSS2.1.
▪ Aunque los navegadores en algunas ocasiones van
implementando algunas novedades (propiedades) que
van saliendo en los módulos pese a que aún la W3 no
recomienda su uso. Cuando esto sucede, es necesario
utilizar vendor prefixes (prefijos de navegador) con el
fin de poder asegurar que estos propiedades funcionen
en todos los navegadores y en todas las versiones.
▪ Se utiliza sobre propiedades que están definidas
solamente a nivel de borrador (FPWD, WD, CR o PR) y no
a nivel de recomendación (REC) 85
▪ Existe una web
Autoprefixer CSS
online que nos
permite
transformar
nuestro CSS para
proporcionar estos
prefijos de
navegador. Vamos
a ver un ejemplo:
86
▪ También existen
plugins para VSC, como
css-auto-prefix:
▪ Vamos a ver un ejemplo

de como funciona:
87
▪ Por tanto, mediante
a los prefijos,
garantizamos que
una funcionalidad se
adapta lo mejor
posible a los
navegadores
antiguos. Los
prefijos se añaden
de forma
automática según
los datos de CanIUse 88
▪ Aunque en principio con los plugins que ya conocemos no nos harán falta
conocerlos. Para tener una cierta “culturilla” sobre ellos, los prefijos que utiliza
cada uno de los navegadores son los siguientes:
89
COLUMNAS
90
Ejercicio columnas
▪ Para trabajar con columnas tenemos varias propiedades.
Las principales son:
□ column-count: define la cantidad de las columnas
□ column-gap: define la separación de las columnas
□ column-rule-style: especifica el estilo de la regla que separará
las columnas
□ column-rule-width: especifica el ancho de la regla entre las
columnas
□ column-rule-color: especifica el color de la regla de entre las
columnas
□ column-rule: nos permite trabajar directamente column-rule-
style, column-rule-width y column-rule-color a la vez.
91
8
Ejercicio columnas
▪ Define un background color para el HTML
▪ Define un titulo principal
▪ Realiza un lorem*10 dentro de un elemento P
▪ Haz que se párrafo se visualice en 3 columnas
▪ Cuando nos situemos sobre el H1 queremos que el color del texto cambie.
▪ Cuando seleccionemos el texto del párrafo, queremos que cambie el
background y el color del texto.
▪ La separación entre columnas deberá de ser de 40px
▪ Finalmente, define una regla que separé a cada una de las columnas de
92
2px y que sea roja
BOX MODEL
93
¿Qué es el modelo de caja?
▪ Al diseñar un documento, el motor de
representación del navegador representa
cada elemento como un cuadro (usualmente
rectangular) según el estándar del box
model de CSS. CSS determina el tamaño, la
posición y las propiedades (color, fondo,
tamaño del borde, etc.) de estos cuadros.
▪ Cuando hablamos del modelo de caja,
estamos haciendo referencia al sistema que
tiene le navegador para interpretar las
diferentes partes de lo que nosotros
solemos habitualmente solemos llamar caja 94
(o box)
▪ Cualquier elemento HTML (independiente de u forma) ya sea un DIV, un texto, una imagen u otro
elemento, se posiciona en una web mediante a una caja (box en inglés) que se sitúa en una
determinada posición del documento en función de una serie de propiedades.
▪ De hecho, si vamos a la consola y escribimos lo siguiente (ya hablaremos más delante de que es
esto), podemos ver que nos busca el DIV del HTML y nos ofrece ciertos atributos sobre dicha caja:
95
▪ También existe la posibilidad de ver el modelo
de caja e incluso algunas propiedades de dicha
caja (en una versión más reducida) a la manera
que hemos utilizado desde el inspector.
▪ Las cajas son cuadradas o rectangulares
▪ Conocer el funcionamiento del modelo de cajas
es muy recomendable (por no decir obligatorio)
ya que nos permite entender como se posiciona
cualquier elemento que se vea en la pantalla. Y
como finalmente se posiciona en la web como
una caja. Por ello, vamos a profundizar
bastante en explicar su funcionamiento, sus 96
características, etc.
▪ Existe la posibilidad de ver la representación de las distintas partes por las que está formado el
modelo de caja e incluso algunas propiedades de dicha caja (en una versión más reducida) a la
manera que hemos utilizado desde el inspector.
97
▪ 🚨IMPORTANTE🚨 : Las cajas son cuadradas o rectangulares por lo que, no tienen formas
extraña. Y su forma es totalmente independientemente de que nosotros veamos por.
▪ Que veamos un circulo, no significa que la forma que la caja sea redonda. Vamos a ver un
ejemplo:
98
Composición de una caja
▪ Una caja está formada por varias capas, vamos a
explicarlas, en este caso, lo haremos de dentro hacía
fuera:
□ Content: donde va almacena el contenido que aparece en la
caja (texto, imágenes, etc).
□ Padding: el relleno interior de alrededor del contenido
(antes de llegar al borde). El padding es transparente.
□ Border: el borde que rodea/separa el contenido y el padding.
□ Margin: el relleno exterior de la caja aunque está fuera de
los limites de la caja también es considerado como parte de
la caja. El padding es transparente.
▪ El concepto es muy similar al de un regalo de unas
zapatillas, el contenido son las zapatillas, luego el papel
99
que las envuelve, la caja y finalmente el envoltorio.
BOX MODEL:
WITDH Y HEIGHT
100
Box model: width y height
▪ Si a un DIV le especificamos un
tamaño mediante a Width y height
dichas medidas no afectarán a todas
las capas del Box model. Sino, que se
aplicará solamente sobre la capa
más interior de todas, es decir, sobre
la capa de contenido.
▪ Pero dentro de dichas medidas que
hemos definido mediante a width y el
height para el contenido, no incluyen
el padding, el border ni el margin ya
que estos van a parte. Ante el caso
101
que los definamos por supuesto.
▪ Vamos a ver un ejemplo de como aplicar width y height a nuestro elemento DIV. Además,
vamos a aplicar un background-color para que se retaste respecto al resto del documento:
102
▪ Cuando a un elemento como por ejemplo el DIV sobre el que estamos trabajando, no especificamos medidas (width
y height), es el modelo de caja de CSS en función del contenido del elemento, el que se encargará de definir su
tamaño.
▪ Para ello, se basa en ciertos parámetros tales como la resolución de la pantalla, el nivel de zoom y algunas otras
configuraciones. Ya que estás, pueden afectar a como se verá nuestra web en el navegador. Y las debe de tener en
cuenta.
▪ Por ejemplo en este caso, hemos añadido un texto de relleno lorem y no hemos definido una altura o una anchura.
103
Box model: width y height si no hay
contenido
▪ Por ello, cuando definimos un elemento por ejemplo un DIV sin contenido, al ser el modelo de caja de CSS el
encargado de proporcionar un tamaño, al no tener nada decide darle un height (altura) de 0. Lo que provocará
que este no se visualice en la pantalla. Incluso cuando le pongamos un color de fondo al DIV.
▪ Otra opción sería darle nosotros un tamaño mediante a widh y height. Y también sería recomendable darle un
background-color al menos para visualizarlo.
104
Width&heighth en inline o block elements
▪ Existen ciertas
diferencias que
tenemos que tener
muy en cuenta en
función de si
trabajamos con:
□ Elementos de
bloque (block)
como por
ejemplo un
<DIV></DIV>
□ Elementos en
línea (inline)
como por
ejemplo un
enlace <A></A> 105
▪ Los elementos en bloque
permiten trabajar con las
propiedades witdh y height
▪ En cambio, los elementos en
línea, no permiten trabajar
con dichas propiedades, ya
que no tienen medidas. En los
inline elements, las medias
son determinadas por el
contenido.
▪ De hecho, si miramos el Box
Model de un elemento inline
podemos ver que en el
tamaño del contenido nos 106
pone autoXauto:
▪ Si definimos un with y un height, vemos que la capa de contenido del Box Model si que ha
actualizado dicho tamaño, pero que no se refleja en el elemento en línea.
107
108
PADDING
109
¿Qué es el Padding?
▪ El padding nos permite establecer definir/rellenar el
espacio que habrá entre el contenido del elemento
(capa content) y su borde (capa border).
▪ Para trabajar con padding, el Box Model nos ofrece 4
propiedades una por cada lado del elemento. Las
propiedades van en el orden de las agujetas del reloj y
son top, right, bottom y left.
▪ La unidad mínima con la que podemos trabajar es
individualmente por cada uno de los 4 lado del
elementos. Una por cada dirección. Y son:
□ Padding-top
□ Padding-right
110
□ Padding-bottom
□ Padding-left
Trabajando el padding individualmente
▪ Si queremos trabajar el padding individualmente con cada uno de los lados, lo podemos
hacer de la siguiente manera:
111
Visualizando las capas desde el Box Model
▪ Si ahora nos metemos en el box model y vamos seleccionando las capas, podemos ver que
cuando nos situamos sobre ellas aparece una especie de sombra que nos permite
identificar la capa en particular en el elemento (en este caso el DIV):
112
Compatibilidad de padding, border y
margin con inline y block
▪ Anteriormente hemos hablado de las limitaciones de los elementos inline. Estás solamente
se aplican sobre la capa de content. El resto de capas, margin, padding y border pueden ser
utilizadas sin problemas en ambos elementos (bloque/línea).
113
EXPLICANDO SHORT HAND
(APLICABLE EN PADDING,
BORDER Y MARGIN)
114
¿Qué es un short hand?
▪ En las diapositivas anteriores, ya hemos
visto que existe una manera de trabajar,
es decir, de definir el padding de cada
uno de los lados individualmente.
▪ Pero existe una propiedad, que nos
permite agrupar dichas propiedades
para trabajar con ellas de una forma
más sencilla. Evitando así, tener que
definir 4 propiedades y pudiendo
trabajar mediante a una sola propiedad
todos los valores tanto individualmente
o colectivamente, en función de la
115
cantidad de valores que le definamos a
dicha propiedad
Modificación el color del padding
▪ Aunque es difícil, existe la posibilidad de poner un color de fondo solamente para un
background. Para ello, debemos de:
□ Definir una variable padding --padding: 10px;
□ Asignar la variable al padding
□ Crear una sombra que será una sombra para la caja a la que le pasamos la variable padding
116
Modificación el color del padding
▪ Si ahora seleccionamos el padding, vemo que se nos marca dicha zona:
▪ Aunque esto se nos escapa un poco por su dificultad, ya que realmente lo que pintamos es
una sombra que justamente ocupada toda la zona del padding, no el padding. Pero nos sirve
ya que ambas tendrán el mismo valor. 117
BORDER
118
¿Qué es el border?
▪ Nos permite definir el borde que englobará a la caja (contenido + padding).
▪ Las propiedades shorthand con las que principalmente trabajaremos son:
□ Border-width: define el grosor (el ancho) del borde. Por defecto, el default vaue es 1.6
□ Border-style: definen el tipo (estilo) de borde: solid, dashed… Por defecto, el default value es none.
□ Border-color: definen el color del borde. Por defecto, el default value es black.
▪ Aunque, nuevamente también CSS también nos ofrece un shofthand de dichas propiedades:
119
Ejemplo de como trabajar con border
120
Desmenuzando el shorthand de otro
shorthand
▪ Aunque cada propiedad ▪ Border-color se
shorthand: border-width, subdivide en:
border-style y border-color □ Border-top-color
vuelven a agrupar cada una de □ Border-right-color
las propiedades para cada uno □ Border-bottom-color
de los lados: □ Border-left-color
▪ Border-style se subdivide en: ▪ Border-width se
□ Border-top-style subdivide en:
□ Border-right-style □ Border-top-width
□ Border-bottom-style □ Border-right-width
□ Border-left-style □ Border-bottom-width
□ Border-left-width 121
Ejemplo de
como
trabajar con
propiedades
para varios
bordes
distintos
122
Tipos de bordes
▪ La propiedad border-
style ante el caso de
trabajar con dicha
propiedad de forma
• dotted- Define un borde punteado
individual. O bien la • dashed- Define un borde discontinuo
propiedad central en el • solid- Define un borde sólido
caso de utilizar el • double- Define un borde doble
• groove- Define un borde ranurado 3D. El efecto depende del valor del color del borde.
atributo shorthand, nos
• ridge- Define un borde estriado 3D. El efecto depende del valor del color del borde.
permiten utilizar los • inset- Define un borde de inserción 3D. El efecto depende del valor del color del borde.
siguientes bordes: • outset- Define un borde inicial 3D. El efecto depende del valor del color del borde.
• none- No define ningún borde
• hidden- Define un borde oculto
123
Valores para el borde: border-width
Existe la posibilidad de trabajar con varias medidas para trabajar con border-width. Vamos a verlas:
▪ Medium: Nos permite especificar que el borde es medio. Esta opción es la de por defecto
▪ Thin: Nos permite especificar que el borde será delgado.
▪ Thick: Nos permite especificar que el borde será grueso.
▪ Length: Nos permite definir el grosor del borde
▪ Initial: Nos permite definir el valor predeterminado
▪ Inherit: Nos permite heredar el valor de dicha propiedad del valor de su elemento padre
124
9
Ejercicio de bordes
125
MARGIN
126
¿Qué es el margin?
▪ Margin es la capa más externa del BoxModel y nos permite definir el espacio desde el borde del
elemento hacía afuera. Por tanto, nos permite separar el elemento actual del resto.
▪ En margin también tiene el shorthand sobre el que podemos trabajar con 4, 3, 2 o 1 valor.
▪ Importante, el margin no tiene efecto en el tamaño de la caja (solamente cuenta del borde para
dentro).
127
Vamos a ver un ejemplo de como trabajar
con margin
128
con margin
▪ Si seleccionamos el margin del elemento desde el Box Model, podemos observar que tenemos 15
px en todos los lados. Pese a ello, al ser un elemento en bloque si nos fijamos el resto el lado
derecho también aparece como parte del margin. Vamos a verlo:
129
con margin
▪ Si trabajamos con elementos en línea, los márgenes, solamente pueden ser trabajados en
horizontal (izquierda y derecha) y no en vertical (arriba y abajo). En cambio, si el elemento es en
bloque como el anterior, si que podemos trabajar con los 4 márgenes.
130
con margin
▪ Si trabajamos con elementos en línea y seleccionamos los márgenes, podemos ver que
solamente aparecen a la izquierda y a la derecha, pese a aparecer todos en el Box Model. Vamos
a verlo:
131
MARGIN AUTO
132
Posicionando elementos horizontalmente
mediante a margin
▪ Para posicionar un elemento horizontalmente debemos de:
□ Trabajar con elementos de bloque, ya que los elementos en línea al no tener medidas (ya que no se
puede declarar) no podrán ser ubicados.
□ Tenemos que definir unas medidas (width y height) sobre el elemento con la finalidad de evitar que el
elemento ocupe todo el ancho de la página y así poder utilizar el margen lateral para posicionar a los
elementos.
133
mediante a margin
▪ Con margin-right: auto le estamos indicando a CSS que será el navegador el encargado de
definir el margen derecho. Si no existe otra propiedad de margin-left: auto, el navegador
cogerá todo el margen derecho disponible (al 100%) por lo que ubicará al elemento en el lado
opuesto (izquierda).
134
mediante a margin
▪ Con margin-left: auto le estamos indicando a CSS que será el navegador el encargado de
definir el margen izquierdo. Si no existe otra propiedad de margin-right: auto, el navegador
cogerá todo el margen izquierdo disponible (al 100%) por lo que ubicará al elemento en el lado
opuesto (derecho).
135
mediante a margin
▪ Para posicionar un elemento horizontalmente, podemos utilizar margin. Vamos a verlo:
▪ Mediante a esta manera posicionamos al elemento en el centro ya que le proporcionamos el

50% del espacio disponible a cada uno de los lados. 136
mediante a margin
▪ Si intentamos hacer lo mismo con los márgenes superior (top) e inferior (bottom) y los ponemos
a auto, podemos ver que nada cambia ni en el elemento ni el Box Model. Esto se produce debido
a que los valores por defecto son 0.
137
¿CUANDO USAR
MARGIN O PADDING?
138
mediante a margin
▪ Para tomar una decisión, deberíamos de
pensar sobre lo que queremos hacer.
▪ Si queremos separar el elemento de
otros elementos del documento
deberíamos de trabajar con margin.
▪ En cambio, si queremos aumentar el
espacio entre el borde y el contenido,
utilizaremos padding.
139
BOX SIZING
140
Box sizing
▪ El box-sizing es una propiedad mediante a
la cual definimos al user agent como debe
calcularse el ancho y el alto total del
elemento.
▪ El box model trabaja con content-box por
defecto.
▪ ¿Qué quiere decir esto? Pues que el
tamaño (witdh y height) se coge sobre el
contenido o sobre las dimensiones. Y el
resto de capas van aparte.
▪ Si utilizamos box-sizing, en cambio,
vemos que el tamaño es el total de todo el 141
conjunto de capas (sin contar el magin).

Box sizing
▪ En ambas maneras el
tamaño del box no
cuenta el margin. Ya
que, realmente por
decirlo de alguna
manera, la caja
empieza donde empieza
el borde. Por lo que,
para la medida de la
caja, el definir un
margin o no tiene efecto
sobre el tamaño de la 142
caja.
Box sizing
143
Box sizing
144
Box sizing
▪ También podemos realizar el calculo de forma
manual si trabajamos con content-box. Vamos a
ver como hacerlo:
▪ Con box-sizing a border-box:
□ 100 + 20 + 20 + 3 + 3 = 146 width
□ 50 + 20 + 20 + 3 + 3 = 96 height
▪ Con box-sizing a border-box:

□ 54 + 20 + 20 + 3 + 3= 100 width
□ 4+20+20+3+3 = 50 height
▪ Hay que coger el content + sumar dos paddings 145

y dos bordes (el horizontal o vertical)
TEXT-ALIGN
146
Text-align
▪ Text-align nos permite ALINEAR EL CONTENIDO DE UNA CAJA en el eje horizontal
(right/center/left).
▪ Los valores con los que podemos trabajar son:
□ Left: Alinea el texto a la izquierda dentro de su box. Por defecto, se utiliza left para posicionar un texto.
□ Right: alinea el texto a la derecha
□ Center: centra el texto en medio de la caja
□ Justify: su funcionamiento es algo peculiar. Ya que estira el texto con la finalidad de que todas las líneas
tengan el mismo ancho. Es recomendable no utilizarla, ya que usualmente provoca que se generen
espacio que no son todos iguales entre las palabras.
□ inherit: hereda esta propiedad de su elemento padre/principal
□ Initial: establece la propiedad en su valor determinado.
147
Text-align
▪ Es recomendable que el contenido no tenga un width ya que puede afectar o como mínimo es
recomendable que no supere el tamaño del witdh.
▪ Una cosa importante es que cuando trabajamos con displays: inline-block o inline no podemos
utilizar la propiedad text-align. Por lo que solamente es compatible con elementos de bloque.
148
Text-align
▪ Vamos a ver un ejemplo con un bottón:
149
Text-align
▪ Si trabajamos con justify podemos ver que si el elemento no ocupa/abarca más de una línea,
justificar no hace nada. Ya que para ajustarse primero tiene que ajustar a la segunda línea, y
luego, se justificará la primera línea pero no la segunda:
150
10
Ejercicio de text-align
▪ Clona la siguiente web y posiciona los elementos mediante a text-align:
151
BORDER RADIUS
CIRCULAR
152
Border radius circular
▪ El vértice dentro del box model, es el punto
donde se juntan/unen dos lados de los bordes
de un elemento.
▪ La propiedad border-radius, nos permite
redondear dichos vértices de un box. Vamos a
ver un ejemplo:
▪ Lo que realmente hacemos con border radius es
dibujar círculos mediante a los que daremos
forma a nuestro elemento. Vamos a verlo:
▪ Border-radius es un short hand que nos permite
definir un valor para todos los vértices del
153
elemento.
▪ Si queremos, también podemos trabajar
individualmente con cada uno de los elementos.
▪ Existe una manera de no tener que escribir
todas la propiedad al completo con tan solo
escribir b (de botón), t o b (de top o de bottom), l
o r(de left o de right) y finalmente r (de radius)
ya podríamos trabajar con dicho borde:
▪ Las abreviaturas son:

□ BTLR, BTRR, BBTT, BBLR
154
▪ Si el DIV tiene las mismas propiedades y utilizamos 50% o su equivalente en px el DIV se
convertirá en una circunferencia. Vamos a verlo:
155
BORDER RADIUS
ELÍPTICO
156
Border radius elíptico
▪ Anteriormente pasábamos
un solo valor a border
radius, la forma la definía
un circulo. En cambio, si
pasamos varios valores
con una / en medio nos
generará una elipse de A x
B, mediante a la cual
forma que da forma al
elemento será una elipse.
Vamos a verlo:
▪ En este caso, la elipse 157
sería de 10 x 25:
Border radius elíptico
▪ El trabajar con dos valores
definimos el primer valor que
corresponde al eje X y el segundo
valor que corresponde el eje Y.
▪ Podemos aplicarlo tanto
individualmente margen a margen,
como de forma genérica. Es
bastante más sencillo que aplicarlo
a varios márgenes a la vez con
border-radius por lo que nosotros lo
usaremos individualmente. Vamos a
ver un ejemplo: 158
11
▪ Clona la siguiente tabla:
159
OVERFLOW
160
Overflow
▪ Cuando tenemos una caja por
ejemplo un DIV, al ser un
elemento en bloque, podemos
definirle las propiedades width
y heigth sin que estás sean
rechazadas.
▪ Pero en determinadas
circumstancias es posible que
el contenido supere el tamaño
de dicha caja haciendo que este
se desborde como si
intentáramos meter más agua
161
de la que cabe en una piscina.
Overflow
▪ Los ejes que tenemos son
los siguientes:
162
Overflow
▪ Las web empieza
en el punto 0,0 de
ambos ejes (X e Y):
163
Overflow
▪ El desbordamiento se podría
producir tanto en el eje X como
en el eje Y.
▪ En el ejemplo anterior
desbordábamos solamente por
el eje Y, en este caso lo vamos a
hacer en los dos ejes mediante
a transform (lo explicaremos
más adelante) solamente quiero
que os quedéis con que se
desborda el elemento en ambos
ejes. 164
Overflow Algunos de los principales valores de overflow son:
 Visible: es el default value, por lo que si queremos trabajar con
el no sería necesario definir nada.
▪ Overflow es la propiedad que  Hidden: el contenido desbordado no se mostrará. Aunque si
nos permite definir/controlar definimos este tipo de valor en la propiedad overflow, el otro
el comportamiento de una eje automáticamente recibirá el valor de scroll.
caja cuando se produce un  Scroll: añadirá una barra de scroll en el eje correspondiente. La
desbordamiento. barra se mostrará siempre incluso cuando no haya
desbordamiento. Si trabajamos con los dos ejes se aplica a
▪ Para ello, podemos: ambos.
□ Trabajar con la versiones  Auto: autogestiona si se necesitan barras de scroll y si las
individuales para cada eje necesita las pondrá sino no.
(overflow-y) (overflow-x)
□ Trabajar con el shorthanded
de ambas versiones.
165
Overflow
▪ Tal y como hemos
comentado,
podemos trabajar
individualmente
con los ejes o con
su shorthand.
Vamos a ver un
ejemplo de
ambos:
166
12
Ejercicios de Overflow
▪ Ejercicios:
□ 1. Controla el desbordamiento
de un elemento con hidden. El
resultado tiene que ser similar
al siguiente:
□ 2. Controla que tenga una barra
en el lado izquierdo solamente
cuando el contenido desborde.
El resultado tiene que similar
al siguiente:
167
MARGENES
COLAPSADOS
168
Márgenes colapsados
▪ Una extraño y peculiar comportamiento
de CSS es el siguiente. Tenemos un DIV
con dos párrafos y podemos ver que
tenemos un espaciado (margin) superior
pese a tener el documento normalizado
y no tenemos márgenes en el DIV que
hace de contenedor.
▪ El tema es que el P si que tiene
márgenes y hace que se colapse el DIV.
Aunque esta peculiaridad solamente
sucede sobre los márgenes verticales
(top y bottom) no sobre los verticales
169
(right y left).
▪ La primera opción es
poner un margin-top
a 0 lo que lo
arreglaría:
▪ Por ello, se aconseja

dar margins en el
borde inferior y no en
el superior. 170
Si nos fijamos, lo que internamente hace CSS es darle 20 px al borde del elemento con id txt-1. Y,
posteriormente, como hay otro margin top que chocha con el margin botón del otro elemento
incrementa 20 px pero los otros 60 px los comparte sino que no hace 20 + 40 sino que comparten 20
y el 2 elemento añade otros 20.
Por ello, se aconseja dar margins en el borde inferior (bottom) y no en el superior (top).
171
Anteriormente, lo hemos arreglado controlando los márgenes desde la etiqueta P. Aunque existen
algunas maneras más limpias de hacer que esto no pase. Vamos a verlas:
172
DISPLAY
173
Display
Como ya vimos, en el bloque
de HTML, los elementos
pueden ser en línea o en
bloque. A esto, lo llamamos
el contexto que
automáticamente otorga un
navegador por defecto a un
elemento.
Vamos a repasar como
identificamos si un elemento
es inline o block:
174
Display
Aunque por defecto los elementos son de bloque o de línea por defecto, nosotros podemos modificar
dicho contexto que trae un elemento de forma predeterminada (por defecto) mediante a la
propiedad display. Los valores son:
 Inline: los elementos no tienen tamaño, ni se le puede dar un tamaño. Es el contenido el que define su tamaño. Y
muestra a los elementos en línea siempre y que los elementos quepan en dicha línea sino saltaría de línea
 Block: los elementos ocupan toda la fila a excepción de que se especifique un tamaño.
 Inline-Block: tienen las mismas características que los elementos en línea, a excepción de que nos permiten
darles un tamaño.
 None: hace desaparecer el elemento del navegador, aunque aparece en documento si miramos las DevTools.
Digo que aparece para que tengáis en cuenta que es un elemento multimedia, por lo que tened en cuenta que
cuando carguemos un documento si ponemos el display a none, dicho recurso se llamará.
175
Display
Vamos a ver un ejemplo con display none:
176
Display
Vamos a ver un ejemplo con display inline-block:
Si nos fijamos, al ser todos los elementos en línea y por dimensiones poder estar ubicados dentro
de la misma línea, los elementos se ponen todos en línea. Se utiliza en contadas ocasiones, pero
es muy útil, cuando queremos darle márgenes distintos a un elemento en el eje vertical (top,
bottom) o tamaño distinto. Vamos a ver un ejemplo:
177
OUTLINE
178
Outline
▪ Outline, nos permite dibujar bordes fuera del modelo de caja. La
principal característica que diferencia el comportamiento de outline
frente a un borde normal es que este no ocupa tamaño fuera de la
caja.
▪ La propiedad outline es un shorthand que equivale a trabajar con:
□ outline-style: controla el estilo del borde
□ outline-width: controla la anchura del borde
□ outline-color: define el color del borde
▪ Algunas características de outline son:
□ Tenemos que trabajar de forma global, es decir, todos los lados. Ya que no es
posible hacerlo 1 a 1.
□ No se puede redondear un outline ya que no forma parte del modelo de caja.
Por lo que no puede adaptarse a él.
179
□ No ocupa espacio en la caja, pero cuando más grande se haga el borde, más
nos acercaremos al resto de elementos.
Outline
▪ Vamos a ver un ejemplo:
180
Outline
▪ Vamos a ver un ejemplo de lo que comentábamos que si el outline es
mayor que el margin podemos que tiene el elemento puede llegar a
sobrepasar el margin:
181
Border VS Outline
▪ En cambio si trabajamos con bordes podemos ver que si que afecta a
la caja
182
OUTLINE-OFFSET
183
Outline-offset
▪ El atributo outline-offset nos permite separar el outline de la caja.
184
Outline-offset
▪ Existe la posibilidad de crear
un outline-offset hacía a
dentro de la siguiente
manera:
185
13
Ejercicios de outline
▪ A partir de un outline haz que cuando se produzca una determinada circunstancia (click,
ponerte encima del elemento…) haz que se realice un efecto sobre un outline ya utilizado. Por
ejemplo:
Sin seleccionar Seleccionado

186
BOX-SHADOW
187
Box Shadow
▪ Nos permite añadir
sombras a nuestros
elementos.
▪ Lo que realmente hace box
shadow es clonar la caja,
con todas sus propiedades
(width, height, boder-
radius…). Para
posteriormente situarla en
la posición que le
indiquemos.
▪ Vamos a ver un ejemplo: 188
Box Shadow
▪ Los atributos con los que podemos trabajar con box-shadow son los siguientes:
□ Offset-x: desplazamiento en el sombra en el eje X (required)
□ Offset-y: desplazamiento en la sombra eje en el Y (required)
□ Color: define el color de la sombra. El default color es black ya que lo coje de la propiedad color de
su padre.
□ Inset: determina si la sombra será interior o exterior. Si no se especifica se asume que por defecto
es exterior, en cambio, si se especifica se asume que es interior.
□ Blur-radius: desenfoque de la sombra. Cuando más grande sea el valor mayor será el desenfoque.
□ Spread-radius: expande y hace crecer la sombra. Cuando mayor sea el valor, mayor será la
expansión y el crecimiento de la sombra.
189
Box Shadow
▪ Algunos ejemplos de como combinar estas propiedades son:
/* Keyword values */
box-shadow: none; /* Keyword values */
box-shadow: 60px -16px teal; /* offset-x | offset-y | color */
box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: inset 5em 1em gold; /* inset | offset-x | offset-y | color */
box-shadow: 3px 3px red, -1em 0 0.4em olive; /* Any number of shadows, separated by commas */
/* Global keywords */
box-shadow: inherit;
box-shadow: initial; 190
box-shadow: unset;
Box Shadow
Existe la posibilidad de definir varias sombras tanto individualmente en cada uno de los elementos:
191
Box Shadow
Como varias veces en el mismo elemento:
192
Box Shadow
Si nos fijamos, podemos añadir múltiples sombras mediante a box-shadow y que estos no ocupan un
tamaño dentro del box model:
193
PRESENTANDO A
POSITION
194
195
Position
La propiedad position dictamina/especifica como será posicionado nuestro elemento dentro del
documento HTML.
Para entender el funcionamiento de position al completo, es necesario entender varios conceptos.
Vamos a verlos:
 Flujo de renderizado: dibuja los elementos de izquierda a derecha y desde
arriba hacía abajo desde el punto 0,0
 Espacio reservado: es el hueco que el elemento reserva/ocupa dentro de un
documento para poder situarse. La finalidad de esto es que otro elemento no
se situé en el sitio donde tenemos actualmente otro elemento.
 Elemento posicionado: cuando el elemento tiene la propiedad position con un
valor relative, absolute, fixed o sticky. O en otras palabras, cualquier valor
que no sea static.
 Stacking context (o contexto de apilamiento): no permite definir el orden en 196
el que se aplican las cajas dentro de un mismo contenedor (elemento).
Position
Para realizar los ejemplos nos vamos a basar en el siguiente HTML. En el que tenemos dos cajas (DIVs)
con un contenido y un tamaño de 100px por 100px:
197
Position
Si intentamos utilizar por ejemplo desplazar el DIV 1 mediante a la propiedad top sin tener definida la
propiedad position con un valor que no sea el que viene por defecto (static). Vemos que no podemos
mover el elemento:
198
Position
En cambio, si definimos la propiedad position con absolute, relative, fixed o sticky, vemos que ahora si
que se aplica el desplazamiento de nuestro elemento y funciona la propiedad top.
Lo equivalente a utilizar top 50px es usar bottom -50px haced la prueba

199
Position: desbloquea propiedades
Una vez posicionado el elemento, se “activan”, es decir, ya podemos utilizar los siguientes valores:
 Top: nos permite posicionar/mover el elemento desde la parte
superior del elemento. Concretamente, desde el punto (0,0), es
decir, respecto al vértice de la parte superior izquierda.
 Left: nos permite posicionar/mover el elemento desde la parte
izquierda. Concretamente, desde el punto (0,0), es decir,
respecto al vértice de la parte superior izquierda.
 Right: nos permite posicionar/mover el elemento desde la parte
derecha. Concretamente, desde al vértice de la parte inferior
derecha, el punto en concreto dependerá del tamaño de la caja.
 Bottom: nos permite posicionar/mover el elemento desde la
parte inferior. Concretamente, desde al vértice de la parte
inferior derecha, el punto en concreto dependerá del tamaño de
200
la caja.
Position: desbloquea propiedades
Una vez posicionado el elemento, se “activan”, es decir, ya podemos utilizar los siguientes valores:
 Z-index: nos permite mover el elemento en
el contexto de apilamiento (eje Z). Es decir,
nos permite controlar la profundidad de los
elementos para ello, cuando por ejemplo
tenemos dos elementos sobrepuestos uno
encima del otro, es el z-index el que nos
permite controlar cual se pone delante o
detrás.
201
Position: solamente permite mover el
elemento respecto a un eje
▪ Una vez el elemento está posicionado, solamente lo
podemos mover respecto a un eje, no respecto a
ambos.
▪ Esto significa que si utilizamos:
□ El eje superior debemos de trabajar con top y left.
□ En cambio, si utilizamos el eje inferior, deberemos
utilizar right y bottom.
▪ Esto es así ya que realmente “no estamos moviendo
el elemento entero”, es decir, la caja sino que
definimos un top y left o un right y un bottom que nos
permitirán desplazar el vértice superior izquierdo o
202
inferior derecho a dicho punto.
▪ El elemento se posiciona en función de su box Model que deberá de ser rectangular o cuadrado
independientemente de su forma. Si os fijáis, en este caso, podemos ver que pese a que hemos
indicado mediante a border-radius que el elemento será redondo, realmente el contenido del
elemento, empieza en el punto 0,0 del box model. Que es el que se utiliza para posicionar a
dicho elemento. Vamos a verlo:
203
204
▪ Si intentamos mover el elemento hacia la izquierda (con left) y previamente lo hemos movido hacía
la derecha (right) vemos que no funcionará. Y que solamente le hará caso a los movimientos que
hagamos respecto al primero de estos dos vértices. Vamos a verlo:
205
POSITION STATIC
206
Valores de position: static
▪ Position nos permite utilizar los siguientes valores:
□ Static: el default value. Por lo que si queremos tener dicha propiedad con este valor, no hará falta
asignar dicha propiedad. Con este valor para position el elemento no está posicionado cosa que es
necesario para poder moverlo. Por lo que si utilizamos top, bottom, etc. No podremos mover el
elemento ya que no static actualmente no está posicionado.
207
Valores de position: static
▪ Cuando trabajamos con el valor static en el valor
position (recordad que es el default). Lo que realmente
estamos haciendo es dejar el elemento tal y como se
posiciona cuando se realiza el renderizado del
documento HTML:
▪ Estos elementos (los definidos con static) son la base

sobre la que trabajará el contexto de apilamiento (o
escalera de apilamiento) posteriormente.
208
POSITION RELATIVE
209
Valores de position: relative
▪ Relative: el elemento mantiene su posición y medidas en el flujo de renderizado, es decir, el
documento mantiene/continua reservado el espacio en el que anteriormente el elemento
previamente antes de moverlo. Pero ahora si que tiene la capacidad de moverlo.
▪ Si desplazamos el elemento (con top, bottom…) este lo hará utilizando se punto de referencia
actual. Es decir, el elemento, se posiciona en función del elemento HTML de referencia.
210
Valores de position: relative sobre body
▪ En este caso, cuando
trabajamos con position
relative estamos
utilizando como punto de
referencia el elemento
padre. Por ejemplo, si
trabajamos desde el
elemento body
directamente estamos
haciendo referencia al
punto 0,0 del body. Vamos
a ver un ejemplo: 211
Valores de position: relative
▪ En cambio, si
trabajamos desde
dentro de otro
elemento, y por
ejemplo, este está
desplazado, el
punto de
referencia será
relative (de ahí su
nombre) al
elemento actual.
Vamos a ver un 212
ejemplo:
POSITION ABSOLUTE
213
Valores de position: absolute
Absolute: el elemento PIERDE su posición y medidas en el
flujo de renderizado, es decir, el documento no mantiene el
espacio reservado que ocupaba dicho elemento previamente
antes de moverlo. Pero si que tiene la capacidad de moverlo.
Si tiene un elemento utilizará dicho elemento como
referencia. Sino, utilizará el documento HTML.
Cuando un elemento tiene la propiedad position con el valor absolute pierde el espacio reservado, eso significa,
que el resto de elementos se pueden posicionar sobre dicho espacio porque para HTML ya no hay nada en dicha
posición.
Además, si el elemento es en bloque y no tiene medidas definidas (width y height), por defecto, ocupa el 100% del
ancho de la web. Pero tras definir la propiedad position con el valor absolute, el elemento pierde sus tamaños,
es decir el width y el height que tenga por defecto recibiendo solamente el width y height de su contenido. Esto
214
no pasaría cuando en línea ya que directamente solamente cogen el espacio justo para almacenar su contenido.
Valores de position: absolute sin medidas
En este caso, cuando trabajamos
con position absolute y los divs no
tienen medidas si nos fijamos,
podemos ver que pierden sus
medidas actuales:
Y además, ya no ocupa el tamaño
del bloque sino que ocupa el
tamaño solamente del contenido
215
Valores de position: absolute con medidas
▪ En este caso, cuando
trabajamos con position
absolute y los divs si que
tienen medidas, si nos fijamos,
podemos ver se respectan
dichas medidas. Vamos a verlo:
216
Valores de position: absolute con inline
Cuando trabajamos con elementos en línea si les definimos el atributo position: absolute, dicho elemento
se convierte automáticamente en bloque. Eso significa que podrá recibir medidas (width y height),
márgenes, etc. Vamos a ver un ejemplo:
Realmente, esto se produce porque le estamos dando un contexto de bloque automáticamente al definir
position: absolute sobre un elemento. Por lo que cuando trabajemos con dicha propiedad (position:
absolute) no será necesario definir la propiedad display con el valor block ya que automáticamente
nuestro elemento será de bloque.
217
Valores de position: absolute
▪ Al estar situado en
el elemento body,
también podríamos
utilizar bottom 0
(es valido en el
resto de valores de
position también) y
lo posicionaríamos
en la parte de
abajo del cuerpo
de nuestro HTML.
Vamos a verlo: 218
Valores de
position:
absolute con
medidas
▪ Absolute se posiciona respecto
al elemento que lo contenga. En
este caso, vamos a ver un
ejemplo sobre un elemento
posicionado directamente sobre
el body. Vamos a ello:
219
Valores de
position:
absolute con
medidas
▪ Absolute se posiciona respecto al
elemento que lo contenga. En este
caso, vamos a ver un ejemplo sobre
un elemento relativo. Al elemento
relativo habría que darle un
tamaño ya que sino no se 220
visualizaría. Vamos a ello:
POSITION FIXED
221
Valores de position: fixed
▪ Fixed: el elemento PIERDE su posición y medidas en el flujo de renderizado, es decir, el documento
no mantiene el espacio reservado que ocupaba dicho elemento previamente antes de moverlo. Si
hacemos schroll, el elemento continuará fijo en dicha posición.
▪ Fixed tiene una mayor compatibilidad (principal en navegadores viejos) frente/respecto a sticky (lo
veremos unas diapositivas más abajo). Por lo que su uso, es recomendable principalmente cuando
queramos tener compatibilidad con navegadores antiguos.
▪ Pero sticky es algo más sencilla y potente que fixed y habitualmente se está empezando a dejar de
utilizar.
222
▪ El ejemplo del que partiremos será el siguiente:
223
▪ Es muy importante definir una posición para el elemento para que el elemento se quede fijo
cuando realizamos el schroll ya que sino no funcionará. Vamos a verlo:
224
▪ Otra cosa a tener en cuenta, es que el elemento con fixed, se posiciona
respecto al documento HTML independientemente de que dicho elemento
esté contenido respecto a otro elemento. Si por ejemplo, yo le pongo
bottom a un elemento, vemos que se posiciona en la parte inferior.
225
▪ Uno de los principales problemas de fixed, es que por decirlo así se come un parte el margen de los
elementos. En este caso, vemos que se está “comiendo” parte del margen del margin-top.
226
▪ Para solucionar esto. Una manera de una manera sencilla, simplemente tenemos que añadir un
margin-top al body. Vamos a verlo:
▪ Si os fijáis, el margen del title 1 ahora si que se visualiza al completo:
227
▪ Por tanto, mediante a position fixed, permite fijar un elemento en un determinado punto de la
página.
▪ El motivo por lo que se está empezando a utilizar sticky y no fixed es que determinadas situaciones,
se quiere hacer que en un determinado punto el elemento pase de ser fixed a relative e un
determinado punto. Para ello, cuando utilizamos position fixed, tenemos que trabajar con JS. Para
evitar esto nace position sticky del que hablaremos en la siguiente diapositiva.
228
POSITION STICKY
229
Valores de position: sticky
▪ Sticky: es una combinación de dos propiedades: relative y fixed. Con este tipo de
posicionamiento los valores top, left, buttom y right no sirven para mover el elemento.
Sino para indicarle en que punto pasará a tener un comportamiento de position fixed.
Hasta llegar a ese punto se comportará como si fuera relative.
230
▪ El primer ejemplo es el siguiente. Si os fijáis, en este caso, el funcionamiento es
equivalente a fixed, pero en este caso, además, directamente se respecta el margen
del elemento H1:
231
▪ Con sticky existe la posibilidad de pasar en un determinado punto de sticky (pegajoso)
que tiene un comportamiento similar a fixed a relative. Vamos a ver un ejemplo:
232
En este caso, vemos que hemos
que el elemento pasa a ser fixed a
partir del pixel 50 y hasta que el
header llega a 200 px (ya que coge
el tamaño del elemento padre
como referencia) por lo que si no
definimos un tamaño al padre no
hará nada. Una vez llega a los 200
px del elemento padre dejará de
tener el comportamiento fixed
para pasar a relative. Vamos a
233
verlo:
Además, también nos permite realizar cosas tan chulas como la siguiente:
234
14
Ejercicio posicionando DIVs
Realiza el siguiente ejercicio mediante a 5 DIVS:
235
STACKING CONTEXT
(O CONTEXTO DE
APILAMIENTO) Y
Z-INDEX
236
Stacking context (contexto de apilamiento)
▪ Inicialmente la responsabilidad
de posicionar/ordenar los
elementos de nuestro HTML
recae sobre el contexto de
apilamiento.
▪ Por tanto, El contexto de
apilamiento, por tanto, es el
encargado primeramente de
posicionar nuestros elementos
poniendo algunos delante de
otros en función de ciertos
237
criterios.
▪ El stacking context, por tanto, sería algo
así como el encargado de ir situando a
nuestros elementos dentro del documento
HTML. Para ello, aplica un conjunto de
normas que harán que en unas
determinadas situaciones unos elementos
se posicionen por encima de otros, otros
por debajo de otros o inclusive a un
mismo nivel dentro de los documentos
HTML.
▪ Para ello, aplica distintos contextos en
238
función de cada situación.
▪ El orden que se sigue para posicionar los
elementos es el siguiente:
□ Elementos con z-index negativo
□ Elementos no posicionados (position: static que
es el valor por defecto de cualquier elemento
HTML).
□ Elementos posicionados (con la propiedad
position con absolute, fixed, sticky o relative)
sin z-index declarado (o con la propiedad z-
index con el valor auto).
□ Elementos posicionados (con la propiedad
position con absolute, fixed, sticky o relative)
con z-index declarado. 239
Z-index
▪ Inicialmente la responsabilidad de ordenar los elementos de nuestro HTML recae sobre
el contexto de apilamiento (staking context). El contexto de apilamiento, por tanto, es
el encargado primeramente de posicionar nuestros elementos poniendo algunos
delante de otros en función de ciertos criterios.
▪ La propiedad z-index junto a si los elementos son posicionados o no (atributo position
en static) nos permite modificar el orden de apilamiento en el que se posicionan
nuestro elementos dentro de un HTML.
240
Z-index
▪ Basándonos en el siguiente ejemplo, podemos ver que por defecto ambos
elementos están al mismo nivel y que se respecta el espacio reservado del otro
elemento:
241
Z-index
▪ Si aplicamos el position relative al box-1 y lo desplazamos hacía abajo vemos que se
posiciona sobre el box-2. Esto se produce debido a que primeramente se posicionan en
el HTML los elementos con position static (el valor por defecto). Y, en este caso en los
que tenemos el elemento box-1 posicionado, por lo que se apilan aplicando las reglas
que acabamos de ver en función de lo que hemos definido en el CSS. Es decir, como el
box-1 tiene position relative se pone encima del box-2 que trabaja con static al no tener
nada definido:
242
Z-index
▪ Si ahora aplicamos relative a ambos DIVs, vemos que el orden de apilamiento le
vuelve a hacer caso al HTML ya que ambos elementos están posicionados con
position relative por lo que se pone encima el elemento que está más abajo dentro
del documento HTML. Vamos a verlo:
243
Z-index
Recordad que para usar z-
index los elementos tienen
que estar posicionados. Si
ahora hacemos un z-index: 10
al elemento box-1 vemos que
se posicionará por delante:
Modificando con ello el

comportamiento inicial del
HTML.
244
Z-index
En este caso, vemos que al
tener el z-index mayor el
box2, se posiciona por delante
de box1. Vamos a verlo:
Usualmente separamos los z-

index de 10 en 10 o de 50 en
50 o de 100 en 100 por si
tenemos que añadir nuevos
elementos no tener que tocar
los elementos elemento a 245
elemento.
Z-index con padre e hijo
Partiendo del siguiente código, vamos a ver que pasa si intentamos posicionar un
elemento hijo detrás de un padre:
246
Z-index con padre e hijo
Si aplicamos un z-index al padre del elemento (box-1) vemos que continua permaneciendo
detrás:
247
Z-index con padre y varios hijos
Ahora, en el siguiente ejemplo, vamos a trabajar con varios hijos:
248
En este caso, vemos que se pone por encima el box-3. Ya que, en este caso, se ejecutan
según el orden en el que definen en el HTML. Vamos a verlo:
249
En este caso, vemos que box-2 se pone por encima. Ya que, en este caso, le estamos dando
un z-index al elemento box-2
250
15
Ejercicio
Realiza la siguiente diana con CSS:
251
FLOAT Y CLEAR
252
Float y clear
▪ Una de las propiedades más famosas para posicionamiento todo CSS es float.
▪ Float nos permite posicionar una caja de forma flotante un elemento a la izquierda o a
la derecha o none (no flotar), es decir, dejarla como estaba respecto a su posición
original.
▪ Si un elemento se posiciona con absolute, se ignorará por completo la propiedad float
▪ Los elementos flotantes fluirán a su alrededor. Para limpiar esto, es decir, para
evitarlo/resetear el comportamiento tradicional, es necesario utiliza clear.
253
Float y clear
▪ Un ejemplo de ello, sería el siguiente:
254
El concepto de globo
▪ Si os fijáis, en el ejemplo anterior, el resto de elementos suben hacía arriba como si
fueran un globo de helio:
255
Float y clear
▪ Si posicionamos otro elemento al mismo lado con float se posiciona sin problema
porque aún ha espacio:
256
Float y clear
▪ En cambio si el elemento no cabe en dicha línea, pese a estar flotando bajará a la
siguiente. Vamos a verlo:
257
Float y clear
▪ Si quisiera bajar el box4 debajo del 3 tendría que aplicarle un crear both. Dentro de
clear podemos limpiar ambos lados o el izquierdo en particular. Vamos a verlo:
258
Float y clear
▪ Si utilizo left no hará nada porque no hay elementos flotantes en ese lado:
259
Float y clear
▪ Vamos a ver otro ejemplo en el que creamos
260
16
Ejercicio
Clona la siguiente web con utilizando float:
261
17
Ejercicio
A partir de siguiente HTML y CSS haz que la web se visualice de la siguiente manera utilizando float y clear:
262
ORDENANDO LAS
PROPIEDADES DE UNA
REGLA DE CSS
263
Ordenando propiedades dentro de un CSS
Aunque no es obligatorio, si que es
una buena práctica el ordenar los
elementos en cierto orden para
poder posteriormente identificarlos
mejores y tal.
Pero que motivo por el que se hace
esto no es el rendimiento (ya que no
hay difierencias) sino el definir un
cierto orden en el que estructurar
nuestras reglas de CSS.
264
CSS UNITS
265
CSS Units
▪ Dentro de las medidas en CSS podemos
diferenciar dos grandes grupos que son:
□ Unidades absolutas: se considera medida
absoluta cualquier medida que no cambian.
Es decir, que no se adaptan (aumenta o
disminuye) en función del ciertas
propiedades del dispositivo. Por tanto, son
fijas y siempre mantengan el tamaño actual
independientemente del tamaño del
dispositivo o ante cualquier situación.
▪ Las principales medidas absolutas son:
▪ La medida más absoluta más famosa es el
266
pixel (px)
CSS Units
▪ El segundo grupo de medidas es:
□ Unidades relativas: se considera medida
relativa a las medidas que no son fijas. Y,
por lo tanto, estás se adaptan
proporcionalmente a la web en función del
contexto sobre el que trabajan.
▪ Las principales medidas relativas son son:
▪ La más utilizadas son em, rem, vw, vh y %.
267
CSS Units
▪ Si nos fijamos, en el siguiente ejemplo, estamos trabajando con dos box uno de
cada tipo. Y ,podemos ver las diferencias claramente de trabajar con un tipo u otro:
268
REM VS EM
269
REM vs EM
▪ REM: utiliza como referencia el tamaño
(font-size) aplicado sobre el elemento HTML
del documento
▪ EM: utiliza como referencia el contexto en
el que nos encontramos utilizando como
referencia el font-size padre de dicho
elemento.
▪ En determinadas circunstancias es posible ver que REM y EM trabajan de la misma
forma pero conforme empezamos a modificar tamaños en los elementos anidados su
funcionamiento va cambiando. Ya que la referencia a la que apunta cambia.
270
REM vs EM
▪ Por defecto, todos los
navegadores utilizan un tamaño
por defecto/estándar para el
texto de 16px. Ya que es una
aproximación bastante exacta
con los 12 puntos que es un
tamaño bastante utilizado en
impresión gráfica.
▪ Para calcular el EM y el REM se
utiliza la propiedad Font-size
(que nos permite definir el
271
tamaño de fuente)
REM vs EM
▪ Que se utilice 16px y no otra medida
no es casualidad. Ya que tras realizar
diversos estudios, se llegó a la
conclusión que es el tamaño de letra
al que más acostumbrado está el ojo
es 16px.
▪ Aunque existe la posibilidad de
cambiar esto, usualmente, lo modifica
gente con deficiencias visuales.
272
REM
▪ En el caso del REM, el valor se calcula en referencia al font-size por defecto del
documento (de 16px) serían los siguientes
□ 1rem * 16px = 16px
□ 2rem * 16px = 32px
□ 3rem * 16px = 48px
▪ Vamos a ver un ejemplo con REM:
273
REM
▪ Si ahora en cambio, aplicamos la propiedad Font-size con 0,75rem al párrafo,
vemos que este tendrá 12px de tamaño:
▪ Pese a ello, los elementos van al Font-size que por defecto es 16 del navegador
y lo multiplican por unidad definida en rem para dicha propiedad para calcular 274
el tamaño.
REM
Pero si modificamos
el Font-size del
html que es el que
se utiliza como
referencia (cosa
que se desaconseja
por completo),
podemos ver
estamos afectando
al conjunto de todos
los elementos:
275
EM
▪ Con EM el
elemento de
referencia no
es el HTML
sino que lo es
el Font-size
del elemento
padre.
▪ En este caso, funciona de la misma forma porque aún por el momento seguimos
haciendo referencia a los 16px que tiene por defecto establecidos el navegador. Por
ello, aún funciona de la misma forma que REM. Vamos a verlo: 276
EM
En cambio, es
esta situación
el H1 de dentro
del DIV tiene
como Font-
size, es decir,
como tamaño
de referencia
20px. La
referencia ya
no es 16px sino
20px. Vamos a 277
verlo:
¿Con cual trabajo REM o EM?
▪ Si queremos trabajar con textos es recomendable trabajar con REM. Ya que,
siempre nos vamos a basar en el font-size del navegador. Y evitaremos el tener
que preocuparnos por mirar donde estamos, o si a futuro modificamos algún
valor en un font-size evitamos tener que modificar el resto de valores, ya que
siempre iremos al HTML para coger dicho valor.
▪ En cambio, utilizaremos EM cuando queramos que la medica crezca
proporcionalmente en función del elemento padre.
▪ Aunque, como ya conocemos sus diferencias, si no sabemos cual usar lo mejor
es mirar visualmente cual de los dos se adapta mejor a nuestras necesidades.
278
% vs AUTO
279
% vs auto
▪ Cuando trabajamos
con % las medidas se
reciben respecto al
contenedor actual. Lo
que internamente
hace el navegador es
mirar el width, el
▪ Pero si intentamos hacer esto, vemos que claramente no tenemos el
height del elemento 60 % de altura (height 18.4px) respecto al documento. Pero si el 50 %
padre para calcular de anchura (width 308.8px) respecto al documento.
el witdh o el heigth ▪ Ya que cuando utilizamos un % en el height de un contenedor, esta se
del elemento actual. substituye por auto lo que englobará únicamente y exclusivamente al
Vamos a ver un contenido. 280
ejemplo:
% vs auto
▪ Si le damos un tamaño en pixeles (px) vemos que ahora si que coge
correctamente las dimensiones. Vamos a verlo:
281
% vs auto
▪ En determinadas situaciones puede pasar,
que, por ejemplo, apliquemos un margen a
la izquierda de 200px lo que hará que box1
sobresalga de la caja
▪ Para controlar situaciones como la

siguiente, podemos usar auto. Con ello, le
estamos diciendo que ocupe todo lo que
sea posible pero únicamente dentro del
container
282
% vs auto
▪ Cuando trabajamos con auto, realmente le estamos diciendo que tamaño del box
se ajuste/adapte al tamaño del contenedor.
283
% vs auto
▪ Habitualmente, no definimos un height para el contenido (salvo en contadas
ocasiones) ya que es recomendable que el contenido sea el que se haga que se
defina la altura del elemento. En caso contrario en determinadas situaciones pueden
darse situaciones como la siguiente:
284
% vs auto
▪ Si no especificamos un height o lo definimos como auto, el navegador será el
encargado de ajustar el tamaño del DIV a nuestro contenido. Vamos a verlo:
285
% vs auto
▪ Si en situaciones como la del ejemplo anterior, queremos dar un espaciado inferior,
recordar que tenemos que utilizar padding-bottom. Ya que si definimos un height no
se adaptaría al contenido. De esta forma, al no trabajar con height, el box siempre
cogerá el tamaño del contenido y posteriormente añadimos un padding-bottom.
286
% vs auto
▪ En algunas situaciones, si no definimos el ancho o bien lo ponemos a auto. Si no hay
contenido dentro de nuestro elemento el DIV tendrá un ancho de 0. Por tanto, no se
mostrará correctamente:
287
UNIDADES DE VIEWPORT
288
¿Qué es el Viewport?
▪ El viewport es la zona en la
que se visualizan nuestras
webs dentro de un
navegador. Es decir, el
espacio que no asignamos a
la barra de navegación,
marcadores, etc.
▪ Si la web tiene la barra de
schroll activada esta no
cuenta. Solamente cuenta
hasta que acaba el
289
navegador.
Unidades de viewport
▪ ¿Hasta donde sería considerado el viewport en está imagen?
290
Unidades de viewport
Las unidades con las que vamos a trabajar con las siguientes:
□ Vw: lo utilizamos para referirnos al width (ancho) del viewport.
□ Vh: lo utilizamos para refererinos al height (largo) del viewport.
□ Vmin: compara ambos viewports (vw y vh) y coge el que sea menor de los dos
□ Vmax: compara ambos viewports (vw y vh) y coge el que sea mayor de los dos
□ 1 vw es un 1% del ancho total del viewport width

□ 50 vw es un 50% del ancho total del viewport width
□ 100 vh es el 100% del ancho total del viewport height
291
Unidades de viewport: vw
292
Unidades de viewport: vw
▪ El principal problema de vw es que si
lo utilizamos sobre un elemento cuyo
padre es directamente el body, vemos
que si el contenido no cabe a parte de
aparecer la barra lateral derecha,
aparece una barra inferior. Para evitar
que esto pase, cuando estemos con el
width en elementos cuyo padre sea el
body se aconseja utilizar el % en vez
del vh. Vamos a ver un ejemplo:
▪ Esto solamente pasa en desktop, desde
293
mobile no sucederá.
Unidades de viewport: vh
294
Unidades de viewport: vmin
295
Unidades de viewport: vmax
296
MIN & MAX
WIDTH & HEIGTH
297
Min or Max - Height or Width
▪ Existe la posibilidad de
controlar definir limites
máximos o mínimos
tanto en el width como
en el height de un
elemento. Vamos a ver
un ejemplo:
▪ Los valores que
podemos utilizar son
□ Max-width
□ Min-width
□ Max- height
298
□ Min-height
TIPOS DE
COLORES EN CSS
299
Colores en CSS
▪ Usualmente las pantallas trabajar con lo
que se conoce como modo adictivo.
▪ Este modo se utiliza en páginas web,
monitores, celulares, entre otros.
▪ Y cuando combinamos todos los colores Red
(rojo), Green (verde) y Blue (azul),
obtenemos como resultante el color blanco.
En cambio, si quitamos todos los colores
obtenemos como resultante el color negro.
300
Colores en CSS
▪ Dentro de los colores en CSS/HTML
tenemos:
□ Los colores predefinidos utilizan
palabras reservadas para referirse a
unos determinados colores. Se
subdividen en:
 Colores básicos
 Colores extendidos
□ El sistema RGB cubic-coordinate. Para
trabajar con RGB podemos utilizar:
 Sistema hexadecimal
 Notaciones rgb() o rgba()
□ El sistema HSL cilindrical-coordinate.
Para trabajar con HSL podemos utilizar: 301
 Notaciones hsl() y hsla()
Tip para obtener colores desde el browser
▪ ¿ í
? No es necesario
instalar un plugin ni nada para ello.
▪ Por si esto fuera poco, encima
puedes hacerlo en cualquiera de los
siguientes formatos:
▪ 🎨 🎨
□ Por ejemplo: #FFFFFF
▪ 🎨 🎨
□ Por ejemplo: 𝐫𝐠𝐛𝐚(255,0,0,0.3)
▪ 🎨 🎨
□ Por ejemplo: 𝐡𝐬𝐥𝐚(0, 100%, 50%, 0.8)
302
Tip para obtener colores desde VSC
303
COLORES
PREDEFINIDOS
304
Colores en CSS: predefinidos
▪ Tenéis la lista completa
con los distintos colores
subdivididos por módulos
de CSS en la siguiente web:
□ https://developer.mozilla.
org/es/docs/Web/CSS/colo
r_value
▪ La principal característica
de este tipo de colores es
que no permiten su
modificación
305
Colores en CSS: predefinidos
▪ Vamos a
ver un
ejemplo:
306
COLORES RGB Y RBGA
307
Colores RGB
▪ Los colores RBG trabajan sobre 3 canales:
□ Red (rojo): acepta valores del 0 al 255
□ Green (verde): acepta valores del 0 al 255
□ Azul (blue): acepta valores del 0 al 255
▪ Cada uno de estos canales está formado por 8 bits. Un bit está compuesto por 0 y 1.
Por lo que si elevamos 2 (las opciones del bit) a la 8, podemos ver que obtenemos
256 posibilidades para cada uno de los canales.
▪ Los valores que acepta cada canal empiezan en el 0 y no en el 1. Por lo que, el
rango será del 0 al 255
▪ El total de colores que nos ofrece RGB se obtiene a partir de multiplicar el toda de
valores de cada uno de los canales 255x255x255 = 308
Colores RGB: números repetidos
▪ El color rgb(0,0,0) es el
negro y el
rgb(255,255,255) el
blanco.
▪ Siempre que los
números de los 3
canales sean iguales
estaremos trabajando
sobre la gama de
grises. Vamos a verlo:
309
18
Ejercicios: saca los siguientes colores RGB
▪ Haz un HTML que saque los colores y la combinación de la siguiente manera:
310
Colores RGBA
▪ Los colores RBGA añaden otro canal inmediatamente después de RBG.
▪ El canal Alpha nos permite introducir valores entre el 0 y 1 para definir el nivel de
transparencia de dicho color.
▪ 1 corresponde al color puro y 0 a la transparencia al completo.
311
Colores Hexadecimales #RRGGBB
▪ El sistema hexadecimal de colores se basa en el
RBG.
▪ De la misma forma que definimos tres bloques R, G
y B en en el sistema RBG, con un rango del 0 al 255.
▪ Podemos expresar cada uno de los bloques
mediante a dos dígitos en su forma hexadecimal.
▪ Cada digito hexadecimal corresponde a un número
del 0 al 15. Por lo que nos ofrece 16 posibilidades. Si
multiplicamos 16x16 vemos que tenemos el mismo
resultado que en el caso de los valores de cada
color en RBG. 312
▪ Si por ejemplo escribimso FF (con hex seleccionado) vemos que nos dice que su
equivalente en hexadecimal es 255.
313
▪ Para escribir colores en hexadecimal, escribimos una #RRGGBB
▪ Si escribimos un hexadecimal cuando se repite el mismo número en
ambos dígitos en todos los elementos RR, GG, BB por ejemplo
#FF11DD podemos abreviarlo de la siguiente manera #F1D
314
Colores Hexadecimales #RRGGBBAA
▪ De la misma forma que trabajábamos anteriormente con RGBA, lo podemos hacer
con la forma hexadecimal. Vamos a ver algunos ejemplos:
□ 10% - 1A,
□ 25% - 40,
□ 50% - 7F,
□ 75% - BF,
□ 100% - FF
315
Colores Hexadecimales #RRGGBBAA
▪ O incluso con un solo dígito:
□ 10% - 1A,
□ 25% - 40,
□ 50% - 7F,
□ 75% - BF,
□ 100% - FF
▪ Cuando trabajamos con la forma abreviada (tiene que se con todos los números):
316
Colores HSL
▪ H = Hue (tono)
▪ S = Saturation (saturación)
▪ L = Lightness (luminosidad)
▪ El primer valor nos permite definir el

color. Para ello, seleccionamos un valor
de la rueda:
□ el 0 es el punto de los colores rojos (red)
□ El 120 los colores verdes (green)
□ El 240 los colores azules(blues)
317
Colores HSL
▪ El segundo valor nos permite definir la
saturación, es decir, la intensidad. Para
ello, seleccionamos un % del 0 al 100.
□ 100% se traduce como color puro
□ 0% se traduce como gris
▪ El tercer valor nos permite definir la
luminosidad del color.
□ 0 % negro
□ 50% color puro
□ 100% blanco
▪ Por ejemplo un rojo puro sería lo 318

siguiente:
Colores HSLA
▪ HSL también tiene su versión con Alpha. En este caso, los valores van del
0 al 1 para dicho canal. Vamos a ver un ejemplo:
319
TRANSPARENT
y
CURRENT-COLOR
320
Transparent
▪ Existe la
posibilidad de
aplicar
transparent que
aunque no es un
color nos permite
hacer cosas tan
chulas como la
siguiente muy
fácilmente. Vamos
a verlo:
321
Transparent
▪ Para ello,
primeramente
buscamos una
imagen y
removemos el
background
mediante a alguna
web como la
siguiente:
https://www.remov
e.bg/upload
322
Transparent
▪ El código
sería el
siguiente:
323
Current-color
▪ También podríamos utilizar current color para utilizar el color actual en caso de no
estar definido lo heredará del padre (el color defecto del browser es black). Vamos a
verlo:
324
WEBS RECOMENDADAS
PARA COLORES
325
Current-color
▪ https://www.fontpair.co/ nos permite descargar fuentes, e incluso nos da ideas de
colores de fondos que son ideales para un determinado tipo de fuentes.
▪ https://brandcolors.net/ nos permite ver los colores que utilizan marcas como
Adidas, Amazon, Facebook, etc.
▪ https://htmlcolorcodes.com/es/ nos permite a partir de un color ver una serie de
colores que son ideales para combinarse entre si
▪ https://www.happyhues.co/ nos permite ver webs con diseños muy originales
▪ https://color.adobe.com/es/create/color-wheel nos permite utilizar la rueda de
colores de adobe
▪ https://colorhunt.co/ nos permite ver distintas paletas para nuestras webs. 326
MEDIA QUERYS
327
328
¿Qué son las media querys?
▪ Nos permiten modificar la página web en función del la resolución de pantalla, el tipo
de dispositivo, etc.. Vamos a ver un ejemplo:
329
▪ + info media querys en https://developer.mozilla.org/es/docs/Web/CSS/Media_Queries/Using_media_queries

19
Ejercicio media querys
▪ Ejercicio 1: Realiza mediaquerys que modifiquen el color del background del dispositivo
en función del tipo de resolución
▪ Ejercicio 2: Haz una web que simule lo siguiente:
330
FLEX BOX
331
Flex Box
▪ Flexbox es un módulo de CSS3 que nos permite maquetar el contenido de un HTML
de manera flexible.
▪ Antes de flexbox la forma con la que se podían realizar determinadas cosas era
bastante más compleja.
▪ Flexbox además, nos ayuda a tener un mejor diseño responsive, facilita el
posicionamiento de los elementos, etc.
332
Flex Box
▪ Lo primero que tenemos que hacer
es crear un container y darle la
propiedad display: flex
▪ Y dentro de este container,
tendremos los ítems.
▪ Flexbox trabaja en una sola

dirección (filas o columnas)
actualmente trabajamos con una fila
ya que por defecto tenemos la
propiedad flex-direction con el valor
333
row.
Flex Box
▪ Vamos a ver un ejemplo de como crear el container y los hijos:
334
FLEX BOX
JUSTIFY CONTENT
335
Flex Box: entendiendo el funcionamiento
de justify content
▪ Si nos imaginamos que los
elementos hijos de nuestro
container son gatitos. Y aplicamos la
propiedad justify-content sobre el
container contenidos dentro del
container, podemos asignar distintos
valores con la finalidad de que estos
se posicionen de una forma u otra
sobre el display flex. Vamos a verlo: 336
Flex Box: justify content code
▪ Justify content: nos permite definir la forma en la que posicionaremos a los
elementos hijos del container. Vamos a ver un ejemplo:
337
Flex Box: justify content result
▪ El resultado será el siguiente:
338
FLEX BOX
FLEX-DIRECTION
339
de flex-direction
▪ Con Flex también podemos
controlar la dirección de
los elementos.
340
Flex Box: flex-direction code
341
Flex Box: flex-direction result
342
FLEX BOX
ORDER
343
de order
▪ Mediante a order, podemos
otorgar un cierto orden
sobre los hijos de un
container:
344
Flex Box: order code & result
345
Flex Box: order code & result
346
FLEX BOX
ALIGN-ITEMS
347
de align-items
▪ Mediante a align-items
(aplicado sobre el
container) podemos
posicionar los elementos
en distintas posiciones
348
Flex Box: ejemplo de align-items
349
FLEX BOX
ALIGN-SELFT
350
de align-selft
▪ Mediante a align-items
(aplicado sobre el item)
permite posicionar los
elementos en distintas
posiciones
351
Flex Box: ejemplo de align-seft
352
FLEX BOX
GAP
353
FlexBox: GAP
▪ Nos permite
definir el espacio
entre los childs.
Vamos a ver un
ejemplo:
354
FLEX BOX
WRAP
355
FlexBox: Wrap
▪ Nos permite
definir el
comportamiento
que tendrá el
container para
posicionar a sus
hijos (childs)
cuando
reduzcamos el
espacio. Vamos a
ver un ejemplo: 356
20 hecho
Ejercicios Flex Box
▪ Ejercicios de Flexbox: https://flexboxfroggy.com/#es
357
21
Ejercicios Flex Box
▪ Ejercicios de Flexbox Defense:
http://www.flexboxdefense.com/
358
22
Ejercicios Flex Box
▪ Ejercicios de Flexbox:
https://mastery.games/flexboxzombies/
359
23
Ejercicios de Grid
▪ Visita la siguiente web y realiza los ejercicios:
https://codingfantasy.com/games/flexboxadventure
360
CSS GRID
361
Grid características principales
▪ Grid nos permite crear una especie de
parrilla, cuadricula o rejilla (grid) la cual
nos ayudará a posicionar los elementos de
una forma sencilla.
▪ El principal beneficio de Grid respecto a
flex-box es que Grid trabaja en los dos ejes
a la vez. En cambio, flex-box solamente
trabaja en un solo eje.
▪ Aunque os recomiendo combinar ambos
sistemas (grid y flex-box) ya que cuando los
trabajamos juntos el potencial es aún 362
mayor.
Grid: definiendo la parrilla
▪ Para trabajar con grid, primeramente definimos una propiedad display con grid
como valor. Lo que nos permitirá el crear nuestra parrilla grid. Vamos a verlo:
363
Grid: creando la parrilla
▪ Una vez definida la parrilla, vamos a definir las columnas que tendrá nuestra
parrilla mediante a la propiedad grid-template-columns. 1fr equivale a una parte
en función de la cantidad de frs que definamos.
364
Grid: creando la parrilla
▪ Si trabajamos desde el Firefox Blue Edition, podemos ver que podemos llegar a ver
dicho GRID por la pantalla. Vamos a ello:
365
24 hecho
Ejercicios de Grid
▪ Realiza el siguiente ejercicio que se adapte a 3 resoluciones de pantalla
distintas:
366
25 hecho
Ejercicios de Grid
https://cssgridgarden.com/#es
367
26
Ejercicios de Grid
https://codingfantasy.com/games/css-grid-attack/play
368
FUENTES
369
Fuentes desde el servidor de Google
▪ Para trabajar con fuentes la web más popular es https://fonts.google.com/ y
seleccionamos una fuente. Posteriormente, copiamos el link que llamará a dicha fuente:
370
Fuentes desde el servidor de Google
371
Fuentes desde nuestro directorio
372
Familia por si falla una fuente
▪ Normalmente, cuando trabajamos con una fuente utilizamos otra por si esta falla.
373
ESPACIADO Y
ORIENTACIÓN DE TEXTO
374
Espaciado y orientación de texto
▪ Letter-spacing: nos permite separar cada letra (incluido los espacios)
375
▪ Word-spacing: nos permite separar cada letra (incluido los espacios)
376
▪ Line-Height: nos permite separar cada letra (incluido los espacios)
377
▪ Writing-mode: nos permite separar cada letra (incluido los espacios)
378
EJERCICIOS
DE HTML Y CSS
379
27
Ejercicio DIVs
▪ Realiza el siguiente changelle de Front End Mentor
380
28
Ejercicios Spotify
▪ A partir del siguiente repositorio, haz
un Fork (copia a tu repo), clónalo y
finamente haz que se visualice de la
siguiente manera:
▪ Además, haz que sea responsive y que
se adapte a las distintas resoluciones
mobile, Tablet y PC
381
29
Ejercicio CV Amazon
▪ Escribe tu currículum como si fuera la web de Amazon. Podéis coger los iconos, etc de
la web del autor https://phildub.com/
382
30
CSS Battle
▪ Ejercicios de “kattas” (retos) CSS https://cssbattle.dev/
383
PREPROCESADOR CSS
384
Sass = CSS con superpoderes
385
Funcionamiento y preprocesaores
▪ Un preprocesador, nos permite añadir una serie de
características, es decir, de ciertas funcionalidades
que no existen en las hojas de estilo por defecto, con
la finalidad de mejorar su estructurar.
▪ Un ejemplo de ello, son los selectores anidados que
nos proporcionan el poder de anidar elementos (es
decir, introducir propiedades de un elemento dentro
de otro).
▪ Por tanto, mediante a los preprocesadores añadimos
una serie de características que no existen por
defecto en CSS “puro” tales como selectores
anidados. 386
▪ Los más utilizados son:
Funcionamiento y preprocesaores
▪ En nuestro caso utilizamos Sass:
387
Funcionamiento y preprocesadores
▪ Para poder trabajar con preprocesadores debemos de realizar un compilado que
transformará el archivo que es incompatible con el navegador pero que posee ciertas
funcionalidades
388
Sass
▪ Sass → Syntactically Awesome StyleSheets (o Hojas de estilo semánticamente increíbles)
▪ Sass → es un preprocesador de CSS que utiliza un lenguaje distinto al que se utiliza en las
hojas CSS tradicionales, lo que provoca que usas hojas inicialmente no sea compatible con el
navegador.
▪ Para que estas hojas sean compatibles con los navegadores deben de ser compiladas (de ahí
queu reciban el nombre de preprocesadoras CSS) para mediante a este proceso ser
transformadas/traducidas a hojas de estilo CSS tradicionales (que serán compatibles con el
navegador).
389
Características de Sass
▪ Las principales características de Sass son:
□ Compatible con CSS Puro: Cualquier hojas de estilo CSS se puede ejecutar sin problema en SCSS
□ Añade nueva características: que nuestro CSS puro no puede proporcionarnos
□ Madurez, Sass lleva más de 15 años (nació en 2006)
□ Aprobado por la comunidad: Tal y como hemos visto, la gran mayoría de gente utiliza Sass como
preprocesador CSS
□ Gran comunidad: debido a la cantidad de empresas tecnológicas y de desarrolladores que lo utilizan
respecto a otros frameworks de CSS
□ Frameworks: algunos frameworks como Compass, Bourbon o Susy están basados en dicho preprocesador.
390
Sass
▪ Para trabajar con Sass debemos de tenemos instalado node. Si no lo tenéis instalado,
descargar la versión LTS:
391
Sass
▪ Una vez instalado node, vamos a utilizar NPM (Node Package Manager) para instalar el paquete
392
Sass
▪ Para crear un fichero
utilizamos la extensión
.SCSS:
▪ Sass, por ejemplo, nos
permite anidar
característica que no
está disponible en CSS
puro:
393
Sass
▪ Y finalmente, podemos transformar la hoja de estilo (SCSS) con un
estilo no compatible hacía una compatible con el comando sass:
▪ El principal problema de lo que estamos haciendo es que
transformamos pero no guardamos:
▪ Si además de transformar, queremos guardar debemos de realizar
lo siguiente:
394
Sass: sass initial.css finally.css
▪ El principal problema de esta manera de trabajar es que constantemente para cada
cambio, tendríamos que hacer una nueva compilación.
▪ Pero podemos utilizar el flag –-watch para hacer que se compile automáticamente el
código. Siempre que esté bien escrito, por supuesto.
395
Sass: sass --watch initial.css finally.css
▪ El principal problema de esta manera de trabajar es que constantemente para cada
cambio, tendríamos que hacer una nueva compilación.
▪ Pero podemos utilizar el flag –-watch para hacer que se compile automáticamente el
código. Siempre que esté bien escrito, por supuesto.
396
Sass
▪ Finalmente, para aprender más podemos ir a la web oficial de
Sass: https://sass-lang.com/guide
397
Sass
▪ Aunque si nos fijamos, vemos que Sass, nos ofrece dos versiones
.SCSS y .SASS ¿Qué diferencias hay entre ambas?
398
Un poco de historia sobre Sass
▪ Creado en 2006 por Hampton Catlin y basado en Ruby.
▪ Mejorado por Natalie Weizenbaum y Chris Eppstein los
cuales han extendido Sass como SassScript (un lenguaje de
script simple) que combina los ficheros Sass con Scripts.
▪ Los archivos Sass pueden tener dos variantes:
□ .SASS (sintaxis con sagría o Sass): son los tradicionales creados
por Hampton Catlin en 2006. Utiliza sangría en lugar de
corchetes y nuevas líneas.
Los archivos usan la extensión SASS.
□ .SCSS (Sassy CSS o SCSS): son los mejorados por Natalie
Waizenbaum y Chris Epsstein. Son una extensión de la sintaxis
de CSS por lo que toda hoja de estilos CSS es válida en SCSS.
Los archivos usan la extensión SCSS. 399
Sass: diferencias entre SASS, SCSS y CSS
▪ Si analizamos este ejemplo lo vemos claramente:
▪ Nosotros trabajaremos sobre la versión Sassy CSS (con

extensión .scss). Ya que es la variante que más se parece a
CSS.
400
Sass
▪ Aunque de la
misma forma
que trabajamos
con SCSS, lo
podemos hacer
con SASS. Vamos
a ver un
ejemplo:
401
Sass: plugin de VSC
▪ Si analizamos este ejemplo
lo vemos claramente:
402
31
Ejercicios Spotify
▪ Transforma el CSS de la web de Spotify
a SASS
403

Bloque de CSS: David Bernal González

Cargado por

Copyright:

Formatos disponibles

Bloque de CSS: David Bernal González

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Bloque de CSS: David Bernal González

Cargado por

Copyright:

Formatos disponibles

Bloque de CSS

David Bernal González

▪ Podemos seleccionar todos los

A partir de la siguiente web,

▪ Vamos a ver un ejemplo

▪ Mediante a esta manera posicionamos al elemento en el centro ya que le proporcionamos el

conjunto de capas (sin contar el magin).

▪ Con box-sizing a border-box:

▪ Hay que coger el content + sumar dos paddings 145

▪ Las abreviaturas son:

▪ Por ello, se aconseja

Sin seleccionar Seleccionado

Lo equivalente a utilizar top 50px es usar bottom -50px haced la prueba

▪ Estos elementos (los definidos con static) son la base

Modificando con ello el

Usualmente separamos los z-

▪ Para controlar situaciones como la

□ 1 vw es un 1% del ancho total del viewport width

▪ El primer valor nos permite definir el

▪ Por ejemplo un rojo puro sería lo 318

▪ + info media querys en https://developer.mozilla.org/es/docs/Web/CSS/Media_Queries/Using_media_queries

▪ Flexbox trabaja en una sola

▪ Nosotros trabajaremos sobre la versión Sassy CSS (con

También podría gustarte

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.