Estilos
Hay tres maneras de definir los estilos:
1. Se pueden declarar directamente sobre la etiqueta HTML:
<ETIQUETA style="propiedad:valor;....">... </ETIQUETA>
Por ejemplo, si a un párrafo le queremos dar un tamaño de fuente 10 y un margen izquierdo de 20 pts:
Ejemplo 1:
<P STYLE="font-size:10pt; margin-left:20pt;">
Mi Primer párrafo con Estilo
</P>
Mi Primer párrafo con Estilo
</P>
 |
2. Se pueden definir en su conjunto para toda la página HTML:
<STYLE TYPE="text/css">
<!-
......
etiqueta {propiedad:valor; .........}
......
-->
</STYLE>
<!-
......
etiqueta {propiedad:valor; .........}
......
-->
</STYLE>
Un ejemplo sería:
Ejemplo 2:
<HTML>
<HEAD>
<TITLE>Ejemplo CSS</TITLE>
<STYLE TYPE="text/css">
<!-
BODY {margin-left: 0.5in; margin-right: 0.5in}
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Titulo en azul</H1>
<P>Párrafo con letra 10</P>
</BODY>
</HTML>
<HEAD>
<TITLE>Ejemplo CSS</TITLE>
<STYLE TYPE="text/css">
<!-
BODY {margin-left: 0.5in; margin-right: 0.5in}
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Titulo en azul</H1>
<P>Párrafo con letra 10</P>
</BODY>
</HTML>
 |
3. Se puede especificar en un fichero externo.
Esta manera es la más flexible y recomendada, ya que el estilo asociado a una página HTML se puede cambiar sin modificar el código de dicha página y además la misma hoja de estilo se puede compartir con diferentes documentos. Para enlazar la hoja de estilo con una página HTML se puede utilizar la etiqueta LINK:<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="hoja_estilos.css">
</HEAD>
......
</HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="hoja_estilos.css">
</HEAD>
......
</HTML>
El fichero hoja estilos.css es un simple fichero de texto con extensión .css en el que se define la hoja de estilo.
/*Fichero hoja_estilos.css*/
BODY {margin-left: 0.5in; margin-right: 0.5in}
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
/*Fin del fichero hoja_estilo.css*/
BODY {margin-left: 0.5in; margin-right: 0.5in}
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
/*Fin del fichero hoja_estilo.css*/
La regla @import
La regla @import permite importar hojas de estilo desde otras hojas de estilo. Se puede usar de las siguientes formas:@import "hoja_de_estilo.css";
@import url("hoja_de_estilo.css");
@import url("hoja_de_estilo.css");
Orden de aplicación
Estos tres modos de definir estilos pueden convivir en la misma página html, pero si sobre un mismo elemento se han definido diferentes estilos, sólo se aplicará uno de ellos de acuerdo a las siguientes reglas, ordenadas de menor a mayor prioridad:
- Las definidas por el navegador
- Hoja de estilo externa
- Hoja de estilo interna (dentro de la etiqueta <head>)
- Directamente sobre la etiqueta HTML
Por ejemplo, una hoja de estilo externa tiene las siguientes propiedades para el selector h3:
h3 { color: red; text-align: left; font-size: 8pt }
Y una hoja de estilo externa tiene estas propiedades también para el selector h3:
h3 { text-align: right; font-size: 20pt }
Si la página con la hoja de estilo interna también está enlazada con la hoja de estilo externa, las propiedades para h3 serían:
color: red;
text-align: right;
font-size: 20pt
text-align: right;
font-size: 20pt
El color es heredado desde la hoja de estilo externa, y el text-alignment y el font-size son reemplazados por las de la hoja de estilo interna.
Consejo: Las dos últimas opciones son más recomendadas puesto que aportan claridad al código y facilitan el mantenimiento de las páginas en las que se incluyen los estilos.
Etiquetas: 2a Estilos
entrada de RICHARD JORGE MIRANDA ABARCA @ enero 15, 2010
