mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-25 10:25:23 +00:00
[css/es] created
This commit is contained in:
Daniel Zendejas
parent
41406fdce6
commit
540dd89202
243
es-es/css-es.html.markdown
Normal file
243
es-es/css-es.html.markdown
Normal file
@ -0,0 +1,243 @@
|
|||||||
|
---
|
||||||
|
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"]
|
||||||
|
---
|
||||||
|
|
||||||
|
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 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/). El principal enfoque de este artículo es 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...*/ }
|
||||||
|
|
||||||
|
/* El selector es usado para apuntar a un elemento en la página.
|
||||||
|
|
||||||
|
¡Puedes apuntar a todos los elementos en la página! */
|
||||||
|
* { color:red; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
Dado un elemento como este en la página:
|
||||||
|
|
||||||
|
<div class='una-clase clase2' id='unaId' attr='valor' />
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* puedes seleccionarlo 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; }
|
||||||
|
|
||||||
|
/*y, más importante, puedes combinar estos criterios de búsqueda entre sí.
|
||||||
|
No debe existir ningún espacio entre estas partes porque hace que tenga otro
|
||||||
|
significado.*/
|
||||||
|
div.una-clase[attr$='or'] { }
|
||||||
|
|
||||||
|
/* También puedes seleccionar un elemento HTML basado 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 padres en un árbol*/
|
||||||
|
/* Lo siguiente básicamente significa que cualquier elemento que tenga una clase
|
||||||
|
"nombre-clase" y es 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)
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user