Merge pull request #4478 from vtamara/add/ES-translation-of-html5-and-css
Completes translation to spanish of HTML5 & CSSpull/4576/merge
Quincy Larson
commit
9468b42de9
|
|
@ -658,8 +658,15 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Establecer la familia del tipo de letra de un elemento",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Puede establecer el tipo de letra de un elemento usando la propiedad <code>font-family</code>.",
|
||||||
|
"Por ejemplo, si quiere establecer el tipo de letra de su elemento <code>h2</code> como <code>Sans-serif</code>, use el siguiente CSS:",
|
||||||
|
"<code>h2 {</code>",
|
||||||
|
"<code> font-family: Sans-serif;</code>",
|
||||||
|
"<code>}</code>",
|
||||||
|
"Haga que todos sus elementos <code>p</code> utilicen el tipo de letra <code>Monospace</code>."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Definiere die Schriftart eines Elements",
|
"nameDe": "Waypoint: Definiere die Schriftart eines Elements",
|
||||||
|
|
@ -710,8 +717,15 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Importar un tipo de letra de Google",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Ahora, importemos y apliquemos un tipo de letra de Google (tenga en cuenta que si Google es bloqueado en su país, debera saltarse este desafio).",
|
||||||
|
"Primero, haga un <code>llamado</code> a Google para tomar el tipo de letra <code>Lobster</code> y para cargarlo en su HTML.",
|
||||||
|
"Copie la siguiente porción de código y péguela en la parte superior de su editor de texto:",
|
||||||
|
"<code><link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>",
|
||||||
|
"Ahora establezca <code>Lobster</code> como valor de font-family en su elemento <code>h2</code>.",
|
||||||
|
"Aplique la familia de fuente (<code>font-family</code>) <code>Lobster</code> a su elemento <code>h2</code>."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Importiere eine Google Font",
|
"nameDe": "Waypoint: Importiere eine Google Font",
|
||||||
|
|
@ -771,8 +785,16 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Especifique como deben degradarse los tipos de letra",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Hay diversos tipos de letra disponibles por omisión en todos los navegadores. Estos incluyend <code>Monospace</code>, <code>Serif</code> y <code>Sans-Serif</code>",
|
||||||
|
"Cuando un tipo de letra no está disponible, puede decirle al navegador que \"degrade\" a otro tipo de letra.",
|
||||||
|
"Por ejemplo, si quiere que un elemento use el tipo <code>Helvetica</code>, o que se degrade a <code>Sans-Serif</code> cuando <code>Helvetica</code> no esté disponible, puede usar el siguiente estilo CSS:",
|
||||||
|
"<code>p {</code>",
|
||||||
|
"<code> font-family: Helvetica, Sans-Serif;</code>",
|
||||||
|
"<code>}</code>",
|
||||||
|
"Ahora ponga como comentarios sus llamadas a tipos de letra de Google, de forma que el tipo <code>Lobster</code> no esté disponible. Note como se degrada al tipo <code>Monospace</code>."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Spezifiziere die Rangfolge von Schriftarten",
|
"nameDe": "Waypoint: Spezifiziere die Rangfolge von Schriftarten",
|
||||||
|
|
@ -829,8 +851,15 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Añade imágenes a tu sitio web",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Puedes agregar imágenes a tu sitio web mediante el uso del elemento <code>img</code>, y apuntar a la URL específica de una imagen utilizando el atributo <code>src</code>.",
|
||||||
|
"Un ejemplo de esto sería:",
|
||||||
|
"<code><img src=\"http://www.your-image-source.com/your-image.jpg\"></code>",
|
||||||
|
"Ten en cuenta que en la mayoría de los casos, los elementos <code>img</code> son de cierre automático.",
|
||||||
|
"Prueba con esta imagen:",
|
||||||
|
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Füge Bilder zu deiner Website hinzu",
|
"nameDe": "Waypoint: Füge Bilder zu deiner Website hinzu",
|
||||||
|
|
@ -890,8 +919,17 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Da tamaño a tus imágenes",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"CSS tiene una propiedad llamada <code>width</code> que controla el ancho de un elemento. Al igual que con los tipos de letra, usaremos <code>px</code> (píxeles) para especificar el ancho de la imagen. ",
|
||||||
|
"Por ejemplo, si queremos crear una clase CSS llamada <code>larger-image</code> que le de a los elementos HTML un ancho de 500 píxeles, usaríamos:",
|
||||||
|
"<code><estilo></code>",
|
||||||
|
"<code> .larger-image{</code>",
|
||||||
|
"<code> width: 500px;</code>",
|
||||||
|
"<code> }</code>",
|
||||||
|
"<code></style></code>",
|
||||||
|
"Crea una clase llamada <code>smaller-image</code> y utilízala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Skaliere deine Bilder",
|
"nameDe": "Waypoint: Skaliere deine Bilder",
|
||||||
|
|
@ -961,8 +999,21 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Añade bordes alrededor de tus elementos",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Los bordes CSS tienen propiedades como <code>style</code>, <code>color</code> y <code>width</code>",
|
||||||
|
"Por ejemplo, si queremos crear un borde de 5 píxeles rojo alrededor de un elemento HTML, podríamos utilizar esta clase:",
|
||||||
|
"<code><style></code>",
|
||||||
|
"<code> .thin-red-border {</code>",
|
||||||
|
"<code> border-color: red;</code>",
|
||||||
|
"<code> border-width: 5px;</code>",
|
||||||
|
"<code> border-style: solid;</code>",
|
||||||
|
"<code> }</code>",
|
||||||
|
"<code></style></code>",
|
||||||
|
"Crea una clase llamada <code>thick-green-border</code> que ponga un borde verde de 10 píxeles de ancho con un estilo de <code>solid</code> en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ",
|
||||||
|
"Recuerda que puedes aplicar múltiples clases a un elemento separando una clase de otra con un espacio. Haces esto dentro de tu atributo <code>class</code>. Por ejemplo:",
|
||||||
|
"<code><img class=\"class1 class2\"></code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Füge Rahmen zu deinen Elementen hinzu",
|
"nameDe": "Waypoint: Füge Rahmen zu deinen Elementen hinzu",
|
||||||
|
|
@ -1026,8 +1077,21 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Añade bordes alrededor de tus elementos",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Los bordes CSS tienen propiedades como <code>style</code>, <code>color</code> y <code>width</code>",
|
||||||
|
"Por ejemplo, si queremos crear un borde de 5 píxeles rojo alrededor de un elemento HTML, podríamos utilizar esta clase:",
|
||||||
|
"<code><style></code>",
|
||||||
|
"<code> .thin-red-border {</code>",
|
||||||
|
"<code> border-color: red;</code>",
|
||||||
|
"<code> border-width: 5px;</code>",
|
||||||
|
"<code> border-style: solid;</code>",
|
||||||
|
"<code> }</code>",
|
||||||
|
"<code></style></code>",
|
||||||
|
"Crea una clase llamada <code>thick-green-border</code> que ponga un borde verde de 10 píxeles de ancho con un estilo de <code>solid</code> en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ",
|
||||||
|
"Recuerda que puedes aplicar múltiples clases a un elemento separando una clase de otra con un espacio. Haces esto dentro de tu atributo <code>class</code>. Por ejemplo:",
|
||||||
|
"<code><img class=\"class1 class2\"></code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Füge abgerundete Ecken mit Border Radius hinzu",
|
"nameDe": "Waypoint: Füge abgerundete Ecken mit Border Radius hinzu",
|
||||||
|
|
@ -1091,8 +1155,12 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Añade esquinas redondeadas con un radio de borde",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Tu foto del gato actualmente tiene esquinas cuadradas. Podemos redondear esas esquinas con una propiedad CSS llamada <code>border-radius</code>. ",
|
||||||
|
"Puedes especificar un <code>border-radius</code> en píxeles. Esto afectará lo redondeadas de las esquinas. Añade esta propiedad a tu clase <code>thick-green-border</code> y establecela a <code>10px</code>. ",
|
||||||
|
"Dale a tu foto del gato un <code>border-radius</code> de <code>10px</code>."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Erstelle runde Bilder mit einem Border Radius",
|
"nameDe": "Waypoint: Erstelle runde Bilder mit einem Border Radius",
|
||||||
|
|
@ -1160,8 +1228,15 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Enlaza páginas externas con elementos ancla",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Los elementos <code>a</code>, también conocido como elementos <code>ancla</code>, se utilizan para enlazar a contenido fuera de la página actual.",
|
||||||
|
"Aquí está un diagrama de un elemento <code>a</code>. En este caso, el elemento <code>a</code> se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ",
|
||||||
|
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Haga clic para ampliar\" alt=\"un diagrama de cómo las etiquetas de anclaje se componen con el mismo texto, como en la siguiente línea\" src=\"http://i.imgur.com/hviuZwe.png\"></a> ",
|
||||||
|
"He aquí un ejemplo:",
|
||||||
|
"<code><p>Aquí está un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo siga.</p></code>",
|
||||||
|
"Crea un elemento <code>a</code> que se vincule a <code>http://freecatphotoapp.com</code> y tenga como <code>texto de anclaje</code> \" fotos de gatos\"."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen",
|
"nameDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen",
|
||||||
|
|
@ -1238,8 +1313,15 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Anida un elemento de anclaje dentro de un párrafo",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Una vez más, aquí está un diagrama de un elemento <code>a</code> para tu referencia:",
|
||||||
|
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Pulse para ampliar\" alt=\"un diagrama de como se componen las etiquetas de anclaje con el texto como en la siguiente línea\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
|
||||||
|
"He aquí un ejemplo:",
|
||||||
|
"<code><p>Aquí un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p></code>",
|
||||||
|
"<code>anidamiento</code> significa poner un elemento dentro de otro elemento.",
|
||||||
|
"Ahora anida el elemento <code>a</code> existente dentro de un nuevo elemento <code>p</code> para que el párrafo que lo rodee diga \"View more cat photos\", pero donde sólo \"cat photos\" sea un enlace, y el resto sea texto plano ."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint Umschließe ein Anker Element mit einem Paragraphen",
|
"nameDe": "Waypoint Umschließe ein Anker Element mit einem Paragraphen",
|
||||||
|
|
@ -1305,8 +1387,12 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Haz vínculos muertos utilizando el símbolo de numero",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"A veces quieres agregar elementos <code>a</code> a tu sitio web antes de saber qué enlazarán.",
|
||||||
|
"Esto también es útil cuando estás cambiando el comportamiento de un enlace usando <code>jQuery</code>, que aprenderemos más adelante.",
|
||||||
|
"Reemplaza el atributo <code>href</code> de tu elemento <code>a</code> con un <code>#</code>, también conocido como un símbolo de número o de <em>hash</em>, para convertirlo en un vínculo muerto."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Erstelle tote Links mit dem Hash Symbol",
|
"nameDe": "Waypoint: Erstelle tote Links mit dem Hash Symbol",
|
||||||
|
|
@ -1377,8 +1463,14 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Convierte una imagen en un vínculo",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Puedes convertir elementos en enlaces al anidarlos con un elemento <code>a</code>.",
|
||||||
|
"Anida tu imagen dentro de un elemento <code>a</code>. He aquí un ejemplo: ",
|
||||||
|
"<code><a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a></code>",
|
||||||
|
"Recuerda usar <code>#</code> como atributo <code>href</code> de tu elmento <code>a</code> con el fin de convertirlo en un vínculo muerto.",
|
||||||
|
"Una vez hayas hecho esto, coloca el cursor sobre tu imagen. El puntero normal de tu cursor debería convertirse en el puntero de enlace. La foto es ahora un vínculo ."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Verlinke ein Bild",
|
"nameDe": "Waypoint: Verlinke ein Bild",
|
||||||
|
|
@ -1448,8 +1540,14 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Agrega texto alternativo a una imagen para dar Accesibilidad",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Los atributos <code>alt</code> también conocidos como <code>texto alternativo</code>, son lo que se presentarán en caso que el navegador no puede mostrar la imagen. Los atributos <code>alt</code> también son importantes para los usuarios ciegos o con deficiencia visual para entender lo que una imagen retrata. Y los motores de búsqueda también examinan los atributos <code>alt</code>. ",
|
||||||
|
"En resumen, ¡cada imagen debe tener un atributo <code>alt</code>!",
|
||||||
|
"Usted puede agregar un atributo <code>alt</code> justo en el elemento <code>img</code> así:",
|
||||||
|
"<code><img src=\"www.your-image-source.com/your-image.jpg\" alt=\"tu texto alternativo\"></code>",
|
||||||
|
"Añade un atributo <code>alt</code> con el texto <code>A cute orange cat lying on its back</code> a nuestra foto del gato."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Füge Alt Text für mehr Barrierefreiheit hinzu",
|
"nameDe": "Waypoint: Füge Alt Text für mehr Barrierefreiheit hinzu",
|
||||||
|
|
@ -1526,8 +1624,18 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Crea una lista no ordenada con viñetas",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"HTML tiene un elemento especial para la creación de <code>listas no ordenadas</code>, o listas con estilo viñeta.",
|
||||||
|
"Las listas no ordenadas comienzan con un elemento <code><ul></code>. A continuación contienen una cantidad de elementos <code><li>.</code>",
|
||||||
|
"Por ejemplo: ",
|
||||||
|
"<code><ul></code>",
|
||||||
|
" <code><li>leche</li></code>",
|
||||||
|
" <code><li>queso</li></code>",
|
||||||
|
"<code></ul></code>",
|
||||||
|
"creará una lista con viñetas con \"leche\" y \"queso\".",
|
||||||
|
"Elimina los dos últimos elementos <code>p</code> y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Erstelle eine ungeordnete Liste",
|
"nameDe": "Waypoint: Erstelle eine ungeordnete Liste",
|
||||||
|
|
@ -1611,8 +1719,18 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Crear una lista ordenada",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"HTML tiene un elemento especial para la creación de <code>listas ordenadas</code>, o listas de estilo numerado.",
|
||||||
|
"Las listas ordenadas comienzan con un elemento <code><ol></code>. Luego contienen un número de elementos <code><li>.</code>",
|
||||||
|
"Por ejemplo:",
|
||||||
|
"<code><ol></code>",
|
||||||
|
" <code><li>Garfield</li></code>",
|
||||||
|
" <code><li>Sylvester</li></code>",
|
||||||
|
"<code></ol></code>",
|
||||||
|
"creará una lista numerada con \"Garfield\" y \"Sylvester\".",
|
||||||
|
"Crea una lista ordenada de los 3 cosas que más odian los gatos."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Erstelle eine geordnete Liste",
|
"nameDe": "Waypoint: Erstelle eine geordnete Liste",
|
||||||
|
|
@ -1692,8 +1810,15 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Crea un campo de texto",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Ahora vamos a crear un formulario web.",
|
||||||
|
"Los campos de texto son una manera conveniente de obtener retroalimentación de su usuario.",
|
||||||
|
"Usted puede crear uno como este:",
|
||||||
|
"<code><input type=\"text\"></code>",
|
||||||
|
"Tenga en cuenta que los elementos <code>input</code> son de cierre automático.",
|
||||||
|
"Crea un elemento <code>input</code> de tipo <code>texto</code> debajo de tus listas."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Erstelle ein Textfeld",
|
"nameDe": "Waypoint: Erstelle ein Textfeld",
|
||||||
|
|
@ -1772,8 +1897,13 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Agrega un texto de relleno a un campo de texto",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Tu texto de relleno es el que aparece campo de texto antes de que tu usuario haya ingresado datos.",
|
||||||
|
"Puedes crear un texto de relleno de esta manera:",
|
||||||
|
"<code><input type=\"text\" placeholder=\"este es un texto de relleno\"></code>",
|
||||||
|
"Establece el valor del <code>texto de relleno</code> de tu campo de texto como \"cat photo URL\"."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Füge Platzhalter zu einem Textfeld hinzu",
|
"nameDe": "Waypoint: Füge Platzhalter zu einem Textfeld hinzu",
|
||||||
|
|
@ -1853,8 +1983,13 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Crea un elemento de formulario",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Puedes construir formularios web que realmente envíen datos a un servidor usando nada más que HTML puro. Puedes hacerlo especificando una acción en tu elemento <code>form</code>.",
|
||||||
|
"Por ejemplo:",
|
||||||
|
"<code><form action=\"/url-al-que-quieres-enviar-los-datos-del-formulario\"></form></code>",
|
||||||
|
"Anida tu campo de texto en un elemento <code>form</code>. Agrega el atributo <code>action=\"/submit-cat-photo\"</code> a este elemento de formulario."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Erstelle ein Formular",
|
"nameDe": "Waypoint: Erstelle ein Formular",
|
||||||
|
|
@ -1937,8 +2072,13 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Agrega un botón Enviar a un formulario",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Añadamos un elemento <code>submit</code> a tu formulario. Al hacer clic en este botón enviará los datos del formulario a la URL especificada en el atributo <code>action</code> de tu formulario. ",
|
||||||
|
"He aquí un ejemplo de un botón de envío:",
|
||||||
|
"<code><button type=\" submit\">este botón envía el formulario</botón></code>",
|
||||||
|
"Agrega un botón de enviar a tu elemento <code>form</code> con el tipo <code>submit</code> y con el texto \"Submit\"."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Füge eine Schaltfläche zum Senden hinzu",
|
"nameDe": "Waypoint: Füge eine Schaltfläche zum Senden hinzu",
|
||||||
|
|
@ -2019,8 +2159,13 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Utiliza HTML5 para especificar campos obligatorios",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Puedes especificar un campo obligatorio en un formulario para que tu usuario no pueda enviar el formulario hasta que él o ella lo haya llenado.",
|
||||||
|
"Por ejemplo, si quieres requerir obligatoriamente un campo de texto, puedes agregar la palabra <code>required</code> dentro de tu elemento <code>input</code>, usarías: <code><input type=\"text\" required></code> ",
|
||||||
|
"Haz de tu campo de texto un campo obligatorio, de manera que tu usuario no pueda enviar el formulario sin completar este campo.",
|
||||||
|
"A continuación, intenta enviar el formulario sin ingresar texto alguno. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio?"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Nutze HTML5 um ein Pflichtfeld zu erstellen",
|
"nameDe": "Waypoint: Nutze HTML5 um ein Pflichtfeld zu erstellen",
|
||||||
|
|
@ -2109,8 +2254,16 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Crea un Conjunto de botones de radio",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Puede usar <code>botones de radio</code> para las preguntas en las que desea que el usuario sólo le de una de varias posibles respuestas.",
|
||||||
|
"Los botones de radio son un tipo de <code>input</code>",
|
||||||
|
"Cada uno de los botones de radio debe estar anidado dentro de su propio elemento <code>label</code>.",
|
||||||
|
"Todos los botones de radio relacionados deben tener el mismo atributo <code>name</code>.",
|
||||||
|
"He aquí un ejemplo de un botón de radio:",
|
||||||
|
"<code><label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label></code>",
|
||||||
|
"Agrega un par de botones de radio a tu formulario. Uno debe tener la opción de <code>indoor</code> y el otro debe tener la opción <code>outdoor</code>. "
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Erstelle ein paar Optionsfelder",
|
"nameDe": "Waypoint: Erstelle ein paar Optionsfelder",
|
||||||
|
|
@ -2202,8 +2355,16 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Crea un conjunto de casillas de verificación",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Los formularios suelen usar <code>casillas de verificación</code> para preguntas que pueden tener más de una respuesta.",
|
||||||
|
"Las casillas de verificación son un tipo de <code>entrada</code>",
|
||||||
|
"Cada una de tus casillas de verificación deben ser anidado dentro de su propio <code>etiqueta</code>.",
|
||||||
|
"Todas las entradas de casillas de verificación relacionadas deben tener el mismo atributo <code>name</code>.",
|
||||||
|
"He aquí un ejemplo de una casilla de verificación:",
|
||||||
|
"<code><label><input type=\"checkbox\" name=\"personality\"> Cariñoso</label></code>",
|
||||||
|
"Añade a tu formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento <code>label</code>. Las tres deben compartir el atributo <code>nombre</code>."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Erstelle ein paar Kontrollkästchen",
|
"nameDe": "Waypoint: Erstelle ein paar Kontrollkästchen",
|
||||||
|
|
@ -2290,8 +2451,13 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Marca botones de radio y casillas de verificación por omisión",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Puedes marcar por omisión una casilla de verificación o un botón de radio usando el atributo <code>checked</code>.",
|
||||||
|
"Para ello, sólo tienes que añadir la palabra \"checked\" en el interior de un elemento de entrada. Por ejemplo:",
|
||||||
|
"<code><input type=\"radio\" name=\"nombre-de-prueba\" checked></code>",
|
||||||
|
"Establece como marcados por omisión el primero de tus <code>botones de radio</code> y la primera <code>casilla de verificación</code>."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Standardmäßig ausgewählte Optionsfelder und Kontrollkästchen",
|
"nameDe": "Waypoint: Standardmäßig ausgewählte Optionsfelder und Kontrollkästchen",
|
||||||
|
|
@ -2382,8 +2548,14 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Anida muchos elementos dentro de una sólo elemento Div",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"El elemento <code>div</code>, también conocido como un elemento de división, es un contenedor de propósito general para otros elementos.",
|
||||||
|
"El elemento <code>div</code> es probablemente el elemento HTML más utilizado. Es útil para pasar el CSS de sus propias declaraciones de clase a todos los elementos que contiene. ",
|
||||||
|
"Al igual que cualquier otro elemento sin cierre automático, puede abrir una etiqueta <code>div</code> con <code><div></code> y cerrarla en otra línea con <code></div></code> .",
|
||||||
|
"Trata de poner tu etiqueta de apertura <code>div</code> por encima de elemento <code>p</code> \"Things cat love\", y tu etiqueta de cierre de <code>div</code> después de tu etiqueta de cierre de <code>ol</code>, para que cada una de tus listas estén dentro de un <code>div</code>. ",
|
||||||
|
"Anida tus listas \"Things cats love\" y \"Things cats hate\" dentro de un solo elemento <code>div</code>."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Umschließe viele Elemente mit einem einzigen Div Element",
|
"nameDe": "Waypoint: Umschließe viele Elemente mit einem einzigen Div Element",
|
||||||
|
|
@ -2477,8 +2649,15 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Da un color de fondo a un elemento Div",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Puedes fijar el color de fondo de un elemento con la propiedad <code>background-color</code>.",
|
||||||
|
"Por ejemplo, si quieres que el color de fondo de un elemento sea verde (<code>green</code>), ponlo en tu elemento <code>style</code>:",
|
||||||
|
"<code>.green-background {</code>",
|
||||||
|
"<code> background-color: green;</code>",
|
||||||
|
"<code>}</code>",
|
||||||
|
"Crea una clase llamada <code>gray-background</code> con la propiedad <code>background-color</code> en gris (<code>gray</code>). Asigna esta clase a tu elemento <code>div</code> ."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -2568,8 +2747,15 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Establecer el ID de un elemento",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Además de las clases, cada elemento HTML también puede tener un atributo de identificación <code>id</code>.",
|
||||||
|
"Hay varias ventajas al usar atributos <code>id</code>, y aprenderás más sobre estas cuando comiences a usar jQuery.",
|
||||||
|
"Los atributos <code>id</code> deben ser únicos. Los navegadores no obligarán esto, pero es ampliamente reconocido como una de las mejores prácticas. Así que por favor no le dé a más de un elemento un mismo atributo <code>id</code>. ",
|
||||||
|
"He aquí un ejemplo de cómo le das la identificación <code>cat-photo-app</code> a tu elemento <code>h2</code>:",
|
||||||
|
"<code><h2 id=\"cat-photo-app\"></code>",
|
||||||
|
"Dale a tu elemento <code>form</code> la id <code>cat-photo-form</code>."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -2664,8 +2850,16 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Usa un atributo ID para dar estilo a un elemento",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Una cosa buena sobre los atributos <code>id</code> es que, al igual que con clases, puede darles estilo usando CSS.",
|
||||||
|
"He aquí un ejemplo de cómo puede tomar su elemento con atributo <code>id</code> en <code>cat-photo-element</code> y póngale el color de fondo verde. En su elemento <code>style</code>: ",
|
||||||
|
"<code>#cat-photo-element {</code>",
|
||||||
|
"<code> background-color: green;</code>",
|
||||||
|
"<code>}</code>",
|
||||||
|
"Ten en cuenta que dentro de tu elemento <code>style</code>, siempre referencias clases poniendo un <code>.</code> en frente de sus nombres. Y siempre referencias identificaciones poniendo un <code>#</code> frente a sus nombres. ",
|
||||||
|
"Trata de darle a tu formulario, que ahora tiene el atributo <code>id</code> en <code>cat-photo-form</code>, un fondo verde."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -2730,8 +2924,16 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Ajusta el relleno de un elemento",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Ahora vamos a dejar un poco de lado nuestra aplicación de fotos de gatos, y aprenderemos más sobre dar estilo a HTML",
|
||||||
|
"Ya habrás notado esto, pero todos los elementos HTML son esencialmente pequeños rectángulos.",
|
||||||
|
"Tres propiedades importantes controlan el espacio que rodea a cada elemento HTML: relleno (<code>padding</code>), margen (<code>margin</code>) y borde (<code>border</code>)",
|
||||||
|
"El relleno (<code>padding</code>) de un elmento controla la cantidad de espacio entre el elemento y su borde (<code>border</code>).",
|
||||||
|
"Aquí, podemos ver que el cuadro verde y el cuadro rojo se anidan dentro del cuadro amarillo. Tenga en cuenta que el cuadro rojo tiene más <code>padding</code> que el cuadro verde. ",
|
||||||
|
"Cuando aumentas el <code>padding</code> de la caja verde, aumentará la distancia entre el texto <code>padding</code> y el borde alrededor de este.",
|
||||||
|
"Cambia el <code>padding</code> de la caja verde para que coincida con la de tu cuadro rojo."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Wegpunkt: Justiere den Innenabstand eines Elements",
|
"nameDe": "Wegpunkt: Justiere den Innenabstand eines Elements",
|
||||||
|
|
@ -2800,8 +3002,13 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Ajusta el margen de un elemento",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"El margen (<code>margin</code>) de un elemento controla la cantidad de espacio entre el borde (<code>border</code>) y los elementos alrededor.",
|
||||||
|
"Aquí, podemos ver que la caja verde y la caja roja se anidan dentro de la caja amarilla. Tenga en cuenta que la caja roja tiene más margen (<code>margin</code>) que la caja verde, haciendo que parezca más pequeña. ",
|
||||||
|
"Cuando aumentas el margen (<code>margin</code>) de la caja verde, aumentará la distancia entre su borde y los elementos que la rodean.",
|
||||||
|
"Cambia el margen (<code>margin</code>) de la caja verde para que coincida con el de la caja roja."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Passe den Außenabstand eines Elements an",
|
"nameDe": "Waypoint: Passe den Außenabstand eines Elements an",
|
||||||
|
|
@ -2869,8 +3076,13 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Agregar un margen negativo a un elemento",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"El margen de un elemento controla la cantidad de espacio entre el borde del elemento y los elementos que lo rodean.",
|
||||||
|
"Si estableces el margen de un elemento en un valor negativo, el elemento se hará más grande.",
|
||||||
|
"Trate de establecer el margen (<code>margin</code>) a un valor negativo como el de la caja roja.",
|
||||||
|
"Cambia el margen (<code>margin</code>) de la caja verde a <code>-15px</code>, de forma que ocupe todo el ancho horizontal de la caja amarilla que lo rodea."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Waypoint: Füge einem Element negativen Außenabstand hinzu",
|
"nameDe": "Waypoint: Füge einem Element negativen Außenabstand hinzu",
|
||||||
|
|
@ -2941,8 +3153,12 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Añade relleno diferente a cada lado de un elemento",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"A veces quieres personalizar un elemento para que tenga diferente relleno (<code>padding</code>) en cada uno de sus lados.",
|
||||||
|
"CSS te permite controlar el <code>relleno</code> de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> y <code>padding-left</code>. ",
|
||||||
|
"Da a la caja verde un relleno (<code>padding</code>) de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en sus partes inferior y derecha."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Wegpunkt: Gib jeder Seite eines Elements unterschiedlichen Innenabstand",
|
"nameDe": "Wegpunkt: Gib jeder Seite eines Elements unterschiedlichen Innenabstand",
|
||||||
|
|
@ -3012,8 +3228,12 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Añade márgenes diferentes a cada lado de un elemento",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"A veces quieres personalizar un elemento para que tenga un margen (<code>margin</code>) diferente en cada uno de sus lados.",
|
||||||
|
"CSS te permite controlar el margen de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> y <code>margin-left</code>. ",
|
||||||
|
"Da a la caja verde un margen (<code>margin</code>) de <code>40px</code> en la parte superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Wegpunkt: Füge jeder Seite eines Elements unterschiedlichen Außenabstand hinzu",
|
"nameDe": "Wegpunkt: Füge jeder Seite eines Elements unterschiedlichen Außenabstand hinzu",
|
||||||
|
|
@ -3080,8 +3300,13 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Utiliza notación en sentido horario para especificar el relleno de un elemento",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"En lugar de especificar las propiedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> y <code>padding-left</code> de un elemento, puedes especificar todas en una sola línea, así: ",
|
||||||
|
"<code>padding: 10px 20px 10px 20px;</code>",
|
||||||
|
"Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.",
|
||||||
|
"Usa la notación en sentido horario para darle a la clase \".green-box\" un relleno de <code>40px</code> en la parte superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho ."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Wegpunkt: Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen",
|
"nameDe": "Wegpunkt: Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen",
|
||||||
|
|
@ -3150,8 +3375,14 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Utiliza notación en sentido horario para especificar el margen de un elemento",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Vamos a intentar esto de nuevo, pero esta vez con el margen (<code>margin</code>).",
|
||||||
|
"En lugar de especificar las propiedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, y <code>padding-left</code> de un elemento, puedes especificarlas en una sóla línea así: ",
|
||||||
|
"<code>margin: 10px 20px 10px 20px;</code>",
|
||||||
|
"Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones que especifican el margen.",
|
||||||
|
"Usa <code>notación en sentido horario</code> para dar al elemento con la clase <code>green-box</code> un margen de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho ."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "Wegpunkt: Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen",
|
"nameDe": "Wegpunkt: Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen",
|
||||||
|
|
@ -3190,8 +3421,16 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Da estilo en HTML al elemento cuerpo",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Ahora vamos a empezar de nuevo y hablaremos de herencia CSS.",
|
||||||
|
"Cada página HTML tiene un cuerpo (<code>body</code>).",
|
||||||
|
"Podemos demostrar que el elemento (<code>body</code>) existe aquí, dandole un color de fondo (<code>background-color</code>) negro.",
|
||||||
|
"Podemos hacer esto añadiendo lo siguiente a nuestro elemento <code>style</code>:",
|
||||||
|
"<code>body {</code>",
|
||||||
|
"<code> background-color: black;</code>",
|
||||||
|
"<code>}</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3232,8 +3471,14 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Hereda estilos del elemento cuerpo",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Ya hemos demostrado que cada página HTML tiene un cuerpo (<code>body</code>), y que puede dársele estilo CSS.",
|
||||||
|
"Recuerda, que puedes dar estilo de tu elemento <code>body</code> como a cualquier otro elemento HTML, y que todos tus otros elementos heredarán sus estilos de tu elemento <code>body</code>.",
|
||||||
|
"En primer lugar, crea un elemento <code>h1</code> con el texto <code>Hello World</code>",
|
||||||
|
"Después, vamos a darle a todos los elementos de tu página el color verde (<code>green</code>) añadiendo <code>color: green;</code> a la declaración de estilo de tu elemento <code>body</code>.",
|
||||||
|
"Por último, da a tu elmento <code>body</code> el tipo de letra <code>Monospace</code> añadiendo <code>font-family: Monospace;</code> a la declaración del estilo de tu elemento <code>body</code>."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3271,8 +3516,14 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Priorizar un estilo sobre otro",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"A veces los elementos HTML recibirán múltiples estilos que entran en conflicto entre sí.",
|
||||||
|
"Por ejemplo, el elemento <code>h1</code> no puede ser verde y rosa al mismo tiempo.",
|
||||||
|
"Vamos a ver lo que sucede cuando creamos una clase que hace rosado el texto y luego lo aplicamos a un elemento. ¿Anulará (<code>override</code>) nuestra clase la propiedad CSS <code>color: green</code> del elemento <code>body</code>?",
|
||||||
|
"Crea una clase CSS llamada <code>pink-text</code> que le da a un elemento el color rosado.",
|
||||||
|
"Ponle a tu elemento <code>h1</code> la clase de <code>pink-text</code>."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3315,8 +3566,15 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Anula los estilos en CSS posterior",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Nuestra clase \"pink-text\" anuló la declaración CSS de nuestro elemento <code>body</code>!",
|
||||||
|
"Acabamos de demostrar que nuestras clases anularán el CSS del elemento <code>body</code>. Así que la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase <code>pink-text</code>?",
|
||||||
|
"Crea una clase CSS adicional llamada <code>texto-azul</code> que le de a un elemento el color azul. Asegúrate de que está debajo de tu declaración de la clase <code>pink-text</code>. ",
|
||||||
|
"Aplica la clase <code>blue-text</code> a tu elemento <code>h1</code> además de tu clase <code>pink-text</code> y veamos cual gana.",
|
||||||
|
"La aplicación de múltiples atributos de clase a un elemento HTML se hace usando espacios entre ellos así:",
|
||||||
|
"<code>class=\"clase1 clase2\"</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3369,8 +3627,19 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Anula la declaración de clases dando estilo a los atributos ID",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Acabamos de demostrar que los navegadores leen CSS de arriba hacia abajo. Eso significa que, en el caso de un conflicto, el navegador utilizará la última declaración CSS. ",
|
||||||
|
"Pero no hemos terminado todavía. Hay otras maneras que usted puede anular CSS. ¿Te acuerdas de los atributos id?",
|
||||||
|
"Anulemos tus clases <code>pink-text</code> y <code>blue-text</code>, y pongamos anaranjado tu elemento <code>h1</code>, dándole una identificación al elemento <code>h1</code> y poniéndole estilo a esa identificación (<code>id</code>).",
|
||||||
|
"Dale a tu elemento <code>h1</code> el atributo <code>id</code> con valor <code>orange-text</code>. Recuerda, los estilos id se ven así: ",
|
||||||
|
"<code><h1 id=\"orange-text\"></code>",
|
||||||
|
"Deja las clases <code>blue-text</code> y <code>pink-text</code> de tu elemento <code>h1</code>.",
|
||||||
|
"Crea una declaración CSS para tu identificación <code>orange-text</code> en tu elemento <code>estilo</code>. He aquí un ejemplo de como se ve esto: ",
|
||||||
|
"<code>#brown-text {</code>",
|
||||||
|
"<code> color: brown;</code>",
|
||||||
|
"<code>}</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3420,8 +3689,14 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Anula declaraciones de clase con estilos en línea",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Así que hemos demostrado que las declaraciones de identificadores anulan las declaraciones de clase, independientemente del lugar donde se declaran en tu elemento de estilo CSS <code>style</code>.",
|
||||||
|
"Hay otras maneras en las que puedes anular CSS. ¿Te acuerdas de los estilos en línea?",
|
||||||
|
"Utiliza un <code>in-line style</code> para tratar de hacer blanco nuestro elemento <code>h1</code>. Recuerda, los estilos en línea se ven así: ",
|
||||||
|
"<code><h1 style=\"color: green\"></code>",
|
||||||
|
"Deja las clases <code>blue-text</code> y <code>pink-text</code> en tu elmento <code>h1</code>."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3474,8 +3749,16 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Anula todos los demás estilos utilizando Important",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"¡Hurra! Demostramos que los estilos en línea anularán todas las declaraciones CSS de tu elemento <code>style</code>. ",
|
||||||
|
"Pero espera. Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, vamos a hablar de por qué puedes querer anular CSS. ",
|
||||||
|
"En muchas situaciones, usarás bibliotecas CSS. Estas pueden anular accidentalmente tu propio CSS. Por eso, cuando necesitas estar seguro de que un elemento tiene un CSS específico puedes usar <code>!important</code>",
|
||||||
|
"Regresemos a nuestra declaración de clase <code>pink-text</code>. Recuerda que nuestra clase <code>pink-text</code> fue anulada por declaraciones de clases posteriores, declaraciones id, y estilos en línea. ",
|
||||||
|
"Vamos a añadir la palabra clave <code>!important</code> a tu declaración del color de <code>pink-text</code> para estar 100% seguros que tu elemento <code>h1</code> será rosado.",
|
||||||
|
"Un ejemplo de cómo hacer esto es:",
|
||||||
|
"<code>color: red !important;</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3509,8 +3792,13 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Usa el código hexadecimal para especificar colores",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"¿Sabías que hay otras maneras de representar los colores en CSS? Una de estas formas es llamada código hexadecimal o <code>código hex</code> para abreviar. ",
|
||||||
|
"<code>Decimal</code> se refiere a los números del cero al nueve -. los números que la gente usa en la vida cotidiana. <code>Hexadecimal</code> incluye estos 10 números, más las letras A, B, C, D, E y F. Esto significa que Hexadecimal tiene un total de 16 valores posibles, en lugar de los 10 valores posibles que nos da nuestro sistema numérico normal en base-10. ",
|
||||||
|
"Con CSS, utilizamos 6 números hexadecimales para representar los colores. Por ejemplo, <code>#000000</code> es el valor más bajo posible, y representa el color negro. ",
|
||||||
|
"Reemplaza la palabra <code>negro</code> en el color de fondo (<code>background-color</code>) de nuestro elemento <code>body</code> por su representación hexadecimal <code>#000000</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3543,8 +3831,12 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Usa el código hexadecimal para colorear de blanco los elementos",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"<code>0</code> es el número más bajo en código hexadecimal, y representa una completa ausencia de color.",
|
||||||
|
"<code>F</code> es el número más alto en código hexadecimal, y representa el máximo brillo posible.",
|
||||||
|
"Volvamos blanco el color de fondo (<code>background-color</code>) de nuestro elemento <code>body</code>, cambiando su código hexadecimal por <code>#FFFFFF</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3579,8 +3871,14 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Usa el código hexadecimal para colorear de rojo los elementos",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Te puedes estar preguntando por qué usamos 6 dígitos para representar un color en lugar de sólo uno o dos. La respuesta es que el uso de 6 dígitos nos da una enorme variedad. ",
|
||||||
|
"¿Cuántos colores son posibles? 16 valores y 6 posiciones significa que tenemos 16 a la sexta potencia, o más de 16 millones de colores posibles. ",
|
||||||
|
"Los códigos hexadecimales siguen el formato rojo-verde-azul (<em>red-green-blue</em>) o formato <code>rgb</code>. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul .",
|
||||||
|
"Así que para conseguir el rojo absolutamente más brillante, basta que uses <code>F</code> para el primer y segundo dígitos (el valor más alto posible) y <code>0</code> para el tercero, cuarto, quinto y sexto dígitos (el valor más bajo posible).",
|
||||||
|
"Haz que el color de fondo (<code>background-color</code>) del elemento <code>body</code> sea rojo dándole el código hexadecimal <code>#FF0000</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3613,8 +3911,12 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Usa el código hexadecimal para colorear de verde los elementos",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Recuerda que el <code>código hexadecimal</code> sigue el formato rojo-verde-azul o <code>rgb</code>. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representar la cantidad de azul.",
|
||||||
|
"Así que para conseguir el verde absoluto más brillante, sólo usas <code>F</code> en el tercer y cuarto dígitos (el valor más alto posible) y <code>0</code> para todos los otros dígitos (el valor más bajo posible). ",
|
||||||
|
"Haz que el color de fondo (<code>background-color</code>) del elemento <code>body</code> sea verde, dándole el código hexadecimal <code>#00FF00</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3647,8 +3949,12 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Usa el código hexadecimal para colorear de azul los elementos",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Los códigos hexadecimales siguen el formato rojo-verde-azul o <code>rgb</code>. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representar la cantidad de azul .",
|
||||||
|
"Así que para conseguir el azul absoluto más brillante, utilizamos <code>F</code> para la quinta y sexta cifras (el valor más alto posible) y <code>0</code> para todos los otros dígitos (el valor más bajo posible ). ",
|
||||||
|
"Haz que el color de fondo (<code>background-color</code>) del elemento <code>body</code> sea azul, dándole el código hexadecimal <code>#0000FF</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3681,8 +3987,12 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Usa código hex para mezclar colores",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.",
|
||||||
|
"Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde, y sin azul.",
|
||||||
|
"Haz que el color de fondo del elemento <code>body</code> sea anaranjado, dándole el código hexadecimal <code>#FFA500</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3715,8 +4025,12 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Usa el código hexadecimal para colorear de gris los elementos",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.",
|
||||||
|
"También podemos crear diferentes tonos de gris mezclando uniformemente los tres colores.",
|
||||||
|
"Hacer que el color de fondo del elemento <code>body</code> sea gris, dándole el código hexadecimal <code>#808080</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3748,8 +4062,11 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Usa el código hexadecimal para colorear con tonos grises",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"También podemos crear otros tonos de gris mezclando uniformemente los tres colores. Podemos ir muy cerca del verdadero negro. ",
|
||||||
|
"Haz que el color de fondo del elemento <code>body</code> sea gris oscuro dandole el código hexadecimal <code>#111111</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3783,8 +4100,13 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Uso código hex abreviado",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Mucha gente se siente abrumada por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente, usted puede acortarlo. ",
|
||||||
|
"Por ejemplo, el rojo, que es <code>#FF0000</code> en código hexadecimal, se puede abreviar a <code>#F00</code>. Es decir, un dígito para el rojo, un dígito para el verde, un dígito para el azul. ",
|
||||||
|
"Esto reduce el número total de posibles colores a alrededor de 4.000. Pero los navegadores interpretarán <code>#FF0000</code> y <code>#F00</code> como exactamente el mismo color. ",
|
||||||
|
"Adelante, intente usar <code>#F00</code> para volver rojo el color de fondo del elemento <code>body</code>."
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3822,8 +4144,18 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Usa RGB para colorear elementos",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Otra forma en la que puedes representar colores en CSS es usando valores <code>rgb</code>.",
|
||||||
|
"El valor RGB para el negro, luce así:",
|
||||||
|
"<code>rgb(0, 0, 0)</code>",
|
||||||
|
"El valor RGB para el blanco, se ve así:",
|
||||||
|
"<code>rgb(255, 255, 255)</code>",
|
||||||
|
"En lugar de utilizar seis dígitos hexadecimales, con <code>rgb</code> especificas el brillo de cada color con un número entre 0 y 255.",
|
||||||
|
"Si haces la matemática, 16 veces 16 es 256 valores totales. Así que <code>rgb</code>, que comienza a contar desde cero, tiene exactamente el mismo número de valores posibles que el código hexadecimal.",
|
||||||
|
"Remplacemos el código hexadecimal del color de fondo de nuestro elemento <code>body</code> por el valor RGB para el negro: <code>rgb(0, 0, 0)</code>"
|
||||||
|
],
|
||||||
|
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3859,8 +4191,15 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Usa RGB para colorear de blanco los elementos",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"El valor RGB para el negro, luce así:",
|
||||||
|
"<code>rgb(0, 0, 0)</code>",
|
||||||
|
"El valor RGB para el blanco, se ve así:",
|
||||||
|
"<code>rgb(255, 255, 255)</code>",
|
||||||
|
"En lugar de utilizar seis dígitos hexadecimales, con <code>rgb</code> especificas el brillo de cada color con un número entre 0 y 255.",
|
||||||
|
"Cambia el color de fondo del elemento <code>body</code> del valor RGB para el negro al valor <code>rgb</code> para el blanco: <code>rgb(255, 255, 255)</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3893,8 +4232,12 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Usa RGB para colorear de rojo los elementos",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Al igual que con el código hexadecimal, puedes representar diferentes colores en RGB mediante el uso de combinaciones de diferentes valores.",
|
||||||
|
"Estos valores siguen el patrón de RGB: el primer número representa rojo, el segundo número representa el verde, y el tercer número representa azul.",
|
||||||
|
"Cambia el color de fondo del elemento <code>body</code> al rojo usando su valor RGB: <code>rgb(255, 0, 0)</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3925,8 +4268,10 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Usa RGB para colorear de verde los elementos",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Ahora cambia el color de fondo del elemento <code>body</code> a verde usando su valor RGB: <code>rgb (0, 255, 0)</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3957,8 +4302,10 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Usa RGB para colorear de azul los elementos",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Cambia el color de fondo del elemento <code>body</code> a azul usando su valor RGB: <code>rgb(0, 0, 255)</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
@ -3990,8 +4337,11 @@
|
||||||
"descriptionFr": [],
|
"descriptionFr": [],
|
||||||
"nameRu": "",
|
"nameRu": "",
|
||||||
"descriptionRu": [],
|
"descriptionRu": [],
|
||||||
"nameEs": "",
|
"nameEs": "Usa RGB para mezclar colores",
|
||||||
"descriptionEs": [],
|
"descriptionEs": [
|
||||||
|
"Al igual que con el código hexadecimal, puedes mezclar los colores en RGB mediante el uso de combinaciones de diferentes valores.",
|
||||||
|
"Cambia el color de fondo del elemento <code>body</code> a anaranjado usando su valor RGB: <code>rgb(255, 165, 0)</code>"
|
||||||
|
],
|
||||||
"namePt": "",
|
"namePt": "",
|
||||||
"descriptionPt": [],
|
"descriptionPt": [],
|
||||||
"nameDe": "",
|
"nameDe": "",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue