From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../web/css/introducci\303\263n/boxes/index.html" | 334 +++++++++++++++++ .../cascading_and_inheritance/index.html" | 124 ++++++ .../web/css/introducci\303\263n/color/index.html" | 363 ++++++++++++++++++ .../introducci\303\263n/how_css_works/index.html" | 127 +++++++ "files/es/web/css/introducci\303\263n/index.html" | 93 +++++ .../web/css/introducci\303\263n/layout/index.html" | 383 +++++++++++++++++++ .../los_colon_estilos_de_texto/index.html" | 155 ++++++++ .../web/css/introducci\303\263n/media/index.html" | 394 +++++++++++++++++++ .../css/introducci\303\263n/selectors/index.html" | 415 +++++++++++++++++++++ 9 files changed, 2388 insertions(+) create mode 100644 "files/es/web/css/introducci\303\263n/boxes/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/color/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/how_css_works/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/layout/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/media/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/selectors/index.html" (limited to 'files/es/web/css/introducción') diff --git "a/files/es/web/css/introducci\303\263n/boxes/index.html" "b/files/es/web/css/introducci\303\263n/boxes/index.html" new file mode 100644 index 0000000000..1feede593a --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/boxes/index.html" @@ -0,0 +1,334 @@ +--- +title: Boxes +slug: Web/CSS/Introducción/Boxes +translation_of: Learn/CSS/Building_blocks +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Esta es la sección 11 del Tutorial de  CSS Getting Started ; se describen cómo se puede usar CSS para controlar el espacio que un elemento ocupa cuando se muestra. En su documento de ejemplo, se cambia el espacio y se agregan reglas decorativos.

+ +

Información: Cajas

+ +

Cuando el navegador muestra un elemento, el elemento ocupa un espacio. Hay cuatro partes en el espacio que ocupa.

+ +

En el centro, existe el espacio que el elemento necesita para mostrar su contenido. Alrededor de eso, no hay relleno. En torno de est, hay un borde. En torno esto, hay un margen que separa este elemento de otros elementos.

+ + + + + + + + +
+
+

margin

+ +

border

+ +
+

padding

+ +
+

element

+
+
+
+ +

El gris pálido muestra partes del diseño.

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

Esto es lo que se ve en su navegador.

+
+ +

El relleno, el borde y el margen pueden tener diferentes tamaños en la parte superior, derecha, inferior e izquierda del elemento. Alguno o todos estos tamaños pueden ser cero.

+ +

Coloreando

+ +

El relleno es siempre el mismo color que el elemento del fondo. Así que cuando se establece el color de fondo, se ve el color aplicado al elemento en sí y su relleno. El margen es siempre transparente.

+ + + + + + + + +
+
+

margin

+ +

border

+ +
+

padding

+ +
+

element

+
+
+
+ +

El elemento tiene un fondo verde .

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

Esto es lo que se ve en su navegador.

+
+ +

Borders

+ +

Puede utilizar los bordes para decorar elementos con líneas o cuadros.
+
+ Para especificar la misma frontera todo alrededor de un elemento, utilice la propiedad {{cssxref ("border")}} . Especifique el ancho (por lo general en píxeles para la visualización en una pantalla), el estilo, y el color.
+
+ Los estilos son:

+ + + + + + + + + + + + + + + + +
+
solid
+ 		+
dotted
+ 		+
dashed
+ 		+
double
+
+
inset
+ 		+
outset
+ 		+
ridge
+ 		+
groove
+
+ +

También puede establecer el estilo a none ( ninguno) o hidden (oculto),  para eliminar explícitamente la frontera (border ), o establecer el color como transparente para hacer la frontera invisible sin cambiar el diseño.

+ +

Para especificar los bordes de uno en uno por separado, utilice las propiedades: {{cssxref ("border-top")}}, {{cssxref ("border-right")}}, {{cssxref ("border-bottom")} }, {{cssxref ("border-left")}}. Usted puede utilizar estas para especificar un borde  solo en un lado, o diferentes los bordes en diferentes lados.

+ +
+
Ejemplo
+ +


+ Esta norma establece el color de fondo y el borde superior de los elementos de la etiqueta h3:

+ +
h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+  }
+
+ +

El resultado se ve así:

+ + + + + + + +
+

Stylish heading

+
+ +

Esta regla hace que las imágenes sean fáciles de ver, dándoles un borde gris medio a todo:

+ +
img {border: 2px solid #ccc;}
+
+ +

El resultado se ve así:

+ + + + + + + + +
Image:Image:Blue-rule.png
+
+ +

Márgenes y relleno

+ +


+ Use  márgenes y el relleno para ajustar las posiciones de los elementos 'y crear el espacio que les rodea.
+
+ Utilice la propiedad {{cssxref ("margin")}} o la propiedad {{cssxref ("padding")}} para establecer los márgenes y el  relleno con sus anchuras respectivamente.
+
+ Si especifica una anchura, que se aplica en todo el elemento (arriba, derecha, abajo y de izquierda).
+
+ Si especifica dos anchos, la primera se aplica a la parte superior e inferior, la segunda a la derecha y la izquierda.
+
+ Puede especificar los cuatro anchos en el orden: arriba, derecha, abajo, de izquierda.

+ +
+
Ejemplo
+ +


+ Esta norma delimita párrafos con la  class remark, dándoles un borde rojo a su alrededor.
+
+ El padding (relleno) separa un poco todo el borde del texto .
+
+ A la izquierda una  sangría desde el margen del párrafo con respecto al resto del texto (margin-left ):

+ +
p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+
+ +

El resultado se ve así:

+ + + + + + + +
+

A continuación es un párrafo normal.

+ +

Aqui con la clase remark.

+
+
+ +
+
Más detalles
+ +

Cuando se utiliza márgenes y el relleno para ajustar la manera en que los elementos se disponen, sus reglas de estilo interactúan con los estilos de tu navegador por defecto y pueden ser muy complejas.
+
+ Los distintos navegadores ponen que los elementos de manera diferente. Los resultados pueden ser similar ,hasta que nuestro hoja de estilos cambia las cosas. A veces esto puede hacer que sus hojas de estilo den resultados sorprendentes.
+
+ Para obtener el resultado deseado, es posible que tenga que cambiar el marcado de su documento. La página siguiente de este tutorial tiene más información al respecto.
+
+ Para obtener información detallada acerca de relleno, márgenes y bordes, consulte la página de referencia Modelo de caja.

+
+ +

Acción: Agregar bordes

+ +

Edite su archivo CSS , style2.css. Agrega esta regla para dibujar una línea a través de la página sobre cada encabezado:

+ +
h3 {border-top: 1px solid gray;}
+
+ +

Si usted tomó el cambio en la última página, modificara la regla que ha creado, de lo contrario agregar la nueva regla para añadir espacio debajo de cada ítem de la lista:

+ +
li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+
+ +

Actualice el navegador para ver el resultado:

+ + + + + + + +
+

(A) The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+ +

(B) Numbered paragraphs

+ +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +
+
El reto
+ +


+ Agrega una regla a la hoja de estilos, para que aparesca un amplio borde alrededor de los la lista de océanos, en un color que le recuerda al mar, algo como esto:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +

. . .

+
+ +

 

+ +

(No es necesario que coincida con el ancho y el color que se ve aquí exactamente.)

+
+ +

Ver una solución a este desafío.

+ +

What next?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout") }}Al especificar márgenes y el relleno, se modificó el diseño del documento. En la página siguiente se cambia el layout de su documento de otra manera.

diff --git "a/files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" "b/files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" new file mode 100644 index 0000000000..64bf0dd443 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" @@ -0,0 +1,124 @@ +--- +title: Cascada y herencia +slug: Web/CSS/Introducción/Cascading_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/es/docs/Web/CSS/Introduction/How_CSS_works", "Cómo funciona el CSS.")}}Esta es la cuarta sección del tutorial CSS Primeros pasos; que describe cómo interactúan las hojas de estilo en cascada, y cómo los elementos heredan el estilo de sus padres. Usted agrega a la hoja de estilos de ejemplo, utilizando la herencia para alterar el estilo de muchas partes del documento en un solo paso.

+ +

Información: Cascada y herencia

+ +

El estilo final para un elemento se puede especificar en muchos lugares diferentes, que pueden interactuar de una manera compleja. Esta interacción compleja hace el CSS poderoso, pero puede también hacer que sea confuso y difícil de depurar.

+ +

Tres principales fuentes de información de estilo forman una cascada. Estas son:

+ + + +

El estilo del usuario modifica el estilo por defecto del navegador. El estilo del autor del documento a continuación modifica el estilo un poco más. En este tutorial, usted es el autor del documento de ejemplo, y solo trabaja con hojas de estilo del autor.

+ +
+
Ejemplo
+ +

Cuando lea este documento en un navegador, parte del estilo que ves proviene por defecto de su navegador de HTML.

+ +

Parte del estilo podría venir de los ajustes personalizados del navegador o de un archivo de definición de estilo personalizado. En Firefox, la configuración se puede personalizar en cuadro de diálogo Preferencias, o puede especificar estilos en un archivo denominado user Content.css, archivado en su perfil de navegador.

+ +

Parte del estilo proviene de las hojas de estilo vinculadas al documento por el servidor wiki.

+
+ +

Al abrir su documento de muestra en el navegador, los elementos {{ HTMLElement("strong") }} son más relevante que el resto del texto. Esto viene del estilo por defecto del navegador para HTML.

+ +

El elemento {{ HTMLElement("strong") }} son rojos. Esto viene de la propia hoja de estilos de ejemplo.

+ +

El elemento {{ HTMLElement("strong") }} también heredan gran parte del estilo del elemento {{ HTMLElement("p") }}, porque ellos son sus hijos. De la misma manera, los elementos {{ HTMLElement("p") }} heredan gran parte del estilo del elemento{{ HTMLElement("body") }}.

+ +

Para los estilos en cascada, las hojas de estilo del autor tienen prioridad, ante las hojas de estilo del lector,  por defecto de tu navegador.

+ +

Para los estilos heredados, el estilo propio de un nodo hijo tiene prioridad sobre estilo heredado de su padre.

+ +

Estas no son las únicas prioridades que se aplican. En una página posterior de este tutorial se explica mas detalladamente.

+ +
+
Más detalles
+ +

El CSS también proporciona una forma para que el lector pueda anular el estilo del autor del documento, mediante el uso de la palabra clave! !important.

+ +

Esto significa que, como autor del documento, no siempre se puede predecir con exactitud lo que sus lectores van a ver.

+ +

Si quieres conocer todos los detalles de cascada y herencia mira Asignando propiedad de valores, cascada, y herencia en las especificaciones del CSS.

+
+ +

Acción: El uso de la herencia 

+ +
    +
  1. Edite su archivo  CSS de ejemplo.
    2. +
  2. Agrega esta línea copiando y pegando. Realmente no importa si usted la agrega por encima o por debajo de la línea que está. Sin embargo, añadirla en la parte superior es más lógico, porque en el documento el elemento {{ HTMLElement("p") }} es el elemento padre del elemento  {{ HTMLElement("strong") }} : + 
    p {color: blue; text-decoration: underline;}
+
    +
    3. +
  3. Ahora actualice el navegador para ver el efecto en su documento de muestra. El subrayado afecta todo el texto en el párrafo, incluido las letras iniciales. Los elementos {{ HTMLElement("strong") }} han heredado el estilo subrayado de su elemento padre {{ HTMLElement("p") }}.
    + +

    Pero los elementos {{ HTMLElement("strong") }} siguen siendo rojo. El color rojo es su estilo propio, por lo que tiene prioridad sobre el color azul de su elemento padre {{ HTMLElement("p") }} .

    +
    4. +
+ + +
+ + + + + + + + +
Antes
Cascading Style Sheets
+ + + + + + + + +
Después
Cascading Style Sheets
+ +
+
Problema
+Cambie su hoja de estilo de manera que aparecen subrayados sólo las letras rojas: + + + + + + + +
Cascading Style Sheets
+ +
+
Possible solution
+ +

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

+ +
p {color: blue; }
+strong {color: red; text-decoration: underline;}
+
+ +

 

+Hide solution
+Ver una solución al desafío.
+ +

¿Y ahora qué?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectores")}}Su hoja de estilo de ejemplo especifica estilos para las etiquetas <p> y <strong>, cambiando el estilo de los elementos correspondientes en todo el documento. La siguiente sección describe cómo especificar el estilo de manera más selectiva.

diff --git "a/files/es/web/css/introducci\303\263n/color/index.html" "b/files/es/web/css/introducci\303\263n/color/index.html" new file mode 100644 index 0000000000..578f1e6898 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/color/index.html" @@ -0,0 +1,363 @@ +--- +title: Color +slug: Web/CSS/Introducción/Color +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +

{{ CSSTutorialTOC() }}

+ +

+ +

Esta es la sección octava de la CSS Introduccióntutorial; se explica cómo puede especificar el color en CSS. En su hoja de estilos de muestra, se introduce colores de fondo.

+ +

Información: Color

+ +

En este tutorial hasta ahora, se ha utilizado un número limitado de colores con nombre. CSS 2 soporta 17 colores con nombre absoluto. Algunos de los nombres puede que no sea el esperado:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 black gray silver white 
primariesred lime blue 
secondariesyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
+ +

 

+ +
+
+
Detalles
+ +

Su navegador puede soportar muchos más colores con nombre, como:

+
+ + + + + + + + + + + + + + + + +
dodgerblue peachpuff tan firebrick aquamarine 
+ +

Para detalles de esta lista ampliada, consulte: SVG palabras clave de color en el módulo de colores CSS 3 . Tenga cuidado con el uso de nombres de colores;puede que algunos de sus lectores de navegación no lo soporte.

+
+ +

Para una paleta más grande, especificar los componentes rojo, verde y azul del color que desee, utilizando el signo numerico (hash) y tres dígitos  hexadecimales entre los rangos  0 - 9, a - f. Las letras a - f representan los valores de 10 a 15:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000
pure red #f00
pure green #0f0
pure blue #00f
white #fff
+ +


+ Para toda la paleta, especificar dos dígitos hexadecimales para cada componente:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000000
pure red #ff0000
pure green #00ff00
pure blue #0000ff
white #ffffff
+ +

Generalmente, usted puede obtener estos códigos hexadecimales de seis dígitos de su programa de gráficos o alguna otra herramienta.

+ +
+
+
Ejemplo
+ +

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:

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Comience con el rojo puro: #f00
Para que sea más pálido, añadir un poco de verde y azul: #f77
Para hacerlo más naranja, añadir un poco de verde adicional: #fa7
Para oscurecer, reducir todos sus componentes: #c74
Para reducir su saturación, hacer que sus componentes más iguales: #c98
Si usted los pone exactamente iguales, se obtiene gris: #ccc
+ +

Para un tono pastel como el azul pálido:

+ + + + + + + + + + + + + + +
Comience con blanco puro: #fff
Reducir los otros componentes un poco: #eef
+
+ +
+
+
Más detalles
+ +

También puede especificar un color mediante los valores RGB decimales en el rango de 0 - 255, o porcentajes.

+ +

Por ejemplo, este es de color granate (rojo oscuro)dark red:

+
+ +
RGB (128, 0, 0)
+ +

Para más detalles sobre cómo especificar los colores, ver: Colores en la Especificación CSS.

+ +

Para obtener información sobre la adecuación de los colores del sistema como Menú y ThreeDFace, véase: Sistema CSS2 Colores en la Especificación CSS.

+
+ +

Propiedades de Color

+ +

Ya ha utilizado la propiedad color  en el texto.

+ +

También puede utilizar la propiedad background-color para cambiar fondos elementos.

+ +

Los Fondos (Backgrounds ) se pueden establecer en transparent (transparentes) para eliminar explícitamente cualquier color, revelando fondo del elemento padre.

+ +
+
+
Ejemplo
+ +

Los ejemplos de cajas de este tutorial utilizan este fondo de color amarillo pálido:

+ +
background-color : # fffff4 ;
+ +
 
+ +

Los Más detalles cajas utilizan este gris pálido:

+ +
background-color : # F4F4F4 ;
+
+
+ +

 

+ +

Acción: El uso de códigos de color

+ +
    +
  1. Edite su archivo CSS.
    2. +
  2. Hacer el cambio se muestra aquí en negrita, para dar las letras iniciales un fondo azul claro. (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.) + 
    /*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* paragraphs */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* initial letters */
+strong {
+  color: red;
+  background-color: #ddf;
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;}
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    +
    3. +
  3. Guarde el archivo y actualizar el navegador para ver el resultado.
    4. +
+ + + + + + + +
+ + + + + + + + + +
C ascading S tyle S heets
C ascading S tyle S heets
+
+ +
+
+
Desafío
+ +

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.

+ +

(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.)

+Ver una solución para el desafío.
+
+ +

¿Y ahora qué?

+ +

En su documento de muestra y el contenido de su hoja de estilo muestra estrictamente separados los estilo.La siguiente sección explica cómo se puede hacer excepciones a esta estricta separación.

diff --git "a/files/es/web/css/introducci\303\263n/how_css_works/index.html" "b/files/es/web/css/introducci\303\263n/how_css_works/index.html" new file mode 100644 index 0000000000..7940c9a060 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/how_css_works/index.html" @@ -0,0 +1,127 @@ +--- +title: Cómo funciona el CSS +slug: Web/CSS/Introducción/How_CSS_works +tags: + - CSS + - 'CSS:' + - 'CSS:Empezando' + - Diseño + - Guía + - Inicio + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "¿Por qué usar CSS?") }}Esta tercera parte del tutorial Empezando CSS explica cómo funciona el CSS en el navegador y la finalidad del Modelo de Objeto de Documento (DOM). Usted también aprenderá cómo analizar el documento de muestra.

+ +

Información: Cómo funciona CSS

+ +

Cuando un navegador muestra un documento, debe combinar el contenido del documento con la información de su estilo. Se procesa el documento en dos etapas:

+ +
    +
  1. El navegador convierte el lenguaje de marcado (markup) y el CSS en el DOM (Document Object Model). El DOM representa el documento en la memoria del ordenador. Combina el contenido del documento con su estilo.
    2. +
  2. El navegador muestra el contenido de la DOM.
    3. +
+ +

Un lenguaje de marcado utiliza elementos para definir la estructura del documento. Usted marca un elemento utilizando etiquetas, que son cadenas que comienzan con '<' y termina con '>'. La mayoría de los elementos tienen un par de etiquetas, una etiqueta de inicio y una etiqueta de cierre. Para la etiqueta de inicio, coloque el nombre del elemento entre '<' y '>'. Para la etiqueta final, coloque un '/' después de '<' y antes del nombre del elemento.

+ +

Dependiendo del lenguaje de marcado, algunos elementos tienen sólo una etiqueta de inicio, o una sola etiqueta donde el '/' viene después del nombre del elemento. Un elemento también puede ser un contenedor e incluir otros elementos entre su etiqueta de inicio y la etiqueta de cierre. Sólo recuerda cerrar siempre las etiquetas dentro del contenedor.

+ +

Un DOM tiene una estructura en forma de árbol. Cada elemento, atributo y extensión de texto en el lenguaje de marcado se convierte en un nodo de la estructura de árbol. Los nodos se definen por su relación con otros nodos DOM. Algunos elementos son los padres de los nodos secundarios, y los nodos secundarios tienen hermanos.

+ +

Comprender el DOM le ayuda a diseñar, depurar y mantener su CSS, porque el DOM es donde su CSS y el contenido del documento se reúnen.

+ +
+
Ejemplo
+En el documento de ejemplo, las etiqueta <p> y su etiqueta de cierre </ p> crean un contenedor: + +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

Ejemplo en vivo

+ +

http://jsfiddle.net/djaniketster/6jbpS/

+ +

En el DOM, el nodo correspondiente P es uno de los padres. Sus hijos son los nodos STRONG y los nodos de texto. Los nodos STRONG son en sí mismos padres, con los nodos de texto como sus hijos:

+ +
P
+├─STRONG
+│ └─"C"
+├─"ascading"
+├─STRONG
+│ └─"S"
+├─"tyle"
+├─STRONG
+│ └─"S"
+└─"heets"
+
+ +

Acción: Analizando un DOM

+ +

El uso del Inspector DOM

+ +

Para analizar un DOM, se necesita un software especial. Usted puede usar el complemento de  Mozilla DOM Inspector (DOMi) para analizar un DOM. Usted sólo tendrá que instalar el complemento (ver más detalles abajo).

+ +
    +
  1. Utilice el navegador Mozilla para abrir el documento en versión HTML.
    2. +
  2. Desde la barra de menú de su navegador, selecciona Herramientas> Inspector DOM, o Herramientas> Desarrollo Web> Inspector DOM. +
    +
    Más detalles
    + +

    Si el navegador Mozilla no tiene Domi, puede instalarlo del sitio de complementos y reiniciar el navegador. Luego regrese a este tutorial.

    + +

    Si no desea instalar Domi (o estás usando un navegador que no Mozilla), puede utilizar Web X-Ray Goggles, como se describe en la siguiente sección. O bien, puede omitir esta sección e ir directamente a la página siguiente. Saltarse esta sección no interfiere con el resto del tutorial.

    +
    +
    3. +
  3. En el Domi, expanda los nodos de su documento haciendo clic en las flechas. +

    Nota: El espaciado de su archivo HTML puede ocasionar que Domi muestre algunos nodos de texto vacíos, que se pueden pasar por alto.

    + +

    Parte del resultado podría tener este aspecto, según qué nodos has expandido:

    + + 
    │ ▼╴P
+│ │ │ ▼╴STRONG
+│ │ └#text
+│ ├╴#text
+│ ►╴STRONG
+│ │
    + +

    Cuando selecciona cualquiera de los nodos, puede usar panel de la derecha de  DOMi para averiguar más cosas sobre él. Por ejemplo, cuando se selecciona un nodo de texto, DOMi muestra el texto en el panel de la derecha.

    + +

    Cuando se selecciona un elemento nodo, DOMi analiza y ofrece una enorme cantidad de información en su panel de la derecha. La información de estilo es sólo una parte de la información que proporciona.

    +
    4. +
+ +
+
Problema
+ +

En el DOMi , haga clic en un nodo STRONG.

+ +

Utilice el panel de la derecha de Domi para encontrar el nodo de color rojo, y donde su apariencia es más relevante que el texto normal.

+ +
+
Possible solution
+ +

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

+Ocultar solución
+Ver la solución para el problema.
+ +

Utilizando Web X-Ray Goggles

+ +

Web X-Ray Goggles muestra menos información que DOM Inspector, pero es más fácil de instalar y utilizar.

+ +
    +
  1. Ir a la página principal de la Web X-Ray Goggles.
    2. +
  2. Arrastre el enlace bookmarklet en esa página a tu barra de herramientas del navegador.
    3. +
  3. Abra el documento en versión HTML.
    4. +
  4. Active Web X-Ray Goggles haciendo clic en el bookmarklet en la barra de herramientas.
    5. +
  5. Mueva el puntero del ratón por encima de su documento para comprobar los elementos en el documento.
    6. +
+ +

¿Y ahora qué?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada y herencia") }}Si tomaste el reto, usted vera que la información de estilo  interactúa en más de un lugar, para crear el estilo final de un elemento. La siguiente página explica más acerca de estas interacciones.

diff --git "a/files/es/web/css/introducci\303\263n/index.html" "b/files/es/web/css/introducci\303\263n/index.html" new file mode 100644 index 0000000000..678ec25622 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/index.html" @@ -0,0 +1,93 @@ +--- +title: Introducción +slug: Web/CSS/Introducción +tags: + - CSS + - 'CSS:Introducción' + - para_revisar +translation_of: Learn/CSS/First_steps +--- +

Presentación

+ +

Este tutorial es una introducción a las hojas de estilo en cascada (Cascading Style Sheets o CSS).

+ +

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. Está dividido en dos partes.

+ + + + + +

El tutorial se basa en la Especificación CSS 2.1 .

+ +

¿Quién debe usar este tutorial?

+ +

Este tutorial es sobre todo para los principiantes en CSS, pero también lo puedes usar si tienes alguna experiencia en CSS.

+ +

Si eres principiante en CSS, usa la parte I de este tutorial para entender CSS y aprender a usarlo. A continuación, utiliza la parte II para comprender el ámbito de aplicación de CSS en Mozilla.

+ +

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.

+ +

Si tienes experiencia en CSS, pero no en Mozilla, puedes saltar a la parte II.

+ +

¿Qué se necesita antes de empezar?

+ +

Para aprovechar al máximo este tutorial, necesitas un editor para archivos de texto y un navegador Mozilla (Firefox o Mozilla Suite). También debes saber cómo utilizarlos de forma básica.

+ +

Si no deseas editar los archivos, entonces puedes leer el tutorial y ver las fotos, pero es una forma menos eficaz de aprender.

+ +

Algunas partes del tutorial, que son opcionales, requieren otro software de Mozilla. Si no quieres descargar otros software de Mozilla, entonces puedes saltártelas. El otro software de Mozilla al que hace referencia este tutorial incluye:

+ + + +

Nota: CSS ofrece distintas maneras de trabajar con el color, por lo que las partes de este tutorial dependen de él. Sólo puedes utilizar estas partes del tutorial fácilmente si dispones de una pantalla en color y de visión del color normal.

+ +

Cómo utilizar este tutorial

+ +

Para utilizar este tutorial, lee las páginas con atención y en orden. Si se te pasa una página, tal vez te resulte difícil de entender las páginas siguientes.

+ +

En cada página, utiliza la sección de Información para entender cómo funciona CSS. Usa la sección Acción para tratar de usar CSS en tu propio equipo.

+ +

Para controlar que has comprendido los contenidos, acepta el reto al final de cada página. Las soluciones a los retos están enlazadas debajo de los retos, por lo que no es necesario verlos si no quieres.

+ +

Para entender CSS en mayor profundidad, lee la información que se encuentra en las cajas con el título Más detalles. Utiliza los enlaces que hay para encontrar información de referencia acerca de CSS.

+ +

Parte I del tutorial

+ +

Una guía paso a paso básica para CSS.

+ +
    +
  1. Qué es CSS
    2. +
  2. Por qué usar CSS
    3. +
  3. Cómo funciona CSS
    4. +
  4. Cascada y herencia
    5. +
  5. Selectores
    6. +
  6. CSS legibles
    7. +
  7. Estilos de texto
    8. +
  8. Color
    9. +
  9. Contenido
    10. +
  10. Listas
    11. +
  11. Cajas
    12. +
  12. Diseño
    13. +
  13. Tablas
    14. +
  14. Multimedia
    15. +
+ +

Parte II del tutorial

+ +

Ejemplos que muestran el ámbito de aplicación de CSS en Mozilla.

+ +
    +
  1. JavaScript
    2. +
  2. Enlaces XBL
    3. +
  3. Interfaces de usuario XUL
    4. +
  4. Gráficos SVG
    5. +
  5. Datos XML
    6. +
+ +

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

diff --git "a/files/es/web/css/introducci\303\263n/layout/index.html" "b/files/es/web/css/introducci\303\263n/layout/index.html" new file mode 100644 index 0000000000..31a86194bf --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/layout/index.html" @@ -0,0 +1,383 @@ +--- +title: Layout +slug: Web/CSS/Introducción/Layout +translation_of: Learn/CSS/CSS_layout +--- +

{{ CSSTutorialTOC() }}

+ +

{{ 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.

+ +

Informacion: Layout

+ +

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.

+ +

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.

+ +

Esta página describe algunas técnicas sencillas que puedes probar.

+ +

Estructura del documento

+ +

Si desea controlar el diseño de su documento, es posible que deba cambiar su estructura.

+ +

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.

+ +
+
+

Ejemplo

+ +

En su documento de ejemplo, los párrafos numerados en el segundo encabezado no tienen un contenedor propio.

+ +

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.

+ +

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:

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

Ahora su hoja de estilos puede utilizar una regla para especificar bordes alrededor de ambas listas:

+ +
ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+}
+
+ +

  El resultado se ve así: 

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+
+ +

Unidades de tamaño

+ +

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.

+ +

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.

+ +
+
+

Ejemplo

+ +

El borde a la izquierda de este texto tiene su tamaño especificado en píxeles.

+ +

El borde de la derecha tiene su tamaño especificado en ems.

+ +

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:

+
+ + + + + + + +
+
RESIZE ME PLEASE
+
+
+ +
+
+

Más detalles

+ +

Para otros dispositivos, otras unidades de longitud son apropiadas.

+ +

Hay más información sobre esto en una página posterior de este tutorial.

+ +

Para obtener detalles completos de los valores y unidades que puede utilizar, consulte Valores en la especificación CSS.

+
+
+ +

Diseño del texto

+ +

Dos propiedades especifican cómo está alineado el contenido de un elemento. Puede usarlos para ajustes sencillos de diseño:

+ +

{{Cssxref ('text-align')}}

+ +


+   Alinea el contenido. Utilice uno de estos valores: izquierda, derecha, centro, justificar
+ {{Cssxref ('texto-sangría')}}
+     Indente el contenido en una cantidad que especifique.

+ +

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.

+ +
+
+

Ejemplo

+ +

Para centrar los títulos:

+
+ +
h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+}
+
+ +

Resultado:

+ + + + + + + +
+

(A) The oceans

+
+ +

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.

+
+ +

Floats

+ +

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.

+ +

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.

+ +
+
+

Ejemplo

+ +

En el documento de ejemplo, las listas se extienden por la ventana. Puede evitarlo flotando hacia la izquierda.

+ +

Para mantener los encabezados en su lugar, también debe especificar que se mantengan alejados de los flotadores a su izquierda:

+
+ +
ul, #numbered {float: left;}
+h3 {clear: left;}
+
+
+ +

El resultado sería:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+ +

(Un poco de relleno es necesario a la derecha de las cajas, donde el borde es demasiado cerca del texto.)

+ +

Posicionamiento

+ +

Puede especificar la posición de un elemento de cuatro formas especificando la propiedad {{cssxref ('position')}} y uno de los siguientes valores.

+ +

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.

+ +

relativo

+ +


+   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.
+ fijo
+     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.
+ absoluto
+     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.
+ estático
+     El valor por defecto. Utilice este valor si necesita desactivar la posición de forma explícita.

+ +

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.

+ +
+
+

Ejemplo

+ +

Para colocar dos elementos uno encima del otro, cree un contenedor principal en el documento con los dos elementos dentro de él:

+
+ +
<div id="parent-div">
+  <p id="forward">/</p>
+  <p id="back">\</p>
+</div>
+
+ +

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:

+ +
#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;
+}
+
+ +

El resultado se ve así, con la barra invertida en la parte superior de la barra inclinada:

+ +
+

/

+ +

\

+
+ + + + + + + +
 
+
+ +
+
+

Más detalles

+ +

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.

+ +

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.

+
+
+ +

Action: Specifying layout

+ +
    +
  1. 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.
    2. +
  2. En el ejemplo Flotantes, agregue relleno para separar el texto del borde derecho por 0. 5 em.
    3. +
+ +
+
+

Cambios

+ +

Cambie el documento de ejemplo, doc2. Html, agregando esta etiqueta a ella cerca del final, justo antes de &lt;/ body&gt;.

+
+ +
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
+
+ +

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:

+ + + + + + + +
Image:Yellow-pin.png
+ +

Predecir dónde aparecerá la imagen en el documento. A continuación, actualice su navegador para ver si estaba correcto.

+ +

Agregue una regla a su hoja de estilos que coloque la imagen en la parte superior derecha de su documento.

+ +

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:

+ +
+
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +

 

+ +
Yellow map pin
+
+
+
+ +

 See a solution to this challenge.

+ +

What next?

+ +

{{ 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.

diff --git "a/files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" "b/files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" new file mode 100644 index 0000000000..676ea9caf9 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" @@ -0,0 +1,155 @@ +--- +title: Los estilos de texto +slug: 'Web/CSS/Introducción/Los:estilos_de_texto' +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +

{{ CSSTutorialTOC() }}

+ +

Esta es la sección séptima del tutorial CSS Introducción ; da más ejemplos de estilos de texto.Usted modificara su hoja de estilo de ejemplo para utilizar diferentes fuentes.

+ +

Los estilos de texto: Información

+ +

CSS tiene varias propiedades de estilo de texto .

+ +

Hay una propiedad abreviada conveniente, la fuente , que se puede utilizar para especificar varios aspectos a la vez, por ejemplo:

+ + + +
+
+
Ejemplo
+ +
p { fuente : cursiva 75% / 125% "Comic Sans MS" , cursive ; }
+
+ +

Esta regla establece varias propiedades de la fuente, poniendo todos los párrafos en italic.

+ +

El tamaño de fuente se establece en tres cuartas partes del tamaño en cada párrafo del elemento padre,  y el interlíneado se establece en 125% (un poco más separados de lo normal).

+ +

El tipo de letra se establece en Comic Sans MS, pero si este tipo de letra no está disponible, el navegador utilizará por defecto tipografía cursiva (hand-written).

+ +

La regla tiene el efecto colateral de desactivar las versalitas y negritas (estableciendo su valor en normal):

+
+ +

Tipos de fuentes

+ +

No se puede predecir qué tipografías tienen los lectores de nuestro documento . Así que cuando se especifica llos tipos de fuentes de las letras, es buena idea darle una lista alternativa en orden de preferencia.

+ +

Finalice la lista con uno de los las tipografías por defecto: serif, sans-serif, cursive, fantasy or monospace.

+ +

Si el tipo de letra no es compatible con alguna de los caracteres del documento, el navegador puede sustituirlos por una tipografía diferente. Por ejemplo, el documento puede contener caracteres especiales que el tipo de letra no admite. Si el navegador puede encontrar otro tipografía que tiene esos caracteres, entonces usará otro tipo de fuente

+ +

Para especificar un tipo de letra por sí misma, utilizar el font-family propiedad.

+ +

Los tamaños de la fuente

+ +

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.

+ +

Puede utilizar algunos valores incorporados para tamaños de fuentes,  like small, medium and large (pequeñas, medianas y grandes) . También puede utilizar valores relativos al tamaño de fuente del elemento padre, like: smaller, larger, 150% or 1.5em. ( más pequeño, más grande, 150% o 1.5em.). Un "em" es equivalente a la anchura de la letra "m" (para el tamaño de fuente del elemento padre); así 1.5em es una vez y media el tamaño de la fuente del elemento padre.

+ +

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. 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.

+ +

Para especificar un tamaño de fuente por su cuenta, utilice el font-size propiedad.

+ +

Altura de línea

+ +

El interlíneado especifica el espacio entre líneas. Si el documento tiene párrafos largos con muchas líneas, una separación más grande de lo normal, hace que sea más fácil de leer, especialmente si el tamaño de la letra es pequeña.

+ +

Para especificar una altura de línea por su cuenta, utilice la propiedad line-height .

+ +

Decoración

+ +

La propiedad independiente text-decoration puede especificar otros estilos, como el subrayado o tachado. Usted puede establecerlo en ninguno ( none )  para eliminar expresamente cualquier decoración.

+ +

Otras propiedades

+ +

Para especificar cursiva por su cuenta, use font-style : italic;
+ Para especificar audaz por su cuenta, use font-weight : bold;
+ Para especificar los pequeños capitales en su propio, el uso font-variant : small-caps;

+ +

Para desactivar o activar cualquiera de estos valores de forma individual, puede especificar su valor como normal o inherit.

+ +
+
Mas detalles
+ +

Puede especificar estilos de texto de diversas maneras.

+ +

Por ejemplo, algunas de las propiedades mencionadas aquí tienen otros valores que se pueden utilizar.

+ +

En una hoja de estilo compleja, evite utilizar la propiedad font shorthand, debido a sus efectos secundarios (resetean otras propiedades individuales).

+ +

Para obtener mas detalles de las propiedades que se relacionan con las fuentes, ver las especificaciónes CSS , Fonts,. Si desea más detalles sobre la decoración de texto, ver Text .

+ +

Si no quiere depender de los tipos de letra instalados en los sistemas de los usuarios, puede usar @ font-face para especificar una fuente en línea. Sin embargo, esto requiere que los usuarios tengan un navegador que soporte esta regla.

+
+ +

Acción: Especificaciónes de las fuentes

+ +

Para un simple documento, puede establecer la fuente del elemento  <body> y el resto del documento hereda la configuración.

+ +
    +
  1. Edite su archivo CSS.
    2. +
  2. Agregue la siguiente regla para cambiar el tipo de letra en todo el documento. La parte superior del archivo CSS es el lugar lógico para esto, pero no tiene los mismos efectos donde usted lo ponga: + 
    body {font: 16px "Comic Sans MS", cursive;}
    + +
     
    +
    3. +
  3. Añada un comentario que explique la regla, y agregue un espacio en blanco para que coincida con su diseño preferido.
    4. +
  4. Guarde el archivo y actualice el explorador para ver el efecto. Si su sistema tiene Comic Sans MS, u otra fuente cursiva que no soporta italic, su navegador eligira un tipo de letra diferente para la primera línea del texto en italic: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    5. +
  5. Desde la barra de menú de su navegador, elija Ver> Tamaño del texto> Aumentar (o Ver> Zoom> Acercar ). A pesar de que ha especificado 16 píxeles en el estilo, un usuario leer el documento se puede cambiar este tamaño.
    6. +
+ +
+
Desafío
+ +

Sin modificar nada más, hacer las seis letras iniciales dos veces el tamaño de letra serif por defecto del navegador:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +
+
Possible solution
+ +

Add the following style declaration to the strong rule:

+ +
  font: 200% serif;
+
+If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. + +

 

+Hide solution
+Ver una solución para el desafío.
+ +

¿Y ahora qué?

+ +

El documento muestra ya utiliza varios colores con nombre. La siguiente sección enumera los nombres de los colores estándar y se explica cómo se puede especificar otros .

+ +

 

diff --git "a/files/es/web/css/introducci\303\263n/media/index.html" "b/files/es/web/css/introducci\303\263n/media/index.html" new file mode 100644 index 0000000000..bb7bb0bd23 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/media/index.html" @@ -0,0 +1,394 @@ +--- +title: Media +slug: Web/CSS/Introducción/Media +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +

{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables")}}

+ +

Esta es la ultima sección de la primera parte del tutorial de Introducción a CSS. Muchas páginas de este tutorial se han enfocado en las propiedades y valores de CSS que especifican como mostrar un documento. Esta sección indaga otra vez en el propósito y la estructura de las hojas de estilo.

+ +

Información: Media

+ +

El propósito de CSS es especificar cómo los documentos son presentados al usuario. La presentación puede tener más de una forma.

+ +

Por ejemplo, probablemente estes leyendo esta página en algún aparato doméstico (un celular, tu pc). Pero también podrías querer proyectarlo para una audiencia mas grande o imprimirlo. Estos medios pueden tener diferentes características. CSS te provee diferentes maneras de presentar un documento en distintos medios.

+ +

Para especificar reglas para un medio en particular, usa {{CSSXref("@media")}} seguido por el tipo de medio, seguido por llaves que encierren las reglas.

+ +
+
Ejemplo
+ +

Un documento en un web site tiene una barra de navegación que permite a los usuarios moverse en el sitio.

+ +

En el lenguaje de marcado, el elemento padre de esta área tiene el id nav-area. (En {{HTMLVersionInline(5)}}, esto puede ser marcado con el elemento {{HTMLElement("nav")}} en vez de un {{HTMLElement("div")}} con un atributo id.)

+ +

Cuando vas a imprimir el documento esa área de navegación no tiene ningún propósito, entonces con las hojas de estilo puedes removerlo completamente:

+ +
@media print {
+  #nav-area {display: none;}
+  }
+
+
+ +

Algunos de los tipos de medios comunes son:

+ + + + + + + + + + + + + + + + + + + + +
screenPantalla de computadora
printMedio paginado
projectionPantalla proyectada
allTodos (por defecto)
+ +
+
Mas detalles
+ +

Existen otras maneras de especificar un conjunto de reglas para los distintos medios.

+ +

El lenguaje de marcado del documento puede permitir que el tipo de medio sea determinado cuando la hoja de estilo esta enlazada al documento. Por ejemplo, en HTML puedes especificar el tipo de medio con un atributo media en la etiqueta LINK.

+ +

En CSS puedes usar {{CSSXref("@import")}} al inicio de la hoja de estilo para importar otra hoja de estilo de una URL, opcionalmente especificando el tipo de medio.

+ +

Al usar estas técnicas puedes separar las reglas de estilo para los diferentes medios en distintos archivos. Esta es una manera útil de estructurar tus hojas de estilo.

+ +

Para más detalles de los tipos de medio, ve Media en la especificación de CSS.

+ +

Existen mas ejemplos de la propiedad {{cssxref("display")}} en una página posterior de este tutorial: XML data.

+
+ +

Imprimir

+ +

CSS tiene algún soporte especifico para impresión y para medios páginados en general.

+ +

Una regla {{cssxref("@page")}} puede determinar los márgenes de la página. Para impresión de doble cara, puedes definir los márgenes separadamente para @page:left y @page:right.

+ +

Para medios impresios, normalmente usas unidades apropiadas de lonfigutd como pulgadas (in) y puntos (pt = 1/72 inch), o centimetros (cm) y milimetros (mm). Es igualmente apropiado usar ems (em) para conincidir el tamaño de la fuente, y porcentajes (%).

+ +

Tu puedes controlar como los saltos de línea del contenido de un documento, al usar las propiedades {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} y{{cssxref("page-break-inside")}}.

+ +
+
Ejemplo
+ +

Esta regla determina los márgenes a una pulgada en todos los lados:

+ +
@page {margin: 1in;}
+
+ +

Esta regla asegura que cada elemento H1 empiece en una nueva página:

+ +
h1 {page-break-before: always;}
+
+
+ +
+
Más detalles
+ +

Para más detalles del soporte de CSS para medios paginados, ver Paged media en la especificación de CSS.

+ +

Como otras características de CSS, imprimir depende de tu navegador y su configuración. Por ejemplo, Mozilla te suple con unos márgenes por defecto, cabeceras y pies de página cuando imprimes. Cuando otros usuarios imprimen tu documento, probablemente no puedas predecir el navegador y la configuración usada, por lo que no podrás controlar los resutlados completamente.

+
+ +

Interfaces de Usuario

+ +

CSS tiene algunas propiedades especificas para aparatos que soportanuna interfaz de usuario, como monitores. Esto hace que la apariencia del documento cambie dinámicamente mientras el usuario trabaja con la interfaz.

+ +

No existe un tipo especial de medio para aparatos con interfaz de usuario.

+ +

Si existen cinco selectores especiales:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
E{{cssxref(":hover")}}Cualquier elemento E que tenga el puntero sobre él
E{{cssxref(":focus")}}Cualquier elemento E que tenga el foco del teclado
E{{cssxref(":active")}}Cualquier elemento E que este envuelto en la acción actual del usuario
E{{cssxref(":link")}}Cualquier elemento E que es un hipervinculo a una URL no visitada por el usuario
E{{cssxref(":visited")}}Cualquier elemento E que es un hipervinculo a una URL que el usuario ya visito
+ +
+

Nota: La información que puede ser obtenida con el selector :visited esta restringida en {{gecko("2.0")}}. Ver Privacy and the :visited selector para más detalles.

+
+ +

La propiedad {{cssxref("cursor")}} especifica la forma del puntero: Algunas de las formas comunes son las siguientes.

+ +

Coloca el mouse sobre los items en este lista para ver la forma actual del puntero en tu navegador:

+ + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
pointerIndicating a link
waitIndicating that the program cannot accept input
progressIndicating that the program is working, but can still accept input
defaultThe default (usually an arrow)
+ +

Una propiedad {{cssxref("outline")}} crea un contorno que a menudo es usado para indicar el foco del teclado. Sus valores son similares a la propiedad {{cssxref("border")}}, excepto que no puedes especificar lados individuales.

+ +

Otras características de las interfaces de usuario son implementadas usando atributos. Por ejemplo, un elemento que esta deshabilitado o es de solo lectura tiene el atributo disabled o el atributo readonly. Selectores puede especificar estos atributos como cualquier otro, usando corchetes: {{mediawiki.external('disabled')}} o {{mediawiki.external('readonly')}}.

+ +
+
Ejemplo
+ +

Estas reglas especifican estilos para un boton que cambia dinámicamente cuando el usuario interactúa con el:

+ +
.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active {
+  border-style: inset;
+  }
+
+ +

Esta wiki no soporta una interfaz de usuario en la página, entonces estos botones no hacen "click". A continuación se presentan una imágenes estáticas para ilustrar la idea:

+ + + + + + + +
+ + + + + + + + + + + + + + + + +
Click MeClick MeClick Me
 
disablednormalactive
+
+ +

Un botón completamente funcional también tiene un contorno oscuro alrededor cuando esta por defecto, y un contorno punteado en él cuando tiene el foco del teclado. También podría un efecto flotante (hover) cuando el puntero este sobre el.

+
+ +
+
Más detalles
+ +

Para más información sobre interfaces de usuario en CSS, ver User interface en la especificación de CSS.

+ +

Existe un ejemplo del lenguaje de marcado usado por Mozilla para interfaces de usuario, XUL, en la Parte II de este tutorial.

+
+ +

Acción: Imprimir un documento

+ +
    +
  1. Abrir un nuevo documento HTML, doc4.html. Copiar y pegar el contenido de aqui: + + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Print sample</title>
+    <link rel="stylesheet" href="style4.css">
+  </head>
+  <body>
+    <h1>Section A</h1>
+    <p>This is the first section...</p>
+    <h1>Section B</h1>
+    <p>This is the second section...</p>
+    <div id="print-head">
+      Heading for paged media
+    </div>
+    <div id="print-foot">
+      Page:
+    </div>
+</body>
+</html>
+
    +
    2. +
  2. Abrir una nueva hoja de estilo, style4.css. Copiar y pegar el contenido de aqui: + 
    /*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+
    +
    3. +
  3. Ve este documento en tu navegador; este usa el estilo por defecto de tu navegador.
    4. +
  4. Imprime (o previsualiza) el documento; la hoja de estilo coloca cada sección en una página separada, y agrega una cabecera y un pie de página por cada una. Si tu navegador soporta contadores, le agregará un número de página al pie. + + + + + + + +
    + + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section A
    + +
    This is the first section...
    + +
    Page: 1
    +
    +
    +     		+ + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section B
    + +
    This is the second section...
    + +
    Page: 2
    +
    +
    +
    +
    5. +
+ + + + + + + + +
Retos
Mueve las relgas de estilo especificas para imprimir a un archivo CSS separado. +

Lee la página de referencia {{CSSXref("@import")}} para buscar detalles de como importar el nuevo archivo CSS especifico para imrpimir dentro de tu hoja de estilo style4.css.

+ +

Haz que las encabezamientos se vuelvan azules cuando el puntero del mouse este sobre ellos.

+
+ +

Ver soluciones a estos retos.

+ +

¿Qué sigue?

+ +

Si has tenido dificultades entendiendo esta página, o si tienes algún comentario, por favor contribuye en la página de Discussion.

+ +

Hasta aquí, todas las reglas de estilo en este tutorial han estado en archivos especificos. Las reglas y sus valores son fijos. La siguiente página describe como cambiar las reglas dinámicamente al usar un lenguaje de programación: JavaScript

diff --git "a/files/es/web/css/introducci\303\263n/selectors/index.html" "b/files/es/web/css/introducci\303\263n/selectors/index.html" new file mode 100644 index 0000000000..5d63b82547 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/selectors/index.html" @@ -0,0 +1,415 @@ +--- +title: Selectores +slug: Web/CSS/Introducción/Selectors +translation_of: Learn/CSS/Building_blocks/Selectors +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}Esta es la sección quinta del tutoriaCSS Getting Started ;En él se explica cómo se puede aplicar estilos de forma selectiva, y cómo los diferentes tipos de selectores tener diferentes prioridades. Agregar algunos atributos a las etiquetas en su documento de muestra, y utiliza estos atributos en su hoja de estilos de muestra.

+ +

Información: Selectores

+ +


+ CSS tiene su propia terminología para describir el lenguaje CSS. Anteriormente en este tutorial, que ha creado una línea en su hoja de estilos como esta:

+ +
strong {
+  color: red;
+}
+
+ +

En la terminología de CSS, toda esta línea es una rule (regla). Esta regla comienza con strong, que es un selector. Permite seleccionar qué elementos en el DOM se aplica la regla.

+ +
+
Más detalles
+ +

La parte interior de las llaves es la declaración.

+ +

 La palabra clave es color, que es una propiedad, y el rojo es el valor.

+ +

El punto y coma después de el par propiedad-valor separa los posibles otros pares de  propiedad-valor en una misma declaración.

+ +

 Este tutorial se refiere a un selector como strong como un selector de etiquetas. La especificación CSS se refiere a él como un selector de tipo ( type selector).

+
+ +

En esta página del tutorial se explica más acerca de los selectores que se pueden utilizar en las reglas CSS.

+ +

Además de añadir nombres a las etiquetas , puede usar valores en los atributos de los selectores. Esto permite que sus reglas sean más específicas.

+ +

Dos atributos tienen un estatus especial para CSS. Son class e id.

+ +

Class: Selectores de clase

+ +

Utilice el atributo class para asignarle  a un elemento un nombre de clase (class). Depende del nombre que elijas como class. Múltiples elementos en un documento pueden tener el mismo valor de la clase.

+ +

En su hoja de estilo, escriba un punto (.) antes del nombre de la clase, cuando se utiliza como un selector.

+ +

Selectores ID

+ +

Utilice el atributo id en un elemento para asignar un identificación para ese elemento. Depende de usted el nombre que elija para el ID. El nombre de ID debe ser único en el documento.
+  

+ +

En su hoja de estilo, escriba un símbolo de almohadilla (#) ante el ID cuando se utiliza esto en un selector.

+ +
+
Ejemplo
+ +

Esta etiqueta HTML tiene un atributo class y un atributo id:

+ +
<p class="key" id="principal">
+
+ +

El valor de id es, principal, debe ser único en el documento; pero otras etiquetas del documento puede tener el mismo nombre de la class, Key.

+ +

En una hoja de estilo CSS, esta regla hace que todos los elementos con la class key sean verdes . (Puede ser que no todos los sean {{HTMLElement ()} "p"} elementos.)

+ +
.key {
+  color: green;
+}
+
+ +

Esta regla hace que el único elemento de id principal este en negrita:

+ +
#principal {
+  font-weight: bolder;
+}
+
+
+ +

Si más de una regla se aplica a un elemento y especifica la misma propiedad, entonces el CSS da prioridad a la regla que tiene el selector más específico. Un selector ID es más específico que un selector de class, que a su vez es más específico que un selector (tag) de etiquetas.

+ +
+
Más detalles
+ +

También se pueden combinar selectores, haciendo un selector más específico.
+
+ Por ejemplo, el selector .key selecciona todos los elementos que tienen key como nombre de clase (class). El selector p.key selecciona sólo el elemento {{ HTMLElement("p") }} que tiene de nombre key.

+ +

Usted no esta limitado a los dos atributos especiales, class e id.  Se puede especificar otros atributos mediante corchetes. Por ejemplo, el selector [type='button'] selecciona todos los elementos que tienen un atributo de tipo con el  valor button.

+
+ +

Si la hoja de estilo tiene reglas en conflicto y son igualmente específicas, entonces el CSS da prioridad a la regla que está después en la hoja de estilos.

+ +

Cuando usted tiene un problema con las reglas en conflicto, trate de resolverlo haciendo una de las normas más específicas, para que tenga prioridad. Si usted no puede hacer esto, trate de mover una de las reglas mas cerca del final de la hoja de estilos para que tenga la prioridad.

+ +

Las pseudo-clases de los selectores

+ +

Una pseudo-clase  pseudo-class es en  CSS una palabra clave añadida a los selectores, que especifica un estado especial del elemento a seleccionar. Por ejemplo {{Css Href (": hover")}} aplicará un estilo cuando el usuario se desplaza sobre el elemento especificado mediante el selector.

+ +

Las Pseudo-classes, junto con los pseudo-elements, permiten aplicar un estilo a un elemento no sólo en relación con el contenido de la estructura del documento, sino también en relación a los factores externos, como la historia del navegador por ejemplo: ({{href css (": visited ")}}, ), el estado de su contenido (como {{ref css (": :checked")}} en algunos elementos de formulario), o la posición del ratón (como {{cssxref (":hover ")}} que le permite saber si el ratón está sobre un elemento o no). Para ver una lista completa de selectores, visite especificación CSS3 Selectores de trabajo CSS3 Selectors working spec.

+ +
+
Sintaxis
+ +
selector:pseudo-class {
+  property: value;
+}
+
+
+ +

Listado de pseudo-classes:

+ + + +

Información: Los selectores basados en relaciones (relationships)

+ +

El CSS tiene algunas formas de seleccionar elementos en función de las relaciones entre los elementos. Usted puede utilizar estas para hacer selectores que sean más específicos.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Selectores comunes basados en relaciones
SelectorSelects
A ECualquier elemento E que es un descendiente de un elemento A (que es: un hijo o un hijo de un hijo etc.)
A > ECualquier elemento E que es un hijo de un elemento A
E:first-childCualquier elemento E que es el primer hijo de su padre
B + ECualquier elemento E que es el siguiente hermano de un elemento B (es decir: el próximo hijo del mismo padre)
+ +

Usted puede combinarlas para expresar relaciones complejas.
+
+ También puede utilizar el símbolo asterisco (*) para significar "cualquier elemento".

+ +
+
Ejemplo
+ +

Una tabla HTML tiene un atributo id, pero sus filas y las celdas no tienen identificadores individuales:

+ +
<table id="data-table-1">
+...
+<tr>
+<td>Prefix</td>
+<td>0001</td>
+<td>default</td>
+</tr>
+...
+
+ +

Estas reglas hacen que la primera celda de cada fila sea en negrita, y la segunda celda de cada fila en  la familia de fuente  monoespaciado. Esto sólo afecta a una tabla concreta del documento:

+ +
    #data-table-1 td:first-child {font-weight: bolder;}
+    #data-table-1 td:first-child + td {font-family: monospace;}
+
+ +

El resultado se ve así:

+ + + + + + + +
+ + + + + + + + +
Prefix0001default
+
+
+ +
+
Más detalles
+ +

La manera mas habitual es hacer que un selector sea más específico, entonces aumentara su prioridad.

+ +

Si utiliza estas técnicas, se evita la necesidad de especificar la class o atributos ID en muchas etiquetas del documento. En su lugar, CSS hace este trabajo.

+ +

En grandes diseños donde la velocidad es importante, usted puede hacer sus hojas de estilo más eficiente evitando reglas complejas que dependen de relaciones entre los elementos.

+ +

Para más ejemplos sobre las tablas, ver Tables en la página CSS Reference.

+
+ +

Action: Using class and ID selectors

+ +
    +
  1. Edite su archivo HTML, y duplicar el párrafo copiando y pegando.
    2. +
  2. A continuación, agregue los atibutos  id y class a la primera copia, y un atributopara la segunda copia como se muestra a continuación. Alternativamente, copie y pegue el archivo entero de nuevo: + 
    <!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>
+
    +
    3. +
  3. Ahora edite su archivo CSS. Reemplazar todo el contenido con: + 
    strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+
    +
    4. +
  4. Guarde los archivos y actualizar el navegador para ver el resultado: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    + +

    Puede intentar reordenar las líneas en el archivo CSS de mostrar de que el orden no efecta.

    + +

    Los selectores de class.carrot and .spinach tienen prioridad sobre el selector de etiquetas strong.

    + +

    El ID selector #first tiene prioridad sobre los selectores de clase y etiqueta.

    +
    5. +
+ +
+
Desafíos
+ +
    +
  1. Sin cambiar su archivo HTML, agregue una sola regla para su archivo CSS que mantenga todas las letras iniciales que mismo color que están ahora, pero hace que todo el otro texto en el segundo párrafo sea azul: + + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    2. +
  2. Ahora cambie la regla que acaba de agregar (sin cambiar nada más), para hacer que el primer párrafo sea azul también: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    3. +
+ +
+
Possible solution
+ +
    +
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: + + 
    #second { color: blue; }
+
    + A more specific selector, p#second also works.
    2. +
  2. Change the selector of the new rule to be a tag selector using p: + 
    p { color: blue; }
+
    +
    3. +
+Hide solution
+See a solution for the challenge.
+ +

Action: Using pseudo-classes selectors

+ +
    +
  1. Cree un HTML como el siguiente: + + 
    <!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>
+
    +
    2. +
  2. Ahora edite su archivo CSS. Reemplace todo el contenido con: + 
    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;
+}
+
    +
    3. +
  3. Guarde los archivos y actualice el explorador para ver el resultado (poner el ratón sobre el siguiente enlace para ver el efecto): + + + + + + +
    Go to our Home page  
    +
    4. +
+ +

Acción: Uso de selectores basados en las relaciones y pseudo-clases

+ +

Con selectores basados en las relaciones y pseudo-clases puede crear algoritmos complejos en cascada . Esto es una técnica común que se utiliza, por ejemplo, con el fin de crear menús desplegables en puro CSS (es decir sólo CSS, sin necesidad de utilizar JavaScript). La esencia de esta técnica es la creación de una regla como la siguiente:

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+ +

Aplicararemos a una estructura de HTML como el siguiente:

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

Vea nuestro ejemplo completoCSS-based dropdown menu example para una posible referencia.

+ +

¿Y ahora qué?

+ +

Su hoja de estilos de muestra está empezando a parecer densa y complicada. La siguiente sección describe maneras de hacer CSS más fácil de leer. easier to read.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

-- cgit v1.2.3-54-g00ecf