¿Dónde se escribe?
Se puede escribir:
- En una hoja aparte (No lo vamos a ver, pero es igual)
- En el html, con la etiqueta <style>:
- Escribiríamos algo así:
- Mostrar/ocultar código
<html>
<head>
<style>
...el código CSS
</style>
</head>
<body>
...Contenido de la página...
</body>
</html> - En la misma línea de código (no es lo más ortodoxo, pero a veces es muy útil):
- Escribiríamos algo así:
- Mostrar/ocultar código
<div style="propiedad1:valor1; propiedad2:valor2;"></div>
¿Cómo se escribe?
Pues supongo que, si habéis visto el último cuadro de código, os haréis una idea.
Si escribimos en la misma línea, solo hace falta escribir las propiedades y sus valores (más adelante veremos las más importantes).
Si escribimos entre las etiquetas tenemos que seleccionar a qué queremos que se apliquen. Esto se hace así:
Mostrar/ocultar código
<style>
selector{
propiedad1:valor1;
propiedad2:valor2;
propiedad3:valor3;
}
</style>Los selectores:
Hay varios tipos de selector. Aquí solo vamos a ver los más importantes.
«etiqueta«: Si escribimos esto, estamos haciendo que afecte a todos los elementos con esa etiqueta. Así, si escribimos «p{propiedades y valores}» esas propiedades afectarán a todos los párrafos.
«.clase«: Si escribimos esto, hacemos que todos los elementos que tengan la clase indicada sean afectados. Por ejemplo, si escribimos «.miclase {propiedades y valores}», todos los elementos que tengan la clase «miclase» serán afectados por esas propiedades.
«#id«: Si escribimos esto, solo el elemento que tenga la id será afectado por esas propiedades. Así, si escribimos «#mi-id{…}» solo el elemento que tenga ese id será afectado.
Ejemplo básico de CSS:
Este será el código que usaremos:
Mostrar/ocultar código
<style>
p{
color:red;
}
.p-ejemplo{color:blue;}
#especial{color:yellow;}
</style>
<p>Soy un párrafo cualquiera</p>
<p class="p-ejemplo">Yo uso la clase "p-ejemplo"</p>
<div class="p-ejemplo">Yo también, aunque no soy un párrafo, soy un div</div>
<p id="especial">Yo tengo una id propia y por eso soy amarillo</p>Este será el resultado:
Mostrar/ocultar ejemplo
Soy un párrafo cualquiera
Bueno, vale por hoy, ¿no? Como siempre (aunque ya me harto de repetirlo), cualquier cosa, duda, comentario, sugerencia, lo que sea, estoy a vuestra disposición. Yo uso la clase «p-ejemplo»
Yo también, aunque no soy un párrafo, soy un div
Yo tengo una id propia y por eso soy amarillo