From e046907a98734dc88569df414633d1e6c915a7da Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 17 Aug 2022 16:26:19 -0500 Subject: [PATCH] Convert /learn/css folder to Markdown (es) (#7704) * Convert /learn/css folder to Markdown (es) * Apply suggestions from code review PR originally by: Queen Vinyl Da.i'gyu-Kazotetsu --- .../backgrounds_and_borders/index.html | 307 -------- .../backgrounds_and_borders/index.md | 322 ++++++++ .../cascade_and_inheritance/index.html | 334 -------- .../cascade_and_inheritance/index.md | 271 +++++++ .../building_blocks/debugging_css/index.html | 199 ----- .../building_blocks/debugging_css/index.md | 209 +++++ .../fundamental_css_comprehension/index.html | 118 --- .../fundamental_css_comprehension/index.md | 101 +++ .../index.html | 166 ---- .../index.md | 173 +++++ .../images_media_form_elements/index.html | 194 ----- .../images_media_form_elements/index.md | 210 +++++ files/es/learn/css/building_blocks/index.html | 94 --- files/es/learn/css/building_blocks/index.md | 80 ++ .../overflowing_content/index.html | 124 --- .../overflowing_content/index.md | 133 ++++ .../selectors/attribute_selectors/index.html | 155 ---- .../selectors/attribute_selectors/index.md | 109 +++ .../selectors/combinators/index.html | 112 --- .../selectors/combinators/index.md | 137 ++++ .../css/building_blocks/selectors/index.html | 224 ------ .../css/building_blocks/selectors/index.md | 207 +++++ .../index.html | 398 ---------- .../index.md | 222 ++++++ .../type_class_and_id_selectors/index.html | 118 --- .../type_class_and_id_selectors/index.md | 133 ++++ .../sizing_items_in_css/index.html | 130 ---- .../sizing_items_in_css/index.md | 142 ++++ .../building_blocks/styling_tables/index.html | 280 ------- .../building_blocks/styling_tables/index.md | 293 +++++++ .../building_blocks/the_box_model/index.html | 344 -------- .../building_blocks/the_box_model/index.md | 337 ++++++++ .../values_and_units/index.html | 393 ---------- .../building_blocks/values_and_units/index.md | 300 +++++++ .../learn/css/css_layout/flexbox/index.html | 337 -------- .../es/learn/css/css_layout/flexbox/index.md | 357 +++++++++ .../es/learn/css/css_layout/floats/index.html | 505 ------------ files/es/learn/css/css_layout/floats/index.md | 511 ++++++++++++ .../es/learn/css/css_layout/grids/index.html | 696 ----------------- files/es/learn/css/css_layout/grids/index.md | 701 +++++++++++++++++ files/es/learn/css/css_layout/index.html | 86 -- files/es/learn/css/css_layout/index.md | 75 ++ .../css/css_layout/introduction/index.html | 702 ----------------- .../css/css_layout/introduction/index.md | 697 +++++++++++++++++ .../css/css_layout/normal_flow/index.html | 96 --- .../learn/css/css_layout/normal_flow/index.md | 105 +++ .../css_layout/responsive_design/index.html | 325 -------- .../css/css_layout/responsive_design/index.md | 311 ++++++++ .../supporting_older_browsers/index.html | 238 ------ .../supporting_older_browsers/index.md | 240 ++++++ .../first_steps/getting_started/index.html | 265 ------- .../css/first_steps/getting_started/index.md | 303 ++++++++ .../how_css_is_structured/index.html | 513 ------------ .../how_css_is_structured/index.md | 558 +++++++++++++ .../css/first_steps/how_css_works/index.html | 157 ---- .../css/first_steps/how_css_works/index.md | 178 +++++ files/es/learn/css/first_steps/index.html | 52 -- files/es/learn/css/first_steps/index.md | 44 ++ .../styling_a_biography_page/index.html | 101 --- .../styling_a_biography_page/index.md | 95 +++ .../css/first_steps/what_is_css/index.html | 128 --- .../css/first_steps/what_is_css/index.md | 138 ++++ files/es/learn/css/howto/css_faq/index.html | 119 --- files/es/learn/css/howto/css_faq/index.md | 171 ++++ files/es/learn/css/howto/index.html | 82 -- files/es/learn/css/howto/index.md | 64 ++ files/es/learn/css/index.html | 63 -- files/es/learn/css/index.md | 55 ++ .../css/styling_text/fundamentals/index.html | 732 ------------------ .../css/styling_text/fundamentals/index.md | 700 +++++++++++++++++ files/es/learn/css/styling_text/index.html | 57 -- files/es/learn/css/styling_text/index.md | 51 ++ .../css/styling_text/styling_links/index.html | 434 ----------- .../css/styling_text/styling_links/index.md | 435 +++++++++++ .../css/styling_text/styling_lists/index.html | 392 ---------- .../css/styling_text/styling_lists/index.md | 396 ++++++++++ .../css/styling_text/web_fonts/index.html | 198 ----- .../learn/css/styling_text/web_fonts/index.md | 192 +++++ 78 files changed, 9756 insertions(+), 9968 deletions(-) delete mode 100644 files/es/learn/css/building_blocks/backgrounds_and_borders/index.html create mode 100644 files/es/learn/css/building_blocks/backgrounds_and_borders/index.md delete mode 100644 files/es/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/es/learn/css/building_blocks/cascade_and_inheritance/index.md delete mode 100644 files/es/learn/css/building_blocks/debugging_css/index.html create mode 100644 files/es/learn/css/building_blocks/debugging_css/index.md delete mode 100644 files/es/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/es/learn/css/building_blocks/fundamental_css_comprehension/index.md delete mode 100644 files/es/learn/css/building_blocks/handling_different_text_directions/index.html create mode 100644 files/es/learn/css/building_blocks/handling_different_text_directions/index.md delete mode 100644 files/es/learn/css/building_blocks/images_media_form_elements/index.html create mode 100644 files/es/learn/css/building_blocks/images_media_form_elements/index.md delete mode 100644 files/es/learn/css/building_blocks/index.html create mode 100644 files/es/learn/css/building_blocks/index.md delete mode 100644 files/es/learn/css/building_blocks/overflowing_content/index.html create mode 100644 files/es/learn/css/building_blocks/overflowing_content/index.md delete mode 100644 files/es/learn/css/building_blocks/selectors/attribute_selectors/index.html create mode 100644 files/es/learn/css/building_blocks/selectors/attribute_selectors/index.md delete mode 100644 files/es/learn/css/building_blocks/selectors/combinators/index.html create mode 100644 files/es/learn/css/building_blocks/selectors/combinators/index.md delete mode 100644 files/es/learn/css/building_blocks/selectors/index.html create mode 100644 files/es/learn/css/building_blocks/selectors/index.md delete mode 100644 files/es/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html create mode 100644 files/es/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md delete mode 100644 files/es/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html create mode 100644 files/es/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md delete mode 100644 files/es/learn/css/building_blocks/sizing_items_in_css/index.html create mode 100644 files/es/learn/css/building_blocks/sizing_items_in_css/index.md delete mode 100644 files/es/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/es/learn/css/building_blocks/styling_tables/index.md delete mode 100644 files/es/learn/css/building_blocks/the_box_model/index.html create mode 100644 files/es/learn/css/building_blocks/the_box_model/index.md delete mode 100644 files/es/learn/css/building_blocks/values_and_units/index.html create mode 100644 files/es/learn/css/building_blocks/values_and_units/index.md delete mode 100644 files/es/learn/css/css_layout/flexbox/index.html create mode 100644 files/es/learn/css/css_layout/flexbox/index.md delete mode 100644 files/es/learn/css/css_layout/floats/index.html create mode 100644 files/es/learn/css/css_layout/floats/index.md delete mode 100644 files/es/learn/css/css_layout/grids/index.html create mode 100644 files/es/learn/css/css_layout/grids/index.md delete mode 100644 files/es/learn/css/css_layout/index.html create mode 100644 files/es/learn/css/css_layout/index.md delete mode 100644 files/es/learn/css/css_layout/introduction/index.html create mode 100644 files/es/learn/css/css_layout/introduction/index.md delete mode 100644 files/es/learn/css/css_layout/normal_flow/index.html create mode 100644 files/es/learn/css/css_layout/normal_flow/index.md delete mode 100644 files/es/learn/css/css_layout/responsive_design/index.html create mode 100644 files/es/learn/css/css_layout/responsive_design/index.md delete mode 100644 files/es/learn/css/css_layout/supporting_older_browsers/index.html create mode 100644 files/es/learn/css/css_layout/supporting_older_browsers/index.md delete mode 100644 files/es/learn/css/first_steps/getting_started/index.html create mode 100644 files/es/learn/css/first_steps/getting_started/index.md delete mode 100644 files/es/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/es/learn/css/first_steps/how_css_is_structured/index.md delete mode 100644 files/es/learn/css/first_steps/how_css_works/index.html create mode 100644 files/es/learn/css/first_steps/how_css_works/index.md delete mode 100644 files/es/learn/css/first_steps/index.html create mode 100644 files/es/learn/css/first_steps/index.md delete mode 100644 files/es/learn/css/first_steps/styling_a_biography_page/index.html create mode 100644 files/es/learn/css/first_steps/styling_a_biography_page/index.md delete mode 100644 files/es/learn/css/first_steps/what_is_css/index.html create mode 100644 files/es/learn/css/first_steps/what_is_css/index.md delete mode 100644 files/es/learn/css/howto/css_faq/index.html create mode 100644 files/es/learn/css/howto/css_faq/index.md delete mode 100644 files/es/learn/css/howto/index.html create mode 100644 files/es/learn/css/howto/index.md delete mode 100644 files/es/learn/css/index.html create mode 100644 files/es/learn/css/index.md delete mode 100644 files/es/learn/css/styling_text/fundamentals/index.html create mode 100644 files/es/learn/css/styling_text/fundamentals/index.md delete mode 100644 files/es/learn/css/styling_text/index.html create mode 100644 files/es/learn/css/styling_text/index.md delete mode 100644 files/es/learn/css/styling_text/styling_links/index.html create mode 100644 files/es/learn/css/styling_text/styling_links/index.md delete mode 100644 files/es/learn/css/styling_text/styling_lists/index.html create mode 100644 files/es/learn/css/styling_text/styling_lists/index.md delete mode 100644 files/es/learn/css/styling_text/web_fonts/index.html create mode 100644 files/es/learn/css/styling_text/web_fonts/index.md diff --git a/files/es/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/es/learn/css/building_blocks/backgrounds_and_borders/index.html deleted file mode 100644 index 710c0fc6df041a..00000000000000 --- a/files/es/learn/css/building_blocks/backgrounds_and_borders/index.html +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: Fondos y bordes -slug: Learn/CSS/Building_blocks/Backgrounds_and_borders -translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders -original_slug: Learn/CSS/Building_blocks/Fondos_y_bordes ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
- -

En este artículo, veremos algunas de las cosas creativas que puedes hacer con los fondos y los bordes de CSS. Añadir degradados, imágenes de fondo o redondear esquinas; los fondos y los bordes son la solución para una gran cantidad de cuestiones de estilo en CSS.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, conocimientos básicos de HTML (véase Introducción al HTML) y nociones de CSS (véase Primeros pasos con el CSS).
Objetivo:Aprender a diseñar el fondo y los bordes de las cajas.
- -

Aplicar estilo a los fondos en CSS

- -

La propiedad {{cssxref ("background")}} de CSS es una propiedad abreviada de una serie de propiedades de fondo que vamos a ver en este artículo. Si descubres una propiedad de fondo compleja en una hoja de estilo, puede parecer un poco difícil de entender porque pueden estarse pasando muchos valores a la vez.

- -
.box {
-  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
-  url(big-star.png) center no-repeat, rebeccapurple;
-} 
-
- -

Más adelante en este tutorial regresaremos a cómo funcionan las propiedades abreviadas, pero primero echemos un vistazo a las diferentes cosas que puedes hacer con los fondos en CSS, a partir de observar las propiedades de fondo individuales.

- -

Los colores de fondo

- -

La propiedad {{cssxref ("background-color")}} define el color de fondo de cualquier elemento en CSS. La propiedad admite cualquier <color> válido. Un color de fondo (background-color) se extiende por debajo del contenido y el relleno del elemento.

- -

En el ejemplo siguiente hemos utilizado varios valores de color para añadir un color de fondo a la caja, a un encabezado y a un elemento {{htmlelement ("span")}}.

- -

Juega un poco con ellos; usa cualquier valor <color> disponible.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}

- -

Las imágenes de fondo

- -

La propiedad {{cssxref ("background-image")}} permite visualizar una imagen de fondo en un elemento. En el ejemplo siguiente hay dos cajas: una tiene una imagen de fondo que es más grande que la caja misma, la otra tiene una imagen pequeña en forma de estrella.

- -

Este ejemplo demuestra dos cosas sobre las imágenes de fondo. De forma predeterminada, la imagen grande no se reduce para ajustarse a la caja, por lo que solo vemos una pequeña esquina de esta, mientras que la imagen pequeña aparece en forma de mosaico hasta llenar la caja. En este caso, la imagen es en realidad una sola estrella.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}

- -

Si especificas un color de fondo además de una imagen de fondo, la imagen se muestra encima del color de fondo. Añade una propiedad background-color al ejemplo anterior y obsérvalo en acción.

- -

Controlar background-repeat

- -

La propiedad {{cssxref ("background-repeat")}} se usa para controlar el comportamiento de tipo mosaico de las imágenes. Los valores disponibles son:

- - - -

Prueba estos valores en el ejemplo siguiente. Hemos establecido el valor no-repeat, así que solo verás una estrella. Prueba los diferentes valores (repeat-x y repeat-y) y observa cuáles son los efectos.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}

- -

Dimensionar la imagen de fondo

- -

En el ejemplo anterior hay una imagen grande que aparece recortada porque es más grande que el fondo. En este caso, podríamos usar la propiedad {{cssxref ("background-size")}}, que puede tomar valores de longitud o porcentaje, para ajustar el tamaño de la imagen para que quepa dentro del fondo.

- -

También puedes utilizar palabras clave:

- - - -

En el ejemplo siguiente hemos usado la imagen más grande del ejemplo anterior y unidades de longitud para establecer sus dimensiones dentro de la caja. Puedes ver que esto ha distorsionado la imagen.

- -

Prueba lo siguiente:

- - - -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

- -

Posicionar la imagen de fondo

- -

La propiedad {{cssxref ("background-position")}} te permite elegir la posición en la que aparece la imagen de fondo dentro de la caja a la que está asociada. Para ello se utiliza un sistema de coordenadas en el que la esquina superior izquierda de la caja es (0,0), y la caja se coloca sobre los ejes horizontal (x) y vertical (y).

- -
-

Nota: El valor predeterminado de background-position es (0,0).

-
- -

Los valores de background-position más comunes toman dos valores independientes: un valor horizontal seguido de un valor vertical.

- -

Puedes usar palabras clave como top y right (busca todas las demás en la página sobre la propiedad {{cssxref ("background-position")}}):

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top center;
-} 
-
- -

Y también longitudes y porcentajes:

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: 20px 10%;
-} 
-
- -

También puedes mezclar valores de palabras clave con longitudes o porcentajes, por ejemplo:

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px;
-}
- -

Por último, también puedes usar una sintaxis de 4 valores para indicar una distancia desde ciertos bordes del cuadro: la unidad de longitud en este caso es un desplazamiento del valor que la precede. Entonces, en el CSS siguiente, colocamos el fondo a 20 px desde la parte superior y a 10 px desde la derecha:

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px right 10px;
-}
- -

Utiliza el ejemplo siguiente para jugar con estos valores y mover la estrella por la caja.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}

- -
-

Nota: background-position es una propiedad abreviada de {{cssxref("background-position-x")}} y {{cssxref("background-position-y")}}, que te permiten configurar los diferentes valores de posición del eje por separado.

-
- -

Degradados de fondo

- -

Un degradado, cuando se usa para un fondo, actúa como una imagen y también se establece usando la propiedad {{cssxref("background-image")}}.

- -

Puedes leer más sobre los diferentes tipos de degradados y sobre qué puedes hacer con ellos en la página sobre el tipo de datos <gradient> de MDN. Una forma divertida de jugar con degradados es usar uno de los muchos generadores de degradados CSS que hay disponibles en la web, como este. Puedes crear un degradado y luego copiar y pegar el código fuente que lo genera.

- -

Prueba algunos degradados diferentes en el ejemplo siguiente. En las dos cajas hay, respectivamente, un degradado lineal que se extiende por toda la caja, y un degradado radial con un tamaño establecido, que por lo tanto se repite.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}

- -

Múltiples imágenes de fondo

- -

También es posible poner múltiples imágenes de fondo: puedes especificar múltiples valores background-image para un solo atributo, separados cada uno por una coma.

- -

Si haces esto, las imágenes de fondo pueden quedar superpuestas entre sí. Los fondos se superponen con la última imagen de fondo que hay en la parte inferior de la lista, y cada imagen anterior se apila encima de la que sigue en el código.

- -
-

Nota: Los degradados se pueden mezclar con imágenes de fondo normales.

-
- -

Las otras propiedades background-* también pueden tener valores múltiples separados por comas, de la misma manera que background-image:

- -
background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
-background-repeat: no-repeat, repeat-x, repeat;
-background-position: 10px 20px,  top right;
- -

Cada valor de las diversas propiedades coincide con los valores que están en la misma posición en las otras propiedades. Arriba, por ejemplo, el valor para la propiedad background-repeat de image1 será no-repeat. Sin embargo, ¿qué sucede cuando diferentes propiedades tienen una cantidad diferente de valores? La respuesta es que los valores que ocupan las posiciones más pequeñas se alternan cíclicamente: en el ejemplo anterior hay cuatro imágenes de fondo pero solo dos valores background-position. Los primeros dos valores de posición se aplicarán a las dos primeras imágenes, luego los valores volverán a asignarse cíclicamente: a image3 se le dará el primer valor de posición, y a image4 se le dará el segundo valor de posición.

- -

Vamos a jugar. En el ejemplo siguiente hemos incluido dos imágenes. Para demostrar el orden de superposición, cambia la imagen de fondo que aparece primero en la lista. O juega con las otras propiedades para cambiar la posición, el tamaño o repite los valores.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}

- -

Anclaje del fondo

- -

Otra opción que hay disponible para fondos es especificar cómo se desplazan cuando se desplaza el contenido. Esto se controla con la propiedad {{cssxref ("background-attachment")}}, que puede tomar los valores siguientes:

- - - -

La propiedad {{cssxref ("background-attachment")}} solo tiene efecto cuando hay contenido por el que puedas desplazarte, por lo que hemos preparado un ejemplo para demostrar las diferencias entre los tres valores: echa un vistazo a background-attachment.html (También puedes consultar el código fuente aquí).

- -

Usar la propiedad abreviada para el fondo

- -

Como mencionamos al comienzo de este artículo, a menudo verás fondos que están especificados usando la propiedad {{cssxref ("background")}}. Esta forma abreviada te permite configurar todas las diferentes propiedades a la vez.

- -

Si utilizas varios fondos, debes especificar todas las propiedades para el primer fondo y luego añadir el fondo siguiente separado por una coma. En el ejemplo siguiente hay un degradado con un tamaño y una posición, luego un fondo de imagen con no-repeat y una posición y, por último, un color.

- -

Al escribir los valores abreviados de las imágenes de fondo es necesario seguir algunas reglas, por ejemplo:

- - - -

Consulta la página para el atributo {{cssxref ("background")}} de MDN para ver todas las posibilidades.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}

- -

Consideraciones de accesibilidad con los fondos

- -

Al colocar texto sobre una imagen o un color de fondo, debes asegurarte de que tiene suficiente contraste para que tus visitantes puedan leer el texto. Si estableces una imagen de fondo y el texto se coloca encima de la imagen, también debes especificar un color de fondo (background-color) que permita leer el texto si la imagen no se carga.

- -

Los lectores de pantalla no pueden analizar las imágenes de fondo, por lo tanto, deben ser puramente decorativas; cualquier contenido importante debe ser parte de la página HTML y no debe estar contenido en un fondo.

- -

Bordes

- -

Al aprender sobre el modelo de cajas descubrimos cómo los bordes afectan al tamaño de nuestra caja. En este artículo veremos cómo usar los bordes de una manera creativa. Por lo general, cuando a un elemento le añadimos bordes con CSS, usamos una propiedad abreviada que establece el color, el ancho y el estilo del borde en una línea de CSS.

- -

Podemos establecer un borde para los cuatro lados de una caja con {{cssxref ("border")}}:

- -
.box {
-  border: 1px solid black;
-}
- -

O podemos establecer solo un borde de la caja, por ejemplo:

- -
.box {
-  border-top: 1px solid black;
-}
- -

Cada una de las propiedades de estas propiedades abreviadas sería:

- -
.box {
-  border-width: 1px;
-  border-style: solid;
-  border-color: black;
-}
- -

Y las no abreviadas:

- -
.box {
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: black;
-}
- -
-

Nota: Estas propiedades para el borde superior, derecho, inferior e izquierdo también tienen propiedades lógicas asignadas que se relacionan con el modo de escritura del documento (por ejemplo, texto de izquierda a derecha o de derecha a izquierda, o de arriba a abajo). Exploraremos esto en la próxima lección, que expone el uso de diferentes direcciones de texto.

-
- -

Hay una variedad de estilos que puedes usar para los bordes. En el ejemplo siguiente, hemos utilizado un estilo de borde diferente para los cuatro lados de la caja. Juega con el estilo, el ancho y el color del borde para ver cómo funcionan los bordes.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}

- -

Esquinas redondeadas

- -

El redondeo de esquinas en una caja se logra mediante el uso de la propiedad {{cssxref ("border-radius")}} y otras propiedades asociadas que se relacionan con cada esquina de la caja. Como valor pueden usarse dos longitudes o porcentajes: el primer valor define el radio horizontal y el segundo el radio vertical. En muchos casos, solo se pondrá un valor, que se utilizará para ambos.

- -

Por ejemplo, para hacer que las cuatro esquinas de una caja tengan un radio de 10 píxeles:

- -
.box {
-  border-radius: 10px;
-}
- -

O para hacer que la esquina superior derecha tenga un radio horizontal de 1 em y un radio vertical del 10%:

- -
.box {
-  border-top-right-radius: 1em 10%;
-}
- -

En el ejemplo siguiente hemos establecido las cuatro esquinas, y luego cambiamos los valores de la esquina superior derecha para que sea diferente. Juega con los valores para cambiar las esquinas. Echa un vistazo a la página de la propiedad {{cssxref ("border-radius")}} para ver las opciones de sintaxis disponibles.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}

- -

Pon a prueba tus habilidades

- -

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más relevante? Encontrarás más pruebas para verificar que retienes la información antes de seguir adelante en Test your skills: Backgrounds and Borders.

- -

Resumen

- -

En este artículo hemos expuesto bastantes conceptos y puedes ver que hay mucho para añadir a un fondo o a un borde de una caja. Explora las diferentes páginas de propiedades si deseas obtener más información sobre cualquiera de las características que hemos discutido. Todas las páginas de MDN contienen más ejemplos de uso, para que juegues y mejores tus conocimientos.

- -

En el próximo artículo descubriremos cómo interacciona el modo de escritura de tu documento con tu CSS. ¿Qué sucede cuando el texto no fluye de izquierda a derecha?

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}

- -

En este módulo

- -
    -
  1. Cascada y herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. El modelo de cajas
    4. -
  4. Fondos y bordes
    5. -
  5. El uso de diferentes direcciones de texto
    6. -
  6. El desbordamiento de los contenidos
    7. -
  7. Los valores y las unidades
    8. -
  8. Elementos de dimensionado en CSS
    9. -
  9. Imágenes, media y elementos de formulario
    10. -
  10. Aplicar estilo a las tablas
    11. -
  11. Depurar el CSS
    12. -
  12. Organizar el CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/es/learn/css/building_blocks/backgrounds_and_borders/index.md new file mode 100644 index 00000000000000..224337a63e388e --- /dev/null +++ b/files/es/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -0,0 +1,322 @@ +--- +title: Fondos y bordes +slug: Learn/CSS/Building_blocks/Backgrounds_and_borders +translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +original_slug: Learn/CSS/Building_blocks/Fondos_y_bordes +--- +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}} + +En este artículo, veremos algunas de las cosas creativas que puedes hacer con los fondos y los bordes de CSS. Añadir degradados, imágenes de fondo o redondear esquinas; los fondos y los bordes son la solución para una gran cantidad de cuestiones de estilo en CSS. + + + + + + + + + + + + +
Prerrequisitos: + Conocimientos básicos de informática, tener el + software básico + instalado, conocimientos básicos de + trabajar con archivos, conocimientos básicos de HTML (véase + Introducción al HTML) y nociones de CSS (véase + Primeros pasos con el CSS). +
Objetivo:Aprender a diseñar el fondo y los bordes de las cajas.
+ +## Aplicar estilo a los fondos en CSS + +La propiedad {{cssxref ("background")}} de CSS es una propiedad abreviada de una serie de propiedades de fondo que vamos a ver en este artículo. Si descubres una propiedad de fondo compleja en una hoja de estilo, puede parecer un poco difícil de entender porque pueden estarse pasando muchos valores a la vez. + +```css +.box { + background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, + url(big-star.png) center no-repeat, rebeccapurple; +} +``` + +Más adelante en este tutorial regresaremos a cómo funcionan las propiedades abreviadas, pero primero echemos un vistazo a las diferentes cosas que puedes hacer con los fondos en CSS, a partir de observar las propiedades de fondo individuales. + +### Los colores de fondo + +La propiedad {{cssxref ("background-color")}} define el color de fondo de cualquier elemento en CSS. La propiedad admite cualquier [``](/es/docs/Web/CSS/color_value) válido. Un color de fondo (`background-color`) se extiende por debajo del contenido y el relleno del elemento. + +En el ejemplo siguiente hemos utilizado varios valores de color para añadir un color de fondo a la caja, a un encabezado y a un elemento {{htmlelement ("span")}}. + +**Juega un poco con ellos; usa cualquier valor [\](/es/docs/Web/CSS/color_value) disponible.** + +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}} + +### Las imágenes de fondo + +La propiedad {{cssxref ("background-image")}} permite visualizar una imagen de fondo en un elemento. En el ejemplo siguiente hay dos cajas: una tiene una imagen de fondo que es más grande que la caja misma, la otra tiene una imagen pequeña en forma de estrella. + +Este ejemplo demuestra dos cosas sobre las imágenes de fondo. De forma predeterminada, la imagen grande no se reduce para ajustarse a la caja, por lo que solo vemos una pequeña esquina de esta, mientras que la imagen pequeña aparece en forma de mosaico hasta llenar la caja. En este caso, la imagen es en realidad una sola estrella. + +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}} + +**Si especificas un color de fondo además de una imagen de fondo, la imagen se muestra encima del color de fondo. Añade una propiedad `background-color` al ejemplo anterior y obsérvalo en acción.** + +#### Controlar background-repeat + +La propiedad {{cssxref ("background-repeat")}} se usa para controlar el comportamiento de tipo mosaico de las imágenes. Los valores disponibles son: + +- `no-repeat`: evita que el fondo se repita. +- `repeat-x`: repite horizontalmente. +- `repeat-y`: repite verticalmente. +- `repeat`: es el valor por defecto; repite en ambas direcciones. + +**Prueba estos valores en el ejemplo siguiente. Hemos establecido el valor `no-repeat`, así que solo verás una estrella. Prueba los diferentes valores (`repeat-x` y `repeat-y`) y observa cuáles son los efectos.** + +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}} + +#### Dimensionar la imagen de fondo + +En el ejemplo anterior hay una imagen grande que aparece recortada porque es más grande que el fondo. En este caso, podríamos usar la propiedad {{cssxref ("background-size")}}, que puede tomar valores de [longitud](/es/docs/Web/CSS/length) o [porcentaje](/es/docs/Web/CSS/porcentaje), para ajustar el tamaño de la imagen para que quepa dentro del fondo. + +También puedes utilizar palabras clave: + +- `cover`: el navegador agrandará la imagen lo suficientemente grande como para que esta cubra por completo el área de la caja sin que pierda su relación de aspecto. En este caso, es probable que parte de la imagen quede fuera de la caja. +- `contain`: el navegador adecuará el tamaño de la imagen para que quepa dentro de la caja. En este caso, pueden quedar huecos a ambos lados o en la parte superior e inferior de la imagen si la relación de aspecto de la imagen es diferente de la de la caja. + +En el ejemplo siguiente hemos usado la imagen más grande del ejemplo anterior y unidades de longitud para establecer sus dimensiones dentro de la caja. Puedes ver que esto ha distorsionado la imagen. + +Prueba lo siguiente: + +- Cambia las unidades de longitud que has utilizado para modificar el tamaño del fondo. +- Elimina las unidades de longitud y observa qué sucede cuando usas `background-size: cover` o `background-size: contain`. +- Si tu imagen es más pequeña que la caja, puedes cambiar el valor `background-repeat` para que la imagen se repita. + +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}} + +#### Posicionar la imagen de fondo + +La propiedad {{cssxref ("background-position")}} te permite elegir la posición en la que aparece la imagen de fondo dentro de la caja a la que está asociada. Para ello se utiliza un sistema de coordenadas en el que la esquina superior izquierda de la caja es `(0,0)`, y la caja se coloca sobre los ejes horizontal (`x`) y vertical (`y`). + +> **Nota:** El valor predeterminado de `background-position` es `(0,0)`. + +Los valores de `background-position` más comunes toman dos valores independientes: un valor horizontal seguido de un valor vertical. + +Puedes usar palabras clave como `top` y `right` (busca todas las demás en la página sobre la propiedad {{cssxref ("background-position")}}): + +```css +.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top center; +} +``` + +Y también [longitudes](/es/docs/Web/CSS/length) y [porcentajes](/es/docs/Web/CSS/porcentaje): + +```css +.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: 20px 10%; +} +``` + +También puedes mezclar valores de palabras clave con longitudes o porcentajes, por ejemplo: + +```css +.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px; +} +``` + +Por último, también puedes usar una sintaxis de 4 valores para indicar una distancia desde ciertos bordes del cuadro: la unidad de longitud en este caso es un desplazamiento del valor que la precede. Entonces, en el CSS siguiente, colocamos el fondo a 20 px desde la parte superior y a 10 px desde la derecha: + +```css +.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px right 10px; +} +``` + +**Utiliza el ejemplo siguiente para jugar con estos valores y mover la estrella por la caja.** + +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}} + +> **Nota:** `background-position` es una propiedad abreviada de {{cssxref("background-position-x")}} y {{cssxref("background-position-y")}}, que te permiten configurar los diferentes valores de posición del eje por separado. + +### Degradados de fondo + +Un degradado, cuando se usa para un fondo, actúa como una imagen y también se establece usando la propiedad {{cssxref("background-image")}}. + +Puedes leer más sobre los diferentes tipos de degradados y sobre qué puedes hacer con ellos en la página sobre el tipo de datos [``](/es/docs/Web/CSS/gradient) de MDN. Una forma divertida de jugar con degradados es usar uno de los muchos generadores de degradados CSS que hay disponibles en la web, [como este](https://cssgradient.io/). Puedes crear un degradado y luego copiar y pegar el código fuente que lo genera. + +Prueba algunos degradados diferentes en el ejemplo siguiente. En las dos cajas hay, respectivamente, un degradado lineal que se extiende por toda la caja, y un degradado radial con un tamaño establecido, que por lo tanto se repite. + +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}} + +### Múltiples imágenes de fondo + +También es posible poner múltiples imágenes de fondo: puedes especificar múltiples valores `background-image` para un solo atributo, separados cada uno por una coma. + +Si haces esto, las imágenes de fondo pueden quedar superpuestas entre sí. Los fondos se superponen con la última imagen de fondo que hay en la parte inferior de la lista, y cada imagen anterior se apila encima de la que sigue en el código. + +> **Nota:** Los degradados se pueden mezclar con imágenes de fondo normales. + +Las otras propiedades `background-*` también pueden tener valores múltiples separados por comas, de la misma manera que `background-image`: + +```css +background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); +background-repeat: no-repeat, repeat-x, repeat; +background-position: 10px 20px, top right; +``` + +Cada valor de las diversas propiedades coincide con los valores que están en la misma posición en las otras propiedades. Arriba, por ejemplo, el valor para la propiedad `background-repeat` de `image1` será `no-repeat`. Sin embargo, ¿qué sucede cuando diferentes propiedades tienen una cantidad diferente de valores? La respuesta es que los valores que ocupan las posiciones más pequeñas se alternan cíclicamente: en el ejemplo anterior hay cuatro imágenes de fondo pero solo dos valores `background-position`. Los primeros dos valores de posición se aplicarán a las dos primeras imágenes, luego los valores volverán a asignarse cíclicamente: a `image3` se le dará el primer valor de posición, y a `image4` se le dará el segundo valor de posición. + +**Vamos a jugar. En el ejemplo siguiente hemos incluido dos imágenes. Para demostrar el orden de superposición, cambia la imagen de fondo que aparece primero en la lista. O juega con las otras propiedades para cambiar la posición, el tamaño o repite los valores.** + +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}} + +### Anclaje del fondo + +Otra opción que hay disponible para fondos es especificar cómo se desplazan cuando se desplaza el contenido. Esto se controla con la propiedad {{cssxref ("background-attachment")}}, que puede tomar los valores siguientes: + +- `scroll`: Hace que el fondo del elemento se desplace cuando te desplazas por el contenido de la página. Si te desplazas por el contenido del elemento, el fondo no se mueve. El efecto resultante es que el fondo está anclado a la página en una posición fija, por lo que se desplaza a medida que la página se desplaza. +- `fixed`: Hace que el fondo de un elemento quede fijo con respecto a la ventana gráfica, de modo que no se desplace cuando te desplazas por la página o el contenido del elemento. Siempre permanece en la misma posición de la pantalla. +- `local`: Este valor se añadió posteriormente (solo es compatible con Internet Explorer 9+, mientras que los otros son compatibles con IE4+) porque el valor `scroll` es bastante confuso y en muchos casos no hace lo que deseas. El valor `local` ancla el fondo al elemento en el que está configurado, de modo que cuando te desplazas por el contenido del elemento, el fondo se desplaza con este. + +La propiedad {{cssxref ("background-attachment")}} solo tiene efecto cuando hay contenido por el que puedas desplazarte, por lo que hemos preparado un ejemplo para demostrar las diferencias entre los tres valores: echa un vistazo a [background-attachment.html](http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html) (También puedes consultar el [código fuente](https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds) aquí). + +### Usar la propiedad abreviada para el fondo + +Como mencionamos al comienzo de este artículo, a menudo verás fondos que están especificados usando la propiedad {{cssxref ("background")}}. Esta forma abreviada te permite configurar todas las diferentes propiedades a la vez. + +Si utilizas varios fondos, debes especificar todas las propiedades para el primer fondo y luego añadir el fondo siguiente separado por una coma. En el ejemplo siguiente hay un degradado con un tamaño y una posición, luego un fondo de imagen con `no-repeat` y una posición y, por último, un color. + +Al escribir los valores abreviados de las imágenes de fondo es necesario seguir algunas reglas, por ejemplo: + +- Solo es posible especificar un color de fondo (`background-color`) después de la coma final. +- El valor para `background-size` solo puede incluirse inmediatamente después de `background-position`, separado con el carácter '/', así: `center/80%`. + +Consulta la página para el atributo {{cssxref ("background")}} de MDN para ver todas las posibilidades. + +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}} + +### Consideraciones de accesibilidad con los fondos + +Al colocar texto sobre una imagen o un color de fondo, debes asegurarte de que tiene suficiente contraste para que tus visitantes puedan leer el texto. Si estableces una imagen de fondo y el texto se coloca encima de la imagen, también debes especificar un color de fondo (`background-color`) que permita leer el texto si la imagen no se carga. + +Los lectores de pantalla no pueden analizar las imágenes de fondo, por lo tanto, deben ser puramente decorativas; cualquier contenido importante debe ser parte de la página HTML y no debe estar contenido en un fondo. + +## Bordes + +Al aprender sobre el modelo de cajas descubrimos cómo los bordes afectan al tamaño de nuestra caja. En este artículo veremos cómo usar los bordes de una manera creativa. Por lo general, cuando a un elemento le añadimos bordes con CSS, usamos una propiedad abreviada que establece el color, el ancho y el estilo del borde en una línea de CSS. + +Podemos establecer un borde para los cuatro lados de una caja con {{cssxref ("border")}}: + +```css +.box { + border: 1px solid black; +} +``` + +O podemos establecer solo un borde de la caja, por ejemplo: + +```css +.box { + border-top: 1px solid black; +} +``` + +Cada una de las propiedades de estas propiedades abreviadas sería: + +```css +.box { + border-width: 1px; + border-style: solid; + border-color: black; +} +``` + +Y las no abreviadas: + +```css +.box { + border-top-width: 1px; + border-top-style: solid; + border-top-color: black; +} +``` + +> **Nota:** Estas propiedades para el borde superior, derecho, inferior e izquierdo también tienen propiedades _lógicas_ asignadas que se relacionan con el modo de escritura del documento (por ejemplo, texto de izquierda a derecha o de derecha a izquierda, o de arriba a abajo). Exploraremos esto en la próxima lección, que expone el [uso de diferentes direcciones de texto](/es/docs/Learn/CSS/Building_blocks/Handling_different_text_directions). + +**Hay una variedad de estilos que puedes usar para los bordes. En el ejemplo siguiente, hemos utilizado un estilo de borde diferente para los cuatro lados de la caja. Juega con el estilo, el ancho y el color del borde para ver cómo funcionan los bordes.** + +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}} + +### Esquinas redondeadas + +El redondeo de esquinas en una caja se logra mediante el uso de la propiedad {{cssxref ("border-radius")}} y otras propiedades asociadas que se relacionan con cada esquina de la caja. Como valor pueden usarse dos longitudes o porcentajes: el primer valor define el radio horizontal y el segundo el radio vertical. En muchos casos, solo se pondrá un valor, que se utilizará para ambos. + +Por ejemplo, para hacer que las cuatro esquinas de una caja tengan un radio de 10 píxeles: + +```css +.box { + border-radius: 10px; +} +``` + +O para hacer que la esquina superior derecha tenga un radio horizontal de 1 em y un radio vertical del 10%: + +```css +.box { + border-top-right-radius: 1em 10%; +} +``` + +En el ejemplo siguiente hemos establecido las cuatro esquinas, y luego cambiamos los valores de la esquina superior derecha para que sea diferente. Juega con los valores para cambiar las esquinas. Echa un vistazo a la página de la propiedad {{cssxref ("border-radius")}} para ver las opciones de sintaxis disponibles. + +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}} + +## Pon a prueba tus habilidades + +Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más relevante? Encontrarás más pruebas para verificar que retienes la información antes de seguir adelante en[ Test your skills: Backgrounds and Borders](/es/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders). + +## Resumen + +En este artículo hemos expuesto bastantes conceptos y puedes ver que hay mucho para añadir a un fondo o a un borde de una caja. Explora las diferentes páginas de propiedades si deseas obtener más información sobre cualquiera de las características que hemos discutido. Todas las páginas de MDN contienen más ejemplos de uso, para que juegues y mejores tus conocimientos. + +En el próximo artículo descubriremos cómo interacciona el modo de escritura de tu documento con tu CSS. ¿Qué sucede cuando el texto no fluye de izquierda a derecha? + +{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}} + +## En este módulo + +1. [Cascada y herencia](/es/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Selectores CSS](/es/docs/Learn/CSS/Building_blocks/Selectors) + + - [Selectores de tipo, de clase y de ID](/es/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Selectores de atributos](/es/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Las pseudoclases y los pseudoelementos](/es/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Selectores de combinación](/es/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +3. [El modelo de cajas](/es/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Fondos y bordes](/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [El uso de diferentes direcciones de texto](/es/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [El desbordamiento de los contenidos](/es/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Los valores y las unidades](/es/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Elementos de dimensionado en CSS](/es/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Imágenes, media y elementos de formulario](/es/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Aplicar estilo a las tablas](/es/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Depurar el CSS](/es/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizar el CSS](/es/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/es/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/es/learn/css/building_blocks/cascade_and_inheritance/index.html deleted file mode 100644 index c46601b08846cf..00000000000000 --- a/files/es/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,334 +0,0 @@ ---- -title: Cascada y herencia -slug: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -original_slug: Learn/CSS/Building_blocks/Cascada_y_herencia ---- -
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
- -

El objetivo de este artículo es desarrollar la comprensión de algunos de los conceptos fundamentales de CSS (cascada, especificidad y herencia) que controlan cómo se aplica el CSS al HTML y cómo se resuelven los conflictos.

- -

A medida que avances en este apartado verás que puede resultar menos relevante y un poco más académico que otros artículos, pero la comprensión de estas cuestiones te ahorrará problemas más adelante. Te animamos a que trabajes meticulosamente este apartado y verifiques que entiendes los conceptos antes de continuar.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y una idea de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Aprender qué son la cascada y la especificidad, y cómo funciona la herencia en CSS.
- -

Reglas conflictivas

- -

CSS significa hojas de estilo en cascada (cascading style sheets), y es muy importante entender la palabra cascada. La forma en que se comporta la cascada es la clave para comprender el CSS.

- -

En algún momento trabajarás en un proyecto y encontrarás que el CSS que pensabas que debería aplicarse a un elemento no funciona. Por lo general, el problema suele ser que has creado dos normas que podrían aplicarse al mismo elemento. La cascada, y el concepto estrechamente relacionado de especificidad son mecanismos que controlan qué regla se aplica cuando aparecen tales conflictos. Es posible que la regla que se apliuca finalmente a tu elemento no sea la que esperas, por lo que debes comprender cómo funcionan estos mecanismos.

- -

También es significativo el concepto de herencia, que significa que algunas propiedades CSS heredan por defecto los valores establecidos en el elemento padre, pero otras no. Esto también puede causar una respuesta diferente a la que esperas.

- -

Vamos a empezar por echar un vistazo rápido a los principales elementos que nos interesan, y a continuación veremos cómo interactúan entre sí y con tu CSS. Pueden resultar un poco difíciles de entender, pero a medida que practiques escribiendo CSS te resultará más fácil de entender la manera cómo funcionan.

- -

Cascada

- -

En un primer nivel de simplicidad, la cascada en las hojas de estilo significa que el orden de las reglas importa en CSS: cuando dos reglas tienen la misma especificidad, se aplica la que aparece en último lugar en el CSS.

- -

En el ejemplo siguiente tenemos dos reglas que pueden aplicarse al h1. El h1 acaba siendo de color azul porque estas normas tienen un selector idéntico y, por lo tanto, tienen la misma especificidad. Por esta razón, se aplica la última que aparece.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}}

- -

Especificidad

- -

La especificidad es el modo que tiene el navegador de decidir qué regla se aplica si diversas reglas tienen selectores diferentes pero podrían aplicarse a un mismo elemento. Básicamente, la especificidad mide cuán específica es la selección de un selector:

- -
    -
  • Un selector de elemento es menos específico (selecciona todos los elementos de aquel tipo que aparecen en la página) por lo que presenta una puntuación más baja en especificidad.
    • -
  • Un selector de clase es más específico (selecciona solo los elementos de una página que tienen un valor de atributo class dado), y por tanto recibe una puntuación mayor.
    • -
- -

Veamos un ejemplo. Aquí abajo encontrarás dos reglas que pueden aplicarse al elemento h1. Este elemento h1 termina siendo de color rojo: el selector de clase confiere a esta regla una mayor especificidad, así que se aplicará a pesar de la regla para el selector de elemento que aparece más abajo en el orden del código.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}}

- -

Profundizaremos en la especificidad más adelante.

- -

Herencia

- -

La herencia también debe entenderse en este contexto: algunos valores de las propiedades CSS que se han establecido para los elementos padre los heredan los elementos hijo, pero otros no.

- -

Por ejemplo, si para un elemento se establece el color (color) y el tipo de letra (font-family), cada elemento que se encuentre dentro de él también se mostrará de ese color y con ese tipo de letra, a menos que les se haya aplicado un color y un tipo de letra diferentes directamente.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}}

- -

Algunas propiedades no se heredan. Por ejemplo, si para un elemento se establece un ancho {{cssxref("width")}} del 50%, sus descendientes no tendrán un 50% de ancho con respecto al de sus padres. Si este fuera el caso, ¡sería muy frustrante usar CSS!

- -
-

Nota: En las páginas de referencia de las propiedades CSS de MDN encontrarás un cuadro con información técnica (por lo general, en la parte inferior de la sección de especificaciones) que enumera una serie de puntos sobre cada propiedad, incluyendo cuáles se heredan y cuáles no. Véase, por ejemplo, la sección de especificaciones de la propiedad color.

-
- -

Comprender cómo trabajan juntos estos conceptos

- -

Estos tres conceptos controlan qué CSS se aplica a qué elemento. En las secciones siguientes veremos cómo funcionan en conjunto. A veces puede parecer un poco complicado, pero lo irás recordando a medida que ganes experiencia con el CSS, y siempre puedes consultar los detalles si se te olvidan. ¡Incluso los desarrolladores experimentados lo hacen!

- -

Comprender la herencia

- -

Vamos a empezar con la herencia. En el ejemplo siguiente tenemos un elemento {{HTMLElement( "ul")}} con dos niveles de listas no ordenadas anidadas en él. Hemos establecido para el <ul> exterior un borde, un relleno y un color de fuente.

- -

El color se ha aplicado a los hijos directos y también a los hijos indirectos: los elementos hijo <li> inmediatos y los que están dentro de la primera lista. A continuación, hemos añadido a la segunda lista anidada una clase especial y le hemos aplicado un color diferente, que los elementos hijo de esta heredarán.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}}

- -

La anchura (como se mencionó anteriormente), los márgenes, el relleno y los bordes no se heredan. Si los elementos hijo de nuestra lista heredaran los bordes, todas las listas y los elementos de lista ganarían un borde cada vez ¡y no es probable que vez quieras un efecto así!

- -

Las propiedades que se heredan por defecto y las que no son cuestión, en gran medida, de sentido común.

- -

Control de la herencia

- -

CSS proporciona cuatro valores de propiedad universales especiales para el control de la herencia. Todas las propiedades CSS aceptan estos valores.

- -
-
{{cssxref("inherit")}}
-
Establece que el valor de la propiedad que se aplica a un elemento determinado sea exactamente igual al del elemento padre. En la práctica, esto "activa la herencia".
-
{{cssxref("initial")}}
-
Establece que el valor de la propiedad que se aplica a un elemento seleccionado tenga el mismo valor que esté establecido para esa propiedad en la hoja de estilo por defecto del navegador.
-
{{cssxref("unset")}}
-
Restablece la propiedad a su valor natural, lo que significa que si la propiedad se hereda de forma natural, actúa como inherit, y en caso contrario como initial.
-
- -
-

Nota: También hay un valor más reciente, {{cssxref ("revert")}}, que todavía admiten pocos navegadores.

-
- -
-

Nota: Véase la sección El origen de las declaraciones CSS en el artículo Introducción al concepto de cascada en CSS para obtener más información sobre cada uno de estos valores y el modo en que funcionan.

-
- -

A continuación veremos una lista de enlaces y exploraremos cómo funcionan los valores universales. El ejemplo en vivo de abajo te permite jugar con el CSS y ver lo que sucede cuando se hacen cambios. Jugar con el código es la mejor forma de enfrentarse al HTML y el CSS.

- -

Por ejemplo:

- -
    -
  1. Se ha aplicado la clase my-class-1 al segundo elemento de lista. Esto establece por herencia el color del elemento <a> que está anidado en él. ¿Cómo cambia el color del enlace si quitamos esta regla?
    2. -
  2. ¿Entiendes por qué el tercer y el cuarto enlace se ven de este color? En caso contrario, comprueba la descripción de los valores anteriores.
    3. -
  3. ¿Cuál de los enlaces va a cambiar de color si se define un nuevo color para el elemento <a>, por ejemplo, a { color: red; }?
    4. -
- -

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}}

- -

Restablecer todos los valores de propiedad

- -

La propiedad CSS abreviada all se puede utilizar para aplicar uno de estos valores de herencia a (casi) todas las propiedades a la vez. Su valor puede ser cualquiera de los valores de herencia (inherit, initial, unset, o revert). Es una forma práctica de deshacer los cambios realizados respecto al estilo para que puedas volver a un punto de partida conocido antes de empezar a introducir cambios.

- -

En el ejemplo siguiente hay dos bloques de cita. El primero ya tiene un estilo aplicado al propio elemento de cita, mientras que el segundo tiene una clase aplicada al bloque de cita que establece el valor all en unset.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}}

- -

Prueba a establecer el valor de all al resto de valores disponibles y observa la diferencia.

- -

Comprender la cascada

- -

Ahora entendemos por qué un párrafo que está anidado en la estructura del HTML es del mismo color que el CSS aplicado al cuerpo (body) del HTML y, a partir de los artículos de introducción sabemos cómo cambiar el CSS aplicado a algo en cualquier parte del documento, ya sea mediante la asignación de CSS a un elemento o la creación de una clase. Ahora vamos a echar un vistazo a la forma en que el concepto de cascada define qué reglas CSS se aplican cuando más de un elemento de estilo puede aplicar estilo a un elemento.

- -

Hay que considerar tres factores, que se enumeran a continuación en orden de importancia creciente. Los posteriores invalidan los anteriores:

- -
    -
  1. Orden en el código
    2. -
  2. Especificidad
    3. -
  3. Importancia
    4. -
- -

Vamos a explicarlos para ver cómo los navegadores determinan exactamente que CSS deben aplicar.

- -

Orden en el código

- -

Ya hemos visto cómo el orden en el código es importante en el concepto de cascada. Si tienes más de una regla con exactamente el mismo peso, la que ocupa el último lugar en el CSS gana. Puedes entenderlo como que las reglas que están más cerca del elemento considerado sobreescriben las anteriores hasta que la última gana y da formato al elemento.

- -

Especificidad

- -

Una vez entendido el hecho de que el orden de los elementos en el código es importante, te encontrarás en alguna situación en la que sabes cuál es la última norma en la hoja de estilo, pero se aplica una regla anterior. Esto se debe a que la regla anterior tiene una especificidad mayor, es decir, es más específica y, por lo tanto, el navegador la escoge como la que debe dar forma al elemento.

- -

Como hemos visto anteriormente en este mismo artículo, un selector de clase tiene más peso que un selector de elemento, por lo que las propiedades que se definen en la clase tienen prioridad sobre las que se aplican directamente en el elemento.

- -

Un elemento que hay que tener en cuenta es que aunque pensamos en términos de selectores y reglas que se aplican a lo que estos seleccionan, no es toda la regla lo que se sobrescribe, sino solo las propiedades que entran en conflicto.

- -

Este comportamiento ayuda a evitar repeticiones en el CSS. Una práctica común es definir estilos genéricos para los elementos básicos y luego, crear clases para los elementos que son diferentes. Por ejemplo, en la hoja de estilo que mostramos a continuación hemos definido estilos genéricos para los encabezados de nivel 2; posteriormente hemos creado algunas clases que solo cambian algunas de las propiedades y los valores. Los valores definidos inicialmente se aplican a todos los encabezados, y entonces los valores más específicos se aplican a los encabezados con las clases.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}}

- -

Ahora vamos a echar un vistazo a cómo el navegador calcula la especificidad. Ya sabemos que un selector de elemento tiene una especificidad baja y se puede sobrescribir con un elemento de clase. Esencialmente se otorga un valor de puntos a los diferentes tipos de selectores y la suma de estos establece la importancia de ese selector en particular, que a continuación puede evaluarse ante otras posibles coincidencias.

- -

La cantidad de especificidad de un selector se mide usando cuatro valores diferentes (o componentes), que pueden describirse como millares, centenas, decenas y unidades (cuatro dígitos individuales dispuestos en cuatro columnas):

- -
    -
  1. Millares: Se suma un punto en esta columna si la declaración está en un atributo de {{htmlattrxref ("style")}} o, como suelen denominarse, estilos en línea. Tales declaraciones no tienen selectores, por lo que su especificidad siempre es 1000.
    2. -
  2. Centenas: Se suma un punto en esta columna por cada selector con ID particular que esté contenido en el selector general.
    3. -
  3. Decenas: Se suma un punto en esta columna por cada selector de clase, de atributo o pseudoclase que estén contenidos en el selector general.
    4. -
  4. Unidades: Se suma un punto en esta columna por cada selector o pseudoelemento que esté contenido en el selector general.
    5. -
- -
-

Nota: El selector universal (*), los operadores de combinación (+, >, ~, ' ') y la pseudo-clase de negación (:not) no tienen ningún efecto sobre la especificidad.

-
- -

La tabla siguiente muestra algunos ejemplos concretos para ayudarte a entenderlo mejor. Analízalos y trata de entender por qué tienen la especificidad que les hemos dado. Aun no hemos explicado los selectores de forma detallada, pero puedes encontrar detalles de cada selector en los selectores de referencia de MDN.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorMillares:Centenas:Decenas:Unidades:Especificidad total
h100010001
h1 + p::first-letter00030003
li > a[href*="en-US"] > .inline-warning00220022
#identifier01000100
Sin selector, con una regla en el atributo de un elemento {{htmlattrxref("style")}}10001000
- -

Antes de continuar, vamos a ver un ejemplo:

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}}

- -

¿Qué pasa aquí? En primer lugar, estamos interesados solo en las primeras siete reglas de este ejemplo y, como te habrás dado cuenta, hemos incluido sus valores de especificidad en un comentario antes de cada una.

- -
    -
  • Los dos primeros selectores compiten sobre el estilo del color del fondo del vínculo (el segundo gana y por eso el color de fondo es azul, porque en la cadena hay un selector con ID particular extra: la especificidad es de 201 contra 101).
    • -
  • El tercer y el cuarto selector compiten sobre el estilo del color del texto del enlace (el segundo gana y hace que el texto sea blanco porque, aunque tiene un selector de elemento de menos, el selector que falta se sustituye por un selector de clase, con un valor de decena en vez de un valor de unidad). Así que la especificidad es de 113 contra 104.
    • -
  • Los selectores 5-7 compiten por el estilo del borde del vínculo cuando el cursor se desplaza sobre estos. El sexto selector pierde claramente ante el quinto con una especificidad de 23 contra 24. En la cadena hay un selector de elemento de menos. El séptimo selector, sin embargo, los supera a ambos: en la cadena hay el mismo número de estos subselectores que en el quinto, pero se ha intercambiado un elemento por un selector de clase. Así que la especificidad es de 33 contra 23 y 24.
    • -
- -
    -
- -
-

Nota: Esto solo es un ejemplo aproximado para facilitar la comprensión. En realidad, cada tipo de selector tiene su nivel de especificidad propio, que no pueden sobrescribir los selectores con un nivel de especificidad menor. Por ejemplo, un millar de selectores de clase combinados no serían capaces de sobrescribir las reglas de un selector ID.

- -

Una forma más precisa de evaluar la especificidad sería anotar los niveles de especificidad individualmente de mayor a menor. Solo cuando hay empate entre las puntuaciones de los selectores dentro de un nivel especifico será necesario evaluar el nivel inferior siguiente; de lo contrario, puedes prescindir de los selectores de especificidad de los niveles inferiores, ya que nunca pueden sobrescribir los niveles de especificidad más altos.

-
- -

Propiedad !important

- -

Hay una pieza especial de CSS que se puede utilizar para anular todos los cálculos anteriores, sin embargo se debe tener mucho cuidado con su uso: !important. Se utiliza para convertir una propiedad y un valor particular en el elemento más específico, de modo que se invalidan las reglas normales de la cascada.

- -

Echa un vistazo a este ejemplo en el que se muestran dos párrafos, uno de los cuales tiene un elemento ID.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}}

- -

Vamos a observarlo con detenimiento para ver qué sucede. Elimina algunas de las propiedades para ver lo que sucede si te cuesta entender lo que ocurre:

- -
    -
  1. Verás que se han aplicado los valores de {{cssxref("color")}} y {{cssxref("padding")}} de la tercera regla pero no el de {{cssxref("background-color")}}. ¿Por qué? Deberían haberse aplicado para los tres porque las reglas que se encuentran más adelante en el orden en el código fuente prevalecen sobre las reglas anteriores.
    2. -
  2. Sin embargo, ganan las reglas que están antes porque los selectores de clase tienen mayor especificidad que selectores de elemento.
    3. -
  3. En ambos bloques de código hay una clase {{htmlattrxref("class")}} con el valor better, pero en el segundo bloque de código hay un {{htmlattrxref("id")}} con el valor winning. Puesto que los identificadores tienen una especificidad incluso mayor que las clases (solo puede haber un elemento con un determinado ID en cada página, mientras que puede haber muchos elementos de la misma clase: los selectores ID son muy específicos con lo que delimitan), el primer bloque de código tendría un fondo de color gris y ningún borde, según lo que especifica la clase, mientras que al segundo bloque de código se aplicarían tanto el color de fondo rojo como el borde negro de 1 píxel.
    4. -
  4. El segundo elemento, en cambio, se muestra con el fondo de color rojo pero sin borde. ¿Por qué? Porque la declaración !important que hay en la segunda regla, después de border: none significa que esta declaración tendrá más valor que la regla anterior, aunque el ID de esta tenga mayor especificidad.
    5. -
- -
-

Nota: La única manera de anular la declaración !important sería incluir otra declaración !important en una declaración con la misma especificidad que aparezca más adelante en el orden del código fuente, o con una especificidad superior.

-
- -

Es útil saber que !important existe para que sepas qué es cuando te lo encuentres en el código de otras personas. Sin embargo, te recomendamos encarecidamente que no lo utilices a menos que sea absolutamente necesario. !important cambia el modo en que suele funcionar la cascada, por lo que puede dificultar mucho la depuración de problemas en el CSS, especialmente en una hoja de estilo grande.

- -

Una situación en la que puede que tengas que utilizarlo es si trabajas en un CMS en el que no es posible editar los módulos básicos de CSS y realmente tienes que anular un estilo que no puede anularse de ninguna otra forma. Aun así, te recomendamos encarecidamente que evites su uso.

- -

El efecto de la ubicación del CSS

- -

Por último, resulta útil señalar que la importancia de una declaración CSS depende de la hoja de estilo en que se especifica (es posible que los usuarios configuren hojas de estilo personalizadas para anular los estilos de los desarrolladores, por ejemplo, porque el usuario podría tener alguna discapacidad visual, o bien porque desea configurar el tamaño de letra de todas las páginas web que visita para que sea el doble de grande y le proporcione una mayor facilidad de lectura).

- -

Resumen

- -

Las declaraciones contradictorias se aplicarán en el orden siguiente (recuerda que las últimas prevalecen sobre las anteriores):

- -
    -
  1. Declaraciones en las hojas de estilo de agente de usuario (por ejemplo, estilos predeterminados del navegador, que se utilizan cuando no hay otro estilo).
    2. -
  2. Declaraciones normales en las hojas de estilo del usuario (estilos personalizados creados por un usuario).
    3. -
  3. Declaraciones normales en las hojas de estilo de autor (los estilos que creamos nosotros, los desarrolladores web).
    4. -
  4. Declaraciones !important en las hojas de estilo de autor
    5. -
  5. Declaraciones !important en las hojas de estilo del usuario
    6. -
- -

Para los desarrolladores tiene sentido que sus hojas de estilo anulen a las de usuario para mantener el diseño según lo previsto, pero, como hemos visto, a veces los usuarios tienen buenas razones para anular las directrices de los desarrolladores web. Esto puede lograrse con el uso de !important en sus reglas.

- -

Pon a prueba tus habilidades

- -

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para verificar que retienes esa información en Test your skills: the Cascade.

- -

¿Qué sigue?

- -

Si has entendido la mayor parte de este artículo, ¡enhorabuena! Has comenzado a familiarizarte con la mecánica fundamental del CSS. En el artículo siguiente vamos a ver con detalle los selectores.

- -

Si todavía no tienes una comprensión completa de los conceptos de cascada, especificidad y herencia, ¡no te preocupes! Es, sin duda, lo más complejo que hemos expuesto hasta ahora y es algo que incluso los desarrolladores web profesionales encuentran difícil. Te aconsejamos que regreses a este artículo cuantas veces necesites a medida que avances con el curso.

- -

Regresa a esta página si empiezas a toparte con problemas extraños o con que los estilos no se aplican de la forma que esperas. Podría ser un problema de especificidad.

- -

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

- -

En este módulo

- -
    -
  1. La cascada y la herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. El modelo de caja
    4. -
  4. Fondos y bordes
    5. -
  5. El uso de diferentes direcciones de texto
    6. -
  6. El desbordamiento de los contenidos
    7. -
  7. Los valores y las unidades
    8. -
  8. Elementos de dimensionado en CSS
    9. -
  9. Imágenes, media y elementos de formulario
    10. -
  10. Aplicar estilo a las tablas
    11. -
  11. Depurar el CSS
    12. -
  12. Organizar el CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/es/learn/css/building_blocks/cascade_and_inheritance/index.md new file mode 100644 index 00000000000000..f47bba22ab320a --- /dev/null +++ b/files/es/learn/css/building_blocks/cascade_and_inheritance/index.md @@ -0,0 +1,271 @@ +--- +title: Cascada y herencia +slug: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +original_slug: Learn/CSS/Building_blocks/Cascada_y_herencia +--- +{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}} + +El objetivo de este artículo es desarrollar la comprensión de algunos de los conceptos fundamentales de CSS (cascada, especificidad y herencia) que controlan cómo se aplica el CSS al HTML y cómo se resuelven los conflictos. + +A medida que avances en este apartado verás que puede resultar menos relevante y un poco más académico que otros artículos, pero la comprensión de estas cuestiones te ahorrará problemas más adelante. Te animamos a que trabajes meticulosamente este apartado y verifiques que entiendes los conceptos antes de continuar. + + + + + + + + + + + + +
Prerrequisitos: + Conocimientos básicos de informática, tener el + software básico instalado, conocimientos básicos de + trabajar con archivos, HTML básico (véase + Introducción a HTML) y una idea de cómo funciona el CSS (véase + Primeros pasos con CSS). +
Objetivo: + Aprender qué son la cascada y la especificidad, y cómo funciona la + herencia en CSS. +
+ +## Reglas conflictivas + +CSS significa **hojas de estilo en cascada** (cascading style sheets), y es muy importante entender la palabra _cascada_. La forma en que se comporta la cascada es la clave para comprender el CSS. + +En algún momento trabajarás en un proyecto y encontrarás que el CSS que pensabas que debería aplicarse a un elemento no funciona. Por lo general, el problema suele ser que has creado dos normas que podrían aplicarse al mismo elemento. La **cascada**, y el concepto estrechamente relacionado de **especificidad** son mecanismos que controlan qué regla se aplica cuando aparecen tales conflictos. Es posible que la regla que se apliuca finalmente a tu elemento no sea la que esperas, por lo que debes comprender cómo funcionan estos mecanismos. + +También es significativo el concepto de **herencia**, que significa que algunas propiedades CSS heredan por defecto los valores establecidos en el elemento padre, pero otras no. Esto también puede causar una respuesta diferente a la que esperas. + +Vamos a empezar por echar un vistazo rápido a los principales elementos que nos interesan, y a continuación veremos cómo interactúan entre sí y con tu CSS. Pueden resultar un poco difíciles de entender, pero a medida que practiques escribiendo CSS te resultará más fácil de entender la manera cómo funcionan. + +### Cascada + +En un primer nivel de simplicidad, la **cascada** en las hojas de estilo significa que el orden de las reglas importa en CSS: cuando dos reglas tienen la misma especificidad, se aplica la que aparece en último lugar en el CSS. + +En el ejemplo siguiente tenemos dos reglas que pueden aplicarse al `h1`. El `h1` acaba siendo de color azul porque estas normas tienen un selector idéntico y, por lo tanto, tienen la misma especificidad. Por esta razón, se aplica la última que aparece. + +{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} + +### Especificidad + +La especificidad es el modo que tiene el navegador de decidir qué regla se aplica si diversas reglas tienen selectores diferentes pero podrían aplicarse a un mismo elemento. Básicamente, la especificidad mide cuán específica es la selección de un selector: + +- Un selector de elemento es menos específico (selecciona todos los elementos de aquel tipo que aparecen en la página) por lo que presenta una puntuación más baja en especificidad. +- Un selector de clase es más específico (selecciona solo los elementos de una página que tienen un valor de atributo `class` dado), y por tanto recibe una puntuación mayor. + +Veamos un ejemplo. Aquí abajo encontrarás dos reglas que pueden aplicarse al elemento `h1`. Este elemento `h1` termina siendo de color rojo: el selector de clase confiere a esta regla una mayor especificidad, así que se aplicará a pesar de la regla para el selector de elemento que aparece más abajo en el orden del código. + +{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} + +Profundizaremos en la especificidad más adelante. + +### Herencia + +La herencia también debe entenderse en este contexto: algunos valores de las propiedades CSS que se han establecido para los elementos padre los heredan los elementos hijo, pero otros no. + +Por ejemplo, si para un elemento se establece el color (`color`) y el tipo de letra (`font-family`), cada elemento que se encuentre dentro de él también se mostrará de ese color y con ese tipo de letra, a menos que les se haya aplicado un color y un tipo de letra diferentes directamente. + +{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} + +Algunas propiedades no se heredan. Por ejemplo, si para un elemento se establece un ancho {{cssxref("width")}} del 50%, sus descendientes no tendrán un 50% de ancho con respecto al de sus padres. Si este fuera el caso, ¡sería muy frustrante usar CSS! + +> **Nota:** En las páginas de referencia de las propiedades CSS de MDN encontrarás un cuadro con información técnica (por lo general, en la parte inferior de la sección de especificaciones) que enumera una serie de puntos sobre cada propiedad, incluyendo cuáles se heredan y cuáles no. Véase, por ejemplo, la [sección de especificaciones de la propiedad color](/es/docs/Web/CSS/color#Especificaciones). + +## Comprender cómo trabajan juntos estos conceptos + +Estos tres conceptos controlan qué CSS se aplica a qué elemento. En las secciones siguientes veremos cómo funcionan en conjunto. A veces puede parecer un poco complicado, pero lo irás recordando a medida que ganes experiencia con el CSS, y siempre puedes consultar los detalles si se te olvidan. ¡Incluso los desarrolladores experimentados lo hacen! + +## Comprender la herencia + +Vamos a empezar con la herencia. En el ejemplo siguiente tenemos un elemento {{HTMLElement( "ul")}} con dos niveles de listas no ordenadas anidadas en él. Hemos establecido para el `
    ` exterior un borde, un relleno y un color de fuente. + +El color se ha aplicado a los hijos directos y también a los hijos indirectos: los elementos hijo `
  • ` inmediatos y los que están dentro de la primera lista. A continuación, hemos añadido a la segunda lista anidada una clase especial y le hemos aplicado un color diferente, que los elementos hijo de esta heredarán. + +{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} + +La anchura (como se mencionó anteriormente), los márgenes, el relleno y los bordes no se heredan. Si los elementos hijo de nuestra lista heredaran los bordes, todas las listas y los elementos de lista ganarían un borde cada vez ¡y no es probable que vez quieras un efecto así! + +Las propiedades que se heredan por defecto y las que no son cuestión, en gran medida, de sentido común. + +### Control de la herencia + +CSS proporciona cuatro valores de propiedad universales especiales para el control de la herencia. Todas las propiedades CSS aceptan estos valores. + +- {{cssxref("inherit")}} + - : Establece que el valor de la propiedad que se aplica a un elemento determinado sea exactamente igual al del elemento padre. En la práctica, esto "activa la herencia". +- {{cssxref("initial")}} + - : Establece que el valor de la propiedad que se aplica a un elemento seleccionado tenga el mismo valor que esté establecido para esa propiedad en la hoja de estilo por defecto del navegador. +- {{cssxref("unset")}} + - : Restablece la propiedad a su valor natural, lo que significa que si la propiedad se hereda de forma natural, actúa como `inherit`, y en caso contrario como `initial`. + +> **Nota:** También hay un valor más reciente, {{cssxref ("revert")}}, que todavía admiten pocos navegadores. + +> **Nota:** Véase la sección [El origen de las declaraciones CSS](/es/docs/Web/CSS/Cascade#Origin_of_CSS_declarations "Este artículo explica qué es la cascada, el orden de la secuencia en cascada de las declaraciones CSS, y cómo esto afecta al desarrollador web.") en el artículo [Introducción al concepto de cascada en CSS ](/es/docs/Web/CSS/Cascade " Este artículo explica qué es la cascada, el orden de la secuencia en cascada de las declaraciones CSS, y cómo esto afecta al desarrollador web.")para obtener más información sobre cada uno de estos valores y el modo en que funcionan. + +A continuación veremos una lista de enlaces y exploraremos cómo funcionan los valores universales. El ejemplo en vivo de abajo te permite jugar con el CSS y ver lo que sucede cuando se hacen cambios. Jugar con el código es la mejor forma de enfrentarse al HTML y el CSS. + +Por ejemplo: + +1. Se ha aplicado la clase `my-class-1` al segundo elemento de lista. Esto establece por herencia el color del elemento `` que está anidado en él. ¿Cómo cambia el color del enlace si quitamos esta regla? +2. ¿Entiendes por qué el tercer y el cuarto enlace se ven de este color? En caso contrario, comprueba la descripción de los valores anteriores. +3. ¿Cuál de los enlaces va a cambiar de color si se define un nuevo color para el elemento ``, por ejemplo, `a { color: red; }`? + +{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} + +### Restablecer todos los valores de propiedad + +La propiedad CSS abreviada `all` se puede utilizar para aplicar uno de estos valores de herencia a (casi) todas las propiedades a la vez. Su valor puede ser cualquiera de los valores de herencia (`inherit`, `initial`, `unset`, o `revert`). Es una forma práctica de deshacer los cambios realizados respecto al estilo para que puedas volver a un punto de partida conocido antes de empezar a introducir cambios. + +En el ejemplo siguiente hay dos bloques de cita. El primero ya tiene un estilo aplicado al propio elemento de cita, mientras que el segundo tiene una clase aplicada al bloque de cita que establece el valor `all` en `unset`. + +{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} + +Prueba a establecer el valor de `all` al resto de valores disponibles y observa la diferencia. + +## Comprender la cascada + +Ahora entendemos por qué un párrafo que está anidado en la estructura del HTML es del mismo color que el CSS aplicado al cuerpo (`body`) del HTML y, a partir de los artículos de introducción sabemos cómo cambiar el CSS aplicado a algo en cualquier parte del documento, ya sea mediante la asignación de CSS a un elemento o la creación de una clase. Ahora vamos a echar un vistazo a la forma en que el concepto de cascada define qué reglas CSS se aplican cuando más de un elemento de estilo puede aplicar estilo a un elemento. + +Hay que considerar tres factores, que se enumeran a continuación en orden de importancia creciente. Los posteriores invalidan los anteriores: + +1. **Orden en el código** +2. **Especificidad** +3. **Importancia** + +Vamos a explicarlos para ver cómo los navegadores determinan exactamente que CSS deben aplicar. + +### Orden en el código + +Ya hemos visto cómo el orden en el código es importante en el concepto de cascada. Si tienes más de una regla con exactamente el mismo peso, la que ocupa el último lugar en el CSS gana. Puedes entenderlo como que las reglas que están más cerca del elemento considerado sobreescriben las anteriores hasta que la última gana y da formato al elemento. + +### Especificidad + +Una vez entendido el hecho de que el orden de los elementos en el código es importante, te encontrarás en alguna situación en la que sabes cuál es la última norma en la hoja de estilo, pero se aplica una regla anterior. Esto se debe a que la regla anterior tiene **una especificidad mayor**, es decir, es más específica y, por lo tanto, el navegador la escoge como la que debe dar forma al elemento. + +Como hemos visto anteriormente en este mismo artículo, un selector de clase tiene más peso que un selector de elemento, por lo que las propiedades que se definen en la clase tienen prioridad sobre las que se aplican directamente en el elemento. + +Un elemento que hay que tener en cuenta es que aunque pensamos en términos de selectores y reglas que se aplican a lo que estos seleccionan, no es toda la regla lo que se sobrescribe, sino solo las propiedades que entran en conflicto. + +Este comportamiento ayuda a evitar repeticiones en el CSS. Una práctica común es definir estilos genéricos para los elementos básicos y luego, crear clases para los elementos que son diferentes. Por ejemplo, en la hoja de estilo que mostramos a continuación hemos definido estilos genéricos para los encabezados de nivel 2; posteriormente hemos creado algunas clases que solo cambian algunas de las propiedades y los valores. Los valores definidos inicialmente se aplican a todos los encabezados, y entonces los valores más específicos se aplican a los encabezados con las clases. + +{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} + +Ahora vamos a echar un vistazo a cómo el navegador calcula la especificidad. Ya sabemos que un selector de elemento tiene una especificidad baja y se puede sobrescribir con un elemento de clase. Esencialmente se otorga un valor de puntos a los diferentes tipos de selectores y la suma de estos establece la importancia de ese selector en particular, que a continuación puede evaluarse ante otras posibles coincidencias. + +La cantidad de especificidad de un selector se mide usando cuatro valores diferentes (o componentes), que pueden describirse como millares, centenas, decenas y unidades (cuatro dígitos individuales dispuestos en cuatro columnas): + +1. **Millares**: Se suma un punto en esta columna si la declaración está en un atributo de {{htmlattrxref ("style")}} o, como suelen denominarse, estilos en línea. Tales declaraciones no tienen selectores, por lo que su especificidad siempre es 1000. +2. **Centenas**: Se suma un punto en esta columna por cada selector con ID particular que esté contenido en el selector general. +3. **Decenas**: Se suma un punto en esta columna por cada selector de clase, de atributo o pseudoclase que estén contenidos en el selector general. +4. **Unidades**: Se suma un punto en esta columna por cada selector o pseudoelemento que esté contenido en el selector general. + +> **Nota:** El selector universal (`*`), los operadores de combinación (`+`, `>`, `~`, ' ') y la pseudo-clase de negación (`:not`) no tienen ningún efecto sobre la especificidad. + +La tabla siguiente muestra algunos ejemplos concretos para ayudarte a entenderlo mejor. Analízalos y trata de entender por qué tienen la especificidad que les hemos dado. Aun no hemos explicado los selectores de forma detallada, pero puedes encontrar detalles de cada selector en los [selectores de referencia](/es/docs/Web/CSS/Selectores_CSS) de MDN. + +| Selector | Millares: | Centenas: | Decenas: | Unidades: | Especificidad total | +| ------------------------------------------------------------------------------------------ | --------- | --------- | -------- | --------- | ------------------- | +| `h1` | 0 | 0 | 0 | 1 | 0001 | +| `h1 + p::first-letter` | 0 | 0 | 0 | 3 | 0003 | +| `li > a[href*="en-US"] > .inline-warning` | 0 | 0 | 2 | 2 | 0022 | +| `#identifier` | 0 | 1 | 0 | 0 | 0100 | +| Sin selector, con una regla en el atributo de un elemento {{htmlattrxref("style")}} | 1 | 0 | 0 | 0 | 1000 | + +Antes de continuar, vamos a ver un ejemplo: + +{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} + +¿Qué pasa aquí? En primer lugar, estamos interesados solo en las primeras siete reglas de este ejemplo y, como te habrás dado cuenta, hemos incluido sus valores de especificidad en un comentario antes de cada una. + +- Los dos primeros selectores compiten sobre el estilo del color del fondo del vínculo (el segundo gana y por eso el color de fondo es azul, porque en la cadena hay un selector con ID particular extra: la especificidad es de 201 contra 101). +- El tercer y el cuarto selector compiten sobre el estilo del color del texto del enlace (el segundo gana y hace que el texto sea blanco porque, aunque tiene un selector de elemento de menos, el selector que falta se sustituye por un selector de clase, con un valor de decena en vez de un valor de unidad). Así que la especificidad es de 113 contra 104. +- Los selectores 5-7 compiten por el estilo del borde del vínculo cuando el cursor se desplaza sobre estos. El sexto selector pierde claramente ante el quinto con una especificidad de 23 contra 24. En la cadena hay un selector de elemento de menos. El séptimo selector, sin embargo, los supera a ambos: en la cadena hay el mismo número de estos subselectores que en el quinto, pero se ha intercambiado un elemento por un selector de clase. Así que la especificidad es de 33 contra 23 y 24. + +> **Nota:** Esto solo es un ejemplo aproximado para facilitar la comprensión. En realidad, cada tipo de selector tiene su nivel de especificidad propio, que no pueden sobrescribir los selectores con un nivel de especificidad menor. Por ejemplo, un _millar_ de selectores de **clase** combinados no serían capaces de sobrescribir las reglas de _un_ selector **ID**. +> +> Una forma más precisa de evaluar la especificidad sería anotar los niveles de especificidad individualmente de mayor a menor. Solo cuando hay empate entre las puntuaciones de los selectores dentro de un nivel especifico será necesario evaluar el nivel inferior siguiente; de lo contrario, puedes prescindir de los selectores de especificidad de los niveles inferiores, ya que nunca pueden sobrescribir los niveles de especificidad más altos. + +### Propiedad `!important` + +Hay una pieza especial de CSS que se puede utilizar para anular todos los cálculos anteriores, sin embargo se debe tener mucho cuidado con su uso: `!important`. Se utiliza para convertir una propiedad y un valor particular en el elemento más específico, de modo que se invalidan las reglas normales de la cascada. + +Echa un vistazo a este ejemplo en el que se muestran dos párrafos, uno de los cuales tiene un elemento ID. + +{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} + +Vamos a observarlo con detenimiento para ver qué sucede. Elimina algunas de las propiedades para ver lo que sucede si te cuesta entender lo que ocurre: + +1. Verás que se han aplicado los valores de {{cssxref("color")}} y {{cssxref("padding")}} de la tercera regla pero no el de {{cssxref("background-color")}}. ¿Por qué? Deberían haberse aplicado para los tres porque las reglas que se encuentran más adelante en el orden en el código fuente prevalecen sobre las reglas anteriores. +2. Sin embargo, ganan las reglas que están antes porque los selectores de clase tienen mayor especificidad que selectores de elemento. +3. En ambos bloques de código hay una clase {{htmlattrxref("class")}} con el valor `better`, pero en el segundo bloque de código hay un {{htmlattrxref("id")}} con el valor `winning`. Puesto que los identificadores tienen una especificidad _incluso mayor_ que las clases (solo puede haber un elemento con un determinado ID en cada página, mientras que puede haber muchos elementos de la misma clase: los selectores ID son _muy específicos_ con lo que delimitan), el primer bloque de código tendría un fondo de color gris y ningún borde, según lo que especifica la clase, mientras que al segundo bloque de código se aplicarían tanto el color de fondo rojo como el borde negro de 1 píxel. +4. El segundo elemento, en cambio, se muestra con el fondo de color rojo pero sin borde. ¿Por qué? Porque la declaración `!important` que hay en la segunda regla, después de `border: none` significa que esta declaración tendrá más valor que la regla anterior, aunque el ID de esta tenga mayor especificidad. + +> **Nota:** La única manera de anular la declaración `!important` sería incluir otra declaración `!important` en una declaración con la _misma especificidad_ que aparezca más adelante en el orden del código fuente, o con una especificidad superior. + +Es útil saber que `!important` existe para que sepas qué es cuando te lo encuentres en el código de otras personas. **Sin embargo, te recomendamos encarecidamente que no lo utilices a menos que sea absolutamente necesario.** `!important` cambia el modo en que suele funcionar la cascada, por lo que puede dificultar mucho la depuración de problemas en el CSS, especialmente en una hoja de estilo grande. + +Una situación en la que puede que tengas que utilizarlo es si trabajas en un CMS en el que no es posible editar los módulos básicos de CSS y realmente tienes que anular un estilo que no puede anularse de ninguna otra forma. Aun así, te recomendamos encarecidamente que evites su uso. + +## El efecto de la ubicación del CSS + +Por último, resulta útil señalar que la importancia de una declaración CSS depende de la hoja de estilo en que se especifica (es posible que los usuarios configuren hojas de estilo personalizadas para anular los estilos de los desarrolladores, por ejemplo, porque el usuario podría tener alguna discapacidad visual, o bien porque desea configurar el tamaño de letra de todas las páginas web que visita para que sea el doble de grande y le proporcione una mayor facilidad de lectura). + +## Resumen + +Las declaraciones contradictorias se aplicarán en el orden siguiente (recuerda que las últimas prevalecen sobre las anteriores): + +1. Declaraciones en las hojas de estilo de agente de usuario (por ejemplo, estilos predeterminados del navegador, que se utilizan cuando no hay otro estilo). +2. Declaraciones normales en las hojas de estilo del usuario (estilos personalizados creados por un usuario). +3. Declaraciones normales en las hojas de estilo de autor (los estilos que creamos nosotros, los desarrolladores web). +4. Declaraciones `!important` en las hojas de estilo de autor +5. Declaraciones `!important` en las hojas de estilo del usuario + +Para los desarrolladores tiene sentido que sus hojas de estilo anulen a las de usuario para mantener el diseño según lo previsto, pero, como hemos visto, a veces los usuarios tienen buenas razones para anular las directrices de los desarrolladores web. Esto puede lograrse con el uso de `!important` en sus reglas. + +## Pon a prueba tus habilidades + +Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para verificar que retienes esa información en [Test your skills: the Cascade](/es/docs/Learn/CSS/Building_blocks/Cascade_tasks). + +## ¿Qué sigue? + +Si has entendido la mayor parte de este artículo, ¡enhorabuena! Has comenzado a familiarizarte con la mecánica fundamental del CSS. En el artículo siguiente vamos a ver con detalle los selectores. + +Si todavía no tienes una comprensión completa de los conceptos de cascada, especificidad y herencia, ¡no te preocupes! Es, sin duda, lo más complejo que hemos expuesto hasta ahora y es algo que incluso los desarrolladores web profesionales encuentran difícil. Te aconsejamos que regreses a este artículo cuantas veces necesites a medida que avances con el curso. + +Regresa a esta página si empiezas a toparte con problemas extraños o con que los estilos no se aplican de la forma que esperas. Podría ser un problema de especificidad. + +{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}} + +## En este módulo + +1. [La cascada y la herencia](/es/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Selectores CSS](/es/docs/Learn/CSS/Building_blocks/Selectors) + + - [Selectores de tipo, de clase y de ID](/es/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Selectores de atributo](/es/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Las pseudo-clases y los pseudo-elementos](/es/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Operadores de combinación](/es/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +3. [El modelo de caja](/es/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Fondos y bordes](/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [El uso de diferentes direcciones de texto](/es/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [El desbordamiento de los contenidos](/es/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Los valores y las unidades](/es/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Elementos de dimensionado en CSS](/es/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Imágenes, media y elementos de formulario](/es/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Aplicar estilo a las tablas](/es/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Depurar el CSS](/es/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizar el CSS](/es/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/es/learn/css/building_blocks/debugging_css/index.html b/files/es/learn/css/building_blocks/debugging_css/index.html deleted file mode 100644 index 86d0d90ecb67b5..00000000000000 --- a/files/es/learn/css/building_blocks/debugging_css/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: Depurar el CSS -slug: Learn/CSS/Building_blocks/Debugging_CSS -translation_of: Learn/CSS/Building_blocks/Debugging_CSS -original_slug: Learn/CSS/Building_blocks/Depurar_el_CSS ---- -
    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
    - -

    Al escribir CSS te puedes encontrar que, a veces, alguna parte de tu CSS no hace lo que esperas. Tal vez creas que cierto selector debería coincidir con un elemento, pero no sucede nada; o una caja tiene un tamaño diferente al que esperabas. Este artículo te orientará sobre cómo solucionar un problema de CSS y te mostrará cómo las DevTools incluidas en todos los navegadores modernos pueden ayudarte a descubrir qué sucede.

    - - - - - - - - - - - - -
    Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con el CSS).
    Objetivo:Conocer los conceptos básicos de las DevTools que hay en los navegadores y de cómo inspeccionar y editar el CSS de un modo fácil.
    - -

    Cómo acceder a las DevTools de los navegadores

    - -

    El artículo ¿Qué son las herramientas de desarrollo de los navegadores? es una guía actualizada que explica cómo acceder a las herramientas en varios navegadores y plataformas. Si bien puedes optar por desarrollar principalmente en un navegador en particular y, por lo tanto, te familiarizarás más con las herramientas incluidas en ese navegador, vale la pena saber cómo acceder a ellas en otros navegadores. Esto ayudará si haces pruebas de las representaciones que dan diferentes navegadores.

    - -

    También te darás cuenta de que los diversos navegadores han optado por centrarse en áreas diferentes al crear sus DevTools. Por ejemplo, en Firefox hay algunas herramientas excelentes para trabajar visualmente con la compaginación con CSS, que te permiten inspeccionar y editar Compaginaciones de cuadrícula, Flexbox y formas. Sin embargo, todos los navegadores tienen herramientas fundamentales similares. Por ejemplo, para inspeccionar las propiedades y los valores que se aplican a los elementos de tu página, y hacer cambios desde el editor.

    - -

    En este artículo veremos algunas características útiles de Firefox DevTools para trabajar con CSS. Para hacerlo, usaremos un archivo de ejemplo. Carga esto en una pestaña nueva si deseas seguir adelante y abre tus DevTools como se describe en el artículo del enlace anterior.

    - -

    El DOM y "View Source"

    - -

    Algo que puede hacer tropezar a los recién llegados a DevTools es la diferencia entre lo que ves cuando miras el código fuente de una página web, o miras el archivo HTML que colocas en el servidor, y lo que puedes ver en la ventana HTML de DevTools. Aunque ves más o menos lo mismo que puedes ver desde View Source (Ver código fuente de la página), hay algunas diferencias.

    - -

    En el DOM procesado, el navegador puede haber corregido algunos HTML mal escritos por ti. Si cerraste un elemento incorrectamente, por ejemplo, por abrir con un <h2> y cerrar con un </h3>, el navegador descubre lo que ibas a hacer y el HTML del DOM cerrará ese <h2> de apertura correctamente con un </h2>. El navegador también normaliza todo el HTML, y el DOM también muestra los cambios que hace JavaScript.

    - -

    En comparación, View Source es simplemente el código fuente HTML tal como está almacenado en el servidor. El árbol HTML de tus DevTools muestra exactamente lo que el navegador representa en un momento dado, y te da una idea de lo que sucede en realidad.

    - -

    Inspección del CSS aplicado

    - -

    Selecciona un elemento de tu página, ya sea haciendo clic con el botón derecho o pulsando la tecla ctrl para seleccionar la opción Inspect, o seleccionándolo del árbol HTML que hay a la izquierda de la pantalla de la interfaz DevTools. Selecciona el elemento con la clase box1; este es el primer elemento de la página con una caja alrededor.

    - -

    La página de ejemplo para este tutorial con DevTools abiertas.

    - -

    Si observasla vista de reglas, que está a la derecha de tu HTML, deberías poder ver las propiedades y los valores CSS aplicados sobre ese elemento. Verás las reglas aplicadas directamente a la clase box1 y también el CSS que la caja hereda de su elemento padre, en este caso <body>. Esto es útil para cuando ves que se aplica un CSS que no esperabas. Tal vez se esté heredando de un elemento padre y necesites añadir una regla para sobrescribirlo en el contexto de este elemento.

    - -

    También es útil la capacidad de expandir las propiedades abreviadas. En nuestro ejemplo se usa la abreviación margin.

    - -

    Haz clic en la pequeña flecha para expandir la vista, que muestra las diferentes propiedades sin abreviar y sus valores.

    - -

    Puedes activar y desactivar los valores en la vista de reglas, cuando ese panel esté activo; si mantienes el ratón sobre él, aparecerán casillas de verificación. Desmarca la casilla de verificación de una regla, por ejemplo border-radius, y el CSS dejará de aplicarse.

    - -

    Puedes usar esto para hacer una comparación entre A y B, decidir si algo se ve mejor con una regla aplicada o sin aplicar, y también para ayudar a depurarlo. Por ejemplo, si un diseño falla e intentas determinar qué propiedad causa el problema.

    - -

    Editar valores

    - -

    Además de activar y desactivar las propiedades, puedes editar sus valores. ¿Quieres ver si quizá otro color se ve mejor, o deseas modificar algún tamaño? Las DevTools pueden ahorrarte mucho tiempo a la hora de editar una hoja de estilo y volver a cargar la página.

    - -

    Selecciona box1 y haz clic en la muestra (el pequeño círculo de color) que muestra el color aplicado al borde. Se abrirá un selector de color y puedes probar con colores diferentes, que se actualizarán en tiempo real en la página. De manera similar puedes cambiar el ancho o el estilo del borde.

    - -

    Ventana de aplicación de estilos de DevTools con un selector de color abierto.

    - -

    Añadir una propiedad nueva

    - -

    Puedes añadir propiedades usando las DevTools. ¿Te has dado cuenta de que quizá no quieres que tu caja herede el tamaño de letra del elemento <body> y quieres establecer tu propio tamaño de letra específico? Pruébalo en DevTools antes de añadirlo a tu archivo CSS.

    - -

    Puedes hacer clic en la llave de cierre de la regla para comenzar a introducir una declaración nueva, y en ese momento puedes comenzar a escribir la nueva propiedad y DevTools te mostrará una lista de propiedades coincidentes que se completará automáticamente. Después de seleccionar font-size, introduce el valor que deseas probar. También puede hacer clic en el botón + para añadir una regla adicional con el mismo selector y tus reglas nuevas.

    - -

    La ventana DevTools, que añade una propiedad nueva a las reglas, con el autocompletado para font-open

    - -
    -

    Nota: También hay otras funciones útiles en la vista de reglas; por ejemplo, las declaraciones con valores no válidos están tachadas. Puedes obtener más información en Examinar y editar CSS.

    -
    - -

    Comprender el modelo de cajas

    - -

    En artículos anteriores hemos expuesto el modelo de cajas, y el hecho de que tengamos un modelo de cajas alternativo que cambia la forma en que se calcula el tamaño de los elementos en función del tamaño que les asignas, más el relleno y los bordes. Las DevTools realmente pueden ayudarte a comprender cómo se calcula el tamaño de un elemento.

    - -

    El panel de disposición muestra un diagrama del modelo de cajas en el elemento seleccionado, junto con una descripción de las propiedades y los valores que cambian la forma en que el elemento se presenta. Esto incluye una descripción de las propiedades que puedes no haber utilizado explícitamente en el elemento, pero que tienen valores iniciales establecidos.

    - -

    En esta ventana, una de las propiedades que se detallan es la propiedad box-sizing, que controla qué modelo de cajas usa el elemento.

    - -

    Compara las dos cajas con las clases box1 y box2. Ambas tienen el mismo ancho aplicado (400 px), sin embargo, box1 es visualmente más ancha. En la ventana de diseño puedes ver que usa content-box. Este es el valor que toma el tamaño que asignas al elemento y luego añade el área de relleno y el ancho del borde.

    - -

    El elemento con una clase box2 usa border-box, por lo que aquí el área de relleno y el borde se restan del tamaño que has asignado al elemento. Esto significa que el espacio que la caja ocupa en la página es el tamaño exacto que se ha especificado, en nuestro caso width: 400px.

    - -

    La ventana de diseño de DevTools

    - -
    -

    Nota: Descubre más en Examinar e inspeccionar el modelo de cajas.

    -
    - -

    Resolver problemas de especificidad

    - -

    A veces, durante el desarrollo, pero en particular cuando necesitas editar el CSS de un sitio ya publicado, te resultará difícil conseguir que se aplique un determinado CSS. No importa lo que hagas, el elemento simplemente no parece aceptar tu CSS. Lo que suele suceder aquí es que un selector más específico anula tus cambios, y en este caso DevTools te será de gran ayuda.

    - -

    En nuestro archivo de ejemplo hay dos palabras incluidas en un elemento <em>. Uno se muestra en color naranja y el otro en rosa. En el CSS hemos aplicado:

    - -
    em {
-  color: hotpink;
-  font-weight: bold;
-}
    - -

    Sin embargo, un poco más arriba en la hoja de estilo hay una regla con un selector .special:

    - -
    .special {
-  color: orange;
-}
    - -

    Como recordarás del artículo sobre cascada y herencia, en que hablamos sobre la especificidad, los selectores de clase son más específicos que los selectores de elemento, por lo que este es el valor que se aplica. DevTools puede ayudarte a encontrar estos problemas, especialmente si la información está oculta en algún lugar de una extensa hoja de estilo.

    - -

    Inspecciona <em> con la clase .special y DevTools te mostrará que el naranja es el color que se aplica, y también te muestra la propiedad color aplicada al em tachado. Aquí puedes ver que la clase anula el selector de elemento.

    - -

    Selecciona un em y mira en DevTools qué solapa el color.

    - -

    Descubre más sobre las DevTools de Firefox

    - -

    Hay mucha información aquí en MDN sobre las DevTools de Firefox. Echa un vistazo a la sección principal de las DevTools, y consulta las Guías prácticas para obtener información más detallada sobre las cosas que hemos expuesto brevemente en este artículo.

    - -

    Problemas al depurar en CSS

    - -

    Las DevTools pueden ser de gran ayuda a la hora de resolver problemas con el CSS, pero ¿cómo resuelves una situación en la que el CSS no se comporta como esperas? Los siguientes pasos deberían ayudarte.

    - -

    Aléjate del problema

    - -

    Cualquier problema de código puede ser frustrante, especialmente los problemas de CSS, porque a menudo no recibes un mensaje de error que buscar en línea para ayudarte a encontrar una solución. Si te sientes frustrado, aléjate del problema por un tiempo: sal a caminar, tómate una copa, habla con un compañero de trabajo o trabaja en otra cosa por un tiempo. A veces, la solución aparece mágicamente cuando dejas de pensar en el problema, e incluso si no llega, trabajar en ello cuando te sientas más fresco te será mucho más fácil.

    - -

    ¿Tu HTML y CSS son válidos?

    - -

    Los navegadores esperan que tu CSS y HTML estén escritos correctamente, sin embargo, los navegadores también son muy indulgentes y harán todo lo posible para mostrar tus páginas web incluso si tiene errores en el marcado o en la hoja de estilo. Si tienes errores en el código, el navegador trata de adivinar lo que quieres decir, y podría tomar una decisión diferente a lo que tenías en mente. Además, dos navegadores diferentes pueden hacer frente al problema de dos maneras diferentes. Por lo tanto, un buen primer paso es pasar tu HTML y CSS por un validador, que detectar cualquier error.

    - - - -

    ¿La propiedad y el valor son compatibles con el navegador?

    - -

    Los navegadores simplemente ignoran el CSS que no entienden. Si la propiedad o el valor que utilizas no es compatible con el navegador en el que lo pruebas, no se romperá nada, pero ese CSS no se aplicará. Las DevTools en general destacan de alguna manera las propiedades y los valores que no son compatibles. En la captura de pantalla siguiente, el navegador no admite el valor de subcuadrícula {{cssxref ("grid-template-columns")}}.

    - -

    Imagen de las DevTools del navegador con la cuadrícula-plantilla-columnas: subcuadrícula tachada porque el valor de la subcuadrícula no es compatible.

    - -

    También puedes echar un vistazo a las tablas de compatibilidad de navegadores en la parte inferior de cada página de propiedades del proyecto MDN. Te muestran la compatibilidad de cada navegador para esa propiedad, a menudo desglosado si hay compatibilidad para un uso de la propiedad y no para otros. La tabla siguiente muestra los datos de compatibilidad para la propiedad {{cssxref ("shape-outside")}}.

    - -

    {{compat("css.shape-outside")}}

    - -

    ¿Hay algo más que anule tu CSS?

    - -

    Aquí es donde la información que has aprendido sobre la especificidad será muy útil. Si tienes algo más específico que anula lo que intentas hacer, puedes entrar en un juego muy frustrante de tratar de resolverlo sin saber qué tienes que resolver. Sin embargo, como hemos dicho, las DevTools te mostrarán qué CSS se ha aplicado y así puedes averiguar cómo hacer que el nuevo selector sea lo suficientemente específico como para anularlo.

    - -

    Haz un caso de prueba reducido del problema

    - -

    Si el problema no se resuelve con los pasos anteriores, deberás investigar un poco más. Lo mejor que puedes hacer en este momento es crear lo que se conoce como un caso de prueba reducido. Ser capaz de «reducir un problema» es una habilidad muy útil. Te ayudará a encontrar problemas en tu propio código y en el de tus colegas, y también te permitirá informar de errores y solicitar ayuda de manera más efectiva.

    - -

    Un caso de prueba reducido es un ejemplo de código que muestra el problema de la manera más simple posible, sin contenido ni estilo circundante. Esto significa a menudo sacar el código problemático de tu diseño para hacer un pequeño ejemplo que solo muestre ese código o característica.

    - -

    Para crear un caso de prueba reducido:

    - -
      -
    1. Si tu marcado se genera dinámicamente, por ejemplo desde un CMS, crea una versión estática de la salida que muestre el problema. Un sitio para compartir código como CodePen es útil para alojar casos de prueba reducidos, porque son accesibles en línea y puedes compartirlos fácilmente con tus colegas. Puedes comenzar por hacer un View Source de la página y copiar el HTML en CodePen, luego toma cualquier CSS y JavaScript relevante e inclúyelo también. Después de eso, puedes verificar si el problema sigue ahí.
      2. -
    2. Si eliminar el JavaScript no soluciona el problema, no incluyas el JavaScript. Si eliminar el JavaScript hace desaparecer el problema, elimina la mayor cantidad de JavaScript que puedas; deja solo las causas del problema.
      3. -
    3. Elimina cualquier HTML que no contribuya al problema. Elimina componentes o incluso elementos principales del diseño. Nuevamente, intenta reducir al mínimo la cantidad de código que aún muestra el problema.
      4. -
    4. Elimina cualquier CSS que no afecte al problema.
      5. -
    - -

    En el proceso, puedes descubrir qué causa el problema, o al menos ser capaz de ponerlo o quitarlo al eliminar algo específico. Vale la pena añadir algunos comentarios a tu código a medida que vas descubriendo cosas. Si tienes que pedir ayuda, estos comentarios indicarán a la persona que te ayuda lo que ya has intentado. Esto puede proporcionarte bastante información para permitirte buscar posibles problemas por sondeo y soluciones alternativas.

    - -

    Si todavía tienes dificultades para solucionar el problema, tener un caso de prueba reducido te ofrece algo con lo que pedir ayuda, publicarlo en un foro o mostrarlo a un compañero de trabajo. Es mucho más probable que obtengas ayuda si antes de pedir la ayuda muestras que has hecho el trabajo de reducir el problema e identificar dónde sucede exactamente. Un desarrollador más experimentado va a poder detectar el problema con rapidez y orientarte en la dirección correcta, y aunque no sea así, echarle un vistazo rápido a tu caso de prueba reducido y, con suerte, ofrecerte al menos algo de ayuda.

    - -

    En el caso de que tu problema sea en realidad un error en un navegador, también puedes usar un caso de prueba reducido para presentar un informe de error al proveedor del navegador correspondiente (por ejemplo, en el sitio de Bugzilla de Mozilla).

    - -

    A medida que adquieras más experiencia con CSS, descubrirás que vas adquiriendo rapidez para descubrir de dónde vienen los problemas. Sin embargo, incluso los más experimentados a veces nos preguntamos qué pasa. Adoptar un enfoque metódico, hacer un caso de prueba reducido y explicar el problema a otra persona suele dar un buen resultado para encontrar una solución.

    - -

    {{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}

    - -

    En este módulo

    - -
      -
    1. Cascada y herencia
      2. -
    2. Selectores CSS - -
      3. -
    3. El modelo de cajas
      4. -
    4. Fondos y bordes
      5. -
    5. El uso de diferentes direcciones de texto
      6. -
    6. El desbordamiento de los contenidos
      7. -
    7. Los valores y las unidades
      8. -
    8. Elementos de dimensionado en CSS
      9. -
    9. Imágenes, media y elementos de formulario
      10. -
    10. Aplicar estilo a las tablas
      11. -
    11. Depurar el CSS
      12. -
    12. Organizar el CSS
      13. -
    diff --git a/files/es/learn/css/building_blocks/debugging_css/index.md b/files/es/learn/css/building_blocks/debugging_css/index.md new file mode 100644 index 00000000000000..247eb659f88b02 --- /dev/null +++ b/files/es/learn/css/building_blocks/debugging_css/index.md @@ -0,0 +1,209 @@ +--- +title: Depurar el CSS +slug: Learn/CSS/Building_blocks/Debugging_CSS +translation_of: Learn/CSS/Building_blocks/Debugging_CSS +original_slug: Learn/CSS/Building_blocks/Depurar_el_CSS +--- +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}} + +Al escribir CSS te puedes encontrar que, a veces, alguna parte de tu CSS no hace lo que esperas. Tal vez creas que cierto selector debería coincidir con un elemento, pero no sucede nada; o una caja tiene un tamaño diferente al que esperabas. Este artículo te orientará sobre cómo solucionar un problema de CSS y te mostrará cómo las DevTools incluidas en todos los navegadores modernos pueden ayudarte a descubrir qué sucede. + + + + + + + + + + + + +
    Prerrequisitos: + Conocimientos básicos de informática, tener el + software básico + instalado, conocimientos básicos de + trabajar con archivos, HTML básico (véase + Introducción a HTML) y nociones de cómo funciona el CSS (véase + Primeros pasos con el CSS). +
    Objetivo: + Conocer los conceptos básicos de las DevTools que hay en los navegadores + y de cómo inspeccionar y editar el CSS de un modo fácil. +
    + +## Cómo acceder a las DevTools de los navegadores + +El artículo [¿Qué son las herramientas de desarrollo de los navegadores?](/es/docs/Learn/Common_questions/What_are_browser_developer_tools) es una guía actualizada que explica cómo acceder a las herramientas en varios navegadores y plataformas. Si bien puedes optar por desarrollar principalmente en un navegador en particular y, por lo tanto, te familiarizarás más con las herramientas incluidas en ese navegador, vale la pena saber cómo acceder a ellas en otros navegadores. Esto ayudará si haces pruebas de las representaciones que dan diferentes navegadores. + +También te darás cuenta de que los diversos navegadores han optado por centrarse en áreas diferentes al crear sus DevTools. Por ejemplo, en Firefox hay algunas herramientas excelentes para trabajar visualmente con la compaginación con CSS, que te permiten inspeccionar y editar [Compaginaciones de cuadrícula](/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts), [Flexbox](/es/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts) y [formas](/es/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes). Sin embargo, todos los navegadores tienen herramientas fundamentales similares. Por ejemplo, para inspeccionar las propiedades y los valores que se aplican a los elementos de tu página, y hacer cambios desde el editor. + +En este artículo veremos algunas características útiles de Firefox DevTools para trabajar con CSS. Para hacerlo, usaremos [un archivo de ejemplo](https://mdn.github.io/css-examples/learn/inspecting/inspecting.html). Carga esto en una pestaña nueva si deseas seguir adelante y abre tus DevTools como se describe en el artículo del enlace anterior. + +## El DOM y "View Source" + +Algo que puede hacer tropezar a los recién llegados a DevTools es la diferencia entre lo que ves cuando [miras el código fuente](/es/docs/Tools/View_source) de una página web, o miras el archivo HTML que colocas en el servidor, y lo que puedes ver en la [ventana HTML](/es/docs/Tools/Page_Inspector/UI_Tour#Panel_HTML) de DevTools. Aunque ves más o menos lo mismo que puedes ver desde View Source (Ver código fuente de la página), hay algunas diferencias. + +En el DOM procesado, el navegador puede haber corregido algunos HTML mal escritos por ti. Si cerraste un elemento incorrectamente, por ejemplo, por abrir con un `

    ` y cerrar con un `

    `, el navegador descubre lo que ibas a hacer y el HTML del DOM cerrará ese `

    ` de apertura correctamente con un `

    `. El navegador también normaliza todo el HTML, y el DOM también muestra los cambios que hace JavaScript. + +En comparación, View Source es simplemente el código fuente HTML tal como está almacenado en el servidor. El [árbol HTML](/es/docs/Tools/Page_Inspector/How_to/Examinar_y_editar_HTML#%C3%81rbol_HTML) de tus DevTools muestra exactamente lo que el navegador representa en un momento dado, y te da una idea de lo que sucede en realidad. + +## Inspección del CSS aplicado + +Selecciona un elemento de tu página, ya sea haciendo clic con el botón derecho o pulsando la tecla ctrl para seleccionar la opción _Inspect_, o seleccionándolo del árbol HTML que hay a la izquierda de la pantalla de la interfaz DevTools. Selecciona el elemento con la clase `box1`; este es el primer elemento de la página con una caja alrededor. + +![La página de ejemplo para este tutorial con DevTools abiertas.](https://mdn.mozillademos.org/files/16606/inspecting1.png) + +Si observasla [vista de reglas](/es/docs/Tools/Page_Inspector/UI_Tour#Panel_CSS), que está a la derecha de tu HTML, deberías poder ver las propiedades y los valores CSS aplicados sobre ese elemento. Verás las reglas aplicadas directamente a la clase `box1` y también el CSS que la caja hereda de su elemento padre, en este caso ``. Esto es útil para cuando ves que se aplica un CSS que no esperabas. Tal vez se esté heredando de un elemento padre y necesites añadir una regla para sobrescribirlo en el contexto de este elemento. + +También es útil la capacidad de expandir las propiedades abreviadas. En nuestro ejemplo se usa la abreviación `margin`. + +**Haz clic en la pequeña flecha para expandir la vista, que muestra las diferentes propiedades sin abreviar y sus valores.** + +**Puedes activar y desactivar los valores en la vista de reglas, cuando ese panel esté activo; si mantienes el ratón sobre él, aparecerán casillas de verificación. Desmarca la casilla de verificación de una regla, por ejemplo `border-radius`, y el CSS dejará de aplicarse.** + +Puedes usar esto para hacer una comparación entre A y B, decidir si algo se ve mejor con una regla aplicada o sin aplicar, y también para ayudar a depurarlo. Por ejemplo, si un diseño falla e intentas determinar qué propiedad causa el problema. + +## Editar valores + +Además de activar y desactivar las propiedades, puedes editar sus valores. ¿Quieres ver si quizá otro color se ve mejor, o deseas modificar algún tamaño? Las DevTools pueden ahorrarte mucho tiempo a la hora de editar una hoja de estilo y volver a cargar la página. + +**Selecciona `box1` y haz clic en la muestra (el pequeño círculo de color) que muestra el color aplicado al borde. Se abrirá un selector de color y puedes probar con colores diferentes, que se actualizarán en tiempo real en la página. De manera similar puedes cambiar el ancho o el estilo del borde.** + +![Ventana de aplicación de estilos de DevTools con un selector de color abierto.](https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png) + +## Añadir una propiedad nueva + +Puedes añadir propiedades usando las DevTools. ¿Te has dado cuenta de que quizá no quieres que tu caja herede el tamaño de letra del elemento `` y quieres establecer tu propio tamaño de letra específico? Pruébalo en DevTools antes de añadirlo a tu archivo CSS. + +**Puedes hacer clic en la llave de cierre de la regla para comenzar a introducir una declaración nueva, y en ese momento puedes comenzar a escribir la nueva propiedad y DevTools te mostrará una lista de propiedades coincidentes que se completará automáticamente. Después de seleccionar `font-size`, introduce el valor que deseas probar. También puede hacer clic en el botón + para añadir una regla adicional con el mismo selector y tus reglas nuevas.** + +![La ventana DevTools, que añade una propiedad nueva a las reglas, con el autocompletado para font-open](https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png) + +> **Nota:** También hay otras funciones útiles en la vista de reglas; por ejemplo, las declaraciones con valores no válidos están tachadas. Puedes obtener más información en [Examinar y editar CSS](/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS). + +## Comprender el modelo de cajas + +En artículos anteriores hemos expuesto el [modelo de cajas](/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja), y el hecho de que tengamos un modelo de cajas alternativo que cambia la forma en que se calcula el tamaño de los elementos en función del tamaño que les asignas, más el relleno y los bordes. Las DevTools realmente pueden ayudarte a comprender cómo se calcula el tamaño de un elemento. + +[El panel de disposición](/es/docs/Tools/Page_Inspector/UI_Tour#Panel_CSS) muestra un diagrama del modelo de cajas en el elemento seleccionado, junto con una descripción de las propiedades y los valores que cambian la forma en que el elemento se presenta. Esto incluye una descripción de las propiedades que puedes no haber utilizado explícitamente en el elemento, pero que tienen valores iniciales establecidos. + +En esta ventana, una de las propiedades que se detallan es la propiedad `box-sizing`, que controla qué modelo de cajas usa el elemento. + +**Compara las dos cajas con las clases `box1` y `box2`. Ambas tienen el mismo ancho aplicado (400 px), sin embargo, `box1` es visualmente más ancha. En la ventana de diseño puedes ver que usa `content-box`. Este es el valor que toma el tamaño que asignas al elemento y luego añade el área de relleno y el ancho del borde.** + +El elemento con una clase `box2` usa `border-box`, por lo que aquí el área de relleno y el borde se restan del tamaño que has asignado al elemento. Esto significa que el espacio que la caja ocupa en la página es el tamaño exacto que se ha especificado, en nuestro caso `width: 400px`. + +![La ventana de diseño de DevTools](https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png) + +> **Nota:** Descubre más en [Examinar e inspeccionar el modelo de cajas](/es/docs/Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel). + +## Resolver problemas de especificidad + +A veces, durante el desarrollo, pero en particular cuando necesitas editar el CSS de un sitio ya publicado, te resultará difícil conseguir que se aplique un determinado CSS. No importa lo que hagas, el elemento simplemente no parece aceptar tu CSS. Lo que suele suceder aquí es que un selector más específico anula tus cambios, y en este caso DevTools te será de gran ayuda. + +En nuestro archivo de ejemplo hay dos palabras incluidas en un elemento ``. Uno se muestra en color naranja y el otro en rosa. En el CSS hemos aplicado: + +```css +em { + color: hotpink; + font-weight: bold; +} +``` + +Sin embargo, un poco más arriba en la hoja de estilo hay una regla con un selector `.special`: + +```css +.special { + color: orange; +} +``` + +Como recordarás del artículo sobre [cascada y herencia](/es/docs/Learn/CSS/Building_blocks/Cascada_y_herencia), en que hablamos sobre la especificidad, los selectores de clase son más específicos que los selectores de elemento, por lo que este es el valor que se aplica. DevTools puede ayudarte a encontrar estos problemas, especialmente si la información está oculta en algún lugar de una extensa hoja de estilo. + +**Inspecciona `` con la clase `.special` y DevTools te mostrará que el naranja es el color que se aplica, y también te muestra la propiedad `color` aplicada al em tachado. Aquí puedes ver que la clase anula el selector de elemento.** + +![Selecciona un em y mira en DevTools qué solapa el color.](https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png) + +## Descubre más sobre las DevTools de Firefox + +Hay mucha información aquí en MDN sobre las DevTools de Firefox. Echa un vistazo a la [sección principal de las DevTools](/es/docs/Tools), y consulta las [Guías prácticas](/es/docs/Tools/Page_Inspector#How_to) para obtener información más detallada sobre las cosas que hemos expuesto brevemente en este artículo. + +## Problemas al depurar en CSS + +Las DevTools pueden ser de gran ayuda a la hora de resolver problemas con el CSS, pero ¿cómo resuelves una situación en la que el CSS no se comporta como esperas? Los siguientes pasos deberían ayudarte. + +### Aléjate del problema + +Cualquier problema de código puede ser frustrante, especialmente los problemas de CSS, porque a menudo no recibes un mensaje de error que buscar en línea para ayudarte a encontrar una solución. Si te sientes frustrado, aléjate del problema por un tiempo: sal a caminar, tómate una copa, habla con un compañero de trabajo o trabaja en otra cosa por un tiempo. A veces, la solución aparece mágicamente cuando dejas de pensar en el problema, e incluso si no llega, trabajar en ello cuando te sientas más fresco te será mucho más fácil. + +### ¿Tu HTML y CSS son válidos? + +Los navegadores esperan que tu CSS y HTML estén escritos correctamente, sin embargo, los navegadores también son muy indulgentes y harán todo lo posible para mostrar tus páginas web incluso si tiene errores en el marcado o en la hoja de estilo. Si tienes errores en el código, el navegador trata de adivinar lo que quieres decir, y podría tomar una decisión diferente a lo que tenías en mente. Además, dos navegadores diferentes pueden hacer frente al problema de dos maneras diferentes. Por lo tanto, un buen primer paso es pasar tu HTML y CSS por un validador, que detectar cualquier error. + +- [Validador de CSS](https://jigsaw.w3.org/css-validator/) +- [Validador de HTML](https://validator.w3.org/) + +### ¿La propiedad y el valor son compatibles con el navegador? + +Los navegadores simplemente ignoran el CSS que no entienden. Si la propiedad o el valor que utilizas no es compatible con el navegador en el que lo pruebas, no se romperá nada, pero ese CSS no se aplicará. Las DevTools en general destacan de alguna manera las propiedades y los valores que no son compatibles. En la captura de pantalla siguiente, el navegador no admite el valor de subcuadrícula {{cssxref ("grid-template-columns")}}. + +![Imagen de las DevTools del navegador con la cuadrícula-plantilla-columnas: subcuadrícula tachada porque el valor de la subcuadrícula no es compatible.](https://mdn.mozillademos.org/files/16641/no-support.png) + +También puedes echar un vistazo a las tablas de compatibilidad de navegadores en la parte inferior de cada página de propiedades del proyecto MDN. Te muestran la compatibilidad de cada navegador para esa propiedad, a menudo desglosado si hay compatibilidad para un uso de la propiedad y no para otros. La tabla siguiente muestra los datos de compatibilidad para la propiedad {{cssxref ("shape-outside")}}. + +{{compat("css.shape-outside")}} + +### ¿Hay algo más que anule tu CSS? + +Aquí es donde la información que has aprendido sobre la especificidad será muy útil. Si tienes algo más específico que anula lo que intentas hacer, puedes entrar en un juego muy frustrante de tratar de resolverlo sin saber qué tienes que resolver. Sin embargo, como hemos dicho, las DevTools te mostrarán qué CSS se ha aplicado y así puedes averiguar cómo hacer que el nuevo selector sea lo suficientemente específico como para anularlo. + +### Haz un caso de prueba reducido del problema + +Si el problema no se resuelve con los pasos anteriores, deberás investigar un poco más. Lo mejor que puedes hacer en este momento es crear lo que se conoce como un caso de prueba reducido. Ser capaz de «reducir un problema» es una habilidad muy útil. Te ayudará a encontrar problemas en tu propio código y en el de tus colegas, y también te permitirá informar de errores y solicitar ayuda de manera más efectiva. + +Un caso de prueba reducido es un ejemplo de código que muestra el problema de la manera más simple posible, sin contenido ni estilo circundante. Esto significa a menudo sacar el código problemático de tu diseño para hacer un pequeño ejemplo que solo muestre ese código o característica. + +Para crear un caso de prueba reducido: + +1. Si tu marcado se genera dinámicamente, por ejemplo desde un CMS, crea una versión estática de la salida que muestre el problema. Un sitio para compartir código como [CodePen](https://codepen.io/) es útil para alojar casos de prueba reducidos, porque son accesibles en línea y puedes compartirlos fácilmente con tus colegas. Puedes comenzar por hacer un View Source de la página y copiar el HTML en CodePen, luego toma cualquier CSS y JavaScript relevante e inclúyelo también. Después de eso, puedes verificar si el problema sigue ahí. +2. Si eliminar el JavaScript no soluciona el problema, no incluyas el JavaScript. Si eliminar el JavaScript hace desaparecer el problema, elimina la mayor cantidad de JavaScript que puedas; deja solo las causas del problema. +3. Elimina cualquier HTML que no contribuya al problema. Elimina componentes o incluso elementos principales del diseño. Nuevamente, intenta reducir al mínimo la cantidad de código que aún muestra el problema. +4. Elimina cualquier CSS que no afecte al problema. + +En el proceso, puedes descubrir qué causa el problema, o al menos ser capaz de ponerlo o quitarlo al eliminar algo específico. Vale la pena añadir algunos comentarios a tu código a medida que vas descubriendo cosas. Si tienes que pedir ayuda, estos comentarios indicarán a la persona que te ayuda lo que ya has intentado. Esto puede proporcionarte bastante información para permitirte buscar posibles problemas por sondeo y soluciones alternativas. + +Si todavía tienes dificultades para solucionar el problema, tener un caso de prueba reducido te ofrece algo con lo que pedir ayuda, publicarlo en un foro o mostrarlo a un compañero de trabajo. Es mucho más probable que obtengas ayuda si antes de pedir la ayuda muestras que has hecho el trabajo de reducir el problema e identificar dónde sucede exactamente. Un desarrollador más experimentado va a poder detectar el problema con rapidez y orientarte en la dirección correcta, y aunque no sea así, echarle un vistazo rápido a tu caso de prueba reducido y, con suerte, ofrecerte al menos algo de ayuda. + +En el caso de que tu problema sea en realidad un error en un navegador, también puedes usar un caso de prueba reducido para presentar un informe de error al proveedor del navegador correspondiente (por ejemplo, en el sitio de [Bugzilla](https://bugzilla.mozilla.org) de Mozilla). + +A medida que adquieras más experiencia con CSS, descubrirás que vas adquiriendo rapidez para descubrir de dónde vienen los problemas. Sin embargo, incluso los más experimentados a veces nos preguntamos qué pasa. Adoptar un enfoque metódico, hacer un caso de prueba reducido y explicar el problema a otra persona suele dar un buen resultado para encontrar una solución. + +{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}} + +## En este módulo + +1. [Cascada y herencia](/es/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Selectores CSS](/es/docs/Learn/CSS/Building_blocks/Selectors) + + - [Selectores de tipo, de clase y de ID](/es/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Selectores de atributo](/es/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Las pseudoclases y los pseudoelementos](/es/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Selectores de combinación](/es/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +3. [El modelo de cajas](/es/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Fondos y bordes](/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [El uso de diferentes direcciones de texto](/es/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [El desbordamiento de los contenidos](/es/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Los valores y las unidades](/es/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Elementos de dimensionado en CSS](/es/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Imágenes, media y elementos de formulario](/es/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Aplicar estilo a las tablas](/es/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Depurar el CSS](/es/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizar el CSS](/es/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/es/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/es/learn/css/building_blocks/fundamental_css_comprehension/index.html deleted file mode 100644 index 9ee1a103b916e0..00000000000000 --- a/files/es/learn/css/building_blocks/fundamental_css_comprehension/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Comprensión de los fundamentos de CSS -slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension -tags: - - CSS - - Estilo - - Evaluación - - Modelo de Caja - - Principiante - - Selectores - - Sintaxis - - comentários - - reglas -translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension -original_slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension ---- -
    -
    {{LearnSidebar}}
    - -
    {{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
    - -

    Has avanzado mucho en este módulo, debes sentirte orgulloso de haber llegado hasta el final. El último paso antes de terminar es intentar el examen del módulo — que incluye completar varios ejercicios para crear el último diseño — una tarjeta de presentación/de jugador/perfil de redes sociales.

    - - - - - - - - - - - - -
    Prerrequisitos:Antes de intentar esta evaluación, debería haber revisado todos los artículos en este módulo.
    Objetivo:Probar la comprensión de los fundamentos de la teoría, sintaxis y mecánica de CSS.
    - -

    Punto de Partida

    - -

    Para comenzar esta evaluación, debes:

    - -
      -
    • Ve y coge el archivo HTML del ejercicio, y el archivo de imagen asociada, y guárdalos en un nuevo directorio en tu ordenador local. Si quieres usar tu propio archivo de imagen y rellenar tu propio nombre, eres bienvenido - sólo asegúrate de que la imagen es cuadrada.
      • -
    • Coge el archivo de texto de los recursos CSS — este contiene un conjunto de selectores y conjuntos de reglas en estado puro que necesitarás estudiar y combinar para responder a parte de esta evaluación.
      • -
    - -
    -

    Nota: Alternativamente, se puede utilizar un sitio como JSBin o Thimble para hacer la evaluación. Puede pegar el HTML y completar el CSS en uno de estos editores en línea, y usar esta URL para apuntar el elemento <img> al archivo de imagen. Si el editor en línea que estás usando no tiene un panel CSS separado, no dudes en ponerlo en un elemento <style> en el encabezado del documento.

    -
    - -

    Resumen del Proyecto

    - -

    Se le ha proporcionado un poco de HTML puro y una imagen, y necesitas escribir el CSS necesario para darle estilo a una pequeña tarjeta de presentación en línea, que tal vez pueda servir como una tarjeta de jugador o de perfil en redes sociales. Las siguientes secciones describen lo que debes hacer.

    - -

    Configuración básica:

    - -
      -
    • En primer lugar, crea un nuevo archivo en el mismo directorio que tus archivos HTML y de imagen. Llámalo algo realmente imaginativo como style.css.
      • -
    • Vincula tu CSS a tu archivo HTML mediante un elemento <link>.
      • -
    • Las dos primeras reglas en el archivo de recursos CSS son tuyas, ¡GRATIS! Después de que hayas terminado de regocijarte de tu buena fortuna, cópialas y pégalas en la parte superior de tu nuevo archivo CSS. Úsalas como prueba para asegurarte de que tu CSS se aplica correctamente a tu HTML.
      • -
    • -

      Sobre las dos reglas, agregue un comentario CSS con algún texto dentro para indicar que se trata de un conjunto de estilos generales para toda la página. "Estilos generales de la página" sería suficiente. También agrega tres comentarios más en la parte inferior del archivo CSS para indicar estilos específicos para la configuración del contenedor de la tarjeta, estilos específicos para el header y footer (encabezado y pie de página), y estilos específicos para el contenido principal de la tarjeta de presentación. De ahora en adelante, los estilos subsiguientes añadidos a la hoja de estilo deben organizarse en el lugar apropiado.

      -
      • -
    - -

    Encargandonos de los selectores y conjuntos de reglas proporcionados:

    - -
      -
    • A continuación, nos gustaría que examinaras los cuatro selectores y calcularas la especificidad de cada uno. Escríbelas en algún lugar donde las puedas encontrar más tarde, como en un comentario en la parte superior de tu CSS.
      • -
    • Ahora es el momento de poner el selector correcto en el conjunto de reglas correcto! Tienes cuatro pares de selectores y reglas que coinciden en tus recursos de CSS. Hazlo ahora y agrégalos a tu archivo CSS. Necesitaras: -
        -
      • Asignar al contenedor principal de tarjetas un ancho/alto fijo (width/height), color de fondo sólido (background-color), borde (border) y radio de borde (border-radius), entre otras cosas.
        • -
      • Asigna al header un degradado (linear-gradient) de fondo que va de más oscuro a más claro, además de esquinas redondeadas que encajan con las esquinas redondeadas establecidas en el contenedor principal de tarjetas.
        • -
      • Asigna al pie de página un degradado (linear-gradient) de fondo que vaya de más claro a más oscuro, además de esquinas redondeadas que encajen con las esquinas redondeadas establecidas en el contenedor principal de tarjetas.
        • -
      • Asigna a la imagen un float a la derecha para que se pegue al lado derecho del contenido principal de la tarjeta de presentación, y dale una altura máxima (max-height) del 100% (un truco inteligente que asegura que crecerá/encogerá para que se mantenga a la misma altura que el contenedor principal, sin importar a que altura se trasforme).
        • -
      -
      • -
    • ¡Cuidado! Hay dos errores en los conjuntos de reglas proporcionados. Utilizando cualquier técnica que conozcas, localízalas y arréglalas antes de seguir adelante.
      • -
    - -

    Nuevos conjuntos de reglas que necesitas escribir:

    - -
      -
    • Escribe un conjunto de reglas que apunte tanto al header de la tarjeta como al footer de la misma, dándoles una altura total de 50px, (que incluye una altura de contenido de 30px y un padding de 10px en todos los lados). Pero expresalo en ems.
      • -
    • El margen por defecto aplicado a los elementos <h2> y <p> por el navegador interferirá con nuestro diseño, así que escribe una regla que apunte a todos estos elementos y establezca su margen en 0.
      • -
    • Para evitar que la imagen se derrame del contenido principal de la tarjeta de presentación (el elemento <article>), necesitamos darle una altura específica. Ajustar la altura del <article> a 120px, expresada en ems. También asigna un background-color negro semitransparente, resultando en un tono ligeramente más oscuro que deja que el color rojo del fondo brille un poco también.
      • -
    • Escribe un conjunto de reglas que le asigne al <h2> un font-size efectivo de 20px (pero expresado en ems) y una line-height (altura de línea) apropiada para colocarlo en el centro de la caja de contenido del header. Recuerde que la altura de la caja de contenido debe ser de 30px - esto te proporciona todos los números que necesitas para calcular la line-height.
      • -
    • Escribe un conjunto de reglas que le asigne al <p> dentro del footer un font-size efectivo de 15px (pero expresado en ems) y una line-height apropiada para colocarlo en el centro de la caja de contenido del footer. Recuerda que la altura de la caja de contenido debe ser de 30px - esto te proporciona todos los números que necesitas para calcular la line-height.
      • -
    • Como último toque, asigna al párrafo dentro del <article> un padding apropiado para que su borde izquierdo se alinee con el <h2> y el párrafo del footer, y ajuste su color para que sea bastante claro y sea fácil de leer.
      • -
    - -

    Otras cosas en las que pensar:

    - -
      -
    • Obtendrás puntos adicionales si escribes tu CSS para una legibilidad máxima, con una declaración separada en cada línea..
      • -
    • Deberás incluir .card al principio de la cadena de selección en todas tus reglas, para que estas reglas no interfieran con el estilo de cualquier otro elemento si la tarjeta de presentación se pusiera en una página con un montón de otro contenido.
      • -
    - -

    Consejos y Sugerencias

    - -
      -
    • No necesitas editar el HTML de ninguna manera, excepto para aplicar el CSS a tu HTML.
      • -
    • Cuando intentes calcular el valor em que necesita para representar una cierta longitud de píxel, piensa en el tamaño de fuente base que tiene el elemento raíz (<html>) , y por el que necesita multiplicarse para obtener el valor deseado. Eso te dará tu valor, al menos en un caso sencillo como este.
      • -
    - -

    Ejemplo

    - -

    La siguiente captura de pantalla muestra un ejemplo de cómo debe ser el diseño terminado:

    - -

    A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

    - -

    - -

    Evaluación

    - -

    Si estás siguiendo esta evaluación como parte de un curso organizado, deberías ser capaz de entregar tu trabajo a tu profesor/mentor para que lo califique. Si eres autodidacta, entonces puedes obtener la guía de puntuación fácilmente preguntando en el hilo del Discurso del Área de Aprendizaje, o en el canal IRC #mdn en Mozilla IRC. Haz el ejercicio primero - ¡No hay nada que ganar haciendo trampa!

    - -

    {{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

    -
    diff --git a/files/es/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/es/learn/css/building_blocks/fundamental_css_comprehension/index.md new file mode 100644 index 00000000000000..a0a58396a76c53 --- /dev/null +++ b/files/es/learn/css/building_blocks/fundamental_css_comprehension/index.md @@ -0,0 +1,101 @@ +--- +title: Comprensión de los fundamentos de CSS +slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +tags: + - CSS + - Estilo + - Evaluación + - Modelo de Caja + - Principiante + - Selectores + - Sintaxis + - comentários + - reglas +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +original_slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension +--- +{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}} + +Has avanzado mucho en este módulo, debes sentirte orgulloso de haber llegado hasta el final. El último paso antes de terminar es intentar el examen del módulo — que incluye completar varios ejercicios para crear el último diseño — una tarjeta de presentación/de jugador/perfil de redes sociales. + + + + + + + + + + + + +
    Prerrequisitos: + Antes de intentar esta evaluación, debería haber revisado todos los + artículos en este módulo. +
    Objetivo: + Probar la comprensión de los fundamentos de la teoría, sintaxis y + mecánica de CSS. +
    + +## Punto de Partida + +Para comenzar esta evaluación, debes: + +- Ve y coge el [archivo HTML del ejercicio](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html), y el [archivo de imagen asociada](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg), y guárdalos en un nuevo directorio en tu ordenador local. Si quieres usar tu propio archivo de imagen y rellenar tu propio nombre, eres bienvenido - sólo asegúrate de que la imagen es cuadrada. +- Coge el [archivo de texto de los recursos CSS](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt) — este contiene un conjunto de selectores y conjuntos de reglas en estado puro que necesitarás estudiar y combinar para responder a parte de esta evaluación. + +> **Nota:** Alternativamente, se puede utilizar un sitio como [JSBin](http://jsbin.com/) o [Thimble](https://thimble.mozilla.org/) para hacer la evaluación. Puede pegar el HTML y completar el CSS en uno de estos editores en línea, y usar [esta URL](http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg) para apuntar el elemento `` al archivo de imagen. Si el editor en línea que estás usando no tiene un panel CSS separado, no dudes en ponerlo en un elemento ` + + +

    ¡Hola, mundo!

    +

    Este es mi primer ejemplo de CSS

    + + +``` + +Esto puede ser útil en algunas circunstancias (tal vez estés trabajando con un sistema de administración de contenido donde no sea posible modificar los archivos CSS directamente), pero no es tan eficiente como las hojas de estilo externas: en una página web, deberías repetir el CSS en cada página y actualizarlo en varios lugares en caso de que hubiera que hacer cambios. + +### Estilos en línea + +Los estilos en línea son declaraciones CSS que afectan a un solo elemento, contenido dentro de un atributo de `style`: + +```html + + + + + Mi experimento CSS + + +

    ¡Hola mundo!

    +

    Este es mi primer ejemplo de CSS

    + + +``` + +**¡No hagas esto a menos que realmente tengas que hacerlo!** Es realmente malo a la hora de realizar el mantenimiento (puede que tengas que actualizar la misma información varias veces en un mismo documento), y además mezcla tu información CSS para la presentación con tu información HTML para la estructura, lo que dificulta la lectura y la comprensión del código. Mantener los diferentes tipos de código separados facilita trabajar con ellos. + +Hay ciertos lugares donde los estilos en línea son más comunes, o incluso aconsejables. Es posible que tengas que recurrir a ellos si realmente tu entorno de trabajo es restrictivo (tal vez el CMS solo te permita editar el cuerpo del HTML). También verás que se usan mucho en el correo electrónico en formato HTML para lograr la máxima compatibilidad con el mayor número de clientes. + +## Juguemos con el CSS de este artículo + +En este artículo hay mucho CSS con el que jugar. Para hacerlo, recomendamos crear un nuevo directorio/carpeta en el ordenador, dentro de la cual deberás crear una copia de los siguientes dos archivos: + +**index.html:** + +```html + + + + + Mis experimentos CSS + + + + +

    Crea tu HTML de prueba aquí

    + + + +``` + +**styles.css:** + +```css +/* Crea tu CSS de prueba aquí */ + +p { + color: red; +} +``` + +Entonces, cuando te encuentres con un CSS con el que desees experimentar, reemplaza el contenido `` del HTML con algo de HTML sin estilos y añade CSS a tu archivo de CSS para darle estilo. + +Si no estás en un sistema donde puedas crear archivos fácilmente, puedes utilizar el editor interactivo que encontrarás a continuación para experimentar. + +{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} + +¡Sigue leyendo y disfruta! + +## Selectores + +No se puede hablar de CSS sin mencionar los selectores, de los cuales ya hemos descubierto varios tipos diferentes en la lección [Empezar con el CSS](/es/docs/Learn/CSS/First_steps/Getting_started). Un selector es, como determinamos, un elemento de nuestro documento HTML para aplicarle estilo. Si los estilos no se aplican correctamente, es probable que el selector no coincida con lo que crees que debería coincidir. + +Cada regla CSS comienza con un selector o una lista de selectores que indican al navegador a qué elemento o elementos deben aplicarse dichas reglas. Todos los siguientes son ejemplos de selectores válidos o listas de selectores. + +```css +h1 +a:link +.manythings +#onething +* +.box p +.box p:first-child +h1, h2, .intro +``` + +**Prueba a crear algunas reglas CSS que usen los selectores anteriores y algo de HTML sin estilos. Si no conoces alguna de las sintaxis anteriores, ¡prueba a buscarla en MDN!** + +> **Nota:** Aprenderás mucho más sobre los selectores en nuestros tutoriales sobre [selectores CSS](/es/docs/Learn/CSS/Building_blocks/Selectors) de la próxima lección. + +### Especificidad + +A menudo habrá situaciones en las que dos selectores podrían determinar un mismo elemento HTML. Considera la siguiente hoja de estilo, en que definimos una regla con un selector `p` que establecerá los párrafos en color azul, y también una clase que establecerá los elementos seleccionados en color rojo. + +```css +.special { + color: red; +} + +p { + color: blue; +} +``` + +Digamos que en nuestro documento HTML hay un párrafo con una clase `special`. Ambas reglas podrían aplicarse. ¿Cuál ganará? ¿De qué color crees que será nuestro párrafo? + +```html +

    ¿De qué color soy?

    +``` + +El lenguaje CSS tiene reglas para controlar cuál ganará en caso de colisión; reciben el nombre de **cascada** y **especificidad**. En el siguiente bloque de códigos hemos definido dos reglas para el selector `p`, pero el párrafo termina siendo de color azul. Esto se debe a que la declaración que lo establece en azul aparece más abajo en la hoja de estilo, y los estilos posteriores anulan a los anteriores. Así funciona la regla de la cascada. + +```css +p { + color: red; +} + +p { + color: blue; +} +``` + +Sin embargo, en el caso de nuestro primer bloque, que contiene un selector de clase y otro de elementos, la clase ganará. Esto hará que el párrafo sea rojo, incluso aunque aparezca antes en la hoja de estilo. Una clase se describe de forma más específica o con más especificidad que el selector de elementos, razón por la que gana. + +**Prueba el ejemplo anterior: añade el HTML a tu experimento, luego pon las dos reglas `p { ... }` a tu hoja de estilo. A continuación, cambia el primer selector `p` por `.special` para ver cómo cambia el estilo.** + +Las reglas de especificidad y de cascada pueden parecer un poco complicadas al principio. Son más fáciles de entender a medida que se van adquiriendo conocimientos de CSS. En nuestro artículo sobre [Cascada y herencia](/es/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance), que abordaremos en la próxima lección, se explicará en detalle, incluyendo cómo calcular la especificidad. Por ahora, solo has de saber que existe y que a veces el CSS no se aplica como esperas porque algo más en la hoja de estilo tiene una mayor especificidad. El hecho de identificar que más de una regla podría aplicarse a un elemento es el primer paso para solucionar estos problemas. + +## Propiedades y valores + +En su nivel más básico, el CSS consta de dos componentes básicos: + +- **Propiedades**: Identificadores legibles por los humanos que indican qué características de estilo (por ejemplo, [`font-size`](/es/docs/Web/CSS/font-size), [`width`](/es/docs/Web/CSS/width), [`background-color`](/es/docs/Web/CSS/background-color)) deseas cambiar. +- **Valores**: A cada propiedad especificada se le asigna un valor que indica cómo quieres que cambien esas características de estilo (por ejemplo, lo que quieres que cambie de la fuente, el ancho o el color de fondo). + +La siguiente imagen resalta una sola propiedad y valor. El nombre de la propiedad es `color` y el valor `blue`. + +![Una declaración resaltada en el CSS](https://mdn.mozillademos.org/files/16498/declaration.png) + +Una propiedad emparejada con un valor se denomina _declaración CSS_. Las declaraciones CSS se colocan dentro de los _bloques de declaración CSS_. La siguiente imagen muestra nuestro CSS con el bloque de declaración resaltado. + +![Un bloque de declaración resaltado](https://mdn.mozillademos.org/files/16499/declaration-block.png) + +Finalmente, los bloques de declaración CSS se combinan con _selectores_ para producir _conjuntos de reglas CSS_ (o _reglas CSS_). Nuestra imagen contiene dos reglas, una para el selector `h1` y otra para el selector `p`. La regla para `h1` está resaltada. + +![La regla para h1 resaltada](https://mdn.mozillademos.org/files/16500/rules.png) + +Establecer las propiedades de CSS según valores específicos es la función principal del lenguaje CSS. El motor CSS calcula qué declaraciones se aplican a cada elemento de una página para darle la compaginación y los estilos adecuados. + +> **Advertencia:** Las propiedades y valores de CSS son sensibles a mayúsculas y minúsculas. La propiedad y el valor de cada par están separados por dos puntos (`:`). + +**Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se puedan aplicar a diferentes elementos HTML:** + +- **{{cssxref("font-size")}}** +- **{{cssxref("width")}}** +- **{{cssxref("background-color")}}** +- **{{cssxref("color")}}** +- **{{cssxref("border")}}** + +> **Advertencia:** Si una propiedad es desconocida o si un valor no es válido para una propiedad determinada, la declaración se considera _inválida_ y el motor CSS del navegador la ignora por completo. + +> **Advertencia:** En CSS (y otros estándares web) se ha acordado establecer como estándar la ortografía en inglés de los EE. UU. para solucionar las incertidumbres idiomáticas. Por ejemplo, _siempre_ hay que escribir `color`. Si se escribe `colour`, no funcionará. + +### Las funciones + +Si bien la mayoría de valores son palabras clave relativamente simples o valores numéricos, es posible que algunos valores tomen la forma de una función. Un ejemplo sería la función `calc()`. Esta función te permite hacer operaciones matemáticas sencillas desde tu CSS, por ejemplo: + +```html +
    La caja interior es del 90% - 30px.
    +``` + +```css +.outer { + border: 5px solid black; +} + +.box { + padding: 10px; + width: calc(90% - 30px); + background-color: rebeccapurple; + color: white; +} +``` + +Esto se traduce así: + +{{EmbedLiveSample('calc_example', '100%', 200)}} + +## + +Una función consta del nombre de la función y, a continuación, unos paréntesis entre los que se colocan los valores permitidos para esa función. En el caso del ejemplo `calc()` anterior, pedimos que el ancho de esta caja sea del 90% del ancho del bloque que la contiene, menos 30 píxeles. Esto no es algo que podamos calcular con anticipación y simplemente introducir el valor en el CSS, ya que no sabemos cuál será el 90%. Como con todos los valores, la página correspondiente del proyecto MDN tendrá ejemplos de uso para que puedas ver cómo funciona. + +Otro ejemplo serían los diversos valores para {{cssxref ("transform")}}, como `rotate()`. + +```html +
    +``` + +```css +.box { + margin: 30px; + width: 100px; + height: 100px; + background-color: rebeccapurple; + transform: rotate(0.8turn) +} +``` + +El resultado del código anterior se ve así: + +{{EmbedLiveSample('transform_example', '100%', 200)}} + +**Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se apliquen a diferentes elementos HTML:** + +- **{{cssxref("transform")}}** +- **{{cssxref ("background-image")}}, en particular a valores de gradiente** +- **{{cssxref("color")}}, en particular a valores rgb/rgba/hsl/hsla** + +## @rules + +Las [`@rules`](/es/docs/Web/CSS/At-rule) (leído "at-rules" en inglés) dan al CSS algunas instrucciones sobre cómo comportarse. Algunas `@rules` son simples, con el nombre de la regla y un valor. Por ejemplo, para importar una hoja de estilo adicional a tu hoja de estilo CSS principal, puedes usar `@import`: + +```css +@import 'styles2.css'; +``` + +Una de las `@rules` más comunes con las que te encontrarás es `@media`, que permite usar [consultas a medios](/es/docs/Web/CSS/Media_Queries) para aplicar CSS solo cuando se dan ciertas condiciones (por ejemplo, cuando la resolución de la pantalla supera un valor determinado o la anchura supera un valor concreto). + +En el CSS que se muestra a continuación, tenemos una hoja de estilo que le da al elemento `` un color de fondo rosado. Sin embargo, luego usamos `@media` para crear una sección de nuestra hoja de estilo que solo se aplicará en los navegadores con una ventana gráfica de más de 30em de ancho. Si el navegador es más ancho que 30em, el color de fondo será azul. + +```css +body { + background-color: pink; +} + +@media (min-width: 30em) { + body { + background-color: blue; + } +} +``` + +Encontrarás otras `@rules` a lo largo de estas lecciones. + +**Prueba a añadir una consulta a medios en tu CSS que cambie los estilos según el ancho de la ventana gráfica. Cambia el ancho de la ventana de tu navegador para ver el resultado.** + +## Abreviaturas + +Algunas propiedades como {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} y {{ cssxref("margin")}} se llaman **propiedades abreviadas**. Esto se debe a que permiten establecer varios valores de propiedad en una sola línea, lo que ahorra tiempo y ordena el código. + +Por ejemplo, esta línea: + +```css +/* En propiedades abreviadas con 4 valores, como margin y padding (relleno), los valores se aplican + según el orden: arriba, derecha, abajo e izquierda (en sentido horario desde la parte superior). También hay otros + tipos de abreviaturas, como las propiedades abreviadas con 2 valores que establecen el relleno/margen, + arriba/abajo, y luego izquierda/derecha */ +padding: 10px 15px 15px 5px; +``` + +Hace lo mismo que todas estas juntas: + +```css +padding-top: 10px; +padding-right: 15px; +padding-bottom: 15px; +padding-left: 5px; +``` + +Mientras que esta línea: + +```css +background: red url(bg-graphic.png) 10px 10px repeat-x fixed; +``` + +Hace lo mismo que todas estas juntas: + +```css +background-color: red; +background-image: url(bg-graphic.png); +background-position: 10px 10px; +background-repeat: repeat-x; +background-scroll: fixed; +``` + +Ahora mismo no pretendemos enseñarlos exhaustivamente: encontrarás muchos ejemplos más adelante en el curso. Te aconsejamos que busques los nombres de las propiedades abreviadas en nuestra [referencia CSS](/es/docs/Web/CSS/Reference) para obtener más información. + +**Prueba a añadir las declaraciones anteriores a tu CSS para ver cómo afecta al estilo de tu HTML. Experimenta con diferentes valores.** + +> **Advertencia:** Si bien las propiedades abreviadas a menudo permiten ahorrarte valores, luego restablecerán a sus valores iniciales cualquier valor que no incluyas. Esto asegura que se use un conjunto de valores razonable. Sin embargo, puede resultar confuso si esperas que la propiedad abreviada solo cambie los valores que has introducido. + +## Comentarios + +Al igual que con el HTML, te recomendamos que hagas comentarios en tu CSS para que te ayuden a comprender cómo funciona su código cuando vuelvas a utilizarlo al cabo de varios meses, así como para ayudar a otros que vayan a trabajar con él a entenderlo. + +Los comentarios en el CSS comienzan con `/*` y terminan con `*/`. En el bloque de código que encontrarás a continuación, hemos usado comentarios para marcar el inicio de las diferentes secciones de código. Esto es útil para ayudarnos a movernos por la base de código a medida que aumenta: puedes buscar los comentarios en tu editor de código. + +```css +/* con elementos básicos de aplicación de estilo */ +/* -------------------------------------------------------------------------------------------- */ +body { + font: 1em/150% Helvética, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + /* Prestemos especial atención al tamaño de fuente global. En una pantalla o una ventana grande, + aumentamos el tamaño de la fuente para conseguir una mejor legibilidad */ + body { + font-size: 130%; + } +} + +h1 {font-size: 1.5em;} + +/* Familiarización con algunos elementos anidados específicos en el DOM */ +/* -------------------------------------------------------------------------------------------- */ +div p, #id:first-line { + background-color: red; + border-radius: 3px; +} + +div p { + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +} +``` + +Los comentarios también son útiles para _comentar_ temporalmente ciertas partes del código con fines de prueba, por ejemplo, si tratas de encontrar qué parte de tu código causa un error. En el siguiente ejemplo, hemos comentado las reglas para el selector `.special`. + +```css +/*.special { + color: red; +}*/ + +p { + color: blue; +} +``` + +**Añade algunos comentarios al CSS para acostumbrarte a usarlos.** + +## Espacio en blanco + +Por espacio en blanco nos referimos los espacios en sí, tabuladores y retornos de carro o intros. De la misma manera que el HTML, el navegador ignora el espacio en blanco dentro del CSS. El valor del espacio en blanco es que puede mejorar la legibilidad. + +En el siguiente ejemplo, cada declaración (y el principio/fin de regla) está en una línea propia; esta es posiblemente una buena forma de escribir el CSS, ya que facilita el mantenimiento y la comprensión: + +```css +body { + font: 1em/150% Helvética, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + body { + font-size: 130%; + } +} + +h1 { + font-size: 1.5em; +} + +div p, +#id:first-line { + background-color: red; + border-radius: 3px; +} + +div p { + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +} +``` + +Podrías escribir exactamente el mismo CSS eliminando la mayoría de los espacios en blanco; este bloque de código es funcionalmente idéntico al primer ejemplo, pero seguro que estarás de acuerdo en que resulta algo más difícil de leer: + +```css +body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} +@media (min-width: 70em) { body {font-size: 130%;} } + +h1 {font-size: 1.5em;} + +div p, #id:first-line {background-color: red; border-radius: 3px;} +div p {margin: 0; padding: 1em;} +div p + p {padding-top: 0;} +``` + +La manera que elijas para disponer el código suele ser una preferencia personal, aunque cuando comiences a trabajar en equipo es posible que encuentres que el equipo ya tiene su propia guía de estilo que especifica una convención acordada a seguir. + +> **Advertencia:** Aunque los valores de las declaraciones CSS se separan por espacios, **los nombres de propiedad nunca tienen espacios**. + +Por ejemplo, las siguientes declaraciones de CSS son válidas: + +```css +margin: 0 auto; +padding-left: 10px; +``` + +Pero las siguientes no lo son: + +```css +margin: 0auto; +padding- left: 10px; +``` + +¿Ves los errores de espaciado? `0auto` no se reconoce como un valor válido para la propiedad de `margin` (`0` y `auto` son dos valores separados) y el navegador no reconoce `padding-` como una propiedad válida. El valor correcto de propiedad (`padding-left`) se ha separado por un espacio perdido. + +Debes asegurarte siempre de separar los valores distintos entre sí por al menos un espacio, pero mantén los nombres de las propiedades y los valores de las propiedades juntos. + +**Prueba a jugar con los espacios en blanco de tu CSS y observa qué es lo que se rompe y lo que no.** + +## ¿Qué sigue? + +Resulta útil entender un poco cómo el navegador toma tu HTML y tu CSS y los convierte en una página web, razón por la cual en el próximo artículo ([Cómo funciona el CSS](/es/docs/Learn/CSS/First_steps/How_CSS_works)) veremos ese proceso. + +{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} + +## En este modulo + +1. [¿Qué es el CSS?](/es/docs/Learn/CSS/First_steps/What_is_CSS) +2. [Empezar con el CSS](/es/docs/Learn/CSS/First_steps/Getting_started) +3. [Cómo se estructura el CSS](/es/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [Cómo funciona CSS](/es/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Pon en práctica tus conocimientos nuevos](/es/docs/Learn/CSS/First_steps/Styling_a_biography_page) diff --git a/files/es/learn/css/first_steps/how_css_works/index.html b/files/es/learn/css/first_steps/how_css_works/index.html deleted file mode 100644 index 4f27f94da48123..00000000000000 --- a/files/es/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Cómo funciona CSS -slug: Learn/CSS/First_steps/How_CSS_works -translation_of: Learn/CSS/First_steps/How_CSS_works -original_slug: Learn/CSS/First_steps/Como_funciona_CSS ---- -

    {{LearnSidebar}}
    - {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

    - -

    Hemos aprendido los conceptos básicos de CSS, para qué sirve y cómo escribir hojas de estilo simples. En esta lección vamos a echar un vistazo a cómo un navegador crea una página web a partir de CSS y HTML.

    - - - - - - - - - - - - -
    Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de cómo trabajar con archivos y conceptos básicos de HTML (véase Introducción a HTML).
    Objetivo:Entender los conceptos básicos de cómo el navegador analiza el CSS y el HTML y lo que sucede cuando encuentra un CSS que no entiende.
    - -

    ¿Cómo funciona realmente el CSS?

    - -

    Cuando un navegador muestra un documento, ha de combinar el contenido con la información de estilo del documento. Procesa el documento en una serie de etapas, que enumeraremos a continuación. Ten en cuenta que este es un modelo muy simplificado de lo que sucede cuando un navegador carga una página web y que cada navegador gestiona el proceso de manera diferente. Pero esto es más o menos lo que sucede.

    - -
      -
    1. El navegador carga el HTML (por ejemplo, lo recibe de la red).
      2. -
    2. Convierte el {{Glossary("HTML")}} en un {{Glossary("DOM")}} (Modelo de objetos del documento). El DOM representa el documento en la memoria del ordenador. Lo explicaremos más detalladamente en la sección siguiente.
      3. -
    3. Entonces, el navegador va a buscar la mayor parte de los recursos vinculados al documento HTML, como las imágenes y los videos incrustados... ¡y también el CSS vinculado! JavaScript aparece un poco más adelante en el proceso, pero no vamos a hablar de ello aún para evitar complicar las cosas.
      4. -
    4. El navegador analiza el CSS y ordena en diferentes «cubos» las diferentes reglas según el tipo de selector. Por ejemplo, elemento, clase, ID, y así sucesivamente. Para cada tipo de selector que encuentre, calcula qué reglas deben aplicarse y a qué nodos en el DOM se les aplica el estilo según corresponda (este paso intermedio se llama árbol de renderización).
      5. -
    5. El árbol de renderización presenta la estructura en que los nodos deben aparecer después de aplicarle las reglas.
      6. -
    6. En la pantalla se muestra el aspecto visual de la página (esta etapa se llama pintura).
      7. -
    - -

    El siguiente diagrama ofrece una visión sencilla de este proceso.

    - -

    - -

    Acerca del DOM

    - -

    Un DOM tiene una estructura en forma de árbol. Cada elemento, atributo o bloque en el lenguaje de marcado se convierte en un {{Glossary("Node/DOM","nodo DOM")}} con estructura de árbol. Los nodos se definen por su relación con otros nodos DOM. Algunos elementos son padres de nodos secundarios, y estos nodos hijos tienen hermanos.

    - -

    Comprender el DOM te ayuda a diseñar, depurar y mantener tu CSS porque en el DOM es donde tu CSS se encuentra con el contenido del documento. Cuando comiences a trabajar con las herramientas DevTools (o herramientas del desarrollador) del navegador, te moverás por el DOM mientras seleccionas elementos con el fin de ver qué reglas se aplican.

    - -

    Una representación real de un DOM

    - -

    En lugar de una explicación larga y aburrida, veamos un ejemplo para entender cómo un código HTML se convierte en DOM.

    - -

    Tomemos el siguiente código HTML:

    - -
    <p>
-  Usaremos:
-  <span>Hojas</span>
-  <span>de estilo</span>
-  <span>en cascada</span>
-</p>
-
    - -

    En el DOM, el nodo que se corresponde con nuestro elemento <p> es un padre. Sus hijos son un nodo de texto y los tres nodos correspondientes a nuestros elementos <span>. Los nodos SPAN son también los padres, y los nodos de texto sus hijos:

    - -
    P
-├─ "Usaremos:"
-├─ SPAN
-|  └─ "Hojas"
-├─ SPAN
-|  └─ "de estilo"
-└─ SPAN
-   └─ "en cascada"
-
    - -

    Así es como un navegador interpreta el código HTML anterior, interpreta el árbol DOM y luego lo muestra en el navegador, así:

    - -

    {{EmbedLiveSample('Una_representación_real_de_un_DOM', '100%', 55)}}

    - - - -

    La aplicación de CSS al DOM

    - -

    Pongamos que hemos añadido un poco de CSS a nuestro documento, para darle estilo. Una vez más, el HTML es el siguiente:

    - -
    <p>
-  Usaremos:
-  <span>Hojas</span>
-  <span>de estilo</span>
-  <span>en cascada</span>
-</p>
    - -

    Supongamos que le aplicamos el CSS siguiente:

    - -
    span {
-  border: 1px solid black;
-  background-color: lime;
-}
    - -

    El navegador analizará el código HTML y creará un DOM a partir de este. A continuación, analizará el CSS. Dado que la única regla disponible en el CSS tiene un selector span, el navegador ¡ordenará el CSS muy rápidamente! Aplicará la regla a cada uno de los tres <span>, que mostrarán en pantalla la representación visual final.

    - -

    La salida actualizada es la siguiente:

    - -

    {{EmbedLiveSample ( 'La_aplicación_de_CSS_al_DOM', '100%', 55)}}

    - -

    En nuestro artículo Depurar el CSS que encontrarás en el siguiente módulo, vamos a utilizar las herramientas DevTools del navegador para depurar posibles problemas en el CSS. También aprenderemos más sobre cómo el navegador interpreta el CSS.

    - -

    ¿Qué ocurre si un navegador encuentra CSS que no entiende?

    - -

    En una lección anterior mencionamos que no todos los navegadores implementan las novedades de CSS en el mismo momento. Además, no todo el mundo utiliza la última versión de un navegador. Dado que el CSS está en desarrollo constante y, por lo tanto, por delante de lo que los navegadores pueden reconocer, puede que te preguntes qué sucede si un navegador encuentra un selector o una declaración CSS que no reconoce.

    - -

    La respuesta es que no hace nada y simplemente pasa a la siguiente parte del CSS.

    - -

    Si un navegador analiza tus reglas y encuentra una propiedad o un valor que no entiende, lo ignora y avanza hasta la declaración siguiente. Esto sucederá si has cometido un error y has escrito mal una propiedad o un valor, o si la propiedad o el valor son demasiado nuevos y el navegador aún no los admite.

    - -

    Del mismo modo, si un navegador encuentra un selector que no entiende, lo ignorará y pasará al siguiente.

    - -

    En el siguiente ejemplo hemos utilizado la ortografía británica para la propiedad color, que invalida la propiedad porque no la reconoce. Así que el párrafo no se muestra en azul. Sin embargo, se han aplicado todos los demás estilos del CSS; solo se ha ignorado la línea que no es válida.

    - -
    -
    <p>Quiero este texto en grande, en negrita y en color azul.</p>
    - -
    p {
-  font-weight: bold;
-  colour: blue; /* Ortografía incorrecta de la propiedad color */
-  font-size: 200%;
-}
    -
    - -

    {{EmbedLiveSample('Skipping_example', '100%', 200)}}

    - -

    Este comportamiento es muy útil. Significa que puedes utilizar el CSS nuevo como una mejora, a sabiendas de que no se producirá ningún error si no se entiende: o bien el navegador entiende la característica nueva o no lo hace. Combinado con el funcionamiento del modo en cascada con el hecho de que los navegadores utilizarán la última CSS que encuentren en la hoja de estilo, cuando haya dos reglas con el mismo nivel de especificidad, también puedes ofrecer alternativas para los navegadores que no admiten el CSS nuevo.

    - -

    Esto funciona especialmente bien cuando quieres utilizar un valor que es bastante nuevo que no admiten todos los navegadores. Por ejemplo, algunos navegadores antiguos no entienden calc() como valor. Podríamos dar un valor de sustitución para el ancho de una caja en píxeles, y a continuación dar un ancho con un valor calc() de 100% - 50px. Los navegadores antiguos usarán la versión en píxeles y harán caso omiso de la indicación calc(), porque no la entienden. Los navegadores nuevos interpretarán la línea del ancho en píxeles, pero la anularán al llegar a la línea de calc() porque aparece después en la cascada.

    - -
    .box {
-  width: 500px;
-  width: calc(100% - 50px);
-}
    - -

    En lecciones posteriores veremos muchas más formas de cómo admitir navegadores diferentes.

    - -

    Y finalmente

    - -

    Casi has terminado este módulo; solo nos queda una cosa más por hacer. En el próximo artículo, pondrás en práctica tu conocimiento nuevo para cambiar el estilo de un ejemplo y probarte con un poco de CSS en el proceso.

    - -

    {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

    - -

    En este módulo

    - -
      -
    1. ¿Qué es CSS?
      2. -
    2. Empezar con CSS
      3. -
    3. Cómo se estructura el CSS
      4. -
    4. Cómo funciona el CSS
      5. -
    5. Pon en práctica tus conocimientos nuevos
      6. -
    diff --git a/files/es/learn/css/first_steps/how_css_works/index.md b/files/es/learn/css/first_steps/how_css_works/index.md new file mode 100644 index 00000000000000..47c0e62cf7f951 --- /dev/null +++ b/files/es/learn/css/first_steps/how_css_works/index.md @@ -0,0 +1,178 @@ +--- +title: Cómo funciona CSS +slug: Learn/CSS/First_steps/How_CSS_works +translation_of: Learn/CSS/First_steps/How_CSS_works +original_slug: Learn/CSS/First_steps/Como_funciona_CSS +--- +{{LearnSidebar}} +{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}} + +Hemos aprendido los conceptos básicos de CSS, para qué sirve y cómo escribir hojas de estilo simples. En esta lección vamos a echar un vistazo a cómo un navegador crea una página web a partir de CSS y HTML. + + + + + + + + + + + + +
    Prerrequisitos: + Conocimientos básicos de informática, tener el + software básico + instalado, conocimientos básicos de cómo + trabajar con archivos + y conceptos básicos de HTML (véase + Introducción a HTML). +
    Objetivo: + Entender los conceptos básicos de cómo el navegador analiza el CSS y el + HTML y lo que sucede cuando encuentra un CSS que no entiende. +
    + +## ¿Cómo funciona realmente el CSS? + +Cuando un navegador muestra un documento, ha de combinar el contenido con la información de estilo del documento. Procesa el documento en una serie de etapas, que enumeraremos a continuación. Ten en cuenta que este es un modelo muy simplificado de lo que sucede cuando un navegador carga una página web y que cada navegador gestiona el proceso de manera diferente. Pero esto es más o menos lo que sucede. + +1. El navegador carga el HTML (por ejemplo, lo recibe de la red). +2. Convierte el {{Glossary("HTML")}} en un {{Glossary("DOM")}} (_Modelo de objetos del documento_). El DOM representa el documento en la memoria del ordenador. Lo explicaremos más detalladamente en la sección siguiente. +3. Entonces, el navegador va a buscar la mayor parte de los recursos vinculados al documento HTML, como las imágenes y los videos incrustados... ¡y también el CSS vinculado! JavaScript aparece un poco más adelante en el proceso, pero no vamos a hablar de ello aún para evitar complicar las cosas. +4. El navegador analiza el CSS y ordena en diferentes «cubos» las diferentes reglas según el tipo de selector. Por ejemplo, elemento, clase, ID, y así sucesivamente. Para cada tipo de selector que encuentre, calcula qué reglas deben aplicarse y a qué nodos en el DOM se les aplica el estilo según corresponda (este paso intermedio se llama árbol de renderización). +5. El árbol de renderización presenta la estructura en que los nodos deben aparecer después de aplicarle las reglas. +6. En la pantalla se muestra el aspecto visual de la página (esta etapa se llama pintura). + +El siguiente diagrama ofrece una visión sencilla de este proceso. + +![](https://mdn.mozillademos.org/files/11781/rendering.svg) + +## Acerca del DOM + +Un DOM tiene una estructura en forma de árbol. Cada elemento, atributo o bloque en el lenguaje de marcado se convierte en un {{Glossary("Node/DOM","nodo DOM")}} con estructura de árbol. Los nodos se definen por su relación con otros nodos DOM. Algunos elementos son padres de nodos secundarios, y estos nodos hijos tienen hermanos. + +Comprender el DOM te ayuda a diseñar, depurar y mantener tu CSS porque en el DOM es donde tu CSS se encuentra con el contenido del documento. Cuando comiences a trabajar con las herramientas DevTools (o herramientas del desarrollador) del navegador, te moverás por el DOM mientras seleccionas elementos con el fin de ver qué reglas se aplican. + +## Una representación real de un DOM + +En lugar de una explicación larga y aburrida, veamos un ejemplo para entender cómo un código HTML se convierte en DOM. + +Tomemos el siguiente código HTML: + +```html +

    + Usaremos: + Hojas + de estilo + en cascada +

    +``` + +En el DOM, el nodo que se corresponde con nuestro elemento `

    ` es un padre. Sus hijos son un nodo de texto y los tres nodos correspondientes a nuestros elementos ``. Los nodos `SPAN` son también los padres, y los nodos de texto sus hijos: + + P + ├─ "Usaremos:" + ├─ SPAN + | └─ "Hojas" + ├─ SPAN + | └─ "de estilo" + └─ SPAN + └─ "en cascada" + +Así es como un navegador interpreta el código HTML anterior, interpreta el árbol DOM y luego lo muestra en el navegador, así: + +{{EmbedLiveSample('Una_representación_real_de_un_DOM', '100%', 55)}} + +```css hidden +p {margin:0;} +``` + +## La aplicación de CSS al DOM + +Pongamos que hemos añadido un poco de CSS a nuestro documento, para darle estilo. Una vez más, el HTML es el siguiente: + +```html +

    + Usaremos: + Hojas + de estilo + en cascada +

    +``` + +Supongamos que le aplicamos el CSS siguiente: + +```css +span { + border: 1px solid black; + background-color: lime; +} +``` + +El navegador analizará el código HTML y creará un DOM a partir de este. A continuación, analizará el CSS. Dado que la única regla disponible en el CSS tiene un selector `span`, el navegador ¡ordenará el CSS muy rápidamente! Aplicará la regla a cada uno de los tres ``, que mostrarán en pantalla la representación visual final. + +La salida actualizada es la siguiente: + +{{EmbedLiveSample ( 'La_aplicación_de_CSS_al_DOM', '100%', 55)}} + +En nuestro artículo [Depurar el CSS](/es/docs/Learn/CSS/Building_blocks/Depurar_el_CSS) que encontrarás en el siguiente módulo, vamos a utilizar las herramientas DevTools del navegador para depurar posibles problemas en el CSS. También aprenderemos más sobre cómo el navegador interpreta el CSS. + +## ¿Qué ocurre si un navegador encuentra CSS que no entiende? + +En una [lección anterior](/es/docs/Learn/CSS/First_steps/Qu%C3%A9_es_CSS#Soporte_del_navegador) mencionamos que no todos los navegadores implementan las novedades de CSS en el mismo momento. Además, no todo el mundo utiliza la última versión de un navegador. Dado que el CSS está en desarrollo constante y, por lo tanto, por delante de lo que los navegadores pueden reconocer, puede que te preguntes qué sucede si un navegador encuentra un selector o una declaración CSS que no reconoce. + +La respuesta es que no hace nada y simplemente pasa a la siguiente parte del CSS. + +Si un navegador analiza tus reglas y encuentra una propiedad o un valor que no entiende, lo ignora y avanza hasta la declaración siguiente. Esto sucederá si has cometido un error y has escrito mal una propiedad o un valor, o si la propiedad o el valor son demasiado nuevos y el navegador aún no los admite. + +Del mismo modo, si un navegador encuentra un selector que no entiende, lo ignorará y pasará al siguiente. + +En el siguiente ejemplo hemos utilizado la ortografía británica para la propiedad color, que invalida la propiedad porque no la reconoce. Así que el párrafo no se muestra en azul. Sin embargo, se han aplicado todos los demás estilos del CSS; solo se ha ignorado la línea que no es válida. + +```html +

    Quiero este texto en grande, en negrita y en color azul.

    +``` + +```css +p { + font-weight: bold; + colour: blue; /* Ortografía incorrecta de la propiedad color */ + font-size: 200%; +} +``` + +{{EmbedLiveSample('Skipping_example', '100%', 200)}} + +Este comportamiento es muy útil. Significa que puedes utilizar el CSS nuevo como una mejora, a sabiendas de que no se producirá ningún error si no se entiende: o bien el navegador entiende la característica nueva o no lo hace. Combinado con el funcionamiento del modo en cascada con el hecho de que los navegadores utilizarán la última CSS que encuentren en la hoja de estilo, cuando haya dos reglas con el mismo nivel de especificidad, también puedes ofrecer alternativas para los navegadores que no admiten el CSS nuevo. + +Esto funciona especialmente bien cuando quieres utilizar un valor que es bastante nuevo que no admiten todos los navegadores. Por ejemplo, algunos navegadores antiguos no entienden `calc()` como valor. Podríamos dar un valor de sustitución para el ancho de una caja en píxeles, y a continuación dar un ancho con un valor `calc()` de `100% - 50px`. Los navegadores antiguos usarán la versión en píxeles y harán caso omiso de la indicación `calc()`, porque no la entienden. Los navegadores nuevos interpretarán la línea del ancho en píxeles, pero la anularán al llegar a la línea de `calc()` porque aparece después en la cascada. + +```css +.box { + width: 500px; + width: calc(100% - 50px); +} +``` + +En lecciones posteriores veremos muchas más formas de cómo admitir navegadores diferentes. + +## Y finalmente + +Casi has terminado este módulo; solo nos queda una cosa más por hacer. En el próximo artículo, [pondrás en práctica tu conocimiento nuevo](/es/docs/Learn/CSS/First_steps/Using_your_new_knowledge) para cambiar el estilo de un ejemplo y probarte con un poco de CSS en el proceso. + +{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}} + +## En este módulo + +1. [¿Qué es CSS?](/es/docs/Learn/CSS/First_steps/What_is_CSS) +2. [Empezar con CSS](/es/docs/Learn/CSS/First_steps/Getting_started) +3. [Cómo se estructura el CSS](/es/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [Cómo funciona el CSS](/es/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Pon en práctica tus conocimientos nuevos](/es/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/es/learn/css/first_steps/index.html b/files/es/learn/css/first_steps/index.html deleted file mode 100644 index fcb84ae24ebe89..00000000000000 --- a/files/es/learn/css/first_steps/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Primeros pasos en CSS -slug: Learn/CSS/First_steps -tags: - - Aprender - - CSS - - Principiante - - modulo - - primeros pasos -translation_of: Learn/CSS/First_steps ---- -
    {{LearnSidebar}}
    - -

    CSS (Cascading Style Sheets - en español Hojas de Estilo en Cascadas) es usado para darle estilo y diseño a las páginas Web — por ejemplo, para cambiar la fuente de letra, color, tamaño y el espaciado de tu contenido; dividir en múltiples columnas, o agregar animaciones y otras propiedades decorativas. Este modulo provee un inicio suave para tu ruta de aprendizaje hacia el dominio de CSS con su funcionamiento básico, como luce su sintaxis, y cómo puedes comenzar a utilizarlo y añadir estilo a HTML.

    - -

    Prerrequisitos

    - -

    Antes de comenzar este módulo, deberías:

    - -
      -
    1. Estar familiarizado y tener conocimiento básico sobre el uso de computadores e internet básico (p.ej. navegando, consumiendo contenido en Internet.)
      2. -
    2. Un entorno básico de trabajo configurado, como se detalla en la sección de Instalación de software básico, y saber como crear y administrar archivos, o lo puedes ver en el módulo Manejando los archivos.
      3. -
    3. Conocimiento básico de HTML, como se muestra en Introducción a HTML.
      4. -
    - -
    -

    Nota: Si estás trabajando en un computador/tabla/otro dispositivo en el cual no puedes crear o almacenar tus propios archivos, podrías probar (la mayoría) de los ejemplos de código en un editor de código en línea como JSBin o Thimble.

    -
    - -

    Guías

    - -

    Este módulo contiene los siguientes artículos, que te guiarán a través de toda la teoría básica de CSS, y te proveerá oportunidades para comprobar algunas de tus habilidades.

    - -
    -
    ¿Qué es CSS?
    -
    {{Glossary("CSS")}} (Cascading Style Sheets) te permite crear páginas Webs atractivas, pero ¿Cómo funciona por debajo? Este artículo explica que es CSS, con ejemplos simples de sintaxis, y cubre algunos temas clave sobre este lenguaje.
    -
    Empezar con CSS
    -
    En este artículo se tomarná un documento HTML simple y se le aplicará CSS, aprendiendo algunas cosas prácticas mientras lo haces.
    -
    Como se estructura CSS
    -
    Ahora que sabes que es CSS y de su uso básico, es momento de sumergirnos un poco más dentro de la estructura del propio lenguaje. Ya hemos conocido muchos de los conceptos discutidos aquí; puedes volver a este resumen en el futuro si necesitas reforzar conocimientos o si tienes dudas sobre algun concepto.
    -
    Como trabaja CSS
    -
    Hemos aprendido lo básico de CSS, para que es y como escribir una hoja de estilo sencilla. En esta lección echaremos un vistazo a como los navegadores web reciben CSS y HTML y los convierten en una página web.
    -
    Usando tu nuevo conocimiento
    -
    Con las cosas que has aprendido en las últimas lecciones encontrarás que usando CSS puedes editar el formato de documentos de texto simple, para agregarles tu propio estilo. Este artículo te da la oportunidad de hacerlo.
    -
    - -

    Ver también

    - -
    -
    Conocimiento práctico intermedio Web 1: Introducción a CSS (en Inglés)
    -
    Un excelente curso de Mozilla foundation que explora y prueba muchas de las habilidades de las que se habla en el módulo de Introducción al CSS. Aprende acerca de como agregar estilo a los elementos HTML en una página web, selectores CSS, atributos, y valores.
    -
    diff --git a/files/es/learn/css/first_steps/index.md b/files/es/learn/css/first_steps/index.md new file mode 100644 index 00000000000000..ba83c68b930e4e --- /dev/null +++ b/files/es/learn/css/first_steps/index.md @@ -0,0 +1,44 @@ +--- +title: Primeros pasos en CSS +slug: Learn/CSS/First_steps +tags: + - Aprender + - CSS + - Principiante + - modulo + - primeros pasos +translation_of: Learn/CSS/First_steps +--- +{{LearnSidebar}} + +CSS (Cascading Style Sheets - en español Hojas de Estilo en Cascadas) es usado para darle estilo y diseño a las páginas Web — por ejemplo, para cambiar la fuente de letra, color, tamaño y el espaciado de tu contenido; dividir en múltiples columnas, o agregar animaciones y otras propiedades decorativas. Este modulo provee un inicio suave para tu ruta de aprendizaje hacia el dominio de CSS con su funcionamiento básico, como luce su sintaxis, y cómo puedes comenzar a utilizarlo y añadir estilo a HTML. + +## Prerrequisitos + +Antes de comenzar este módulo, deberías: + +1. Estar familiarizado y tener conocimiento básico sobre el uso de computadores e internet básico (p.ej. navegando, consumiendo contenido en Internet.) +2. Un entorno básico de trabajo configurado, como se detalla en la sección de [Instalación de software básico](https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico), y saber como crear y administrar archivos, o lo puedes ver en el módulo [Manejando los archivos](https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos). +3. Conocimiento básico de HTML, como se muestra en [Introducción a HTML](https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML). + +> **Nota:** Si estás trabajando en un computador/tabla/otro dispositivo en el cual no puedes crear o almacenar tus propios archivos, podrías probar (la mayoría) de los ejemplos de código en un editor de código en línea como [JSBin](http://jsbin.com/) o [Thimble](https://thimble.mozilla.org/). + +## Guías + +Este módulo contiene los siguientes artículos, que te guiarán a través de toda la teoría básica de CSS, y te proveerá oportunidades para comprobar algunas de tus habilidades. + +- [¿Qué es CSS?](/es/docs/Learn/CSS/First_steps/Qu%C3%A9_es_CSS) + - : **{{Glossary("CSS")}}** (Cascading Style Sheets) te permite crear páginas Webs atractivas, pero ¿Cómo funciona por debajo? Este artículo explica que es CSS, con ejemplos simples de sintaxis, y cubre algunos temas clave sobre este lenguaje. +- [Empezar con CSS](/es/docs/Learn/CSS/First_steps/Comenzando_CSS) + - : En este artículo se tomarná un documento HTML simple y se le aplicará CSS, aprendiendo algunas cosas prácticas mientras lo haces. +- [Como se estructura CSS](/es/docs/Learn/CSS/First_steps/Como_se_estructura_CSS) + - : Ahora que sabes que es CSS y de su uso básico, es momento de sumergirnos un poco más dentro de la estructura del propio lenguaje. Ya hemos conocido muchos de los conceptos discutidos aquí; puedes volver a este resumen en el futuro si necesitas reforzar conocimientos o si tienes dudas sobre algun concepto. +- [Como trabaja CSS](/es/docs/Learn/CSS/First_steps/Como_funciona_CSS) + - : Hemos aprendido lo básico de CSS, para que es y como escribir una hoja de estilo sencilla. En esta lección echaremos un vistazo a como los navegadores web reciben CSS y HTML y los convierten en una página web. +- [Usando tu nuevo conocimiento](/es/docs/Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento) + - : Con las cosas que has aprendido en las últimas lecciones encontrarás que usando CSS puedes editar el formato de documentos de texto simple, para agregarles tu propio estilo. Este artículo te da la oportunidad de hacerlo. + +## Ver también + +- [Conocimiento práctico intermedio Web 1: Introducción a CSS (en Inglés)](https://teach.mozilla.org/activities/intermediate-web-lit/) + - : Aprende acerca de como agregar estilo a los elementos HTML en una página web, selectores CSS, atributos, y valores. diff --git a/files/es/learn/css/first_steps/styling_a_biography_page/index.html b/files/es/learn/css/first_steps/styling_a_biography_page/index.html deleted file mode 100644 index ece3c0f90d6c2c..00000000000000 --- a/files/es/learn/css/first_steps/styling_a_biography_page/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Usa tu nuevo conocimiento -slug: Learn/CSS/First_steps/Styling_a_biography_page -tags: - - Aprendizaje - - CSS - - Principiante -translation_of: Learn/CSS/First_steps/Using_your_new_knowledge -original_slug: Learn/CSS/First_steps/Using_your_new_knowledge ---- -

    {{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

    - -

    Con las cosas que has aprendido en las últimas lecciones, puedes darle formato a documentos de texto simple utilizando CSS para agregar tu propio estilo a ellos. Esta evaluación te da una posibilidad de hacer eso.

    - - - - - - - - - - - - -
    Prerrequisitos:Antes de intentar esta evaluación, deberías haber trabajado a través del módulo de CSS básico, y también comprender HTML básico (estudia la Introducción a HTML).
    Objetivo:Utilizar algún CSS y probar conocimiento recién adquirido.
    - -

    Punto de partida

    - -

    Puedes trabajar en el editor en vivo más abajo, o puedes descargar el punto de partida para trabajar con tu propio editor. Esta es una página HTML, con el inicio del CSS en el <head> del documento. Si prefieres, puedes mover este CSS a un archivo separado cuando crees el ejemplo en tu computador. Alternativamente, puedes usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.

    - -
    -

    Nota: Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

    -
    - -

    Trabajando con CSS

    - -

    Los siguientes ejemplos muestran una biografía, que ha sido estilizada usando CSS. Las propiedades CSS que se han utilizado son las siguientes - cada una enlaza a su página de propiedades en MDN, que te entregará más ejemplos de su uso:

    - -
      -
    • {{cssxref("font-family")}}
      • -
    • {{cssxref("color")}}
      • -
    • {{cssxref("border-bottom")}}
      • -
    • {{cssxref("font-weight")}}
      • -
    • {{cssxref("font-size")}}
      • -
    • {{cssxref("text-decoration")}}
      • -
    - -

    Se ha usado una mezcla de selectores, elementos de estilo como <h1> y <h2>, y también una clase para el título del trabajo.

    - -

    Usa CSS para cambiar el aspecto de esta biografía, cambiando los valores de las propiedades iniciales.

    - -
      -
    1. Coloca en rosado el nivel <h1>, usando el color CSS hotpink.
      2. -
    2. Da al encabezado un {{cssxref("border-bottom")}} de 10px con puntos (dotted), que use el color CSS purple.
      3. -
    3. Coloca en cursiva el <h2>.
      4. -
    4. Al ul utilizado para los detalles de contacto un {{cssxref("background-color")}} #eeeeee, y un {{cssxref("border")}} de 5px solid purple. Usa algo de {{cssxref("padding")}} para empujar el texto lejos del borde.
      5. -
    5. Cambia los enlaces a verde cuando pase el cursor sobre ellos.
      6. -
    - -

    Deberías conseguir algo parecido a esta página:

    - -

    Screenshot of how the example should look after completing the assessment.

    - -

    Posteriormente intenta buscar algunas propiedades no mencionadas en esta página en la referencia de CSS de MDN y ¡arriésgate!.

    - -

    Recuerda que no existen respuestas equivocadas acá - En esta etapa en tu aprendizaje puedes tener un poco de diversión.

    - -

    {{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}}

    - -

    Evaluación o ayuda adicional

    - -

    Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

    - -
      -
    1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch.
      2. -
    2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: -
        -
      • Un título descriptivo como "Requiero evaluacion para Primeros pasos en CSS".
        • -
      • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
        • -
      • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
        • -
      • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
        • -
      -
      3. -
    - -

    ¿Qué sigue?

    - -

    Felicitaciones por completar este primer modulo!. Deberías tener un buen entendimiento general de CSS, y ser capaz de comprender bastante de los que está sucediendo en una hoja de estilo. En el módulo siguiente, bloques de construccion CSS, revisaremos en profundidad algunas áreas clave.

    - -

    {{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

    - -

    En este módulo

    - -
      -
    1. ¿Qué es CSS?
      2. -
    2. Empezando con CSS
      3. -
    3. Cómo se estructura el CSS
      4. -
    4. Cómo funciona CSS
      5. -
    5. Usa tu nuevo conocimiento
      6. -
    diff --git a/files/es/learn/css/first_steps/styling_a_biography_page/index.md b/files/es/learn/css/first_steps/styling_a_biography_page/index.md new file mode 100644 index 00000000000000..ea2556d442da5b --- /dev/null +++ b/files/es/learn/css/first_steps/styling_a_biography_page/index.md @@ -0,0 +1,95 @@ +--- +title: Usa tu nuevo conocimiento +slug: Learn/CSS/First_steps/Styling_a_biography_page +tags: + - Aprendizaje + - CSS + - Principiante +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +original_slug: Learn/CSS/First_steps/Using_your_new_knowledge +--- +{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} + +Con las cosas que has aprendido en las últimas lecciones, puedes darle formato a documentos de texto simple utilizando CSS para agregar tu propio estilo a ellos. Esta evaluación te da una posibilidad de hacer eso. + + + + + + + + + + + + +
    Prerrequisitos: + Antes de intentar esta evaluación, deberías haber trabajado a través del + módulo de CSS básico, y también comprender HTML básico (estudia la + Introducción a HTML). +
    Objetivo:Utilizar algún CSS y probar conocimiento recién adquirido.
    + +## Punto de partida + +Puedes trabajar en el editor en vivo más abajo, o puedes descargar el punto de partida para trabajar con tu propio editor. Esta es una página HTML, con el inicio del CSS en el `` del documento. Si prefieres, puedes mover este CSS a un archivo separado cuando crees el ejemplo en tu computador. Alternativamente, puedes usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas. + +> **Nota:** Si te atascas, pide ayuda — mira la sección [Evaluación o ayuda adicional](/es/docs/Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces#Evaluaci%C3%B3n_o_ayuda_adicional) al final de esta página. + +## Trabajando con CSS + +Los siguientes ejemplos muestran una biografía, que ha sido estilizada usando CSS. Las propiedades CSS que se han utilizado son las siguientes - cada una enlaza a su página de propiedades en MDN, que te entregará más ejemplos de su uso: + +- {{cssxref("font-family")}} +- {{cssxref("color")}} +- {{cssxref("border-bottom")}} +- {{cssxref("font-weight")}} +- {{cssxref("font-size")}} +- {{cssxref("text-decoration")}} + +Se ha usado una mezcla de selectores, elementos de estilo como `

    ` y `

    `, y también una clase para el título del trabajo. + +Usa CSS para cambiar el aspecto de esta biografía, cambiando los valores de las propiedades iniciales. + +1. Coloca en rosado el nivel `

    `, usando el color CSS `hotpink`. +2. Da al encabezado un {{cssxref("border-bottom")}} de 10px con puntos (`dotted`), que use el color CSS `purple`. +3. Coloca en cursiva el `

    `. +4. Al `ul` utilizado para los detalles de contacto un {{cssxref("background-color")}} `#eeeeee`, y un {{cssxref("border")}} de `5px solid purple`. Usa algo de {{cssxref("padding")}} para empujar el texto lejos del borde. +5. Cambia los enlaces a verde cuando pase el cursor sobre ellos. + +Deberías conseguir algo parecido a esta página: + +![Screenshot of how the example should look after completing the assessment.](https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png) + +Posteriormente intenta buscar algunas propiedades no mencionadas en esta página en la [referencia de CSS de MDN](/es/docs/Web/CSS/Reference) y ¡arriésgate!. + +Recuerda que no existen respuestas equivocadas acá - En esta etapa en tu aprendizaje puedes tener un poco de diversión. + +{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} + +## Evaluación o ayuda adicional + +Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda: + +1. Pon tu trabajo en un editor en línea con capacidad de compartir como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/). +2. Escribe una publicación solicitando evaluacion y/o ayuda en el [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn). Tu publicación debería incluir: + + - Un título descriptivo como "Requiero evaluacion para Primeros pasos en CSS". + - Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación. + - Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código. + - Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda. + +## ¿Qué sigue? + +Felicitaciones por completar este primer modulo!. Deberías tener un buen entendimiento general de CSS, y ser capaz de comprender bastante de los que está sucediendo en una hoja de estilo. En el módulo siguiente, [bloques de construccion CSS](/es/docs/Learn/CSS/Building_blocks), revisaremos en profundidad algunas áreas clave. + +{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} + +## En este módulo + +1. [¿Qué es CSS?](/es/docs/Web/CSS/Como_iniciar/Que_es_CSS) +2. [Empezando con CSS](/es/docs/Learn/CSS/First_steps/Comenzando_CSS) +3. [Cómo se estructura el CSS](/es/docs/Learn/CSS/First_steps/Como_se_estructura_CSS) +4. [Cómo funciona CSS](/es/docs/Learn/CSS/First_steps/Como_funciona_CSS) +5. [Usa tu nuevo conocimiento](/es/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/es/learn/css/first_steps/what_is_css/index.html b/files/es/learn/css/first_steps/what_is_css/index.html deleted file mode 100644 index ce2f8f6a44a57a..00000000000000 --- a/files/es/learn/css/first_steps/what_is_css/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: ¿Qué es el CSS? -slug: Learn/CSS/First_steps/What_is_CSS -tags: - - Beginner - - CSS - - Introduction to CSS - - Learn - - Modules - - Specifications - - Syntax -translation_of: Learn/CSS/First_steps/What_is_CSS -original_slug: Learn/CSS/First_steps/Qué_es_CSS ---- -
    {{LearnSidebar}}
    - -
    {{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
    - -

    Las hojas de estilo en cascada ({{Glossary("CSS")}}, cascading style sheets) permiten crear páginas web atractivas. Pero ¿cómo funcionan realmente? En este artículo explicaremos qué es el CSS con un ejemplo de sintaxis sencillo y describiremos algunos términos clave sobre este lenguaje.

    - - - - - - - - - - - - -
    Prerrequisitos:Conocimientos básicos de informática, tener instalado el software básico, conocimientos básicos de cómo trabajar con archivos y nociones de HTML (véase Introducción al HTML).
    Objetivo:Aprender qué es CSS.
    - -

    En el módulo Introducción al HTML, exponemos qué es el HTML y cómo se usa para definir documentos destinados a leerse en un navegador web. Los títulos se verán más grandes que el texto y los párrafos empezarán en una línea nueva y habrá un espacio entre ellos. Los enlaces aparecerán en un color diferente y subrayados para distinguirlos del resto del texto. Vienen predeterminados por el navegador y, en la práctica, son estilos muy básicos que el navegador aplica al HTML para asegurarse, básicamente, de que sean legibles incluso si el autor de la página no especifica un estilo explícito.

    - -

    Los estilos predeterminados utilizados por el navegador

    - -

    Sin embargo, Internet sería un lugar muy aburrido si todas las páginas web se vieran así. Usando CSS se pueden controlar con precisión cómo se ven los elementos HTML en el navegador, que presentará para las etiquetas de marcado el diseño que cada uno desee.

    - -

    ¿Para qué sirve el CSS?

    - -

    Como hemos mencionado, el CSS es un lenguaje informático que especifica cómo se presentan los documentos a los usuarios: cómo se diseñan, compaginan, etc.

    - -

    Un documento suele ser un archivo de texto estructurado con un lenguaje de marcado: {{Glossary("HTML")}} es el más común, pero también existen otros como {{Glossary("SVG")}} o {{Glossary("XML")}}.

    - -

    Presentar un documento a un usuario significa convertirlo en un formulario que el público pueda utilizar. Los {{Glossary("Navegador", "navegadores")}}, como por ejemplo {{Glossary("Mozilla Firefox", "Firefox")}}, {{Glossary("Google Chrome", "Chrome")}} o {{Glossary("Microsoft Edge", "Edge")}}, están diseñados para presentar documentos visualmente en una pantalla de ordenador, un proyector o una impresora.

    - -
    -

    Nota: Un navegador también recibe el nombre de {{Glossary("Agente de usuario", "agente de usuario")}}, que consiste en un programa informático que representa a una persona dentro del sistema. Los navegadores son el modelo principal de agente de usuario en el que pensamos cuando hablamos de CSS, pero no son el único. Hay otros documentos de usuario disponibles, como los que convierten documentos HTML y CSS en PDF para imprimir.

    -
    - -

    El CSS se puede usar para estilos de texto muy básicos como, por ejemplo, cambiar el color y el tamaño de los encabezados y los enlaces. Se puede utilizar para crear un diseño, como podría ser convertir una columna de texto en una composición con un área de contenido principal y una barra lateral para información relacionada. Incluso se puede usar para crear efectos de animación. Echa un vistazo a los enlaces de este párrafo para ver ejemplos específicos.

    - -

    Sintaxis del CSS

    - -

    El CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web. Por ejemplo: «Quiero que el encabezado principal de mi página se muestre en letras grandes de color rojo».

    - -

    El código siguiente muestra una regla CSS muy simple que proporcionaría el estilo descrito en el párrafo anterior:

    - -
    h1 {
-    color: red;
-    font-size: 5em;
-}
    - -

    La regla se abre con un {{Glossary("CSS Selector", "selector")}}. Este selecciona el elemento HTML que vamos a diseñar. En este caso, diseñaremos encabezados de nivel uno ({{htmlelement ("h1")}}).

    - -

    Luego tenemos un conjunto de llaves { }. Entre estas habrá una o más declaraciones, que tomarán la forma de pares de propiedad y valor. Cada par especifica cada una de las propiedades de los elementos seleccionados y el valor que queremos dar a esa propiedad.

    - -

    Antes de los dos puntos, tenemos la propiedad; y después, el valor. Las {{Glossary("property/CSS", "propiedades")}} CSS admiten diferentes valores, dependiendo de qué propiedad se esté especificando. En el ejemplo anterior, tenemos la propiedad color, que puede tomar varios valores de color. También tenemos la propiedad de font-size, que puede tomar varias unidades de tamaño como valor.

    - -

    Una hoja de estilo CSS contendrá muchas de estas reglas, escritas una tras otra.

    - -
    h1 {
-    color: red;
-    font-size: 5em;
-}
-
-p {
-    color: black;
-}
    - -

    Algunos valores se aprenden rápidamente, mientras que otros deberán buscarse. Las páginas de propiedades individuales que hay en el proyecto MDN proporcionan una forma rápida de buscar propiedades y sus valores en caso de olvidarlos o desear saber qué más se puede usar como valor.

    - -
    -

    Nota: Puedes encontrar enlaces a todas las páginas de las propiedades CSS (junto con otras características CSS) enumeradas en la referencia CSS del proyecto MDN. Alternativamente, deberías acostumbrarte a buscar «mdn css-feature-name» en tu motor de búsqueda favorito siempre que necesites obtener más información sobre una función CSS. Por ejemplo, intenta buscar «mdn color» y «mdn font-size».

    -
    - -

    Módulos CSS

    - -

    Como hay tantas cosas que se podrían diseñar usando CSS, el lenguaje se divide en módulos. Verás referencias a estos módulos a medida que explores en MDN y observarás que muchas de las páginas de documentación están organizadas en torno a un módulo en particular. Por ejemplo, puedes echar un vistazo a la referencia MDN del módulo Fondos y bordes para averiguar cuál es su propósito, qué otras propiedades y características diferentes contiene. También encontrarás enlaces a la especificación CSS que define la tecnología (ver más abajo).

    - -

    En esta fase, no debes preocuparte demasiado sobre cómo se estructura el CSS, sin embargo, puede facilitarte la búsqueda de información si, por ejemplo, sabes que es probable que cierta propiedad se encuentre entre otras similares y, por lo tanto, en la misma especificación.

    - -

    Volvamos al módulo de Fondos y bordes para un ejemplo específico: puedes pensar que tiene lógica que las propiedades background-color y border-color se definan en este módulo. Y llevas toda la razón.

    - -

    Especificaciones CSS

    - -

    Todas las tecnologías de estándares web (HTML, CSS, JavaScript, etc.) se definen en extensos documentos denominados especificaciones, publicados por organizaciones de estándares (como {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} o {{glossary("Khronos")}}) que definen con precisión cómo se supone que deben comportarse esas tecnologías.

    - -

    El caso de CSS no es diferente: lo desarrolla un grupo del W3C llamado CSS Working Group. Este grupo está compuesto por representantes de proveedores de navegadores y otras compañías interesadas en CSS. También hay otras personas, conocidas como expertos invitados, que actúan como voces independientes y no están vinculados a ninguna organización.

    - -

    El CSS Working Group desarrolla o especifica características nuevas del CSS. Algunas veces lo hacen porque un navegador en particular está interesado en alguna capacidad, otras porque los diseñadores y desarrolladores web piden una característica, y otras porque el grupo ha identificado un requisito. El CSS está en desarrollo constante y todos los días presenta nuevas características disponibles. Sin embargo, un elemento clave sobre el CSS es que toda la comunidad se esfuerza mucho en no cambiar nunca nada que pueda perjudicar los sitios web antiguos. ¡Un sitio web creado en el año 2000, que utiliza el poco CSS disponible que había en ese momento, aún debería poder utilizarse hoy en día!

    - -

    Como recién llegado al CSS, es probable que encuentres las especificaciones abrumadoras: están destinadas a que los ingenieros las utilicen para implementar soporte de sus características en los agentes de usuario en que trabajan, no para que lo lean los desarrolladores web para comprender el CSS. Muchos desarrolladores experimentados preferirán consultar la documentación disponible en MDN u otros tutoriales. Sin embargo, vale la pena saber que existen y comprender la relación que hay entre el CSS que estás utilizando, el soporte del navegador (ver más abajo) y las especificaciones.

    - -

    Soporte del navegador

    - -

    Una vez se ha especificado el CSS, solo es útil en el desarrollo de páginas web si uno o más navegadores lo han implementado. Esto significa que el código se ha escrito para convertir las instrucciones que se especifican en nuestro archivo CSS en algo que se pueda mostrar en pantalla. Veremos este proceso más en profundidad en el artículo Cómo funciona el CSS. Es inusual que todos los navegadores puedan implementar una misma característica al mismo tiempo, por lo que suele haber una brecha en la que se pueden usar algunas partes del CSS en algunos navegadores pero no en otros. Por este motivo, es útil poder verificar el estado de implementación. En cada una de las páginas de propiedades que hay en la MDN se puede ver el estado de la propiedad de interés, por lo que se puede saber si será posible utilizarla en un sitio web.

    - -

    Lo que sigue es el gráfico de datos de compatibilidad para la propiedad CSS font-family.

    - -

    {{Compat("css.properties.font-family")}}

    - -

    ¿Qué viene ahora?

    - -

    Ahora que comprendes mínimamente qué es el CSS, pasemos a Comenzar con CSS, donde puedes empezar a escribir algo de CSS tú mismo.

    - -

    {{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

    - -

    En este módulo

    - -
      -
    1. ¿Qué es el CSS?
      2. -
    2. Comenzar con CSS
      3. -
    3. Cómo se estructura el CSS
      4. -
    4. Cómo funciona el CSS
      5. -
    5. Pon en práctica tus conocimientos nuevos
      6. -
    diff --git a/files/es/learn/css/first_steps/what_is_css/index.md b/files/es/learn/css/first_steps/what_is_css/index.md new file mode 100644 index 00000000000000..46dcb29cb72f32 --- /dev/null +++ b/files/es/learn/css/first_steps/what_is_css/index.md @@ -0,0 +1,138 @@ +--- +title: ¿Qué es el CSS? +slug: Learn/CSS/First_steps/What_is_CSS +tags: + - Beginner + - CSS + - Introduction to CSS + - Learn + - Modules + - Specifications + - Syntax +translation_of: Learn/CSS/First_steps/What_is_CSS +original_slug: Learn/CSS/First_steps/Qué_es_CSS +--- +{{LearnSidebar}}{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}} + +Las hojas de estilo en cascada (**{{Glossary("CSS")}}**, cascading style sheets) permiten crear páginas web atractivas. Pero ¿cómo funcionan realmente? En este artículo explicaremos qué es el CSS con un ejemplo de sintaxis sencillo y describiremos algunos términos clave sobre este lenguaje. + + + + + + + + + + + + +
    Prerrequisitos: + Conocimientos básicos de informática, + tener instalado el software básico, conocimientos básicos de cómo + trabajar con archivos + y nociones de HTML (véase + Introducción al HTML). +
    Objetivo:Aprender qué es CSS.
    + +En el módulo [Introducción al HTML](/es/docs/Learn/HTML/Introduccion_a_HTML), exponemos qué es el HTML y cómo se usa para definir documentos destinados a leerse en un navegador web. Los títulos se verán más grandes que el texto y los párrafos empezarán en una línea nueva y habrá un espacio entre ellos. Los enlaces aparecerán en un color diferente y subrayados para distinguirlos del resto del texto. Vienen predeterminados por el navegador y, en la práctica, son estilos muy básicos que el navegador aplica al HTML para asegurarse, básicamente, de que sean legibles incluso si el autor de la página no especifica un estilo explícito. + +![Los estilos predeterminados utilizados por el navegador](https://mdn.mozillademos.org/files/16493/html-example.png) + +Sin embargo, Internet sería un lugar muy aburrido si todas las páginas web se vieran así. Usando CSS se pueden controlar con precisión cómo se ven los elementos HTML en el navegador, que presentará para las etiquetas de marcado el diseño que cada uno desee. + +## ¿Para qué sirve el CSS? + +Como hemos mencionado, el CSS es un lenguaje informático que especifica cómo se presentan los documentos a los usuarios: cómo se diseñan, compaginan, etc. + +Un **documento** suele ser un archivo de texto estructurado con un lenguaje de marcado: {{Glossary("HTML")}} es el más común, pero también existen otros como {{Glossary("SVG")}} o {{Glossary("XML")}}. + +**Presentar** un documento a un usuario significa convertirlo en un formulario que el público pueda utilizar. Los {{Glossary("Navegador", "navegadores")}}, como por ejemplo {{Glossary("Mozilla Firefox", "Firefox")}}, {{Glossary("Google Chrome", "Chrome")}} o {{Glossary("Microsoft Edge", "Edge")}}, están diseñados para presentar documentos visualmente en una pantalla de ordenador, un proyector o una impresora. + +> **Nota:** Un navegador también recibe el nombre de {{Glossary("Agente de usuario", "agente de usuario")}}, que consiste en un programa informático que representa a una persona dentro del sistema. Los navegadores son el modelo principal de agente de usuario en el que pensamos cuando hablamos de CSS, pero no son el único. Hay otros documentos de usuario disponibles, como los que convierten documentos HTML y CSS en PDF para imprimir. + +El CSS se puede usar para estilos de texto muy básicos como, por ejemplo, cambiar el [color](/es/docs/Web/CSS/color_value) y el [tamaño](/es/docs/Web/CSS/font-size) de los encabezados y los enlaces. Se puede utilizar para crear un diseño, como podría ser [convertir una columna de texto en una composición](/es/docs/Web/CSS/Layout_cookbook/Column_layouts) con un área de contenido principal y una barra lateral para información relacionada. Incluso se puede usar para crear efectos de [animación](/es/docs/Web/CSS/CSS_Animations). Echa un vistazo a los enlaces de este párrafo para ver ejemplos específicos. + +## Sintaxis del CSS + +El CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web. Por ejemplo: «Quiero que el encabezado principal de mi página se muestre en letras grandes de color rojo». + +El código siguiente muestra una regla CSS muy simple que proporcionaría el estilo descrito en el párrafo anterior: + +```css +h1 { + color: red; + font-size: 5em; +} +``` + +La regla se abre con un {{Glossary("CSS Selector", "selector")}}. Este _selecciona_ el elemento HTML que vamos a diseñar. En este caso, diseñaremos encabezados de nivel uno ({{htmlelement ("h1")}}). + +Luego tenemos un conjunto de llaves `{ }`. Entre estas habrá una o más **declaraciones**, que tomarán la forma de pares de **propiedad** y **valor**. Cada par especifica cada una de las propiedades de los elementos seleccionados y el valor que queremos dar a esa propiedad. + +Antes de los dos puntos, tenemos la propiedad; y después, el valor. Las {{Glossary("property/CSS", "propiedades")}} CSS admiten diferentes valores, dependiendo de qué propiedad se esté especificando. En el ejemplo anterior, tenemos la propiedad `color`, que puede tomar varios [valores de color](/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS#Color). También tenemos la propiedad de `font-size`, que puede tomar varias [unidades de tamaño](/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS#N%C3%BAmeros_longitudes_y_porcentajes) como valor. + +Una hoja de estilo CSS contendrá muchas de estas reglas, escritas una tras otra. + +```css +h1 { + color: red; + font-size: 5em; +} + +p { + color: black; +} +``` + +Algunos valores se aprenden rápidamente, mientras que otros deberán buscarse. Las páginas de propiedades individuales que hay en el proyecto MDN proporcionan una forma rápida de buscar propiedades y sus valores en caso de olvidarlos o desear saber qué más se puede usar como valor. + +> **Nota:** Puedes encontrar enlaces a todas las páginas de las propiedades CSS (junto con otras características CSS) enumeradas en la [referencia CSS](/es/docs/Web/CSS/Referencia_CSS) del proyecto MDN. Alternativamente, deberías acostumbrarte a buscar «mdn _css-feature-name_» en tu motor de búsqueda favorito siempre que necesites obtener más información sobre una función CSS. Por ejemplo, intenta buscar «mdn color» y «mdn font-size». + +## Módulos CSS + +Como hay tantas cosas que se podrían diseñar usando CSS, el lenguaje se divide en _módulos_. Verás referencias a estos módulos a medida que explores en MDN y observarás que muchas de las páginas de documentación están organizadas en torno a un módulo en particular. Por ejemplo, puedes echar un vistazo a la referencia MDN del módulo [Fondos y bordes](/es/docs/Web/CSS/CSS_Backgrounds_and_Borders) para averiguar cuál es su propósito, qué otras propiedades y características diferentes contiene. También encontrarás enlaces a la _especificación CSS_ que define la tecnología (ver más abajo). + +En esta fase, no debes preocuparte demasiado sobre cómo se estructura el CSS, sin embargo, puede facilitarte la búsqueda de información si, por ejemplo, sabes que es probable que cierta propiedad se encuentre entre otras similares y, por lo tanto, en la misma especificación. + +Volvamos al módulo de Fondos y bordes para un ejemplo específico: puedes pensar que tiene lógica que las propiedades [`background-color`](/es/docs/Web/CSS/background-color) y [`border-color`](/es/docs/Web/CSS/border-color) se definan en este módulo. Y llevas toda la razón. + +### Especificaciones CSS + +Todas las tecnologías de estándares web (HTML, CSS, JavaScript, etc.) se definen en extensos documentos denominados especificaciones, publicados por organizaciones de estándares (como {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} o {{glossary("Khronos")}}) que definen con precisión cómo se supone que deben comportarse esas tecnologías. + +El caso de CSS no es diferente: lo desarrolla un grupo del W3C llamado [CSS Working Group](https://www.w3.org/Style/CSS/). Este grupo está compuesto por representantes de proveedores de navegadores y otras compañías interesadas en CSS. También hay otras personas, conocidas como _expertos invitados_, que actúan como voces independientes y no están vinculados a ninguna organización. + +El CSS Working Group desarrolla o especifica características nuevas del CSS. Algunas veces lo hacen porque un navegador en particular está interesado en alguna capacidad, otras porque los diseñadores y desarrolladores web piden una característica, y otras porque el grupo ha identificado un requisito. El CSS está en desarrollo constante y todos los días presenta nuevas características disponibles. Sin embargo, un elemento clave sobre el CSS es que toda la comunidad se esfuerza mucho en no cambiar nunca nada que pueda perjudicar los sitios web antiguos. ¡Un sitio web creado en el año 2000, que utiliza el poco CSS disponible que había en ese momento, aún debería poder utilizarse hoy en día! + +Como recién llegado al CSS, es probable que encuentres las especificaciones abrumadoras: están destinadas a que los ingenieros las utilicen para implementar soporte de sus características en los agentes de usuario en que trabajan, no para que lo lean los desarrolladores web para comprender el CSS. Muchos desarrolladores experimentados preferirán consultar la documentación disponible en MDN u otros tutoriales. Sin embargo, vale la pena saber que existen y comprender la relación que hay entre el CSS que estás utilizando, el soporte del navegador (ver más abajo) y las especificaciones. + +## Soporte del navegador + +Una vez se ha especificado el CSS, solo es útil en el desarrollo de páginas web si uno o más navegadores lo han implementado. Esto significa que el código se ha escrito para convertir las instrucciones que se especifican en nuestro archivo CSS en algo que se pueda mostrar en pantalla. Veremos este proceso más en profundidad en el artículo [Cómo funciona el CSS](/es/docs/Learn/CSS/First_steps/Como_funciona_CSS). Es inusual que todos los navegadores puedan implementar una misma característica al mismo tiempo, por lo que suele haber una brecha en la que se pueden usar algunas partes del CSS en algunos navegadores pero no en otros. Por este motivo, es útil poder verificar el estado de implementación. En cada una de las páginas de propiedades que hay en la MDN se puede ver el estado de la propiedad de interés, por lo que se puede saber si será posible utilizarla en un sitio web. + +Lo que sigue es el gráfico de datos de compatibilidad para la propiedad CSS [`font-family`](/es/docs/Web/CSS/font-family). + +{{Compat("css.properties.font-family")}} + +## ¿Qué viene ahora? + +Ahora que comprendes mínimamente qué es el CSS, pasemos a [Comenzar con CSS](/es/docs/Learn/CSS/First_steps/Comenzando_CSS), donde puedes empezar a escribir algo de CSS tú mismo. + +{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}} + +## En este módulo + +1. [¿Qué es el CSS?](/es/docs/Learn/CSS/First_steps/What_is_CSS) +2. [Comenzar con CSS](/es/docs/Learn/CSS/First_steps/Getting_started) +3. [Cómo se estructura el CSS](/es/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [Cómo funciona el CSS](/es/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Pon en práctica tus conocimientos nuevos](/es/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/es/learn/css/howto/css_faq/index.html b/files/es/learn/css/howto/css_faq/index.html deleted file mode 100644 index a7370fc59abedc..00000000000000 --- a/files/es/learn/css/howto/css_faq/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Preguntas frecuentes sobre CSS -slug: Learn/CSS/Howto/CSS_FAQ -tags: - - CSS - - Proyecto MDC -translation_of: Learn/CSS/Howto/CSS_FAQ -original_slug: Web/CSS/Preguntas_frecuentes_sobre_CSS ---- -

    Mi CSS es válida, pero no se representa correctamente

    -

    Los navegadores utilizan la declaración DOCTYPE para elegir entre mostrar el documento usando un modo que sea más compatible con los estándares de la Web o mostrarlo con los fallos de los navegadores antiguos. El uso de una declaración DOCTYPE correcta y moderna al inicio del código HTML mejorará el cumplimiento de los estándares del navegador.

    -

    Los navegadores modernos tienen fundamentalmente dos modos de renderizado:

    -
    • Quirks mode (Modo no estándar): también se llama el modo de compatibilidad con versiones anteriores y permite que las páginas web heredadas se representen como sus autores habían previsto, siguiendo las normas de representación o renderizado no estándares que usan los navegadores antiguos. Los documentos con una declaración DOCTYPE incompleta, incorrecta o faltante o con una declaración DOCTYPE conocida que se usara habitualmente antes de 2001 se representarán en el Modo no estándar.
    • Standards Mode (Modo estándar): el navegador intenta seguir estrictamente los estándares del W3C. Se supone que las nuevas páginas HTML se diseñarán para navegadores compatibles con los estándares, y como resultado, las páginas con una declaración DOCTYPE moderna será renderizada con el Modo estándar.
      • -
    -

    Los navegadores basados en Gecko tienen un tercer Modo casi estándar que tiene solo una peculiaridades menores.

    -

    Esta es una lista de las declaraciones DOCTYPE más utilizadas que activarán el Modo estándar o el Modo casi estándar:

    -
    <!DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN"
-"http://www.w3.org/TR/html4/loose.dtd">
-
-<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
    -

    Diferencia entre id y class

    -

    Los elementos HTML pueden tener un atributo id y / o un atributo class. El atributo id asigna un nombre a un elemento determinado y debe haber un solo elemento con ese nombre. El atributo class asigna un elemento a una determinada clase y en general no puede haber más de un elemento con el mismo atributo class. CSS te permite aplicar estilos a un atributo id y / o class concreto.

    -

    Utiliza un estilo específico de id cuando desees restringir las reglas de estilo a un bloque o elemento concreto. Este estilo lo usará un solo elemento con ese id concreto.

    -

    Usa un estilo específico de class cuando desees aplicar las reglas de estilo a una determinada clase de bloques y elementos.

    -

    Consulta Selectores CSS

    -

    Restaurar el valor de la propiedad predeterminado

    -

    Debido a que CSS no proporciona una palabra clave "predeterminada", la única manera de restaurar el valor predeterminado de una propiedad es volver a declarar explícitamente dicha propiedad.

    -

    Por lo tanto, debes tener especial cuidado al escribir reglas de estilo usando selectores (por ejemplo, los selectores por nombre de etiqueta, como p ) que tal vez desees reemplazar con reglas más específicas (como las que usan id o selectores de clase), porque el valor predeterminado original no puede restablecerse automáticamente.

    -

    Debido a la naturaleza en cascada de CSS, es una buena práctica definir reglas de estilo de una manera lo más concreta posible para evitar aplicar estilo a elementos a los que no se tenía previsto aplicar.

    -

    Estilos derivados

    -

    CSS no permite que se defina un estilo según los términos de otro. (Consulta la nota de Eric Meyer acerca de la postura del Grupo de trabajo). Sin embargo, la asignación de múltiples clases a un solo elemento puede proporcionar el mismo efecto.

    -

    Asignación de múltiples clases

    -

    A los elementos HTML se les pueden asignar varias clases listándolas en el atributo class, con un espacio en blanco para separarlas.

    -
    <style type="text/css">
-.news { background: black; color: white; }
-.today { font-weight: bold; }
-</style>
-
-<div class="news today">
-... contenido de las noticias de hoy ...
-</ div>
-
    -

    Si la misma propiedad se declara en ambas reglas, el conflicto se resuelve primero a través de la especificidad, a continuación, según el orden de las declaraciones CSS. El orden de las clases en el atributo class no es relevante.

    -

    Normas de estilo que no funcionan

    -

    Las reglas de estilo que son sintácticamente correctas pueden no aplicarse en determinadas situaciones. Puedes utilizar las Reglas de estilo de CSS del Inspector DOM para depurar los problemas de este tipo, pero los casos más frecuentes en los que se ignoran las reglas de estilo se enumeran a continuación.

    -
    Jerarquía de los elementos HTML
    -

    La forma en que se aplican los estilos CSS a los elementos HTML depende también de la jerarquía de los elementos. Es importante recordar que una regla que se aplica a un descendiente reemplaza el estilo del padre, a pesar de la especificidad o la prioridad de las reglas CSS.

    -
    .news { color: black; }
-. corpName {font-weight: bold; color: red;}
-
-<!-- el texto de la noticia es negro, pero el nombre de la empresa va en rojo y negrita -->
-<div class="news">
-   (Reuters) <span class="corpName"> General Electric </ span> (GE.NYS) anunció el jueves ...
-</ div>
-
    -

    En el caso de jerarquías HTML complejas, si parece que se ignora una regla, comprueba si el elemento está dentro de otro elemento con un estilo diferente.

    -
    Regla de estilo explícitamente redefinida
    -

    En las hojas de estilo CSS el orden es importante. Si defines una regla y luego vuelves a definirla, se usará la última definición.

    -
    #stockTicker { font-weight: bold; }
-.stockSymbol { color: red; }
-/*  otras reglas             */
-/*  otras reglas             */
-/*  otras reglas             */
-.stockSymbol { font-weight: normal; }
-
-<!-- la mayor parte del texto va en negrita, con excepción de "GE", que va en rojo y no en negrita -->
-<div id="stockTicker">
-   NYS: <span class="stockSymbol">GE</span> +1.0 ...
-</ div>
-
    -

    Para evitar este tipo de errores, intenta definir las reglas solo una vez para un selector determinado y agrupa todas las reglas que pertenecen a ese selector.

    -
    Uso de una propiedad abreviada
    -

    Está bien usar las propiedades abreviadas para la definición de reglas de estilo, ya que utiliza una sintaxis muy compacta. Usar la abreviatura con sólo algunos atributos es posible y correcto, pero hay que recordar que los atributos no declarados se restablecen a los valores predeterminados automáticamente. Esto significa que una norma anterior para un solo atributo podría ser reemplazada implícitamente.

    -
    #stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
-.stockSymbol { font: 14px Arial; color: red; }
-
-<div id="stockTicker">
-   NYS: <span class="stockSymbol">GE</span> +1.0 ...
-</ div>
-
    -

    En el ejemplo anterior el problema se produjo en las reglas que pertencían a distintos elementos, pero puede ocurrir también para el mismo elemento, porque el orden de las reglas es importante.

    -
    #stockTicker {
-   font-weight: bold;
-   font: 12px Verdana; / * font-weight es ahora normal * /
-}
-
    -
    Uso del selector *
    -

    El selector * se refiere a cualquier elemento y tiene que utilizarse con especial cuidado.

    -
    body * { font-weight: normal; }
-#stockTicker { font: 12px Verdana; }
-.corpName { font-weight: bold; }
-.stockUp { color: red; }
-
-<div id="section">
-   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
-</ div>
-
    -

    En este ejemplo, el selector body * aplica la regla a todos los elementos dentro del cuerpo (body), en cualquier nivel de jerarquía, incluyendo redtext. Así font-weight: bold; aplicada a la clase boldtext se reemplaza por font-weight: normal; aplicada a redtext.

    -
    Especificidad en CSS
    -

    Cuando se aplican múltiples reglas a un determinado elemento, la norma escogida depende de su especificidad de estilo. El estilo en línea (en los atributos HTML style) es lo primero, seguido por los selectores id, a continuación, los selectores class y, finalmente, los selectores element-name.

    -
    div { color: black; }
-#orange { color: orange; }
-.green { color: green; }
-
-<div id="orange" class="green" style="color: red;">This is red</div>
-
    -

    Las reglas son más complicadas cuando el selector tiene varias partes. Se puede encontrar más información detallada acerca de cómo se calcula la especificidad del selector en el capítulo 6.4.3 de la Especificación CSS 2.1

    -

    ¿Qué hacen las propiedades -moz-*?

    -

    Por favor, consulta la página Extensiones CSS de Mozilla.

    -

    -

    {{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }}

    diff --git a/files/es/learn/css/howto/css_faq/index.md b/files/es/learn/css/howto/css_faq/index.md new file mode 100644 index 00000000000000..c166fe1d92f720 --- /dev/null +++ b/files/es/learn/css/howto/css_faq/index.md @@ -0,0 +1,171 @@ +--- +title: Preguntas frecuentes sobre CSS +slug: Learn/CSS/Howto/CSS_FAQ +tags: + - CSS + - Proyecto MDC +translation_of: Learn/CSS/Howto/CSS_FAQ +original_slug: Web/CSS/Preguntas_frecuentes_sobre_CSS +--- +#### Mi CSS es válida, pero no se representa correctamente + +Los navegadores utilizan la declaración `DOCTYPE` para elegir entre mostrar el documento usando un modo que sea más compatible con los estándares de la Web o mostrarlo con los fallos de los navegadores antiguos. El uso de una declaración `DOCTYPE` correcta y moderna al inicio del código HTML mejorará el cumplimiento de los estándares del navegador. + +Los navegadores modernos tienen fundamentalmente dos modos de renderizado: + +- _Quirks mode_ (Modo no estándar): también se llama el modo de compatibilidad con versiones anteriores y permite que las páginas web heredadas se representen como sus autores habían previsto, siguiendo las normas de representación o renderizado no estándares que usan los navegadores antiguos. Los documentos con una declaración `DOCTYPE` incompleta, incorrecta o faltante o con una declaración `DOCTYPE` conocida que se usara habitualmente antes de 2001 se representarán en el Modo no estándar. +- _Standards Mode_ (Modo estándar): el navegador intenta seguir estrictamente los estándares del W3C. Se supone que las nuevas páginas HTML se diseñarán para navegadores compatibles con los estándares, y como resultado, las páginas con una declaración `DOCTYPE` moderna será renderizada con el Modo estándar. + +Los navegadores basados en Gecko tienen un tercer _[Modo casi estándar](/en/Gecko's_"Almost_Standards"_Mode)_ que tiene solo una peculiaridades menores. + +Esta es una lista de las declaraciones `DOCTYPE` más utilizadas que activarán el Modo estándar o el Modo casi estándar: + +```html + + + + + + + +``` + +#### Diferencia entre `id` y `class` + +Los elementos HTML pueden tener un atributo `id` y / o un atributo `class`. El atributo `id` asigna un nombre a un elemento determinado y debe haber un solo elemento con ese nombre. El atributo `class` asigna un elemento a una determinada clase y en general no puede haber más de un elemento con el mismo atributo `class`. CSS te permite aplicar estilos a un atributo `id` y / o `class` concreto. + +Utiliza un estilo específico de `id` cuando desees restringir las reglas de estilo a un bloque o elemento concreto. Este estilo lo usará **un solo** elemento con ese `id` concreto. + +Usa un estilo específico de `class` cuando desees aplicar las reglas de estilo a una determinada clase de bloques y elementos. + +Consulta [Selectores CSS](/en/CSS/Getting_Started/Selectors) + +#### Restaurar el valor de la propiedad predeterminado + +Debido a que CSS no proporciona una palabra clave "predeterminada", la única manera de restaurar el valor predeterminado de una propiedad es volver a declarar explícitamente dicha propiedad. + +Por lo tanto, debes tener especial cuidado al escribir reglas de estilo usando selectores (por ejemplo, los selectores por nombre de etiqueta, como `p` ) que tal vez desees reemplazar con reglas más específicas (como las que usan id o selectores de clase), porque el valor predeterminado original no puede restablecerse automáticamente. + +Debido a la naturaleza _en cascada_ de CSS, es una buena práctica definir reglas de estilo de una manera lo más concreta posible para evitar aplicar estilo a elementos a los que no se tenía previsto aplicar. + +#### Estilos derivados + +CSS no permite que se defina un estilo según los términos de otro. (Consulta la [nota de Eric Meyer acerca de la postura del Grupo de trabajo)](http://archivist.incutio.com/viewlist/css-discuss/2685). Sin embargo, la asignación de múltiples clases a un solo elemento puede proporcionar el mismo efecto. + +#### Asignación de múltiples clases + +A los elementos HTML se les pueden asignar varias clases listándolas en el atributo `class`, con un espacio en blanco para separarlas. + +```html + + +
    +... contenido de las noticias de hoy ... +
    +``` + +Si la misma propiedad se declara en ambas reglas, el conflicto se resuelve primero a través de la especificidad, a continuación, según el orden de las declaraciones CSS. El orden de las clases en el atributo `class` no es relevante. + +#### Normas de estilo que no funcionan + +Las reglas de estilo que son sintácticamente correctas pueden no aplicarse en determinadas situaciones. Puedes utilizar las _Reglas de estilo de CSS_ del [Inspector DOM](/en/DOM_Inspector) para depurar los problemas de este tipo, pero los casos más frecuentes en los que se ignoran las reglas de estilo se enumeran a continuación. + +##### Jerarquía de los elementos HTML + +La forma en que se aplican los estilos CSS a los elementos HTML depende también de la jerarquía de los elementos. Es importante recordar que una regla que se aplica a un descendiente reemplaza el estilo del padre, a pesar de la especificidad o la prioridad de las reglas CSS. + +``` +.news { color: black; } +. corpName {font-weight: bold; color: red;} + + +
    + (Reuters) General Electric (GE.NYS) anunció el jueves ... +
    +``` + +En el caso de jerarquías HTML complejas, si parece que se ignora una regla, comprueba si el elemento está dentro de otro elemento con un estilo diferente. + +##### Regla de estilo explícitamente redefinida + +En las hojas de estilo CSS el orden **es** importante. Si defines una regla y luego vuelves a definirla, se usará la última definición. + +``` +#stockTicker { font-weight: bold; } +.stockSymbol { color: red; } +/* otras reglas */ +/* otras reglas */ +/* otras reglas */ +.stockSymbol { font-weight: normal; } + + +
    + NYS: GE +1.0 ... +
    +``` + +Para evitar este tipo de errores, intenta definir las reglas solo una vez para un selector determinado y agrupa todas las reglas que pertenecen a ese selector. + +##### Uso de una propiedad abreviada + +Está bien usar las propiedades abreviadas para la definición de reglas de estilo, ya que utiliza una sintaxis muy compacta. Usar la abreviatura con sólo algunos atributos es posible y correcto, pero hay que recordar que los atributos no declarados se restablecen a los valores predeterminados automáticamente. Esto significa que una norma anterior para un solo atributo podría ser reemplazada implícitamente. + +``` +#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; } +.stockSymbol { font: 14px Arial; color: red; } + +
    + NYS: GE +1.0 ... +
    +``` + +En el ejemplo anterior el problema se produjo en las reglas que pertencían a distintos elementos, pero puede ocurrir también para el mismo elemento, porque el orden de las reglas **es** importante. + +```css +#stockTicker { + font-weight: bold; + font: 12px Verdana; / * font-weight es ahora normal * / +} +``` + +##### Uso del selector `*` + +El selector `*` se refiere a cualquier elemento y tiene que utilizarse con especial cuidado. + +``` +body * { font-weight: normal; } +#stockTicker { font: 12px Verdana; } +.corpName { font-weight: bold; } +.stockUp { color: red; } + +
    + NYS: GE +1.0 ... +
    +``` + +En este ejemplo, el selector `body *` aplica la regla a todos los elementos dentro del cuerpo (_body_), en cualquier nivel de jerarquía, incluyendo _redtext._ Así `font-weight: bold;` aplicada a la clase _boldtext_ se reemplaza por `font-weight: normal;` aplicada a _redtext._ + +##### Especificidad en CSS + +Cuando se aplican múltiples reglas a un determinado elemento, la norma escogida depende de su especificidad de estilo. El estilo en línea (en los atributos HTML `style`) es lo primero, seguido por los selectores id, a continuación, los selectores class y, finalmente, los selectores element-name. + +``` +div { color: black; } +#orange { color: orange; } +.green { color: green; } + +
    This is red
    +``` + +Las reglas son más complicadas cuando el selector tiene varias partes. Se puede encontrar más información detallada acerca de cómo se calcula la especificidad del selector en el [capítulo 6.4.3 de la Especificación CSS 2.1](http://www.w3.org/TR/CSS21/cascade.html#specificity) + +#### ¿Qué hacen las propiedades -moz-*? + +Por favor, consulta la página [Extensiones CSS de Mozilla](/en/CSS_Reference/Mozilla_Extensions). diff --git a/files/es/learn/css/howto/index.html b/files/es/learn/css/howto/index.html deleted file mode 100644 index 14f376f74d76f3..00000000000000 --- a/files/es/learn/css/howto/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Usa CSS para resolver problemas comunes -slug: Learn/CSS/Howto -translation_of: Learn/CSS/Howto -original_slug: Learn/CSS/Sábercomo ---- -
    {{LearnSidebar}}
    - -

    Los siguientes enlaces apuntan a soluciones comunes a los problemas cotidianos que necesitará resolver con CSS.

    - -

    Casos de uso común

    - -
    -
    -

    Básicos

    - - - -

    CSS y texto

    - - -
    - -
    -

    Cajas y diseños

    - - -
    -
    - -

    Uncommon or advanced techniques

    - -

    Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.

    - -

    General

    - - - -

    Advanced effects

    - - - -

    Layout

    - - diff --git a/files/es/learn/css/howto/index.md b/files/es/learn/css/howto/index.md new file mode 100644 index 00000000000000..b01230d2baa460 --- /dev/null +++ b/files/es/learn/css/howto/index.md @@ -0,0 +1,64 @@ +--- +title: Usa CSS para resolver problemas comunes +slug: Learn/CSS/Howto +translation_of: Learn/CSS/Howto +original_slug: Learn/CSS/Sábercomo +--- +{{LearnSidebar}} + +Los siguientes enlaces apuntan a soluciones comunes a los problemas cotidianos que necesitará resolver con CSS. + +## Casos de uso común + +### Básicos + +- [Cómo aplicar CSS al HTML](/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML) +- [How to use whitespace in CSS](/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space) +- [Cómo escribir comentarios en CSS](/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments) +- [Cómo seleccionar elementos mediante nombre del elemento, clase o ID](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors) +- [Cómo seleccionar elementos mediante nombre del atributo y contenido](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors) +- [Cómo usar pseudo-clases](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes) +- [Cómo usar pseudo-elementos](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements) +- [Cómo aplicar múltiples selectores a la misma regla](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule) +- [Cómo especificar colores en CSS](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors) +- [Cómo depurar CSS en el navegador](/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS) + +### CSS y texto + +- [Cómo dar estilo al texto](/es/docs/Learn/CSS/Styling_text/Fundamentals) +- [Cómo personalizar una lista de elementos](/es/docs/Learn/CSS/Styling_text/Styling_lists) +- [Cómo dar estilo a links](/en-US/Learn/CSS/Styling_text/Styling_links) +- [Cómo agregar sombras al texto](/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows) + +### Cajas y diseños + +- [Cómo redimensionar cajas CSS](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties) +- [Cómo controlar el contenido que desborda](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow) +- [Cómo controlar la parte de una caja CSS en la que se dibuja el fondo](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip) +- [Cómo defino un elemento inline, block o inline-block?](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes) +- [How to create fancy boxes](/es/docs/Learn/CSS/Howto/create_fancy_boxes) (also see the [Styling boxes](/es/docs/Learn/CSS/Styling_boxes) module, generally). +- [How to use `background-clip` to control how much of the box your background image covers](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip). +- [How to change the box model completely using `box-sizing`](/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely) +- [How to control backgrounds](/en-US/Learn/CSS/Styling_boxes/Backgrounds) +- [How to control borders](/en-US/Learn/CSS/Styling_boxes/Borders) +- [How to style an HTML table](/en-US/Learn/CSS/Styling_boxes/Styling_tables) +- [How to add shadows to boxes](/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows) + +## Uncommon or advanced techniques + +Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face. + +### General + +- [How to calculate specificity of a CSS selector](/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity) +- [How to control inheritance in CSS](/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance) + +### Advanced effects + +- [How to use filters in CSS](/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters) +- [How to use blend modes in CSS](/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes) + +### Layout + +- [Using CSS flexible boxes](/es/docs/Web/Guide/CSS/Flexible_boxes) +- [Using CSS multi-column layouts](/es/docs/Web/Guide/CSS/Using_multi-column_layouts) diff --git a/files/es/learn/css/index.html b/files/es/learn/css/index.html deleted file mode 100644 index ffa52f67f53028..00000000000000 --- a/files/es/learn/css/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: CSS -slug: Learn/CSS -tags: - - CSS - - Codificación - - Depuración - - Necesidades - - Principiante - - Tema - - concreción - - longitud -translation_of: Learn/CSS ---- -
    {{LearnSidebar}}
    - -

    Las Hojas de estilo en cascada (del ingles Cascading Stylesheets {{glossary("CSS")}}) es la siguiente tecnología que aprenderemos después de {{glossary("HTML")}}. Mientras que HTML se utiliza para definir la estructura y la semántica del contenido, CSS se usa para darle estilo y posicionarlo visualmente. CSS se puede usar, por ejemplo, para cambiar la fuente, el color, el tamaño y el espaciado del contenido, para formar multiples columnas, añadir animaciones y otros elementos decorativos.

    - -

    Itinerario de aprendizaje

    - -

    Antes de empezar con CSS deberemos conocer los fundamentos de HTML. Podemos trabajar este contenido en introducción a HTML para posteriormente aprender:

    - -
      -
    • CSS, comenzando por el módulo de Introducción a CSS
      • -
    • Módulos HTML más avanzados
      • -
    • JavaScript, y cómo usarlo para añadir funcionalidad dinamica a las pagina web
      • -
    - -

    Se recomienda aprender HTML y CSS al mismo tiempo, trabajando de forma conjunta ambas disciplinas. CSS aporta un valor añadido a HTML y no podrás aprender CSS sin controlar HTML.

    - -

    Antes de comenzar con este tema, deberemos tener conocimientos básicos sobre el uso de ordenadores y sobre el uso pasivo de la Web (navegar y consumir contenido). Es recomendable tener configurado un entorno de desarrollo como el detallado en Instalación de software básico, y saber crear y gestionar archivos como se detalla en Manejando archivos — ambos forman parte del módulo Primeros pasos en la Web para principiantes.

    - -

    Se recomienda trabajar el módulo Primeros pasos en la Web antes de entrar a este tema, aunque no es completamente necesario; gran parte de lo tratado en el artículo de CSS básico también se trata en el módulo de introducción a CSS, aunque con mucho más detalle.

    - -

    Módulos

    - -

    Este tema contiene los siguientes módulos en el orden recomendado de aprendizaje. Recomendamos comenzar por el primero.

    - -
    -
    Introducción a CSS
    -
    Este módulo explica los conceptos básicos sobre el funcionamiento de CSS, incluyendo selectores y propiedades, escritura de reglas CSS, aplicación de CSS a HTML, cómo especificar longitud, color y otras unidades en CSS, organización en cascada y herencia, conceptos de encajonado básicos y depuración de CSS.
    -
    Estilos por cajas
    -
    A continuación veremos la aplicación de estilos por cajas, fundamental en el diseño de páginas web. En este módulo analizaremos el modelo de cajas para después aprender a controlar el diseño de las cajas ajustando rellenos, marcos y márgenes, personalizando colores de fondo, imágenes y otras características, además de divertidas funcionalidades como el sombreado y los filtros sobre las cajas.
    -
    Estilo del texto
    -
    Aquí veremos cómo aplicar estilos al texto, tipos de letra, negrita, cursiva, espaciado, interlineado y sombreado, entre otras funciones relativas al texto. Terminaremos el módulo aplicando tipos a nuestra página, configurando listas y enlaces.
    -
    Diseño CSS
    -
    Llegados a este punto ya conocemos lo básico de CSS, como darle estilo al texto, y cómo dar estilo y manipular el contenido de las cajas. Es momento de ver cómo ubicar las cajas correctamente con respecto a la ventana de visualización y a otra. Hemos cubierto los requisitos necesarios para poder meternos de lleno en el diseño CSS, ver diferentes ajustes de visualización, metodos tradicionales de diseño con pivotes y posicionamiento, y nuevas herramientas de diseño como flexbox.
    -
    Diseño Adaptable (RBD Responsive Web Design)
    -
    Con la gran variedad de dispositivos capaces de navegar por la Web actualmente, el diseño web adaptable (RWD) es una habilidad imprescindible para el diseño web. En este módulo veremos principios básicos y herramientas de RWD, como aplicar diferentes CSS a un documento dependiendo de las características del dispositivo como el ancho de la pantalla, la orientación y la resolución; veremos las tecnologías disponibles para mostrar videos e imágenes dependiendo de estas características.
    -
    - -

    Resolución de problemas con CSS

    - -

    Uso de CSS para resolver problemas comunes proporciona vínculos a secciones que explican cómo usar CSS para resolver problemas comunes cuando se está creando una página web.

    - -
    -

    Ver También

    - -
    -
    CSS en MDN
    -
    Principal entrada para la documentación de CSS en MDN, donde encontrarás documentación detallada de todas las funcionalidades del lenguaje CSS. ¿Quieres saber todos los valores posibles de una propiedad? Este es tu sitio.
    -
    -
    diff --git a/files/es/learn/css/index.md b/files/es/learn/css/index.md new file mode 100644 index 00000000000000..da69a128445ff5 --- /dev/null +++ b/files/es/learn/css/index.md @@ -0,0 +1,55 @@ +--- +title: CSS +slug: Learn/CSS +tags: + - CSS + - Codificación + - Depuración + - Necesidades + - Principiante + - Tema + - concreción + - longitud +translation_of: Learn/CSS +--- +{{LearnSidebar}} + +Las Hojas de estilo en cascada (del ingles _Cascading Stylesheets_ {{glossary("CSS")}}) es la siguiente tecnología que aprenderemos después de {{glossary("HTML")}}. Mientras que HTML se utiliza para definir la estructura y la semántica del contenido, CSS se usa para darle estilo y posicionarlo visualmente. CSS se puede usar, por ejemplo, para cambiar la fuente, el color, el tamaño y el espaciado del contenido, para formar multiples columnas, añadir animaciones y otros elementos decorativos. + +## Itinerario de aprendizaje + +Antes de empezar con CSS deberemos conocer los fundamentos de HTML. Podemos trabajar este contenido en [introducción a HTML](/es/docs/Learn/HTML/Introduction_to_HTML) para posteriormente aprender: + +- CSS, comenzando por el módulo de Introducción a CSS +- [Módulos HTML](/es/docs/Learn/HTML#módulos) más avanzados +- [JavaScript](/es/docs/Learn/JavaScript), y cómo usarlo para añadir funcionalidad dinamica a las pagina web + +Se recomienda aprender HTML y CSS al mismo tiempo, trabajando de forma conjunta ambas disciplinas. CSS aporta un valor añadido a HTML y no podrás aprender CSS sin controlar HTML. + +Antes de comenzar con este tema, deberemos tener conocimientos básicos sobre el uso de ordenadores y sobre el uso pasivo de la Web (navegar y consumir contenido). Es recomendable tener configurado un entorno de desarrollo como el detallado en [Instalación de software básico](/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software), y saber crear y gestionar archivos como se detalla en [Manejando archivos](/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files) — ambos forman parte del módulo [Primeros pasos en la Web](/es/docs/Learn/Getting_started_with_the_web) para principiantes. + +Se recomienda trabajar el módulo [Primeros pasos en la Web](/es/docs/Learn/Getting_started_with_the_web) antes de entrar a este tema, aunque no es completamente necesario; gran parte de lo tratado en el artículo de CSS básico también se trata en el módulo de introducción a CSS, aunque con mucho más detalle. + +## Módulos + +Este tema contiene los siguientes módulos en el orden recomendado de aprendizaje. Recomendamos comenzar por el primero. + +- [Introducción a CSS](/es/docs/Learn/CSS/First_steps) + - : Este módulo explica los conceptos básicos sobre el funcionamiento de CSS, incluyendo selectores y propiedades, escritura de reglas CSS, aplicación de CSS a HTML, cómo especificar longitud, color y otras unidades en CSS, organización en cascada y herencia, conceptos de encajonado básicos y depuración de CSS. +- [Estilos por cajas](/es/docs/Learn/CSS/Building_blocks) + - : A continuación veremos la aplicación de estilos por cajas, fundamental en el diseño de páginas web. En este módulo analizaremos el modelo de cajas para después aprender a controlar el diseño de las cajas ajustando rellenos, marcos y márgenes, personalizando colores de fondo, imágenes y otras características, además de divertidas funcionalidades como el sombreado y los filtros sobre las cajas. +- [Estilo del texto](/es/docs/Learn/CSS/Styling_text) + - : Aquí veremos cómo aplicar estilos al texto, tipos de letra, negrita, cursiva, espaciado, interlineado y sombreado, entre otras funciones relativas al texto. Terminaremos el módulo aplicando tipos a nuestra página, configurando listas y enlaces. +- [Diseño CSS](/es/docs/Learn/CSS/CSS_layout) + - : Llegados a este punto ya conocemos lo básico de CSS, como darle estilo al texto, y cómo dar estilo y manipular el contenido de las cajas. Es momento de ver cómo ubicar las cajas correctamente con respecto a la ventana de visualización y a otra. Hemos cubierto los requisitos necesarios para poder meternos de lleno en el diseño CSS, ver diferentes ajustes de visualización, metodos tradicionales de diseño con pivotes y posicionamiento, y nuevas herramientas de diseño como flexbox. +- Diseño Adaptable (RBD Responsive Web Design) + - : (RWD) es una habilidad imprescindible para el diseño web. En este módulo veremos principios básicos y herramientas de RWD, como aplicar diferentes CSS a un documento dependiendo de las características del dispositivo como el ancho de la pantalla, la orientación y la resolución; veremos las tecnologías disponibles para mostrar videos e imágenes dependiendo de estas características. + +## Resolución de problemas con CSS + +[Uso de CSS para resolver problemas comunes](https://developer.mozilla.org/es/docs/Learn/CSS/S%C3%A1bercomo) proporciona vínculos a secciones que explican cómo usar CSS para resolver problemas comunes cuando se está creando una página web. + +## Ver También + +- [CSS en MDN](/es/docs/Web/CSS) + - : Principal entrada para la documentación de CSS en MDN, donde encontrarás documentación detallada de todas las funcionalidades del lenguaje CSS. ¿Quieres saber todos los valores posibles de una propiedad? Este es tu sitio. diff --git a/files/es/learn/css/styling_text/fundamentals/index.html b/files/es/learn/css/styling_text/fundamentals/index.html deleted file mode 100644 index 12d084c77ec3b6..00000000000000 --- a/files/es/learn/css/styling_text/fundamentals/index.html +++ /dev/null @@ -1,732 +0,0 @@ ---- -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:

    - -
      -
    • Estilos del tipo de letra: Propiedades que afectan al texto (qué tipo de letra se usa, su tamaño, si es negrita, itálica, etc.).
      • -
    • Estilos de disposición del texto: Propiedades que afectan al espaciado y otras características relativas a la disposición del texto, lo que permite la elección de, por ejemplo, el espacio entre líneas y letras, y el modo como el texto se alinea dentro de la caja contenedora.
      • -
    - -
    -

    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 (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:

    - -
      -
    • Unidades px (píxeles): El número de píxeles de altura que deseas que tenga el texto. Esta es una unidad absoluta, da como resultado el mismo valor calculado final para el tipo de letra en la página en casi cualquier situación.
      • -
    • Unidades em: 1em equivale al tamaño de tipo de letra que se haya establecido en el elemento padre del elemento activo al que aplicamos estilo (más específicamente, el ancho de una letra M mayúscula contenida dentro del elemento padre). Este puede ser complejo de resolver si hay muchos elementos anidados con diferentes tamaños de tipo de letra establecidos, pero es factible, como verás a continuación. Pero, ¿para qué molestarse en ello? Porque resulta bastante natural una vez que te acostumbras a ello, y puedes usar unidades em para establecer el tamaño de todo, no solo del texto. Puedes tener un sitio web completo dimensionado con unidades em, lo que facilita su mantenimiento.
      • -
    • Unidades rem: Funcionan igual que las unidades em, excepto que 1rem equivale al tamaño del tipo de letra establecido en el elemento raíz del documento (es decir, en {{htmlelement("html")}}), no en el elemento padre. Esto facilita mucho los cálculos de los tamaños del tipo de letra, aunque te puede dar mucha guerra si quieres incluir navegadores que ya son muy antiguos porque las versiones de Internet Explorer 8 y anteriores no admiten la unidad rem.
      • -
    - -

    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:

    - -
      -
    • {{cssxref("font-style")}}: Se usa para activar y desactivar el texto en cursiva. Los valores posibles son los siguientes (raramente usarás esto, a menos que desees desactivar algún estilo de cursiva por alguna razón): -
        -
      • normal: Pone el texto en tipo de letra normal (desactiva la cursiva).
        • -
      • italic: Pone el texto en la versión cursiva del tipo de letra, si está disponible; si no está disponible, simulará cursiva con el modo oblique en su lugar.
        • -
      • oblique: Pone el texto en una versión de tipo de letra cursiva simulada, que se genera inclinando la versión normal.
        • -
      -
      • -
    • {{cssxref("font-weight")}}: Establece el grueso o peso del texto. Puede haber muchos valores si dispones de muchas variantes de fuente (como -light, -normal, -bold, -extrabold, -black, etc.), pero en realidad raramente usarás alguna de ellas, más allá de los estilos normal y bold: -
        -
      • normal, bold: Grueso del tipo de letra normal y negrita
        • -
      • lighter, bolder: Establece el grueso de la negrita del elemento activo un nivel por debajo o por encima del grueso de su elemento padre.
        • -
      • 100–900: Valores numéricos de negrita, que proporcionan un control más detallado que las palabras clave anteriores, si es necesario.
        • -
      -
      • -
    • {{cssxref("text-transform")}}: Te permite practicar algunas transformaciones sobre tu tipo de letra. Los valores incluyen: -
        -
      • none: Impide cualquier transformación.
        • -
      • uppercase: Transforma TODO EL TEXTO A MAYÚSCULAS.
        • -
      • lowercase: Transforma todo el texto a minúsculas.
        • -
      • capitalize: Transforma Las Letras Iniciales De Cada Palabra A Mayúscula.
        • -
      • full-width: Transforma todos los caracteres para cada uno quede dentro de una caja de ancho fijo, similar a una fuente monoespaciada, lo que permite, por ejemplo, la alineación de caracteres latinos junto con caracteres asiáticos (chino, japonés, coreano.)
        • -
      -
      • -
    • {{cssxref("text-decoration")}}: Activa/desactiva decoraciones en los tipos de letra (usarás esto principalmente para desactivar el subrayado por defecto de los enlaces al aplicarles estilo). Los valores disponibles son: -
        -
      • none: Desactiva cualquier decoración de texto que presente.
        • -
      • underline: Subraya el texto.
        • -
      • overline: Proporciona al texto una línea superpuesta.
        • -
      • line-through: Coloca un tachado sobre el texto.
        • -
      - Observa que {{cssxref("text-decoration")}} puede aceptar diversos valores a la vez, de modo que puedes incluir diversas decoraciones simultáneas, por ejemplo text-decoration: underline overline. Ten encuenta también que {{cssxref("text-decoration")}} es una propiedad abreviada de {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} y {{cssxref("text-decoration-color")}}. Puedes utilizar combinaciones de los valores de esta propiedad para crear efectos interesantes, por ejemplo text-decoration: line-through red wavy.
      • -
    - -

    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:

    - -
      -
    • left: Alinea el texto por la izquierda.
      • -
    • right: Alinea el texto por la derecha.
      • -
    • center: Centra el texto.
      • -
    • justify: Varía los espacios entre las palabras para que todas las líneas de texto tengan el mismo ancho. Debes usar este valor con prudencia porque puede quedar terrible, especialmente si el párrafo al que se aplica contiene muchas palabras largas. Si tienes intención de utilizar esta propiedad, también deberías pensar en alguna otra, como {{cssxref("hyphens")}}, para dividir las palabras largas entre las líneas.
      • -
    - -

    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:

    - -
      -
    • {{cssxref("font-variant")}}: Cambia entre las opciones de versalita y normal del tipo de letra.
      • -
    • {{cssxref("font-kerning")}}: Activa/Desactiva las opciones de interletraje del tipo de letra.
      • -
    • {{cssxref("font-feature-settings")}}: Activa/Desactiva diversas características de los tipos de letra OpenType.
      • -
    • {{cssxref("font-variant-alternates")}}: Controla el uso de los caracteres alternativos para un tipo de letra dado.
      • -
    • {{cssxref("font-variant-caps")}}: Controla el uso de los caracteres alternativos de las mayúsculas.
      • -
    • {{cssxref("font-variant-east-asian")}}: Controla el uso de los caracteres alternativos en textos en idiomas del Asia Oriental, como el japonés y el chino.
      • -
    • {{cssxref("font-variant-ligatures")}}: Controla qué ligaduras y formas contextuales se usarán en el texto.
      • -
    • {{cssxref("font-variant-numeric")}}: Controla el uso de los caracteres alternativos para números, fracciones y marcadores de ordinales.
      • -
    • {{cssxref("font-variant-position")}}: Controla el uso de los caracteres alternativos de tamaños más pequeños posicionados como subíndice y superíndice.
      • -
    • {{cssxref("font-size-adjust")}}: Ajusta el tamaño visual del texto independientemente del tamaño real del tipo de letra.
      • -
    • {{cssxref("font-stretch")}}: Cambia entre posibles versiones ampliadas de un tipo de letra determinado.
      • -
    • {{cssxref("text-underline-position")}}: Especifica la posición de los subrayados con el valor underline de la propiedad text-decoration-line.
      • -
    • {{cssxref("text-rendering")}}: Intenta optimizar la representación del texto.
      • -
    - -

    Estilos de disposición de los textos

    - -
      -
    • {{cssxref("text-indent")}}: Especifica el espacio horizontal que debe dejarse antes del comienzo de la primera línea del contenido de texto.
      • -
    • {{cssxref("text-overflow")}}: Define cómo se señala el contenido que los usuarios no ven porque desborda.
      • -
    • {{cssxref("white-space")}}: Define cómo se usan los espacios en blanco y los saltos de línea asociados dentro del elemento.
      • -
    • {{cssxref("word-break")}}: Especifica si se deben dividir las palabras a final de línea.
      • -
    • {{cssxref("direction")}}: Define la dirección del texto (esto depende del idioma, y por lo general es mejor dejar que HTML maneje esa parte, porque está vinculada al contenido del texto).
      • -
    • {{cssxref("hyphens")}}: Activa/Desactiva la separación de palabras en los idiomas admitidos.
      • -
    • {{cssxref("line-break")}}: Relaja o refuerza el salto de línea en los idiomas asiáticos.
      • -
    • {{cssxref("text-align-last")}}: Define cómo es la alineación de la última línea de un bloque o línea justo antes de un salto de línea forzado.
      • -
    • {{cssxref("text-orientation")}}: Define la orientación del texto en una línea.
      • -
    • {{cssxref("word-wrap")}}: Especifica si el navegador puede dividir palabras a final de línea para evitar desbordamientos del contenido.
      • -
    • {{cssxref("writing-mode")}}: Define si las líneas de texto se disponen en horizontal o en vertical y la dirección en la que fluyen las líneas subsiguientes.
      • -
    - -

    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/fundamentals/index.md b/files/es/learn/css/styling_text/fundamentals/index.md new file mode 100644 index 00000000000000..e27db1534b2f6b --- /dev/null +++ b/files/es/learn/css/styling_text/fundamentals/index.md @@ -0,0 +1,700 @@ +--- +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](/es/docs/Learn/CSS/Building_blocks/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: + +- **Estilos del tipo de letra**: Propiedades que afectan al texto (qué tipo de letra se usa, su tamaño, si es negrita, itálica, etc.). +- **Estilos de disposición del texto**: Propiedades que afectan al espaciado y otras características relativas a la disposición del texto, lo que permite la elección de, por ejemplo, el espacio entre líneas y letras, y el modo como el texto se alinea dentro de la caja contenedora. + +> **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](/es/docs/Web/CSS/::first-letter) (selecciona la primera letra del texto de un elemento), [::first-line](/es/docs/Web/CSS/::first-line) (selecciona la primera línea del texto de un elemento), o [::selection](/es/docs/Web/CSS/::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: + +```html +

    Tommy the cat

    + +

    Well I remember it as though it were a meal ago...

    + +

    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.

    +``` + +Puedes ver el [ejemplo completo en Github](http://mdn.github.io/learning-area/css/styling-text/fundamentals/) (consulta también [el código fuente](https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html).) + +### 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](/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS), por ejemplo: + +```css +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: + +```html hidden +

    Tommy the cat

    + +

    Well I remember it as though it were a meal ago...

    + +

    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.

    +``` + +{{ 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 ([default font](#default_fonts)). Aquí tienes un ejemplo sencillo: + +```css +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](https://es.wikipedia.org/wiki/Core_fonts_for_the_Web)_ de Microsoft, de finales de la década de 1990 y principios de la del 2000): + +| Nombre | Tipo de letra genérico | Observaciones | +| --------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Arial | sans-serif | A 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 New | monospace | Algunos 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. | +| Georgia | serif | | +| Times New Roman | serif | Algunos 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 MS | sans-serif | Hay que tener cuidado al usar este tipo de letra porque no está ampliamente disponible en los sistemas operativos móviles. | +| Verdana | sans-serif | | + +> **Nota:** Entre otros recursos, el sitio [cssfontstack.com](http://www.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](/es/docs/Learn/CSS/Styling_text/Fuentes_web) 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. + +```css +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: + +```css +p { + color: red; + font-family: Helvetica, Arial, sans-serif; +} +``` + +Esto nos da el resultado siguiente: + +```html hidden +

    Tommy the cat

    + +

    Well I remember it as though it were a meal ago...

    + +

    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.

    +``` + +{{ EmbedLiveSample('Un_ejemplo_con_font-family', '100%', 220) }} + +### Tamaño de la letra + +En el artículo sobre [Unidades y valores de CSS](/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_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](/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS#Porcentajes)). Sin embargo, las unidades más comunes que vas a usar para ajustar el tamaño del texto son: + +- Unidades `px` (píxeles): El número de píxeles de altura que deseas que tenga el texto. Esta es una unidad absoluta, da como resultado el mismo valor calculado final para el tipo de letra en la página en casi cualquier situación. +- Unidades `em`: 1em equivale al tamaño de tipo de letra que se haya establecido en el elemento padre del elemento activo al que aplicamos estilo (más específicamente, el ancho de una letra M mayúscula contenida dentro del elemento padre). Este puede ser complejo de resolver si hay muchos elementos anidados con diferentes tamaños de tipo de letra establecidos, pero es factible, como verás a continuación. Pero, ¿para qué molestarse en ello? Porque resulta bastante natural una vez que te acostumbras a ello, y puedes usar unidades `em` para establecer el tamaño de todo, no solo del texto. Puedes tener un sitio web completo dimensionado con unidades `em`, lo que facilita su mantenimiento. +- Unidades `rem`: Funcionan igual que las unidades `em`, excepto que 1`rem` equivale al tamaño del tipo de letra establecido en el elemento raíz del documento (es decir, en {{htmlelement("html")}}), no en el elemento padre. Esto facilita mucho los cálculos de los tamaños del tipo de letra, aunque te puede dar mucha guerra si quieres incluir navegadores que ya son muy antiguos porque las versiones de Internet Explorer 8 y anteriores no admiten la unidad `rem`. + +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 `
    ` tengan un tamaño de letra calculado de 20px, ¿qué valor de unidad `em` deberías usar? + +```html + +
    +

    Mi párrafo

    +
    +``` + +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 hidden +

    Tommy the cat

    + +

    Well I remember it as though it were a meal ago...

    + +

    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.

    +``` + +```css +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: + +- {{cssxref("font-style")}}: Se usa para activar y desactivar el texto en cursiva. Los valores posibles son los siguientes (raramente usarás esto, a menos que desees desactivar algún estilo de cursiva por alguna razón): + + - `normal`: Pone el texto en tipo de letra normal (desactiva la cursiva). + - `italic`: Pone el texto en la versión cursiva del tipo de letra, si está disponible; si no está disponible, simulará cursiva con el modo `oblique` en su lugar. + - `oblique`: Pone el texto en una versión de tipo de letra cursiva simulada, que se genera inclinando la versión normal. + +- {{cssxref("font-weight")}}: Establece el grueso o peso del texto. Puede haber muchos valores si dispones de muchas variantes de fuente (como _-light_, _-normal_, _-bold_, _-extrabold_, _-black_, etc.), pero en realidad raramente usarás alguna de ellas, más allá de los estilos `normal` y `bold`: + + - `normal`, `bold`: Grueso del tipo de letra normal y **negrita** + - `lighter`, `bolder`: Establece el grueso de la negrita del elemento activo un nivel por debajo o por encima del grueso de su elemento padre. + - `100`–`900`: Valores numéricos de negrita, que proporcionan un control más detallado que las palabras clave anteriores, si es necesario. + +- {{cssxref("text-transform")}}: Te permite practicar algunas transformaciones sobre tu tipo de letra. Los valores incluyen: + + - `none`: Impide cualquier transformación. + - `uppercase`: Transforma TODO EL TEXTO A MAYÚSCULAS. + - `lowercase`: Transforma todo el texto a minúsculas. + - `capitalize`: Transforma Las Letras Iniciales De Cada Palabra A Mayúscula. + - `full-width`: Transforma todos los caracteres para cada uno quede dentro de una caja de ancho fijo, similar a una fuente monoespaciada, lo que permite, por ejemplo, la alineación de caracteres latinos junto con caracteres asiáticos (chino, japonés, coreano.) + +- {{cssxref("text-decoration")}}: Activa/desactiva decoraciones en los tipos de letra (usarás esto principalmente para desactivar el subrayado por defecto de los enlaces al aplicarles estilo). Los valores disponibles son: + + - `none`: Desactiva cualquier decoración de texto que presente. + - `underline`: Subraya el texto. + - `overline`: Proporciona al texto una línea superpuesta. + - `line-through`: Coloca un tachado sobre el texto. + + Observa que {{cssxref("text-decoration")}} puede aceptar diversos valores a la vez, de modo que puedes incluir diversas decoraciones simultáneas, por ejemplo `text-decoration: underline overline`. Ten encuenta también que {{cssxref("text-decoration")}} es una propiedad abreviada de {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} y {{cssxref("text-decoration-color")}}. Puedes utilizar combinaciones de los valores de esta propiedad para crear efectos interesantes, por ejemplo `text-decoration: line-through red wavy`. + +Añadamos un par de estas propiedades a nuestro ejemplo. Nuestro nuevo resultado quedaría como este: + +```html hidden +

    Tommy the cat

    + +

    Well I remember it as though it were a meal ago...

    + +

    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.

    +``` + +```css +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: + +```css +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](/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS) de que dispone CSS, pero lo más habitual es usar `px`. Es un valor obligatorio. +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. 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](/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS) de que dispone el CSS. +4. El color de base de la sombra, que admite cualquier [unidad de color de que dispone CSS](/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS). Si no se incluye este valor, el valor predeterminado es `negro`. + +> **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: + +```css +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: + +```html hidden +

    Tommy the cat

    + +

    Well I remember it as though it were a meal ago...

    + +

    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.

    +``` + +```css hidden +html { + font-size: 10px; +} + +h1 { + font-size: 26px; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 14px; + color: red; + font-family: Helvetica, Arial, sans-serif; +} +``` + +{{ 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](http://www.sitepoint.com/moonlighting-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: + +- `left`: Alinea el texto por la izquierda. +- `right`: Alinea el texto por la derecha. +- `center`: Centra el texto. +- `justify`: Varía los espacios entre las palabras para que todas las líneas de texto tengan el mismo ancho. Debes usar este valor con prudencia porque puede quedar terrible, especialmente si el párrafo al que se aplica contiene muchas palabras largas. Si tienes intención de utilizar esta propiedad, también deberías pensar en alguna otra, como {{cssxref("hyphens")}}, para dividir las palabras largas entre las líneas. + +Si aplicamos `text-align: center;` al elemento {{htmlelement("h1")}} de nuestro ejemplo, obtendremos esto: + +```html hidden +

    Tommy the cat

    + +

    Well I remember as though it were a meal ago...

    + +

    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.

    +``` + +```css hidden +html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +} +``` + +{{ 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](/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS), 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: + +```css +line-height: 1.5; +``` + +Aplicando esto a los elementos {{htmlelement("p")}} en nuestro ejemplo nos daría este resultado: + +```html hidden +

    Tommy the cat

    + +

    Well I remember it as though it were a meal ago...

    + +

    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.

    +``` + +```css hidden +html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +} +``` + +{{ 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](/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS). + +Así, como ejemplo, podemos aplicar a la primera línea de los elementos {{htmlelement("p")}} de nuestro ejemplo lo siguiente: + +```css +p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +} +``` + +y obtendremos: + +```html hidden +

    Tommy the cat

    + +

    Well I remember it as though it were a meal ago...

    + +

    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.

    +``` + +```css hidden +html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +} +``` + +{{ 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: + +- {{cssxref("font-variant")}}: Cambia entre las opciones de versalita y normal del tipo de letra. +- {{cssxref("font-kerning")}}: Activa/Desactiva las opciones de interletraje del tipo de letra. +- {{cssxref("font-feature-settings")}}: Activa/Desactiva diversas características de los tipos de letra [OpenType](https://en.wikipedia.org/wiki/OpenType). +- {{cssxref("font-variant-alternates")}}: Controla el uso de los caracteres alternativos para un tipo de letra dado. +- {{cssxref("font-variant-caps")}}: Controla el uso de los caracteres alternativos de las mayúsculas. +- {{cssxref("font-variant-east-asian")}}: Controla el uso de los caracteres alternativos en textos en idiomas del Asia Oriental, como el japonés y el chino. +- {{cssxref("font-variant-ligatures")}}: Controla qué ligaduras y formas contextuales se usarán en el texto. +- {{cssxref("font-variant-numeric")}}: Controla el uso de los caracteres alternativos para números, fracciones y marcadores de ordinales. +- {{cssxref("font-variant-position")}}: Controla el uso de los caracteres alternativos de tamaños más pequeños posicionados como subíndice y superíndice. +- {{cssxref("font-size-adjust")}}: Ajusta el tamaño visual del texto independientemente del tamaño real del tipo de letra. +- {{cssxref("font-stretch")}}: Cambia entre posibles versiones ampliadas de un tipo de letra determinado. +- {{cssxref("text-underline-position")}}: Especifica la posición de los subrayados con el valor `underline` de la propiedad `text-decoration-line`. +- {{cssxref("text-rendering")}}: Intenta optimizar la representación del texto. + +Estilos de disposición de los textos + +- {{cssxref("text-indent")}}: Especifica el espacio horizontal que debe dejarse antes del comienzo de la primera línea del contenido de texto. +- {{cssxref("text-overflow")}}: Define cómo se señala el contenido que los usuarios no ven porque desborda. +- {{cssxref("white-space")}}: Define cómo se usan los espacios en blanco y los saltos de línea asociados dentro del elemento. +- {{cssxref("word-break")}}: Especifica si se deben dividir las palabras a final de línea. +- {{cssxref("direction")}}: Define la dirección del texto (esto depende del idioma, y por lo general es mejor dejar que HTML maneje esa parte, porque está vinculada al contenido del texto). +- {{cssxref("hyphens")}}: Activa/Desactiva la separación de palabras en los idiomas admitidos. +- {{cssxref("line-break")}}: Relaja o refuerza el salto de línea en los idiomas asiáticos. +- {{cssxref("text-align-last")}}: Define cómo es la alineación de la última línea de un bloque o línea justo antes de un salto de línea forzado. +- {{cssxref("text-orientation")}}: Define la orientación del texto en una línea. +- {{cssxref("word-wrap")}}: Especifica si el navegador puede dividir palabras a final de línea para evitar desbordamientos del contenido. +- {{cssxref("writing-mode")}}: Define si las líneas de texto se disponen en horizontal o en vertical y la dirección en la que fluyen las líneas subsiguientes. + +## 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í: + +```css +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_. + +```html hidden +
    +

    HTML Input

    + + +

    CSS Input

    + + +

    Output

    +
    +
    + +
    +
    +``` + +```js hidden +var htmlInput = document.querySelector(".html-input"); +const cssInput = document.querySelector(".css-input"); +const reset = document.getElementById("reset"); +let htmlCode = htmlInput.value; +let cssCode = cssInput.value; +const output = document.querySelector(".output"); + +const styleElem = document.createElement('style'); +const headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +``` + +{{ 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 + +- [Aplicar estilo al texto base y tipos de letra](/es/docs/Learn/CSS/Styling_text/Fundamentals) +- [Aplicación de estilo a listas](/es/docs/Learn/CSS/Styling_text/Styling_lists) +- [Aplicación de estilo a enlaces](/es/docs/Learn/CSS/Styling_text/Styling_links) +- [Tipos de letra para web](/es/docs/Learn/CSS/Styling_text/Web_fonts) +- [Escribir una página de inicio para la comunidad escolar](/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage) diff --git a/files/es/learn/css/styling_text/index.html b/files/es/learn/css/styling_text/index.html deleted file mode 100644 index a9646b306faa63..00000000000000 --- a/files/es/learn/css/styling_text/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -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/index.md b/files/es/learn/css/styling_text/index.md new file mode 100644 index 00000000000000..de7581c5cb7ef6 --- /dev/null +++ b/files/es/learn/css/styling_text/index.md @@ -0,0 +1,51 @@ +--- +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](/es/docs/Learn/HTML/Introduction_to_HTML), y sentirse cómodo con los fundamentos de CSS, como se explica en [Introducción a CSS](/es/docs/Learn/CSS/Introduction_to_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](http://jsbin.com/),[ CodePen](https://codepen.io/) o [Thimble](https://thimble.mozilla.org/). + +## 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](/es/docs/Learn/CSS/Styling_text/Fundamentals) + - : 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](/es/docs/Learn/CSS/Styling_text/Styling_lists) + - : 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](/es/docs/Learn/CSS/Styling_text/Styling_links) + - : 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](/es/docs/Learn/CSS/Styling_text/Web_fonts) + - : 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-US/Learn/CSS/Styling_text/Typesetting_a_homepage) + - : 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 deleted file mode 100644 index 8ab03a62051305..00000000000000 --- a/files/es/learn/css/styling_text/styling_links/index.html +++ /dev/null @@ -1,434 +0,0 @@ ---- -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):

    - -
      -
    • Link (no visitado): El estado predeterminado que presenta un enlace cuando no está en ningún otro estado. Se puede especificar usando la pseudoclase {{cssxref(":link")}}.
      • -
    • Visited: Un enlace cuando ya se ha visitado (está grabado en el historial del navegador); se le aplica otro formato con la pseudoclase {{cssxref(":visited")}}.
      • -
    • Hover: Un enlace cuando se le pasa el cursor por encima; se le aplica otro formato con la pseudoclase {{cssxref(":hover")}}.
      • -
    • Focus: Un enlace cuando tiene el foco (por ejemplo, se salta a este con la tecla Tab del teclado o se le da el foco mediante programación usando {{domxref("HTMLElement.focus()")}}); se le aplica un formato diferente con la pseudoclase {{cssxref(":focus")}}.
      • -
    • Active: Un enlace cuando se activa (por ejemplo, se hace clic encima); se le aplica un formato diferente con la pseudoclase {{cssxref(":active")}}.
      • -
    - -

    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:

    - -
      -
    • Los enlaces están subrayados.
      • -
    • Los enlaces no visitados se ven de color azul.
      • -
    • Los enlaces visitados se ven de color morado.
      • -
    • Al pasar el puntero del ratón sobre un enlace, cambia a un pequeño icono en forma de mano.
      • -
    • Los enlaces que tienen el foco presentan un contorno alrededor: deberías poder saltar por los enlaces de esta página con el teclado pulsando la tecla de tabulación (en Mac, es posible que necesites habilitar la opción Acceso total por teclado: Todos los controles presionando Ctrl + F7 para que funcione).
      • -
    • Los enlaces activos se muestran de color rojo (intenta mantener el cursor sobre el enlace mientras haces clic).
      • -
    - -

    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:

    - -
      -
    • Subrayar los enlaces, pero no otros elementos. Si no quieres hacerlo, al menos destacarlos de alguna otra forma.
      • -
    • Hacer que reaccionen de alguna manera cuando se les pasa el cursor por encima, y de una manera algo diferente cuando se activan.
      • -
    - -

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

    - -
      -
    • {{cssxref("color")}} para el color del texto.
      • -
    • {{cssxref("cursor")}} para el estilo del cursor (no debes deshabilitar esta opción a menos que tengas una muy buena razón para hacerlo).
      • -
    • {{cssxref("outline")}} para el contorno del texto (un contorno es similar a un borde, la única diferencia es que el borde ocupa un espacio en la caja y el contorno solo se solapa sobre el fondo). El contorno es una ayuda de accesibilidad útil, así que piénsatelo bien antes de desactivar esta opción; al menos deberías plantear dos estilos para los estados de pasar el puntero por encima y de tener el foco.
      • -
    - -
    -

    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:

    - -
      -
    • Las dos primeras reglas no presentan gran interés en esta explicación.
      • -
    • La tercera regla usa el selector a para eliminar el subrayado de texto predeterminado y el contorno en el estado de foco (que de todos modos varía dependiendo del navegador), y añade una pequeña cantidad de área de relleno a cada enlace (todo esto se aclarará más adelante).
      • -
    • A continuación, utilizamos los selectores a:link y a:visited para establecer un par de variaciones de color en los enlaces no visitados y visitados, para que se distingan.
      • -
    • Las dos reglas siguientes usan a:focus y a:hover para establecer colores de fondo diferentes para los enlaces con el foco y los enlaces activados con el paso del cursor, y además un subrayado para que el enlace destaque aún más. Aquí destacamos dos aspectos: -
        -
      • El subrayado se ha creado usando {{cssxref("border-bottom")}} y no {{cssxref("text-decoration")}}, y es que algunas personas lo prefieren porque el primero tiene mejores opciones en cuanto a estilo, y se dibuja un poco más abajo, por lo que no pisa los trazos descendentes de la palabra que se subraya (por ejemplo, los trazos de la g o la y).
        • -
      • El valor {{cssxref ("border-bottom")}} se ha establecido en 1px solid sin especificar ningún color. Así, el borde adopta el mismo color que el texto del elemento, lo que es útil en casos en los que el texto es de un color diferente en cada caso.
        • -
      -
      • -
    • Finalmente, a:active se usa para dar a los enlaces un esquema de color inverso mientras se activan, ¡para dejar claro que algo importante sucede!
      • -
    - -

    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:

    - -
      -
    • Nuestra segunda regla elimina el área de relleno ({{cssxref ("padding")}}) predeterminada del elemento {{htmlelement ("ul")}} y establece un ancho para abarcar el 100% del contenedor externo (el {{htmlelement ("body")}}, en este caso).
      • -
    • Los elementos {{htmlelement ("li")}} por defecto suelen ser elementos de bloque (repasa los tipos de cajas CSS), lo que significa que ocupan sus propias líneas. En este caso, creamos una lista de enlaces horizontal, para lo que en la tercera regla establecemos la propiedad {{cssxref ("display")}} en el valor inline, que ubica todos los elementos de la lista sobre la misma línea porque ahora se comportan como elementos de línea.
      • -
    • La cuarta regla (que da formato al elemento {{htmlelement("a")}}) es la más complicada. Vamos a verla paso a paso: -
        -
      • Como en los ejemplos anteriores, comenzamos por desactivar las propiedades predeterminadas {{cssxref ("text-decoration")}} y {{cssxref ("outline")}}, ya que no queremos que estropeen nuestro aspecto.
        • -
      • A continuación, configuramos la propiedad {{cssxref ("display")}} en el valor inline-block: los elementos {{htmlelement ("a")}} se muestran en línea de forma predeterminada y, aunque no queremos que ocupe más de una línea, como haría un valor de block, queremos poderlos dimensionar: inline-block nos permite hacerlo.
        • -
      • Ahora nos centramos en el tamaño. Queremos llenar todo el ancho del elemento de lista {{htmlelement ("ul")}} y dejar un pequeño margen entre cada botón (pero ningún hueco en el borde derecho), y queremos los 5 botones del mismo tamaño. Para hacer esto, establecemos el atributo {{cssxref ("width")}} en 19,5%, y el atributo {{cssxref ("margin-right")}} en 0,625%. Observa que el ancho completo suma 100,625%, lo que haría caer el último botón <ul> a la siguiente línea por desbordamiento. Sin embargo, lo restituimos al 100% con la siguiente regla, que selecciona solo el último elemento <a> de la lista y elimina de él el margen. ¡Hecho!
        • -
      • Las tres últimas declaraciones son bastante sencillas y tienen principalmente finalidades estéticas. Centramos el texto dentro de cada enlace, establecemos {{cssxref ("line-height")}} en 3 para dar algo de altura a los botones (lo que también presenta la ventaja de centrar verticalmente el texto), y establecemos el color del texto a negro.
        • -
      -
      • -
    - -
    -

    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_links/index.md b/files/es/learn/css/styling_text/styling_links/index.md new file mode 100644 index 00000000000000..1da4c5a5fb8097 --- /dev/null +++ b/files/es/learn/css/styling_text/styling_links/index.md @@ -0,0 +1,435 @@ +--- +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/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks), 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](/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks). 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](/es/docs/Learn/CSS/Building_blocks/Selectores_CSS)): + +- **Link (no visitado)**: El estado predeterminado que presenta un enlace cuando no está en ningún otro estado. Se puede especificar usando la pseudoclase {{cssxref(":link")}}. +- **Visited**: Un enlace cuando ya se ha visitado (está grabado en el historial del navegador); se le aplica otro formato con la pseudoclase {{cssxref(":visited")}}. +- **Hover**: Un enlace cuando se le pasa el cursor por encima; se le aplica otro formato con la pseudoclase {{cssxref(":hover")}}. +- **Focus**: Un enlace cuando tiene el foco (por ejemplo, se salta a este con la tecla Tab del teclado o se le da el foco mediante programación usando {{domxref("HTMLElement.focus()")}}); se le aplica un formato diferente con la pseudoclase {{cssxref(":focus")}}. +- **Active**: Un enlace cuando se activa (por ejemplo, se hace clic encima); se le aplica un formato diferente con la pseudoclase {{cssxref(":active")}}. + +### 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). + +```html +

    Un enlace simple

    +``` + +```css +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: + +- Los enlaces están subrayados. +- Los enlaces no visitados se ven de color azul. +- Los enlaces visitados se ven de color morado. +- Al pasar el puntero del ratón sobre un enlace, cambia a un pequeño icono en forma de mano. +- Los enlaces que tienen el foco presentan un contorno alrededor: deberías poder saltar por los enlaces de esta página con el teclado pulsando la tecla de tabulación (en Mac, es posible que necesites habilitar la opción _Acceso total por teclado: Todos los controles_ presionando Ctrl + F7 para que funcione). +- Los enlaces activos se muestran de color rojo (intenta mantener el cursor sobre el enlace mientras haces clic). + +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: + +- Subrayar los enlaces, pero no otros elementos. Si no quieres hacerlo, al menos destacarlos de alguna otra forma. +- Hacer que reaccionen de alguna manera cuando se les pasa el cursor por encima, y de una manera algo diferente cuando se activan. + +Los estilos por defecto se pueden desactivar/cambiar usando las propiedades CSS siguientes: + +- {{cssxref("color")}} para el color del texto. +- {{cssxref("cursor")}} para el estilo del cursor (no debes deshabilitar esta opción a menos que tengas una muy buena razón para hacerlo). +- {{cssxref("outline")}} para el contorno del texto (un contorno es similar a un borde, la única diferencia es que el borde ocupa un espacio en la caja y el contorno solo se solapa sobre el fondo). El contorno es una ayuda de accesibilidad útil, así que piénsatelo bien antes de desactivar esta opción; al menos deberías plantear dos estilos para los estados de pasar el puntero por encima y de tener el foco. + +> **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: + +```css +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 **L**o**V**e **F**ears **HA**te. + +Ahora vamos a añadir algo más de información para darles formato: + +```css +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: + +```html +

    Dispones de varios navegadores, como Mozilla +Firefox, Google Chrome y +Microsoft Edge.

    +``` + +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: + +- Las dos primeras reglas no presentan gran interés en esta explicación. +- La tercera regla usa el selector `a` para eliminar el subrayado de texto predeterminado y el contorno en el estado de foco (que de todos modos varía dependiendo del navegador), y añade una pequeña cantidad de área de relleno a cada enlace (todo esto se aclarará más adelante). +- A continuación, utilizamos los selectores `a:link` y `a:visited` para establecer un par de variaciones de color en los enlaces no visitados y visitados, para que se distingan. +- Las dos reglas siguientes usan `a:focus` y `a:hover` para establecer colores de fondo diferentes para los enlaces con el foco y los enlaces activados con el paso del cursor, y además un subrayado para que el enlace destaque aún más. Aquí destacamos dos aspectos: + + - El subrayado se ha creado usando {{cssxref("border-bottom")}} y no {{cssxref("text-decoration")}}, y es que algunas personas lo prefieren porque el primero tiene mejores opciones en cuanto a estilo, y se dibuja un poco más abajo, por lo que no pisa los trazos descendentes de la palabra que se subraya (por ejemplo, los trazos de la g o la y). + - El valor {{cssxref ("border-bottom")}} se ha establecido en `1px solid` sin especificar ningún color. Así, el borde adopta el mismo color que el texto del elemento, lo que es útil en casos en los que el texto es de un color diferente en cada caso. + +- Finalmente, `a:active` se usa para dar a los enlaces un esquema de color inverso mientras se activan, ¡para dejar claro que algo importante sucede! + +### 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. + +```html hidden +
    +

    Entrada de HTML

    + + +

    Entrada CSS

    + + +

    Salida

    +
    +
    + + +
    +
    +``` + +```js hidden +var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { +output.innerHTML = htmlInput.value; +styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { +htmlInput.value = htmlCode; +cssInput.value = cssCode; +drawOutput(); +}); + +solution.addEventListener("click", function() { +htmlInput.value = htmlCode; +cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; +drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +``` + +{{ 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](https://icons8.com/web-app/741/external-link). + +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: + +```html +

    Para obtener más información sobre el tiempo, visite nuestra página del tiempo, +mire la Wikipedia, o cheque +Extreme Science.

    +``` + +A continuación, el CSS: + +```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](/es/docs/Learn/CSS/Styling_text/Styling_lists#Uso_de_una_imagen_personalizada_como_vi%C3%B1eta) 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](/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks) 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](/es/docs/Learn/CSS/Building_blocks/Selectores_CSS#Selectores_de_atributo): `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](/es/docs/Learn/CSS/Building_blocks) y el [diseño web adaptativo](/es/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks), 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: + +```html + +``` + +Y ahora nuestro CSS: + +```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: + +- Nuestra segunda regla elimina el área de relleno ({{cssxref ("padding")}}) predeterminada del elemento {{htmlelement ("ul")}} y establece un ancho para abarcar el 100% del contenedor externo (el {{htmlelement ("body")}}, en este caso). +- Los elementos {{htmlelement ("li")}} por defecto suelen ser elementos de bloque (repasa los [tipos de cajas CSS](/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja)), lo que significa que ocupan sus propias líneas. En este caso, creamos una lista de enlaces horizontal, para lo que en la tercera regla establecemos la propiedad {{cssxref ("display")}} en el valor `inline`, que ubica todos los elementos de la lista sobre la misma línea porque ahora se comportan como elementos de línea. +- La cuarta regla (que da formato al elemento {{htmlelement("a")}}) es la más complicada. Vamos a verla paso a paso: + + - Como en los ejemplos anteriores, comenzamos por desactivar las propiedades predeterminadas {{cssxref ("text-decoration")}} y {{cssxref ("outline")}}, ya que no queremos que estropeen nuestro aspecto. + - A continuación, configuramos la propiedad {{cssxref ("display")}} en el valor `inline-block`: los elementos {{htmlelement ("a")}} se muestran en línea de forma predeterminada y, aunque no queremos que ocupe más de una línea, como haría un valor de `block`, queremos poderlos dimensionar: `inline-block` nos permite hacerlo. + - Ahora nos centramos en el tamaño. Queremos llenar todo el ancho del elemento de lista {{htmlelement ("ul")}} y dejar un pequeño margen entre cada botón (pero ningún hueco en el borde derecho), y queremos los 5 botones del mismo tamaño. Para hacer esto, establecemos el atributo {{cssxref ("width")}} en 19,5%, y el atributo {{cssxref ("margin-right")}} en 0,625%. Observa que el ancho completo suma 100,625%, lo que haría caer el último botón `
      ` a la siguiente línea por desbordamiento. Sin embargo, lo restituimos al 100% con la siguiente regla, que selecciona solo el último elemento `` de la lista y elimina de él el margen. ¡Hecho! + - Las tres últimas declaraciones son bastante sencillas y tienen principalmente finalidades estéticas. Centramos el texto dentro de cada enlace, establecemos {{cssxref ("line-height")}} en 3 para dar algo de altura a los botones (lo que también presenta la ventaja de centrar verticalmente el texto), y establecemos el color del texto a negro. + +> **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](https://css-tricks.com/fighting-the-space-between-inline-block-elements/). + +## 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 + +- [Nociones de aplicación de estilo con CSS a textos y tipos de letra](/es/docs/Learn/CSS/Styling_text/Fundamentals) +- [Aplicar estilo a listas](/es/docs/Learn/CSS/Styling_text/Styling_lists) +- [Aplicar estilo a enlaces](/es/docs/Learn/CSS/Styling_text/Styling_links) +- [Tipos de letra para web](/es/docs/Learn/CSS/Styling_text/Web_fonts) +- [Composición tipográfica de una página de inicio de una escuela comunitaria](/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage) diff --git a/files/es/learn/css/styling_text/styling_lists/index.html b/files/es/learn/css/styling_text/styling_lists/index.html deleted file mode 100644 index 8c4524be40bf35..00000000000000 --- a/files/es/learn/css/styling_text/styling_lists/index.html +++ /dev/null @@ -1,392 +0,0 @@ ---- -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:

      - -
        -
      • Los elementos {{htmlelement("ul")}} y {{htmlelement("ol")}} tienen un {{cssxref("margin")}} superior e inferior de 16px (1em) y un {{cssxref("padding-left")}} de 40px (2.5em.)
        • -
      • Los elementos de lista {{htmlelement("li")}} no tienen valores de espacio predeterminados.
        • -
      • El elemento {{htmlelement("dl")}} tiene un {{cssxref("margin")}} superior e inferior de 16px (1em), pero no tiene ningún {{cssxref("padding")}} establecido.
        • -
      • Los elementos {{htmlelement("dd")}} tienen un {{cssxref("margin-left")}} de 40px (2.5em).
        • -
      • Los elementos de referencia {{htmlelement("p")}} que hemos incluido tienen un {{cssxref("margin")}} superior e inferior de 16px (1em), al igual que los diferentes tipos de lista.
        • -
      - -

      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;
-}
      - -
        -
      • La primera regla establece un tipo de letra para todo el sitio y un tamaño de letra base de 10px. Estos valores se heredan para toda la página.
        • -
      • Las reglas 2 y 3 establecen tamaños de letra relativos para los títulos, diferentes tipos de listas (que heredan los hijos de los elementos de listas), y párrafos. Esto significa que todos los párrafos y todas las listas tendrán el mismo tamaño de letra y el mismo espaciado superior e inferior, lo que ayudará a mantener el ritmo vertical constante.
        • -
      • La regla 4 establece el mismo interlineado ({{cssxref("line-height")}}) en los párrafos y los elementos de las listas, de modo que todos los párrafos y todos los elementos individuales de las listas tendrán el mismo espaciado entre las líneas. Esto también ayudará a mantener el ritmo vertical consistente.
        • -
      • Las reglas 5 y 6 se aplican a las listas de descripciones; establecemos la misma altura de interlineado (line-height) en los términos y las descripciones de la lista de descripciones, así como hicimos con los párrafos y los elementos de la lista. De nuevo, ¡la coherencia es buena! También establecemos que los términos de las descripciones tengan un estilo de negrita, para que destaquen visualmente.
        • -
      - -

      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")}}:

      - -
        -
      • {{cssxref("list-style-type")}}: Establece el tipo de viñetas para la lista, por ejemplo, viñetas cuadradas o circulares para una lista no ordenada; números, letras, o números romanos para una lista ordenada.
        • -
      • {{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.
        • -
      • {{cssxref("list-style-image")}}: Te permite usar una imagen personalizada para la viñeta, en lugar de un simple cuadrado o círculo.
        • -
      - -

      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:

      - -
        -
      • -

        Reducir el valor de la propiedad {{cssxref("padding-left")}} del elemento {{htmlelement ("ul")}} desde su valor predeterminado de 40 px hasta 20 px. A continuación, establecer
        - la misma cantidad para los elementos de la lista. De este modo, todos los elementos de la lista siguen alineados con los elementos de la lista ordenada y las descripciones, pero los elementos de lista tienen algo de relleno (padding) para poder insertar las imágenes de fondo. Si no hiciéramos esto, las imágenes de fondo se solaparían con el texto de los elementos de la lista y quedaría un aspecto desordenado.

        -
        • -
      • -

        Establecer la propiedad {{cssxref("list-style-type")}} en none, para que no aparezca la viñeta predeterminada. En lugar de ello, vamos a utilizar las propiedades {{cssxref("background")}} para manejar las viñetas.

        -
        • -
      • Insertar una viñeta en cada elemento de la lista sin ordenar. Las propiedades relevantes son las siguientes: -
          -
        • {{cssxref("background-image")}}: Proporciona la ruta que apunta al archivo de imagen que quieres usar como viñeta.
          • -
        • {{cssxref("background-position")}}: Define en qué lugar del elemento seleccionado va a aparecer la imagen; en este caso le decimos 0 0, que significa que la viñeta va a aparecer en el extremo superior izquierdo de cada elemento de lista.
          • -
        • {{cssxref("background-size")}}: Establece el tamaño de la imagen de fondo. En teoría queremos que las viñetas sean del mismo tamaño que los elementos de lista (o solo un poco menores o mayores). Utilizamos un tamaño de 1.6rem (16px), que encaja muy bien con el área de relleno de 20px que hemos elegido para que quepa la viñeta; 16 px más 4 px de espacio entre la viñeta y el texto del elemento de lista funciona bien.
          • -
        • {{cssxref("background-repeat")}}: Por defecto, las imágenes de fondo se repiten hasta rellenar todo el espacio de fondo disponible. En este caso solo queremos una copia de la imagen, de modo que establecemos el valor de esta propiedad en no-repeat.
          • -
        -
        • -
      - -

      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:

      - -
        -
      • {{cssxref("@counter-style")}}
        • -
      • {{cssxref("counter-increment")}}
        • -
      • {{cssxref("counter-reset")}}
        • -
      - -

      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

      - - diff --git a/files/es/learn/css/styling_text/styling_lists/index.md b/files/es/learn/css/styling_text/styling_lists/index.md new file mode 100644 index 00000000000000..eedbc2a9ca95de --- /dev/null +++ b/files/es/learn/css/styling_text/styling_lists/index.md @@ -0,0 +1,396 @@ +--- +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](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists) 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](http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html) (consulta también el [código fuente](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html).) + +El HTML para nuestro ejemplo de lista se ve así: + +```html +

      Shopping (unordered) list

      + +

      Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.

      + +
        +
      • Humous
        • +
      • Pitta
        • +
      • Green salad
        • +
      • Halloumi
        • +
      + +

      Recipe (ordered) list

      + +

      Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.

      + +
        +
      1. Toast pitta, leave to cool, then slice down the edge.
        2. +
      2. Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
        3. +
      3. Wash and chop the salad.
        4. +
      4. Fill pitta with salad, humous, and fried halloumi.
        5. +
      + +

      Ingredient description list

      + +

      Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.

      + +
      +
      Humous
      +
      A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.
      +
      Pitta
      +
      A soft, slightly leavened flatbread.
      +
      Halloumi
      +
      A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.
      +
      Green salad
      +
      That green healthy stuff that many of us just use to garnish kebabs.
      +
      +``` + +Si accedes al ejemplo en vivo e investigas los elementos de la lista usando las [herramientas de desarrollador del navegador](/es/docs/Learn/Common_questions/What_are_browser_developer_tools), observarás un par de valores de estilo predeterminados: + +- Los elementos {{htmlelement("ul")}} y {{htmlelement("ol")}} tienen un {{cssxref("margin")}} superior e inferior de `16px` (`1em`) y un {{cssxref("padding-left")}} de `40px` (`2.5em`.) +- Los elementos de lista {{htmlelement("li")}} no tienen valores de espacio predeterminados. +- El elemento {{htmlelement("dl")}} tiene un {{cssxref("margin")}} superior e inferior de `16px` (`1em`), pero no tiene ningún {{cssxref("padding")}} establecido. +- Los elementos {{htmlelement("dd")}} tienen un {{cssxref("margin-left")}} de `40px` (`2.5em`). +- Los elementos de referencia {{htmlelement("p")}} que hemos incluido tienen un {{cssxref("margin")}} superior e inferior de `16px` (`1em`), al igual que los diferentes tipos de lista. + +## 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](http://mdn.github.io/learning-area/css/styling-text/styling-lists/), y también [encontrar el código fuente](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html).) + +El CSS que se utiliza para aplicar estilo al texto y al espaciado de texto es el siguiente: + +```css +/* 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; +} +``` + +- La primera regla establece un tipo de letra para todo el sitio y un tamaño de letra base de 10px. Estos valores se heredan para toda la página. +- Las reglas 2 y 3 establecen tamaños de letra relativos para los títulos, diferentes tipos de listas (que heredan los hijos de los elementos de listas), y párrafos. Esto significa que todos los párrafos y todas las listas tendrán el mismo tamaño de letra y el mismo espaciado superior e inferior, lo que ayudará a mantener el ritmo vertical constante. +- La regla 4 establece el mismo interlineado ({{cssxref("line-height")}}) en los párrafos y los elementos de las listas, de modo que todos los párrafos y todos los elementos individuales de las listas tendrán el mismo espaciado entre las líneas. Esto también ayudará a mantener el ritmo vertical consistente. +- Las reglas 5 y 6 se aplican a las listas de descripciones; establecemos la misma altura de interlineado (`line-height`) en los términos y las descripciones de la lista de descripciones, así como hicimos con los párrafos y los elementos de la lista. De nuevo, ¡la coherencia es buena! También establecemos que los términos de las descripciones tengan un estilo de negrita, para que destaquen visualmente. + +## 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")}}: + +- {{cssxref("list-style-type")}}: Establece el tipo de viñetas para la lista, por ejemplo, viñetas cuadradas o circulares para una lista no ordenada; números, letras, o números romanos para una lista ordenada. +- {{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. +- {{cssxref("list-style-image")}}: Te permite usar una imagen personalizada para la viñeta, en lugar de un simple cuadrado o círculo. + +### 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: + +```css +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.](https://mdn.mozillademos.org/files/12962/outer-bullets.png) + +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: + +```css +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.](https://mdn.mozillademos.org/files/12958/inner-bullets.png) + +### 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: + +```css +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](/es/docs/Learn/CSS/Building_blocks). + +En nuestro ejemplo terminado, hemos aplicado estilo a la lista no ordenada de este modo (encima de lo que ya has visto arriba): + +```css +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: + +- Reducir el valor de la propiedad {{cssxref("padding-left")}} del elemento {{htmlelement ("ul")}} desde su valor predeterminado de 40 px hasta 20 px. A continuación, establecer + la misma cantidad para los elementos de la lista. De este modo, todos los elementos de la lista siguen alineados con los elementos de la lista ordenada y las descripciones, pero los elementos de lista tienen algo de relleno (`padding`) para poder insertar las imágenes de fondo. Si no hiciéramos esto, las imágenes de fondo se solaparían con el texto de los elementos de la lista y quedaría un aspecto desordenado. +- Establecer la propiedad {{cssxref("list-style-type")}} en `none`, para que no aparezca la viñeta predeterminada. En lugar de ello, vamos a utilizar las propiedades {{cssxref("background")}} para manejar las viñetas. +- Insertar una viñeta en cada elemento de la lista sin ordenar. Las propiedades relevantes son las siguientes: + + - {{cssxref("background-image")}}: Proporciona la ruta que apunta al archivo de imagen que quieres usar como viñeta. + - {{cssxref("background-position")}}: Define en qué lugar del elemento seleccionado va a aparecer la imagen; en este caso le decimos `0 0`, que significa que la viñeta va a aparecer en el extremo superior izquierdo de cada elemento de lista. + - {{cssxref("background-size")}}: Establece el tamaño de la imagen de fondo. En teoría queremos que las viñetas sean del mismo tamaño que los elementos de lista (o solo un poco menores o mayores). Utilizamos un tamaño de `1.6rem` (`16px`), que encaja muy bien con el área de relleno de `20px` que hemos elegido para que quepa la viñeta; 16 px más 4 px de espacio entre la viñeta y el texto del elemento de lista funciona bien. + - {{cssxref("background-repeat")}}: Por defecto, las imágenes de fondo se repiten hasta rellenar todo el espacio de fondo disponible. En este caso solo queremos una copia de la imagen, de modo que establecemos el valor de esta propiedad en `no-repeat`. + +Esto nos da el resultado siguiente: + +![an unordered list with the bullet points set as little star images](https://mdn.mozillademos.org/files/12956/image-bullets.png) + +### 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: + +```css +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: + +```html +
        +
      1. Toast pitta, leave to cool, then slice down the edge.
        2. +
      2. Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
        3. +
      3. Wash and chop the salad.
        4. +
      4. Fill pitta with salad, humous, and fried halloumi.
        5. +
      +``` + +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: + +```html +
        +
      1. Toast pitta, leave to cool, then slice down the edge.
        2. +
      2. Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
        3. +
      3. Wash and chop the salad.
        4. +
      4. Fill pitta with salad, humous, and fried halloumi.
        5. +
      +``` + +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: + +```html +
        +
      1. Toast pitta, leave to cool, then slice down the edge.
        2. +
      2. Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
        3. +
      3. Wash and chop the salad.
        4. +
      4. Fill pitta with salad, humous, and fried halloumi.
        5. +
      +``` + +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. 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. Poner letras minúsculas en la lista ordenada. +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. + +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. + +```html hidden +
      +

      HTML Input

      + + +

      CSS Input

      + + +

      Output

      +
      +
      + + +
      +
      +``` + +```js hidden +var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { +output.innerHTML = htmlInput.value; +styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { +htmlInput.value = htmlCode; +cssInput.value = cssCode; +drawOutput(); +}); + +solution.addEventListener("click", function() { +htmlInput.value = htmlCode; +cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; +drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +``` + +{{ 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: + +- {{cssxref("@counter-style")}} +- {{cssxref("counter-increment")}} +- {{cssxref("counter-reset")}} + +## 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 + +- [Nociones de aplicación de estilo con CSS a textos y tipos de letra](/es/docs/Learn/CSS/Styling_text/Fundamentals) +- [Aplicar estilo a listas](/es/docs/Learn/CSS/Styling_text/Styling_lists) +- [Aplicar estilo a enlaces](/es/docs/Learn/CSS/Styling_text/Styling_links) +- [Tipos de letra para web](/es/docs/Learn/CSS/Styling_text/Web_fonts) +- [Escribir una página de inicio para la comunidad escolar](/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage) diff --git a/files/es/learn/css/styling_text/web_fonts/index.html b/files/es/learn/css/styling_text/web_fonts/index.html deleted file mode 100644 index 190760450a044f..00000000000000 --- a/files/es/learn/css/styling_text/web_fonts/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Fuentes web -slug: Learn/CSS/Styling_text/Web_fonts -translation_of: Learn/CSS/Styling_text/Web_fonts -original_slug: Learn/CSS/Styling_text/Fuentes_web ---- -
      {{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:

      - -
        -
      • Un distribuidor gratuito de tipos de letra: Es un sitio web que pone a disposición tipos de letra para descargar de forma gratuita (aunque puede haber algunas condiciones de licencia, como la acreditación del creador del tipo de letra). Algunos ejemplos de sitios web donde puedes encontrar tipos de letra gratis son Font Squirrel, dafont y Everything Fonts.
        • -
      • Un distribuidor de fuentes de pago: En este sitio web puedes encontrar tipos de letra a cambio de un precio, dos ejemplos son fonts.com o myfonts.com. También puedes comprar tipos de letra directamente de estudios de diseño, por ejemplo, Linotype, Monotype, o Exljbris.
        • -
      • Un servicio de tipos de letra en línea: Es un sitio que guarda y te sirve los tipos de letra, lo que te facilita todo el proceso. Consulta la sección Los servicios de tipos de letra en línea para obtener más información.
        • -
      - -

      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:

      - -
        -
      • Las distintas versiones de cada tipo de letra, por ejemplo: .ttf, .woff, .woff2, etc.; los tipos de letra exactos proporcionados se actualizarán con el tiempo a medida que cambien los requisitos técnicos del navegador. Como se ya hemos dicho, se necesita más de un tipo de letra para garantizar la compatibilidad entre navegadores: esta es la forma en que Fontsquirrel se asegura de que tengas todo lo que necesitas.
        • -
      • Un archivo HTML con un ejemplo de demostración para cada tipo de letra: cárgalos en tu navegador para ver cómo se ve la fuente en diferentes contextos de uso.
        • -
      • Un archivo stylesheet.css, que contiene el código @font-face que necesitas.
        • -
      - -

      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:

      - -
        -
      • font-family: Esta línea especifica el nombre con el que vas a referirte a la fuente. Puedes poner el que quieras, siempre y cuando lo uses de manera coherente a lo largo de tu CSS.
        • -
      • src: Estas líneas especifican las rutas de acceso a los archivos de tipos de letra para que puedas importarlos a tu CSS (la parte URL) y el formato de cada archivo de tipo de letra (la parte format). La última parte en cada caso es opcional, pero es útil declararla porque permite que los navegadores encuentren más rápido un tipo de letra que puedan usar. Se pueden enumerar varias declaraciones, separadas por comas: el navegador buscará por ellas y usará la primera que encuentre. Por lo tanto, es mejor poner formatos nuevos y mejores, como WOFF2 y formatos más antiguos, no tan buenos, como TTF. La única excepción son las fuentes EOT: se colocan primero para corregir un par de errores en versiones anteriores de Internet Explorer, por lo que intentará usar lo primero que encuentre, incluso si realmente no puede usar la fuente.
        • -
      • {{cssxref("font-weight")}}/{{cssxref("font-style")}}: Estas líneas especifican qué grueso tiene el tipo de letra y si se muestra en cursiva o no. Si vas a importar diversos grosores del mismo tipo de letra, puedes especificar cuál es su grueso/estilo y luego usar valores de {{cssxref("font-weight")}} / {{cssxref("font-style")}} diferentes para elegir entre ellos, en lugar de tener que llamar a todos los diferentes miembros de la familia de tipos de letra con nombres distintos. @tip-face tip: define font-weight and font-stile to keep your CSS simple de Roger Johansson muestra qué hacer con más detalle.
        • -
      - -
      -

      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/web_fonts/index.md b/files/es/learn/css/styling_text/web_fonts/index.md new file mode 100644 index 00000000000000..f9144d1fcb00c3 --- /dev/null +++ b/files/es/learn/css/styling_text/web_fonts/index.md @@ -0,0 +1,192 @@ +--- +title: Fuentes web +slug: Learn/CSS/Styling_text/Web_fonts +translation_of: Learn/CSS/Styling_text/Web_fonts +original_slug: Learn/CSS/Styling_text/Fuentes_web +--- +{{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](/es/docs/Learn/CSS/Styling_text/Fundamentals), 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: + +```css +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](/es/docs/Learn/CSS/Styling_text/Fundamentals#Familia_de_tipos_de_letras). 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: + +```css +@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: + +```css +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. 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. + +> **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](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html) y [web-font-start.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css) a los que añadir tu código (véase el [ejemplo en vivo](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html)). 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: + +- Un distribuidor gratuito de tipos de letra: Es un sitio web que pone a disposición tipos de letra para descargar de forma gratuita (aunque puede haber algunas condiciones de licencia, como la acreditación del creador del tipo de letra). Algunos ejemplos de sitios web donde puedes encontrar tipos de letra gratis son [Font Squirrel](https://www.fontsquirrel.com/), [dafont](http://www.dafont.com/) y [Everything Fonts](https://everythingfonts.com/). +- Un distribuidor de fuentes de pago: En este sitio web puedes encontrar tipos de letra a cambio de un precio, dos ejemplos son [fonts.com](http://www.fonts.com/) o [myfonts.com](http://www.myfonts.com/). También puedes comprar tipos de letra directamente de estudios de diseño, por ejemplo, [Linotype](https://www.linotype.com/), [Monotype](http://www.monotype.com), o [Exljbris](http://www.exljbris.com/). +- Un servicio de tipos de letra en línea: Es un sitio que guarda y te sirve los tipos de letra, lo que te facilita todo el proceso. Consulta la sección [Los servicios de tipos de letra en línea](#los_servicios_de_tipos_de_letra_en_línea) para obtener más información. + +Vamos a ver algunos tipos de letra. Ve a [Font Squirrel](https://www.fontsquirrel.com/) 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. Ve a [Webfont Generator ](https://www.fontsquirrel.com/tools/webfont-generator)de Fontsquirrel. +3. Sube tus dos archivos de tipo de letra con el botón _Cargar Fuentes_. +4. Marca la casilla de verificación con el texto «Sí, las fuentes que elijo pueden utilizarse legalmente para una página web». +5. Haz clic en _Descarga tu paquete_. + +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: + +- Las distintas versiones de cada tipo de letra, por ejemplo: `.ttf`, `.woff`, `.woff2`, etc.; los tipos de letra exactos proporcionados se actualizarán con el tiempo a medida que cambien los requisitos técnicos del navegador. Como se ya hemos dicho, se necesita más de un tipo de letra para garantizar la compatibilidad entre navegadores: esta es la forma en que Fontsquirrel se asegura de que tengas todo lo que necesitas. +- Un archivo HTML con un ejemplo de demostración para cada tipo de letra: cárgalos en tu navegador para ver cómo se ve la fuente en diferentes contextos de uso. +- Un archivo `stylesheet.css`, que contiene el código @font-face que necesitas. + +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. 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. 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. 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: + + ```css + font-family: 'zantrokeregular', serif; + ``` + +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. + +![](https://mdn.mozillademos.org/files/12984/web-font-example.png) + +> **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](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html) y [web-font-finished.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css) ([ejecuta el ejemplo terminado en vivo](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html)). + +## 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](https://fonts.adobe.com/) y [Cloud.typography](http://www.typography.com/cloud/welcome/). La mayoría de estos servicios se basan en suscripciones de pago, con la excepción notable de [Google Fonts](https://www.google.com/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](https://www.google.com/fonts). +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. Para seleccionar una familia de tipos de letra, pulsa el botón ⊕ que encontrarás al lado. +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. 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. Luego, debes copiar las declaraciones CSS enumeradas en tu CSS según corresponda para aplicar los tipos de letra personalizados a tu HTML. + +> **Nota:** Puedes encontrar una versión completa en [google-font.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html) y [google-font.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css), si necesitas comparar tu trabajo con el nuestro ([consúltalo en vivo](http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)). + +## @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í: + +```css +@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](http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)). Vamos a ver qué hace: + +- `font-family`: Esta línea especifica el nombre con el que vas a referirte a la fuente. Puedes poner el que quieras, siempre y cuando lo uses de manera coherente a lo largo de tu CSS. +- `src`: Estas líneas especifican las rutas de acceso a los archivos de tipos de letra para que puedas importarlos a tu CSS (la parte `URL`) y el formato de cada archivo de tipo de letra (la parte `format`). La última parte en cada caso es opcional, pero es útil declararla porque permite que los navegadores encuentren más rápido un tipo de letra que puedan usar. Se pueden enumerar varias declaraciones, separadas por comas: el navegador buscará por ellas y usará la primera que encuentre. Por lo tanto, es mejor poner formatos nuevos y mejores, como WOFF2 y formatos más antiguos, no tan buenos, como TTF. La única excepción son las fuentes EOT: se colocan primero para corregir un par de errores en versiones anteriores de Internet Explorer, por lo que intentará usar lo primero que encuentre, incluso si realmente no puede usar la fuente. +- {{cssxref("font-weight")}}/{{cssxref("font-style")}}: Estas líneas especifican qué grueso tiene el tipo de letra y si se muestra en cursiva o no. Si vas a importar diversos grosores del mismo tipo de letra, puedes especificar cuál es su grueso/estilo y luego usar valores de {{cssxref("font-weight")}} / {{cssxref("font-style")}} diferentes para elegir entre ellos, en lugar de tener que llamar a todos los diferentes miembros de la familia de tipos de letra con nombres distintos. [@tip-face tip: define font-weight and font-stile to keep your CSS simple](http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) de Roger Johansson muestra qué hacer con más detalle. + +> **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](https://24ways.org/2011/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](/es/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide). + +## 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 + +- [Texto fundamental y estilo de fuente](/es/docs/Learn/CSS/Styling_text/Fundamentals) +- [Dar estilo a las listas](/es/docs/Learn/CSS/Styling_text/Styling_lists) +- [Dar estilo a los enlaces](/es/docs/Learn/CSS/Styling_text/Styling_links) +- [Las fuentes web](/es/docs/Learn/CSS/Styling_text/Web_fonts) +- [Composición tipográfica de una página de inicio de una escuela comunitaria](/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage)