| |
|---|
|
|
Si lo que queremos es dar formato o redefinir una etiqueta HTML existente, usaríamos la sintaxis:
etiqueta {
estilo CSS 1;
estilo CSS 2;
...
}
En "etiqueta" pondríamos el nombre de la etiqueta (por ejemplo "h1", "p", etc. pero sin los signos < >) y los estilos que definirían esa etiqueta irían encerrados entre las llaves "{...}
Por ejemplo:
h1 {
estilo CSS 1;
estilo CSS 2;
...
}
En las hojas de estilo también se pueden escribir comentarios usando los símbolos: /* texto del comentario */. Pero es importante usar esta notación y no ninguna otra, ya que es la única soportada. A continuación se incluye un ejemplo con comentarios:
IR A PORTAFOLIO
/* Definimos el estilo de la cabecera principal */
h1 {
estilo CSS 1; /* Cambiamos el estilo de su... */
/* También cambiamos este otro estilo porque... */
estilo CSS 2;
}
También podemos redefinir varias etiquetas a la vez que compartirán los mismos estilos, separándolas por comas, de la forma:
etiqueta1, etiqueta2, etiqueta3 {
/* estilos CSS */
}
Imaginen por ejemplo que queréis cambiar el color de todas las cabeceras, lo podéis hacer a la vez escribiendo:
h1, h2, h3, h4, h5, h6 {
/* estilos CSS */
}
Otra opción interesante es definir el estilo de etiquetas "dentro" de otras etiquetas. Para esto tenemos que escribir primero la etiqueta contendora, seguida de un espacio y por último la etiqueta a definir. En este caso el estilo CSS solo se aplicará cuando la etiqueta definida se encuentre dentro de la etiqueta contenedora:
contenedor etiqueta {
/* estilos CSS */
}
Por ejemplo, una etiqueta <span> dentro de una sección <p>:
p span {
/* estilos CSS */
}
Este estilo solo se aplicaría cuando se encuentre la etiqueta <span> dentro de una sección <p> de la forma:
<p>
Párrafo de ejemplo donde
el estilo solo se aplicará sobre este texto
y no sobre el resto del texto.
</p>
Esta opción es muy útil pues nos permitirá definir diferentes estilos para la misma etiqueta dependiendo de donde se encuentre.
