top of page

Aplicación en documento web

 

CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una página Web:

 

  1. Una hoja de estilo externa, esta 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.

  2. Una hoja de estilo interna, está incrustada dentro de un documento HTML (Dentro del elemento <head>). De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML se pierde. En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica específica una página Web.

  3. Un estilo en línea, que es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo al vuelo. No es todo lo claro, o estructurado, que debería ser, pero funciona. es necesario incluir el atributo STYLE.

 

 

 

Hoja de estilo interna

 

El siguiente código estará colocado en el head del archivo html.

 

<style>

body {

  background-color:#345485;

}

h1 {

  color:orange;

  font-family:'Times New Roman';

  text-align:center;

}

p {

  color:#E9EBAB;

  font-family:Arial,Helvetica,sans-serif;

  font-size:20px;

  text-align:center;

}

</style>

 

 

Externo (enlace a una hoja de estilo)

 

El método recomendado es enlazar con lo que se denomina hoja de estilo externa. A lo largo de este tutorial usaremos este método en todos nuestros ejemplos.

Una hoja de estilo externa es sencillamente un fichero de texto con la extensión .css. Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro.

Por ejemplo, digamos que tu hoja de estilo se llama style.css y está localizada en una carpeta que se llama style. Esta situación se puede ilustrar de la siguiente manera:

 

 

 

 

 

 

 

 

 

El truco consiste en crear un vínculo desde el documento HTML (por ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vínculo se puede crear con una sencilla línea de código HTML:

 

<link rel="stylesheet" type="text/css" href="style/style.css" />

 

Fíjate cómo la ruta a nuestra hoja de estilo aparece indicada por medio del atributo href.

 

La línea de código debe insertarse en la sección de encabezado del código HTML, es decir, entre la etiqueta <head> y </head>. De esta manera:

 

<html>

 <head>

<title>Mi documento</title>

<link rel="stylesheet" type="text/css" href="style/style.css" />

 </head>

 <body>

 ...

 

Este vínculo indica al navegador que debería usar la presentación del fichero CSS al mostrar el fichero HTML. Lo realmente bueno de este método es que se pueden vincular varios documentos HTML con la misma hoja de estilo. En otras palabras, se puede usar un único fichero CSS para controlar la presentación del muchos documentos HTML

 

 

 

 

 

 

 

 

 

 

 

 

 

Esta técnica puede ahorrarte mucho trabajo. Si quisieras cambiar, por ejemplo, el color de fondo de un sitio web compuesto por 100 páginas, un hoja de estilo puede ahorrarte el tener que cambiar de forma manual los 100 documentos HTML. Con CSS, el cambio se puede llevar a cabo en unos segundos modificando parte del código de la hoja de estilo principal.

 

Fijar una imagen de fondo

 

  • El atributo background nos indica la imagen que se usara de fondo (línea 2)

  • El atributo background-attachment en fixed fija la imagen al centro de la forma (línea 3).

 

body {

  background: transparent url('escudoITV.png')

              no-repeat center

              background-attachment: fixed;

}

h1 {

  color:red;

  font-family:'Times New Roman';

  font-size:24px;

  font-weight:bold;

  text-align:center;

}

h2 {

  color:blue;

  font-family:Verdana, Geneva, sans-serif;

  font-size:20px;

  font-weight:bold;

  text-align:center;

}

p {  

  color:black;

  font-family:Arial, Helvetica, sans-serif;

  font-size:18px;

  text-align:center;

}

 

Listas

 

Mejorar la estética de las listas con CSS es fácil.

  • Estilo de listas no ordenadas: square, circle, disc (por defecto), y none

  • Estilo de listas ordenadas: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (por defecto), y none.

Los elementos de las líneas 8 y 13 definen tags que se definen solo dentro del espacio del tag izquierdo.

 

Por ejemplo en la línea 8 se define el estilo de los parrafos dentro de las listas ordenadas.

Mientras que la línea 13 define el estilo de los elementos de las listas ordenadas.

A continuación se presentan varios ejemplos:

 

ol {

  font: italic 1em Georgia, Times, serif;

  list-style-position: inside;

  margin: 10px;

  padding: 10px;

}

ol.p {

  margin:0px;

  padding:3px 0px;

}

ol.li {

  background: #ffffff;

  margin-left:  40px;

  padding-left: 10px;

}

ul { 

  list-style-position: inside;

  list-style-type: circle;

}

 

 

En línea (el atributo style)

 

Un modo de aplicar CSS a HTML es usando el atributo de HTML style. Si ampliamos el ejemplo anterior sobre el color de fondo rojo, CSS se puede aplicar así:

 

<html>

 <head>

<title>Ejemplo</title>

 </head>

 <body style="background-color: #FF0000;">

<p>Esta es una página con fondo rojo</p>

 </body>

</html>

 

 

 

 

 

 

Bibliográficas electronicas 

 

 

Instituto Tecnologico de Veracruz

 

http://www.prograweb.com.mx/pweb/0306AplicacionCSS.php

 

 

 

 

cursos HTML+ CSS

 

http://www.laigu.net/wp-content/uploads/2009/08/Curso-HTML-%2B-CSS.pdf

 

 

 

 

Blog HTML.net

 

http://es.html.net/tutorials/css/lesson2.php

 

 

 

 

 

 

 

 

 

 

 

bottom of page