Estilos N°3
Tips para los CSS
Un estilo para varias etiquetas:
H1, H2, H3, H4, H5, H6, BODY { color : red;background : silver }
De esta manera todas las etiquetas tendrán el mismo estilo, solo sepáralas con comas.
El problema de la anidación de etiquetas
El problema surge la colocar una etiqueta dentro de otra y ambas con estilos con el mismo atributo pero diferente
valor de esta manera:
H3 { color : blue } EM { color : red }
Y colocas el énfasis dentro de la etiqueta h3 el texto enfatizado combinara ambos colores.
<H3> <EM> Texto enfatizado </EM> en H3 </H3>
... se verá en verde y rojo el texto enfatizado. Para evitar este inconveniente,
agrega en el estilo:
H1 EM { color: blue }
Así cuando anides texto enfatizado en un h3 será todo de color azul.
La propiedad CLASS y ID:
Como antes te mencione puedes editar un estilo para ninguna etiqueta en especial
y usarlo en alguna cuando desees, para ello debes usar un identificador(alguna palabra 'no debes repetirla')
all.nombreid { atributos }
y después la usas con el atributo CLASS.
<p class=nombreid>texto</p> este texto tendrá los atributos del estilo para nombreid.
Otra forma de hacer lo mismo lo logras escribiendo.
#nombreid { atributos }
y después la usas con el atributo ID.
<p id="nombreid"> text </p>
Ojo que los puedes usar con cualquier etiqueta.
Otros usos para el atributo class son las clases reales, con ellas puedes crear
por ejemplo un estilo para todos los párrafos, pero quizás deseas que uno de ellos tenga
características diferentes, para ello crea una clase e invócala con class.
Ejemplo:
p { color:silver } /* Todos los párrafos con color silver */
p.rojo {color:red} /* Con color rojo */
p.azul {color:blue} /* Con color azul */
Después usa class para invocarlo:
<p>Este es un párrafo en plateado</p>
Este es un párrafo en plateado
<p class=rojo>Este es un párrafo en rojo</p>
Este es un párrafo en rojo
<p class=azul>Este es un párrafo en azul</p>
Este es un párrafo en azul
Tips para los hipervínculos.
Antes de darte los tips debes conocer el concepto de Pseudoclases:
La etiqueta <A> es la única que las contiene y con estas pseudoclases puedes crear efectos irregulares
a los definidos por el navegador para esta etiqueta.
Las pseudoclases de que disponemos para <a> son:
- link
Nos dice el estilo de un enlace que no ha sido visitado.
- visited
Nos dice el estilo de un enlace que ha sido visitado.
- active
Nos dice el estilo de un enlace que está siendo pulsado.
- hover
Nos dice el estilo de un enlace sobre el que está pasando el ratón
A: pseudoclase IMG { atributos }, para darle atributos a las imágenes que uses de link.
A.externo:visited { color: black }
<A class=externo HREF=""> un link visitado en negro.
A {text-decoration:none}, le quita el subrayado al link.
Otros tips
Un estilo solo para la primera línea, lo puedes usar en otras etiquetas, solo remplazadas por la 'p' del párrafo.
P: first-line { font-style: small-camps }
También para la primera letra:
P: first-letter { font-size: 220%; float: left }
Con el atributo background puedes usar otros valores:
transparent, tipo de repetición, posición, url(dirección)
Tipos de repetición:
- repeat-x (repetir horizontalmente)
- repeat-y (repetir verticalmente)
- no-repeat (no repetir)
- repeat (repetir horizontal y verticalmente), que es el valor por omisión.
Además puedes mezclar colores, H1 { background : yellow / green }
Ejemplo:
BODY { background: url( nubes.gif ) 50% repeat-x fixed red/blue }
[email protected]
atras Indice siguiente