Scribd
Cargar
4 vistas64 páginas

Introducción al CSS: Fundamentos y Uso

Temario de CSS

Cargado por

Ismael Mojtar B.
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
4 vistas64 páginas

Introducción al CSS: Fundamentos y Uso

Temario de CSS

Cargado por

Ismael Mojtar B.
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

TEMARIO CSS

Nivel básico

1. Introducción al CSS
CSS son las siglas de “Cascading Style Sheets” (Hojas de estilo en
cascada). CSS describe cómo deben mostrarse los elementos de
HTML en una pantalla, papel u otro medio. Usarlo ahorra mucho
trabajo y puede controlar el diseño de múltiples páginas web a la vez.
Las hojas de estilo externas se almacenan en documentos de CSS.

1.1. Sintaxis
Selector Declaració Declaració
h1 {color:blue; font-size:12px;}
Propieda Valor Propieda Valor
 El selector señala el elemento de HTML al que quieres el estilo.
 El bloque de declaración contiene una o más declaraciones.
 Cada declaración contine una propiedad de CSS con su
valor.
 Las múltiples declaraciones de CSS se separan con punto y
coma y los bloques de declaraciones se escriben entre

Ejemplo:
p{
color: red;
text-align: center;
}

llaves.
[Link] de CSS
Un selector de CSS selecciona el elemento de HTML al que se le
aplicará un estilo.
Se pueden dividir en cinco categorías:
 Selectores simples – Selecciona elementos según el nombre,
id, clase.
 Selectores combinadores – Selecciona elementos según una
relación específica entre ellos.
 Selectores de pseudo clase – Selecciona elementos según en
un estado en concreto.
 Selectores de pseudo elemento – Selecciona y aplica un
estilo a una parte de un elemento.
 Selectores de atributo – Selecciona elementos según en un
atributo o un valor de atributo.
3.Cómo añadir un CSS
Cuando un navegador lea una hoja de estilos, formateará el
documento de HTML de acuerdo a la información de esa hoja de
estilos.
Hay tres formas de insertar un CSS:
 Externa
 Interna
 Inline

3.1. CSS externo


Con una hoja de estilos externo, puedes cambiar la apariencia de
toda una web tan solo cambiando un archivo.
Cada página de HTML debe incluir una referencia al archivo externo
de la hoja de estilos dentro del elemento <link>, dentro de la sección

Ejemplo:
<head>
<link rel="stylesheet" href="[Link]">
</head>

head.
Una hoja de estilos externa se puede escribir con cualquier editor de
texto y debe guardarse con la extensión .css. Este archivo no debe
contener etiquetas de HTML.

3.2. CSS Interno


Una hoja de estilos interno podría usarse si una sola página de HTML
tiene un único estilo.

Nota: No añadir espacios entre el valor de la propiedad y la unidad


(20px, 10vw, etc.)
Ejemplo:
El estilo interno se define dentro del elemento <style>, dentro de la
<head>
<style>
body {
background-color: linen;
}
</style>
</head>

sección head.
3.3. CSS Inline
Un estilo entre líneas podría ser usado para aplicar un único estilo a
un solo elemento.
Para usarlo añade un atributo de estilo al elemento relevante. Este
atributo puede contener cualquier propiedad de CSS.

Ejemplo:
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>

Nota: Un estilo entre líneas pierde muchas ventajas de las hojas de


estilo (por mezclar contenido con presentación). Es mejor usar este
método con moderación.

3.4. Múltiples hojas de estilo


Si algunas propiedades han sido definidas por el mismo selector
(elemento) en distintas hojas de estilo, se usará el valor de la última
lectura de la hoja de cálculo.
Por ejemplo, si hay una hoja de estilo externo donde se le aplica el
color navy a un elemento y al mismo tiempo se está usando un estilo
interno al mismo elemento, pero con el color Orange, se aplicará el
estilo dependiendo de cuál estilo esté en última instancia.

Ejemplo:
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
<style>
h1 {
color: orange;
}
</style>
</head>

En este caso el método interno se encuentra en última instancia en


el documento por lo que se aplicará el color orange.

Orden de cascada
1. Estilo Inline (dentro de un elemento HTML).
2. Estilos externos e internos (en la sección head).
3. Predeterminado del navegador.
[Link] en CSS
Los comentarios en CSS no se muestran en el navegador, pero
pueden ayudar a documentar la fuente de tu código.
Se usan para explicar el código y pueden ayudar a editar el código
después de un tiempo.
Se colocan dentro de un elemento <style> y empieza con /* y

Ejemplo:
/* Esto es un comentario de una sola línea */

termina con */.

Los comentarios se pueden agregar en cualquier parte del código,


incluso en mitad de una línea de código y pueden escribirse en
múltiples líneas.

[Link] en CSS
Un valor de color RGB representa fuentes de luz Rojo, Verde y Azul.

Para representar los colores se usa la siguiente fórmula:

5.1. RGB – Red, Green, Blue


 255, 0, 0 – Se muestra como rojo, porque red está puesto en el
valor más alto y los demás están en cero.
 0, 0, 0 – Se muestra como negro.
 255, 255, 255 – Se muestra como blanco.

A menudo, las sombras de grises se consiguen con valores iguales de


las fuentes de luz
RGBA – Red, Green, Alpha

El parámetro Alpha es un número entre 0.0 (transparencia total) y 1.0


(sin transparencia).

5.2. Colores HEX - #RRGGBB


En CSS, se puede especificar un color usando un valor hexadecimal
en la forma.

Donde rr (rojo), gg (verde), bb (azul) son valores hexadecimales entre


00 y ff (al igual que la forma decimal 0-255).

 #ff0000 – Se muestra como rojo, porque rr está puesto en el


valor más alto y los demás están en cero.
 #000000 – Se muestra como negro.
 #ffffff – Se muestra como blanco.

A menudo, las sombras de grises se consiguen con valores iguales de


las fuentes de luz.
Valor de 3 dígitos en HEX

En ocasiones habrá solo 3 dígitos en el código hex de la fuente de


CSS. Es una abreviatura de los 6 dígitos hex usuales.

#rgb – r,g y b representan el rojo, verde y azul en valores de cero a f.


Estos tres dígitos solo se podrán usar cuando ambos valores sean
igual (RR, GG y BB), por lo que si se tiene #ff00cc podría escribirse
como #f0c.

5.3. Colores HSL (hue, saturation, lightness)


En CSS, un color puedes especificarse usando el tono, la saturación y
la luminosidad (HSL).

 Hue (tono) – Es un grado en la rueda de colores de 0 a 360. 0


es rojo, 120 es verde y 240 es azul.
 Saturation (saturación) – Es un valor porcentual 0% es un
valor de gris y el 100% es el color completo. Es la intensidad del
color.
 Ligthness (luminosidad) – También es un porcentaje. 0% es
negro, 50% no es ni claro ni oscuro y 100% es blanco. Es la
cantidad de luz que tiene un color.

A menudo, las sombras de grises se consiguen con valores en 0 de


tono y saturación y colocando la luminosidad en un valor de 0% a
100%.
Valores HSLA (hue, saturation, lightness, alpha)

El parámetro alpha es un número entre 0.0 (transparencia total) y 1.0


(sin transparencia.

[Link] en CSS
Las propiedades de background en CSS se usan para añadir efectos y
elementos para el fondo.

6.1. Color de fondo en CSS


La propiedad background-color especifica el color de fondo de un
elemento. Se puede elegir el color de fondo de cualquier elemento de
HTML.

La propiedad opacity especifica la opacidad/transparencia de un


elemento, puede tener un valor de 0.0 a 1.0. el valor más bajo es el

Ejemplo:
div {
background-color: green;
opacity: 0.3;
}

Nota: Al usar la propiedad opacity también se añade transparencia a


todos los elementos secundarios dentro del principal, incluyendo
textos (podrían quedar ilegibles.

Nota: También se puede aplicar transparencia usando los valores


más transparente. RGBA.
6.2. Imagen de fondo en CSS
La propiedad background-image especifica una imagen para usarla
como fondo de un elemento. La imagen se repite por defecto para

Ejemplo:
body {
background-image: url("[Link]");
}
Try it Yourself »

Nota: Hay que tratar de usar imágenes que no molesten la lectura


cubrir todo el elemento. del texto.

Que la imagen se repite puede dar lugar a que el fondo se vea


extraño. La imagen puede repetirse horizontal o verticalmente.

Si ocurre esto de forma horizontal, para que el se vea mejor el fondo


se puede usar la propiedad background-repeat: repeat-x.

Ejemplo:
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

Si ocurre de forma vertical se puede usar la propiedad background-


repeat: repeat-y.

6.2.1. No repetir el fondo en CSS

La propiedad background-repeat especifica si la imagen de fondo se


va a repetir.

Ejemplo:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

6.2.2. Posición del fondo en CSS

La propiedad background-position especifica la posición de la imagen


de fondo. (por ejemplo, en caso de que la imagen no se repita y la
imagen está en un lugar que dificulte la lectura del texto).

Ejemplo:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
6.3. Ajuste del fondo en CSS
La propiedad background-attachment especifica cuándo la imagen de
fondo debe desplazarse o quedarse fija (no se desplazará con el resto
de la página).
 background-attachment: fixed – para que la imagen esté
fija.
 background-attachment: scroll – para que se desplace la
imagen con el texto.

Ejemplo:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}

6.4. Atajos para el fondo en CSS


Para acortar el código, es posible especificar todas las propiedades
del fondo en una sola propiedad esto se conoce como propiedad
taquigráfica (shorthand property).

Ejemplo:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

En lugar de usar esas propiedades en varias líneas se puede hacer

Ejemplo:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
Try it Yourself »
todo en una sola.
Para usar esta forma de acortar el código hay que escribir las
propiedades en orden:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position

Nota: No importa si falta alguna propiedad mientras las demás


estén en orden. La propiedad attachment no se encuentra en los
ejemplos porque no tiene un valor.
Aquí hay más información sobre las propiedades de fondo.
[Link] en CSS
La propiedad border de CSS permite especificar un estilo, ancho y
color al borde de los elementos.

7.1. Estilo del borde en CSS


La propiedad border-style especifica qué tipo de borde mostrar.
 dotted – Define un borde punteado.
 dashed – Define un borde discontinuo.
 solid – Define un borde sólido.
 double – Define un borde doble.
 groove – Define un borde biselado con luz desde arriba. El
efecto depende del valor del color del borde.
 ridge – Define un borde biselado con luz desde abajo. El efecto
depende del valor del color del borde.
 inset – Define un borde en bajo relieve en 3D. El efecto depende
del valor del color del borde.
 outset – Define un borde en relieve en 3D. El efecto depende
del valor del color del borde.
 none – No define ningún borde.
 hidden – Define un borde oculto.

Nota: No se aplicará ninguna otra propiedad de borde hasta que se


aplique primero el estilo de borde.

7.2. Ancho de borde en CSS


La propiedad border-width especifica el ancho de los cuatro bordes.
Se puede aplicar con un tamaño en específico (in, px, pt, cm, em, etc)
o usando uno de los tres valores predefinidos:
 Thin – Estrecho.
 Medium – Mediano.
 Thick – Grueso.

Ejemplo:
[Link] {
border-style: solid;
border-width: 5px;
}

[Link] {
border-style: solid;
border-width: medium;
}
7.2.1. Anchos específicos
La propiedad border-width puede tener de uno a cuatro valores (para
el borde superior, derecho, inferior e izquierdo).

Ejemplo:
[Link] {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

[Link] {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px
bottom and 35px left */
}

7.3. Color del borde en CSS


La propiedad border-color se usa para seleccionar el color de los
cuatro bordes.
El valor del elemento se puede escribir con:
 El nombre.
 El valor HEX.
 El valor RGB.
 El valor HSL.
 Transparencia.
Nota: Si no se especifica ningún color se heredará el color del
elemento.
Ejemplo:
[Link] {
border-style: solid;
border-color: red;
}

7.3.1. Colores específicos


La propiedad de border-color puede tener de uno a cuatro valores
(para el borde superior, derecho, inferior o izquierdo).

Ejemplo:
[Link] {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom
and yellow left */
}
7.4. Lados de bordes en CSS
Hay propiedades para especificar cada lado de cada borde.

Ejemplo:
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

Ejemplo:
p{
border-style: dotted solid;
}
Try it Yourself »
O también se podría hacer siguiente:
Este sería el resultado:

Diferentes estilos de borde

Orden de los bordes según la cantidad de valores en border-


style
Cantidad de Se aplica a los bordes (por orden)
valores
4 valores Superior, derecho, inferior, izquierdo
3 valores Superior, derecho e izquierdo, inferior
2 valores Superior e inferior, derecho e izquierdo
1 valor Todos los bordes

También se aplica a las propiedades de border, atajos como se ha


visto anteriormente.

Ejemplo:
p{
border: 5px solid red;
}
Nota: Este orden se aplica también a las propiedades de border-
Try it Yourself » width y border-color.
7.5. Bordes redondeados en CSS
La propiedad de border-radius se usa para añadir bordes
redondeados a un elemento.

Ejemplo:
p{
border: 2px solid red;
border-radius: 5px;
}

Borde Redondeado

Aquí hay más información sobre bordes o esquinas


redondeadas.
8.Márgenes en CSS
Los márgenes se usan para crear un espacio alrededor de los
elementos, por fuera de cualquier borde definido.
Las propiedades margin de CSS se usan para crear este espacio en
cada lado del elemento (superior, derecho, inferior, izquierdo).

8.1. Margen para los lados individualmente


Estas son las propiedades para especificar el margen de cada lado del
elemento en CSS:
 margin-top
 margin-right
 margin-bottom
 margin-left
Todas las propiedades de margin pueden tener los siguientes valores:
 auto – El navegador calcula el margen. Se puede usar para
centrar el elemento.
 length – Especifica el margen en px, pt, cm, etc.
 % - Especifica un margen en porcentaje del ancho del elemento
contenedor.
 inherit – Especifica que el margen debería heredarse del
elemento principal.

Nota: Se pueden usar valores negativos.


8.2. Márgenes colapsados en CSS
En ocasiones, los márgenes superior e inferior de los elementos
colapsan en un solo margen. Esto solo pasa para márgenes
superiores e inferiores (no para el derecho e izquierdo).

Ejemplo:
h1 {
margin: 0 0 50px 0;
}

h2 {
margin: 20px 0 0 0;
}

En el ejemplo se aprecia como el elemento <h1> tiene un margen


inferior de 50px mientras que el elemento <h2> tiene un margen
superior de 20px.
Por sentido común pareciera que el margen vertical entre <h1> y
<h2> tendría un total de 70px (50px + 20px). Pero debido al colapso
de los márgenes, el margen real termina siendo 50px.

[Link] en CSS
Las propiedades de padding en CSS son usadas para crear un espacio
alrededor del contenido del elemento, dentro de cualquier borde
definido. Se tiene control total para cada lado del elemento.
Todas las propiedades pueden tener los siguientes valores:
 length – Especifica un relleno en px, pt, cm, etc.
 % - Especifica un relleno en % del ancho del elemento
contenedor.
 inherit – Especifica que el relleno será heredado del elemento

Nota: Se pueden usar valores negativos. Y también se pueden usar


atajos para cada lado del elemento.
principal.
9.1. Las propiedades padding y width
La propiedad width especifica el ancho del área del contenido de un
elemento. Esta área del contenido es la porción dentro del relleno
(padding), borde y margen de un elemento.
Por lo que, si un elemento ya tiene un ancho específico, el relleno se
agregará también al total de ese ancho. Esto suele ser un resultado
poco deseable.
Ejemplo:
div {
width: 300px;
padding: 25px;
}
En el ejemplo, el elemento <div> tiene un ancho de 300px. Sin
embargo, el ancho real será de 350px (300px + 25px del relleno
derecho + 25px del relleno izquierdo).
Para mantener ese ancho de 300px, sin importar la cantidad de
padding, se puede usar la propiedad de box-sizing. Esto hará que el
elemento mantenga su ancho real.

Ejemplo:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}

10. Alto, ancho y ancho máximo en CSS


Las propiedades height y width en CSS se usan para poner el alto y
ancho de un elemento.
La propiedad max-width en CSS se usa para poner un ancho máximo
a un elemento.
Estas propiedades no incluyen el relleno, borde o margen. Solo ponen
la altura y el ancho de un área dentro del relleno, borde y margen del
elemento.
Las propiedades height y width tienen los siguientes valores:
 auto – Está por defecto. El navegador calcula el alto y ancho.
 length – Define el alto y ancho en px, cm, etc.
 % - Define el alto y ancho en porcentajes del bloque
contenedor.
 initial – Pone el alto y ancho en su valor por defecto.
 inherit – El alto y ancho será heredado de los valores del
elemento principal.
Ejemplo:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}

La propiedad max-width se puede especificar en px, cm, etc., % o


ponerlo en none (está por defecto, es para no poner ancho máximo).
Si un elemento no tiene esta propiedad y la ventana es más pequeña
que el ancho normal aparecerá una barra de desplazamiento, usando
esta propiedad puede mejorar la visualización para que aumente y
disminuya el ancho automáticamente.
11. Modelo de caja en CSS
Todos los elementos en HTML pueden ser considerados como cajas.
En CSS el término box model (modelo de caja) es usado para hablar
de diseño.
El box model envuelve cada elemento de HTML. Consta de:
 Content – El contenido de la caja, donde aparecen la imagen y
el texto.
 Padding – El relleno alrededor del contenido. Es transparente.
 Border – Un borde alrededor del contenido y del relleno.
 Margin – Rellena un área por fuera del borde. Un margen
transparente.

Nota: Cuando colocas las propiedades de width y heigth de un


elemento en CSS, solo colocas el ancho y alto del área del contenido.
Para calcular el ancho total del alto y el ancho, hay que tener en
cuenta el padding y el borde.
Nota: El margen también afecta al espacio total que la caja tendrá
en la página, pero el margen no está incluido en el tamaño real de la
caja. El ancho y alto total de la caja para en el borde.
12. Outline en CSS
Un outline es un contorno dibujado alrededor del borde del elemento.
Hace que el elemento se “destaque”.

Estas son las propiedades de contorno que tiene CSS:


 outline-style.
 outline-color.
 outline-width.
 outline-offset.
 outline.
Los contornos se diferencian de los bordes en que los contornos se
dibujan por fuera del borde de los elementos y puede sobreponerse a
otro contenido y el contorno no es parte de las dimensiones del
elemento por lo que el ancho y alto del elemento no son afectados
por el ancho del contorno.
Sus propiedades son homónimas que las de borde, por lo que tienen
los mismos valores y atajos a excepción de la propiedad outline-
offset.

12.1. Desplazamiento de contorno en CSS


La propiedad outline-offset añade un espacio entre el contorno y el
borde de un elemento. Este espacio es transparente.

Ejemplo:
p{
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
13. Texto en CSS
13.1. Color de texto
La propiedad color se usa para ponerle un color al texto. Hay que
tener cuidado a la hora de usar esta propiedad para no crear
demasiado contraste con el fondo por las personas con problemas de
visión.

13.2. Alineación y dirección del texto


 text-align – Esta propiedad permite alinear horizontalmente el
texto usando los valores center, left, right o justify (justificar).
 text-align-last – Especifica el alineado de la última línea del
texto.
 direction y unicode-bidi – Permite cambiar la dirección del texto.

Ejemplo:
div {
direction: rtl;
unicode-bidi: bidi-override;
}

 vertical-align – Especifica el alineado vertical. Sus valores son:


o baseline – Alineado por defecto.
o text-top – Alieando con la parte superior.
o text-bottom – Alineado con la parte inferior.
o sub – Alineado con el subíndice.
o sup – Alineado con el superíndice.
13.3. Decoración del texto
 text-decoration-line – se usa para añadir una línea de
decoración al texto.
o overline – añade una línea por encima del texto.
o line-through – añade una línea atravesando el texto.
o underline – añade una línea por debajo del texto.
o overline underline – añade una línea por encima y por
debajo del texto.
 text-decoration-color – especifica un color para la línea de
decoración.
 text-decoration-style – especifica un estilo para la línea de
decoración.
o Solid – es la línea por defecto.
o Double – añade una línea doble.
o Dotted – añade una línea punteada.
o Dashed – añade una línea discontinua.
o Wavy – añade una línea ondulada.
 text-decoration-thickness – especifica el grosor de la línea de
decoración.
 text-decoration – es una propiedad para poner atajos a las otras
propiedades.

Nota: Todos los enlaces de HTML vienen subrayados de forma


predeterminada. Hay que tratar de no poner un subrayado a
cualquier texto para no confundir al lector y que piense que es un
enlace.
Nota: Se puede quitar el subrayado predeterminado de los enlaces
usando el valor none (text-decoration: none).

13.4. Transformación del texto


La propiedad text-transform se usa para especificar letras mayúsculas
o minúsculas en un texto, tanto todo el texto como solo la primera
letra de cada palabra.
Sus valores son:
 uppercase
 lowercase
 capitalize

13.5. Espaciado del texto en CSS


 text-indent – Para agregar una sangría a la primera línea del
texto.
 letter-spacing – Para agregar espacios entre los caracteres del
texto.
 line-height – Para el espacio entre líneas de un texto.
 word-spacing – Para el espacio entre palabras de un texto.
 white-space – Especifica cómo se manejan los espacios en
blanco.
Ejemplo:
[Link] {
text-indent: 50px;
}

[Link] {
letter-spacing: 5px;
}

[Link] {
line-height: 0.8;
}

[Link] {
word-spacing: 10px;
}

[Link] {
white-space: nowrap;
13.6. Sombra de textos en CSS
La propiedad text-shadow añade sombra al texto. Solo hay que
especificar la sombra horizontal y vertical. También se puede agregar
color y difuminado.

Ejemplo:
h1 {
text-shadow: 2px 2px 5px red;
}

Ejemplo:
h1 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

Este ejemplo es un texto con sombras roja y azul brillante:

14. Fuentes de texto


Es importante escoger la fuente de texto correcta en un sitio web.
Afecta a la experiencia del lector y crea una fuente identidad para la
marca de la página. También es importante usar una fuente de texto
de fácil lectura junto con un tamaño y color adecuados.
Existen cinco familias de fuentes genéricas:
 Serif – Tienen un pequeño trazo en los bordes de cada letra-
Crean una sensación de formalidad y elegancia.
 Sans-serif – Tienen líneas limpias (sin trazos). Crean un
aspecto moderno y minimalista.
 Monospace – Todas las letras tienen un mismo ancho fijo.
Crean una apariencia mecánica.
 Cursive – Imitan la escritura humana.
 Fantasy – Fuentes decorativas y divertidas.

Nota: En las pantallas de ordenador, las fuentes sans-serif se


consideran más fáciles de leer.
La propiedad font-family en CSS especifica la fuente de un texto. Si la
fuente tiene varias palabras, deberá escribirse entre comillas.
Esta propiedad debería soportar varios nombres de fuentes como
“respaldo” del sistema, esto asegura la máxima compatibilidad entre
navegadores/sistemas operativos. Hay que empezar con la fuente
que se desee y terminar con una familia de fuente genérica (para que
el navegador elija una fuente similar en caso de que no esté

Ejemplo:
.p1 {
font-family: "Times New Roman", Times, serif;
}

.p2 {
font-family: Arial, Helvetica, sans-serif;
}

.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}

disponible la primera opción).

14.1. Fuentes web seguras en CSS (Web Safe


Fonts)
Las fuentes web seguras (Web Safe Fonts) son fuentes que son
universalmente instaladas en todos los navegadores y dispositivos.
Sin embargo, no hay fuentes 100% seguras, siempre hay una
posibilidad de que una fuente no se encuentre o que no esté bien
instalada, por lo que es muy importantes usar siempre fuentes de
respaldo. Esto significa que hay que agregar una lista de fuentes de
respaldo a la propiedad font-family, si una no funciona, el navegador
probará con la siguiente y así sucesivamente. Es importante también
terminar la lista con una familia de fuentes genérica.
Mejores Fuentes web seguras para HTML y CSS
 Arial (sans-serif)
 Verdana (sans-serif)
 Tahoma (sans-serif)
 Trebuchet MS (sans-serif)
 Times New Roman (serif)
 Georgia (serif)
 Garamond (serif)
 Courier New (monospace)
 Brush Script MT (cursiva)

fuentes se ven bien en distintos navegadores y dispositivos y usar


otras fuentes de respaldo. También se puede revisar fuentes de
Google Fonts y cómo usarlas.
14.2. Propiedades de la fuente en CSS
 font-style – especifica el tipo de texto.
o normal – se muestra un texto normal.
o italic – se muestra un texto en cursiva.
o oblique – se muestra un texto “oblicuo” (parecido a
cursiva, pero menos soportado.
Ejemplo:
[Link] {
font-style: oblique;
}

 font-wight – especifica el “peso” de una fuente.


o normal – peso normal.
o bold – peso en negrita.
 font-variant – especifica cuándo un texto se muestra con
pequeñas mayúsculas.
o normal – muestra el texto normal.

Ejemplo:
[Link] {
font-variant: small-caps;
}

o small-caps – muestra pequeñas mayúsculas.


 font-size – especifica el tamaño del texto. El tamaño del texto
es importante para el diseño del texto. Este tamaño se puede
colocar en valores absolutos o relativos.
o Valores absolutos – Pone un valor específico sin que el
usuario puede cambiarlo por el tamaño del navegador.
Solo es útil cuando se conoce la cómo se verá el tamaño
físico en la salida de texto.
o Valores relativos – Pone un tamaño relativo a los
elementos de alrededor y permite al usuario cambiar el
tamaño del texto en los navegadores.
Tamaño de texto con em – Permite al usuario cambiar el
tamaño del texto (en el navegador), es usado por muchos
desarrolladores en lugar de los píxeles. 1em es igual al tamaño
actual, el tamaño por defecto en navegadores es 16px
(1em=16px). Usando solo esto puede haber un problema y es
que, con algunas versiones antiguas de navegador, el texto se
hace más grande o pequeño de lo que debería si se reajusta el
tamaño.
Usando combinaciones de porcentajes y em – La solución a ese
problema es poner el tamaño de <body> en porcentaje.
Con esto el código funciona en todos los navegadores, mostrará
el mismo tamaño de texto y permitirá al navegador hacer zoom
y cambiar el tamaño.
Tamaño de fuente responsive – El tamaño de texto se puede
poner en unidades vw (viewport width o ancho de ventana).
Esto hace que el tamaño siga el de la ventana de la página. 1vw
= 1% del ancho de la ventana, si la ventana es de 50cm de
amplia, 1vw será 0.5cm.

14.3. Excelentes combinaciones de fuentes en


CSS
Una buena combinación de fuentes de texto es esencial para un buen
diseño.
Normas para combinar fuentes:
 Que sean fuentes que se complementen entre si para crear
armonía sin ser demasiado similares o demasiado diferentes.
 Usar superfamilias de fuentes, son conjuntos de fuentes
deseñadas para funcionar bien juntas, usarlas será seguro.
 Los contrastes entre fuentes a menudo funcionan si se hace de
la manera correcta, pueden resaltar lo mejor de cada fuente.
 Elegir una fuente superior, una fuente debería ser siempre la
protagonista, estableciendo una jerarquía entra las fuentes,
esto se puede conseguir variando el tamaño, peso y color.
También se pueden aplicar atajos a la propiedad font.

Ejemplo:
p.a {
font: 20px Arial, sans-serif;
}

p.b {
font: italic small-caps bold 12px/30px Georgia,
serif;
}

Nota: Son necesarios los valores de font-size y font-family. Si falta


alguno de ellos se aplicarán sus valores predeterminados.

Aquí hay más información sobre cómo usar fuentes de


Google.
Aquí hay más información sobre cómo usar fuentes web.
15. Iconos en CSS
Los iconos se pueden añadir fácilmente a una página HTML, usando
una icon library (librería de iconos).
La manera más sencilla de agregar iconos es con una librería como
Font Awesome.
Se añade el nombre de la clase de icono en específico a cualquier
elemento inline de HTML (como <i> o <span>).
Para usar la librería de Font Awesome icons, hay que ir a
[Link], iniciar sesión, y conseguir un código para añadir
en la sección de <head> en la página de HTML.
No se requiere ninguna descarga o instalación.

Ejemplo:
<head>
<script src="[Link]
crossorigin="anonymous"></script>
</head>

Todos estos iconos de estas librerías son vectores escalables que


pueden ser customizados con CSS (tamaño, color, sombra, etc.).
También hay otras librerías como las de Bootstrap:

Ejemplo:
<head>
<link rel="stylesheet" href="https://
[Link]/bootstrap/3.3.7/css/
[Link]">
</head>

Ejemplo:
<head>
<link rel="stylesheet" href="https://
[Link]/icon?family=Material+Icons">
</head>

O de Google:
16. Enlaces en CSS
Los enlaces pueden ser estilizados con cualquier propiedad de CSS
(color, font-family, background, etc.). Y también dependiendo de en
qué estado se encuentren. Hay cuatro estados para los enlaces:
 a:link – un enlace normal sin visitar.
 a:visited – un enlace que ya ha visitado el usuario.
 a:hoover – un enlace cuando el puntero del ratón pasa por
encima.
 a:active – un enlace en el momento de hacer click.

Nota: La propiedad más usada para quitar el subrayado de los


enlaces es text-decoration.

Aplicando las propiedades de CSS se puede hacer que los enlaces


tengan formas de botones.
Aquí hay más información sobre cómo hacer botones de
distinto tipo.

Ejemplo:
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}

También puede ser útil para los enlaces saber usar valores para
cambiar el puntero del ratón al pasar por encima.
enlaces.

17. Listas en CSS


Listas en HTML y propiedades de listas en CSS
Diferentes viñetas para listas.
La propiedad list-style-type especifica el tipo de viñetas para las
listas. Sus valores son:
 circle – Un círculo.
 square – Un cuadrado.
 upper-roman – Números romanos.
 lower-alpha – letras.
Se pueden usar imágenes como viñetas de listas usando la propiedad
list-style-image.

Ejemplo:
ul {
list-style-image: url('[Link]');
}

Con la propiedad list-style-position se puede especificar la posición de

Ejemplo:
ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}

las viñetas de las listas.

Y con la propiedad list-style-type:none se puede eliminar estas


viñetas. Esta propiedad también coloca el margen y el relleno a sus
valores predeterminados, para eliminarlos también hay que usar las

Ejemplo:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

propiedades margin:0 y padding:0.


También se pueden usar atajos con la propiedad list-style. El orden de
las propiedades es:
 list-style-type
 list-style-position
 list-style-image

Ejemplo:
ul {
list-style: square inside url("[Link]");
}
18. Tablas en CSS
Con CSS la apariencia de las tablas de HTML mejora bastante,
algunas propiedades son:
 border – Atajo para poner las demás propiedades en una sola
declaración.
 border-collapse – Especifica cuando los bordes de una tabla
colapsan.
 border-spacing – Especifica la distancia entre los bordes y las
celdas adjacentes.
 caption-side – Especifica la ubicación del título de la tabla.
 empty-cells – Especifica cuando mostrar los bordes y el fondo
de las celdas vacías.
 table-layout – Elige el algoritmo de diseño que usará la tabla.

Aquí hay más información sobre propiedades de las tablas.

19. Diseño en CSS – Propiedad display


La propiedad display es la más importante en CSS para controlar el
diseño.
Se usa para controlar cómo un elemento se mostrará en una página
web. Cada elemento de HTML tiene un valor por defecto de display,
dependiendo del tipo de elemento. Los valores para la mayoría de
elementos son block o inline.
Nivel de bloque de elementos
Un nivel de bloque de elementos (block-level element) siempre
empieza en una nueva línea y toma el total del ancho disponible (se
encoge y ensancha a izquierda y derecha tanto como puede).
Algunos ejemplos de elementos de nivel de bloque:
 <div>
 <h1>-<h6>
 <p>
 <form>
 <header>
 <footer>
 <section>
Elementos inline
Un elemento inline no empieza en una nueva línea y solo toma el
ancho necesario.
Algunos ejemplos de elementos inline:
 <span>
 <a>
 <img>
Valores de la propiedad display:
 inline – Muestra un elemento como un elemento inline.
 block – Muestra un elemento como un elemento de bloque.
 contents – Hace que el contenedor desaparezca, haciendo que
los elementos secundarios suban a elementos principales.
 flex – Muestra un elemento como un contenedor de bloque de
nivel flexible.
 grid – Muestra un elemento como contenedor de bloque de
nivel mallado.
 inline-block – Muestra un elemento como un contenedor de
bloque de nivel inline. Se convierte en un elemento inline pero
se puede especificar ancho y alto.
 inline-flex – Muestra un elemento como un contenedor de nivel
inline flexible.
 inline-grid – Muestra un elemento como un contenedor de nivel
inline mallado.
 inline-table – Muestra un elemento como una tabla de nivel
inline.
 list-item – Permite al elemento comportarse como un elemento
<li>.
 run-it – Muestra un elemento como bloque o inline dependiento
del contexto.
 table – Permite al elemento comortarse como un elemento
<table>.
 table-caption – Permite al elemento comportarse como un
elemento <caption>.
 table-column-group – Permite al elemento comportarse como
un elemento <colgroup>.
 table-header-group – Permite al elemento comportarse como un
elemento <thead>.
 table-footer-group – Permite al elemento comportarse como un
elemento <tfoot>.
 table-row-group – Permite al elemento comportarse como un
elemento <tbody>.
 table-cell – Permite al elemento comportarse como un elemento
<td>.
 table-column – Permite al elemento comportarse como un
elemento <col>.
 table-row - Permite al elemento comportarse como un elemento
<col>.
 none – Se elimine por completo el elemento.
 initial – Se pone esta propiedad a sus valores por defecto.
 inherit – Hereda esta propiedad de su elemento principal.

Nota: Cambiar el elemento usando la propiedad display solo cambia


el cómo es mostrado el elemento no camibia el tipo de elemento en
si.
20. Propiedad position – Diseño en CSS
La propiedad position especifica el tipo de método de posición usado
para un elemento. Hay cinco valores diferentes:
 static – Los elementos se posicionan de manera estática por
defecto.
 relative – Los elementos se posicionan de forma relativa.
 fixed – Posiciona un elemento de forma relativa a la ventana,
significa que mantendrá fija su posición, aunque la página se
desplace.
 absolute – Posiciona un elemento de forma relativa a su
antecesor más cercano (en lugar de a una ventana como fixed).
Si no tiene uno, usará el documento body. (podría solapar otros
elementos)
 sticky – Se posiciona un elemento dependiendo de la posición
de la rueda de desplazamiento del usuario.
Entonces los elementos se posicionan usando las propiedades top,
bottom, left y right. Sin embargo, estas no funcionarán sin poner
primero la propiedad position. También funcionan distinto

position.
dependiendo del valor de esa propiedad.

21. La propiedad de índice z – Diseño en


CSS
La propiedad z-index especifica el orden de pila de un elemento (qué
elementos deberían ser colocados enfrente o detrás de otros), ya que
cuando se posicionan los elementos, podrían ser solapados.
Los elementos pueden tener un orden de pila (stack order) positivo o

Ejemplo:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

negativo.
Los elementos sin esta propiedad que se solapan, mostrarán enfrente
los elementos que se han definido de últimas en el código de HTML.
22. Overflow – Diseño en CSS
La propiedad de CSS overflow, controla lo que le ocurre al contenido
que es demasiado grande para encajar en un área.
Los valores de esta propiedad son:
 visible – Predeterminado. El desbordamiento (overflow) se
muestra fuera del cuadro del elemento.
 hidden – El desbordamiento se recorta y el resto del contenido
será invisible.
 scroll – El desbordamiento se recorta y se agrega una barra de
desplazamiento para ver el resto del contenido.
 auto – Similar a scroll, pero agrega barras de desplazamiento
solo cuando sea necesario.
También se pueden aplicar estos valores de forma horizontal o
vertical usando las propiedades overflow-x u overflow-y.

overflow.

23. Float y Clear – Diseño en CSS


La propiedad float de CSS especifica cómo un elemento debería flotar.
La propiedad clear de CSS especifica qué elementos puede flotar
junto al elemento borrado y en qué lado.
float se usa para posicionar y darle formato al contenido. Sus valores
son:
 left – El elemento flota a la izquierda de su contenedor.
 right – El elemento flota a la derecha de su contenedor.
 none – El elemento no flota (se mostrará solo donde está el
texto). Este es el valor por defecto.
 inherit – El elemento hereda el valor flotante de su elemento
principal.
Se puede usar esta propiedad para ajustar el texto alrededor de las
imágenes.

24. Clear y clearfix – Diseño en CSS


Al usar la propiedad float y se quiere usar el siguiente elemento
debajo (no a la derecha ni a la izquierda) se tendrá que usar la
propiedad clear, esta propiedad especifica lo que le debe suceder al
elemento que está al lado de otro elemento flotante. Sus valores son:
 none – Está por defecto. El elemento no se empuja con los otros
flotantes.
 left – El elemento se empuja debajo de los elementos flotantes
de la izquierda.
 right – El elemento se empuja debajo de los elementos flotantes
de la derecha.
 both – El elemento se empuja debajo de los elementos flotantes
izquierdo y derecho.
 inherit – Hereda el valor clear de su elemento principal.
Al limpiar los flotantes, se tiene que hacer coincidir los clear con los
float. Si el elemento float está a la izquierda, se aplicará el clear

Aquí hay más información sobre propiedades float y clear.


también a la izquierda.

25. Combinadores en CSS


Un combinador es algo que explica la relación entre los selectores.
Hay cuatro combinadores distintos:
 Selector descendente (espacio)
 Selector de hijo (>)
 Selector de hermano adjacente (+)
 Selector de hermano general (~)

Aquí hay más información sobre Combinators.

26. Barra de navegación en CSS


Es importante tener una navegación fácil de usar en cualquier sitio
web.
Las barras de navegación son lo mismo que una lista de enlaces, por
lo que necesita una base estándar en HTML.
Primero se crea una lista normal con <ul> y <li>.
Ahora con esta base solo queda cambiar el estilo para que se vea
mejor, empezando por quitar las viñetas, márgenes y rellenos.

Ejemplo:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Una vez hecho esto, se podría seguir aplicando estilo para conseguir
una barra de navegación vertical y horizontal. Para una vertical se
debería continuar con el estilo de los elementos <a>.

Ejemplo:
li a {
display: block;
width: 60px;
}

display: block; - Con esto se consigue que toda el área del enlace se
pueda hacer click (no solo el texto), y permite especificar el ancho.
También se puede editar el elemento para que cambie de color
cuando el puntero del ratón pase por encima.

Ejemplo:
li a:hover {
background-color: #555;
color: white;
}

O que se mantenga de un color en específico para que el usuario sepa

Ejemplo:
.active {
background-color: #04AA6D;
color: white;
}

en qué página se encuentra.


Otro ejemplo de una barra de navegación fija a la izquierda:
Hay dos formas de crear una barra de navegación horizontal, usando
elementos inline o float.
Lista de objetos inline
Se especifica los elementos <li> como inline.

Ejemplo:
li {
display: inline;
}

 display:inline; - Por defecto, los elementos <li> son elementos


de bloque. Aquí, se elimina el salto de línea antes y después de
cada objeto de la lista, para mostrarlos en una sola línea.
Lista de objetos flotantes
Esta es otra forma, colocando como flotante los elementos <li>, y
especificando un diseño para los enlaces de navegación.
Ejemplo:
li {
float: left;
}

a{
display: block;
padding: 8px;
background-color: #dddddd;
}

 float: left; - Se usa para que los bloques de elementos floten


uno al lado del otro.
 display: block; - Permite especificar rellenos (y altura, ancho,
márgenes, etc).
Se puede agregar un color de fondo a <ul> en lugar de a cada
elemento <a> para conseguir un color de fondo de ancho completo.

Aquí hay más información sobre barras de navegación.


27. Dropdown en CSS
Otra herramienta útil que complementa a la barra de navegación son
los cuadros desplegables (dropdown). Estos aparecen al pasar el
puntero del ratón por encima de algún objeto de la lista en la barra de
navegación.

Parte en HTML:
Usar cualquier elemento para abrir el contenido del cuadro
desplegable (<span> o <button> por ejemplo).
Usar un elemento contenedor (como <div>) para crear el contenido
el cuadro desplegable y añadir cualquier cosa dentro.
Envolver un <div> alrededor de los elementos para posicionar el
contenido del cuadro desplegable correctamente en CSS.
Parte en CSS:
La clase .dropdown usa position:relative, lo que es necesario cuando
queremos que el contenido del cuadro desplegable se coloque
correctamente justo debajo del botón del cuadro desplegable (usando
position:absolute).
La clase .dropdown-content tiene el contenido en si del cuadro
desplegable. Está oculto por defecto y se mostrará al pasar el puntero
del ratón por encima.
Esta sería la base para crear un cuadro desplegable (dropdown), lo
demás sería ir puliendo el diseño para que se vea mejor. Como poner
sombra al dropdown para que se vea como una carta, etc.
Aquí hay más información sobre cuadros desplegables.
28. La norma !important
La norma !important en CSS se usa para añadir más importancia de lo
normal a una propiedad/valor. Por lo que se pondrá por encima de
otras normas de estilo para esa propiedad en ese elemento en
específico.
Hay que tener cuidado usando esta norma, porque si se usa
demasiadas veces sin mucho sentido podría haber problemas y hacer
confuso el código CSS.
Por lo que no hay que usar esto si no es completamente necesario.

Aquí hay más información sobre la norma !important.

29. Funciones matemáticas en CSS


Las funciones matemáticas en CSS permiten usar expresiones
matemáticas como valores de propiedades. Aquí se explicará las
funciones calc(), max(), y min().
La función calc()
Sintaxis:
 calc(expression)
o expression – Requerido. Una expresión matemática. El
resultado será usado como valor. Se pueden usar los
operadores: + - * /
Esta función realiza un cálculo que se usa como valor de una

Ejemplo:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}

propiedad.
La función max()
Esta función usa el valor más alto, de una lista de valores separados
por coma, como un valor de propiedad.
Sintaxis:
 max(value1, value2, …)
o value1, value2, … - Requerido. Una lista de valores
separados por coma, de ellos el valor más alto es elegido.
Ejemplo:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}

La función min()
Esta función usa el valor más pequeño, de una lista separada de
comas, como valor de propiedad.
Sintaxis:
 min(value1, value2, …)
o value1, value2, … - Requerido. Una lista de valores
separados por coma, de ellos el valor más pequeño es
Ejemplo:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}

elegido.
CSS – Nivel Avanzado

30. Imágenes de borde en CSS


La propiedad border-image de CSS permite especificar una imagen
para usarla en lugar de un borde normal alrededor de un elemento.
Esta propiedad tiene tres partes:
 La imagen a usar como borde.
 Por dónde cortar la imagen.
 Definir si las secciones intermedias se repiten o se estiran.
Ejemplo:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url([Link]) 50 round;
}

#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url([Link]) 20% stretch;
}

Nota: Esta propiedad es un atajo para las propiedades de:


 border-image-source
 border-image-slice
 border-image-width
 border-image-outset
 border-image-repeat

Nota: En navegadores de Internet Explores 10 o anteriores, no


soportan esta propiedad.
31. Transformaciones 2D en CSS
Las transformaciones en CSS permiten mover, rotar, escalar y sesgar
elementos.
Para eso se puede usar la propiedad transform.
Desde estas versiones en adelante soportan esta propiedad los
siguientes navegadores:

La propiedad transform permite usar los siguientes métodos de


transformación en 2D:
 translate() – Mueve un elemento de su posición actual a otra
especificada. (según los parámetros del eje x y el eje y).
 rotate() – Rota un elemento en sentido horario o antihorario
según los grados especificados.
 scaleX() – Aumenta o disminuye el ancho de un elemento.
 scaleY() – Aumenta o disminuye el alto de un elemento.
 scale() – Aumenta o disminuye el tamaño de un elemento
(según los parámetros de ancho y alto).
 skewX() – Sesga un elemento a lo largo del eje x por el ángulo
dado.
 skewY() – Sesga un elemento a lo largo del eje y por el ángulo
dado
 skew() – Sesga un element a lo largo de los ejes x e y por los
ángulos dados.
 matrix() – Combina todos los demás métodos de transformación
2D en uno solo. Los parámetros siguen este orden:
o scaleX()
o skewY()
o skewX()
o scaleY()
o translateX()
o translateY()

Aquí hay más información sobre transformaciones 2D.


32. Transformaciones en 3D
Para transformaciones en 3D también se puede usar la propiedad
transform.
Esta propiedad la soportan desde estas versiones en adelantes los
siguientes navegadores:

Métodos de transformación 3D para la propiedad transform:


 rotateX() – Rota un elemento por su eje X por un ángulo dado.
 rotateY() – Rota un elemento por su eje Y por un ángulo dado.
 rotateZ() – Rota un elemento por su eje Z por un ángulo dado.

Aquí hay más información sobre transformaciones 3D.

33. Transiciones en CSS


Las transiciones en CSS permiten cambiar los valores de una
propiedad suavemente con una duración determinada.
Las siguientes propiedades son útiles para las transiciones:
 transition –
 transition-delay – Especifica la demora de tiempo (en segundos)
para empezar el efecto.
 transition-duration –
 transition-property –
 transition-timing-function –
A partir de estas versiones soportan los siguientes navegadores estas
propiedades:
Para crear un efecto de transición hay que especificar dos cosas:
 La propiedad de CSS a la que se quiere añadir el efecto.
 La duración del efecto.
Si no se especifica la duración, la transición no tendrá efecto, ya que
el valor por defecto siempre es cero.

Ejemplo:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

En este ejemplo muestra un elemento <div> de 100px * 100px en


rojo. Este elemento también tiene especificado un efecto de

Ejemplo:
div:hover {
width: 300px;
}

transición de ancho de 2 segundos de duración.


El efecto empezará cuando la propiedad especificada (width) cambie
de valor.
Por lo que se añade un nuevo valor que se aplicará al pasar el
puntero del ratón por encima del elemento <div>.
También se le puede aplicar varios valores a la propiedad transition.
Ejemplo:
div {
transition: width 2s, height 4s;
}

33.1. Especificar la curva de velocidad de la


transición
La propiedad transition-timing-function especifica la curva de
velocidad del efecto de transición.
Puede tener los siguientes valores:
 ease – comienzo lento, después rápido y finaliza lento (por
defecto).
 linear – la misma velocidad de principio a fin.
 ease-in – solo el comienzo es lento.
 ease-out – solo el final es lento.
 ease-in-out – inicio y final lentos.
 cubic-bezier(n,n,n,n) – especifica valores determinados en una
función de Bézier cúbico.
También se pueden combinar propiedades de transición y
transformación.

34. Animaciones en CSS


CSS permite realizar animaciones de elementos de HTML sin usar
JavaScript.
Las siguientes propiedades son útiles para hacer animaciones en CSS:
 @keyframes
 animation-name
 animation-duration
 animation-delay
 animation-iteration-count
 animation-direction
 animation-timing-function
 animation-fill-mode
 animation
A partir de estas versiones soportan los siguientes navegadores estas
propiedades:
Una animación permite a un elemento cambiar gradualmente de un
estilo a otro. Se pueden cambiar tantas propiedades de CSS como se
quiera y las veces que se quiera.
Para usar una animación de CSS, primero se tiene que especificar
algunos fotogramas clave (keyframes) para la animación.
La norma @keyframes
Al especificar estilos de CSS dentro de la norma @keyframes, la
animación irá cambiando gradualmente del estilo actual al nuevo

Ejemplo:
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* The element to apply the animation to */


div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

estilo en ciertos momentos.


Para que una animación funcione, hay que vincularla al elemento.
En este ejemplo se vincula la animación “example” al elemento
<div>. La animación durará 4 segundos (usando la propiedad
animation-duration) y cambiará gradualmente el color de fondo del
elemento <div> de rojo a amarillo.
Se especifica cuándo cambiará el estilo usando las palabras clave
(keywords) “from” y “to” (representando el 0% (inicio) y el 100%
(completo)).
Usando porcentajes, se pueden añadir tantos cambios de estilo como
se quiera.
Ejemplo:
/* The animation code */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

/* The element to apply the animation to */


div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

Y en el siguiente ejemplo lo que se hará es especificar también la


posición del elemento.

Ejemplo:
/* The animation code */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */


div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Retrasar una animación
La propiedad animation-delay especifica cuánto se retrasa el inicio de
una animación. Se permiten valores negativos o positivos.
Establecer la cantidad de veces que se ejecutará una
animación
Para esto se puede especificar usando animation-iteration-count. Se
pueden colocar la cantidad de veces que se ejecutará como valor o
también escribiendo el valor infinite, para que se ejecute en bucle.
Ejecutar una animación en dirección contraria o ciclos
alternos
Para esto se puede especificar usando la propiedad animation-
direction junto con estos valores según corresponda:
 normal – Por defecto. La animación se ejecuta de manera
normal.
 reverse – La animación se ejecuta en dirección inversa.
 alternate – La animación se ejecuta normal primero y después
al revés.
 alternate-reverse – La animación se ejecuta al revés primero y
después normal.
También se puede especificar la curva de velocidad de la animación
de la misma forma que con las transiciones, usando la propiedad
animation-timing-function.
Especificar el fill-mode para una animación
Las animaciones no afectan a un elemento antes de que se
reproduzca el primer o último fotograma clave.
La propiedad animation-fill-mode puede anular este comportamiento,
puesto que especifica un estilo para el elemento de destino cuando la
animación no se está reproduciendo (antes de que empiece, después
de que acabe o ambos).
Esta propiedad puede tener los siguientes valores:
 none – Por defecto.
 forwards – El elemento mantendrá los valores del estilo
especificados en el último fotograma.
 backwards – El elemento mantendrá los valores del estilo
especificados en el primer fotograma.
 both – La animación seguirá las reglas de forwards y backwards,
extendiendo la propiedades de la animación en ambas
direcciones.
También se pueden usar atajos con la propiedad animation:
Ejemplo:
div {
animation: example 5s linear 2s infinite alternate;
}
35. Descripción emergente/globo en CSS
Un tooltip (descripción emergente o globo) se usa para especificar
información adicional sobre algo cuando el usuario mueve el puntero
del ratón por encima del elemento.
Ejemplo:
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots
under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

/* Position the tooltip text - see examples below! */


position: absolute;
z-index: 1;
}

/* Show the tooltip text when you mouse over the


tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>

<body style="text-align:center;">
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>

 En HTML – Se usa un elemento contenedor (como <div>) y se le


añade la clase “tooltip”. El texto del tooltip se pondrá dentro de
un elemento inline (como un <span>) con la clase “tooltiptext”.
 En CSS – La clase tooltip usará position:relative, que será
necesario para posicionar el texto del tooltip (position:absolute).
La clase tooltiptext estará oculta por defecto, y será visible al
pasar el puntero del ratón por encima. También se añadirán
algunos estilos básicos.
35.1.
Posicionando tooltips
Ejemplo:
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}

En este ejemplo, el tooltip está a la derecha (left:105%) del texto


(<div>). El top:-5px se usa para colocarlo a la mitad de su elemento

Ejemplo:
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}

contenedor (se usa -5 porque el texto del tooltip tiene un padding top
y bottom de 5px).
En este ejemplo el tooltip está colocado a la izquierda.
Si se quiere que el tooltip aparezca encima o debajo, en este ejemplo
se usa la propiedad margin-left con un valor de -60px. Esto es para
centrar el tooltip arriba/debajo del texto. Esta colocado a la mitad del
ancho del tooltip (120/2=60).

Ejemplo:
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 =
60), to center the tooltip */
}
Ejemplo:
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 =
60), to center the tooltip */
}

Y cambiando a la propiedad top se consigue que esté el tooltip por


debajo del texto.
35.2. Flechas para tooltips
Para crear una flecha que aparezca en un lado en específico del
tooltip, se puede añadir un contenido vacío después del tooltip, con la
clase del pseudoelemento ::after junto con la propiedad content. La
flecha en si es creada usando bordes. Esto hace que el tooltip se vea
como una burbuja de diálogo.

Ejemplo:
.tooltip .tooltiptext {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

Posicionar la flecha dentro del tooltip: top: 100% colocará la flecha


por debajo del tooltip. Left: 50% centrará la flecha.
La propiedad border-width especifica el tamaño de la flecha. Si
cambias eso, también se tendrá que cambiar al mismo valor en
margin-left. Esto mantendrá la flecha centrada.
El border-color se usa para transformar el contenido en una flecha. Se
pone el borde superior en negro y el resto en transparente. Si todos
los lados fueran negros, se obtendría un cuadrado.

Ejemplo:
.tooltip .tooltiptext {
content: " ";
position: absolute;
bottom: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}

De esta forma se puede conseguir que el tooltip este debajo y la


flecha por arriba.
Ejemplo:
.tooltip .tooltiptext {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}

Para colocarlo a la derecha se editan los siguientes valores.

Ejemplo:
.tooltip .tooltiptext {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}

Y de esta forma para que esté posicionado a la izquierda.

35.3. Tooltips con fade-in (animación)


Para que el tooltip tenga un fade-in (aparezca poco a poco), se puede
combinar las propiedades de transition y opacity de CSS, e ir desde el
inicio completamente invisible al un 100% visible en un número
específico de segundos.

Ejemplo:
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
opacity: 1;
}
36. Estilando imágenes en CSS
Imágenes redondeadas
Con la propiedad border-radius se pueden crear imágenes
Ejemplo:
img {
border-radius: 8px;
}

redondeadas.
Imágenes en miniatura
Se puede usar la propiedad border para crear imágenes en miniatura
(thumbnail images).

Ejemplo:
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}

Imágenes responsive
Las imágenes responsive se ajustarán automáticamente al tamaño de
la pantalla.
Esto hará que la imagen disminuya de tamaña si es necesario, pero
no aumente más del tamaño original.
Ejemplo:
img {
max-width: 100%;
height: auto;
}

Centrar una imagen


Para centrar una imagen hay que poner el valor en auto para los
márgenes derecho e izquierdo y convertirla en un elemento de

Ejemplo:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

bloque.
Imágenes/Cartas polaroid

Ejemplo:
[Link] {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,
0.19);
}

img {width: 100%}

[Link] {
text-align: center;
padding: 10px 20px;
}

Aquí hay más información sobre estilos de imágenes en CSS.


37. Paginación en CSS
37.1. Paginación simple
Si se tiene un sitio web con muchas páginas, quizás sea buena idea
añadirle algún tipo de paginación para cada página.

Ejemplo:
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

37.2. Paginación hoover y activa


Resaltando la página actual con una clase .active y usando el selector
:hoover para cambiar cada enlace de página al pasar el puntero del
Ejemplo:
.pagination {
display: inline-block;
color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}


ratón por encima.

Se puede seguir estilando la paginación para que se vea mejor y con


más dinamismo.

Aquí hay más información sobre formas de estilar la


paginación.

También podría gustarte