diff options
Diffstat (limited to 'files/es/conflicting/learn')
15 files changed, 0 insertions, 3387 deletions
diff --git a/files/es/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/es/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html deleted file mode 100644 index d927df50e1..0000000000 --- a/files/es/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Cascada y herencia -slug: conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance -original_slug: Web/CSS/Introducción/Cascading_and_inheritance ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/es/docs/Web/CSS/Introduction/How_CSS_works", "Cómo funciona el CSS.")}}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="hps">es</span> <span class="hps">la cuarta sección </span> <span class="alt-edited hps">del</span> <span class="hps">tutorial</span><span> <span class="hps">CSS</span> <span class="hps">Primeros pasos</span>;</span> <span class="hps">que</span> <span class="hps">describe cómo</span> <span class="hps">interactúan</span> <span class="hps">las hojas de estilo</span> <span class="hps">en cascada,</span> <span class="hps">y</span> <span class="hps">cómo los elementos</span> <span class="hps">heredan</span> <span class="hps">el estilo</span> <span class="hps">de sus padres.</span> <span class="alt-edited hps">Usted agrega</span> <span class="hps">a</span> <span class="hps">la hoja de estilos</span> <span class="alt-edited hps">de ejemplo,</span> <span class="hps">utilizando la herencia</span> <span class="alt-edited hps">para alterar</span> <span class="hps">el estilo de</span> <span class="alt-edited hps">muchas partes del</span> <span class="hps">documento</span> <span class="hps">en un solo paso</span><span>.</span></span></p> - -<h2 class="clearLeft" id="Información_Cascada_y_herencia"><span class="short_text" id="result_box" lang="es"><span class="hps">Información</span><span>:</span> <span class="hps">Cascada</span> <span class="hps">y</span> <span class="hps">herencia</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">El estilo</span> <span class="hps">final para</span> <span class="hps">un elemento</span> <span class="hps">se puede especificar en</span> <span class="hps">muchos lugares</span> <span class="hps">diferentes</span><span>, que pueden interactuar</span> <span class="hps">de una manera compleja</span><span>.</span> <span class="hps">Esta interacción</span> <span class="hps">compleja</span> <span class="hps">hace</span> <span class="alt-edited hps">el CSS</span> <span class="alt-edited hps">poderoso</span><span>,</span> <span class="alt-edited hps">pero puede también</span> <span class="hps">hacer que sea</span> <span class="hps">confuso y difícil</span> <span class="hps">de depurar.</span></span></p> - -<p><span id="result_box" lang="es"><span class="alt-edited hps">Tres</span> <span class="alt-edited hps">principales fuentes de</span> <span class="hps">información de estilo</span> <span class="alt-edited hps">forman</span> <span class="hps">una <em>cascada</em></span><span>.</span> <span class="alt-edited hps">Estas son:</span></span></p> - -<ul> - <li><span id="result_box" lang="es"><span class="hps">Estilos</span> <span class="hps">por defecto del navegador</span> <span class="hps">para</span> <span class="alt-edited hps">del lenguaje de marcado</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Estilos</span> <span class="hps">especificados</span> <span class="hps">por un usuario</span> <span class="hps">que está leyendo</span> <span class="hps">el documento</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">estilos</span> <span class="hps">relacionados en </span><span class="hps">el documento</span> <span class="hps">por su autor</span><span>.</span> <span class="hps">Estos pueden</span> <span class="hps">ser especificados</span> <span class="hps">en tres lugares</span><span>:</span></span> - <ul> - <li><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">un archivo externo</span><span>:</span> <span class="hps">este tutorial</span> <span class="alt-edited hps">aborda</span> <span class="hps">principalmente</span> <span class="hps">este</span> <span class="hps">método para definir</span> <span class="hps">los estilos.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">En una definición</span> <span class="hps">al principio</span> <span class="hps">del documento</span><span>: utilice</span> <span class="alt-edited hps">este método únicamente</span> <span class="hps">para los estilos</span> <span class="hps">que se utilizan sólo</span> <span class="hps">en esa página</span> <span class="hps">.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">En un</span> <span class="hps">elemento específico</span> <span class="hps">en el cuerpo</span> <span class="hps">del documento</span><span>:</span> <span class="hps">este</span> <span class="hps">es el método menos</span> <span class="alt-edited hps">fácil de mantener</span><span>,</span> <span class="hps">pero puede ser utilizado</span> <span class="alt-edited hps">para la probar.</span></span></li> - </ul> - </li> -</ul> - -<p><span id="result_box" lang="es"><span class="hps">El estilo del</span> <span class="hps">usuario modifica</span> <span class="hps">el estilo</span> <span class="hps">por defecto del navegador</span><span>.</span> <span class="alt-edited hps">El estilo</span> <span class="hps">del autor del documento</span> <span class="alt-edited hps">a continuación</span> <span class="hps">modifica</span> <span class="hps">el estilo</span> <span class="hps">un poco más.</span> <span class="hps">En este tutorial,</span> <span class="hps">usted es el autor</span> <span class="hps">del documento</span> <span class="alt-edited hps">de ejemplo,</span> <span class="hps">y</span> <span class="hps">solo trabaja</span> <span class="hps">con</span> <span class="hps">hojas de estilo</span> <span class="hps">del autor</span><span>.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type">Ejemplo</div> - -<p><span id="result_box" lang="es"><span class="hps">Cuando lea este</span> <span class="hps">documento en un navegador</span><span>,</span> <span class="hps">parte del estilo</span> <span class="alt-edited hps">que ves</span> <span class="alt-edited hps">proviene</span> <span class="alt-edited hps">por defecto</span> <span class="hps">de su</span> <span class="alt-edited hps">navegador de</span> <span class="hps">HTML</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Parte del</span> <span class="hps">estilo</span> <span class="hps">podría venir de</span> <span class="alt-edited hps">los ajustes </span></span><span id="result_box" lang="es"><span class="hps">personalizados </span></span><span id="result_box" lang="es"><span class="alt-edited hps">del navegador</span> <span class="hps">o</span> <span class="alt-edited hps">de un archivo</span> <span class="alt-edited hps">de definición de estilo</span> <span class="hps">personalizado.</span> <span class="hps">En Firefox</span><span>, la configuración</span> <span class="hps">se puede personalizar en</span> <span class="alt-edited hps">cuadro de diálogo Preferencias</span><span>, o puede</span> <span class="hps">especificar</span> <span class="hps">estilos</span> <span class="hps">en un archivo</span> </span><span id="result_box" lang="es"><span class="alt-edited hps">denominado</span> </span><span id="result_box" lang="es"><em><code><span class="hps">user Content.css,</span></code></em> <span class="alt-edited hps">archivado </span><span class="hps">en su perfil de</span> <span class="hps">navegador.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Parte del</span> <span class="alt-edited hps">estilo</span> <span class="hps">proviene de</span> <span class="hps">las hojas de estilo</span> <span class="hps">vinculadas al</span> <span class="hps">documento</span> <span class="hps">por el servidor</span></span> wiki.</p> -</div> - -<p><span id="result_box" lang="es"><span class="hps">Al abrir su</span> <span class="hps">documento de muestra</span> <span class="hps">en el navegador,</span> <span class="atn hps">los elementos </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="alt-edited hps">son</span> <span class="alt-edited hps">más relevante que</span> <span class="hps">el</span> <span class="hps">resto del texto</span><span>.</span> <span class="alt-edited hps">Esto viene del</span> <span class="hps">estilo por defecto</span> <span class="hps">del navegador</span> <span class="hps">para HTML</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="atn hps">El elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">son rojos.</span> <span class="alt-edited hps">Esto viene</span> <span class="alt-edited hps">de la</span> <span class="hps">propia hoja de estilos</span> <span class="alt-edited hps">de ejemplo.</span></span></p> - -<p><span id="result_box" lang="es"><span class="atn hps">El elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">también</span> <span class="hps">heredan</span> <span class="hps">gran parte del estilo del elemento </span></span>{{ HTMLElement("p") }}<span lang="es"><span class="hps">,</span> <span class="alt-edited hps">porque ellos son</span> <span class="hps">sus</span> <span class="hps">hijos.</span> <span class="hps">De la misma manera</span><span>,</span> <span class="alt-edited hps">los</span> elementos </span>{{ HTMLElement("p") }}<span lang="es"> <span class="alt-edited hps">heredan</span> <span class="hps">gran parte del estilo</span> <span class="hps">del</span> <span class="hps">elemento</span></span>{{ HTMLElement("body") }}<span lang="es"><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Para los estilos</span> <span class="alt-edited hps">en cascada</span><span class="alt-edited">, las hojas de estilo</span> <span class="hps">del autor</span> <span class="hps">tienen</span> <span class="alt-edited hps">prioridad, </span> <span class="alt-edited hps">ante las hojas de estilo</span> <span class="hps">del lector</span><span>, </span> <span class="hps">por defecto</span> <span class="hps">de tu navegador</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Para los estilos</span> <span class="hps">heredados</span><span>,</span> <span class="hps">el estilo propio de</span> <span class="hps">un nodo</span> <span class="hps">hijo tiene</span> <span class="hps">prioridad sobre</span> <span class="alt-edited hps">estilo</span> <span class="hps">heredado de</span> <span class="hps">su</span> <span class="hps">padre</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Estas no son las</span> <span class="hps">únicas prioridades</span> <span class="hps">que se aplican</span><span>.</span> <span class="alt-edited hps">En una página posterior</span><span class="alt-edited hps"> de este</span> <span class="hps">tutorial se explica</span> <span class="alt-edited hps">mas detalladamente</span><span>.</span></span></p> - -<div class="tuto_details"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Más</span> <span class="hps">detalles</span></span></div> - -<p><span id="result_box" lang="es"><span class="alt-edited hps">El CSS</span> <span class="hps">también proporciona</span> <span class="hps">una forma para que</span> <span class="hps">el lector</span> <span class="alt-edited hps">pueda anular</span> <span class="hps">el estilo</span> <span class="hps">del autor del documento</span><span>,</span> <span class="hps">mediante el uso de</span> <span class="hps">la palabra clave</span><span>! </span></span><code>!important</code>.</p> - -<p><span id="result_box" lang="es"><span class="hps">Esto significa</span> <span class="hps">que, como</span> <span class="hps">autor del documento</span><span>,</span> <span class="hps">no siempre se puede</span> <span class="hps">predecir con exactitud</span> <span class="hps">lo que sus lectores</span> <span class="hps">van a ver.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">quieres conocer</span> <span class="hps">todos los detalles de</span></span> cascada y herencia mira <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Asignando propiedad de valores, cascada, y herencia</a> <span id="result_box" lang="es"><span class="hps">en</span> <span class="alt-edited hps">las</span> <span class="hps">especificaciones</span> d<span class="alt-edited hps">el CSS</span><span>.</span></span></p> -</div> - -<h2 id="Acción_El_uso_de_la_herencia"><span class="short_text" id="result_box" lang="es"><span class="hps">Acción</span><span>: El uso de</span> <span class="hps">la herencia</span></span> </h2> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="alt-edited hps"> CSS</span> <span class="alt-edited hps">de ejemplo.</span></span></li> - <li><span id="result_box" lang="es"><span class="alt-edited hps">Agrega</span> <span class="hps">esta línea</span> <span class="hps">copiando y</span> <span class="hps">pegando</span><span>.</span> <span class="hps">Realmente no</span> <span class="hps">importa si</span> <span class="hps">usted la agrega</span> <span class="hps">por encima o por</span> <span class="hps">debajo de la línea</span> <span class="hps">que está</span><span>.</span> <span class="alt-edited hps">Sin embargo, añadirla</span> <span class="hps">en la parte superior</span> <span class="hps">es más</span> <span class="hps">lógico, porque</span> <span class="hps">en el documento </span><span class="alt-edited hps">el</span> elemento </span>{{ HTMLElement("p") }}<span lang="es"> es el <span class="alt-edited hps">elemento</span> <span class="hps">padre</span> <span class="atn hps">del elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span>:</span></span> - <pre class="brush:css">p {color: blue; text-decoration: underline;} -</pre> - </li> - <li>Ahora actualice el navegador para ver el efecto <span id="result_box" lang="es"><span class="hps">en su</span> <span class="hps">documento de muestra.</span></span> El subrayado afecta todo el texto en el párrafo, incluido las letras iniciales. Los elementos {{ HTMLElement("strong") }} <span id="result_box" lang="es"><span class="hps">han heredado</span> <span class="hps">el estilo</span> <span class="hps">subrayado</span> <span class="hps">de su elemento padre </span></span>{{ HTMLElement("p") }}.<br> - - <p><span id="result_box" lang="es"><span class="hps">Pero</span> <span class="atn hps">los elementos </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">siguen siendo</span> <span class="hps">rojo.</span> <span class="hps">El color rojo</span> <span class="hps">es</span> <span class="hps">su estilo</span><span> </span><span class="hps">propio</span><span>,</span> <span class="hps">por lo que tiene</span> <span class="hps">prioridad sobre</span> <span class="hps">el color azul</span> <span class="hps">de su elemento</span> <span class="hps">padre</span> </span>{{ HTMLElement("p") }}<span lang="es"> <span>.</span></span></p> - </li> -</ol> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> -</table> - -<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;"> - <caption>Antes</caption> - <tbody> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<table style="border: 2px outset #3366bb; padding: 1em;"> - <caption>Después</caption> - <tbody> - <tr> - <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Problema</span></span></div> -<span id="result_box" lang="es"><span class="hps">Cambie su</span> hoja de <span class="hps">estilo</span> <span class="hps">de manera que</span> <span class="alt-edited hps">aparecen subrayados</span> <span class="hps">sólo las letras</span> <span class="hps">rojas</span><span>:</span></span> - -<table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p> - -<pre class="brush: css">p {color: blue; } -strong {color: red; text-decoration: underline;} -</pre> - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Ver una solución al desafío.</a></div> - -<h2 id="¿Y_ahora_qué"><span class="short_text" id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectores")}}<span id="result_box" lang="es"><span class="hps">Su</span> <span class="hps">hoja de estilo</span> <span class="hps">de ejemplo especifica</span> <span class="hps">estilos</span> <span class="hps">para las etiquetas</span> <span class="atn hps"><</span><span>p</span><span>></span> <span class="hps">y</span> <span class="hps"><strong</span><span>></span><span>, cambiando el</span> <span class="hps">estilo de</span> <span class="hps">los elementos correspondientes</span> <span class="hps">en todo el documento</span><span>.</span> <span class="hps">La</span> <span class="hps">siguiente sección</span> <span class="hps">describe cómo especificar</span> <span class="hps">el estilo</span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">de manera más selectiva</a></span>.</p> diff --git a/files/es/conflicting/learn/css/building_blocks/index.html b/files/es/conflicting/learn/css/building_blocks/index.html deleted file mode 100644 index 6c07d85ec3..0000000000 --- a/files/es/conflicting/learn/css/building_blocks/index.html +++ /dev/null @@ -1,336 +0,0 @@ ---- -title: Boxes -slug: conflicting/Learn/CSS/Building_blocks -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes -original_slug: Web/CSS/Introducción/Boxes ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Esta es la sección 11 del Tutorial de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> ; <span id="result_box" lang="es"><span class="hps alt-edited">se describen</span> <span class="hps">cómo se puede</span> <span class="hps">usar CSS para</span> <span class="hps">controlar el espacio</span> <span class="hps">que un elemento</span> <span class="hps">ocupa</span> <span class="hps">cuando se muestra</span><span>.</span> <span class="hps">En</span> <span class="hps">su</span> <span class="hps">documento de ejemplo</span><span>, se cambia el</span> <span class="hps">espacio</span> <span class="hps alt-edited">y se agregan</span> <span class="hps">reglas</span> <span class="hps">decorativos.</span></span></p> - -<h2 class="clearLeft" id="Información_Cajas"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Cajas</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">el navegador muestra</span> <span class="hps">un elemento</span><span>, el elemento</span> <span class="hps alt-edited">ocupa un espacio</span><span>.</span> <span class="hps">Hay</span> <span class="hps">cuatro partes en</span> <span class="hps">el espacio</span> <span class="hps">que ocupa</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En el centro,</span> <span class="hps">existe</span> <span class="hps">el espacio que el</span> <span class="hps">elemento</span> <span class="hps">necesita para mostrar</span> <span class="hps">su contenido.</span> <span class="hps">Alrededor de</span> <span class="hps">eso, no hay</span> <span class="hps">relleno.</span> <span class="hps alt-edited">En torno</span> <span class="hps alt-edited">de est, hay</span> <span class="hps alt-edited">un borde</span><span>.</span> <span class="hps alt-edited">En torno</span> <span class="hps alt-edited">esto, hay</span> <span class="hps">un margen</span> <span class="hps">que separa</span> <span class="hps alt-edited">este elemento</span> <span class="hps">de otros elementos</span><span>.</span></span></p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">margin</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">padding</p> - - <div style="background-color: #eee;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> - </div> - </div> - </div> - - <p><span class="short_text" id="result_box" lang="es"><span class="hps">El</span> <span class="hps">gris pálido</span> <span class="hps">muestra</span> <span class="hps">partes del</span> <span class="hps">diseño.</span></span></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #fff;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> - </div> - </div> - </div> - - <p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto es</span> <span class="hps">lo que se ve</span> <span class="hps">en su navegador</span><span>.</span></span></p> - </td> - </tr> - </tbody> -</table> - -<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps alt-edited">relleno, el borde</span> <span class="hps">y</span> <span class="hps alt-edited">el margen</span> <span class="hps">pueden tener diferentes tamaños</span> <span class="hps">en la parte superior</span><span class="alt-edited">, derecha, inferior</span> <span class="hps">e izquierda del</span> <span class="hps">elemento</span><span>.</span> <span class="hps alt-edited">Alguno o</span> <span class="hps">todos estos tamaños</span> <span class="hps">pueden</span> <span class="hps">ser cero</span><span>.</span></span></p> - -<h3 id="Coloreando">Coloreando</h3> - -<p><span id="result_box" lang="es"><span class="hps">El relleno es</span> <span class="hps">siempre</span> <span class="hps">el mismo color que</span> <span class="hps">el elemento del fondo</span><span>.</span> <span class="hps">Así que</span> <span class="hps">cuando se establece el</span> <span class="hps">color de fondo</span><span>, se ve el</span> <span class="hps">color aplicado</span> <span class="hps">al elemento</span> <span class="hps">en sí y su</span> <span class="hps">relleno.</span> <span class="hps">El margen es</span> <span class="hps">siempre</span> <span class="hps">transparente.</span></span></p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">margin</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">padding</p> - - <div style="background-color: #ded;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> - </div> - </div> - </div> - - <p><span class="short_text" id="result_box" lang="es"><span class="hps">El elemento tiene</span> <span class="hps">un fondo verde</span> <span class="hps">.</span></span></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #efe;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> - </div> - </div> - </div> - - <p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto es</span> <span class="hps">lo que se ve</span> <span class="hps">en su navegador</span><span>.</span></span></p> - </td> - </tr> - </tbody> -</table> - -<h3 id="Borders">Borders</h3> - -<p><span id="result_box" lang="es"><span class="hps">Puede utilizar</span> <span class="hps alt-edited">los bordes</span> <span class="hps">para decorar</span> <span class="hps">elementos con</span> <span class="hps">líneas o cuadros</span><span>.</span><br> - <br> - <span class="hps">Para especificar</span> <span class="hps">la misma</span> <span class="hps">frontera</span> <span class="hps">todo</span> <span class="hps">alrededor de un elemento</span><span>, utilice la </span><span class="hps">propiedad</span></span><span lang="es"><span> </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"border</span><span>")}</span><span>}</span> <span class="hps">.</span> <span class="hps">Especifique</span> <span class="hps">el ancho</span> <span class="hps">(por lo general</span> <span class="hps">en píxeles</span> <span class="hps">para la visualización</span> <span class="hps">en una pantalla</span><span>)</span><span>, el estilo</span><span>, y el color</span><span>.</span><br> - <br> - <span class="hps">Los estilos son</span><span>:</span></span></p> - -<table style="margin-left: 2em;"> - <tbody> - <tr> - <td style="width: 6em;"> - <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> - </td> - </tr> - <tr> - <td style="width: 6em;"> - <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> - </td> - </tr> - </tbody> -</table> - -<p><span id="result_box" lang="es"><span class="hps">También puede establecer</span> <span class="hps">el estilo a </span></span><em><strong><code>none</code> </strong>(</em><span lang="es"><em> </em><span class="hps">ninguno) o</span> </span><strong><em><code>hidden</code> </em></strong><span lang="es"><span class="hps alt-edited">(oculto), </span> <span class="hps">para eliminar</span> <span class="hps">explícitamente</span> <span class="hps">la frontera <code>(</code></span></span><code><em><strong>border </strong></em>)</code><span lang="es"><span>,</span> <span class="hps">o</span> <span class="hps">establecer el color</span> como <span class="hps">transparente</span> <span class="hps">para hacer</span> <span class="hps">la frontera</span> <span class="hps">invisible</span> <span class="hps">sin cambiar</span> <span class="hps">el diseño.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Para especificar</span> <span class="hps alt-edited">los bordes</span> <span class="hps">de uno en uno</span> por separado<span>, utilice las propiedades</span><span>:</span> <span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-top</span><span>")}</span><span class="atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-right</span><span>")}</span><span class="atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-bottom</span><span>")}</span> <span class="hps atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-left</span><span>")}</span><span>}</span><span>.</span> <span class="hps">Usted</span> <span class="hps">puede utilizar estas para</span> <span class="hps">especificar</span> <span class="hps alt-edited">un borde</span> <span class="hps"> solo en un lado</span><span>,</span> <span class="hps">o</span> <span class="hps">diferentes</span> <span class="hps alt-edited">los bordes</span> <span class="hps">en diferentes lados</span><span>.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Ejemplo</span></span></div> - -<p><br> - <span id="result_box" lang="es"><span class="hps">Esta norma</span> <span class="hps">establece el</span> <span class="hps">color de fondo y</span> <span class="hps">el borde superior</span> <span class="hps">de los elementos de</span> <span class="hps">la etiqueta <code><strong><em>h3</em></strong></code></span><span>:</span></span></p> - -<pre class="brush:css">h3 { - border-top: 4px solid #7c7; /* mid green */ - background-color: #efe; /* pale green */ - color: #050; /* dark green */ - } -</pre> - -<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> - -<table> - <tbody> - <tr> - <td> - <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Stylish heading</p> - </td> - </tr> - </tbody> -</table> - -<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">hace que</span> <span class="hps">las imágenes</span> sean <span class="hps">fáciles de ver</span><span>, dándoles</span> <span class="hps">un borde</span> <span class="hps">gris medio</span> a <span class="hps">todo</span><span>:</span></span></p> - -<pre class="brush:css">img {border: 2px solid #ccc;} -</pre> - -<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> - -<table> - <tbody> - <tr> - <td>Image:</td> - <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Márgenes_y_relleno"><span id="result_box" lang="es"><span class="hps">Márgenes y</span> <span class="hps">relleno</span></span></h3> - -<p><br> - <span id="result_box" lang="es"><span class="hps">Use</span> <span class="hps">márgenes y el relleno</span> <span class="hps">para ajustar</span> <span class="hps">las posiciones de</span> <span class="hps">los elementos</span> <span class="hps atn">'</span><span>y crear</span> <span class="hps">el espacio</span> <span class="hps">que les rodea.</span><br> - <br> - <span class="hps">Utilice la propiedad </span></span><span lang="es"><span class="hps"> </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps">"</span></span>margin<span lang="es"><span>")}</span><span>}</span> <span class="hps">o</span> la <span class="hps">propiedad </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps">"</span></span>padding<span lang="es"><span>")}</span><span>}</span> <span class="hps">para establecer</span> <span class="hps">los</span> <span class="hps">márgenes y el </span><span class="hps"> relleno</span> con sus <span class="hps">anchuras</span> <span class="hps">respectivamente.</span><br> - <br> - <span class="hps">Si especifica</span> <span class="hps">una</span> <span class="hps">anchura,</span> <span class="hps">que se aplica</span> <span class="hps">en todo el</span> <span class="hps">elemento</span> <span class="hps">(arriba</span><span>, derecha,</span> <span class="hps">abajo y de izquierda</span><span>)</span><span>.</span><br> - <br> - <span class="hps">Si especifica</span> <span class="hps">dos anchos</span><span>,</span> <span class="hps">la</span> <span class="hps">primera se aplica</span> <span class="hps">a la</span> <span class="hps">parte superior e inferior</span><span>,</span> <span class="hps">la segunda a la</span> <span class="hps">derecha y la izquierda</span><span>.</span><br> - <br> - <span class="hps">Puede especificar</span> <span class="hps">los cuatro</span> <span class="hps">anchos</span> <span class="hps">en el orden</span><span>:</span> <span class="hps">arriba, derecha</span><span>,</span> <span class="hps">abajo, de izquierda</span><span>.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Ejemplo</span></span></div> - -<p><br> - <span id="result_box" lang="es"><span class="hps">Esta norma</span> <span class="hps">delimita</span> <span class="hps">párrafos con</span> <span class="hps">la </span></span><code><em><strong> class</strong></em></code> <code>remark</code><span lang="es"><span>, dándoles</span> <span class="hps">un borde rojo</span> <span class="hps">a su alrededor.</span><br> - <br> - <span class="hps">El </span></span><code><strong><em>padding </em></strong></code>(relleno)<code><strong><em> </em></strong></code><span lang="es"><span class="hps">separa </span></span><span lang="es"><span class="hps">un poco </span></span><span lang="es"><span class="hps">todo</span> <span class="hps"> el borde</span> <span class="hps">del texto</span> <span class="hps">.</span></span><br> - <br> - <span id="result_box" lang="es"><span class="hps">A</span> <span class="hps">la izquierda una </span> <span class="hps alt-edited">sangría</span> <span class="hps alt-edited">desde el margen</span> <span class="hps">del</span> <span class="hps">párrafo con respecto al</span> <span class="hps">resto del texto <code><em><strong>(</strong></em></code></span></span><code><em><strong>margin-left</strong></em></code><span lang="es"><span><code><em><strong> )</strong></em></code>:</span></span></p> - -<pre class="brush:css">p.remark { - border: 2px solid red; - padding: 4px; - margin-left: 24px; - } -</pre> - -<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> - -<table> - <tbody> - <tr> - <td> - <p><span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">A continuación</span> <span class="hps">es un párrafo</span> <span class="hps">normal.</span></span></p> - - <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Aqui con la clase remark.</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Más</span> <span class="hps">detalles</span></span></div> - -<p><span id="result_box" lang="es"><span class="hps">Cuando se utiliza</span> <span class="hps">márgenes y el relleno</span> <span class="hps">para ajustar</span> <span class="hps alt-edited">la manera en</span> <span class="hps alt-edited">que los elementos</span> <span class="hps">se disponen</span><span>,</span> <span class="hps">sus</span> <span class="hps">reglas de estilo</span> <span class="hps">interactúan</span> <span class="hps alt-edited">con los estilos</span> <span class="hps">de tu navegador</span> <span class="hps alt-edited">por defecto</span> <span class="hps alt-edited">y pueden ser</span> <span class="hps alt-edited">muy complejas.</span><br> - <br> - <span class="hps">Los distintos navegadores</span> <span class="hps">ponen</span> <span class="hps alt-edited">que los elementos</span> <span class="hps">de manera diferente</span><span>.</span> <span class="hps">Los</span> <span class="hps alt-edited">resultados pueden</span> <span class="hps">ser similar</span> <span class="hps alt-edited">,hasta que nuestro</span> <span class="hps alt-edited">hoja de estilos</span> <span class="hps">cambia las cosas</span><span>.</span> <span class="hps">A veces esto</span> <span class="hps">puede hacer que sus</span> <span class="hps">hojas de estilo</span> <span class="hps alt-edited">den</span> <span class="hps">resultados sorprendentes.</span><br> - <br> - <span class="hps">Para</span> <span class="hps">obtener</span> <span class="hps">el resultado deseado</span><span>, es posible que</span> <span class="hps">tenga que cambiar</span> <span class="hps alt-edited">el marcado</span> <span class="hps">de su</span> <span class="hps">documento.</span> <span class="hps">La</span> <span class="hps">página siguiente de</span> <span class="hps">este tutorial</span> <span class="hps">tiene más</span> <span class="hps">información al respecto.</span><br> - <br> - <span class="hps">Para obtener información</span> <span class="hps">detallada acerca</span> <span class="hps">de relleno</span><span>, márgenes</span> <span class="hps">y bordes</span><span>, consulte</span> <span class="hps">la página de referencia</span> <span class="hps">Modelo de caja</span><span>.</span></span></p> -</div> - -<h2 id="Acción_Agregar_bordes"><span id="result_box" lang="es"><span class="hps">Acción</span><span>:</span> <span class="hps">Agregar bordes</span></span></h2> - -<p>Edite su archivo CSS , <strong><em>style2.css</em></strong>. <span id="result_box" lang="es"><span class="hps alt-edited">Agrega</span> <span class="hps">esta regla</span> <span class="hps">para dibujar una línea</span> <span class="hps">a través de la</span> <span class="hps">página</span> <span class="hps">sobre cada</span> <span class="hps alt-edited">encabezado</span><span>:</span></span></p> - -<pre class="brush:css">h3 {border-top: 1px solid gray;} -</pre> - -<p><span id="result_box" lang="es"><span class="hps">Si usted tomó</span> <span class="hps alt-edited">el cambio </span><span class="hps alt-edited">en la última página</span><span>,</span> <span class="hps alt-edited">modificara la regla</span> <span class="hps">que ha creado,</span> <span class="hps">de lo contrario</span> <span class="hps alt-edited">agregar la</span> <span class="hps alt-edited">nueva regla</span> <span class="hps alt-edited">para añadir espacio</span> <span class="hps">debajo de cada</span> <span class="hps alt-edited">ítem de la lista</span><span>:</span></span></p> - -<pre class="brush:css">li { - list-style: lower-roman; - margin-bottom: 8px; - } -</pre> - -<p><span class="short_text" id="result_box" lang="es"><span class="hps">Actualice el navegador</span> <span class="hps">para ver el resultado</span><span>:</span></span></p> - -<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">El reto</span></span></div> - -<p><br> - <span id="result_box" lang="es"><span class="hps alt-edited">Agrega</span> <span class="hps">una regla a</span> <span class="hps">la hoja de estilos</span><span>, para que</span> <span class="hps alt-edited">aparesca un amplio</span> <span class="hps alt-edited">borde</span> <span class="hps">alrededor de los</span> <span class="hps alt-edited">la lista de océanos, en</span> <span class="hps">un color</span> <span class="hps">que le recuerda</span> <span class="hps">al mar</span><span>, algo</span> <span class="hps">como esto:</span></span></p> - -<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="border: 12px solid #69b; padding-left: 1em;"> - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>. . .</strong></p> - </td> - </tr> - </tbody> -</table> - -<p> </p> - -<p><span id="result_box" lang="es"><span class="hps atn">(</span><span>No es necesario</span> <span class="hps alt-edited">que coincida con</span> <span class="hps">el ancho</span> <span class="hps">y el color</span> <span class="hps">que se ve aquí</span> <span class="hps">exactamente</span><span>.</span><span>)</span></span></p> -</div> - -<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes">Ver una solución a este desafío.</a></p> - -<h2 id="What_next">What next?</h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout") }}<span id="result_box" lang="es"><span class="hps">Al especificar</span> <span class="hps">márgenes y el relleno</span><span>, se</span> <span class="hps">modificó el</span> <span class="hps">diseño del documento</span><span>.</span> <span class="hps">En la página siguiente</span> <span class="hps">se cambia</span> el </span><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">layout</a><span id="result_box" lang="es"><span class="hps"> de su</span> <span class="hps">documento</span> <span class="hps">de otra manera.</span></span></p> diff --git a/files/es/conflicting/learn/css/building_blocks/selectors/index.html b/files/es/conflicting/learn/css/building_blocks/selectors/index.html deleted file mode 100644 index 0bbf89b28d..0000000000 --- a/files/es/conflicting/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,417 +0,0 @@ ---- -title: Selectores -slug: conflicting/Learn/CSS/Building_blocks/Selectors -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors -original_slug: Web/CSS/Introducción/Selectors ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="hps">es</span> <span class="hps">la sección</span> <span class="hps">quinta</span> <span class="hps">del</span> </span><span id="result_box" lang="es"><span class="hps">tutoria</span></span><span class="seoSummary"><a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> ;</span><span id="result_box" lang="es"><span class="hps">En él se explica</span> <span class="hps">cómo se puede aplicar</span> <span class="hps">estilos</span> <span class="hps">de forma selectiva</span><span>,</span> <span class="hps">y cómo</span> <span class="hps">los diferentes tipos de</span> <span class="hps">selectores</span> <span class="hps">tener diferentes</span> <span class="hps">prioridades.</span> <span class="hps">Agregar algunos</span> <span class="hps">atributos a</span> <span class="hps">las</span> <span class="hps">etiquetas</span> <span class="hps">en su</span> <span class="hps">documento de muestra</span><span>,</span> <span class="hps">y</span> <span class="hps">utiliza estos</span> <span class="hps">atributos en</span> <span class="hps">su hoja de estilos</span> <span class="hps">de muestra.</span></span></p> - -<h2 class="clearLeft" id="Información_Selectores"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Selectores</span></span></h2> - -<p><br> - <span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">tiene su propia terminología</span> <span class="hps">para describir el</span> <span class="hps">lenguaje CSS</span><span>.</span> <span class="hps">Anteriormente</span> <span class="hps">en este tutorial,</span> <span class="hps">que ha creado</span> <span class="hps">una línea en</span> <span class="hps">su hoja de estilos</span> <span class="hps alt-edited">como esta:</span></span></p> - -<pre class="brush: css">strong { - color: red; -} -</pre> - -<p><span id="result_box" lang="es"><span class="hps">En la terminología de</span> <span class="hps">CSS</span><span>,</span> <span class="hps">toda</span> <span class="hps">esta línea</span> <span class="hps">es una </span></span><em><code><strong>rule </strong></code>(</em><span id="result_box" lang="es"><span class="hps">regla).</span> <span class="hps">Esta regla</span> <span class="hps">comienza con</span> </span><strong><em><code>strong</code></em></strong><span lang="es"><span>, que es un</span> <span class="hps">selector.</span> <span class="hps alt-edited">Permite seleccionar</span> <span class="hps">qué elementos</span> <span class="hps">en el DOM</span> <span class="hps">se aplica la regla</span><span>.</span></span></p> - -<div class="tuto_details"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div> - -<p><span id="result_box" lang="es"><span class="hps">La parte</span> <span class="hps">interior de las</span> <span class="hps">llaves</span> <span class="hps">es la declaración</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps"> L</span><span class="hps alt-edited">a palabra clave es </span></span><span id="result_box" lang="es"><code><em><span class="hps">color</span></em></code>, que </span><span id="result_box" lang="es"><span class="hps alt-edited">es</span> <span class="hps">una propiedad,</span> <span class="hps">y el <code><em>rojo </em></code>es</span> <span class="hps">el valor.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">El punto y coma</span> <span class="hps">después de el</span> <span class="hps">par</span> <span class="hps">propiedad</span><span class="atn">-</span><span>valor</span> <span class="hps">separa los posibles </span><span class="hps">otros pares de </span> <span class="hps">propiedad</span><span>-valor en</span> una <span class="hps">misma declaración.</span></span></p> - -<p> <span id="result_box" lang="es"><span class="hps">Este tutorial</span> <span class="hps">se refiere a</span> <span class="hps">un selector</span> <span class="hps">como</span> </span><em><strong><code>strong</code> </strong></em><span lang="es"><span class="hps">como un</span> <span class="hps">selector de etiquetas</span><span>.</span> <span class="hps">La</span> <span class="hps">especificación</span> <span class="hps">CSS</span> <span class="hps">se refiere a él como</span> <span class="hps">un selector de</span> <span class="hps">tipo <code><strong>(</strong></code></span></span><code><strong> type selector)</strong></code><span lang="es"><span>.</span></span></p> -</div> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">En esta página</span> <span class="hps">del tutorial</span> <span class="hps alt-edited">se explica</span> <span class="hps">más acerca de los</span> <span class="hps">selectores</span> <span class="hps">que se pueden utilizar</span> <span class="hps">en</span> <span class="hps">las reglas CSS</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Además de añadir </span></span><span id="result_box" lang="es"><span class="hps">nombres a las e</span></span><span id="result_box" lang="es"><span class="hps">tiquetas</span> <span>, puede usar </span><span class="hps alt-edited">valores en los atributos</span> de <span class="hps">los selectores</span><span>.</span> <span class="hps">Esto permite que sus</span> <span class="hps">reglas sean</span> <span class="hps">más específicas.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Dos</span> <span class="hps">atributos tienen</span> <span class="hps">un estatus especial</span> <span class="hps">para</span> <span class="hps">CSS</span><span>.</span> <span class="hps">Son</span></span> <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> <code>e </code><a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p> - -<h3 id="Class_Selectores_de_clase">Class: <span id="result_box" lang="es"><span class="hps">Selectores de clase</span></span></h3> - -<p><span id="result_box" lang="es"><span class="hps">Utilice el</span> <span class="hps">atributo</span></span> <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> para <span id="result_box" lang="es"><span class="hps">asignarle a </span></span><span id="result_box" lang="es"><span class="hps">un elemento</span> un nombre de clase<code><strong><em> (class)</em></strong></code></span>. <span id="result_box" lang="es"><span class="hps">Depende de</span><span class="hps">l</span><span class="hps"> nombre que elijas</span> como <span class="hps"><code><strong><em>class</em></strong></code>.</span></span> <span id="result_box" lang="es"><span class="hps">Múltiples</span> <span class="hps">elementos en un documento</span> <span class="hps">pueden tener el mismo</span> <span class="hps">valor de la clase</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">su hoja de estilo</span><span>, escriba</span> <span class="hps atn">un punto (.</span><span>)</span> <span class="hps">antes del </span><span class="hps">nombre de la clase</span>,<span class="hps"> cuando</span> <span class="hps">se utiliza como </span><span class="hps">un selector.</span></span></p> - -<h3 id="Selectores_ID"><span id="result_box" lang="es"><span class="hps alt-edited">Selectores ID</span></span></h3> - -<p><span id="result_box" lang="es"><span class="hps">Utilice el atributo</span> <span class="hps">id en</span> <span class="hps">un elemento</span> <span class="hps">para asignar un</span> <span class="hps alt-edited">identificación para</span> ese <span class="hps">elemento</span><span>.</span> <span class="hps">Depende de</span> usted el <span class="hps">nombre que elija</span> <span class="hps">para el ID</span><span>.</span> <span class="hps">El nombre de</span> <span class="hps">ID</span> <span class="hps">debe ser único</span> <span class="hps">en el documento.</span></span><br> - </p> - -<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">su hoja de estilo</span><span>, escriba un</span> <span class="hps alt-edited">símbolo de almohadilla</span> <span class="hps atn">(</span><span class="alt-edited">#)</span> <span class="hps alt-edited">ante el</span> <span class="hps alt-edited">ID cuando</span> <span class="hps alt-edited">se utiliza esto en</span> <span class="hps">un selector.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type">Ejemplo</div> - -<p><span id="result_box" lang="es"><span class="hps">Esta etiqueta</span> <span class="hps">HTML</span> <span class="hps">tiene un</span> <span class="hps alt-edited">atributo <code>class</code></span><code> </code><span class="hps">y un atributo</span> <span class="hps"><code>id</code>:</span></span></p> - -<pre class="brush: html"><p class="key" id="principal"> -</pre> - -<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps alt-edited">valor de <code><em><strong>id </strong></em></code>es</span><span class="alt-edited">, <strong>principal</strong>,</span> <span class="hps">debe ser único</span> <span class="hps">en el documento;</span> <span class="hps">pero</span> <span class="hps">otras</span> <span class="hps">etiquetas del documento</span> <span class="hps">puede tener el mismo</span> <span class="hps alt-edited">nombre de la <strong><em><code>class</code></em></strong></span><span>,</span> <span class="hps alt-edited">Key.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">una hoja de estilo</span> <span class="hps">CSS</span><span>,</span> <span class="hps">esta regla</span> <span class="hps">hace que todos</span> <span class="hps">los elementos con la <code><em>class</em></code></span><code><em> </em></code><span class="hps"><code><em><strong>key </strong></em></code>sean verdes</span> <span>.</span> <span class="hps atn">(</span><span>Puede ser que no</span> <span class="hps">todos los sean</span> <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps">()</span><span>}</span> <span class="hps">"p"</span><span>}</span> <span class="hps">elementos.</span><span>)</span></span></p> - -<pre class="brush: css">.key { - color: green; -} -</pre> - -<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">hace que</span> <span class="hps">el </span></span><span id="result_box" lang="es"><span class="hps">único </span></span><span id="result_box" lang="es"><span class="hps"> </span></span><span id="result_box" lang="es"><span class="hps">elemento</span> </span><span id="result_box" lang="es"> <span class="hps alt-edited">de id </span></span><span id="result_box" lang="es"><code><strong><em><span class="hps alt-edited">principal</span></em></strong></code> este en <span class="hps">negrita:</span></span></p> - -<pre class="brush: css">#principal { - font-weight: bolder; -} -</pre> -</div> - -<p><span id="result_box" lang="es"><span class="hps">Si más de una</span> <span class="hps">regla se aplica a</span> <span class="hps">un elemento</span> <span class="hps">y especifica</span> <span class="hps">la misma propiedad,</span> <span class="hps alt-edited">entonces</span> <span class="hps alt-edited">el CSS</span> <span class="hps">da prioridad</span> <span class="hps">a la regla que</span> <span class="hps">tiene el</span> <span class="hps">selector más específico</span><span>.</span> <span class="hps">Un selector</span> <code><em><strong><span class="hps">ID</span> </strong></em></code><span class="hps">es más específico que</span> <span class="hps">un</span> <span class="hps alt-edited">selector de <em><strong><code>class</code></strong></em></span><span>,</span> <span class="hps">que a su vez</span> <span class="hps">es más específico que</span> <span class="hps">un</span> <span class="hps alt-edited">selector (<strong>tag</strong>) de etiquetas</span><span>.</span></span></p> - -<div class="tuto_details"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div> - -<p><span id="result_box" lang="es"><span class="hps">También se pueden combinar</span> <span class="hps">selectores</span><span>, haciendo un</span> <span class="hps">selector más específico</span><span>.</span></span><br> - <br> - Por ejemplo, el selector <strong><em><code>.key</code></em></strong> selecciona <span id="result_box" lang="es"><span class="hps">todos los</span> <span class="hps">elementos que tienen</span> <code><em><strong><span class="hps">key</span> </strong></em></code>como <span class="hps alt-edited">nombre de clase (<strong><em><code>class</code></em></strong></span></span>). El selector <code><em><strong>p</strong></em>.key</code> <span id="result_box" lang="es"><span class="hps">selecciona</span> <span class="hps">sólo el elemento</span></span> {{ HTMLElement("p") }} que tiene de nombre <em><strong><code>key</code></strong></em>.</p> - -<p><span id="result_box" lang="es"><span class="hps">Usted no esta </span><span class="hps">limitado a los dos</span> <span class="hps">atributos especiales</span><span>, </span></span><em><strong><code>class</code> </strong></em><span lang="es"><span class="hps">e <em><code><strong>id</strong></code></em></span><span>.</span> Se p<span class="hps">uede especificar</span> <span class="hps">otros atributos</span> <span class="hps">mediante corchetes</span><span>.</span> <span class="hps">Por ejemplo</span><span>, el selector</span> <span class="hps atn">[</span></span><strong><em><code>type='button'</code></em></strong><span lang="es"><span>] selecciona</span> <span class="hps">todos los</span> <span class="hps">elementos que tienen</span> <span class="hps">un atributo de tipo</span> <span class="hps">con el </span> <span class="hps">valor </span></span><strong><em><code>button</code></em></strong><span lang="es"><span>.</span></span></p> -</div> - -<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">la hoja de estilo</span> <span class="hps">tiene reglas</span> <span class="hps">en conflicto</span> <span class="hps">y son</span> <span class="hps">igualmente específicas</span><span>, entonces</span> <span class="hps alt-edited">el CSS</span> <span class="hps">da</span> <span class="hps">prioridad a</span> <span class="hps alt-edited">la regla que</span> <span class="hps alt-edited">está</span> <span class="hps alt-edited">después en</span> <span class="hps">la hoja de estilos</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">usted tiene un problema</span> <span class="hps alt-edited">con las reglas</span> <span class="hps">en conflicto,</span> <span class="hps alt-edited">trate de resolverlo</span> <span class="hps">haciendo</span> <span class="hps">una de las</span> <span class="hps">normas más específicas</span><span>, para que</span> <span class="hps alt-edited">tenga </span><span class="hps">prioridad.</span> <span class="hps">Si usted no puede</span> <span class="hps">hacer esto</span><span>, trate de mover</span> <span class="hps">una de las reglas</span> mas <span class="hps alt-edited">cerca del</span> <span class="hps">final de</span> <span class="hps">la hoja de estilos</span> <span class="hps">para que tenga</span> la <span class="hps">prioridad.</span></span></p> - -<h3 id="Las_pseudo-clases_de_los_selectores"><span class="short_text" id="result_box" lang="es"><span class="hps atn">Las pseudo-</span><span>clases de</span> los <span class="hps">selectores </span></span></h3> - -<p><span id="result_box" lang="es"><span class="hps">Una</span> <span class="hps">pseudo-clase </span></span> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="en-US/docs/Web/Guide/CSS/Pseudo-classes">pseudo-class</a><span lang="es"> <span class="hps alt-edited">es en CSS</span> <span class="hps">una palabra clave</span> <span class="hps">añadida a</span> <span class="hps">los selectores,</span> <span class="hps">que especifica</span> <span class="hps">un estado especial</span> <span class="hps">del elemento</span> <span class="hps">a seleccionar.</span> <span class="hps">Por ejemplo</span> <span class="hps atn">{</span><span class="atn">{</span><span>Css</span> <span class="hps">Href</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>: hover</span><span>")}</span><span>}</span> <span class="hps">aplicará</span> <span class="hps">un estilo</span> <span class="hps">cuando el</span> <span class="hps">usuario se desplaza sobre</span> <span class="hps">el elemento especificado</span> <span class="hps alt-edited">mediante el selector</span></span>.</p> - -<p><span id="result_box" lang="es"><span class="hps">Las </span></span><code>Pseudo-classes</code><span lang="es"><span>,</span> <span class="hps">junto con</span> <span class="hps">los <code>pseudo-elements</code></span><span>,</span> <span class="hps">permiten aplicar</span> <span class="hps">un estilo</span> <span class="hps">a un elemento</span> <span class="hps">no sólo</span> <span class="hps">en relación con</span> <span class="hps">el contenido</span> <span class="hps">de</span> <span class="hps">la estructura del documento</span><span>,</span> <span class="hps">sino también en relación</span> <span class="hps">a los factores externos</span><span>, como</span> <span class="hps">la historia del</span> <span class="hps atn">navegador </span><span>por ejemplo:</span><span class="hps atn"> (</span><span class="atn">{</span><span class="atn">{</span><span>href</span> <span class="hps">css</span> <span class="hps atn">(</span><span class="hps atn">"</span><span class="hps">: visited</span> <span class="hps">")}</span><span>}</span><span>, )</span><span>,</span> <span class="hps">el estado de</span> <span class="hps">su contenido</span> <span class="hps">(como</span> <span class="hps atn">{</span><span class="atn">{</span><span>ref</span> <span class="hps">css</span> <span class="hps atn">(</span><span>"</span><span>: </span></span>:checked"<span lang="es"><span class="hps">)}</span><span>} en</span> <span class="hps">algunos</span> <span class="hps">elementos de formulario</span><span>)</span><span>,</span> <span class="hps">o</span> <span class="hps">la posición del</span> <span class="hps">ratón</span> <span class="hps">(como</span> <span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps">("</span></span>:hover<span lang="es"> <span class="hps">")}</span><span>}</span> <span class="hps">que le permite saber</span> <span class="hps">si</span> <span class="hps">el ratón está sobre</span> <span class="hps">un elemento o</span> <span class="hps">no).</span> <span class="hps">Para ver</span> <span class="hps">una lista completa de</span> <span class="hps">selectores</span><span>,</span> <span class="hps">visite</span> <span class="hps">especificación</span> <span class="hps">CSS3</span> <span class="hps">Selectores</span> <span class="hps">de trabajo </span></span> <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p> - -<div class="tuto_example"> -<div class="tuto_type"><span class="short_text" id="result_box" lang="es"><span class="hps">Sintaxis</span></span></div> - -<pre class="brush:css">selector:pseudo-class { - property: value; -} -</pre> -</div> - -<h4 id="Listado_de_pseudo-classes">Listado de pseudo-classes:</h4> - -<ul> - <li>{{ Cssxref(":link") }}</li> - <li>{{ Cssxref(":visited") }}</li> - <li>{{ Cssxref(":active") }}</li> - <li>{{ Cssxref(":hover") }}</li> - <li>{{ Cssxref(":focus") }}</li> - <li>{{ Cssxref(":first-child") }}</li> - <li>{{ Cssxref(":last-child") }}</li> - <li>{{ Cssxref(":nth-child") }}</li> - <li>{{ Cssxref(":nth-last-child") }}</li> - <li>{{ Cssxref(":nth-of-type") }}</li> - <li>{{ Cssxref(":first-of-type") }}</li> - <li>{{ Cssxref(":last-of-type") }}</li> - <li>{{ Cssxref(":empty") }}</li> - <li>{{ Cssxref(":target") }}</li> - <li>{{ Cssxref(":checked") }}</li> - <li>{{ Cssxref(":enabled") }}</li> - <li>{{ Cssxref(":disabled") }}</li> -</ul> - -<h2 id="Información_Los_selectores_basados_en_relaciones_(relationships)"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Los selectores</span> <span class="hps">basados en relaciones </span></span>(relationships)</h2> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">El CSS</span> <span class="hps">tiene algunas</span> <span class="hps">formas de seleccionar</span> <span class="hps">elementos en función de</span> <span class="hps">las</span> <span class="hps">relaciones entre los elementos</span><span>.</span> <span class="hps">Usted</span> <span class="hps">puede utilizar estas para</span> <span class="hps">hacer</span> <span class="hps">selectores</span> <span class="hps alt-edited">que sean más específicos</span><span>.</span></span></p> - -<table id="relselectors"> - <caption><span class="short_text" id="result_box" lang="es"><span class="hps">Selectores</span> <span class="hps">comunes</span> <span class="hps alt-edited">basados en relaciones</span></span></caption> - <tbody> - <tr> - <td style="width: 10em;"><strong>Selector</strong></td> - <td><strong>Selects</strong></td> - </tr> - <tr> - <td><code>A E</code></td> - <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es un descendiente de</span> <span class="hps">un elemento</span> <span class="hps atn">A (</span><span>que</span> <span class="hps">es:</span> <span class="hps alt-edited">un hijo o</span> <span class="hps alt-edited">un hijo</span> <span class="hps alt-edited">de un hijo</span> <span class="hps">etc.</span><span>)</span></span></td> - </tr> - <tr> - <td><code>A > E</code></td> - <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es un hijo de</span> <span class="hps">un elemento A</span></span></td> - </tr> - <tr> - <td><code>E:first-child</code></td> - <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es el primer</span> <span class="hps">hijo de su padre</span></span></td> - </tr> - <tr> - <td><code>B + E</code></td> - <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es</span> <span class="hps">el siguiente hermano</span> <span class="hps">de un elemento</span> <span class="hps">B</span> <span class="hps">(es decir</span><span>:</span> <span class="hps">el</span> <span class="hps">próximo hijo</span> <span class="hps">del mismo</span> <span class="hps">padre)</span></span></td> - </tr> - </tbody> -</table> - -<p><span id="result_box" lang="es"><span class="hps">Usted</span> <span class="hps">puede combinarlas para</span> <span class="hps">expresar relaciones</span> <span class="hps">complejas</span><span>.</span><br> - <br> - <span class="hps">También puede utilizar</span> <span class="hps">el símbolo</span> <span class="hps">asterisco </span></span><span lang="es"> <span class="hps">(*</span><span>)</span> <span class="hps alt-edited">para significar</span> <span class="hps atn">"</span><span>cualquier elemento</span><span>"</span><span>.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type">Ejemplo</div> - -<p><span id="result_box" lang="es"><span class="hps">Una tabla HTML</span> <span class="hps">tiene</span> <span class="hps">un atributo <strong><em><code>id</code></em></strong></span><span>,</span> <span class="hps">pero sus</span> <span class="hps">filas y</span> <span class="hps alt-edited">las celdas</span> <span class="hps">no tienen</span> <span class="hps">identificadores individuales</span><span>:</span></span></p> - -<pre class="brush: html"><table id="data-table-1"> -... -<tr> -<td>Prefix</td> -<td>0001</td> -<td>default</td> -</tr> -... -</pre> - -<p><span id="result_box" lang="es"><span class="hps">Estas</span> <span class="hps">reglas hacen</span> <span class="hps">que la primera celda de</span> <span class="hps">cada fila</span> sea en <span class="hps">negrita,</span> <span class="hps">y</span> <span class="hps">la segunda celda</span> de <span class="hps">cada fila</span> en la familia de fuente <span class="hps"> monoespaciado</span><span>.</span> <span class="hps alt-edited">Esto</span> <span class="hps alt-edited">sólo afecta a</span> <span class="hps">una</span> <span class="hps alt-edited">tabla concreta</span> <span class="hps alt-edited">del documento:</span></span></p> - -<pre class="brush:css"> #data-table-1 td:first-child {font-weight: bolder;} - #data-table-1 td:first-child + td {font-family: monospace;} -</pre> - -<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> - -<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <table style="width: 18em; margin-right: 2em;"> - <tbody> - <tr> - <td><strong>Prefix</strong></td> - <td><code>0001</code></td> - <td>default</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div> - -<p><span id="result_box" lang="es"><span class="hps">La manera mas </span><span class="hps">habitual es hacer</span><span class="hps alt-edited"> que un</span> <span class="hps alt-edited">selector sea más específico</span><span>, entonces</span> aumentara <span class="hps">su prioridad.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Si utiliza</span> <span class="hps">estas técnicas</span><span>, se evita</span> <span class="hps">la necesidad de especificar</span> <span class="hps">la</span></span> <strong><em><code>class</code> </em></strong><span id="result_box" lang="es"><span class="hps">o</span> <span class="hps">atributos <strong><em><code>ID</code></em></strong></span></span><strong><em><code> </code></em></strong><span id="result_box" lang="es"><span class="hps alt-edited">en muchas</span> <span class="hps">etiquetas</span> <span class="hps alt-edited">del documento.</span> <span class="hps">En su lugar</span><span>, CSS</span> <span class="hps">hace este trabajo.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En grandes</span> <span class="hps">diseños</span> <span class="hps">donde la velocidad es</span> <span class="hps">importante</span><span>,</span> <span class="hps">usted puede hacer sus</span> <span class="hps">hojas de estilo</span> <span class="hps">más eficiente</span> <span class="hps">evitando</span> <span class="hps">reglas complejas</span> <span class="hps">que dependen de</span> <span class="hps">relaciones entre los elementos</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Para más ejemplos</span> <span class="hps">sobre</span> <span class="hps">las tablas</span><span>,</span> <span class="hps">ver</span></span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> <span id="result_box" lang="es"><span class="hps">en</span> <span class="hps">la página</span> <span class="hps">CSS Reference</span><span>.</span></span></p> -</div> - -<h2 id="Action_Using_class_and_ID_selectors">Action: Using class and ID selectors</h2> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="hps">HTML</span><span>,</span> <span class="hps">y duplicar</span> <span class="hps">el</span> <span class="hps">párrafo</span> <span class="hps">copiando y</span> <span class="hps">pegando</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">A continuación, agregue los atibutos </span></span> <strong>id</strong> y <strong>class</strong> <span id="result_box" lang="es"><span class="hps">a</span> <span class="hps">la primera copia</span><span>,</span> <span class="hps">y</span> <span class="hps">un atributopara</span> <span class="hps">la segunda copia</span> <span class="hps">como se muestra</span> <span class="hps">a continuación.</span> <span class="hps">Alternativamente</span><span>, copie</span> <span class="hps">y pegue el</span> <span class="hps">archivo entero</span> <span class="hps">de nuevo</span><span>:</span></span> - <pre class="brush: html"><!doctype html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document</title> - <link rel="stylesheet" href="style1.css"> - </head> - <body> - <p id="first"> - <strong class="carrot">C</strong>ascading - <strong class="spinach">S</strong>tyle - <strong class="spinach">S</strong>heets - </p> - <p id="second"> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html> -</pre> - </li> - <li><span id="result_box" lang="es"><span class="hps">Ahora edite</span> <span class="hps">su archivo</span> <span class="hps">CSS</span><span>.</span> <span class="hps alt-edited">Reemplazar todo el contenido</span> <span class="hps">con</span><span>:</span></span> - <pre class="brush:css">strong { color: red; } -.carrot { color: orange; } -.spinach { color: green; } -#first { font-style: italic; } -</pre> - </li> - <li><span id="result_box" lang="es"><span class="hps">Guarde los archivos</span> <span class="hps">y</span> <span class="hps">actualizar el navegador</span> <span class="hps">para ver el resultado</span><span>:</span></span> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - - <p><span id="result_box" lang="es"><span class="hps alt-edited">Puede intentar</span> <span class="hps">reordenar las</span> <span class="hps">líneas</span> <span class="hps">en el archivo</span> <span class="hps">CSS</span> <span class="hps alt-edited">de mostrar</span> <span class="hps alt-edited">de que el orden</span> <span class="hps alt-edited">no efecta.</span></span></p> - - <p><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">selectores de <code>class</code></span></span><strong><em><code>.carrot</code></em></strong> and <em><strong><code>.spinach</code></strong></em> <span id="result_box" lang="es"><span class="hps">tienen prioridad sobre</span> <span class="hps">el selector de etiquetas</span></span> <em><strong><code>strong</code></strong></em>.</p> - - <p>El <strong><code><em>ID </em></code></strong>selector<code> #<em>first</em></code><em> </em><span id="result_box" lang="es"><span class="hps">tiene prioridad sobre</span> <span class="hps">los</span> <span class="hps">selectores de clase</span> <span class="hps">y</span> <span class="hps">etiqueta</span><span>.</span></span></p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type"><span class="short_text" id="result_box" lang="es"><span class="hps">Desafíos</span></span></div> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Sin cambiar</span> <span class="hps">su archivo</span> <span class="hps">HTML</span><span>,</span> <span class="hps alt-edited">agregue una sola</span> <span class="hps">regla para</span> <span class="hps">su archivo</span> <span class="hps">CSS</span> <span class="hps alt-edited">que mantenga</span> <span class="hps">todas las letras</span> <span class="hps">iniciales que</span> <span class="hps">mismo color que</span> <span class="hps">están ahora,</span> <span class="hps">pero</span> <span class="hps alt-edited">hace que</span> <span class="hps">todo el</span> <span class="hps">otro texto</span> <span class="hps">en el segundo párrafo</span> <span class="hps alt-edited">sea azul</span><span>:</span></span> - - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li><span id="result_box" lang="es"><span class="hps alt-edited">Ahora cambie</span> <span class="hps">la regla</span> <span class="hps">que acaba de agregar</span> <span class="hps atn">(</span><span>sin cambiar nada más</span><span>)</span><span>,</span> <span class="hps">para hacer</span> <span class="hps alt-edited">que el primer párrafo</span> <span class="hps alt-edited">sea azul</span> <span class="hps">también</span><span>:</span></span> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<ol> - <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: - - <pre class="brush: css">#second { color: blue; } -</pre> - A more specific selector, <code>p#second</code> also works.</li> - <li>Change the selector of the new rule to be a tag selector using <code>p</code>: - <pre class="brush: css">p { color: blue; } -</pre> - </li> -</ol> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> - -<h2 id="Action_Using_pseudo-classes_selectors">Action: Using pseudo-classes selectors</h2> - -<ol> - <li><span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">Cree un</span> <span class="hps alt-edited">HTML como el siguiente</span><span>:</span></span> - - <pre class="brush: html"><!doctype html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document</title> - <link rel="stylesheet" href="style1.css"> - </head> - <body> - <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> - </body> -</html> -</pre> - </li> - <li><span id="result_box" lang="es"><span class="hps">Ahora edite</span> <span class="hps">su archivo</span> <span class="hps">CSS</span><span>.</span> <span class="hps alt-edited">Reemplace todo el contenido</span> <span class="hps">con</span><span>:</span></span> - <pre class="brush: css">a.homepage:link, a.homepage:visited { - padding: 1px 10px 1px 10px; - color: #fff; - background: #555; - border-radius: 3px; - border: 1px outset rgba(50,50,50,.5); - font-family: georgia, serif; - font-size: 14px; - font-style: italic; - text-decoration: none; -} - -a.homepage:hover, a.homepage:focus, a.homepage:active { - background-color: #666; -} -</pre> - </li> - <li><span id="result_box" lang="es"><span class="hps">Guarde los archivos</span> <span class="hps">y</span> <span class="hps alt-edited">actualice el explorador</span> <span class="hps">para ver el resultado</span> <span class="hps atn">(</span><span>poner</span> <span class="hps">el ratón sobre el</span> <span class="hps">siguiente enlace para ver</span> <span class="hps">el efecto</span><span>)</span><span>:</span></span> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span class="hidden"> </span><span class="hidden"> </span></td> - </tr> - </tbody> - </table> - </li> -</ol> - -<h2 id="Acción_Uso_de_selectores_basados_en_las_relaciones_y_pseudo-clases"><span id="result_box" lang="es"><span class="hps">Acción</span><span>: Uso de</span> <span class="hps">selectores</span> <span class="hps">basados</span> <span class="hps">en las relaciones y</span> <span class="hps">pseudo-clases</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">Con</span> <span class="hps">selectores</span> <span class="hps">basados</span> <span class="hps">en las relaciones y</span> <span class="hps">pseudo-clases</span> <span class="hps">puede crear</span> <span class="hps">algoritmos </span></span><span id="result_box" lang="es"><span class="hps">complejos</span></span><span id="result_box" lang="es"> en <span class="hps alt-edited">cascada</span> <span class="hps">.</span> <span class="hps">Esto es una técnica</span> <span class="hps">común que se utiliza</span><span>, por ejemplo,</span> <span class="hps">con el fin de</span> <span class="hps">crear menús</span> <span class="hps">desplegables</span> <span class="hps">en </span></span><span id="result_box" lang="es"><span class="hps">puro</span> </span><span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">(es decir</span> <span class="hps">sólo</span> <span class="hps">CSS,</span> <span class="hps">sin necesidad de utilizar</span></span> <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript</a>). <span id="result_box" lang="es"><span class="hps">La esencia</span> <span class="hps">de esta técnica es</span> <span class="hps">la creación de</span> <span class="hps">una regla como</span> <span class="hps">la siguiente</span><span>:</span></span></p> - -<pre class="brush: css">div.menu-bar ul ul { - display: none; -} - -div.menu-bar li:hover > ul { - display: block; -}</pre> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">Aplicararemos a</span> <span class="hps">una estructura de</span> <span class="hps alt-edited">HTML como el siguiente</span><span>:</span></span></p> - -<pre class="brush: html"><div class="menu-bar"> - <ul> - <li> - <a href="example.html">Menu</a> - <ul> - <li> - <a href="example.html">Link</a> - </li> - <li> - <a class="menu-nav" href="example.html">Submenu</a> - <ul> - <li> - <a class="menu-nav" href="example.html">Submenu</a> - <ul> - <li><a href="example.html">Link</a></li> - <li><a href="example.html">Link</a></li> - <li><a href="example.html">Link</a></li> - <li><a href="example.html">Link</a></li> - </ul> - </li> - <li><a href="example.html">Link</a></li> - </ul> - </li> - </ul> - </li> - </ul> -</div> -</pre> - -<p><span id="result_box" lang="es"><span class="hps">Vea nuestro</span> <span class="hps">ejemplo completo</span></span><a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> <span id="result_box" lang="es"><span class="hps">para una posible</span> referencia<span>.</span></span></p> - -<h2 id="¿Y_ahora_qué"><span id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">Su</span> <span class="hps alt-edited">hoja de estilos</span> <span class="hps alt-edited">de muestra</span> <span class="hps">está empezando a parecer</span> <span class="hps alt-edited">densa</span> <span class="hps alt-edited">y complicada.</span> <span class="hps">La</span> <span class="hps">siguiente sección</span> <span class="hps">describe</span> <span class="hps">maneras de hacer</span> <span class="hps">CSS</span> <span class="hps">más fácil de leer</span><span>.</span> </span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a>.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p> diff --git a/files/es/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/es/conflicting/learn/css/building_blocks/values_and_units/index.html deleted file mode 100644 index 79b7ac23cb..0000000000 --- a/files/es/conflicting/learn/css/building_blocks/values_and_units/index.html +++ /dev/null @@ -1,365 +0,0 @@ ---- -title: Color -slug: conflicting/Learn/CSS/Building_blocks/Values_and_units -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color -original_slug: Web/CSS/Introducción/Color ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p><a class="button previousPage" href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" rel="prev" style="margin: 0px 20px 20px 0px; padding: 5px 11px; border: 0px; color: rgb(77, 78, 83); text-decoration: none; cursor: pointer; display: inline-block; line-height: 1; font-weight: normal; letter-spacing: normal; text-transform: uppercase; border-radius: 4px; box-shadow: rgb(187, 191, 194) 0px -1px inset; float: left; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; white-space: normal; background-color: rgb(234, 239, 242);" title="Los estilos de texto"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">IR A LA SECCIÓN ANTERIOR: </span></font></font><br> - <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">LOS ESTILOS DE TEXTO</span></font></font></a></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Esta es la sección octava de la </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="es-es / docs / Web / guía / CSS / Primeros pasos"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS Introducción</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">tutorial; </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">se explica cómo puede especificar el color en CSS. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En su hoja de estilos de muestra, se introduce colores de fondo.</span></font></font></p> - -<h2 class="clearLeft" id="Información_Color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Información: Color</span></font></font></h2> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En este tutorial hasta ahora, se ha utilizado un número limitado de colores con nombre. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS 2 soporta 17 colores con nombre absoluto. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Algunos de los nombres puede que no sea el esperado:</span></font></font></p> - -<table style="border: 0px; margin-left: 2em; text-align: right;"> - <tbody> - <tr> - <td> </td> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: black;"> </td> - <td>gray</td> - <td style="width: 2em; height: 2em; background-color: gray;"> </td> - <td>silver</td> - <td style="width: 2em; height: 2em; background-color: silver;"> </td> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> - </tr> - <tr> - <td>primaries</td> - <td>red</td> - <td style="width: 2em; height: 2em; background-color: red;"> </td> - <td>lime</td> - <td style="width: 2em; height: 2em; background-color: lime;"> </td> - <td>blue</td> - <td style="width: 2em; height: 2em; background-color: blue;"> </td> - </tr> - <tr> - <td>secondaries</td> - <td>yellow</td> - <td style="width: 2em; height: 2em; background-color: yellow;"> </td> - <td>aqua</td> - <td style="width: 2em; height: 2em; background-color: aqua;"> </td> - <td>fuchsia</td> - <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> - </tr> - <tr> - <td> </td> - <td>maroon</td> - <td style="width: 2em; height: 2em; background-color: maroon;"> </td> - <td>orange</td> - <td style="width: 2em; height: 2em; background-color: orange;"> </td> - <td>olive</td> - <td style="width: 2em; height: 2em; background-color: olive;"> </td> - <td>purple</td> - <td style="width: 2em; height: 2em; background-color: purple;"> </td> - <td>green</td> - <td style="width: 2em; height: 2em; background-color: green;"> </td> - <td>navy</td> - <td style="width: 2em; height: 2em; background-color: navy;"> </td> - <td>teal</td> - <td style="width: 2em; height: 2em; background-color: teal;"> </td> - </tr> - </tbody> -</table> - -<p> </p> - -<div class="tuto_details"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Detalles</span></font></font></div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Su navegador puede soportar muchos más colores con nombre, como:</span></font></font></p> -</div> - -<table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;"> - <tbody> - <tr> - <td>dodgerblue</td> - <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> - <td>peachpuff</td> - <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> - <td>tan</td> - <td style="width: 2em; height: 2em; background-color: tan;"> </td> - <td>firebrick</td> - <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> - <td>aquamarine</td> - <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> - </tr> - </tbody> -</table> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para detalles de esta lista ampliada, consulte: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">SVG palabras clave de color</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en el </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">módulo de colores </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS 3 . </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Tenga cuidado con el uso de nombres de colores;puede que algunos de sus lectores de navegación no lo soporte.</span></font></font></p> -</div> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para una paleta más grande, especificar los componentes rojo, verde y azul del color que desee, utilizando el signo numerico (hash) y tres </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">dígitos </span></font></font><em><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">hexadecimales</span></font></font></em><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> entre los rangos 0 - 9, a - f. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Las letras a - f representan los valores de 10 a 15:</span></font></font></p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#0f0</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#00f</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - </tbody> -</table> - -<p><br> - <span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Para toda la paleta, especificar dos dígitos hexadecimales para cada componente:</span></p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#ff0000</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#00ff00</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#0000ff</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#ffffff</code></td> - </tr> - </tbody> -</table> - -<p><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Generalmente, usted puede obtener estos códigos hexadecimales de seis dígitos de su programa de gráficos o alguna otra herramienta.</span></p> - -<div class="tuto_example"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Con un poco de práctica, puede ajustar los colores de tres dígitos de forma manual para la mayoría de los propósitos:</span></font></font></p> -</div> - -<table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> - <tbody> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Comience con el rojo puro:</span></td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(201, 215, 241);">Para que sea más pálido, añadir un poco de verde y azul:</span></td> - <td style="width: 2em; height: 2em; background-color: #f77;"> </td> - <td><code>#f77</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para hacerlo más naranja, añadir un poco de verde adicional:</span></td> - <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> - <td><code>#fa7</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para oscurecer, reducir todos sus componentes:</span></td> - <td style="width: 2em; height: 2em; background-color: #c74;"> </td> - <td><code>#c74</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para reducir su saturación, hacer que sus componentes más iguales:</span></td> - <td style="width: 2em; height: 2em; background-color: #c98;"> </td> - <td><code>#c98</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Si usted los pone exactamente iguales, se obtiene gris:</span></td> - <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> - <td><code>#ccc</code></td> - </tr> - </tbody> -</table> - -<p><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para un tono pastel como el azul pálido:</span></p> - -<table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> - <tbody> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Comience con blanco puro:</span></td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Reducir los otros componentes un poco:</span></td> - <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> - <td><code>#eef</code></td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Más detalles</span></font></font></div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">También puede especificar un color mediante los valores RGB decimales en el rango de 0 - 255, o porcentajes.</span></font></font></p> - -<p><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(244, 244, 244);">Por ejemplo, este es de color granate (rojo oscuro)</span>dark red:</p> -</div> - -<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token function" style="margin: 0px; padding: 0px; border: 0px; color: rgb(221, 74, 104);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">RGB</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> (128, 0, 0)</span></font></font></code></pre> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para más detalles sobre cómo especificar los colores, ver: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/CSS21/syndata.html#color-units" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Colores</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en la Especificación CSS.</span></font></font></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para obtener información sobre la adecuación de los colores del sistema como Menú y ThreeDFace, véase: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/CSS21/ui.html#system-colors" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Sistema CSS2 Colores</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en la Especificación CSS.</span></font></font></p> -</div> - -<h3 id="Propiedades_de_Color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 200; font-family: 'Open Sans', sans-serif; line-height: 24px; font-size: 1.71428571428571rem; letter-spacing: -0.5px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Propiedades de Color</span></font></font></h3> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ya ha utilizado </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">la propiedad</span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> color</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en el texto.</span></font></font></p> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">También puede utilizar <code>la</code></span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"><code> </code></span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> para cambiar fondos elementos.</span></font></font></p> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los Fondos (</span></font></font><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Backgrounds </span>) <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">se pueden establecer en </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">transparent</span></code><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"> (transparentes) </span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">para eliminar explícitamente cualquier color, revelando fondo del elemento padre.</span></font></font></p> - -<div class="tuto_example"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">ejemplos de</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cajas de este tutorial utilizan este fondo de color amarillo pálido:</span></font></font></p> - -<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> # fffff4 </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">;</span></font></font></span></code></pre> - -<div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 0px; background: 0px 0px;"> </div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Más detalles</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cajas utilizan este gris pálido:</span></font></font></p> - -<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> # F4F4F4 </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">;</span></font></font></span></code></pre> -</div> -</div> - -<p> </p> - -<h2 id="Acción_El_uso_de_códigos_de_color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Acción: El uso de códigos de color</span></font></font></h2> - -<ol style="margin: 0px 0px 24px; padding: 0px 0px 0px 40px; border: 0px; list-style-type: decimal; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Edite su archivo CSS.</span></font></font></li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Hacer el cambio se muestra aquí en negrita, para dar las letras iniciales un fondo azul claro. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">(La disposición y comentarios en el archivo probablemente difieren del archivo que se muestra aquí. Mantenga la disposición y los comentarios de la forma que prefiera.)</span></font></font> - <pre class="brush:css;highlight:[13] language-css"><code class="language-css"><span class="token comment">/*** CSS Tutorial: Color page ***/</span> - -<span class="token comment">/* page font */</span> -<span class="token selector">body </span><span class="token punctuation">{</span><span class="token property">font</span><span class="token punctuation">:</span> 16px <span class="token string">"Comic Sans MS"</span>, cursive<span class="token punctuation">;</span><span class="token punctuation">}</span> - -<span class="token comment">/* paragraphs */</span> -<span class="token selector">p </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span><span class="token punctuation">}</span> -<span class="token selector">#first </span><span class="token punctuation">{</span><span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span><span class="token punctuation">}</span> - -<span class="token comment">/* initial letters */</span> -<span class="token selector">strong </span><span class="token punctuation">{</span> - <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> - <span class="token property">background-color</span><span class="token punctuation">:</span> #ddf<span class="token punctuation">;</span> - <span class="token property">font</span><span class="token punctuation">:</span> 200% serif<span class="token punctuation">;</span> - <span class="token punctuation">}</span> - -<span class="token selector">.carrot </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token punctuation">}</span> -<span class="token selector">.spinach </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 0px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 19px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 38px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 57px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 76px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 95px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 114px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 133px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 152px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 171px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 190px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 209px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 228px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 247px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 266px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 285px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 304px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 323px; background: 0px 0px;"> </div> - - <div class="line-highlight" style=""> </div> - </li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Guarde el archivo y actualizar el navegador para ver el resultado.</span></font></font></li> -</ol> - -<table> - <tbody> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"> - <table style="margin: 0px 0px 24px; padding: 0px; border-width: 1px 0px 0px 1px; border-style: solid; border-color: rgb(224, 224, 220); border-collapse: collapse; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"> - <tbody> - <tr style="margin: 0px; padding: 0px; border: 0px;"> - <td style="margin: 0px; padding: 6px; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(224, 224, 220); text-align: left; font-style: italic; font-variant: normal; font-weight: normal; font-size: 16px; line-height: normal; font-family: 'Comic Sans MS', cursive; color: blue;"><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>C</font></font></strong><font><font> ascading </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: green; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> tyle </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: green; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> heets</font></font></td> - </tr> - <tr style="margin: 0px; padding: 0px; border: 0px;"> - <td style="margin: 0px; padding: 6px; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(224, 224, 220); text-align: left; font-style: normal; font-variant: normal; font-weight: normal; font-size: 16px; line-height: normal; font-family: 'Comic Sans MS', cursive; color: blue;"><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>C</font></font></strong><font><font> ascading </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> tyle </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> heets</font></font></td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Desafío</span></font></font></div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En el archivo CSS, cambiara todos los nombres de los colores a los códigos de color de 3 dígitos sin afectar el resultado.</span></font></font></p> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">(Esto no se puede hacer exactamente, pero usted puede conseguir cerca. Para hacerlo exactamente lo que necesita códigos de 6 dígitos, y hay que buscar la especificación CSS o utilizar una herramienta gráfica para que coincida con los colores.)</span></font></font></p> -<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Color#tutochallenge" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-size: 12px; text-align: right; display: block; font-family: 'Open Sans', sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal;" title="Mostrar una posible solución para el desafío"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver una solución para el desafío.</span></font></font></a></div> -</div> - -<h2 id="¿Y_ahora_qué" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">¿Y ahora qué?</span></font></font></h2> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a class="button nextPage" href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" rel="next" style="margin: 20px 0px 0px 20px; padding: 5px 11px; border: 0px; color: rgb(77, 78, 83); text-decoration: none; cursor: pointer; display: inline-block; line-height: 1; font-weight: 400; letter-spacing: normal; text-transform: uppercase; border-radius: 4px; box-shadow: rgb(187, 191, 194) 0px -1px inset; float: right; background-color: rgb(234, 239, 242);" title="Contenido"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">IR A LA SIGUIENTE SECCIÓN: </span></font></font><br> - <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CONTENT</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En su documento de muestra y el contenido de su hoja de estilo muestra estrictamente separados los estilo.</span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title="/ En-US / docs / Web / guía / CSS / Getting_Started / contenido"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">siguiente sección</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> explica cómo se puede hacer excepciones a esta estricta separación.</span></font></font></p> diff --git a/files/es/conflicting/learn/css/css_layout/index.html b/files/es/conflicting/learn/css/css_layout/index.html deleted file mode 100644 index 86364b84fa..0000000000 --- a/files/es/conflicting/learn/css/css_layout/index.html +++ /dev/null @@ -1,385 +0,0 @@ ---- -title: Layout -slug: conflicting/Learn/CSS/CSS_layout -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout -original_slug: Web/CSS/Introducción/Layout ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}}Esta es la 12ª sección del tutorial CSS Getting Started; Describe algunas maneras de ajustar el diseño de su documento. Cambia el diseño de su documento de ejemplo.</p> - -<h2 class="clearLeft" id="Informacion_Layout">Informacion: Layout</h2> - -<p>Puede utilizar CSS para especificar varios efectos visuales que cambian el diseño de su documento. Algunas de las técnicas para especificar el diseño son avanzadas, y más allá del alcance de este tutorial básico.</p> - -<p>Cuando diseña un diseño para que se vea similar en muchos navegadores, su hoja de estilo interactúa con la hoja de estilo y el motor de diseño predeterminados del navegador de formas que pueden ser complejas. Este es también un tema avanzado, más allá del alcance de este tutorial básico.</p> - -<p>Esta página describe algunas técnicas sencillas que puedes probar.</p> - -<h3 id="Estructura_del_documento">Estructura del documento</h3> - -<p>Si desea controlar el diseño de su documento, es posible que deba cambiar su estructura.</p> - -<p>El lenguaje de marcado del documento puede tener etiquetas de propósito general para crear la estructura. Por ejemplo, en HTML puede utilizar el elemento {{HTMLElement ('div')}} para crear una estructura.</p> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Ejemplo</p> - -<p>En su documento de ejemplo, los párrafos numerados en el segundo encabezado no tienen un contenedor propio.</p> - -<p>Su hoja de estilo no puede dibujar un borde alrededor de esos párrafos, porque no hay ningún elemento que especificar en el selector.</p> - -<p>Para solucionar este problema estructural, puede agregar una etiqueta {{HTMLElement ('div')}} alrededor de los párrafos. Esta etiqueta es única, por lo que puede identificarse con un atributo id:</p> -</div> - -<pre class="brush:html;highlight:[2,8]"><h3>Numbered paragraphs</h3> -<div id="numbered"> - <p>Lorem ipsum</p> - <p>Dolor sit</p> - <p>Amet consectetuer</p> - <p>Magna aliquam</p> - <p>Autem veleum</p> -</div> -</pre> - -<p>Ahora su hoja de estilos puede utilizar una regla para especificar bordes alrededor de ambas listas:</p> - -<pre class="brush:css">ul, #numbered { - border: 1em solid #69b; - padding-right:1em; -} -</pre> - -<p> El resultado se ve así: </p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Unidades_de_tamaño">Unidades de tamaño</h3> - -<p>Hasta ahora en este tutorial, se han especificado tamaños en píxeles (px). Estos son apropiados para algunos propósitos en un dispositivo de visualización como una pantalla de computadora. Pero cuando el usuario cambia el tamaño de fuente, su diseño puede parecer incorrecto.</p> - -<p>Para muchos propósitos es mejor especificar tamaños como un porcentaje o en ems (em). Un em es nominalmente el tamaño de la fuente actual (el ancho de una letra m). Cuando el usuario cambia el tamaño de fuente, su diseño se ajusta automáticamente.</p> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Ejemplo</p> - -<p>El borde a la izquierda de este texto tiene su tamaño especificado en píxeles.</p> - -<p>El borde de la derecha tiene su tamaño especificado en ems.</p> - -<p>En su navegador, cambie el tamaño de la fuente para ver cómo se ajusta el borde de la derecha pero el borde de la izquierda no:</p> -</div> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <div style="">RESIZE ME PLEASE</div> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type"> -<p>Más detalles</p> - -<p>Para otros dispositivos, otras unidades de longitud son apropiadas.</p> - -<p>Hay más información sobre esto en una página posterior de este tutorial.</p> - -<p>Para obtener detalles completos de los valores y unidades que puede utilizar, consulte Valores en la especificación CSS.</p> -</div> -</div> - -<h3 id="Diseño_del_texto">Diseño del texto</h3> - -<p>Dos propiedades especifican cómo está alineado el contenido de un elemento. Puede usarlos para ajustes sencillos de diseño:</p> - -<p>{{Cssxref ('text-align')}}</p> - -<p><br> - Alinea el contenido. Utilice uno de estos valores: izquierda, derecha, centro, justificar<br> - {{Cssxref ('texto-sangría')}}<br> - Indente el contenido en una cantidad que especifique.</p> - -<p>Estas propiedades se aplican a cualquier contenido similar al texto del elemento, no sólo al texto real. Recuerde que son heredados por los hijos del elemento, por lo que es posible que tenga que desactivarlos explícitamente en los niños para evitar resultados sorprendentes.</p> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Ejemplo</p> - -<p>Para centrar los títulos:</p> -</div> - -<pre class="brush:css">h3 { - border-top: 1px solid gray; - text-align: center; -} -</pre> - -<p>Resultado:</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> - </td> - </tr> - </tbody> -</table> - -<p>En un documento HTML, el contenido que ve debajo de un encabezado no está estructuralmente contenido por el encabezado. Así que cuando alineas un encabezado como este, las etiquetas debajo del encabezado no heredan el estilo.</p> -</div> - -<h3 id="Floats">Floats</h3> - -<p>La propiedad {{cssxref ('float')}} fuerza un elemento a la izquierda oa la derecha. Esta es una forma sencilla de controlar su posición y tamaño.</p> - -<p>El resto del contenido del documento fluye normalmente alrededor del elemento flotante. Puede controlar esto usando la propiedad {{cssxref ('clear')}} en otros elementos para hacerlos permanecer alejados de los flotadores.</p> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Ejemplo</p> - -<p>En el documento de ejemplo, las listas se extienden por la ventana. Puede evitarlo flotando hacia la izquierda.</p> - -<p>Para mantener los encabezados en su lugar, también debe especificar que se mantengan alejados de los flotadores a su izquierda:</p> -</div> - -<pre class="brush:css">ul, #numbered {float: left;} -h3 {clear: left;} -</pre> -</div> - -<p>El resultado sería:</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> -</table> - -<p>(Un poco de relleno es necesario a la derecha de las cajas, donde el borde es demasiado cerca del texto.)</p> - -<h3 id="Posicionamiento">Posicionamiento</h3> - -<p>Puede especificar la posición de un elemento de cuatro formas especificando la propiedad {{cssxref ('position')}} y uno de los siguientes valores.</p> - -<p>Estas son propiedades avanzadas. Es posible utilizarlos de manera sencilla, por eso se mencionan en este tutorial básico. Pero puede ser difícil usarlos para diseños complejos.</p> - -<p>relativo</p> - -<p><br> - La posición del elemento se desplaza en relación con su posición normal. Utilícelo para desplazar un elemento por una cantidad especificada. A veces se puede utilizar el margen del elemento para lograr el mismo efecto.<br> - fijo<br> - La posición del elemento es fija. Especifique la posición del elemento en relación con la ventana del documento. Incluso si el resto del documento se desplaza, el elemento permanece fijo.<br> - absoluto<br> - La posición del elemento es fija con relación a un elemento padre. Sólo un padre que está posicionado con relativo, fijo o absoluto hará. Puede hacer que cualquier elemento padre sea adecuado especificando position: relative; Para ello sin especificar ningún cambio.<br> - estático<br> - El valor por defecto. Utilice este valor si necesita desactivar la posición de forma explícita.</p> - -<p>Junto con estos valores de la propiedad de posición (a excepción de estática), especifique una o más de las propiedades: superior, derecha, inferior, izquierda, anchura, altura para identificar dónde desea que aparezca el elemento y tal vez también su tamaño.</p> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Ejemplo</p> - -<p>Para colocar dos elementos uno encima del otro, cree un contenedor principal en el documento con los dos elementos dentro de él:</p> -</div> - -<pre class="brush:html"><div id="parent-div"> - <p id="forward">/</p> - <p id="back">\</p> -</div> -</pre> - -<p>En su hoja de estilos, haga que la posición de los padres sea relativa. No hay necesidad de especificar ningún cambio real. Haga que la posición de los niños sea absoluta:</p> - -<pre class="brush:css">#parent-div { - position: relative; - font: bold 200% sans-serif; -} - -#forward, #back { - position: absolute; - margin:0px; /* no hay margenes alrededor del elemento */ - top: 0px; /* distancia desde la parte superior */ - left: 0px; /* distancia desde la izquierda */ -} - -#forward { - color: blue; -} - -#back { - color: red; -} -</pre> - -<p>El resultado se ve así, con la barra invertida en la parte superior de la barra inclinada:</p> - -<div style="position: relative; left: .33em; font: bold 300% sans-serif;"> -<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> - -<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> -</div> - -<table style="background-color: white; border: 2px outset #3366bb; height: 5em; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type"> -<p>Más detalles</p> - -<p>La historia completa sobre posicionamiento toma dos capítulos complejos en la Especificación CSS: Modelo de formato visual y detalles del modelo de formato Visual.</p> - -<p>Si está diseñando hojas de estilo para trabajar en muchos navegadores, también debe tener en cuenta las diferencias en la forma en que los navegadores interpretan el estándar y quizás errores en versiones concretas de navegadores particulares.</p> -</div> -</div> - -<h2 id="Action_Specifying_layout">Action: Specifying layout</h2> - -<ol> - <li>Cambie el documento de ejemplo, doc2. Html y hoja de estilo, style2. Css, utilizando los ejemplos anteriores en las secciones Estructura de documento y flotantes.</li> - <li>En el ejemplo Flotantes, agregue relleno para separar el texto del borde derecho por 0. 5 em.</li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Cambios</p> - -<p>Cambie el documento de ejemplo, doc2. Html, agregando esta etiqueta a ella cerca del final, justo antes de &lt;/ body&gt;.</p> -</div> - -<pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> -</pre> - -<p>Si no descargó el archivo de imagen anteriormente en este tutorial, descárguelo ahora y colóquelo en el mismo directorio que los demás archivos de ejemplo:</p> - -<table style="border: 2px solid #cccccc;"> - <tbody> - <tr> - <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td> - </tr> - </tbody> -</table> - -<p>Predecir dónde aparecerá la imagen en el documento. A continuación, actualice su navegador para ver si estaba correcto.</p> - -<p>Agregue una regla a su hoja de estilos que coloque la imagen en la parte superior derecha de su documento.</p> - -<p>Actualiza tu navegador y haz que la ventana sea pequeña. Compruebe que la imagen permanece en la parte superior derecha incluso cuando se desplaza el documento:</p> - -<div style="position: relative; width: 29.5em; height: 18em;"> -<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> -<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - -<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> -<ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> -</ul> -</div> - -<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - -<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> -<p><strong>1: </strong>Lorem ipsum</p> - -<p><strong>2: </strong>Dolor sit</p> - -<p><strong>3: </strong>Amet consectetuer</p> - -<p><strong>4: </strong>Magna aliquam</p> - -<p><strong>5: </strong>Autem veleum</p> -</div> - -<p style=""> </p> - -<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></div> -</div> -</div> -</div> - -<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout"> See a solution to this challenge.</a></p> - -<h2 id="What_next">What next?</h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }}Usted acaba de cubrir todos los temas en este tutorial básico de CSS. La siguiente página describe selectores más avanzados para reglas CSS y algunas maneras específicas en las que puede diseñar tablas.</p> diff --git a/files/es/conflicting/learn/css/first_steps/how_css_works/index.html b/files/es/conflicting/learn/css/first_steps/how_css_works/index.html deleted file mode 100644 index 831a835c72..0000000000 --- a/files/es/conflicting/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Por que usar CSS -slug: conflicting/Learn/CSS/First_steps/How_CSS_works -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS -original_slug: Web/CSS/Como_iniciar/Por_que_usar_CSS ---- -<p> </p> -<p>Esta página explica por qué los documentos usan CSS. Usas CSS para añadir una hoja de estilos a tu documento de prueba.</p> -<p>Esta es la segunda sección del <a href="/es/CSS/Introducción" title="../../../../es/CSS/Introducci%C3%B3n">tutorial</a>.</p> -<p>Sección anterior: <a href="/es/CSS/Como_iniciar/Que_es_CSS" title="es/CSS/Como_iniciar/Que_es_CSS">Que es CSS</a><br> - Sección siguiente: <a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting Started/How CSS works">How CSS works</a></p> -<h2 id="Información_¿Por_qué_usar_CSS">Información: ¿Por qué usar CSS?</h2> -<p>CSS ayuda a mantener la información de contenido de un documento separado de los detalles de como mostrarlo. Los detalles de como se muestra el documento son conocidos como <em>estilos. </em>Si mantienes los estilos separados del contenido puedes:</p> -<ul> - <li>Evitar duplicación</li> - <li>Hacer el mantenimiento más simple</li> - <li>Usar el mismo contenido con diferentes estilos para diferentes propositos.</li> -</ul> -<table> - <caption> - Ejemplo</caption> - <tbody> - <tr> - <td> - <p>Tu sitio web podría mostrar miles de páginas que se ven similar. Usando CSS, almacenas la información de estilos en archivos comunes que todas las páginas comparten.Cuando un usuario visualiza una página web, el navegador carga la información de estilos junto con el contenido de la página.</p> - <p>Cuando un usuario imprime una página web, podrías proveerle diferente información de estilos que hace que las páginas impresas sean fáciles de leer.</p> - </td> - </tr> - </tbody> -</table> -<p>En general con HTML, usas el lenguaje de marcado para describir la información del contenido del documento, no sus estilos. Usas CSS para especificar sus estilos, no su contenido. (Más adelante en este tutorial, verás algunas excepciones a este acuerdo).</p> -<table> - <caption> - Más detalles</caption> - <tbody> - <tr> - <td> - <p>Un lenguaje de marcado como HTML también provee algunas maneras de especificar estilos.</p> - <p>Por ejemplo en HTML puedes usar una etiqueta <code><b> </code>para hacer acentuar el texto, y puedes especificar un color de fondo de la página en la etiqueta <code><body></code>.</p> - <p>Cuando usas CSS, normalmente evitas usar estas características del lenguaje de marcado así toda la información de estilos de tu documento está en un solo lugar.</p> - </td> - </tr> - </tbody> -</table> -<h2 id="Acción_Creando_una_hoja_de_estilos">Acción: Creando una hoja de estilos</h2> -<ol> - <li>Crea un archivo de texto en el mismo directorio anterior. Este archivo será tu hoja de estilos. Nombrala como: <code>style1.css</code></li> - <li>En tu archivo CSS, copia y pega esta única línea, luego graba el archivo:</li> - <li> - <div> - <pre class="eval">strong {color: red;} -</pre> - </div> - </li> -</ol> -<h3 id="Enlazando_tu_documento_a_tu_hoja_de_estillos">Enlazando tu documento a tu hoja de estillos</h3> -<ol> - <li>Para enlazar tu documento a tu hoja de estilos, edita tu archivo HTML. Añade la línea acentuada aquí:</li> - <li> - <div> - <pre class="eval"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" -"<span class="nowiki">http://www.w3.org/TR/html4/strict.dtd</span>"> -<html> - <head> - <meta http-equiv="Content-Type" content="text/html; -charset=iso-8859-1"> - <title>Sample document</title> - <strong><link rel="stylesheet" type="text/css" href="style1.css"></strong> - </head> - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html> -</pre> - </div> - </li> - <li>Graba el archivo y refresca la pantalla del navegador. Esta hoja de estilos hace que las letras inicales sean rojas, como esto: - <table> - <tbody> - <tr> - <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> -<table> - <caption> - Reto</caption> - <tbody> - <tr> - <td>En adición al rojo, CSS permite algunos otros nombres de colores. - <p>Sin mirar la referencia, encuentra cinco o más nombres de colores que funcionen en tu hoja de estilos.</p> - </td> - </tr> - </tbody> -</table> -<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Why_use_CSS_colors" title="en/CSS/Getting Started/Challenge solutions#Why use CSS colors">See a solution for the challenge.</a> Ver la solución al reto.</p> -<h2 id="¿Qué_sigue">¿Qué sigue?</h2> -<p>Si tienes alguna dificultad entendiendo esta página, o si tienes comentarios acerca de la misma, por favor contribuye en esta página de <a href="/Talk:en/CSS/Getting_Started/Why_use_CSS%3f" title="Talk:en/CSS/Getting_Started/Why_use_CSS%3f">Discusión</a>.</p> -<p>Ahora que tienes un archivo de ejemplo enlazado a una hoja de estilos separada, estás listo para aprender más acerca de como tu navegador combina ellos cuando muestra el documento: <a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">Como funciona CSS</a>.</p> -<p>{{ CSSTutorialTOC() }}</p> -<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "it": "it/Conoscere_i_CSS/Perch\u00e9_usare_i_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS", "es": "es/CSS/Como_iniciar/Por_que_usar_CSS", "zh-cn": "cn/CSS/Getting_Started/Why_use_CSS" } ) }}</p> diff --git a/files/es/conflicting/learn/css/first_steps/how_css_works_194e34e451d4ace023d98021c00b3cfd/index.html b/files/es/conflicting/learn/css/first_steps/how_css_works_194e34e451d4ace023d98021c00b3cfd/index.html deleted file mode 100644 index 6db03d40c8..0000000000 --- a/files/es/conflicting/learn/css/first_steps/how_css_works_194e34e451d4ace023d98021c00b3cfd/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Cómo funciona el CSS -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_194e34e451d4ace023d98021c00b3cfd -tags: - - CSS - - 'CSS:' - - CSS:Empezando - - Diseño - - Guía - - Inicio - - Web -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works -original_slug: Web/CSS/Introducción/How_CSS_works ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "¿Por qué usar CSS?") }}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="alt-edited hps">tercera parte del</span> </span><span class="seoSummary">tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">Empezando CSS</a> </span><span id="result_box" lang="es"><span class="hps">explica cómo funciona</span> <span class="hps">el CSS</span> <span class="hps">en el navegador y</span> la finalidad<span class="hps"> del</span> <span class="atn hps">Modelo de Objeto de Documento (</span><span>DOM</span><span>)</span><span>.</span> <span class="hps">Usted también aprenderá</span> <span class="hps">cómo analizar</span> <span class="hps">el documento de</span> <span class="hps">muestra.</span></span></p> - -<h2 class="clearLeft" id="Información_Cómo_funciona_CSS"><span class="short_text" id="result_box" lang="es"><span class="hps">Información</span><span>: Cómo funciona</span> <span class="hps">CSS</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">Cuando un</span> <span class="hps">navegador muestra</span> <span class="hps">un documento, debe</span><span class="alt-edited hps"> combinar</span> <span class="hps">el contenido del documento</span> <span class="hps">con la </span><span class="hps">información </span></span><span id="result_box" lang="es"><span class="hps"> </span></span><span id="result_box" lang="es"><span class="hps">de </span></span><span id="result_box" lang="es"><span class="hps">su</span></span><span id="result_box" lang="es"><span class="hps"> estilo</span><span>.</span> Se <span class="hps">procesa</span> <span class="hps">el documento en</span> <span class="hps">dos</span> <span class="hps">etapas</span><span>:</span></span></p> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">El navegador</span> <span class="hps">convierte el</span> <span class="hps">lenguaje de marcado (</span></span><code><strong><em>markup</em></strong></code>)<span lang="es"> <span class="hps">y</span> <span class="alt-edited hps">el</span> <span class="hps">CSS</span> <span class="hps">en el <em><span class="seoSummary"><a href="en-US/docs/DOM" title="en-US/docs/DOM">DOM</a></span></em></span><span class="seoSummary"><strong> </strong></span><span class="hps">(Document Object</span> <span class="hps">Model)</span><span>.</span> <span class="hps">El DOM</span> <span class="hps">representa el documento</span> <span class="hps">en la memoria del</span> <span class="hps">ordenador.</span></span> <span id="result_box" lang="es"><span class="hps">Combina</span> <span class="hps">el contenido del documento</span> <span class="hps">con su estilo</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">El navegador muestra</span> <span class="hps">el contenido de la</span> <span class="hps">DOM</span><span>.</span></span></li> -</ol> - -<p><span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">lenguaje de marcado</span> <span class="hps">utiliza <em>elementos</em></span><em> </em><span class="hps">para definir</span> <span class="hps">la estructura del documento</span><span>.</span> <span class="hps">Usted marca</span> <span class="hps">un elemento</span> <span class="hps">utilizando</span> <span class="hps"><em>etiquetas</em>,</span> <span class="hps">que son cadenas</span> <span class="hps">que comienzan con</span> <span class="hps">'<'</span> <span class="hps">y termina con</span> <span class="hps">'>'</span><span>.</span> <span class="hps">La mayoría de los</span> <span class="hps">elementos</span> <span class="hps">tienen un par de</span> <span class="hps">etiquetas,</span> <span class="hps">una etiqueta de inicio</span> <span class="hps">y</span> <span class="hps">una etiqueta de cierre</span><span>.</span> <span class="hps">Para la</span> <span class="hps">etiqueta de inicio</span><span>, coloque</span> <span class="hps">el nombre del elemento</span> <span class="hps">entre</span> <span class="hps">'<'</span> <span class="atn hps">y '</span><span>>'</span><span>.</span> <span class="hps">Para la</span> <span class="hps">etiqueta final</span><span>, coloque un</span> <span class="hps">'/'</span> <span class="atn hps">después de '</span><span><' y</span> <span class="hps">antes del</span> <span class="hps">nombre del elemento.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Dependiendo del</span> <span class="hps">lenguaje de marcado</span><span>,</span> <span class="hps">algunos</span> <span class="hps">elementos tienen</span> <span class="hps">sólo</span> <span class="hps">una etiqueta de inicio</span><span>,</span> <span class="hps">o</span> <span class="hps">una sola etiqueta</span> <span class="hps">donde el</span> <span class="hps">'/'</span> viene <span class="hps">después del</span> <span class="hps">nombre del elemento.</span> <span class="hps">Un elemento</span> <span class="hps">también</span> <span class="hps">puede ser un contenedor </span><span class="hps">e incluir</span> <span class="hps">otros elementos</span> <span class="hps">entre</span> <span class="hps">su</span> <span class="hps">etiqueta de inicio</span> <span class="hps">y la etiqueta de cierre</span><span>.</span> <span class="alt-edited hps">Sólo recuerda</span> <span class="hps">cerrar</span> <span class="hps">siempre</span> <span class="hps">las</span> <span class="hps">etiquetas</span> <span class="hps">dentro del contenedor.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">DOM</span> <span class="hps">tiene una estructura</span> <span class="hps">en forma de árbol</span><span>.</span> <span class="hps">Cada elemento</span><span>,</span> <span class="hps">atributo</span> <span class="hps">y</span> <span class="hps">extensión de texto</span> <span class="hps">en el</span> <span class="hps">lenguaje de marcado</span> <span class="hps">se convierte en un</span> <span class="hps"><em>nodo </em>de la</span> <span class="hps">estructura de árbol.</span> <span class="hps">Los nodos</span> <span class="hps">se definen por su</span> <span class="hps">relación con otros</span> <span class="hps">nodos DOM</span><span>.</span> <span class="hps">Algunos elementos</span> <span class="hps">son</span> <span class="hps">los padres de los</span> <span class="hps">nodos secundarios</span><span>,</span> <span class="hps">y</span> <span class="hps">los nodos secundarios</span> <span class="hps">tienen hermanos</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Comprender el</span> <span class="hps">DOM</span> <span class="hps">le ayuda a diseñar</span><span>, depurar</span> <span class="hps">y mantener su</span> <span class="hps">CSS</span><span>,</span> <span class="hps">porque el</span> <span class="hps">DOM</span> <span class="hps">es donde su</span> <span class="hps">CSS y</span> <span class="hps">el contenido del documento</span> <span class="hps">se reúnen</span><span>.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type">Ejemplo</div> -<span id="result_box" lang="es"><span class="hps">En</span> <span class="alt-edited hps">el</span> <span class="hps">documento de ejemplo</span><span>,</span> <span class="alt-edited hps">las</span> <span class="hps">etiqueta <p></span> <span class="hps">y su</span> <span class="hps">etiqueta de cierre</span> <span class="atn hps"><</span><span>/</span> <span class="hps">p></span> <span class="hps">crean un contenedor</span><span>:</span></span> - -<pre class="brush:html"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p> -</pre> - -<h2 id="Ejemplo_en_vivo"><span class="short_text" id="result_box" lang="es"><span class="hps">Ejemplo</span> en <span class="hps">vivo</span></span></h2> - -<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p> - -<p><span id="result_box" lang="es"><span class="hps">En el</span> <span class="hps">DOM</span><span>, el nodo</span> <span class="hps">correspondiente P</span> <span class="hps">es</span> <span class="hps">uno de los padres</span><span>.</span> <span class="hps">Sus</span> <span class="hps">hijos</span> <span class="hps">son los nodos</span> <code><em><strong>STRONG </strong></em></code><span class="alt-edited hps">y</span> <span class="hps">los</span> <span class="hps">nodos de texto</span><span>.</span> <span class="hps">Los nodos</span> <code><em><strong>STRONG </strong></em></code></span><span lang="es"><span class="alt-edited hps">son en sí mismos</span> <span class="hps">padres</span><span>,</span> <span class="hps">con</span> <span class="hps">los nodos de texto</span> <span class="hps">como</span> <span class="hps">sus hijos</span><span>:</span></span></p> - -<pre><span style="color: black;">P</span> -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">C</span>" -├─"<span style="color: black;">ascading</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -├─"<span style="color: black;">tyle</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -└─"<span style="color: black;">heets</span>"</pre> -</div> - -<h2 id="Acción_Analizando_un_DOM"><span class="short_text" id="result_box" lang="es"><span class="hps">Acción:</span> <span class="hps">Analizando un</span> <span class="hps">DOM</span></span></h2> - -<h3 id="El_uso_del_Inspector_DOM"><span class="short_text" id="result_box" lang="es"><span class="hps">El uso del Inspector</span> <span class="hps">DOM</span></span></h3> - -<p><span id="result_box" lang="es"><span class="hps">Para analizar un</span> <span class="hps">DOM</span><span>,</span> <span class="hps">se necesita un software</span> <span class="hps">especial.</span> <span class="hps">Usted puede usar</span> el </span><span id="result_box" lang="es"><span class="alt-edited hps">complemento de </span> </span><span id="result_box" lang="es"><span class="hps">Mozilla </span></span><a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) <span id="result_box" lang="es"><span class="hps">para analizar un</span> <span class="hps">DOM</span><span>.</span> <span class="hps">Usted sólo tendrá que</span> <span class="hps">instalar el</span> <span class="atn hps">complemento (</span><span>ver</span> <span class="hps">más detalles abajo)</span><span>.</span></span></p> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Utilice</span> <span class="hps">el navegador</span> <span class="hps">Mozilla</span> <span class="hps">para abrir</span> <span class="hps">el documento</span> <span class="hps">en versión HTML</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Desde la barra de</span> <span class="hps">menú de su </span><span class="hps">navegador</span><span>, selecciona</span> <strong><span class="hps">Herramientas></span> <span class="hps">Inspector DOM</span></strong><span>,</span> <span class="hps">o <strong>Herramientas</strong></span><strong><span>></span> <span class="hps">Desarrollo Web></span> <span class="hps">Inspector DOM</span></strong><span>.</span></span> - <div class="tuto_details"> - <div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Más</span> <span class="hps">detalles</span></span></div> - - <p><span id="result_box" lang="es"><span class="hps">Si el navegador</span> <span class="hps">Mozilla</span> <span class="hps">no tiene</span> <span class="hps">Domi</span><span>, puede</span><a href="https://addons.mozilla.org/en-US/firefox/addon/6622/"> instalarlo del sitio de complementos</a> <span class="hps">y reiniciar el</span> <span class="hps">navegador.</span> <span class="hps">Luego regrese</span> <span class="hps">a este</span> <span class="hps">tutorial.</span></span></p> - - <p><span id="result_box" lang="es"><span class="hps">Si no</span> <span class="hps">desea instalar</span> <span class="hps">Domi</span> <span class="hps">(o</span> <span class="hps">estás usando</span> <span class="hps">un navegador que no</span> <span class="hps">Mozilla)</span><span>, puede utilizar</span> <span class="hps">Web</span> <span class="atn hps">X-</span><span>Ray</span> <span class="hps">Goggles,</span> <span class="hps">como se describe en</span> <span class="hps">la siguiente sección.</span> <span class="hps">O bien, puede</span> <span class="hps">omitir esta sección</span> <span class="hps">e ir directamente a</span> <span class="hps">la página siguiente.</span> <span class="hps">Saltarse</span> <span class="hps">esta sección</span> <span class="hps">no interfiere con</span> <span class="hps">el resto del</span> <span class="hps">tutorial.</span></span></p> - </div> - </li> - <li><span id="result_box" lang="es"><span class="alt-edited hps">En el</span> <span class="hps">Domi</span><span>, expanda</span> <span class="hps">los nodos</span> <span class="hps">de su</span> <span class="hps">documento</span> <span class="hps">haciendo clic en</span> <span class="hps">las flechas</span><span>.</span></span> - <p><span id="result_box" lang="es"><strong><span class="hps">Nota</span><span>:</span></strong> <span class="alt-edited hps">El espaciado</span> <span class="alt-edited hps">de su archivo</span> <span class="hps">HTML</span> <span class="alt-edited hps">puede ocasionar</span> <span class="alt-edited hps">que Domi</span> <span class="alt-edited hps">muestre</span> <span class="hps">algunos nodos</span> <span class="hps">de texto vacíos</span><span class="alt-edited">, que se pueden</span> <span class="hps">pasar por alto.</span></span></p> - - <p><span id="result_box" lang="es"><span class="hps">Parte</span> <span class="hps">del resultado</span> <span class="hps">podría tener este aspecto</span><span>, según</span> <span class="alt-edited hps">qué nodos</span> <span class="alt-edited hps">has</span> <span class="alt-edited hps">expandido</span><span>:</span></span></p> - - <pre>│ ▼╴<span style="color: black;">P</span> -│ │ │ ▼╴<span style="color: black;">STRONG</span> -│ │ └<span style="color: darkblue;">#text</span> -│ ├╴<span style="color: darkblue;">#text</span> -│ ►╴<span style="color: black;">STRONG</span> -│ │</pre> - - <p><span id="result_box" lang="es"><span class="alt-edited hps">Cuando selecciona</span> <span class="alt-edited hps">cualquiera de los nodos</span><span>, puede usar</span> <span class="hps">panel de la derecha</span> <span class="hps">de</span> <strong><span class="alt-edited hps"> DOMi </span></strong><span class="hps">para averiguar</span> <span class="hps">más cosas sobre él.</span> <span class="hps">Por ejemplo</span><span>, cuando se selecciona</span> <span class="hps">un nodo de texto</span><span>,</span> <strong><span class="alt-edited hps">DOMi </span></strong></span><span lang="es"><span class="hps">muestra</span> <span class="hps">el texto en el</span> <span class="hps">panel de la derecha</span><span>.</span></span></p> - - <p><span id="result_box" lang="es"><span class="hps">Cuando se selecciona</span> <span class="alt-edited hps">un elemento nodo</span></span>, <span id="result_box" lang="es"><strong><span class="alt-edited hps">DOMi </span></strong><span class="hps">analiza y</span> <span class="hps">ofrece</span> <span class="hps">una enorme cantidad de</span> <span class="hps">información en su</span> <span class="hps">panel de la derecha</span><span>.</span></span> <span id="result_box" lang="es"><span class="alt-edited hps">La información de estilo</span> <span class="hps">es sólo</span> <span class="alt-edited hps">una parte de la información</span> <span class="hps">que proporciona.</span></span></p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">Problema</div> - -<p><span id="result_box" lang="es"><span class="alt-edited hps">En el</span> <strong><span class="alt-edited hps">DOMi </span></strong></span><span lang="es"><span>, haga clic</span> <span class="hps">en un nodo</span> </span><code><small>STRONG</small></code>.</p> - -<p><span id="result_box" lang="es"><span class="hps">Utilice</span> el <span class="hps">panel de la derecha</span> <span class="hps">de</span> <span class="alt-edited hps">Domi</span> <span class="hps">para encontrar </span><span class="alt-edited hps">el </span></span><span id="result_box" lang="es"><span class="hps"> nodo de </span></span><span id="result_box" lang="es"><span class="alt-edited hps">color</span><span class="hps"> rojo</span><span>,</span> <span class="hps">y donde</span> <span class="hps">su apariencia </span><span class="hps">es</span> <span class="hps">más relevante que</span> <span class="hps">el texto normal</span><span>.</span></span></p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> -<a class="hideAnswer" href="#challenge">Ocultar solución</a></div> -<a href="#tutochallenge" title="Ver la posible solución para el problema">Ver la solución para el problema.</a></div> - -<h3 id="Utilizando_Web_X-Ray_Goggles"><span class="short_text" id="result_box" lang="es"><span class="hps">Utilizando</span> <span class="hps">Web</span> <span class="hps">X</span><span class="atn">-</span><span>Ray</span> <span class="hps">Goggles</span></span></h3> - -<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a><span id="result_box" lang="es"><span class="hps">muestra</span> <span class="hps">menos información que</span> <strong><code><span class="hps">DOM</span> </code></strong><span class="hps">Inspector</span><span>, pero</span> <span class="hps">es</span> <span class="hps">más fácil de</span> <span class="hps">instalar y utilizar.</span></span></p> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Ir</span> <span class="hps">a la página principal</span> <span class="hps">de</span> <span class="hps">la </span></span> <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>.</li> - <li><span id="result_box" lang="es"><span class="hps">Arrastre el</span> <span class="hps">enlace</span> <span class="hps">bookmarklet</span> <span class="hps">en esa</span> <span class="hps">página a</span> <span class="hps">tu barra de herramientas</span> <span class="hps">del navegador</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Abra el documento</span> <span class="hps">en versión HTML</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="alt-edited hps">Active</span> <span class="hps">Web</span> <span class="atn hps">X-</span><span>Ray</span> <span class="hps">Goggles</span> <span class="hps">haciendo clic en el</span> <span class="hps">bookmarklet</span> <span class="hps">en</span> <span class="hps">la barra de herramientas</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Mueva el</span> <span class="alt-edited hps">puntero del ratón</span> <span class="alt-edited hps">por encima de su</span> <span class="alt-edited hps">documento para comprobar</span> <span class="hps">los</span> <span class="hps">elementos en el documento</span><span>.</span></span></li> -</ol> - -<h2 id="¿Y_ahora_qué"><span class="short_text" id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada y herencia") }}<span id="result_box" lang="es"><span class="alt-edited hps">Si tomaste</span> <span class="alt-edited hps">el reto</span><span class="alt-edited">, usted vera</span> <span class="hps">que</span> <span class="hps">la información de estilo</span> <span class="hps">interactúa</span> en </span><span id="result_box" lang="es"><span class="hps">más de un lugar, </span></span><span id="result_box" lang="es"><span class="hps">para crear el estilo</span> <span class="hps">final de </span><span class="hps">un elemento.</span> <span class="hps">La <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">siguiente página</a></span> <span class="hps">explica</span> <span class="hps">más acerca de estas</span> <span class="hps">interacciones.</span></span></p> diff --git a/files/es/conflicting/learn/css/first_steps/how_css_works_a460b5a76c3c2e7fc9b8da464dfd0c22/index.html b/files/es/conflicting/learn/css/first_steps/how_css_works_a460b5a76c3c2e7fc9b8da464dfd0c22/index.html deleted file mode 100644 index a46c22f85e..0000000000 --- a/files/es/conflicting/learn/css/first_steps/how_css_works_a460b5a76c3c2e7fc9b8da464dfd0c22/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: Que es CSS -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_a460b5a76c3c2e7fc9b8da464dfd0c22 -tags: - - para_revisar -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS -original_slug: Web/CSS/Como_iniciar/Que_es_CSS ---- -<p>En esta página se explica que es CSS. Usted creará un documento simple con el cual trabajará en las próximas páginas del tutorial.</p> - -<p>Esta es la primera sección del tutorial <a href="/es/CSS/Introducción" title="es/CSS/Introducción">Como iniciar</a>.<br> - Siguiente sección: <a href="/es/docs/CSS/Como_iniciar/Por_que_usar_CSS" title="en/CSS/Getting Started/Why use CSS">Por qué usar CSS</a></p> - -<h2 id="Información_¿Qué_es_CSS">Información: ¿Qué es CSS?</h2> - -<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>), traducido literalmente al español, como <em>Hojas de estilo en cascada</em>, es un lenguaje para especificar cómo los documentos se presentan a los usuarios.</p> - -<p>Un <em>documento (document)</em> es una colección de información que está estructurada utilizando un <em>lenguaje de formato (markup language)</em>.</p> - -<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> - <caption>Ejemplos</caption> - <tbody> - <tr> - <td> - <ul> - <li>Una página web como la que estás leyendo, es un documento.<br> - La información que ves en una página web usualmente está estructurada utilizando el lenguaje de formato de documentos de HiperTexto, HTML (HyperText Markup Language).</li> - </ul> - - <ul> - <li>Un cuadro de diálogo en una aplicación Mozilla es un documento.<br> - Los controles de interfaz de usuario que pude ver en los diálogos de control de aplicaciones Mozilla, están estructurados utilizando el lenguaje de formato XUL (XML User-interface Language - Lenguaje XML de interfaces de usuario).</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<p>En este tutorial, los cuadros con titulo <strong>Más detalles</strong>, como el que está a continuación, contienen información adicional. Si se cuenta con poco tiempo para progresar con el tutorial, entonces pude omitir estos cuadros, quizás retorne a leerlos luego. De lo contrario léalos cuando llegue a ellos y tal vez siga los enlaces que contienen para aprender más.</p> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> - <caption>Más detalles</caption> - <tbody> - <tr> - <td> - <p>Un documento no es lo mismo que un archivo. Y este puede o no estar almacenado en un archivo.</p> - - <p>Por ejemplo, el documento esta leyendo en este momento no está almacenado en un archivo. Cuando su navegador web solicita esta página, el servidor consulta a la base de datos y genera el documento, obteniendo las partes del mismo de diferentes archivos. Sin embargo, en este tutorial se trabajará con documentos que se almacenan en archivos.</p> - - <p>Para más información acerca de documentos y lenguajes de formato, visite otras partes de este sitio web—por ejemplo:</p> - - <table style="background-color: inherit; margin-left: 2em;"> - <tbody> - <tr> - <td><a href="/en/HTML" title="en/HTML">HTML</a></td> - <td>para páginas web</td> - </tr> - <tr> - <td><a href="/en/XML" title="en/XML">XML</a></td> - <td>para documentos estrucurados, en general</td> - </tr> - <tr> - <td><a href="/en/SVG" title="en/SVG">SVG</a></td> - <td>para gráficas</td> - </tr> - <tr> - <td><a href="/en/XUL" title="en/XUL">XUL</a></td> - <td>para interfaces de usuario de Mozilla</td> - </tr> - </tbody> - </table> - - <p>En la parte II de este tutorial podrá ver ejemplos de estos lenguajes de formato.</p> - </td> - </tr> - </tbody> -</table> - -<p><em>Presentar</em> un documento a un usuario significa convertirlo en una forma en que el humano pueda hacer uso de el. Mozilla está diseñado para presentar documentos de manera visual—por ejemplo, en la pantalla de una computadora, en un proyector o en una impresora.</p> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> - <caption>Más detalles</caption> - <tbody> - <tr> - <td>CSS no es sólo para los navegadores web, y no sólo para la presentación visual. En terminos formales CSS, el programa que presenta un documento a un usuario es llamado un <em>agente de usuarios</em> (UA - User Agent). Un navegador es sólo un tipo de UA. Sin embargo, en la parte I de este tutorial, se trabajará únicamente con CSS en un navegador. - <p>Para algunas de las definiciones formales de la terminología relacionda con CSS, consulte el enlace <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definiciones</a> (en ingles) en la especificación CSS.</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Acción_Crear_un_documento">Acción: Crear un documento</h2> - -<ol> - <li>Utilice su computador para crear un nuevo directorio y un nuevo archivo de texto allí. El archivo contendrá el documento. - <ol> - <li>Copie y pegue el código HTML que se muestra a continuación. Guarde el archivo con el nombre <code>doc1.html</code> - - <div style="width: 40em;"> - <pre class="deki-transform"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" -"http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <meta http-equiv="Content-Type" content="text/html; - charset=iso-8859-1"> - <title>Sample document</title> - </head> - - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - <strong>B</strong>heets - </p> - </body> -</html> -</pre> - </div> - </li> - </ol> - </li> - <li>En el navegador web, abra una nueva pestaña o una nueva ventana, y abra el archivo allí. - <p>Debe observar un texto con las letras iniciales en negrita, así:</p> - - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> - </tr> - </tbody> - </table> - - <p>Lo que ve en el navegador puede no lucir exactamente como en la imagen, debido a la configuración de su navegador web y esta wiki. Si existen algunas diferencias en el tipo de fuente, espaciado y los colores que ve, no son importantes.</p> - </li> -</ol> - -<h2 id="¿Qué_sigue">¿Qué sigue?</h2> - -<p>Si ha tenido dificultad para entender esta página, o si tiene comentarios acerca de ella, por favor contribuya con esta en la página de <a href="/Talk:en/CSS/Getting_Started/What_is_CSS%3f" title="Talk:en/CSS/Getting_Started/What_is_CSS?">Discusiones</a>.</p> - -<p>El documento aún no utiliza CSS. En la siguiente página se utilizará CSS para especificar el estilo: <strong><a href="/es/docs/CSS/Como_iniciar/Por_que_usar_CSS" title="en/CSS/Getting_Started/Why_use_CSS?">¿Por qué utilizar CSS?</a></strong></p> - -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Czym_jest_CSS", "pt": "pt/CSS/Como_come\u00e7ar/O_que_\u00e9_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS", "es": "es/CSS/Como_iniciar/Que_es_CSS" } ) }}</p> diff --git a/files/es/conflicting/learn/css/first_steps/index.html b/files/es/conflicting/learn/css/first_steps/index.html deleted file mode 100644 index ffcef61e68..0000000000 --- a/files/es/conflicting/learn/css/first_steps/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Introducción -slug: conflicting/Learn/CSS/First_steps -tags: - - CSS - - CSS:Introducción - - para_revisar -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started -original_slug: Web/CSS/Introducción ---- -<h2 id="Presentación"><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Presentación</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Este tutorial es una introducción a las hojas de estilo en cascada (Cascading Style Sheets o CSS).</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Además, te guía a través de las características básicas de CSS con ejemplos prácticos que puedes probar por ti mismo en tu propio equipo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Está dividido en dos partes.</span></span></p> - -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La parte I ilustra las características estándar de CSS que funcionan en los navegadores Mozilla y también en la mayoría de los navegadores modernos.</span></span></li> -</ul> - -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La parte II contiene algunos ejemplos de características especiales que funcionan en Mozilla, pero no necesariamente en otros entornos.</span></span></li> -</ul> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El tutorial se basa en la <a class="external" href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">Especificación CSS 2.1</a> .</span></span></p> - -<h3 id="¿Quién_debe_usar_este_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">¿Quién debe usar este tutorial?</span></span></h3> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Este tutorial es sobre todo para los principiantes en CSS, pero también lo puedes usar si tienes alguna experiencia en CSS.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si eres principiante en CSS, usa la parte I de este tutorial para entender CSS y aprender a usarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">A continuación, utiliza la parte II para comprender el ámbito de aplicación de CSS en Mozilla.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si sabes algo de CSS, puede omitir las partes de la guía de aprendizaje que ya conoces y sólo utilizar las partes que te interesen.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si tienes experiencia en CSS, pero no en Mozilla, puedes saltar a la parte II.</span></span></p> - -<h3 id="¿Qué_se_necesita_antes_de_empezar"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">¿Qué se necesita antes de empezar?</span></span></h3> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para aprovechar al máximo este tutorial, necesitas un editor para archivos de texto y un navegador Mozilla (Firefox o Mozilla Suite).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">También debes saber cómo utilizarlos de forma básica.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no deseas editar los archivos, entonces puedes leer el tutorial y ver las fotos, pero es una forma menos eficaz de aprender.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Algunas partes del tutorial, que son opcionales, requieren otro software de Mozilla.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no quieres descargar otros software de Mozilla, entonces puedes saltártelas.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El otro software de Mozilla al que hace referencia este tutorial incluye:</span></span></p> - -<ul> - <li><a href="/en/DOM_Inspector" title="en/Dom inspector"><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Inspector DOM</span></span></a></li> -</ul> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota:</strong> CSS ofrece distintas maneras de trabajar con el color, por lo que las partes de este tutorial dependen de él.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Sólo puedes utilizar estas partes del tutorial fácilmente si dispones de una pantalla en color y de visión del color normal.</span></span></p> - -<h3 id="Cómo_utilizar_este_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Cómo utilizar este tutorial</span></span></h3> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para utilizar este tutorial, lee las páginas con atención y en orden.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si se te pasa una página, tal vez te resulte difícil de entender las páginas siguientes.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En cada página, utiliza la sección de <em>Información</em> para entender cómo funciona CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Usa la sección <em>Acción</em> para tratar de usar CSS en tu propio equipo.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para controlar que has comprendido los contenidos, acepta el reto al final de cada página.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las soluciones a los retos están enlazadas debajo de los retos, por lo que no es necesario verlos si no quieres.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para entender CSS en mayor profundidad, lee la información que se encuentra en las cajas con el título <em>Más detalles.</em></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Utiliza los enlaces que hay para encontrar información de referencia acerca de CSS.</span></span></p> - -<h2 id="Parte_I_del_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Parte I del tutorial </span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una guía paso a paso básica para CSS.</span></span></p> - -<ol> - <li><strong><a href="/es/docs/Web/CSS/Como_iniciar/Que_es_CSS" title="es/docs/Web/CSS/Como iniciar/Que es CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Qué es CSS</span></span></a></strong></li> - <li><strong><a href="/es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS" title="es/docs/Web/CSS/Como iniciar/Por que usar CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por qué usar CSS</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting Started/How CSS works"><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cómo funciona CSS</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting Started/Cascading and inheritance"><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Cascada y herencia</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting Started/Selectors"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Selectores</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting Started/Readable CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">CSS legibles </span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting Started/Text styles"><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Estilos de texto</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Color</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting Started/Content"><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-99 goog-gtc-translatable" dir="ltr">Contenido</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting Started/Lists"><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Listas</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting Started/Boxes"><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Cajas</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting Started/Layout"><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Diseño</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting Started/Tables"><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Tablas</span></span></a></strong></li> - <li><strong><a href="/es/docs/Web/CSS/Introducción/Media" title="es/docs/Web/CSS/Introducción/Media"><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Multimedia</span></span></a></strong></li> -</ol> - -<h2 id="Parte_II_del_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Parte II del tutorial</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Ejemplos que muestran el ámbito de aplicación de CSS en Mozilla.</span></span></p> - -<ol> - <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting Started/JavaScript"><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">JavaScript</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting Started/XBL bindings"><span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Enlaces XBL</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting Started/XUL user interfaces"><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Interfaces de usuario XUL</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting Started/SVG graphics"><span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Gráficos SVG</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting Started/XML data"><span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Datos XML</span></span></a></strong></li> -</ol> - -<p>{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p> diff --git a/files/es/conflicting/learn/css/styling_text/fundamentals/index.html b/files/es/conflicting/learn/css/styling_text/fundamentals/index.html deleted file mode 100644 index 19c967bb6c..0000000000 --- a/files/es/conflicting/learn/css/styling_text/fundamentals/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Los estilos de texto -slug: conflicting/Learn/CSS/Styling_text/Fundamentals -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles -original_slug: Web/CSS/Introducción/Los:estilos_de_texto ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Esta es la sección séptima del</span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> tutorial</span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="es-es / docs / Web / guía / CSS / Primeros pasos"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS Introducción</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> ; </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">da más ejemplos de estilos de texto.</span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Usted modificara su hoja de estilo de ejemplo para utilizar diferentes fuentes.</span></font></font></p> - -<h2 class="clearLeft" id="Los_estilos_de_texto_Información"><span id="result_box" lang="es"><span class="hps">Los estilos de texto</span><span>: Información</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">tiene varias propiedades</span> <span class="hps">de</span> </span><span id="result_box" lang="es"><span class="hps">estilo</span><span> de </span></span><span id="result_box" lang="es"><span class="hps">texto</span> <span>.</span></span></p> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Hay una propiedad abreviada conveniente, </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">la fuente</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> , que se puede utilizar para especificar varios aspectos a la vez, por ejemplo:</span></font></font></p> - -<ul style="margin: 0px 0px 24px; padding: 0px 0px 0px 40px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Negrita, cursiva, y small-caps (versalita)</span></font></font></li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El tamaño</span></font></font></li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La altura de la línea</span></font></font></li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El tipo de letra</span></font></font></li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div> - -<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token selector" style="margin: 0px; padding: 0px; border: 0px; color: rgb(102, 153, 0);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">p </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">{ </span></font></font></span><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">fuente </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cursiva 75% / 125% </span></font></font><span class="token string" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">"Comic Sans MS"</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> , cursive </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">; </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">}</span></font></font></span></code></pre> -</div> - -<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">establece</span> varias <span class="hps">propiedades de la fuente</span><span class="alt-edited">, poniendo</span> <span class="hps">todos los párrafos</span> <span class="hps">en</span></span> italic.</p> - -<p><span id="result_box" lang="es"><span class="hps">El tamaño de fuente</span> <span class="hps">se establece en</span> <span class="hps">tres cuartas partes del</span> <span class="hps">tamaño</span> </span><span id="result_box" lang="es"><span class="hps">en </span><span class="hps">cada</span></span><span id="result_box" lang="es"> </span><span id="result_box" lang="es"><span class="hps">párrafo</span><span> </span></span><span id="result_box" lang="es"><span class="hps alt-edited">del elemento padre</span><span>,</span> <span class="hps">y</span> <span class="hps alt-edited">el</span> <span class="hps alt-edited">interlíneado</span> <span class="hps">se establece en</span> <span class="hps">125</span><span class="atn">% (</span><span>un poco más</span> <span class="hps">separados</span> <span class="hps">de lo normal)</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">tipo de letra</span> <span class="hps">se establece en</span> <span class="hps">Comic</span> <span class="hps">Sans</span> <span class="hps">MS</span><span>,</span> <span class="hps">pero si</span> <span class="hps">este tipo de letra</span> <span class="hps">no está disponible,</span> <span class="hps">el navegador</span> <span class="hps">utilizará</span> <span class="hps alt-edited">por</span> <span class="hps">defecto</span> <span class="hps">tipografía</span> <span class="hps">cursiva</span> <span class="hps">(</span></span>hand-written<span lang="es"><span>)</span><span>.</span></span></p> - -<p><span lang="es"><span class="hps">La</span> <span class="hps">regla tiene</span> <span class="hps alt-edited">el efecto colateral</span> <span class="hps alt-edited">de desactivar</span> <span class="hps alt-edited">las</span> <span class="hps alt-edited">versalitas</span> <span class="hps">y</span> <span class="hps alt-edited">negritas</span> <span class="hps atn">(</span><span>estableciendo su valor </span><span class="hps alt-edited">en normal)</span><span>:</span></span></p> -</div> - -<h3 id="Tipos_de_fuentes"><span id="result_box" lang="es"><span class="hps alt-edited">Tipos de fuentes</span></span></h3> - -<p><span id="result_box" lang="es"><span class="hps">No se puede predecir</span> <span class="hps">qué</span> tipografías </span><span id="result_box" lang="es"><span class="hps alt-edited">tienen</span><span> </span></span><span id="result_box" lang="es"><span class="hps alt-edited">los lectores de</span> nuestro <span class="hps">documento</span> <span>.</span> <span class="hps">Así que</span> <span class="hps alt-edited">cuando se especifica</span> <span class="hps alt-edited">llos tipos de fuentes </span><span class="hps alt-edited">de las </span><span class="hps alt-edited">letra</span><span>s</span><span>, es</span> <span class="hps">buena</span> <span class="hps alt-edited">idea darle</span> <span class="hps alt-edited">una lista alternativa</span> <span class="hps">en orden de preferencia</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">Finalice la</span> <span class="hps">lista</span> <span class="hps">con uno de los</span> <span class="hps alt-edited">las tipografías</span> por defecto<span class="hps alt-edited">:</span> </span><code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>.</p> - -<p><span lang="es"><span class="hps">Si el</span> <span class="hps">tipo de letra</span> <span class="hps alt-edited">no es compatible con</span> <span class="hps alt-edited">alguna de los caracteres</span> <span class="hps alt-edited">del documento</span><span>, el navegador</span> <span class="hps alt-edited">puede sustituirlos por</span> <span class="hps alt-edited">una tipografía</span> <span class="hps">diferente.</span> <span class="hps">Por ejemplo, el</span> <span class="hps">documento puede contener</span> <span class="hps">caracteres especiales que</span> </span><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">el tipo de letra no admite.</span><span lang="es"> <span class="hps">Si</span> <span class="hps">el navegador puede</span> <span class="hps">encontrar otro</span> <span class="hps alt-edited">tipografía que</span> <span class="hps">tiene esos</span> <span class="hps">caracteres</span><span>,</span> <span class="hps alt-edited">entonces usará</span> <span class="hps">otro</span> <span class="hps alt-edited">tipo de fuente</span></span></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar un tipo de letra por sí misma, utilizar el </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-family</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad.</span></font></font></p> - -<h3 id="Los_tamaños_de_la_fuente"><span id="result_box" lang="es"><span title="Font sizes - -">Los tamaños de la fuente</span></span></h3> - -<p><span id="result_box" lang="es"><span title="Browser users can override the default font sizes or change the text size while they read a page, so it makes good sense for you to use relative sizes wherever you can. -">Los usuarios de navegadores pueden anular los tamaños de fuente por defecto o cambiar el tamaño del texto mientras leen una página, así que tiene buen sentido utilizar tamaños relativos donde se pueda.</span></span></p> - -<p><span id="result_box" lang="es"><span title="You can use some built-in values for font sizes, like small, medium and large.">Puede utilizar algunos valores incorporados para tamaños de fuentes, </span></span><code>like</code> <code>small</code>, <code>medium</code> and <code>large</code> (<span id="result_box" lang="es"><span title="You can use some built-in values for font sizes, like small, medium and large.">pequeñas, medianas y grandes)</span></span> . <span id="result_box" lang="es"><span title="You can also use values relative to the font size of the parent element, like: smaller, larger, 150% or 1.5em.">También puede utilizar valores relativos al tamaño de fuente del elemento padre, </span></span>l<code>ike</code><code>: smaller, larger, 150% or 1.5em</code>. ( <span id="result_box" lang="es"><span title="You can also use values relative to the font size of the parent element, like: smaller, larger, 150% or 1.5em.">más pequeño, más grande, 150% o 1.5em.)</span></span>. <span id="result_box" lang="es"><span title='An "em" is equivalent to the width of the letter "m" (for the font size of the parent element);'>Un "em" es equivalente a la anchura de la letra "m" (para el tamaño de fuente del elemento padre); </span><span title="thus 1.5em is one-and-a-half times the size of the font of the parent element. -">así 1.5em es una vez y media el tamaño de la fuente del elemento padre.</span></span></p> - -<p><span id="result_box" lang="es"><span title="If necessary you can specify an actual size, like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer.">Si es necesario, puede especificar como tamaño actual, : 14px (14 píxeles) para un dispositivo de visualización o 14pt (14 puntos) para una impresora.</span></span><span lang="es"><span title="If necessary you can specify an actual size, like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer."> Esto no es accesible para los usuarios con discapacidad visual, ya que no les permite cambiar el tamaño. Una estrategia más accesible es establecer un valor incorporado como mediano en un elemento en la parte superior del documento, y luego fijar tamaños relativos a todos los elementos descendientes.</span></span></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar un tamaño de fuente por su cuenta, utilice el </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-size</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad.</span></font></font></p> - -<h3 id="Altura_de_línea">Altura de línea</h3> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">El</span> <span class="hps alt-edited">interlíneado</span> <span class="hps">especifica el</span> <span class="hps">espacio entre líneas</span><span>.</span> <span class="hps">Si el documento tiene</span> <span class="hps">párrafos largos</span> <span class="hps">con</span> <span class="hps">muchas líneas</span><span>,</span> <span class="hps">una separación</span> <span class="hps">más grande de lo</span> <span class="hps">normal,</span> <span class="hps">hace que sea</span> <span class="hps">más fácil de leer</span><span>, especialmente si el</span> <span class="hps">tamaño de la letra</span> <span class="hps">es pequeña</span><span>.</span></span></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar una altura de línea por su cuenta, utilice <code>la </code></span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">propiedad </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">line-height</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> .</span></font></font></p> - -<h3 id="Decoración">Decoración</h3> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">La</span> <span class="hps">propiedad independiente </span></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">text-decoration</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><span lang="es"><span class="hps">puede</span> <span class="hps">especificar otros</span> <span class="hps">estilos,</span> <span class="hps">como el</span> <span class="hps">subrayado o</span> <span class="hps">tachado</span><span>.</span> <span class="hps">Usted</span> <span class="hps alt-edited">puede establecerlo en</span> <span class="hps">ninguno</span> ( </span><code>none</code> ) <span lang="es"> <span class="hps alt-edited">para eliminar</span> <span class="hps alt-edited">expresamente</span> <span class="hps">cualquier</span> <span class="hps">decoración.</span></span></p> - -<h3 id="Otras_propiedades">Otras propiedades</h3> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar cursiva por su cuenta, use </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-style" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-style</span></font></font></code></a><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : italic;</span></font></font></code><br> - <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar audaz por su cuenta, use </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-weight</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : bold;</span></font></font></code><br> - <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar los pequeños capitales en su propio, el uso </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-variant</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : small-caps;</span></font></font></code></p> - -<p>Para desactivar o activar cualquiera de estos valores de forma individual, puede especificar su valor como <code>normal</code> <code>o inherit</code>.</p> - -<div class="tuto_details"> -<div class="tuto_type">Mas detalles</div> - -<p><span id="result_box" lang="es"><span class="hps">Puede especificar</span> <span class="hps">estilos de texto</span> <span class="hps alt-edited">de diversas</span> <span class="hps alt-edited">maneras.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Por ejemplo</span><span>,</span> <span class="hps">algunas de las</span> <span class="hps">propiedades mencionadas</span> <span class="hps">aquí</span> <span class="hps">tienen</span> <span class="hps">otros valores</span> <span class="hps">que se pueden utilizar</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">una hoja de estilo</span> <span class="hps">compleja</span><span>,</span> <span class="hps alt-edited">evite utilizar</span> <span class="hps alt-edited">la propiedad </span></span><code>font</code> <code>shorthand</code><span lang="es"><span class="hps">,</span> <span class="hps">debido a sus</span> <span class="hps">efectos secundarios</span> <span class="hps">(resetean </span><span class="hps">otras propiedades</span> <span class="hps">individuales</span><span>)</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">Para obtener mas detalles de</span> <span class="hps">las propiedades</span> <span class="hps">que se relacionan con</span> <span class="hps">las fuentes, </span></span><span lang="es"><span class="hps">ver</span></span><span lang="es"><span class="hps"> las </span><span class="hps">especificación</span>es <span class="hps">CSS</span></span><span lang="es"> </span><span id="result_box" lang="es"><span class="hps">, </span></span><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a><span lang="es"><span class="hps">,</span><span>.</span> <span class="hps alt-edited">Si desea más detalles sobre</span> <span class="hps">la decoración de</span> <span class="hps">texto,</span> <span class="hps">ver</span> </span><a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text </a><span lang="es"><span class="hps">.</span></span></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Si no quiere depender de los tipos de letra instalados en los sistemas de los usuarios, puede usar </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(244, 244, 244);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">@ font-face</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> para especificar una fuente en línea. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Sin embargo, esto requiere que los usuarios tengan un navegador que soporte esta regla.</span></font></font></p> -</div> - -<h2 id="Acción_Especificaciónes_de_las_fuentes"><span id="result_box" lang="es"><span>Acción:</span> <span class="hps">Especificaciónes de</span> <span class="hps">las fuentes</span></span></h2> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para un simple documento, puede establecer la fuente del </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="El HTML <body> representa el contenido de un documento HTML. Sólo hay un elemento <body> en un documento."><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">elemento </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"><body></span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> y el resto del documento hereda la configuración.</span></font></font></p> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="hps">CSS</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps alt-edited">Agregue</span> <span class="hps">la siguiente regla</span> <span class="hps">para cambiar</span> <span class="hps">el tipo de letra</span> <span class="hps">en todo el documento</span><span>.</span> <span class="hps">La</span> <span class="hps">parte superior del archivo</span> <span class="hps">CSS</span> <span class="hps">es</span> <span class="hps alt-edited">el lugar lógico</span> <span class="hps alt-edited">para esto</span><span>, pero no tiene</span> <span class="hps alt-edited">los mismos efectos</span> <span class="hps">donde</span> <span class="hps alt-edited">usted lo ponga</span><span>:</span></span> - <pre class="eval language-html"><code class="language-html">body {font: 16px "Comic Sans MS", cursive;}</code></pre> - - <div class="line-number" style="top: 0px;"> </div> - </li> - <li><span id="result_box" lang="es"><span class="hps alt-edited">Añada</span> <span class="hps">un comentario</span> <span class="hps alt-edited">que explique</span> <span class="hps">la regla, y</span> <span class="hps alt-edited">agregue un espacio en blanco</span> <span class="hps alt-edited">para que coincida con</span> <span class="hps">su diseño</span> <span class="hps">preferido</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Guarde el archivo y</span> <span class="hps alt-edited">actualice el explorador</span> <span class="hps">para ver el efecto</span><span>.</span> <span class="hps">Si su sistema tiene</span> <span class="hps">Comic</span> <span class="hps">Sans</span> <span class="hps">MS</span><span>,</span> <span class="hps">u otra</span> <span class="hps">fuente cursiva</span> <span class="hps">que no</span> <span class="hps">soporta </span></span>italic<span lang="es"><span class="hps">,</span> <span class="hps">su navegador</span> eligira <span class="hps">un</span> <span class="hps">tipo de letra</span> <span class="hps">diferente para </span></span><span lang="es"><span class="hps alt-edited">la</span> <span class="hps alt-edited">primera línea</span></span><span lang="es"><span class="hps"> del</span> <span class="hps">texto en </span></span>italic<span lang="es"><span class="hps alt-edited">:</span></span> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Desde la barra de menú de su navegador, elija </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver> Tamaño del texto> Aumentar</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> (o </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver> Zoom> Acercar</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> ). </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">A pesar de que ha especificado 16 píxeles en el estilo, un usuario leer el documento se puede cambiar este tamaño.</span></font></font></li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">Desafío</div> - -<p><span id="result_box" lang="es"><span class="hps">Sin modificar nada más</span><span>,</span> <span class="hps">hacer</span> <span class="hps">las seis</span> <span class="hps">letras iniciales</span> <span class="hps">dos veces el tamaño</span> <span class="hps">de</span> <span class="hps">letra serif</span> <span class="hps">por defecto del navegador</span><span>:</span></span></p> - -<table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>Add the following style declaration to the <code>strong</code> rule:</p> - -<pre class="brush: css"> font: 200% serif; -</pre> -If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles#tutochallenge" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-size: 12px; text-align: right; display: block; font-family: 'Open Sans', sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal;" title="Mostrar una posible solución para el desafío"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver una solución para el desafío.</span></font></font></a></div> - -<h2 id="¿Y_ahora_qué"><span id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El documento muestra ya utiliza varios colores con nombre. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="/ En-US / docs / Web / guía / CSS / Getting_Started / Color"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">siguiente sección</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> enumera los nombres de los colores estándar y se explica cómo se puede especificar otros </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">.</span></font></font></strong></p> - -<p> </p> diff --git a/files/es/conflicting/learn/forms/index.html b/files/es/conflicting/learn/forms/index.html deleted file mode 100644 index 03824f9932..0000000000 --- a/files/es/conflicting/learn/forms/index.html +++ /dev/null @@ -1,367 +0,0 @@ ---- -title: Formularios HTML -slug: conflicting/Learn/Forms -tags: - - Featured - - Forms - - Formulario(2) - - Guide - - Guía - - HTML - - NeedsTranslation - - TopicStub - - Web -translation_of: Learn/Forms -original_slug: Learn/HTML/Forms ---- -<p><span class="seoSummary">Esta guía está constituida por una serie de artículos que te ayudarán a dominar los formularios en HTML. </span>El formulario HTML es una herramienta cuya finalidad es interactuar con el usuario; sin embargo, debido a razones históricas y técnicas, no siempre resulta obvio como explotar su enorme potencial. En esta guía, cubriremos todos los aspectos de los formularios HTML, desde su estructura hasta su estilo, desde la manipulación de sus datos hasta los <em>widgets</em> personalizados. ¡Aprenderás a disfrutar de las grandes prestaciones que nos brindan!</p> - -<h2 id="Artículos">Artículos</h2> - -<ol> - <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Mi primer formulario HTML</a></li> - <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>Cómo estructurar un formulario HTML</span></a></li> - <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>Los <em>widgets</em> nativos de formulario</span></a></li> - <li>CSS para formularios HTML - <ol> - <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Aplicando estilos a formularios HTML</span></a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Estilos avanzados para formularios HTML</a></li> - <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Tabla de compatibilidad de propiedades para <em>widgets</em> de formulario</a></li> - </ol> - </li> - <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviando y recibiendo datos</span></a></li> - <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validación de los datos del formulario</a></li> - <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Cómo crear un <em>widget</em> de formulario personalizado</a></li> - <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Enviando formularios mediante JavaScript</a> - <ol> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Usando el objeto FormData</a></li> - </ol> - </li> - <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">Formularios HTML en navegadores antiguos</a></li> -</ol> - -<h2 id="Documentación_HTML">Documentación HTML</h2> - -<h3 id="HTML_Elements">HTML Elements</h3> - -<table> - <thead> - <tr> - <th scope="col">Elemento</th> - <th scope="col">Interfaz DOM relacionada</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td style="vertical-align: top;">{{HTMLElement("button")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td> - <td style="vertical-align: top;">El elemento <code>button</code> representa un boton clickeable.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td> - <td style="vertical-align: top;">El elemento <span style="font-family: courier new;">datalist</span> element contiene un conjunto de elementos{{ HTMLElement("option") }} que representan posibles opciones para el valor de otros elementos del formulario.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td> - <td style="vertical-align: top;">El <span style="font-family: courier new;">fieldset</span> se usa para agrupar distintos elementos dentro de un formulario.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("form")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td> - <td style="vertical-align: top;">El elemento <code>form </code>representa una seccion del documento html que contiene elementos interactivos a traves de los cuales se le permite al usuario enviar informacion hacia un servidor web.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("input")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td> - <td style="vertical-align: top;">El elemento <code>input</code> es usado para crear controles interactivos para los formularios.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td> - <td style="vertical-align: top;">El elemento <code>keygen</code> existe para facilitar la generación de llaves u el envío de las llaves publicas como parte de un formulario HTML.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("label")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td> - <td style="vertical-align: top;">El <code>label</code> determina un título para un item de la interfaz del usuario.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("legend")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td> - <td style="vertical-align: top;">El elemento <code>legend</code> representa una etiqueta para el contenido del elemento {{ HTMLElement("fieldset") }} que lo contiene.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("meter")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td> - <td style="vertical-align: top;">EL elemento <code>meter</code> representa un valor escalar dentro de un rango conocido, o un valor fraccional.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td> - <td style="vertical-align: top;"> - <p>El elemento <code>optgroup</code> crea un grupo de opciones dentro de un elemento {{ HTMLElement("select") }} .</p> - </td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("option")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td> - <td style="vertical-align: top;">El elemento<em> </em><code>option<em> </em></code>es usado para crear un control de opcion que representa un item dentro de alguno de los elementos {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} o {{ HTMLElement("datalist") }} .</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("output")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td> - <td style="vertical-align: top;">El elemento <code>output</code> representa un resultado de un calculo.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("progress")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td> - <td style="vertical-align: top;">El elemento <code>progress</code> es usado para mostrar el progreso de la realización de una tarea.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("select")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td> - <td style="vertical-align: top;">El elemento <code>select</code> representa el control que presenta un menu de opciones.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td> - <td style="vertical-align: top;">EL elemento <code>textarea</code> representa un campo multi-linea de edicion de text plano.</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Nota:</strong> Todos los elementos de formulario, al igual que el resto de elementos HTML, soportan la interfaz DOM {{domxref("HTMLElement")}}.</p> -</div> - -<h3 id="HTML_Attributes">HTML Attributes</h3> - -<table class="standard-table"> - <thead> - <tr> - <th>Nombre del atributo</th> - <th>Elementos</th> - <th>Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td>accept</td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>Lista de tipos que acepta el servidor, típicamente un tipo de fichero.</td> - </tr> - <tr> - <td style="white-space: nowrap;">accept-charset</td> - <td>{{ HTMLElement("form") }}</td> - <td>Lista de <em>charsets </em>(conjuntos de caracteres) aceptados.</td> - </tr> - <tr> - <td>action</td> - <td>{{ HTMLElement("form") }}</td> - <td>La URI del programa con el que procesar la información enviada a mediante el formulario.</td> - </tr> - <tr> - <td>autocomplete</td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>Indica si los controles en este formulario serán o no autocompletados por el navegador</td> - </tr> - <tr> - <td>autofocus</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>El elemento debería poseer el foco automáticamente tras cargar la página.</td> - </tr> - </tbody> - <tbody> - <tr> - <td>challenge</td> - <td>{{ HTMLElement("keygen") }}</td> - <td>Una cadena de comprobación que es enviada junto con la clave pública.</td> - </tr> - <tr> - <td>checked</td> - <td>{{ HTMLElement("input") }}</td> - <td>Indica si el elemento debe estar seleccionado (checked) tras cargar la página.</td> - </tr> - <tr> - <td>cols</td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Define el número de columnas en un elemento de tipo textarea.</td> - </tr> - <tr> - <td>data</td> - <td>{{ HTMLElement("object") }}</td> - <td>Especifica la URL del recurso.</td> - </tr> - <tr> - <td>dirname</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td> </td> - </tr> - <tr> - <td>disabled</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Indica si el usuario puede o no interactuar con el elemento.</td> - </tr> - <tr> - <td>enctype</td> - <td>{{ HTMLElement("form") }}</td> - <td>Define el tipo de contenido del formulario cuando el método de envío es POST.</td> - </tr> - <tr> - <td>for</td> - <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> - <td> - <p>Establece una asociación con otros elementos</p> - </td> - </tr> - <tr> - <td>form</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Indica el elemento <strong>form</strong> que contiene este elemento.</td> - </tr> - </tbody> - <tbody> - <tr> - <td>high</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the lower bound of the upper range.</td> - </tr> - <tr> - <td>keytype</td> - <td>{{ HTMLElement("keygen") }}</td> - <td>Especifica el tipo de clave generada.</td> - </tr> - <tr> - <td>list</td> - <td>{{ HTMLElement("input") }}</td> - <td>Determina una lista de opciones predefinidas para sugerir al usuario.</td> - </tr> - <tr> - <td>low</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the upper bound of the lower range.</td> - </tr> - <tr> - <td>max</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> - <td>Indica el máximo valor permitido.</td> - </tr> - <tr> - <td>maxlength</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Define el máximo número de caracteres permitidos en el elemento.</td> - </tr> - <tr> - <td>method</td> - <td>{{ HTMLElement("form") }}</td> - <td> - <p>Define qué método HTTP se usará al enviar el formulario. puede ser <strong>GET</strong> (por defecto) o <strong>POST</strong></p> - </td> - </tr> - <tr> - <td>min</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> - <td>Indica el mínimo valor permitido.</td> - </tr> - <tr> - <td>multiple</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Indica si mútiples valores pueden ser introducidos en un input de tipo email o file.</td> - </tr> - <tr> - <td>name</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Especifica el nombre del elemento. Este nombre se usará asociado al dato que contiene al enviar al servidor el formulario.</td> - </tr> - <tr> - <td>novalidate</td> - <td>{{ HTMLElement("form") }}</td> - <td>Indica que el formulario no debería validarse al momento de ser enviado.</td> - </tr> - <tr> - <td>optimum</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indica el valor numérico óptimo.</td> - </tr> - <tr> - <td>pattern</td> - <td>{{ HTMLElement("input") }}</td> - <td>Establece la expresión regular con la que validar el valor del elemento.</td> - </tr> - <tr> - <td>placeholder</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Proporciona una pista al usuario de lo que el campo debe contener. Se muestra cuando el campo está vacío.</td> - </tr> - <tr> - <td>readonly</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Indica si el elemento se puede o no editar.</td> - </tr> - <tr> - <td>required</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Cuando un campo del formulario es requerido, el usuario no puede dejarlo vacío.</td> - </tr> - <tr> - <td>rows</td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Defines the number of rows in a textarea.</td> - </tr> - <tr> - <td>selected</td> - <td>{{ HTMLElement("option") }}</td> - <td>En una lista de selección, la opción con el atributo selected será la que está seleccionada por defecto</td> - </tr> - <tr> - <td>size</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Defina la anchura del elemento (en píxeles). Si el elemento es de tipo <strong>text</strong> o <strong>password</strong> el ancho se referirá al número de caracteres.</td> - </tr> - <tr> - <td>src</td> - <td>{{ HTMLElement("img") }}</td> - <td>El URL del recurso</td> - </tr> - <tr> - <td>step</td> - <td>{{ HTMLElement("input") }}</td> - <td>Determina el incremento de cada paso con el que se cubre un rango desde un valor mínimo hasta un valor máximo.</td> - </tr> - <tr> - <td>target</td> - <td>{{ HTMLElement("form") }}</td> - <td> </td> - </tr> - <tr> - <td>type</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> - <td>Determina el tipo del elemento.</td> - </tr> - <tr> - <td>usemap</td> - <td>{{ HTMLElement("input") }}</td> - <td> </td> - </tr> - <tr> - <td>value</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> - <td>Establece el valor actual del elemento.</td> - </tr> - <tr> - <td>wrap</td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Cuando un texto tiene una longitud mayor que el ancho del elemento sobre el que se muestra, determina si el elemento debe simular saltos de línea para que todo el texto quede visible en el elemento.</td> - </tr> - </tbody> -</table> - -<h3 id="Referencia_a_la_normativa">Referencia a la normativa</h3> - -<ul> - <li><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#forms" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML 5.1 Specification (Forms)</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li> -</ul> diff --git a/files/es/conflicting/learn/html/introduction_to_html/getting_started/index.html b/files/es/conflicting/learn/html/introduction_to_html/getting_started/index.html deleted file mode 100644 index e6cd3db57d..0000000000 --- a/files/es/conflicting/learn/html/introduction_to_html/getting_started/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: La importancia de comentar correctamente -slug: conflicting/Learn/HTML/Introduction_to_HTML/Getting_started -tags: - - HTML - - Todas_las_Categorías - - XHTML - - XML -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments -translation_of_original: Web/Guide/HTML/The_Importance_of_Correct_HTML_Commenting -original_slug: Web/HTML/La_importancia_de_comentar_correctamente ---- -<p> </p> -<p><br> - Cuando escribimos HTML en <a class="external" href="http://www.mozilla.org/docs/web-developer/quirks/doctypes.html">modo estándar</a>, los comentarios mal formados pueden romper las páginas, causando que los contenidos del documento sean parcial o totalmente comentados. Al escribir XHTML o XML, los comentarios incorrectos darán lugar a que sus documentos no puedan ser mostrados.</p> -<h3 id="HTML_4.01" name="HTML_4.01">HTML 4.01</h3> -<p> - <i> - De la <a class="external" href="http://html.conclase.net/w3c/html401-es/intro/sgmltut.html#h-3.2.4">Recomendación del W3C HTML 4.01 Sección 3.2.4 - Comentarios</a>:</i> -</p> -<blockquote> - No se permite espacio en blanco entre el delimitador de apertura de declaración de etiqueta ("<!") y el delimitador de apertura de comentario ("--"), pero sí se permite entre el delimitador de cierre de comentario ("--" y el delimitador de cierre de declaración de etiqueta (">"). Un error común es incluir una cadena de guiones ("---") dentro de un comentario. Los autores deberían evitar *poner dos o más guiones adyacentes dentro de un comentario.</blockquote> -<h4 id="Ejemplos" name="Ejemplos">Ejemplos</h4> -<p>Los siguientes son comentarios válidos en HTML.</p> -<pre class="eval"><!-- comentario html válido --> -<!-- comentario html válido -- > -</pre> -<p>El siguiente no es un comentario válido en HTML.</p> -<pre class="eval"><!-- comentario html -- no válido --> -</pre> -<h3 id="XML" name="XML">XML</h3> -<p> - <i> - De la <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/xml/xml1/index.html#sec-comments">Recomendación del W3C XML 1.0 Sección 2.5 - Comentarios</a>:</i> -</p> -<blockquote> - {{ mediawiki.external('Definición: Los comentarios pueden aparecer en cualquier lugar de un documento fuera de otras marcas; Adicionalmente pueden aparecer en lugares permitidos por la gramática. No son parte de los datos de caracter de un documento; un procesador de XML puede, pero no tiene que, hacer posible que la aplicación recupere el texto de comentarios.') }} Por compatibilidad, la cadena "--" (doble guión) no debe ocurrir dentro de comentarios. - <pre>[15] Comment ::= '<!--' ((Char - '-') | ('-' (Char - '-')))* '-->' -</pre> -</blockquote> -<p>Según lo descrito en la gramática de XML sobre comentarios, un comentario tiene la siguiente forma:</p> -<pre class="eval"><!-- cualquier letra o signo, menos guiones seguidos --> -</pre> -<h4 id="Ejemplos_2" name="Ejemplos_2">Ejemplos</h4> -<p>El siguiente es un comentario válido en XML y XHTML.</p> -<pre class="eval"><!-- comentario xml/xhtml válido --> -</pre> -<p>Los siguientes son comentarios no válidos en XML y XHTML.</p> -<pre class="eval"><!-- comentario xml -- no válido --> -<!-- comentario xml no válido ---> -<!-- comentario xml no válido -- > -</pre> -<h3 id="Otras_lecturas" name="Otras_lecturas">Otras lecturas</h3> -<ul> - <li><a class="external" href="http://html.conclase.net/w3c/html401-es/intro/sgmltut.html#h-3.2.4">Recomendación HTML 4.01: 3.2.4 - Comentarios</a></li> - <li><a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/xml/xml1/index.html#sec-comments">Recomendación XML: 2.5 - Comentarios</a></li> - <li><a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=144432">Bugzilla bug 144432</a></li> - <li><a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=102127">Bugzilla bug 102127</a></li> -</ul> -<div class="originaldocinfo"> - <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> - <ul> - <li>Last Updated Date: May 19th, 2003</li> - <li>Copyright © 2001-2003 Netscape. All rights reserved.</li> - </ul> -</div> -<p> </p> diff --git a/files/es/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/es/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html deleted file mode 100644 index 5598eb90bd..0000000000 --- a/files/es/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ /dev/null @@ -1,288 +0,0 @@ ---- -title: Usando audio y video con HTML5 -slug: conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -tags: - - Flash - - Ogg - - applet - - busqueda - - errores - - especificacion - - gestion - - opciones - - reproduccion - - reserva -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video -original_slug: Web/HTML/Usando_audio_y_video_con_HTML5 ---- -<p>HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos {{ HTMLElement("audio") }} y {{ HTMLElement("video") }}, ofreciendo la posibilidad de insertar contenido multimedia en documentos HTML.</p> - -<h2 id="Insertando_contenido_multimedia">Insertando contenido multimedia</h2> - -<p>Insertar contenido multimedia en tus documentos HTML es muy sencillo:</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> - Tu navegador no implementa el elemento <code>video</code>. -</video></pre> - -<p>Este ejemplo reproduce un vídeo de ejemplo, con los controles de reproducción, desde el sitio Web de Theora.</p> - -<p>Este es un ejemplo para insertar <em>audio</em> en tu documento HTML</p> - -<pre class="brush: html"><audio src="/test/audio.ogg"> -<p>Tu navegador no implementa el elemento audio.</p> -</audio></pre> -</div> - -<p>El atributo <code>src</code> puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.ogg" controls autoplay loop> -<p>Tu navegador no implementa el elemento audio</p> -</audio></pre> -</div> - -<p>Este código de ejemplo usa los atributos del elemento {{ HTMLElement("audio") }}:</p> - -<ul> - <li><code>controls</code> : muestra los controles estándar de HTML5 para audio en una página web.</li> - <li><code>autoplay</code> : hace que el audio se reproduzca automáticamente.</li> - <li><code>loop</code> : hace que el audio se repita automáticamente.</li> -</ul> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.mp3" preload="auto" controls></audio></pre> -</div> - -<p>El atributo <code>preload</code> es usado en el elemento audio para almacenar temporalmente (buffering) archivos de gran tamaño. Este puede tomar uno de 3 valores:</p> - -<ul> - <li><code>"none"</code> no almacena temporalmente el archivo</li> - <li><code>"auto"</code> almacena temporalmente el archivo multimedia</li> - <li><code>"metadata"</code> almacena temporalmente sólo los metadatos del archivo</li> -</ul> - -<p>Se pueden especificar múltiples fuentes de archivos usando el elemento {{ HTMLElement("source") }} <span id="result_box" lang="es"><span class="hps">con el fin de</span> <span class="hps">proporcionar vídeo</span> <span class="hps">o</span> <span class="hps">audio</span> <span class="hps">codificados en formatos</span> <span class="hps">diferentes</span> <span class="hps">para</span> <span class="hps">diferentes navegadores</span></span>. Por ejemplo:</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg"> - <source src="foo.mp4" type="video/mp4"> - Tu navegador no implementa el elemento <code>video</code>. -</video> -</pre> - -<p>Esto reproduce el archivo Ogg en navegadores que admiten el formato Ogg. Si el navegador no admite Ogg, el navegador usará el archivo MPEG-4. Mira también la lista de <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">los formatos multimedia admitidos por los elementos audio y video</a> en los diferentes navegadores.</p> - -<p>También puedes especificar qué codecs requiere el archivo multimedia; de esta forma el navegador tomará decisiones más inteligentes:</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> - Tu navegador no implementa el elemento <code>video</code>. -</video></pre> - -<p>Aquí, especificamos que el vídeo usa los codecs Dirac y Speex. Si el navegador implementa Ogg, pero no los codecs especificados, el vídeo no será cargado.</p> - -<p>Si el atributo <code>type</code> no está especificado, el tipo de contenido multimedia se obtiene del servidor <span id="result_box" lang="es"><span class="hps">y</span> se <span class="hps">comprueba para</span> <span class="hps">ver</span> <span class="hps">si el navegador</span> <span class="hps">lo puede manejar</span></span>; si no puede ser mostrado, se comprueba el siguiente <code>source</code> , si ninguno de los elementos <code>source</code> especificados pueden ser usados, un evento de <code>error</code> es enviado al elemento <code>video</code>. Si el atributo <code>type</code> está especificado, es comparado con los tipos que el navegador puede reproducir, y si no es reconocido, no se hace la consulta al servidor; en su lugar, el siguiente <code>source</code> se comprueba una vez.</p> - -<p>Mira <a href="/en-US/docs/DOM/Media_events" title="https://developer.mozilla.org/en/DOM/Media_events">los eventos del contenido multimedia</a> para una lista completa de eventos asociados con la producción multimedia. Para detalles en los formatos multimedia soportados por los diferentes navegadores, mira <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">los formatos multimedia sportados por los elementos audio y video</a>.</p> - -<h2 id="Controlando_la_reproducción_multimedia">Controlando la reproducción multimedia</h2> - -<p>Una vez que has incrustado el contenido multimedia en tu documento HTML usando los nuevos elementos, puedes controlarlos mediante programación en JavaScript. Por ejemplo, para iniciar (o reiniciar) la reproducción, puedes hacer esto:</p> - -<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; -v.play(); -</pre> - -<p>La primera línea obtiene el primer elemento video en el documento, y la segunda línea llama al método <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="nsIDOMHTMLMediaElement#play()"><code>play()</code></a> del elemento, como está definido en la interfaz {{ interface("nsIDOMHTMLMediaElement") }} que es usada para implementar los elementos multimedia.</p> - -<p>Controlar un reproductor de audio en HTML5 para reproducir, pausar, aumentar y disminuir el volumen usando algo de Javascript es muy sencillo.</p> - -<pre class="brush: html"><audio id="demo" src="audio.mp3"></audio> -<div> - <button onclick="document.getElementById('demo').play()">Reproducir el Audio</button> - <button onclick="document.getElementById('demo').pause()">Pausar el Audio</button> - <button onclick="document.getElementById('demo').volume+=0.1">Aumentar el Volumen</button> - <button onclick="document.getElementById('demo').volume-=0.1">Disminuir el Volumen</button> -</div> -</pre> - -<h2 id="Deteniendo_la_descarga_de_contenido_multimedia">Deteniendo la descarga de contenido multimedia</h2> - -<p>Mientras que detener la reproducción multimedia es tan fácil como llamar al método pause() del elemento, el navegador sigue descargando el contenido multimedia hasta que el elemento multimedia es eliminado <span id="result_box" lang="es"><span class="hps">a través de</span> <span class="hps">la recolección de basura</span></span>.</p> - -<p>Aquí un truco para detener la descarga de una sola vez:</p> - -<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID"); -mediaElement.pause(); -mediaElement.src = ""; -</pre> - -<p>Estableciendo una cadena vacía al atributo <code>src</code> del elemento multimedia, tu destruyes el decodificador interno del elemento con lo que detienes la descarga.</p> - -<h2 id="Buscando_a_través_de_los_medios" style="margin: 0px 0px 0.8em; padding: 0px;">Buscando a través de los medios</h2> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>Los elementos de los medios proporcionan apoyo para mover la posición de reproducción actual a puntos específicos en el contenido de los medios. </font>Esto se hace estableciendo el valor de la propiedad <code style="font-size: 14px;">horaActual</code> en el elemento; ver <a class="new" href="https://developer.mozilla.org/es/docs/Web/API/HTMLMediaElement" title="/ Es / docs / Web / API / HTMLMediaElement"><code style="font-size: 14px;">HTMLMediaElement</code></a> para más detalles sobre las propiedades del elemento. Basta con establecer el valor en el tiempo, en segundos, con el que desea reproducir para continuar.</p> - -<p><span style="line-height: 1.5em;">Usted puede utilizar el elemento </span><code style="font-size: 14px;">seekable</code><span style="line-height: 1.5em;"> propiedad para determinar los rangos de los medios de comunicación que están disponibles para la búsqueda de la actualidad. Esto devuelve un objeto </span><a class="new" href="https://developer.mozilla.org/es/docs/Web/API/TimeRanges" style="line-height: 1.5em;" title="/ Es / docs / Web / API / TimeRanges"><code style="font-size: 14px;">TimeRanges</code></a><span style="line-height: 1.5em;"> que enumera los rangos de veces que se puede tratar de:</span></p> - -<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID'); -mediaElement.seekable.start(); // Returns the starting time (in seconds) -mediaElement.seekable.end(); // Returns the ending time (in seconds) -mediaElement.currentTime = 122; // Seek to 122 seconds -mediaElement.played.end(); // Returns the number of seconds the browser has played -</pre> - -<h2 id="Especificación_del_rango_de_reproducción" style="margin: 0px 0px 0.8em; padding: 0px;"><font>Especificación del rango de reproducción</font></h2> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Al especificar el URI de los medios de comunicación para un elemento <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/audio"><code style="font-size: 14px;"><audio></code></a> o <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video"><code style="font-size: 14px;"><video></code></a> , puede incluir opcionalmente información adicional para especificar la parte de los medios a reproducir. Para ello, añada una almohadilla ("#"), seguida de la descripción del fragmento de medios.</p> - -<p><span style="line-height: 1.5em;">Un intervalo de tiempo se especifica mediante la sintaxis:</span></p> - -<pre>#t=[starttime][,endtime]</pre> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>El tiempo se puede especificar como un número de segundos (como un valor de punto flotante) o como una hora / minuto / segundo tiempo separado con dos puntos (por ejemplo, 2:05:01 durante 2 horas, 5 minutos y 1 segundo).</font></p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Algunos ejemplos:</p> - -<dl> -</dl> - -<dl> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t = 10,20</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo debe desempeñar el rango de 10 segundos a través de 20 segundos.</dd> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t =, 10.5</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se reproducirá desde el principio a través de 10,5 segundos.</dd> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t =, 02:00:00</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se reproducirá desde el principio a través de dos horas.</dd> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t = 60</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se debe reproducir desde los 60 segundos hasta el final.</dd> -</dl> - -<div class="geckoVersionNote" style=""> -<p>{{ gecko_callout_heading("9.0") }}</p> -<font><font>La porción rango de reproducción del elemento de la especificación URI media esta en Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6). </font><font>En este momento, esta es la única parte de la </font></font><a class="external" href="http://www.w3.org/TR/media-frags/" style="padding-right: 16px; line-height: 21px;" title="http://www.w3.org/TR/media-frags/"><font>especificación de los medios de comunicación Fragmentos URI</font></a><font><font>implementado por el Gecko, y sólo se puede utilizar cuando se especifica la fuente para los elementos de los medios de comunicación, y no en la barra de direcciones.</font></font> - -<p> </p> -</div> - -<h2 id="Opciones_de_reserva" style="margin: 0px 0px 0.8em; padding: 0px;">Opciones de reserva</h2> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">HTML incluido entre, por ejemplo, las etiquetas de apertura y cierre de los elementos de los medios de comunicación son procesados por los navegadores que no admitan medios de HTML5. Usted puede tomar ventaja de este hecho para proporcionar medios alternativos de reserva para esos navegadores.</p> - -<p><span style="line-height: 1.5em;">Esta sección proporciona dos opciones de reserva para video. </span><font>En cada caso, si el navegador soporta vídeo HTML5, que se utiliza, de lo contrario, se utiliza la opción de reserva.</font></p> - -<h3 id="Utilización_de_Flash" style="margin: 0px 0px 0.8em; padding: 0px;">Utilización de Flash</h3> - -<p><span style="line-height: 1.5em;">Puede usar Flash para reproducir una película formato Flash si el </span><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video" style="line-height: 1.5em;"><code style="font-size: 14px;"><video></code></a><span style="line-height: 1.5em;"> no se admite elemento</span><span style="line-height: inherit;">:</span></p> - -<pre class="brush: html"><video src="video.ogv" controls> - <object data="flvplayer.swf" type="application/x-shockwave-flash"> - <param value="flvplayer.swf" name="movie"/> - </object> -</video></pre> - -<p><font>Tenga en cuenta que no se debe incluir </font><code style="font-size: 14px;">classid</code><font> en el </font><code style="font-size: 14px;">objeto</code><font> tag con el fin de ser compatible con los navegadores que no sean Internet Explorer.</font></p> - -<p> </p> - -<p> </p> - -<p> </p> - -<h3 id="Reproducción_de_vídeos_Ogg_utilizando_un_applet_de_Java" style="margin: 0px 0px 0.8em; padding: 0px;"><font>Reproducción de vídeos Ogg utilizando un applet de Java</font></h3> - -<p><span style="line-height: 1.5em;">Hay un applet de Java llamada </span><a class="external" href="http://maikmerten.livejournal.com/2256.html" style="line-height: 1.5em; padding-right: 16px; background-color: transparent;" title="http://maikmerten.livejournal.com/2256.html">Cortado</a><span style="line-height: 1.5em;"> que se puede utilizar como reserva para reproducir vídeos Ogg en los navegadores que no tienen soporte para Java, pero no es compatible con vídeo HTML5</span><span style="line-height: inherit;">:</span></p> - -<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> - <object type="application/x-java-applet" width="320" height="240"> - <param name="archive" value="cortado.jar"> - <param name="code" value="com.fluendo.player.Cortado.class"> - <param name="url" value="my_ogg_video.ogg"> - <p>You need to install Java to play this file.</p> - </object> -</video></pre> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>Si no se crea un elemento secundario alternativa del elemento de objeto cortado, como el </font><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/p"><code style="font-size: 14px;"><font><p></font></code></a><font> elemento superior, Firefox 3.5 instalaciones que manejan el video de forma nativa, pero no tienen Java instalado incorrectamente informarán al usuario de que es necesario instalar un plugin para ver el contenido en la página.</font></p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"> </p> - -<div style="line-height: 22px;"><span class="geckoMinVerMethod indicatorInHeadline minVer">(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)</span> - -<h1 id="Gestión_de_errores" style="margin: 0px 0px 0.8em; padding: 0px; font-size: 1.857em;">Gestión de errores</h1> -</div> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"> </p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">A partir de Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), el tratamiento de errores se ha revisado para que coincida con la última versión de la especificación HTML5. En lugar de que el <code style="font-size: 14px;">error sea</code> enviado al elemento en sí, ahora se entrega a los elementos "hijos" <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> correspondientes a las fuentes que resultan en el error.</p> - -<p><span style="line-height: 1.5em;">Esto permite detectar las fuentes no pudieron cargar, que puede ser útil. Considere este HTML</span><span style="line-height: inherit;">:</span></p> - -<pre class="brush: html"><video> -<source id="mp4_src" - src="video.mp4" - type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> -</source> -<source id="3gp_src" - src="video.3gp" - type='video/3gpp; codecs="mp4v.20.8, samr"'> -</source> -<source id="ogg_src" - src="video.ogv" - type='video/ogg; codecs="theora, vorbis"'> -</source> -</video></pre> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Dado que Firefox no es compatible con MP4 y 3GP, debido a su naturaleza de patente gravado, los <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> elementos con el ID "mp4_src" y "3gp_src" recibirán <code style="font-size: 14px;">error</code> eventos antes de cargar el recurso Ogg. Las fuentes son juzgados en el orden en el que aparecen, y una vez que uno carga con éxito, las fuentes restantes no se trataron en absoluto.</p> - -<h3 id="Detectar_si_las_fuentes_no_han_cargado" style="margin: 0px 0px 0.8em; padding: 0px;">Detectar si las fuentes no han cargado</h3> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><code>Para detectar qué todos los elementos </code><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> no han podido cargarse, se debe comprobar el valor de la propiedad <code style="font-size: 14px;">NetworkState</code> qué poseen todos los elementos de tipo multimedia. Si el valor es <code style="font-size: 14px;">HTMLMediaElement.NETWORK_NO_SOURCE</code>, se sabrá que las fuentes no se cargaron correctamente.</p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Si en ese momento se agrega otra fuente mediante la inserción de un nuevo elemento <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> como hijo del elemento multimedia, Gecko intenta cargar el recurso especificado.</p> - -<h3 id="Mostrando_contenido_fallback_cuando_la_fuente_no_puede_ser_cargada">Mostrando contenido <em>fallback</em> cuando la fuente no puede ser cargada</h3> - -<p>Otra forma de mostrar el contenido <em>fallback</em> de un vídeo cuando ninguna de sus fuentes pudieron ser cargadas, es añadir un manejador de excepciones o errores en el último elemento {{ HTMLElement("source") }}. Así usted podrá reemplazar el vídeo con el contenido <em>fallback</em>:</p> - -<pre class="brush: html language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>video</span> <span class="attr-name token">controls</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>source</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.mp4<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>source</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>App de b&uaacute;squeda din&aacute;mica en Firefox OS<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Clic en la im&aacute;gen para reproducir un v&iacute;deo demo de la app de b&uaacute;squeda din&aacute;mica<<span class="tag token"><span class="tag token"><span class="punctuation token">/</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>video</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> v <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector<span class="punctuation token">(</span></span><span class="string token">'video'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> - sources <span class="operator token">=</span> v<span class="punctuation token">.</span><span class="function token">querySelectorAll<span class="punctuation token">(</span></span><span class="string token">'source'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> - lastsource <span class="operator token">=</span> sources<span class="punctuation token">[</span>sources<span class="punctuation token">.</span>length<span class="number token">-1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> -lastsource<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'error'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>ev<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> d <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement<span class="punctuation token">(</span></span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - d<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> v<span class="punctuation token">.</span>innerHTML<span class="punctuation token">;</span> - v<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">replaceChild<span class="punctuation token">(</span></span>d<span class="punctuation token">,</span> v<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<h2 id="sect1" style="margin: 0px 0px 0.8em; padding: 0px;"> </h2> - -<h2 id="Véase_también" style="margin: 0px 0px 0.8em; padding: 0px;">Véase también</h2> - -<ul style="margin: 0px 0px 1.286em; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;"> - <li>Los elementos relacionados con los medios HTML: <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/audio"><code style="font-size: 14px;"><audio></code></a> , <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video"><code style="font-size: 14px;"><video></code></a> , <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> ;</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Manipulating_video_using_canvas" title="Vídeo Manipular con tela">Vídeo Manipular con canvas</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Introducing_the_Audio_API_Extension" title="Presentación de la extensión de API Audio">Presentación de la extensión de API Audio</a></li> - <li><code style="font-size: 14px;"><a class="external" href="http://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIDOMHTMLMediaElement" style="padding-right: 16px; background-color: transparent;">nsIDOMHTMLMediaElement</a></code></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Formatos de los medios admitidos por los elementos de audio y vídeo">Formatos de los medios admitidos por los elementos de audio y vídeo</a></li> - <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" style="padding-right: 16px; background-color: transparent;" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li> - <li><a class="external" href="http://popcornjs.org/" style="padding-right: 16px; background-color: transparent;" title="http://popcornjs.org/">Popcorn.js - Media Framework HTML5</a></li> - <li><a class="external" href="http://www.html5video.org/kaltura-html5/" style="padding-right: 16px; background-color: transparent;" title="http://www.html5video.org/kaltura-html5/">Kaltura Solución videoteca</a> , una biblioteca de JavaScript (mwEmbed) que soporta un retorno sin problemas con HTML5, VLC Player, Java Cortado y OMTK Vorbis reproductor de Flash. (Es utilizado por Wikimedia)</li> - <li><a class="external" href="http://omtk.org/flash/index.html" style="padding-right: 16px; background-color: transparent;" title="http://omtk.org/flash/index.html">OMTK - flash</a> , una biblioteca de Flash que implementa un decodificador Vorbis</li> - <li><a class="external" href="http://www.projekktor.com/" style="padding-right: 16px; background-color: transparent;" title="http://www.projekktor.com">Projekktor jugador</a> , un contenedor de JavaScript para audio vídeo-tags con fallback flash, de código abierto, GPL</li> - <li><a class="external" href="http://www.theora.org/cortado/" style="padding-right: 16px; background-color: transparent;" title="http://www.theora.org/cortado/">Applet Cortado</a> , una solución de reproducción de audio / vídeo en Java que mantiene Xiph.org</li> - <li><a class="external" href="http://videojs.com/" style="padding-right: 16px; background-color: transparent;" title="Video.js HTML5 Video Player">Video.JS</a> , un reproductor de vídeo HTML5 de código abierto y un marco.</li> - <li><a class="external" href="http://mediaelementjs.com/" style="padding-right: 16px; background-color: transparent;" title="http://mediaelementjs.com/">MediaElement.js</a> - marco audio / video HTML5 de código abierto con una cuña de Flash personalizada que imitan API multimedia HTML5 para exploradores más antiguos.</li> - <li><a class="external" href="http://www.hdwebplayer.com/" style="padding-right: 16px; background-color: transparent;" title="http://www.hdwebplayer.com">FLV Player</a> - HTML5 reserva soporte del reproductor de vídeo</li> -</ul> - -<p><span style="line-height: inherit;">{{ HTML5ArticleTOC() }}</span></p> diff --git a/files/es/conflicting/learn/index.html b/files/es/conflicting/learn/index.html deleted file mode 100644 index 066950ce62..0000000000 --- a/files/es/conflicting/learn/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Codificación-Scripting -slug: conflicting/Learn -tags: - - Codificación - - Principiante - - Scripting -translation_of: Learn -translation_of_original: Learn/Coding-Scripting -original_slug: Learn/codificacion-scripting ---- -<p>REDIRIGE <a href="/es/docs/Learn">Aprende</a></p> diff --git a/files/es/conflicting/learn/javascript/objects/index.html b/files/es/conflicting/learn/javascript/objects/index.html deleted file mode 100644 index ae0f3827d1..0000000000 --- a/files/es/conflicting/learn/javascript/objects/index.html +++ /dev/null @@ -1,386 +0,0 @@ ---- -title: Introducción a JavaScript orientado a objetos -slug: conflicting/Learn/JavaScript/Objects -tags: - - Constructor - - Herencia - - JavaScript - - Objetos - - Orientado a objetos - - POO - - espacio de nombres -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -original_slug: Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos ---- -<p>{{jsSidebar("Introductory")}}</p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>JavaScript</strong> dispone de fuertes capacidades de programación orientada a objetos, a pesar de que han tenido lugar algunos debates respecto a las diferencias de sus capacidades en comparación con otros lenguajes.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Este artículo comienza con una Introducción a la programación orientada a objetos, luego examina el modelo de objetos de JavaScript, y finalmente, muestra los conceptos de programación orientada a objetos en JavaScript.</span></span></p> - -<h2 id="JavaScript_Review" name="JavaScript_Review"><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Revisión de JavaScript</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no te sientes seguro acerca de los conceptos de JavaScript tales como variables, tipos, funciones y el ámbito de aplicación, puedes leer sobre estos temas en: <a href="/en/JavaScript/A_re-introduction_to_JavaScript" title="en/JavaScript/A re-introduction to JavaScript">Una nueva introducción a JavaScript</a> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">También puedes consultar la <a href="/en/JavaScript/Guide" title="en/JavaScript/Guide">Guía de JavaScript 1.5</a>.</span></span></p> - -<h2 id="Object-oriented_programming" name="Object-oriented_programming"><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Programación orientada a objetos</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La programación orientada a objetos es un paradigma de programación que utiliza la abstracción para crear modelos basados en el mundo real.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Utiliza diversas técnicas de paradigmas previamente establecidas, incluyendo la <strong>modularidad</strong>, <strong>polimorfismo</strong> y <strong>encapsulamiento</strong>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Hoy en día, muchos lenguajes de programación (como Java, JavaScript, C#, C++, Python, PHP, Ruby y Objective-C) soportan programación orientada a objetos (POO).</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La programación orientada a objetos puede considerarse como el diseño de software a través de un conjunto de objetos que cooperan, a diferencia de un punto de vista tradicional en el que un programa puede considerarse como un conjunto de funciones, o simplemente como una lista de instrucciones para la computadora.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En la programación orientada a objetos, cada objeto es capaz de recibir mensajes, procesar datos y enviar mensajes a otros objetos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cada objeto puede verse como una pequeña máquina independiente con un papel o responsabilidad definida.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">POO pretende promover una mayor flexibilidad y facilidad de mantenimiento en la programación y es muy popular en la ingeniería de software a gran escala.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Gracias a su fuerte énfasis en la modularidad, el código orientado a objetos está concebido para ser más fácil de desarrollar y más fácil de entender posteriormente, prestándose a un análisis más directo, a una mayor codificación y comprensión de situaciones y procedimientos complejos que otros métodos de programación menos modulares. <sup><a href="/#Referencia" title="#Referencia">2</a></sup></span></span></p> - -<h2 id="Terminology" name="Terminology"><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Terminología</span></span></h2> - -<dl> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Clase</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Define las características del Objeto.</span></span></dd> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Objeto</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una instancia de una Clase.</span></span></dd> - <dt><span style="line-height: 1.5;">Propiedad</span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una característica del Objeto, como el color.</span></span></dd> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Método</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una capacidad del Objeto, como caminar.</span></span></dd> -</dl> - -<dl> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Constructor</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Es un método llamado en el momento de la creación de instancias.</span></span></dd> - <dt><span style="line-height: 1.5;">Herencia</span></dt> - <dd><span class="goog-gtc-unit"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Una Clase puede heredar características de otra Clase.</span></span></dd> -</dl> - -<dl> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Encapsulamiento</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Una Clase sólo define las características del Objeto, un Método sólo define cómo se ejecuta el Método.</span></span></dd> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Abstracción</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La conjunción de herencia compleja, métodos y propiedades que un objeto debe ser capaz de simular en un modelo de la realidad.</span></span></dd> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Polimorfismo</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Diferentes Clases podrían definir el mismo método o propiedad.</span></span></dd> -</dl> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para una descripción más extensa de programación orientada a objetos, consulta <a class="external" href="http://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos" title="http://es.wikipedia.org/wiki/Programación_orientada_a_objetos">Programación orientada a objetos</a> en Wikipedia.</span></span></p> - -<h2 id="Programación_basada_en_prototipos"><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Programación basada en prototipos</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La programación basada en prototipos es un estilo de programación orientada a objetos en la que las clases no están presentes y la reutilización de comportamiento (conocido como herencia en lenguajes basados en clases) se lleva a cabo a través de un proceso de decoración de objetos existentes que sirven de prototipos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Este modelo también se conoce como programación sin clases, orientada a prototipos o basada en ejemplos.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El ejemplo original (y más canónico) de un lenguaje basado en prototipos es el lenguaje de programación <a href="https://en.wikipedia.org/wiki/Self_%28programming_language%29">Self</a> desarrollado por David Ungar y Randall Smith.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Sin embargo, el estilo de programación sin clases se ha hecho cada vez más popular y ha sido adoptado para lenguajes de programación como JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (cuando se utiliza el Viewer framework para manipular los componentes Morphic) y varios otros. <sup><a href="/#Referencia" title="#Referencia">2</a></sup></span></span></p> - -<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Programación orientada a objetos de JavaScript </span></span></h2> - -<h3 id="Core_Objects" name="Core_Objects"><span style="font-size: 1.714285714285714rem;">Namespace</span></h3> - -<p>Un <strong>espacio de nombres</strong> es un contenedor que permite asociar toda la funcionalidad de un determinado objeto con un nombre único. En JavaScript un espacio de nombres es un objeto que permite a métodos, propiedades y objetos asociarse. La idea de crear espacios de nombres en JavaScript es simple: Crear un único objeto global para las variables, métodos, funciones convirtiendolos en propiedades de ese objeto. El uso de los namespace permite minimizar el conflicto de nombres con otros objetos haciéndolos únicos dentro de nuestra aplicación.</p> - -<div>Un <strong>espacio de nombres</strong> es un objeto: </div> - -<div><br> -<span style="line-height: 1.5;">Vamos a crear un objeto global llamado MIAPLICACION</span></div> - -<div> </div> - -<pre class="brush: js">// namespace global - -var MIAPLICACION = MIAPLICACION || {};</pre> - -<div> </div> - -<div class="note"> -<p><strong>Nota:</strong> Para continuar con las mejores prácticas vamos a utilizar mayúsculas para los namespace.</p> -</div> - -<div> -<div>En el código de ejemplo anterior comprobamos si MIAPLICACION ya se encuentra definida. Si es así utilizamos el objeto global MIAPLICACION que existe; si este no existe creamos un objeto vacío llamado MIAPLICACION que encapsulará métodos, funciones, variables y otros objetos que vayamos a crear.</div> - -<div> </div> - -<div>También podemos crear <strong>Sub-espacios de nombres</strong>:</div> - -<div> </div> - -<pre class="brush: js">// Sub-namespace - -MIAPLICACION.event = {} ;</pre> -</div> - -<div>A continuación se muestra el código para la creación de un <strong>espacio de nombre</strong> y cómo agregar variables, funciones y métodos:</div> - -<div> </div> - -<pre class="brush: js">// Creación del contenedor llamado MIAPLICACION.metodoComun de método y propiedades comunes. -MIAPLICACION.metodoComun = { - regExParaNombre: "", // define regex para la validación del nombre - regExParaTelefono: "", // define regex para validación del teléfono - validaNombre: function(nombre){ - // Hace algo con el nombre que usted ingresa a la variable reExParaNombre - // usando "this.regExParaNombre" - }, - - validaNroTelefono: function (numTelefono){ - // Hace algo con el número de teléfono - } -} - -// Objeto junto a la declaración del método -MIAPLICACION.event = { - addListener: function(el, type, fn){ - // código de relleno - }, - removeListener: function(el, type, fn){ - // código de relleno - }, - getEvent: function(e) { - // código de relleno - } - - // Puedes agregar otras propiedades y métodos -} - -// Sintaxis de utilización del método addListener: -MIAPLICACION.event.addListener("turel", "tipo", callback); - - -</pre> - -<div> -<h3 id="Core_Objects" name="Core_Objects" style="line-height: 24px;"><span style="font-size: 1.714285714285714rem;">Objetos básicos</span></h3> -</div> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">JavaScript tiene varios objetos incluidos en su núcleo, como Math, Object, Array y String.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El siguiente ejemplo muestra cómo utilizar el objeto Math para obtener un número al azar mediante el uso de su método <code>random()</code>.</span></span></p> - -<pre class="brush: js"><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="brush: js" dir="ltr">alert (Math.random ());</span></span> -</pre> - -<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota:</strong> este y todos los demás ejemplos suponen que una función llamada <code>alert</code> (como el que se incluye en los navegadores web) se define de forma global.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La función <code>alert</code> no es realmente parte de JavaScript.</span></span></div> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Consulta <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects" title="En/Core JavaScript 1.5 Reference/Global Objects">Core JavaScript 1.5 Reference:Global Objects</a> para obtener una lista de los objetos básicos en JavaScript.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cada objeto en JavaScript es una instancia del objeto <code>Object</code>, por lo tanto, hereda todas sus propiedades y métodos.</span></span></p> - -<h3 id="Custom_Objects" name="Custom_Objects"><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Objetos personalizados</span></span></h3> - -<h4 id="The_Class" name="The_Class"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La clase</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">JavaScript es un lenguaje basado en prototipos que no contiene ninguna declaración de clase, como se encuentra, por ejemplo, en C + + o Java.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto es a veces confuso para los programadores acostumbrados a los lenguajes con una declaración de clase.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">En su lugar, JavaScript utiliza funciones como clases.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Definir una clase es tan fácil como definir una función.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el ejemplo siguiente se define una nueva clase llamada <strong>Persona</strong>.</span></span></p> - -<pre class="brush: js"><span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">function Persona() { }</span></span> -</pre> - -<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29"><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El objeto (ejemplo de clase)</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para crear un nuevo ejemplo de un objeto <em><code>obj</code></em> utilizamos la declaración <code>new <em>obj</em></code> , asignando el resultado (que es de tipo <em><code>obj</code></em> ) a una variable para tener acceso más tarde.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo se define una clase llamada <code>Persona</code> y creamos dos instancias ( <code>persona1</code> y <code>persona2</code> ).</span></span></p> - -<pre class="brush: js">function Persona() { -} - -var persona1 = new Persona(); -var persona2 = new Persona();</pre> - -<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por favor, consulta también <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="en/JavaScript/Reference/Global Objects/Object/create">Object.create</a> para ver un método nuevo y alternativo de creación de ejemplos.</span></span></div> - -<h4 id="The_Constructor" name="The_Constructor"><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El constructor</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El constructor es llamado en el momento de la creación de la instancia (el momento en que se crea la instancia del objeto).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El constructor es un método de la clase.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">En JavaScript, la función sirve como el constructor del objeto, por lo tanto, no hay necesidad de definir explícitamente un método constructor.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cada acción declarada en la clase es ejecutada en el momento de la creación de la instancia.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El constructor se usa para establecer las propiedades del objeto o para llamar a los métodos para preparar el objeto para su uso. Más adelante describiremos como agregar </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">métodos a clase y sus definiciones ya que se realiza utilizando una sintaxis diferente.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo, el constructor de la clase <code>Persona</code> muestra un alerta que dice (<strong>Una instancia de persona)</strong> cuando se crea la instancia de la clase <code>Persona</code>.</span></span></p> - -<pre class="brush: js">function Persona() { - alert('Una instancia de Persona'); -} - -var persona1 = new Persona(); -var persona2 = new Persona();</pre> - -<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29"><span class="goog-gtc-unit" id="goog-gtc-unit-78"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La propiedad (atributo del objeto)</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-79"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las propiedades son variables contenidas en la clase, cada instancia del objeto tiene dichas propiedades.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-80"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las propiedades deben establecerse a la propiedad prototipo de la clase (función), para que la herencia funcione correctamente.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-81"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Para trabajar con propiedades dentro de la clase se utiliza la palabra reservada <strong><code>this</code></strong> , que se refiere al objeto actual.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-82-goog-gtc-unit-83"><span class="goog-gtc-from-human goog-gtc-translatable">El acceso (lectura o escritura) a una propiedad desde fuera de la clase se hace con la sintaxis: <strong>NombreDeLaInstancia<code>.Propiedad</code></strong>. Es la misma sintaxis utilizada por C++, Java y algunos lenguajes más.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-84-goog-gtc-unit-85"><span class="goog-gtc-from-human goog-gtc-translatable">(Desde dentro de la clase la sintaxis es <strong><code>this.</code><code>Propiedad</code></strong> que se utiliza para obtener o establecer el valor de la propiedad).</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo definimos la propiedad <font face="Courier New, Andale Mono, monospace"><strong>primerNombre </strong></font>de la clase <code>Persona</code> y la definimos en la creación de la instancia.</span></span></p> - -<pre class="brush: js">function Persona(primerNombre) { - this.primerNombre = primerNombre; - alert('Una instancia de Persona'); -} - -var persona1 = new Persona("Alicia"); -var persona2 = new Persona("Sebastian"); - -// Muestra el primer nombre de persona1 -alert ('persona1 es ' + persona1.primerNombre); // muestra "persona1 es Alicia" -alert ('persona2 es ' + persona2.primerNombre); // muestra "persona2 es Sebastian"</pre> - -<h4 id="The_methods" name="The_methods"><span class="goog-gtc-unit" id="goog-gtc-unit-96"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Los métodos</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-97"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Los métodos siguen la misma lógica que las propiedades, la diferencia es que son funciones y se definen como funciones.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-98"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Llamar a un método es similar a acceder a una propiedad, pero se agrega <code>()</code> al final del nombre del método, posiblemente con argumentos.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-99"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo se define y utiliza el método diHola<code>()</code> para la clase <code>Persona</code>.</span></span></p> - -<pre class="brush: js">function Persona(primerNombre) { - this.primerNombre = primerNombre; -} - -Persona.prototype.diHola = function() { - alert ('Hola, Soy ' + this.primerNombre); -}; - -var persona1 = new Persona("Alicia"); -var persona2 = new Persona("Sebastian"); - -// Llamadas al método diHola de la clase Persona. -persona1.diHola(); // muestra "Hola, Soy Alicia" -persona2.diHola(); // muestra "Hola, Soy Sebastian"</pre> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-113"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En JavaScript los métodos son objetos como lo es una función normal y se vinculan a un objeto como lo hace una propiedad, lo que significa que se pueden invocar desde "fuera de su contexto".</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-114"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Considera el siguiente código de ejemplo:</span></span></p> - -<pre class="brush: js">function Persona(primerNombre) { - this.primerNombre = primerNombre; -} - -Persona.prototype.diHola = function() { - alert ("Hola, Soy " + this.primerNombre); -}; - -var persona1 = new Persona("Alicia"); -var persona2 = new Persona("Sebastian"); -var funcionSaludar = persona1.diHola; - -persona1.diHola(); // muestra "Hola, Soy Alicia" -persona2.diHola(); // muestra "Hola, Soy Sebastian" -funcionSaludar(); // muestra "Hola, Soy undefined (ó da un error con el - // TypeError en modo estricto - -alert(funcionSaludar === persona1.diHola); // muestra true (verdadero) -alert(funcionSaludar === Persona.prototype.diHola); // muestra true (verdadero) -funcionSaludar.call(persona1); // muestra "Hola, Soy Alicia"</pre> - -<div>En el ejemplo se muestran todas las referencias que tenemos de la función <strong>diHola</strong> — una de ellas es <strong>persona1, </strong>otra en <strong>Persona.prototype</strong>, en la variable <strong>funcionSaludar</strong>, etc. — todas se refieren a la misma función. El valor durante una llamada a la función depende de como realizamos esa llamada. <span style="line-height: 1.5;">En el común de los casos cuando la llamamos desde una expresión donde tenemos a la función desde la propiedad del objeto — <strong>persona1.diHola()</strong>.</span><span style="line-height: 1.5;">— Se establece en el objeto que tenemos en la función (persona1), razón por la cual <strong>persona1.diHola()</strong> utiliza el nombre "Alicia" y <strong>persona2.diHola()</strong> utiliza el nombre "Sebastian". </span><span style="line-height: 1.5;">Pero si realizamos la llamada de otra manera, se establecerá de forma diferente: Llamándola desde una variable —<strong>funcionSaludar()</strong> — Este </span><span style="line-height: 1.5;">establece </span><span style="line-height: 1.5;">al objeto global (windows, en los navegadores). </span><span style="line-height: 1.5;">Desde este objeto (probablemente) no tiene a la propiedad <strong>primerNombre</strong>, por lo que finalizará con "Hola, Soy indefinido". </span><span style="line-height: 1.5;">(El cual se incluye en modo </span>de código suelto, sino sería diferente [un error] en modo estricto, pero para evitar confusiones ahora no vamos a entra en detalles.) O podemos establecerla de forma explicita utilizando Function.call (ó Function.apply), como se muestra al final del ejemplo <strong>funcionSaludar.call(persona1)</strong>.</div> - -<div> </div> - -<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-133"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Consulta más información al respecto en <a href="/en/JavaScript/Reference/Global_Objects/Function/call" title="en/JavaScript/Reference/Global Objects/Function/call">Function.call</a> y <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="en/JavaScript/Reference/Global Objects/Function/apply">Function.apply</a></span></span></div> - -<h4 id="Inheritance" name="Inheritance"><span class="goog-gtc-unit" id="goog-gtc-unit-134"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Herencia</span></span></h4> - -<div>La herencia es una manera de crear una clase como una versión especializada de una o más clases (JavaScript sólo permite herencia simple). La clase especializada comúnmente se llama hija o secundaria, y la otra clase se le llama padre o primaria. En JavaScript la herencia se logra mediante la asignación de una instancia de la clase primaria a la clase secundaria, y luego se hace la especialización. </div> - -<div> </div> - -<div class="note"> -<p>JavaScript no detecta la clase hija prototype.constructor (vea las propiedades del <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype">Core JavaScript 1.5 Reference:Global Objects:Object:prototype</a>) así que debemos decírselo de forma manual.</p> -</div> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-140" style="line-height: 1.5;"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo definimos la clase <strong><code>Estudiante</code></strong> como una clase secundaria de <strong><code>Persona</code></strong> .</span></span><span style="line-height: 1.5;"> </span><span class="goog-gtc-unit" id="goog-gtc-unit-141" style="line-height: 1.5;"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Luego redefinimos el método <strong>diHola<code>()</code></strong> y agregamos el método <strong>diAdios<code>()</code></strong>.</span></span></p> - -<pre class="brush: js">// Definimos el constructor Persona -function Persona(primerNombre) { - this.primerNombre = primerNombre; -} - -// Agregamos un par de métodos a Persona.prototype -Persona.prototype.caminar = function() { - alert("Estoy caminando!"); -}; -Persona.prototype.diHola = function(){ - alert("Hola, Soy" + this.primerNombre); -}; - -// Definimos el constructor Estudiante -function Estudiante(primerNombre, asignatura) { - // Llamamos al constructor padre, nos aseguramos (utilizando Function#call) que "this" se - // ha establecido correctamente durante la llamada - Persona.call(this, primerNombre); - - //Inicializamos las propiedades específicas de Estudiante - this.asignatura = asignatura; -}; - -// Creamos el objeto Estudiante.prototype que hereda desde Persona.prototype -// Nota: Un error común es utilizar "new Persona()" para crear Estudiante.prototype -// Esto es incorrecto por varias razones, y no menos importante que no le estamos pasando nada -// a Persona desde el argumento "primerNombre". El lugar correcto para llamar a Persona -// es arriba, donde llamamos a Estudiante. -Estudiante.prototype = Object.create(Persona.prototype); // Vea las siguientes notas - -// Establecer la propiedad "constructor" para referencias a Estudiante -Estudiante.prototype.constructor = Estudiante; - -// Reemplazar el método "diHola" -Estudiante.prototype.diHola = function(){ - alert("Hola, Soy " + this.primerNombre + ". Estoy estudiando " + this.asignatura + "."); -}; - -// Agregamos el método "diAdios" -Estudiante.prototype.diAdios = function() { - alert("¡ Adios !"); -}; - -// Ejemplos de uso -var estudiante1 = new Estudiante("Carolina", "Física Aplicada"); -estudiante1.diHola(); // muestra "Hola, Soy Carolina. Estoy estudianto Física Aplicada." -estudiante1.caminar(); // muestra "Estoy caminando!" -estudiante1.diAdios(); // muestra "¡ Adios !" - -// Comprobamos que las instancias funcionan correctamente -alert(estudiante1 instanceof Persona); // devuelve true -alert(estudiante1 instanceof Estudiante); // devuelve true -</pre> - -<p>Con respecto a la línea <strong>Estudiante.prototype = Object.create(Persona.prototype); </strong>: Sobre los motores antiguos de JavaScript sin <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create">Object.create</a>, se puede utilizar un "polyfill" (aka "shim", vea el enlace del artículo), o se puede utilizar una función que obtiene el mismo resultado, como por ejemplo:</p> - -<pre class="brush: js">function crearObjeto(proto) { - function ctor() { } - ctor.prototype = proto; - return new ctor(); -} - -// uso: -Estudiante.prototype = crearObjeto(Persona.prototype); </pre> - -<div class="note"> -<p>Ver <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create">Object.create</a> para conocer más sobre lo que hace, y complementar con los motores antiguos.</p> -</div> - -<p><span style="font-family: open sans light,sans-serif; font-size: 1.285714285714286rem; letter-spacing: -0.25px; line-height: 18px;">Encapsulación</span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-172"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el ejemplo anterior, <code>Estudiante</code> no tiene que saber cómo se aplica el método <code>caminar()</code> de la clase <code>Persona</code>, pero, sin embargo, puede utilizar ese método. La clase <code>Estudiante</code> no tiene que definir explícitamente ese método, a menos que queramos cambiarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-173"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto se denomina <strong>la encapsulación</strong>, por medio de la cual cada clase hereda los métodos de su elemento primario y sólo tiene que definir las cosas que desea cambiar.</span></span></p> - -<h4 id="Abstraction" name="Abstraction"><span class="goog-gtc-unit" id="goog-gtc-unit-174"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Abstracción</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-175"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Un mecanismo que permite modelar la parte actual del problema de trabajo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-176"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto se puede lograr por herencia (especialización) o por composición.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-177"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">JavaScript logra la especialización por herencia y por composición al permitir que las instancias de clases sean los valores de los atributos de otros objetos.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-178"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La clase Function de JavaScript hereda de la clase de Object (esto demuestra la especialización del modelo) y la propiedad Function.prototype es un ejemplo de Objeto (esto demuestra la composición)</span></span></p> - -<p> </p> - -<pre class="brush: js"><span class="goog-gtc-unit" id="goog-gtc-unit-179"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">v</span></span>ar foo = function() {}; -alert( 'foo es una Función: ' + (foo instanceof Function) ); -alert( 'foo.prototype es un Objeto: ' + (foo.prototype instanceof Object) ); -</pre> - -<p><span style="font-family: open sans light,sans-serif; font-size: 1.285714285714286rem; letter-spacing: -0.25px; line-height: 18px;">Polimorfismo</span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-183"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Al igual que todos los métodos y propiedades están definidas dentro de la propiedad prototipo, las diferentes clases pueden definir métodos con el mismo nombre. Los métodos están en el ámbito de la clase en que están definidos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-184"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto sólo es verdadero cuando las dos clases no tienen una relación primario-secundario (cuando uno no hereda del otro en una cadena de herencia).</span></span></p> - -<h2 id="Notes" name="Notes"><span class="goog-gtc-unit" id="goog-gtc-unit-185"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Notas</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-186"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las técnicas presentadas en este artículo para aplicar la programación orientada a objetos no son las únicas que se pueden utilizar en JavaScript, que es muy flexible en términos de cómo se puede realizar la programación orientada a objetos.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-187"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Del mismo modo, las técnicas presentadas aquí no utilizan ninguna modificación o hack de lenguaje ni imitan las implementaciones de teorías de objetos de otros lenguajes.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-188"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Hay otras técnicas que hacen incluso programación orientado a objetos más avanzada en JavaScript, pero que están fuera del alcance de este artículo introductorio.</span></span></p> - -<h2 id="References" name="References"><span class="goog-gtc-unit" id="goog-gtc-unit-189"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Referencias</span></span></h2> - -<ol> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-190-goog-gtc-unit-191-goog-gtc-unit-192"><span class="goog-gtc-from-human goog-gtc-translatable">Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-193-goog-gtc-unit-194-goog-gtc-unit-195"><span class="goog-gtc-from-human goog-gtc-translatable">Wikipedia. "Programación orientada a objetos", <a class="external" href="http://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos" rel="freelink">http://es.wikipedia.org/wiki/Program...tada_a_objetos</a>.</span></span></li> - <li><a href="http://davidwalsh.name/javascript-objects">Descripción general de POO en JavaScript</a> por Kyle Simpson.</li> -</ol> |