Manual HTML de cx1ddr

ESTILOS DE PÁGINAS

Esto será lo último que deberemos diseñar en nuestras páginas, ya que el estilo que le demos a nuestras páginas, dependerá de la página en sí. Las hojas con estilo, se logran mediante la etiqueta <style> </style>, seguido del atributo TYPE,
<STYLE TYPE="text/css">, type en este caso, permite que los exploradores mas viejos que no soportan esta etiquetas, ignoren el estilo de la hoja. También se puede usar en combinación con la etiqueta <span> </span>
** Tanto STYLE como SPAN, van colocados entre las etiquetas <HEAD> </HEAD> **
Los parámetros de estas etiquetas son:

BORDER = Sirve para colocar un borde alrededor de los párrafos. Para ello se colocan códigos para cada uno de estos. Pudiendo ser los códigos: bordes superior, derecho, inferior e izquierdo (-left, -right, -top y -bottom), punteado(dotted), sólido(solid), bajorrelieve(inset), ninguno (none), doble(double), surco(groove), rugoso(ridge), altorrelieve(outset), rayado(dashed). Luego de esto se expresa el tipo de borde y por último el color, RGB(AAA,BBB,CCC), AAA,BBB,CCC, son números en cantidad de colores por cada uno y van desde 0 a 255 colores.
Veamos un ejemplo practico: {border-left: thick double rgb(64,120,85)}
El parámetro THICK, especifica el ancho, que puede ser: en pixeles(PX), delgado(THIN), medio(MEDIUM), grueso(THICK)

BACKGROUND = Con esté atributo, pondremos una imagen de fondo o un color de fondo a nuestros textos. Para establecer una imagen de fondo, pondremos {background: URL(email.gif)} y para un color de fondo {background: #9066AA}
Como ejemplo podrá ser así:
<P STYLE="background: URL(email.gif)"></P> Este texto tendrá una imagen de fondo hasta aquí</p>
<p>El texto siguiente, no tendrá imagen de fondo ya que esta limitada por la etiqueta P</p>

COLOR = Establece el color del texto, pudiendo ser en hexadecimal o usando los nombres en ingles del color, para ver los nombres del color vea el CAPITULO 2
Por ejemplo si lo queremos un color azul de texto, será {color: #0000FF} o puede ser también {color: blue}

FONT-FAMILY = Establece el tipo de fuente que se va a utilizar, puede usarse un tipo solo de fuente, o si quiere puede usar mas de una separadas de comas. Como ejemplo, pondré: {FONT-FAMILY: VERDANA, COMIC-SANZ, SANS-SERIF}
Pero si optamos por un solo tipo de fuente combinada, pondremos, {FONT-FAMILY: "COMIC SANS"}, si son fuentes simples seria, {FONT-FAMILY: VERDANA}

FONT-SIZE = Este establecerá el tamaño del texto, puede estar dado en centímetros(cm), puntos(pt), pulgadas(in) o pixel(px)
Por ejemplo si lo queremos en cms, será {font-size: 12cm}

FONT-STYLE = Se vera la letra del tipo itálica, pudiendo usar los parámetro, normal, oblique o italic. Como ejemplo, pondré: {FONT-STYLE: ITALIC}

FONT-WEIGHT = Va a establecer el espesor de la fuente, pueden ser usados los parámetros: extra-light, light, demi-light, medium, demi-bold, bold, y extra-bold.
Como ejemplo, pondré: {FONT-WEIGHT: BOLD}

LINE-HEIGHT = Si lo que busca es una separación entre lineas, utilice este comando.
Los parámetros usados para este son, centímetros(cm), puntos(pt), pulgadas(in), pixel(px) o en porcentaje(%). Como ejemplo, pondré: {LINE-HEIGHT: 30%}

MARGIN = Este atributo establece los márgenes en el ámbito de una etiqueta. Se pueden expresar en pulgadas, pixeles, centímetros o puntos. Los márgenes pueden ser, izquierdo (MAGIN-LEFT), derecho (MARGIN-RIGHT), o superior (MARGIN-TOP)
Como ejemplo, pondré: BODY {margin-top: 3in; margin-left: 0.3in; margin-right: 0.6in; margin-bottom: 1in}

TEXT-ALIGN = Este será el alineado del texto, sus parámetros son iguales a los que vimos en el alineado de los documentos, derecho (right), izquierdo (left), centrado (center) y justificado (justify). Como ejemplo, será: {TEXT-ALIGN: JUSTIFY}

TEXT-DECORATION = Este servirá para destacar un texto. Los parámetros usados para este son underline (subrayado), line-through (tachado), none (ninguno), italic (cursiva) overline (línea superior) y blink (texto parpadeante).
Como ejemplo, pondré: {TEXT-DECORATION: blink}

TEXT-INDENT = Con este podemos decirle al explorador que desplace la primera palabra del párrafo, tantos como lo deseamos. Este se puede expresar en centímetros, puntos, pulgadas y pixeles.
A termino de ejemplo: P {TEXT-INDENT : 0.8CM}
Este desplazara, 0.8 centímetros, del margen, el primer texto. Podrán ponerse valores negativos.

TEXT-TRANSFORM = Si deseamos transformar el texto, usaremos esta etiqueta. Los parámetros para esta son, capitalicé (Si usted esta escribiendo en minúscula, pone la primera letra de cada palabra en mayúscula), lowercase (pone todo el texto en minúsculas) y uppercase (pone todo el texto en mayúsculas)
Como ejemplo, pondré: {TEXT-TRANSFORM: lowercase}

Ahora bien, vamos a ver algunos ejemplos prácticos de cómo podemos introducir esta cantidad de etiquetas que hemos visto recién.
Si lo que queremos es englobar varias etiquetas en una sola deberemos utilizar la etiqueta <DIV>, pero si por el contrario lo único que queremos es englobar una sola etiqueta, utilizáremos la etiqueta <SPAN>.
Como hacer esto, bien veremos un ejemplo simple.
Coloque esto entre las etiquetas <body> </body>, ademas puede modificarlo como usted quiera, dando color, estilo, tipo de letras, etc, a gusto

<SPAN STYLE="font-size: 18pt; font-weight: medium; font-style: oblique; text-decoration: underline; font-family: Verdana; color: cyan">Mi primer SPAN </SPAN>

Mi primer SPAN (Este será el resultado)

<DIV STYLE="font-size: 16pt; font-weight: bold; font-style: italic; text-decoration: underline; font-family: Verdana; color: red">
<P>Acá veremos el estilo indicado arriba
<P>Igual que acá se lo ve
<P>Y este último que englobara a varias etiquetas
<DIV>

Acá veremos el estilo indicado arriba

Igual que acá se lo ve

Y este último, que engloba a varias etiquetas

Veamos ahora como introducirlo en una página la etiqueta <style>.
Para ello utilizábamos:

<html>
<head>
<style>
.Item {
cursor: hand;
font-family: comic sans ms; verdana;
font-size: 11;
font-style: normal;
color: blue
}
.Highlight {
cursor: hand;
font-family: comic sans ms; verdana;
font-size: 11;
font-style: italic;
color: red
}
<style>
<title>Prueba de estilo de las páginas</title>
</head>
<body>
<center>
</BODY>
</HTML>

Usaremos la misma etiqueta STYLE, pero variando los parámetros, aunque los resultados son parecidos, cambiara la los estilos de las páginas. Copie este código en el bloc de notas, guardelo como HTM y vera los resultados, o PULSE AQUÍ , para que vea como quedara la página con este estilo.

<HTML>
<HEAD>
<TITLE>Página con estilo</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>
<center>
<H1>Este es el encabezado primario</H1>
</CENTER>
<H2>Este es el encabezado de segundo orden</H2>
<H3>Por último, este es el encabezado de tercer orden</H3>
<P><BR>
<P ALIGN="CENTER">Esto es el texto que irá en la página</P>
<hr color=red>
<DIV STYLE="font-size: 14pt; color: blue">
<p>Este texto tiene 14 puntos de alto y color azul.
<p>Al igual que este otro
<p>¿Ve la diferencia entre Hx y DIV STYLE?
</div>
</BODY>
</HTML>

** Note que el estilo que se le dio a la página, esta entre las etiquetas <HEAD> </HEAD>, no lo coloque en otro lado por que esta no funcionara. **
** Después de la etiqueta <BODY>, se ponen los encabezados como se hace normalmente. **
También, se le incorpora la linea , para aquellos navegadores que no soportan estilo.
Copie el código al Bloc de notas, y pruebe vera que le agradara. O PULSE AQUÍ , para que vea como queda