summaryrefslogtreecommitdiffhomepage
path: root/es-es/css-es.html.markdown
diff options
context:
space:
mode:
authorven <vendethiel@hotmail.fr>2024-02-26 14:51:00 +0100
committerGitHub <noreply@github.com>2024-02-26 14:51:00 +0100
commit048addeaada37f8e64b37a8046f3283c3e2d7eb4 (patch)
treef9d23bbf0621aabebb5eb53d8f28e4c4369a8efd /es-es/css-es.html.markdown
parentd1d16b4a0de1e834c5a99c9a05a5a1026ae361a4 (diff)
Remove one of the es/CSS tutorials
#4825
Diffstat (limited to 'es-es/css-es.html.markdown')
-rw-r--r--es-es/css-es.html.markdown253
1 files changed, 0 insertions, 253 deletions
diff --git a/es-es/css-es.html.markdown b/es-es/css-es.html.markdown
deleted file mode 100644
index 6395f5fd..00000000
--- a/es-es/css-es.html.markdown
+++ /dev/null
@@ -1,253 +0,0 @@
----
-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.
-
-## Recursos
-
-* Para ejecutar un test de compatibilidad, revisa [CanIUse](http://caniuse.com).
-* CSS Playground [Dabblet](http://dabblet.com/).
-* [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS).
-* [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/).
-
-## Otras lecturas
-
-* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/).
-* [Selecting elements using attributes](https://css-tricks.com/almanac/selectors/a/attribute/).
-* [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)
-* [SASS](http://sass-lang.com/) y [LESS](http://lesscss.org/) para preprocesamiento CSS.
-* [CSS-Tricks](https://css-tricks.com).
-