1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
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 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)
|
