Estilos en cascada(CSS)

En este capitulo y los siguientes te presentaré las hojas de estilos(CSS) ó estilos en cascada, con ellos podrás formatear el texto de forma más interesantes, dinámicas y extrañas.
Que son estilos ?
Los estilos como mencione son propiedades para formatear el texto más dinámicamente, la edición de un estilo se puede realizar de varias formas, una es incluir la etiqueta "STYLE" en el HEAD y dentro de ella crear un estilo con un identificador ó para alguna etiqueta en especial, la otra forma es hacerlo directamente en la etiqueta de forma similar al siguiente ejemplo:
< STYLE type="text/css" >

< STYLE >

< P STYLE="Aqui tus estilos" >
El primer tipo de estilo puedes indicar un estilo(ojo con el'type=text/css' este indica que tipo usarás, es muy importante que lo coloques entre los tags del STYLE) para todo el documento, puedes colocar varios de ellos, si existe conflicto entre los estilo el ultimo que coloques tendrá preferencia sobre los demás , los estilos se crean para etiquetas especificas pero también puedes crear un estilo para una etiqueta en especial, esto lo aprenderás más adelante, además puedes ahorrarte esfuerzo y crear un documento con la extensión 'css' por separado, de esta forma usando la etiqueta < LINK > puedes ahorarte el trabajo de copiar y pegar el estilo en todos los documentos , para ello debes primero definir tu estilo, en un editor de texto(como el Notepad) y salvarlo como *.css(estilo en cascada) , a la hora editar tu estilo no es necesario que coloques la etiqueta STYLE.
Ejemplo:

h1 {

color:red;

font-family:Fixedsys

}

Si lo linkeas en un documentos, al usar la etiqueta h1, el texto lucirá en color rojo y como Fixedsys como tipo de letra, así:

Estilo para h1

Para linkearlo usa:
<link rel = stylesheet type = "text/css" href = "estilo.css">
El segundo tipo es solo para la etiqueta en donde edites el style, por ejemplo si editas solo un párrafo solamente este párrafo tendrá el formato definido por el estilo y si creas otro párrafo necesitaras otro estilo para este, este tipo de estilo predomina al del HEAD.
Ahora para hacer un estilo necesitas conocer tanto los atributos y valores para estos que poseen los estilos, cada uno de los atributos va apartado del otro con un punto y coma " ; ", y el valor con dos puntos " : ".
Ejemplo:

<STYLE type="text/css" >

<!--

h3 {

background:silver;

color:red

}

-->

</STYLE >

El anterior ejemplo simplemente otorga un fondo silver y un color rojo para el texto entre las etiquetas h3, observa bien que primero coloco la etiqueta y después un corchete seguido de los estilos y el cierre del mismo.
Para lograr el mismo efecto de la otra forma, lo logras así:
<h3 STYLE="background:silver; color:red" >

Que tal te gusta como se ve.

Aquí tenes la todos los atributos de los estilos en cascada:

**Estilos**
Atributo	Descripción	Valores	Ejemplo
border- width	Ancho para el borde.	puntos (pt) pulgadas (in) centímetross (cm) pixels (px)	{border- width: 10pt;}
background	Imagen ó color de fondo para el estilo	Dirrección de la imagen o color.	{background: blue}
color	Color que tendrá	Para el color usa la tabla	{color: blue}
clear	Alineamiento	none, leftm right,both.	{clear :right}
float	Alineamiento	center,left, right, none.	{float :left }
font-size	Para indicar el tamaño de texto.	puntos (pt), pulgadas (in), centímetros (cm), pixels (px).	{font-size: 14pt}
font-family	Para indicar el tipo fuente	El nombre de la fuente.	{font-family: Comic Sans MS}
font-weight	Es el espesor de la fuente.	extra-light, light, demi-light, medium, demi-bold, bold, extra-bold.	{font-weight: extra-bold}
font-style	Convierte el texto a cursiva ó normal.	normal, italic ó small-caps, oblique.	{font-style: italic}
letter-spacing	Distancia que separa a las letras en el texto.	normal,puntos (pt) pulgadas (in) centímetros (cm) pixels (px) porcentaje (%).	{letter-spacing:10pt}
line-height	Establece la distancia entre líneas.	puntos (pt) pulgadas (in) centímetros (cm) pixels (px) porcentaje (%).	{line-height: 24pt}
margin-left	Márgen izquierdo de la página.	puntos (pt) pulgadas (in) centímetros (cm) pixels (px)	{margin-left: 15cM}
margin-right	Márgen derecho de la página	puntos (pt) pulgadas (in) centímetros (cm) pixels (px)	{margin-right: 1in}
margin-top	Márgen superior de la página.	puntos (pt) pulgadas (in) centímetross (cm) pixels (px)	{margin-top: 10in}
padding	Separadores para el borde.	puntos (pt) pulgadas (in) centímetross (cm) pixels (px)	{padding: 5pt;}
text-decoration	Subraya o remarca el texto.	none,italic,underline (subrayado), overline (línea por encima del texto), line-throught (tachado) y blink (parpadeo)	{text-decoration: italic}
text-align	Justificación del texto.	left, center, right, justify.	{text-align: right}
text-indent	Indentación del texto.	puntos (pt) pulgadas (in) centímetros (cm) pixels (px).	{text-indent: 0.5in}
text-transform	Formas para el texto	capitaliza, uppercase, lowercase, none.	{text- transform: uppercase;}
vertical-align	Alineación vertical	baseline, sub, super, top, text-top, middle, bottom, text-bottom, porcentaje(%)	{vertical-align :baseline}
word-spacing	Distancia que separa a las palabras del texto	normal,puntos (pt) pulgadas (in) centímetros (cm) pixels (px)..	{word-spacing:5pt}
white-space	Distancia para el espacio en blanco	normal, pre, nowrap	{white-space :pre }
width	Anchura	auto,puntos (pt) pulgadas (in) centímetros (cm) pixels (px).	{width :8pt }

[email protected]
atras Indice siguiente
Diseño de web Diseño de web

Hosted by www.Geocities.ws