7.8 KiB
| language | filename | contributors | translators | lang | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| css | learncss-es.css |
|
|
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. Este artículo se enfoca, principalmente, en la sintaxis y consejos generales.
/* ¡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.
<!-- 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:
/*A*/
p.clase1[attr='valor']
/*B*/
p.clase1 {}
/*C*/
p.clase2 {}
/*D*/
p {}
/*E*/
p { propiedad: valor !important; }
Y el siguiente HTML:
<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.
Etiene la preferencia más elevada gracias a la palabra!important.
Es recomendado evitar esto a menos que sea estrictamente necesario incluirlo.Fle sigue, porque es estilo incrustado directamente en el HTML.Ale sigue, porque es más específico que cualquier otra opción.
más específico = más especificadores. Aquí hay tres especificadores: elementop+
nombre de la claseclase1+ un atributoattr='valor'Cle sigue. Aunque tiene el mismo número de especificadores comoB
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 es una excelente referencia para esto.
Recursos
- Para ejecutar un test de compatibilidad, revisa CanIUse.
- CSS Playground Dabblet.
- Mozilla Developer Network's CSS documentation.
- Codrops' CSS Reference.