20 noviembre 2010

CSS - Cascading Style Sheets

Las hojas de estilo en cascada, CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML.

La información de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style".

Formas de aplicar las reglas de estilo a una página Web:


Hoja de estilo externa, es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
<head>
<link rel="stylesheet" type="text/css" href="miestilo.css" />
</head>

Hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML. De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML propiamente dicho.
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Estilo en línea, que es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada.
<p style="color:sienna;margin-left:20px">Agregar un texto.</p>

Sintaxis


Propiedades CSS

Enseguida algunas de las propiedades que podemos cambiar con el CSS.

Backgrounds

Sirve para mostrar un color de fondo y/o una imagen de fondo.
body {
background-color:#b0c4de;
background-image:url('imagen.png');
background-repeat:no-repeat;
background-position:right top;
}
/*Forma abreviada*/
body {
background:#b0c4de url('imagen.png') no-repeat right top;
}

Text

Nos permite alinear el texto y transformar el contenido en mayúsculas, minúsculas o con letra capital.
body {color:blue;}
a {text-decoration:none;}
p.main {
text-align:left|right|center|justify;
text-transform:uppercase|lowercase|capitalize;
}

Fonts

Para elegir el tipo de letra, el estilo de la letra y su tamaño.
p {
font-family:"Times New Roman", Times, serif;
font-style:normal|italic|oblique;
font-size:14px;
}

Links

Los colores de los vínculos según sea uno visitado, cuando se pasa el ratón por encima o cuando esta activo.
a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}

Margin

Nos permite alinear contenido.
#nuevo {
margin-top:20px;
margin-bottom:60px;
margin-right:50px;
margin-left:30px;
}
/*Forma abreviada*/
#nuevo {
margin:20px 50px 60px 30px;
}

Padding

Alinear contenido con respecto a otro elemento.
#otro {
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
/*Forma abreviada*/
#otro {
padding:25px 50px;
}

Enlaces: Tutorial CSS

1 comentario: