From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- .../cascade_and_inheritance/index.html | 125 +++++++ .../learn/css/building_blocks/index.html | 335 +++++++++++++++++ .../learn/css/building_blocks/selectors/index.html | 416 +++++++++++++++++++++ .../building_blocks/values_and_units/index.html | 364 ++++++++++++++++++ .../es/conflicting/learn/css/css_layout/index.html | 384 +++++++++++++++++++ .../learn/css/first_steps/how_css_works/index.html | 107 ++++++ .../index.html | 128 +++++++ .../index.html | 146 ++++++++ .../conflicting/learn/css/first_steps/index.html | 94 +++++ .../learn/css/styling_text/fundamentals/index.html | 156 ++++++++ 10 files changed, 2255 insertions(+) create mode 100644 files/es/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/es/conflicting/learn/css/building_blocks/index.html create mode 100644 files/es/conflicting/learn/css/building_blocks/selectors/index.html create mode 100644 files/es/conflicting/learn/css/building_blocks/values_and_units/index.html create mode 100644 files/es/conflicting/learn/css/css_layout/index.html create mode 100644 files/es/conflicting/learn/css/first_steps/how_css_works/index.html create mode 100644 files/es/conflicting/learn/css/first_steps/how_css_works_194e34e451d4ace023d98021c00b3cfd/index.html create mode 100644 files/es/conflicting/learn/css/first_steps/how_css_works_a460b5a76c3c2e7fc9b8da464dfd0c22/index.html create mode 100644 files/es/conflicting/learn/css/first_steps/index.html create mode 100644 files/es/conflicting/learn/css/styling_text/fundamentals/index.html (limited to 'files/es/conflicting/learn/css') 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 new file mode 100644 index 0000000000..b47218eb7a --- /dev/null +++ b/files/es/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,125 @@ +--- +title: Cascada y herencia +slug: Web/CSS/Introducción/Cascading_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_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/conflicting/learn/css/building_blocks/index.html b/files/es/conflicting/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..caccdd80b2 --- /dev/null +++ b/files/es/conflicting/learn/css/building_blocks/index.html @@ -0,0 +1,335 @@ +--- +title: Boxes +slug: Web/CSS/Introducción/Boxes +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +--- +

{{ 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/conflicting/learn/css/building_blocks/selectors/index.html b/files/es/conflicting/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..9ebe3573e8 --- /dev/null +++ b/files/es/conflicting/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,416 @@ +--- +title: Selectores +slug: Web/CSS/Introducción/Selectors +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/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")}}

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 new file mode 100644 index 0000000000..030fa9d692 --- /dev/null +++ b/files/es/conflicting/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,364 @@ +--- +title: Color +slug: Web/CSS/Introducción/Color +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +translation_of_original: Web/Guide/CSS/Getting_started/Color +--- +

{{ 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/conflicting/learn/css/css_layout/index.html b/files/es/conflicting/learn/css/css_layout/index.html new file mode 100644 index 0000000000..f71d3a82e6 --- /dev/null +++ b/files/es/conflicting/learn/css/css_layout/index.html @@ -0,0 +1,384 @@ +--- +title: Layout +slug: Web/CSS/Introducción/Layout +translation_of: Learn/CSS/CSS_layout +translation_of_original: Web/Guide/CSS/Getting_started/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/conflicting/learn/css/first_steps/how_css_works/index.html b/files/es/conflicting/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..941f96a0e5 --- /dev/null +++ b/files/es/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,107 @@ +--- +title: Por que usar CSS +slug: Web/CSS/Como_iniciar/Por_que_usar_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +--- +

 

+

Esta página explica por qué los documentos usan CSS. Usas CSS para añadir una hoja de estilos a tu documento de prueba.

+

Esta es la segunda sección del tutorial.

+

Sección anterior: Que es CSS
+ Sección siguiente: How CSS works

+

Información: ¿Por qué usar CSS?

+

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 estilos. Si mantienes los estilos separados del contenido puedes:

+ + + + + + + + +
+ Ejemplo
+

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.

+

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.

+
+

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

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

Un lenguaje de marcado como HTML también provee algunas maneras de especificar estilos.

+

Por ejemplo en HTML puedes usar una etiqueta <b> para hacer acentuar el texto, y puedes especificar un color de fondo de la página en la etiqueta <body>.

+

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.

+
+

Acción: Creando una hoja de estilos

+
    +
  1. Crea un archivo de texto en el mismo directorio anterior.  Este archivo será tu hoja de estilos. Nombrala como: style1.css
    2. +
  2. En tu archivo CSS, copia y pega esta única línea, luego graba el archivo:
    3. +
  3. +
    + 
    strong {color: red;}
+
    +
    +
    4. +
+

Enlazando tu documento a tu hoja de estillos

+
    +
  1. Para enlazar tu documento a tu hoja de estilos, edita tu archivo HTML. Añade la línea acentuada aquí:
    2. +
  2. +
    + 
    <!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>
+  <link rel="stylesheet" type="text/css" href="style1.css">
+  </head>
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    +
    3. +
  3. Graba el archivo y refresca la pantalla del navegador. Esta hoja de estilos hace que las letras inicales sean rojas, como esto: + + + + + + +
    Cascading Style Sheets
    +
    4. +
+ + + + + + + +
+ Reto
En adición al rojo, CSS permite algunos otros nombres de colores. +

Sin mirar la referencia, encuentra cinco o más nombres de colores que funcionen en tu hoja de estilos.

+
+

See a solution for the challenge. Ver la solución al reto.

+

¿Qué sigue?

+

Si tienes alguna dificultad entendiendo esta página, o si tienes comentarios acerca de la misma, por favor contribuye en esta página de Discusión.

+

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: Como funciona CSS.

+

{{ CSSTutorialTOC() }}

+

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

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 new file mode 100644 index 0000000000..f4beb05519 --- /dev/null +++ b/files/es/conflicting/learn/css/first_steps/how_css_works_194e34e451d4ace023d98021c00b3cfd/index.html @@ -0,0 +1,128 @@ +--- +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 +translation_of_original: Web/Guide/CSS/Getting_started/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/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 new file mode 100644 index 0000000000..18852f2439 --- /dev/null +++ b/files/es/conflicting/learn/css/first_steps/how_css_works_a460b5a76c3c2e7fc9b8da464dfd0c22/index.html @@ -0,0 +1,146 @@ +--- +title: Que es CSS +slug: Web/CSS/Como_iniciar/Que_es_CSS +tags: + - para_revisar +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +

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.

+ +

Esta es la primera sección del tutorial Como iniciar.
+ Siguiente sección: Por qué usar CSS

+ +

Información: ¿Qué es CSS?

+ +

Cascading Style Sheets (CSS), traducido literalmente al español, como Hojas de estilo en cascada, es un lenguaje para especificar cómo los documentos se presentan a los usuarios.

+ +

Un documento (document) es una colección de información que está estructurada utilizando un lenguaje de formato (markup language).

+ + + + + + + + +
Ejemplos
+
    +
  • Una página web como la que estás leyendo, es un documento.
    + 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).
    • +
+ +
    +
  • Un cuadro de diálogo en una aplicación Mozilla es un documento.
    + 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).
    • +
+
+ +

En este tutorial, los cuadros con titulo Más detalles, 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.

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

Un documento no es lo mismo que un archivo. Y este puede o no estar almacenado en un archivo.

+ +

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.

+ +

Para más información acerca de documentos y lenguajes de formato, visite otras partes de este sitio web—por ejemplo:

+ + + + + + + + + + + + + + + + + + + + +
HTMLpara páginas web
XMLpara documentos estrucurados, en general
SVGpara gráficas
XULpara interfaces de usuario de Mozilla
+ +

En la parte II de este tutorial podrá ver ejemplos de estos lenguajes de formato.

+
+ +

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

+ + + + + + + + +
Más detalles
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 agente de usuarios (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. +

Para algunas de las definiciones formales de la terminología relacionda con CSS, consulte el enlace Definiciones (en ingles) en la especificación CSS.

+
+ +

Acción: Crear un documento

+ +
    +
  1. Utilice su computador para crear un nuevo directorio y un nuevo archivo de texto allí. El archivo contendrá el documento. +
      +
    1. Copie y pegue el código HTML que se muestra a continuación. Guarde el archivo con el nombre doc1.html + +
      + 
      <!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>
+
      +
      +
      2. +
    +
    2. +
  2. En el navegador web, abra una nueva pestaña o una nueva ventana, y abra el archivo allí. +

    Debe observar un texto con las letras iniciales en negrita, así:

    + + + + + + + +
    Cascading Style Sheets
    + +

    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.

    +
    3. +
+ +

¿Qué sigue?

+ +

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

+ +

El documento aún no utiliza CSS. En la siguiente página se utilizará CSS para especificar el estilo: ¿Por qué utilizar CSS?

+ +

{{ CSSTutorialTOC() }}

+ +

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

diff --git a/files/es/conflicting/learn/css/first_steps/index.html b/files/es/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..09177572fa --- /dev/null +++ b/files/es/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,94 @@ +--- +title: Introducción +slug: Web/CSS/Introducción +tags: + - CSS + - 'CSS:Introducción' + - para_revisar +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

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/conflicting/learn/css/styling_text/fundamentals/index.html b/files/es/conflicting/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..1788c8c0ee --- /dev/null +++ b/files/es/conflicting/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,156 @@ +--- +title: Los estilos de texto +slug: 'Web/CSS/Introducción/Los:estilos_de_texto' +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +

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

+ +

 

-- cgit v1.2.3-54-g00ecf