logo 3con14 css cod css
  • CSS
  • Conceptos
  • Selectores
  • Unidades, Color
  • Modelo de cajas
  • Posicionamiento
  • Textos, Enlaces
  • Listas, Menús
  • Tablas, Columnas
  • Diseño (Layout)
    • Grid Layout
    • Flex Box
    • Media queries
  • Imagen, Filtros, ...
  • Movimientos
    • Transformaciones
    • Transiciones
    • Animaciones
  • Formularios
  • 🔴 TAREAS
 
 
icon html5
icon css3
mlogo 3con14 css cod

  • Inicio
  • Textos, Enlaces
  • Tipografía

Tipografía

Propiedad color

La propiedad color establece el color con el que se muestra el texto contenido en un elemento.

El color de la letra no puede ser transparente, se debe indicar explícitamente un color utilizando una de las sintáxis explicadas anteriormente.

El valor de esta propiedad se hereda de padres a hijos. De esta forma, si se establece el color de la letra de un párrafo, todas sus etiquetas interiores muestran el mismo color. Si algún elemento interno no debe heredar el color de letra de su padre, se debe establecer de forma explícita la propiedad color para ese elemento.

Aunque la propiedad color se hereda, existe una excepción importante relacionada con los enlaces. Por defecto, los enlaces no muestran el mismo color de letra que su elemento padre, por lo tanto, los enlaces siempre se ven del color establecido en la página, azul por defecto.

Como el valor de la propiedad color se hereda, es muy fácil establecer el color de letra de todos los elementos de la página. Si se establece la propiedad color en el elemento , todos los elementos de la página heredan su valor salvo que se indique lo contrario.

Ejemplos:


/* Color negro para todo el texto de la página */
body { color: #000; }

/* Color rojo oscuro para todos los tipos de encabezados */
h1, h2, h3, h4, h5, h6 { color: #8E342E; }

/* Color azul oscuro para los enlaces */
a { color: #126F83; }

 

Propiedad font-family

La propiedad font-family establece la fuente o tipo de letra con el que se muestra el texto. Su valor inicial depende del navegador y se aplica a todos los elementos.

Cuando no se establece de forma explícita el tipo de letra, los navegadores muestran el texto con un tipo de letra por defecto. Aunque la fuente por defecto depende de cada navegador, la mayoría utilizan Times New Roman o la fuente disponible que más se parezca. Si el nombre de la fuente consta de dos o más palabras es conveniente encerrar su nombre entre comillas (simples o dobles).

La propiedad font-family permite indicar una serie de fuentes alternativas separadas por comas. La lista de fuentes tiene prioridad, por lo que los navegadores intentan mostrar el texto con la primera fuente y si no está disponible, intentan utilizar la segunda fuente y así sucesivamente hasta la última fuente indicada.

Nunca es posible asegurar que todos los usuarios disponen de al menos una de las fuentes alternativas. Por este motivo, CSS también permite indicar de familias de fuentes (nombres genéricos de fuentes). Las cinco familias genéricas no hacen referencia a fuentes concretas, sino al aspecto con el que se muestra el texto. El nombre de la familia se suele indicar al final de la lista de fuentes.

familias txt

Ejemplos:


body { font-family: Arial, Helvetica, Verdana; }
p    { font-family: Georgia, Cambria, Times, "Times New Roman"; }

 

Propiedad font-size

La propiedad font-size establece el tamaño de letra. Las unidades utilizadas son las ya explicadas aquí. Si se utilizan porcentajes, hace referencia al tamaño de letra del elemento contenedor. Es una propiedad que se hereda. Es conveniente no utilizar tamaños absolutos (px), sino relativos (rem, em, %).

size txt

 

Propiedad font

La propiedad font establece algunas o todas las propiedades tipográficas. Cada propiedad define su propio valor por defecto. Se aplica a todos los elementos y es heredable. El orden de las propiedades si importa, y debe ser el indicado más abajo.

Por este motivo, font es una de las propiedades abreviadas que se conocen con el nombre de "propiedades shorthand".

La propiedad font también permite indicar (de forma opcional) el estilo del tipo de letra (propiedad font-style) justo después de font:

La propiedad font también permite indicar (de forma opcional) el interlineado (propiedad line-height) justo después del tamaño de letra y separado por una barra inclinada (/):

font

  • Siguiente

Textos,...

  • Tipografía
  • Estilos para textos
  • Estilos para enlaces

Recursos ...

  • Visual Studio code
  • Sublime Text
  • CSS LINT
  • Normalize

codepen

uniwebsidad

overapi

can i use

w3schools

mdn

Licencias ...

3con14─LAB 1998 - 2021
www.3con14.biz
(cc) Jesús Plaza M.
─ Otros Reconocimientos ─

Visitas ...

Hoy ... 3

Ayer ... 54

Week 199

Mes ... 57

TOTAL ... 79143

  • CSS
  • Conceptos
  • Selectores
  • Unidades, Color
  • Modelo de cajas
  • Posicionamiento
  • Textos, Enlaces
  • Listas, Menús
  • Tablas, Columnas
  • Diseño (Layout)
    • Grid Layout
    • Flex Box
    • Media queries
  • Imagen, Filtros, ...
  • Movimientos
    • Transformaciones
    • Transiciones
    • Animaciones
  • Formularios
  • 🔴 TAREAS