mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-24 10:01:38 +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