Merge pull request #688 from DanielZendejas/master

[css/es] created

1 files changed, 244 insertions, 0 deletions

diff --git a/es-es/css-es.html.markdown b/es-es/css-es.html.markdown
new file mode 100644
index 00000000..31000785
--- /dev/null
+++ b/es-es/css-es.html.markdown
@@ -0,0 +1,244 @@
+---
+language: css
+filename: learncss-es.css
+contributors:
+    - ["Mohammad Valipour", "https://github.com/mvalipour"]
+    - ["Marco Scannadinari", "https://github.com/marcoms"]
+translators:
+    - ["Daniel Zendejas","https://github.com/DanielZendejas"]
+lang: es-es
+---
+
+Tutorial de CSS en español
+
+En los primeros días de la web no había elementos visuales, todo
+era texto plano. Pero después, con el desarrollo de los navegadores,
+las páginas con contenido visual empezaron a ser más comunes.
+CSS es el lenguaje estándar que existe para separar el contenido
+(HTML) y el aspecto visual de las páginas web.
+
+Lo que CSS hace es proveer con una sintaxis que te permite apuntar a distintos 
+elementos HTML y asignarles diferentes propiedades visuales.
+
+CSS, como cualquier otro lenguaje, tiene múltiples versiones. Aquí nos enfocamos
+en CSS 2.0. No es la versión más reciente pero sí la más soportada y compatible.
+
+**NOTA:** Como los resultados de CSS son efectos visuales, para aprenderlo, 
+necesitarás probar todo tipo de cosas en ambientes como 
+[dabblet](http://dabblet.com/). Este artículo se enfoca, principalmente, en
+la sintaxis y consejos generales.
+
+```css
+/* ¡Los comentarios aparecen dentro de diagonal-asterisco, justo como esta línea! */
+
+/* ####################
+   ## SELECTORES
+   ####################*/
+
+/* Generalmente, la sentencia principal en CSS es muy simple. */
+selector { propiedad: valor; /* más propiedades separados por punto y coma...*/ }
+
+/* El selector es usado para apuntar a (seleccionar) un elemento en la página.
+
+¡Puedes apuntar a todos los elementos en la página con el asterisco! */
+* { color:red; }
+
+/*
+Dado un elemento como este en la página:
+
+<div class='una-clase clase2' id='unaId' attr='valor' />
+*/
+
+/* puedes seleccionar el <div> por el nombre de su clase */
+.una-clase { }
+
+/*¡O por sus dos clases! */
+.una-clase.clase2 { }
+
+/* O por el nombre de su elemento */
+div { }
+
+/* O por su Id */
+#unaId { }
+
+/* ¡O por el hecho de que tiene un atributo! */
+[attr] { font-size:smaller; }
+
+/* O por el hecho de que el atributo tiene un valor determinado */
+[attr='valor'] { font-size:smaller; }
+
+/* Empieza con un valor ('val' en este caso)*/
+[attr^='val'] { font-size:smaller; }
+
+/* O termina con un valor ('or' en este caso) */
+[attr$='or'] { font-size:smaller; }
+
+/* O incluso contiene un valor ('lo' en este caso) */
+[attr~='lo'] { font-size:smaller; }
+
+/*Más importante, puedes combinar estos criterios de búsqueda entre sí.
+No debe existir ningún espacio entre estas partes porque hace que el 
+significado cambie.*/
+div.una-clase[attr$='or'] { }
+
+/* También puedes seleccionar un elemento HTML basándote en sus padres*/
+
+/* Un elemento que es hijo directo de otro elemento (Seleccionado de la forma que
+vimos anteriormente) */
+
+div.un-padre > .nombre-clase {}
+
+/* O cualquiera de sus ancestros en la jerarquía*/
+/* La siguiente sentencia selecciona a cualquier elemento que tenga una clase
+"nombre-clase" y sea hijo de un div con clase "un-padre" EN CUALQUIER PROFUNDIDAD*/
+div.un-padre .nombre-clase {}
+
+/* advertencia: el mismo selector sin espacio tiene otro significado. ¿Puedes
+identificar la diferencia?*/
+
+/* También puedes seleccionar un elemento basado en su hermano inmediato previo*/
+.yo-estoy-antes + .este-elemento { }
+
+/*o cualquier hermano previo */
+.yo-soy-cualquiera-antes ~ .estes-elemento {}
+
+/* Existen algunas pseudo-clases que permiten seleccionar un elemento
+basado en el comportamiendo de la página (a diferencia de la estructura de
+la página) */
+
+/* Por ejemplo, para cuando pasas el mouse por encima de un elemento */
+:hover {}
+
+/* o una liga visitada*/
+:visited {}
+
+/* o una liga no visitada aún*/
+:link {}
+
+/* o un elemento de un formulario que esté seleccionado */
+:focus {}
+
+
+/* ####################
+   ## PROPIEDADES
+   ####################*/
+
+selector {
+    
+    /* Unidades */
+    width: 50%; /* en porcentaje */
+    font-size: 2em; /* dos veces el tamaño de la fuente actual */
+    width: 200px; /* en pixeles */
+    font-size: 20pt; /* en puntos */
+    width: 5cm; /* en centimetros */
+    width: 50mm; /* en milimetros */
+    width: 5in; /* en pulgadas */
+    
+    /* Colores */
+    background-color: #F6E;  /* en hexadecimal corto */
+    background-color: #F262E2; /* en hexadecimal largo */
+    background-color: tomato; /* puede ser un color con nombre */
+    background-color: rgb(255, 255, 255); /* en rgb */
+    background-color: rgb(10%, 20%, 50%); /* en rgb percent */
+    background-color: rgba(255, 0, 0, 0.3); /* en rgb semi-transparente (con valor alfa)*/
+    
+    /* Imagenes */
+    background-image: url(/ruta-a-la-imagen/imagen.jpg);
+    
+    /* Fuentes */
+    font-family: Arial;
+    font-family: "Courier New"; /* si el nombre contiene espacios, debe ir entre comillas */
+    font-family: "Courier New", Trebuchet, Arial; /* si la primera fuente no se encontró 
+    entonces se busca la seguna, o la tercera, así recursivamente*/
+}
+
+```
+
+## Uso
+
+Guarda cualquier CSS que quieras en un archivo con extensión `.css`.
+
+```xml
+<!-- Necesitas incluir tu archivo CSS en el elemento <head> de tu HTML: -->
+<link rel='stylesheet' type='text/css' href='ruta/archivoDeEstilos.css' />
+
+<!--
+también puedes incluir CSS dentro del archivo HTML. Esta no es una buena práctica
+y debe ser evitada.
+-->
+<style>
+   selector { propiedad:valor; }
+</style>
+
+<!--
+También se pueden aplicar propiedades al elemento directamente.
+Esta práctica también debe ser evitada a toda costa
+-->
+<div style='propiedad:valor;'>
+</div>
+
+```
+
+## Preferencia y orden
+
+Como te habrás dado cuenta un elemento puede ser seleccionado por más
+de un selector. En este caso alguna de las reglas cobra preferencia
+sobre las otras:
+
+Dado el siguiente CSS:
+
+```css
+/*A*/
+p.clase1[attr='valor']
+
+/*B*/
+p.clase1 {}
+
+/*C*/
+p.clase2 {}
+
+/*D*/
+p {}
+
+/*E*/
+p { propiedad: valor !important; }
+
+```
+
+Y el siguiente HTML:
+
+```xml
+<p style='/*F*/ propiedad:valor;' class='clase1 clase2' attr='valor'>
+</p>
+```
+
+El orden respetado es el siguiente:  
+Recuerda, la preferencia es por cada **property**, no para el bloque completo.
+
+* `E` tiene la preferencia más elevada gracias a la palabra `!important`.  
+	Es recomendado evitar esto a menos que sea estrictamente necesario incluirlo.
+* `F` le sigue, porque es estilo incrustado directamente en el HTML.
+* `A` le sigue, porque es más específico que cualquier otra opción.  
+	más específico = más especificadores. Aquí hay tres especificadores: elemento `p` +   
+	nombre de la clase `clase1` + un atributo `attr='valor'`
+* `C` le sigue. Aunque tiene el mismo número de especificadores como `B`  
+	pero aparece después.
+* Luego va `B`
+* y al final  `D`.
+
+## Compatibilidad
+
+La mayoría de las funcionalidades de CSS2 (y gradualmente de CSS3) son compatibles 
+en todos los navegadores y dispositivos. Pero siempre es vital tener en mente la
+compatibilidad y disponibilidad del CSS que uses con respecto a los navegadores
+y dispositivos para los que desarrolles.
+
+
+[QuirksMode CSS](http://www.quirksmode.org/css/) es una excelente referencia para esto.
+
+## Referencias
+
+* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
+* [QuirksMode CSS](http://www.quirksmode.org/css/)
+* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
+