From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../learn/css/styling_text/fuentes_web/index.html | 197 ++++++ .../learn/css/styling_text/fundamentals/index.html | 732 +++++++++++++++++++++ files/es/learn/css/styling_text/index.html | 57 ++ .../css/styling_text/styling_links/index.html | 434 ++++++++++++ .../css/styling_text/styling_lists/index.html | 392 +++++++++++ 5 files changed, 1812 insertions(+) create mode 100644 files/es/learn/css/styling_text/fuentes_web/index.html create mode 100644 files/es/learn/css/styling_text/fundamentals/index.html create mode 100644 files/es/learn/css/styling_text/index.html create mode 100644 files/es/learn/css/styling_text/styling_links/index.html create mode 100644 files/es/learn/css/styling_text/styling_lists/index.html (limited to 'files/es/learn/css/styling_text') diff --git a/files/es/learn/css/styling_text/fuentes_web/index.html b/files/es/learn/css/styling_text/fuentes_web/index.html new file mode 100644 index 0000000000..7bfa162217 --- /dev/null +++ b/files/es/learn/css/styling_text/fuentes_web/index.html @@ -0,0 +1,197 @@ +--- +title: Fuentes web +slug: Learn/CSS/Styling_text/Fuentes_web +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
+ +

En el primer artículo del módulo, exploramos las características básicas del CSS disponibles para aplicar estilos a tipos de letra y al texto. En este artículo vamos a ir más lejos: exploraremos en detalle las tipografías web, que permiten que te descargues tipos de letra personalizados junto con tu página web para lograr un estilo de texto más variado y personalizado.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, conceptos básicos de HTML (véase Introducción al HTML) y de CSS (véase Introducción al CSS), texto CSS y los fundamentos de la fuente.
Objetivo:Aprender a aplicar tipos de letra a una página web, ya sea desde un servicio de terceros o desde tu código.
+ +

Resumen de las familias de tipos de letra

+ +

Como observamos en el artículo Texto y tipos de letra, puedes controlar los tipos de letra que aplicas a tu HTML con la propiedad {{cssxref ("font-family")}}. Este atributo toma uno o más nombres de familia de tipos de letra y el navegador recorre esta lista hasta que encuentra un tipo de letra disponible en el sistema en el que se ejecuta:

+ +
p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}
+ +

Este sistema funciona bien, pero las opciones de tipo de letra tradicionales de los desarrolladores web eran limitadas. Solo hay un puñado de tipos de letra que puedes garantizar que están disponibles en todos los sistemas comunes: las llamadas fuentes seguras para la web. Puedes usar la lista de tipos de letra para especificar cuáles prefieres, seguido de alternativas seguras para la web y del tipo de letra predeterminado del sistema. El problema es que esto añade trabajo extra en términos de pruebas para asegurarte de que tus diseños se ven bien con cada tipo de letra, etc.

+ +

Tipografías web

+ +

Hay una alternativa, sin embargo, que funciona muy bien hasta con versiones posteriores a la versión 6 de Internet Explorer. Las tipografías web son una función del CSS que te permite especificar los archivos de tipo de letra que se van a descargar junto con tu sitio web a medida que el usuario acceda a ellos, lo que significa que cualquier navegador que admita tipografías web puede disponer de los tipos de letra que especificas. ¡Increíble! Observa a continuación la sintaxis que se necesita.

+ +

En primer lugar, tienes un bloque {{cssxref ("@font-face")}} al comienzo del CSS, que especifica los archivos de los tipos de letra que quieres que se descarguen:

+ +
@font-face {
+  font-family: "myFont";
+  src: url("myFont.woff");
+}
+ +

A continuación, puedes usar el nombre de la familia de tipos de letra especificado en @font-face para aplicar tu tipo de letra personalizado a cualquier elemento que desees:

+ +
html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}
+ +

La sintaxis es un poco más compleja; más adelante la veremos más detalladamente.

+ +

Hay dos cosas importantes a tener en cuenta acerca de las tipografías web:

+ +
    +
  1. Los navegadores admiten diferentes formatos de tipos de letra, por lo que necesitarás más de un formato de tipos de letra para conseguir una compatibilidad decente entre navegadores. Por ejemplo, la mayoría de los navegadores modernos admiten WOFF/WOFF2 (Web Open Font Format, versiones 1 y 2), el formato más eficiente disponible. Pero las versiones antiguas de Internet Explorer solo admiten tipos de letra con formato EOT (Embedded Open Type) y es posible que debas incluir una versión SVG del tipo de letra para soportar versiones antiguas de navegadores iPhone y Android. A continuación te mostraremos cómo generar el código necesario.
    2. +
  2. Generalmente las fuentes no son de uso gratuito. Debes pagar por ellas y/o respetar otras condiciones de licencia, como acreditar al creador del tipo de letra en el código (o en tu sitio web). Los tipos de letra no deben robarse, ni debes utilizarlos sin otorgar a su creador el crédito apropiado.
    3. +
+ +
+

Nota: ¡Los tipos de letra seguros para web como tecnología han sido compatibles con Internet Explorer desde su versión 4!

+
+ +

Aprendizaje activo: Un ejemplo de tipo de letra seguro para web

+ +

Con esto en mente, vamos a construir un ejemplo básico de uso de un tipo de letra seguro para web a partir de los principios básicos. Es difícil hacer un ejemplo de demostración de este aspecto con un ejemplo en vivo incrustado, por lo tanto, nos gustaría que siguieses los pasos que se detallan en las secciones siguientes para que te hagas una idea de cómo funciona el proceso.

+ +

Como punto de partida hay que utilizar los archivos web-font-start.html y web-font-start.css a los que añadir tu código (véase el ejemplo en vivo). Haz una copia de estos archivos en un directorio nuevo de tu equipo. En el archivo web-font-start.css, encontrarás un poco de CSS para trabajar con el aspecto y los tipos de letra básicos del ejemplo.

+ +

Encontrar tipos de letra

+ +

Para este ejemplo, utilizaremos dos tipografías web: una para los títulos de encabezado y otra para el texto base. Para empezar, hay que encontrar los archivos que contienen el tipo de letra. Los tipos de letra se crean en estudios de diseño y se guardan en diversos formatos de archivo. En general, hay tres tipos de sitios donde puedes obtener fuentes:

+ + + +

Vamos a ver algunos tipos de letra. Ve a Font Squirrel y elige dos tipos de letra: uno que te resulte agradable e interesante para los títulos (quizá una buena tipografía de tipo Display o Slab Serif), y otro un poco menos llamativo y más legible para los párrafos. Cuando encuentres los tipos de letra, pulsa el botón de descarga y guarda el archivo en el mismo directorio que los archivos HTML y CSS que guardaste anteriormente. No importa si son TTF (True Type Fonts) u OTF (Open Type Fonts).

+ +

En cada caso, descomprime el paquete de tipos de letra (las tipografías web generalmente se distribuyen en archivos ZIP que contienen los archivos con el tipo de letra y la información de la licencia). En el paquete puede haber más de un archivo con tipos de letra: algunos tipos de letra se distribuyen por familias, con diferentes variantes disponibles, por ejemplo: thin, medium, bold, italic, thin italic, etc. Para este ejemplo, solo queremos que te quedes con un solo archivo de fuente para cada opción.

+ +
+

Nota: En la sección «Encontrar tipos de letra» en la columna de la derecha, puedes hacer clic en las diferentes etiquetas y clasificaciones para filtrar las opciones.

+
+ +

Generar el código

+ +

Ahora deberás generar el código que necesitas (y aplicar el estilo al tipo de letra). Para cada tipo de letra, sigue estos pasos:

+ +
    +
  1. Asegúrate de cumplir con todos los requisitos de la licencia, sobre todo si vas a usarlo en un proyecto comercial y/o en una web.
    2. +
  2. Ve a Webfont Generator de Fontsquirrel.
    3. +
  3. Sube tus dos archivos de tipo de letra con el botón Cargar Fuentes.
    4. +
  4. Marca la casilla de verificación con el texto «Sí, las fuentes que elijo pueden utilizarse legalmente para una página web».
    5. +
  5. Haz clic en Descarga tu paquete.
    6. +
+ +

Una vez que el generador haya finalizado el procesamiento, deberías obtener un archivo ZIP para descargar; guárdalo en el mismo directorio que tus archivos HTML y CSS.

+ +

El código de tu ejemplo de demostración

+ +

En este punto, descomprime el paquete con los tipos de letra web que acabas de generar. En el directorio descomprimido verás tres elementos útiles:

+ + + +

Para implementar estos tipos de letra en tu ejemplo de demostración, sigue estos pasos:

+ +
    +
  1. Cambia el nombre del directorio descomprimido a algo fácil y simple, como fonts.
    2. +
  2. Abre el archivo stylesheet.css y copia los dos bloques @font-face incluidos en tu archivo web-font-start.css. Debes ponerlos en la parte superior, antes de cualquier elemento CSS, ya que los tipos de letra deben importarse antes que los puedas utilizar en tu sitio web.
    3. +
  3. Cada una de las funciones url() apunta a un archivo de tipo de letra que tenemos que importar a nuestro CSS. Necesitamos asegurarnos de que las rutas a los archivos son correctas, así que añade fonts/ al inicio de cada ruta (ajusta la ruta como sea necesario).
    4. +
  4. Ahora puedes usar estos tipos de letra en tu lista de tipos de letra, al igual que cualquier tipo de letra seguro o predeterminado del sistema. Por ejemplo: + 
    font-family: 'zantrokeregular', serif;
    +
    5. +
+ +

Con tu ejemplo de demostración, deberías obtener una página con unos agradables tipos de letra. Debido a que los tipos de letra se crean en diferentes tamaños, es posible que tengas que ajustar el tamaño, el espaciado, etc., para conseguir una apariencia más ordenada.

+ +

+ +
+

Nota: Si tienes problemas para lograr que esto funcione, no dudes en comparar tu versión con nuestros archivos terminados, consulta web-font-finished.html y web-font-finished.css (ejecuta el ejemplo terminado en vivo).

+
+ +

Los servicios de tipos de letra en línea

+ +

Los servicios de tipos de letra en línea en general guardan tipos de letra y los proporcionan a los usuarios, por lo que no tienes que preocuparte por escribir el código @font-face, solo necesitas insertar una o dos sencillas líneas de código en tu sitio web para que todo funcione. Los ejemplos incluyen Adobe Fonts y Cloud.typography. La mayoría de estos servicios se basan en suscripciones de pago, con la excepción notable de Google Fonts, un servicio gratuito y muy útil, sobre todo para trabajos de prueba rápida y escritura de ejemplos de demostración.

+ +

La mayoría de estos servicios son fáciles de usar, por lo que no vamos a exponerlos en gran detalle. Vamos a echar un vistazo rápido a las fuentes de Google, para que te hagas una idea. De nuevo, usa copias de web-font-start.html y web-font-start.css como punto de partida.

+ +
    +
  1. Ve a Google Fonts.
    2. +
  2. Usa los filtros del lado izquierdo para indicar los tipos de letra que deseas escoger y elige un par de tipos de letra que te gusten.
    3. +
  3. Para seleccionar una familia de tipos de letra, pulsa el botón ⊕ que encontrarás al lado.
    4. +
  4. Cuando hayas elegido las familias de tipos de letra, pulsa la barra [número] familias seleccionadas que encontrarás en la parte inferior de la página.
    5. +
  5. En la pantalla resultante, primero debes copiar la línea de código HTML que se muestra y pegarla en el encabezado de tu archivo HTML. Ponlo encima del elemento {{HTMLElement("link")}}, de modo que el tipo de letra se importe correctamente antes de intentar utilizarlo en tu CSS.
    6. +
  6. Luego, debes copiar las declaraciones CSS enumeradas en tu CSS según corresponda para aplicar los tipos de letra personalizados a tu HTML.
    7. +
+ +
+

Nota: Puedes encontrar una versión completa en google-font.html y google-font.css, si necesitas comparar tu trabajo con el nuestro (consúltalo en vivo).

+
+ +

@font-face con más detalle

+ +

Vamos a explorar que la sintaxis correspondiente a @font-face que te ha generado Fontsquirrel. Uno de los bloques se verá así:

+ +
@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+ +

Esto se conoce como «sintaxis @font-face a prueba de balas» desde una publicación de Paul Irish, en los tiempos en que @font-face empezaba a popularizarse (Bulletproof @font-face Syntax). Vamos a ver qué hace:

+ + + +
+

Nota: También puedes especificar los valores particulares {{cssxref ("font-variant")}} y {{cssxref ("font-stretch")}} para tus tipos de letra seguros para web. En los navegadores más nuevos también puedes especificar un valor {{cssxref ("unicode-range")}}, que es un rango de caracteres específicos que debes usar aparte del tipo de letra seguro para web en los navegadores que incluyan esta opción. Solo se descargaran los caracteres especificados y te ahorrarás descargas innecesarias. Creating Custom Font Stacks with Unicode-Range de Drew McLellan proporciona algunas ideas útiles sobre cómo hacer uso de todo esto.

+
+ +

Tipos de letra variables

+ +

Los navegadores disponen hoy de una tecnología de tipos de letra reciente llamada tipos de letra variables: se trata de tipos de letra que permiten incorporar muchas variaciones diferentes de un tipo de letra en un solo archivo, en lugar de tener un archivo separado para cada ancho, grosor o estilo. Es demasiado avanzado para nuestro curso para principiantes, pero si te apetece avanzar y echarles un vistazo, lee nuestra guía de tipos de letra variables.

+ +

Resumen

+ +

Ahora que has leído nuestros artículos sobre nociones de aplicación de estilo al texto, es hora de evaluar cuánto has retenido del módulo a partir de la creación de una composición tipográfica de una página de inicio de una escuela comunitaria.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/styling_text/fundamentals/index.html b/files/es/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..a1fa747e27 --- /dev/null +++ b/files/es/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,732 @@ +--- +title: Fundamentos de texto y fuentes tipográficas +slug: Learn/CSS/Styling_text/Fundamentals +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
+ +

En este artículo vas a iniciar tu viaje hacia el dominio la aplicación de estilos a textos con {{glossary("CSS")}}. Aquí trataremos en detalle todos los fundamentos básicos del diseño del texto y las fuentes tipográficas, incluyendo la configuración de su grosor, la familia y el estilo de letra, las propiedades abreviadas para los tipos de letra, la alineación del texto, el espaciado entre líneas y letras, y otros efectos.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, conceptos básicos de HTML (estudio de Introducción al HTML), conceptos básicos de CSS (estudio de Introducción al CSS).
Objetivo:Aprender las propiedades y técnicas fundamentales necesarias para dar estilo al texto en las páginas web.
+ +

¿Qué implica aplicar estilo a texto en CSS?

+ +

Como ya habrás experimentado en tu trabajo con el HTML y el CSS, el texto incluido en un elemento se dispone dentro de la caja de contenido del elemento. Esta empieza en la parte superior izquierda del área de contenido (o en la esquina superior derecha, en el caso del contenido de los lenguajes RTL, o right-to-left, que se escriben de derecha a izquierda) y fluye hacia el final de la línea. Una vez que llega al final, baja a la línea siguiente y sigue, y luego continúa a la línea siguiente, hasta que todo el contenido se ha ubicado en la caja. El contenido de texto se comporta efectivamente como una serie de elementos en línea, distribuidos en líneas adyacentes entre sí, y sin crear saltos de línea hasta que se llega al final de la línea, a menos que se fuerce un salto de línea manual con el elemento {{htmlelement("br")}}.

+ +
+

Nota: Si el párrafo anterior te parece confuso, no te preocupes: vuelve atrás y revisa el artículo sobre el modelo de caja antes de continuar.

+
+ +

Las propiedades CSS que se usan para aplicar estilo al texto pueden clasificarse generalmente en dos categorías, que veremos por separado en este artículo:

+ + + +
+

Nota: Ten en cuenta que el efecto se aplica sobre todo el texto que hay dentro de un elemento como si fuera una única entidad. No puedes seleccionar y dar estilo a subsecciones de texto, a menos que las delimites con algún elemento apropiado (como {{htmlelement("span")}} o {{htmlelement("strong")}}), o con un pseudoelemento específico para el texto como ::first-letter (selecciona la primera letra del texto de un elemento), ::first-line (selecciona la primera línea del texto de un elemento), o ::selection (selecciona el texto que está resaltado por el cursor).

+
+ +

Tipos de letra

+ +

Veamos las propiedades que permiten definir el estilo del tipo de letra. En este ejemplo aplicaremos algunas propiedades CSS diferentes al mismo ejemplo HTML, que presentamos a continuación:

+ +
<h1>Tommy the cat</h1>
+
+<p>Well I remember it as though it were a meal ago...</p>
+
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.</p>
+ +

Puedes ver el ejemplo completo en Github (consulta también el código fuente.)

+ +

Color

+ +

La propiedad {{cssxref("color")}} establece el color del contenido de los elementos seleccionados (que normalmente es texto, pero también puede incluir un par cosas más, como un subrayado o una línea superpuesta al texto con la propiedad {{cssxref("text-decoration")}} ).

+ +

La propiedad color puede admitir cualquier unidad de color CSS, por ejemplo:

+ +
p {
+  color: red;
+}
+ +

Esto mostrará el contenido de los párrafos en color rojo, en lugar del negro que es el estándar por defecto del navegador:

+ + + +

{{ EmbedLiveSample('Color', '100%', 220) }}

+ +

Familia de tipos de letras

+ +

Usamos la propiedad {{cssxref("font-family")}} para definir un tipo de letra diferente para nuestro texto. Esta propiedad indica al navegador el tipo de letra (o una lista de tipos de letra) que debe aplicar a los elementos seleccionados. El navegador solo aplica el tipo de letra si la máquina que accede al sitio web dispone de ella; en caso contrario, simplemente usa el tipo de letra que tiene definido por defecto ({{anch("Default fonts", "default font")}}). Aquí tienes un ejemplo sencillo:

+ +
p {
+  font-family: arial;
+}
+ +

Con esto, todos los párrafos de una página adoptan el tipo de letra Arial, que se encuentra en cualquier ordenador.

+ +

Tipos de letra seguros para la web

+ +

Solo hay un cierto número de tipos de letra que están disponibles en todos los sistemas en general, y que en consecuencia pueden utilizarse sin demasiadas preocupaciones. Son los llamados tipos de letra seguros para la web, o web safe fonts.

+ +

La mayor parte del tiempo, como desarrolladores web deseamos tener un control específico mayor sobre los tipos de letra con que se va a mostrar para mostrar nuestro contenido de texto. El problema está en encontrar una manera de saber de qué tipo de letra dispone el ordenador que se utiliza para acceder a nuestras páginas. No hay manera de saber esto en todos los casos, pero al menos contamos con que los tipos de letra seguros para la web están disponibles en casi todos los sistemas operativos más utilizados (las distribuciones Linux más comunes, Windows, Mac, Android, e iOS).

+ +

La lista de los tipos de letra seguros para la web cambia al ir evolucionando los sistemas operativos, pero es correcto considerar los tipos de letra siguientes como seguros para la web, al menos por ahora (muchos de ellos se han popularizado gracias a la iniciativa Core fonts for the web de Microsoft, de finales de la década de 1990 y principios de la del 2000):

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NombreTipo de letra genéricoObservaciones
Arialsans-serifA menudo se considera una buena práctica añadir también Helvética como opción preferida a Arial porque, aunque tienen casi el mismo aspecto y Arial está más ampliamente disponible, se considera que Helvética tiene una forma más agradable.
Courier NewmonospaceAlgunos sistemas operativos cuentan con una versión alternativa (posiblemente más antigua) del tipo de letra Courier New llamado Courier. Se considera una buena práctica usar ambos, con Courier New como la opción preferida.
Georgiaserif
Times New RomanserifAlgunos sistemas operativos cuentan con una versión alternativa (posiblemente más antigua) del tipo de letra Times New Roman llamado Times. Se considera una buena práctica usar ambos, con Times New Roman como la opción preferida.
Trebuchet MSsans-serifHay que tener cuidado al usar este tipo de letra porque no está ampliamente disponible en los sistemas operativos móviles.
Verdanasans-serif
+ +
+

Nota: Entre otros recursos, el sitio cssfontstack.com mantiene una lista de tipos de letra seguros disponibles en los sistemas operativos para Windows y Mac, que puede ayudarte en la toma de decisiones acerca de lo que consideras seguro para tus propósitos.

+
+ +
+

Nota: Hay una manera de descargar un tipo de letra personalizado junto con la página web, que te permite personalizar el uso de los tipos de letra de la manera que desees: web fonts. Esto es un poco más complejo, y lo vamos a exponer más adelante en un artículo independiente del módulo.

+
+ +

Fuentes predeterminadas

+ +

CSS define cinco nombres genéricos para los tipos de letra serif, sans-serif, monospace, cursive y fantasy. Son muy genéricos y el tipo de letra exacto que se va a utilizar cuando se especifiquen dichos nombres dependerá de cada navegador y puede variar dependiendo del sistema operativo. Representa el peor escenario posible, en el que el navegador tratará de proporcionar al menos una fuente que parezca apropiada. serif, sans-serif y monospace son bastante predecibles y el navegador debería proporcionar algo razonable. Por otra parte, cursive y fantasy son menos predecibles y te recomendamos que las uses con cautela, y vayas probando a medida que avanzas.

+ +

Los cinco nombres se definen de la manera siguiente:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NombreDefiniciónEjemplo
serifTipos de letra que tienen serifas (pequeños adornos, en general en los extremos de los trazos de los caracteres tipográficos)Mi gran elefante rojo
sans-serifTipos de letra que carecen de serifas.Mi gran elefante rojo
monospaceTipos de letra en que cada carácter tiene el mismo ancho; se usan con frecuencia en las listas de sentencias de los códigos de programación.Mi gran elefante rojo
cursiveTipos de letra que intentan emular la letra manuscrita, con trazos fluidos y conectados.Mi gran elefante rojo
fantasyTipos de letra que pensados para ser decorativos.Mi gran elefante rojo
+ +

Listas de tipos de letra

+ +

Ya que no puedes garantizar la disponibilidad de los tipos de letra que deseas utilizar (incluso un tipo de letra seguro para la web podría fallar por alguna razón), puedes proporcionar un lista de tipos de letra para que el navegador tenga diversos tipos de letra entre los que elegir. Consiste simplemente en introducirlo como el valor de font-family, que consistirá en una lista de diversos nombres de tipos de letra separados por comas, por ejemplo.

+ +
p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}
+ +

En tal caso, el navegador comienza al principio de la lista y busca si el primer tipo de letra está disponible en la máquina. Si es así, aplica ese tipo de letra a los elementos seleccionados, y si no, lo intenta con el nombre siguiente de la lista; y así sucesivamente.

+ +

Es una buena idea proporcionar un nombre de tipo de letra genérico al final de la lista para que el navegador pueda al menos proporcionar algo aproximadamente adecuado en el caso de que ninguno de los tipos de letra que deseas esté disponible. Para ilustrar este punto: los navegadores asignan a los párrafos el tipo de letra serif por defecto, que normalmente es Times New Roman, si no hay ninguna otra opción disponible, pero esto no resulta conveniente cuando se espera un tipo de letra sans-serif!

+ +
+

Nota: Los nombres de los tipos de letra que están constituidos por más de una palabra (como Trebuchet MS ) han de ponerse entre comillas, por ejemplo "Trebuchet MS".

+
+ +

Un ejemplo con font-family

+ +

Vamos a introducir en nuestro ejemplo anterior una fuente de tipo sans-serif para los párrafos:

+ +
p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

Esto nos da el resultado siguiente:

+ + + +

{{ EmbedLiveSample('Un_ejemplo_con_font-family', '100%', 220) }}

+ +

Tamaño de la letra

+ +

En el artículo sobre Unidades y valores de CSS de nuestro módulo anterior, revisamos las unidades de longitud y tamaño. El tamaño del tipo de letra (establecido con la propiedad {{cssxref("font-size")}}) puede tomar valores medidos en la mayoría de estas unidades (y en otras, como porcentajes). Sin embargo, las unidades más comunes que vas a usar para ajustar el tamaño del texto son:

+ + + +

La propiedad font-size de un elemento se hereda del elemento padre. Todo comienza con el elemento raíz de todo el documento ({{htmlelement("html")}}) cuya propiedad font-size se establece a en 16px como estándar en todos los navegadores. Cualquier párrafo (o cualquier otro elemento que no tenga un tamaño diferente establecido por el navegador) dentro del elemento raíz tendrá un tamaño final de 16px. Otros elementos pueden tener diferentes tamaños predeterminados, por ejemplo un elemento {{htmlelement("h1")}} tiene de manera predeterminada un tamaño establecido de 2em, por lo que tendrá un tamaño final de 32px.

+ +

Las cosas se vuelven más complicadas cuando se empieza a alterar el tamaño del tipo de letra de los elementos anidados. Por ejemplo, si tu página incluye un elemento {{htmlelement("article")}} y estableces un tamaño de fuente de 1.5em (que resultará en un tamaño final de 24px), y luego quieres que los párrafos dentro del elemento <article> tengan un tamaño de letra calculado de 20px, ¿qué valor de unidad em deberías usar?

+ +
<!-- El tamaño de letra base del documento es 16px -->
+<article> <!-- Si mi tamaño de letra es 1.5em -->
+  <p>Mi párrafo</p> <!-- ¿Cómo calculo el tamaño del tipo de letra para que de 20px? -->
+</article>
+ +

Necesitarías establecer el valor en unidades em de 20/24, es decir, 0.83333333 em. El cálculo puede ser complicado, por lo que hay que pensarlo bien a la hora de aplicar estilo a las cosas. Lo mejor es usar unidades rem donde se pueda, porque simplifican las cosas, y evitar establecer un tamaño de letra concreto para los elementos del contenedor, siempre que sea posible.

+ +

Un ejemplo sencillo de definición de tamaños

+ +

Al dimensionar el texto, en general es una buena idea establecer el tamaño básico del tipo de letra del documento (font-size) en 10 px, de modo que los cálculos son mucho más fáciles de resolver, puesto que entonces los valores (r)em que necesites son el tamaño del tipo de letra en píxeles dividido por 10, no por 16. Luego de hacer eso, puedes establecer con facilidad los diferentes tamaños de los tipos de letra de tu documento como desees. Es una buena idea hacer una lista de todos los conjuntos de reglas de tamaño de fuente (font-size) en una zona concreta de tu hoja de estilo para que resulten fáciles de encontrar.

+ +

Nuestro nuevo resultado es:

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Un_ejemplo_sencillo_de_definición_de_tamaños', '100%', 220) }}

+ +

Estilo y cuerpo del tipo de letra, efectos y decoración del texto

+ +

El CSS proporciona cuatro propiedades comunes para alterar el efecto visual / énfasis del texto:

+ + + +

Añadamos un par de estas propiedades a nuestro ejemplo. Nuestro nuevo resultado quedaría como este:

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Estilo_y_cuerpo_del_tipo_de_letra_efectos_y_decoración_del_texto', '100%', 220) }}

+ +

Textos sombreados

+ +

Puedes aplicar sombras a tus textos con la propiedad {{cssxref("text-shadow")}}. Esta propiedad puede tomar hasta cuatro valores, como se muestra en ejemplo siguiente:

+ +
text-shadow: 1px 1px 1px red;
+ +

Las cuatro propiedades son las siguientes:

+ +
    +
  1. El desplazamiento horizontal de la sombra desde el texto original; admite la mayoría de las unidades y magnitudes de que dispone CSS, pero lo más habitual es usar px. Es un valor obligatorio.
    2. +
  2. El desplazamiento vertical de la sombra desde el texto original; se comporta básicamente igual que el desplazamiento horizontal, excepto porque mueve la sombra arriba/abajo, y no hacia derecha/izquierda. Es un valor obligatorio.
    3. +
  3. El radio de desenfoque; cuanto más alto es este valor, mayor es la dispersión de la sombra. Si no se incluye este valor, el valor por defecto es 0, y no hay desenfoque. Esta propiedad admite la mayoría de las unidades y magnitudes de que dispone el CSS.
    4. +
  4. El color de base de la sombra, que admite cualquier unidad de color de que dispone CSS. Si no se incluye este valor, el valor predeterminado es negro.
    5. +
+ +
+

Nota: Los valores con desplazamiento positivo mueven la sombra hacia la derecha o hacia abajo, mientras que los valores con desplazamiento negativo, por ejemplo -1px -1px, mueven la sombrea hacia la izquierda o hacia arriba.

+
+ +

Sombras múltiples

+ +

Puedes aplicar diversas sombras al mismo texto incluyendo múltiples valores de sombra separados por comas, por ejemplo:

+ +
text-shadow: -1px -1px 1px #aaa,
+             0px 4px 1px rgba(0,0,0,0.5),
+             4px 4px 5px rgba(0,0,0,0.7),
+             0px 0px 7px rgba(0,0,0,0.4);
+ +

Si aplicamos esto al elemento {{htmlelement("h1")}} de nuestro ejemplo Tommy The Cat, obtenemos esto:

+ + + +

{{ EmbedLiveSample('Sombras_múltiples', '100%', 220) }}

+ +
+

Nota: Puedes ver más ejemplos interesantes del uso de text-shadow en el artículo de Sitepoint Moonlighting with CSS text-shadow.

+
+ +

Diseño del texto

+ +

Una vez tratadas las propiedades básicas para los tipos de letra, echemos un vistazo a las propiedades que podemos usar para la disposición del texto.

+ +

Alineación del texto

+ +

La propiedad {{cssxref("text-align")}} se usa para controlar la forma en que el texto se alinea dentro de la caja que lo contiene. Los valores disponibles para esta propiedad son los siguientes, y funcionan de la misma forma que en una aplicación de procesamiento de texto:

+ + + +

Si aplicamos text-align: center; al elemento {{htmlelement("h1")}} de nuestro ejemplo, obtendremos esto:

+ + + +

{{ EmbedLiveSample('Alineación_del_texto', '100%', 220) }}

+ +

Interlineado

+ +

La propiedad {{cssxref("line-height")}} establece la altura entre cada línea de texto; esta propiedad admite la mayoría de las unidades y magnitudes, pero también puede tomar un valor sin unidades, que actúa como un multiplicador y generalmente se considera la mejor opción porque se multiplica la propiedad {{cssxref("font-size")}} para obtener la altura de la línea (line-height). El texto del cuerpo (body) generalmente se ve mejor y es más fácil de leer si hay más separación entre las líneas; la altura recomendada de la línea es entre 1.5-2 (a doble espacio). Por lo tanto, para configurar nuestras líneas de texto a 1.5 veces la altura de la fuente, deberías usar esto:

+ +
line-height: 1.5;
+ +

Aplicando esto a los elementos {{htmlelement("p")}} en nuestro ejemplo nos daría este resultado:

+ + + +

{{ EmbedLiveSample('Interlineado', '100%', 250) }}

+ +

Espacio entre letras y espacio entre palabras

+ +

Las propiedades {{cssxref("letter-spacing")}} y {{cssxref("word-spacing")}} te permiten establecer el espacio entre las letras y entre las palabras del texto. No los usarás a menudo, pero podría ser útil para obtener una apariencia determinada o para mejorar la legibilidad de un tipo de letra particularmente denso. Estas propiedades admiten la mayoría de las unidades y magnitudes.

+ +

Así, como ejemplo, podemos aplicar a la primera línea de los elementos {{htmlelement("p")}} de nuestro ejemplo lo siguiente:

+ +
p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}
+ +

y obtendremos:

+ + + +

{{ EmbedLiveSample('Espacio_entre_letras_y_espacio_entre_palabras', '100%', 250) }}

+ +

Otras propiedades interesantes

+ +

Las propiedades anteriores nos dan una idea de cómo empezar a aplicar texto a una página web, pero hay muchas más propiedades que puedes usar. Nuestro objetivo aquí es solo exponer las más importantes. Cuando te hayas acostumbrado a usar las propiedades anteriores, también deberías explorar las siguientes:

+ +

Aplicación de estilos a tipos de letra:

+ + + +

Estilos de disposición de los textos

+ + + +

Propiedades abreviadas para los tipos de letra

+ +

Muchas propiedades relativas a los tipos de letra también pueden establecerse de forma abreviada con la propiedad {{cssxref("font")}}. Se escriben en el orden siguiente: {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.

+ +

De entre todas estas propiedades, solo font-size y font-family son obligatorias al usar la propiedad abreviada de font.

+ +

Se debe colocar una barra inclinada (slash) entre las propiedades {{cssxref("font-size")}} y {{cssxref("line-height")}}.

+ +

Un ejemplo completo se vería así:

+ +
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+ +

Aprendizaje activo: Jugar a aplicar estilos

+ +

En esta sección de aprendizaje activo no proponemos ningún ejercicio específico: Simplemente nos gustaría que juegues con algunas propiedades de diseño de tipo de letra / texto, ¡y a ver qué consigues! Puedes hacer esto con archivos HTML/CSS sin conexión, o puedes introducir tu código en el ejemplo editable en vivo a continuación.

+ +

Si te equivocas, puedes volver a empezar con el botón Reinicio.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Resumen

+ +

Esperamos que hayas disfrutado jugando con el texto en este artículo. El próximo artículo te enseñará todo lo que necesitas saber sobre la aplicación de estilos de lista en HTML.

+ +

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/styling_text/index.html b/files/es/learn/css/styling_text/index.html new file mode 100644 index 0000000000..a87012ec5c --- /dev/null +++ b/files/es/learn/css/styling_text/index.html @@ -0,0 +1,57 @@ +--- +title: Estilo de texto +slug: Learn/CSS/Styling_text +tags: + - Beginner + - CSS + - CodingScripting + - Fonts + - Landing + - Links + - Module + - NeedsTranslation + - Text + - TopicStub + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +
{{LearnSidebar}}
+ +

Con los conceptos básicos del lenguaje CSS cubiertos, el siguiente tema de CSS para concentrarse es estilizar texto — una de las cosas más comunes que hará con CSS. Aquí observamos los fundamentos para estilizar texto, incluyendo la configuración de fuente, negrita, cursiva, linea y espacios entre letras, sombras paralelas y otras funciones de texto. Completamos el módulo observando la aplicación de fuentes personalizadas en su página, y el diseño de listas y enlaces.

+ +

Requisitos previos

+ +

Antes de iniciar este módulo, ya debe estár familizarizado con HTML, como se explica en el módulo Introducción a HTML, y sentirse cómodo con los fundamentos de CSS, como se explica en Introducción a CSS.

+ +
+

Nota: Si está trabajando en una computadora/tableta/u otro dispositivo donde no tenga la capacidad de crear sus propios archivos, puede probar (la mayoría) de los ejemplos de código en un programa de codificación en línea como JSBin, CodePen o Thimble.

+
+ +

Guías

+ +

Este módulo contiene los siguientes artículos, los cuales le enseñarán todos los elementos esenciales detras del diseño de contenido de texto HTML.

+ +
+
Texto fundamental y estilo de fuente
+
En este artículo iremos a través de todos los aspectos básicos del estilo de texto/fuente en detalle, incluyendo configuraciones del peso de la fuente, la familia y el estilo, taquigrafía de fuente, alineación de texto y otros efectos, línea y espaciado de letras.
+
Estilos de listas
+
Las listas, en su mayor parte, se comportan como cualquier otro texto, pero hay algunas propiedades de CSS específicas para las listas que debe conocer, y algunas de las mejores prácticas para tener en cuenta. Este artículo explica todo.
+
Estilos de enlaces
+
Al diseñar enlaces, es importante comprender cómo hacer uso de pseudo-clases para diseñar estados de enlaces de manera efectiva, y cómo diseñar enlaces para su uso en características de interfaces variadas comunes tales como menús de navegación y pestañas. Veremos todos estos temas en este artículo.
+
Fuentes web
+
Aquí exploraremos las fuentes web en detalle — estas permiten descargar fuentes personalizadas junto con su página web, para permitir un estilo de texto más variado y personalizado.
+
+ +

Evaluaciones

+ +

Las siguientes evaluaciones pondrán a prueba su comprensión de las técnicas del diseño de texto cubiertas en las guías anteriores.

+ +
+
Escribiendo una página de inicio para la comunidad de la escuela
+
En esta evaluación, pondremos a prueba su comprensión del estilo del texto haciendo que redacte el texto de la página principal de la escuela comunitaria.
+
diff --git a/files/es/learn/css/styling_text/styling_links/index.html b/files/es/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..b5180d51df --- /dev/null +++ b/files/es/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,434 @@ +--- +title: Dar estilo a los enlaces +slug: Learn/CSS/Styling_text/Styling_links +translation_of: Learn/CSS/Styling_text/Styling_links +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

A la hora de dar estilo a los enlaces, es importante comprender cómo utilizar las pseudoclases para diseñar los estados de un enlace de manera efectiva y cómo diseñar enlaces para su uso en diversas funciones de interfaz comunes, como menús y pestañas de navegación. Veremos todos estos temas en este artículo.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, conceptos básicos de HTML (véase Introducción al HTML), conocimientos básicos de CSS (véase Introducción al CSS), nociones de aplicación de estilo con CSS a textos y tipos de letra.
Objetivo:Aprender a dar formato a los estados de un enlace y a usarlos de manera efectiva en algunas funciones de interfaz de usuario comunes, como los menús de navegación.
+ +

Echemos un vistazo a algunos enlaces

+ +

Analizamos cómo se implementan los enlaces en tu HTML de acuerdo con las buenas prácticas de Creación de hipervínculos. En este artículo desarrollaremos estos conocimientos y te mostraremos las buenas prácticas del diseño de enlaces.

+ +

Los estados de un enlace

+ +

Lo primero que hay que entender es el concepto de estados de un enlace (diferentes estados en los que pueden estar los enlaces, que pueden diseñarse usando diferentes pseudoclases):

+ + + +

Estilos predeterminados

+ +

El ejemplo siguiente ilustra cómo se comportará un enlace por defecto (el CSS simplemente amplía y centra el texto para que destaque más).

+ +
<p><a href="#">Un enlace simple</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('Estilos_predeterminados', '100%', 120) }}

+ +
+

Nota: Todos los enlaces que hay en los ejemplos de esta página son simulados, encontrarás un símbolo # (almohadilla) en el lugar de una URL real. Esto es porque si incluyéramos enlaces reales, los ejemplos quedarían interrumpidos al hacer clic (daría error, o se cargaría una página en el ejemplo incrustado de la que no podrías volver atrás). # solo establece enlaces dentro de la misma página.

+
+ +

A medida que explores los estilos predeterminados, observarás algunas cosas:

+ + + +

Curiosamente, estos estilos predeterminados son casi los mismos que se utilizaban al inicio de los navegadores en la década de 1990. Esto se debe a que los usuarios conocen y esperan que sea de esta forma. Podría confundir a mucha gente que los enlaces se mostrasen de manera diferente. Esto no quiere decir que no puedas cambiar el formato de los enlaces, solo que no deberías alejarte mucho de la conducta esperada. Al menos deberías:

+ + + +

Los estilos por defecto se pueden desactivar/cambiar usando las propiedades CSS siguientes:

+ + + +
+

Nota: No estás limitado a las propiedades anteriores para diseñar tus enlaces; tienes libertad para usar cualquier propiedad que te guste. ¡Solo trata de que no resulte descabellado!

+
+ +

Dar formato a algunos enlaces

+ +

Ahora que hemos visto los estados predeterminados, veamos un conjunto típico de estilos de enlace.

+ +

Para empezar, escribiremos nuestro conjunto de reglas vacío:

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

Este orden es importante porque los estilos de enlace se construyen sobre los anteriores. Por ejemplo, los estilos de la primera regla se aplicarán a todas las reglas siguientes, y cuando activas un enlace también pasas con el cursor por encima. Si los pones en un orden incorrecto, no funcionarán adecuadamente. Para recordar este orden, puedes intentar utilizar una fórmula nemotécnica como LoVe Fears HAte.

+ +

Ahora vamos a añadir algo más de información para darles formato:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}
+ +

También proporcionaremos algún ejemplo de HTML al que aplicar CSS:

+ +
<p>Dispones de varios navegadores, como <a href="#">Mozilla
+Firefox</a>, <a href="#">Google Chrome</a> y
+<a href="#">Microsoft Edge</a>.</p>
+ +

Poner los dos juntos nos da este resultado:

+ +

{{ EmbedLiveSample('Dar_formato_a_algunos_enlaces', '100%', 150) }}

+ +

¿Qué hemos hecho aquí? Sin duda tiene un aspecto diferente al estilo predeterminado, pero todavía ofrece una experiencia lo suficientemente familiar como para que los usuarios sepan de qué se trata:

+ + + +

Aprendizaje activo: proporciona estilo a tus enlaces

+ +

En esta sesión de aprendizaje activo, queremos que tomes nuestro conjunto de reglas vacías y añadas tus propias declaraciones para lograr unos enlaces geniales. Da rienda suelta a tu imaginación. Estamos seguros de que puedes crear algo genial y tan funcional como nuestro ejemplo anterior.

+ +

Si te equivocas, puedes volver a empezar pulsando el botón Reinicio. Si te quedas encallado, pulsa el botón Mostrar la solución para recuperar el ejemplo anterior.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Incluir iconos en los enlaces

+ +

Una práctica común es incluir iconos en los enlaces para proporcionar más de un indicador en cuanto a qué tipo de contenido apunta. Echemos un vistazo a un ejemplo muy simple que añade un icono a enlaces externos (enlaces que conducen a otros sitios web). Este icono suele parecerse a una pequeña flecha que sale de un cuadro; para este ejemplo, usaremos este fantástico ejemplo de icons8.com.

+ +

Echemos un vistazo a algunos elementos HTML y CSS que nos van a proporcionar el efecto que queremos. En primer lugar, algunos elementos HTML sencillos para dar estilo:

+ +
<p>Para obtener más información sobre el tiempo, visite nuestra <a href="http://#">página del tiempo</a>,
+mire la <a href="http://#">Wikipedia</a>, o cheque
+<a href="http://#">Extreme Science</a>.</p>
+ +

A continuación, el CSS:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}
+ +

{{ EmbedLiveSample('Incluir_iconos_en_los_enlaces', '100%', 150) }}

+ +

¿Qué pasa aquí? Omitiremos la mayor parte del CSS, ya que es la misma información que has visto antes. Sin embargo, la última regla es interesante: insertamos una imagen de fondo personalizada en enlaces externos de una manera similar a como manejamos viñetas personalizadas en los elementos de lista en el último artículo. Esta vez, sin embargo, utilizamos la propiedad abreviada {{cssxref("background")}} en lugar de las propiedades individuales. Establecemos la ruta a la imagen que queremos insertar, especificamos el valor no-repeat para que solo se inserte una copia, y luego especificamos la posición como al 100% a la derecha del contenido de texto y a 0 píxeles del extremo superior.

+ +

También usamos {{cssxref("background-size")}} para especificar el tamaño de la imagen de fondo (es útil tener un icono más grande y luego cambiar su tamaño de esta manera, según sea necesario para fines de diseño web adaptativo). Sin embargo, esto solo funciona con Internet Explorer 9 y versiones posteriores, por lo que si trabajas con navegadores antiguos, tendrás que cambiar el tamaño de la imagen e insertarla tal como es.

+ +

Finalmente, establecemos un área de relleno a la derecha ({{cssxref ("padding-right")}}) para los enlaces, para crear un espacio en que aparezca la imagen de fondo, de modo que no se superponga con el texto.

+ +

Un último apunte: ¿cómo seleccionamos solo los enlaces externos? Bueno, si escribes tus enlaces HTML de forma adecuada, solo deberías usar URL absolutos para los enlaces externos. Para enlazar con otras partes del mismo sitio web, resulta más eficiente usar enlaces relativos. Por lo tanto, el texto «http» solo debe aparecer en los enlaces externos y es posible seleccionarlos con un selector de atributos: a[href*="http"] selecciona los elementos {{HTMLElement ( "a")}}, pero solo si tienen un atributo {{htmlattrxref("href","a")}} con un valor que contiene «http» en algún lugar de su contenido textual.

+ +

Eso es todo. Vuelve a la sección de aprendizaje activo anterior ¡y prueba esta nueva técnica!

+ +
+

Nota: No te preocupes si aún no estás familiarizado con los fondos y el diseño web adaptativo, lo explicaremos en otros artículos.

+
+ +

Dar aspecto de botón a un enlace

+ +

Las herramientas que has explorado hasta ahora en este artículo también se pueden usar de otras maneras. Por ejemplo, los estados como hover se pueden usar para diseñar muchos elementos diferentes, no solo enlaces. Es posible que desees diseñar un estado que señale el paso del cursor por encima de párrafos, elementos de lista u otras cosas.

+ +

Además, suele ser bastante común dar a los enlaces un aspecto y un comportamiento de botón en ciertas circunstancias: el menú de navegación de un sitio web generalmente está marcado como una lista que contiene enlaces, y es posible aplicarle estilo fácilmente para que se parezca a un conjunto de botones de control o pestañas que proporcionan al usuario acceso a otras partes del sitio web. Vamos a ver cómo.

+ +

En primer lugar, un poco de HTML:

+ +
<ul>
+  <li><a href="#">Inicio</a></li> <li><a href="#">Pizza</a></li> <li><a href = "#">Música</a> </li> <li><a href="#">Wombats</a></li> <li><a href="#">Finlandia</a></li>
+</ul>
+ +

Y ahora nuestro CSS:

+ +
body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}
+ +

Esto nos da el resultado siguiente:

+ +

{{ EmbedLiveSample('Dar_aspecto_de_botón_a_un_enlace', '100%', 100) }}

+ +

Vamos a explicar qué pasa aquí, y nos vamos a centrar en los aspectos más interesantes:

+ + + +
+

Nota: Es posible que hayas observado que en el HTML se han colocado todos los elementos de lista en una misma línea; esto es porque los espacios/saltos de línea que se colocan entre elementos de bloque crean espacios en la página, igual como lo hacen los espacios entre las palabras, y estos espacios romperían nuestro diseño de menú de navegación horizontal. Así que hemos eliminado esos espacios. Puede encontrar más información sobre este problema (y sus soluciones) en Combatir los espacios entre elementos de bloque colocados en línea.

+
+ +

Resumen

+ +

Esperamos que este artículo te haya proporcionado todo lo que necesitas saber acerca de los enlaces... ¡por ahora! En el artículo final de nuestro módulo de aplicar estilo al texto detallaremos cómo usar tipos de letra personalizados para sitios web (o tipos de letra para web, como se les conoce comúnmente).

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/styling_text/styling_lists/index.html b/files/es/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..eeb395313b --- /dev/null +++ b/files/es/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,392 @@ +--- +title: Aplicación de estilo a listas +slug: Learn/CSS/Styling_text/Styling_lists +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
+ +

Las listas se comportan como cualquier otro texto en su mayor parte, pero hay algunas propiedades CSS específicas de las listas que debes conocer y algunas prácticas recomendadas a tener en cuenta. Este artículo te lo explica.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, conocimientos básicos de HTML (estudio introducción a HTML), nociones de cómo trabaja con CSS (estudio introducción a CSS), Conocimientos básicos de CSS para texto y tipos de letra.
Objetivo:Familiarizarse con las buenas prácticas y propiedades relacionadas con la aplicación de estilo a listas.
+ +

Un ejemplo sencillo de lista

+ +

Para empezar, veamos un ejemplo sencillo de una lista. A lo largo de este artículo veremos listas no ordenadas, listas ordenadas y listas de descripciones; todas tienen características de estilo similares, algunas que son particulares del tipo de lista. El ejemplo sin ningún estilo aplicado está disponible en Github (consulta también el código fuente.)

+ +

El HTML para nuestro ejemplo de lista se ve así:

+ +
<h2>Shopping (unordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ul>
+  <li>Humous</li>
+  <li>Pitta</li>
+  <li>Green salad</li>
+  <li>Halloumi</li>
+</ul>
+
+<h2>Recipe (ordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ol>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+
+<h2>Ingredient description list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<dl>
+  <dt>Humous</dt>
+  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
+  <dt>Pitta</dt>
+  <dd>A soft, slightly leavened flatbread.</dd>
+  <dt>Halloumi</dt>
+  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
+  <dt>Green salad</dt>
+  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
+</dl>
+ +

Si accedes al ejemplo en vivo e investigas los elementos de la lista usando las herramientas de desarrollador del navegador, observarás un par de valores de estilo predeterminados:

+ + + +

Manejar el espaciado de la lista

+ +

Al diseñar listas, es necesario ajustar el diseño para que mantengan los mismos espaciados verticales (a veces denominados ritmos verticales) que el resto de elementos circundantes, como párrafos e imágenes; y el mismo espaciado horizontal entre uno y otro (en Github puedes ver el ejemplo de diseño terminado, y también encontrar el código fuente.)

+ +

El CSS que se utiliza para aplicar estilo al texto y al espaciado de texto es el siguiente:

+ +
/* Estilos generales */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Estilos para las listas de descripciones */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}
+ + + +

Estilos específicos de las listas

+ +

Ahora que hemos analizado el espaciado general de las listas, exploremos algunas propiedades específicas de las listas. Para empezar, debes conocer tres propiedades que pueden establecerse en los elementos {{htmlelement("ul")}} o {{htmlelement("ol")}}:

+ + + +

El estilo de la viñeta

+ +

Como ya sabes, la propiedad {{cssxref("list-style-type")}} te permite establecer qué tipo de viñeta usar. En nuestro ejemplo, hemos establecido que se usen números romanos en mayúsculas para la lista ordenada, con:

+ +
ol {
+  list-style-type: upper-roman;
+}
+ +

Esto nos da el aspecto siguiente:

+ +

Una lista ordenada con las viñetas establecidas para aparecer fuera del texto del elemento de lista.

+ +

Puedes encontrar muchas más opciones si echas un vistazo a la página de referencia de {{cssxref("list-style-type")}}.

+ +

La posición de la viñeta

+ +

La propiedad {{cssxref("list-style-position")}} establece si las viñetas aparecen dentro de los elementos de la lista, o fuera de ellos antes del inicio de cada elemento. El valor por defecto es outside, que provoca que las viñetas se sitúen fuera de los elementos de lista, como se observa arriba.

+ +

Si estableces el valor en inside, las viñetas se ubican dentro de las líneas:

+ +
ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}
+ +

an ordered list with the bullet points set to appear inside the list item text.

+ +

Uso de una imagen personalizada como viñeta

+ +

La propiedad {{cssxref("list-style-image")}} te permite usar una imagen personalizada para tu viñeta. La sintaxis es muy simple:

+ +
ul {
+  list-style-image: url(star.svg);
+}
+ +

Sin embargo, esta propiedad es un poco limitada por lo que respecta al control de la posición, el tamaño, etc., de las viñetas. Es más conveniente usar la familia de propiedades {{cssxref("background")}}, de la cual aprenderás mucho más en el módulo Aplicar diseño a las cajas.

+ +

En nuestro ejemplo terminado, hemos aplicado estilo a la lista no ordenada de este modo (encima de lo que ya has visto arriba):

+ +
ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}
+ +

Aquí hemos hecho lo siguiente:

+ + + +

Esto nos da el resultado siguiente:

+ +

an unordered list with the bullet points set as little star images

+ +

Propiedad abreviada list-style

+ +

Es posible configurar las tres propiedades anteriores con una sola propiedad abreviada, {{cssxref("list-style")}}. Por ejemplo, observa el CSS siguiente:

+ +
ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}
+ +

Podría reemplazarse por esto:

+ +
ul {
+  list-style: square url(example.png) inside;
+}
+ +

Los valores pueden escribirse en cualquier orden, y puedes usar uno, dos o los tres (los valores por defecto que se utilizan para las propiedades que no están incluidas son disc, none y outside). Si se especifican tanto type como image, el tipo se usa como una segunda opción en el caso de que la imagen no sea posible cargar la imagen por cualquier motivo.

+ +

Control de numeración de las listas

+ +

A veces puedes querer numerar las listas de manera diferente, por ejemplo, que empiece con un número que no sea el 1, o que cuente hacia atrás, o que cuente a saltos de más de una unidad. HTML y CSS tienen algunas herramientas para ayudarte con esto.

+ +

start

+ +

El atributo {{htmlattrxref("start","ol")}} te permite empezar la numeración de la lista en un número diferente de 1. Observa el ejemplo siguiente:

+ +
<ol start="4">
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

Este código da el resultado siguiente:

+ +

{{ EmbedLiveSample('start', '100%', 150) }}

+ +

reversed

+ +

El atributo {{htmlattrxref("reversed","ol")}} empieza la lista contando hacia atrás, en lugar de hacia adelante. Observa el ejemplo siguiente:

+ +
<ol start="4" reversed>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

Da el resultado siguiente:

+ +

{{ EmbedLiveSample('reversed', '100%', 150) }}

+ +
+

Nota: Si en una lista inversa hay más elementos de lista que el valor que se ha establecido para el atributo start, la numeración continuará hasta cero y luego con valores negativos.

+
+ +

value

+ +

El atributo {{htmlattrxref("value","ol")}} te permite establecer para tus elementos de lista unos valores numéricos específicos. Observa el ejemplo siguiente:

+ +
<ol>
+  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
+  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li value="6">Wash and chop the salad.</li>
+  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

Da el resultado siguiente:

+ +

{{ EmbedLiveSample('value', '100%', 150) }}

+ +
+

Nota: Incluso si utilizas una propiedad {{cssxref("list-style-type")}} sin números, vas a tener que usar los valores numéricos equivalentes para el atributo value.

+
+ +

Aprendizaje activo: aplicar estilo a una lista anidada

+ +

En esta sesión de aprendizaje activo, queremos que tomes lo que has aprendido arriba y pruebes a aplicar estilo a una lista anidada. Te hemos provisto con un HTML, y queremos que hagas lo siguiente:

+ +
    +
  1. Poner viñetas cuadradas en la lista no ordenada.
    2. +
  2. Establecer un interlineado de 1,5 con respecto al tamaño de la letra tanto para la lista ordenada como para la lista no ordenada.
    3. +
  3. Poner letras minúsculas en la lista ordenada.
    4. +
  4. Juega con el ejemplo, libremente y cuanto quieras, experimenta con los tipos de viñetas, los espacios, o cualquier otra cosa con que te encuentres.
    5. +
+ +

Si te equivocas, puedes volver a empezar con el botón Reinicio. Si te quedas encallado, pulsa el botón Mostrar la solución para ver una posible solución.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Véase también

+ +

Los contadores CSS proporcionan herramientas avanzadas para la personalización de las numeraciones y la aplicación de estilo a las listas, pero son bastante complejos. Te recomendamos echarles un vistazo si quieres ampliar tus conocimientos. Consulta:

+ + + +

Resumen

+ +

La aplicación de estilo a listas se domina con relativa facilidad una vez que conoces algunos principios básicos y propiedades específicas asociados. En el artículo siguiente vamos a continuar con las técnicas de aplicación de estilo a enlaces.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

+ +

En este módulo

+ + -- cgit v1.2.3-54-g00ecf