De igual forma que se pueden definir hojas de estilo, podemos utilizar el atributo style de cualquier etiqueta HTML para definir un estilo que le será aplicado solamente a ella. Esta aproximación puede ser útil en situaciones en que necesitemos utilizar un estilo en un sitio y no sea necesario volver a utilizarlo. Sin embargo, en general, es mejor definir todos los estilo usados en un documento en un único lugar. Así es más fácil realizar modificaciones en su estilo sin tener que recorrerlo. Si se necesita hacer algún cambio sólo es necesario hacerlos una vez y el cambio automáticamente se aplica a todo el documento. A veces, sin embargo, se necesita especificar el estilo de un elemento y la forma más fácil de hacerlo es mediante el atributo style. En el ejemplo se especifica un estilo para el elemento <p>. También se muestra el uso de <span> para aplicar un estilo a varios elementos.
Sintaxis CSS
<p style="color: green; font-weight: bold; margin-right: 20%;
margin-left: 20%; border-width: 2pt; border-color: blue;">
Este párrafo, y sólo este párrafo, es verde, esta en negrita y tiene un borde azul.
</p>
<p>
Este párrafo es del color habitual, pero esta <span
style="color: red; font-style: italic;">palabra</span> es diferente al resto.
<p>
Sintaxis JavaScript
<p style="color = 'green'; fontWeight = 'bold';
marginRight = '20%'; marginLeft = '20%';
borderWidth = '2pt'; borderColor = 'blue';">
Este párrafo, y sólo este párrafo, es verde, esta en negrita, tiene unos grandes márgenes y un borde azul.
</p>
<p>
Este párrafo es del color habitual, pero esta <span
style="color = "red"; fontStyle = "italic";">palabra</span>
es diferente al resto.
<p>
Resultado del ejemplo
Este párrafo, y sólo este párrafo, es verde, esta en negrita,
tiene unos grandes márgenes y un borde azul.
Este párrafo es del color habitual, pero esta palabra es diferente al resto.
Combinando Hojas de Estilo
Se puede utilizar más de una hoja de estilo para fijar las características de un documento. Esto es deseable si se tienen varias hojas de estilos parciales, de forma que cada una de ellas define diferentes estilos. Supongamos, por ejemplo, que estamos escribiendo un informe sobre los beneficios de un producto de red de una compañía llamada RAD’s. Puede que se necesite usar tres hojas de estilo: una definiendo el estilo habitual de los informes, otra que defina el estilo de los productos de red, y otra que defina el estilo de la compañía RAD’s. El siguiente ejemplo muestra el uso de varias hojas de estilo en un mismo documento.
<style type="text/css"
src="http://www.rads.com/estilo/empresa"
</style>
<style type="text/css"
src="estilos/informe"
</style>
<style type="text/javascript"
src="estilos/redes"
</style>
<style type="text/css"
h1 {color: red;}" /* tiene preferencia sobre las hojas externas */
</style>
Entre las hojas de estilo externas, la última tiene precedencia sobre las demás. Así, en caso de conflicto, se escoge el estilo de la última hoja de estilo especificada. Los estilos definidos para elementos individuales tienen precedencia sobre los definidos en el elemento <style> y sobre los definidos en las hojas externas. En general, los estilos locales se sobreponen a los generales, como se muestra en el siguiente ejemplo.
Sintaxis CSS
<style type="text/css">
p {color: white;}
b {color: green;}
</style>
Sintaxis JavaScript
<style type="text/javascript">
tags.p.color = "white";
tags.b.color = "green";
</style>
Uso de la hoja de estilo
<p>Tal y como debería ser este párrafo es de color blanco, <b>y esta parte en negrita es de color verde</b></p> <p style="color: yellow;">Este otro párrafo no es de color blanco, <b style="color: red;"> ni esta parte en negrita es de color verde</b>, porque se ha usado style para cambiarles el color.</p>
Resultado del ejemplo
Tal y como debería ser este párrafo es de color blanco, y esta parte en negrita es de color verde
Este otro párrafo no es de color blanco, ni esta parte en negrita es de color verde, porque se ha usado style para cambiarles el color.
No hay comentarios:
Publicar un comentario