HTML: junio 2019

Css Tipografía avanzada

El navegador del usuario va a descargar automáticamente (sin que se vea) el archivo de la fuente. Ese archivo puede llegar a pesar 1mb.
*No vale la pena cargar muchas tipografias porque ralentizaría la web.
*Se ha de mirar bien si las tipografias descargadas de Internet son legales.

https://www.fontsquirrel.com/
- En el filtro hay que ir a "webfont" que son las que traen el paquete de varios formatos para adaptarlo a todos los navegadores.
- Escoger una de las fuentes.
- Ir a la pestaña "Webfont Kit"
- Descargar el zip.
- Descomprimir.
- Buscar los archivos que nos interesen.

Ejemplo:

Tipografía básica:

Definir tipografía en el css

Añadirla a etiqueta deseada:

Resultado:

Tipografía avanzada:

*La que nos dan en el archivo preparado de css.
*Hay que prepararla bien, poniendo correctamente la carpeta donde está el archivo y el nombre de la fuente que queramos.

Css Tipografía (font-family)

Las más comunes que no darán ningún problema:

Definir varias fuentes para preveer que alguna no esté disponible.
Ejemplo: font-family: arial, verdana, tahoma;
*La Times New Roman es la que sale por defecto.

Css Mayúsculas (text-transform)

Transforma el texto en mayúsculas o minúsculas.

Css Sangría primera línea (text-indent)

Píxeles: 5px;
EM: 5em;

Css Espaciado (letter-spacing y word-spacing)

Se define con valor numerico:
- Píxel: 2px;
- EM: 0.3em

Css Negritas (font-weight)

Grosor con el que se van a mostrar las letras del texto.
*Por números puede ir de 100 (grosor pequeño) a 900 (grosor grande).

Css Cursivas (font-style)

En la obliqua la forma de la letra no cambia, solo se inclina. En la cursiva itálica no solo se inclina, también cambia un poco el tipo de letra.

*En muchos navegadores no distinguen entre italic y oblique.
*El más típico es oblique.

Css Tamaño de fuente (font-size)

Forma Relativa
El tamaño se adapta al dispositivo con el que nos conectamos.

Utilizando palabras:

*Rápido, cómodo pero limitado.

EM:
No es una unidad exacta pero se podría decir que 1em equivale a la anchura de la letra M mayúscula del tipo y del tamaño de letra estándar (predeterminado) del dispositivo en el que estemos.
*Webs responsive
*Se utilizan puntos para poner decimales.

0.5em = La mitad del tamaño predeterminado
1em = Tamaño predeterminado
2em = El doble del tamaño predeterminado

Forma Absoluta
Trabajar delimitando exactamente el tamaño de la fuente sin que se adapte al dispositivo.Ahora está en desuso.
Píxeles: 30px
Pulgadas: 20in
Centímetros: 2cm
Milímetros: 20mm

Css Estilos decorativos (text-decoration)

a {text-decoration:none}

none - ninguno
underline - subrayado
overline - linea por encima
line-through - tachado

Css Alineación de texto (text-align)

p {text-align:justify;}
left - izquierda
right - derecha
center - centro
justify - justificado

Css Color (color)

Color por nombre:

p {color: blue;}

Color hexadecimal:

p {color: #ffb3ba;}

Código de 6 cifras detrás de # del 0 al 9 y de a a f.
*A veces se pueden abreviar. Ejemplo: #000000 = #000

http://www.color-hex.com

Color RGB (decimales):

p {color: rgb(0,111,45);}

Código formado por 3 números que representan el nivel de rojo, verde y azul del color separados por comas.

Css Atributos Avanzados

Selector universal: * (asterisco)

Selecciona todas las etiquetas

Selector por contexto

Selecciona la etiqueta de contenido únicamente cuando está dentro de otra.

Ejemplo:

Aquí solo se pone en rojo la etiqueta strong que esté dentro de un párrafo.

A+B
Selecciona la siguiente etiqueta B que sigue a A.

A [Atributo]
Selecciona todos los enlaces <a> que tienen el atributo especificado.

A [Atributo ="Valor"]
Selecciona todos los enlaces <a> que tienen un atributo y valor especificado.

Etiquetas universales (div) (span)

Delimitan un fragmento de texto con características especiales.

<div></div>
Uso en bloque: rodea un bloque entero de texto (por ejemplo un párrafo).

<span></span>
Uso en línea: va a afectar a un trozo de texto dentro de un bloque más grande.