FULL STACK FRONTEND
Clase 6
CSS 2
Medidas, colores, fondos,
fuentes e íconos
Les damos la bienvenida
Vamos a comenzar a grabar la clase
Clase 05 Clase 06 Clase 07
CSS 1 - Introducción a CSS CSS 2 - Medidas, colores, fondos, fuentes CSS 3 - Modelo de caja y
e íconos posicionamiento
● Bases del CSS y atributo class.
● CSS externo, interno y en línea. ● Unidades de medida. ● Modelo de caja y propiedades.
● Selectores básicos (id, clase, ● Colores CSS. ● Posicionamiento y visualización.
etiqueta, universal). ● Fondos en CSS.
● Especificidad, Herencia, Cascada ● Fuentes y tipografías.
y Orden de las reglas en CSS. ● Estilos para textos y listas.
● Íconos
Unidades de medida
Las medidas en CSS se emplean para definir dimensiones y márgenes de los elementos, también
para establecer el tamaño de letra del texto. Se indican como un valor numérico entero o decimal
seguido de una unidad de medida.
CSS divide las unidades de medida en:
● Absolutas: Son medidas fijas e indican cantidades exactas en alguna unidad. Su valor real
es directamente el valor indicado y se ve igual en todos los dispositivos No dependen de
otro valor de referencia, por eso se llaman absolutas. La desventaja que tienen es que son
muy poco flexibles.
● Relativas: Definen su valor en relación con otra medida y para obtener su valor real se
debe realizar alguna operación con el valor indicado.
Dentro de las medidas relativas están las flexibles que son relativas al tamaño del viewport.
Unidades de medida absolutas
Son medidas fijas que deberían verse igual en todos los dispositivos. Tienen la desventaja de ser muy
poco flexibles y no adaptarse fácilmente a los diferentes medios y por esto no suelen ser utilizadas.
La más utilizada es el pixel (px). +info
● px: Un pixel es el elemento más pequeño de imagen que puede mostrar una pantalla y su medida
real depende del dispositivo. +info
● cm: centímetros (10 mm).
● mm: milímetros.
● pt: puntos. Un punto equivale a 0.35 milímetros.
● in: pulgadas: Una pulgada equivale a 2.54 centímetros (25,4 mm).
● pc: picas. Una pica equivale a unos 4.23 milímetros. +info
Unidades de medida relativas
No están completamente definidas, su valor siempre está referenciado respecto a otro valor
(resolución, densidad de pantalla, etc.). Son las más utilizadas por la flexibilidad con la que se
adaptan a los diferentes medios y su potencia.
Unidad Significado Medida aproximada
em <<M>> 1em = tamaño de fuente establecida en navegador.
ex <<x>> (0,5 em apróx) 1ex = mitad del tamaño de la fuente del navegador aproximadamente.
ch <<zero width>> 1ch = tamaño de ancho del cero (0).
rem <<root M>> 1rem = tamaño fuente raíz.
% Porcentaje Relativa a herencia (contenedor padre)
Unidades de medida relativas
La unidad em equivale a 16px, salvo que se modifique por el usuario.
1em equivaldría a 16px, mientras que 2em serían justo el doble: 32px. Por otro lado, 0.5em
equivalen justo la mitad: 8px.
em es relativa al tamaño de letra. Si empleamos un font-size de 10px en el body, 1em equivale a
10px. Su tamaño varía en función del tamaño del elemento padre. 1.2em sería un 20% más grande
que el tamaño de su elemento padre.
Unidades de medida relativas
Las unidades ex o ch, menos utilizadas. La unidad ex es aproximadamente la mitad del tamaño de
la fuente establecida por el navegador del usuario, por lo que 1ex es igual a 0.5em.
La unidad ex se basa en la altura de la x minúscula. Su tamaño exacto depende de la tipografía
utilizada, y puede ser algo mayor a 0.5em.
La unidad ch, equivale al tamaño de ancho del 0 de la fuente actual.
El porcentaje (%) define una unidad en función de otra. Por ejemplo, si estamos trabajando en 12px
y definimos una unidad como 150% obtendremos 18px.
Unidades de medida relativas
La unidad rem (root em) toma la idea de la unidad em, pero permite establecer un tamaño base
personalizado (generalmente para el documento en general, utilizando html o la pseudoclase :root).
De esta forma, podemos trabajar con múltiplos del tamaño base:
:root {font-size: 22px; /* Tamaño base */}
h1 {font-size: 2rem; /* El doble del tamaño base: 44px */}
h2 {font-size: 1rem; /* El mismo tamaño base: 22px */}
Si queremos cambiar el tamaño del texto en general, sólo tenemos que cambiar el font-size de la
pseudoclase :root, y el resto se modificará en consecuencia.
Unidades de medida flexibles
Las unidades flexibles (vw y vh o vmin y vmax) son relativas al tamaño del ancho o alto del
viewport (ventana gráfica, región visible de la página Web en el navegador, no el body).
● vw: viewport width. Por ejemplo, si decimos que un div debe medir 50vw, es equivalente al 50%
del ancho total del viewport.
● vh: viewport height. Por ejemplo, si definimos qué un div mide 50vh y el alto del viewport es
800px, nuestro div medirá 400px.
Colores y tipografías
Colores
La propiedad color se puede usar en cualquier elemento, aunque principalmente se usa para modificar
el color del texto y el del background de un elemento. Existen diferentes formas de especificar el
color:
● Por palabra clave: red, blue, lightblue, etc. +info
● Valor hexadecimal: #31078C o #FF0000. Cada par de letras simboliza el valor del RGB.
● Valor RGB (Red, Green, Blue): rgb(250, 0, 250), rgb(0, 0, 0) es el color negro y por el
contrario rgb(255, 255, 255) es blanco. Valores de 0 a 255. +info
● Valor RGBA (RGB + Alpha): rgba(5, 173, 213, 1) o rgba(100%, 62.5%, 100%, 1). El valor
Alpha tiene que estar comprendido en [0-1] y hace referencia a la transparencia del elemento,
siendo 1 = opaco y 0 = transparente.
Color de fondo
El fondo de un elemento, por ejemplo <div> puede ser un color o una imagen:
<div style="background-color: #334466;">
Este div tiene un color de fondo.
</div>
<div style='background-image: url("imagenes/foto.jpg");'>
Este div tiene una imagen color de fondo.
</div>
En el caso de utilizar una imagen, se aplican las reglas vistas a la hora de definir rutas absolutas o
relativas.
Tipografías
Las tipografías o fuentes son uno de los pilares del diseño web. La elección de una tipografía
adecuada, su tamaño, color, espacio entre letras, interlineado y otras características pueden variar
mucho, de forma consciente o inconsciente, la percepción en la que una persona interpreta o accede
a los contenidos de una página. +info
Propiedades básicas:
● font-size: tamaño de la fuente (px, em, rem).
● font-style: estilo de fuente (normal, italic, oblique).
● font-family: lista de fuentes (arial, helvetica, sans-serif, etc).
● font-weight: grosor (peso) de la fuente (bold, 400, 600, 800).
Propiedades font-size y font-style
Recordemos que utilizamos <h1>…<h6> para los títulos y <p> para encabezados. Font-size
(tamaño de la fuente) puede ser absoluto o relativo. El valor predeterminado es 16px. +info
<p style='font-size: 16px;'>Fuente en 16px</p>
<p style='font-size: 24px;'>Fuente en 24px</p>
<p style='font-size: 32px;'>Fuente en 32px</p>
En cuanto a font-style determina el estilo del texto. Posee tres valores:
<p style='font-style: normal;'>Párrafo con estilo normal.</p>
<p style='font-style: italic;'>Párrafo con estilo cursiva.</p>
<p style='font-style: oblique;'>Párrafo con estilo oblicuo.</p>
Propiedades font-family y font-weight
Font-family establece la familia tipográfica. Los nombres compuestos se colocan entre comillas. Las
fuentes sólo se visualizarán si el usuario las tiene instaladas en su dispositivo. Se recomienda agregar
más de una fuente, separadas entre comas. +info
div {
font-family: Georgia, 'Times New Roman', Verdana, serif;
}
font-weigth: Establece qué tan gruesos o delgados deben mostrarse los caracteres en el texto. +info
Google Fonts
Si deseamos utilizar alguna fuente que no sea estándar, podemos utilizar la API de Google Fonts que
dispone de cientos de tipografías para utilizar en nuestra página. Simplemente debemos agregar un
enlace en la hoja de estilo.
1. Ingresar a https://fonts.google.com/
2. Seleccionar una fuente.
3. Copiar y pegar la regla CSS. +info
Adobe Fonts
Adobe Fonts es un servicio en línea que brinda a sus
suscriptores acceso a su biblioteca de fuentes, bajo
un único acuerdo de licencia. Las fuentes pueden
usarse directamente en sitios web.
Adobe Fonts: https://fonts.adobe.com/fonts/ +info
Íconos (fontawesome)
<h3>Íconos de Font Awesome</h3>
Hay varias formas de agregar iconos a tu sitio web, en <i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
https://fontawesome.com/, hay iconos gratuitos y pagos, te <i class="fas fa-car"></i>
registras en el sitio y te envían un mail con una etiqueta que <i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
podés agregar al <head> de tu HTML. Luego podés elegir
<h3>Íconos de Font Awesome (tamaño y color)</h3>
los íconos a utilizar y agregar a tu página. <i class="fas fa-cloud" style="font-size: 24px;"></i>
<i class="fas fa-cloud" style="font-size: 36px;"></i>
<i class="fas fa-cloud" style="font-size: 48px; color:red"></i>
<i class="fas fa-cloud" style="font-size: 60px;
color:lightblue"></i>
<h3>Íconos de Font Awesome (tamaño y color)</h3>
<a href="https://www.instagram.com/">
<i class="fa-brands fa-instagram" style="font-size: 36px;"></i>
</a>
<a href="https://www.facebook.com/">
<i class="fa-brands fa-facebook-f"style="font-size: 36px;"></i>
</a>
<a href="https://www.linkedin.com/">
<i class="fa-brands fa-linkedin" style="font-size: 36px;"></i>
</a>
<a href="http://twitter.com/">
<i class="fa-brands fa-twitter" style="font-size: 36px;"></i>
</a>
Íconos (flaticon)
Otros ìconos interesantes se pueden conseguir en https://www.flaticon.es/ . Se pueden descargar o
utilizar directamente vinculando las imágenes desde su web.
Cómo descargar íconos gratis y crear patrones en Flaticon
<p>Iconos de www.flaticon.es</p>
<img src="https://cdn-icons-png.flaticon.com/512/8293/8293395.png" width="40">
<img src="https://cdn-icons-png.flaticon.com/512/8293/8293402.png" width="40">
<img src="https://cdn-icons-png.flaticon.com/512/8293/8293404.png" width="40">
Material extra
Cómo elegir una paleta de colores
Generadores de paleta de colores:
● https://www.colorhunt.co/
● http://palettr.com/
● https://color.adobe.com/es/create/color-wheel
● https://www.adobe.com/es/express/feature/design/color-palette
● https://htmlcolorcodes.com/es/
● https://imagecolorpicker.com/es (utilice su imagen)
● http://colrd.com/ (utilice su imagen)
● https://color.adobe.com/es/create/image(utilice su imagen)
Colores en diseño web. Cómo elegir la combinación perfecta:
● https://blog.hubspot.es/marketing/colores-para-paginas-web
Artículos de interés
Más información sobre unidades:
● https://escss.blogspot.com/2014/01/medidas-Css-Absolutas-relativas.html
● https://www.w3schools.com/css/css_units.asp
● https://lenguajecss.com/css/modelo-de-cajas/unidades-css/
Fuentes:
● Cómo utilizar las fuentes de Google Fonts: https://youtu.be/FWpIs9eAL5s
● Añadir fuentes a su sitio web: https://helpx.adobe.com/es/fonts/using/add-fonts-website.html
● Reconocer fuentes: https://www.myfonts.com/pages/whatthefont
Fondos en CSS: https://desarrolloweb.com/articulos/fondos-css
Estilos para listas:
● https://www.w3schools.com/css/css_list.asp
● https://developer.mozilla.org/es/docs/Learn/CSS/Styling_text/Styling_lists
Tarea para el Proyecto:
● Diseñar al menos 2 páginas para el proyecto web: la página de inicio y una página
interna para el sitio web.
● Utilizar etiquetas semánticas para estructurar las dos páginas que servirán como
template para todo nuestro sitio. Más adelante podrá ir incorporando más
templates en caso de ser necesario.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.
● Realizar los Ejercicios obligatorios.
Todo en el Aula Virtual.
Muchas gracias por tu atención.
Nos vemos pronto
