viernes, 26 de abril de 2013

Hoja de estilo externa

Las hojas de estilo externas (o conectadas) son las que mejor responden a las exigencias de los elaboradores y, sobre todo, las que interpretan mejor la filosofía de las hojas de estilo. Para comprender plenamente las peculiaridades de las CSS externas, pénsemos en un sitio de grandes dimensiones con 1000 páginas HTML y un cierto tipo de formatación del texto. De repente, exigencias estéticas imponen el cambio del color de fondo, el tipo de carácter y la alineación del texto. Por lo que hemos visto ahora, tenemos tres casos:

  • el sitio está construido en HTML clásico, por lo que deberemos intervenir en cada uno de los marcados de cada una de las 1000 páginas;
  • el sitio está construido adoptando hojas de estilo en línea, por lo que también en este caso deberemos intervenir en cada marcado de cada una de las 1000 páginas;
  • el sitio está construido con las hojas de estilo incorporadas, por lo que se deberá siempre modificar el encabezamiento de estilo de 1000 documentos, si bien no se deberá intervenir individualmente en los atributos de la página que permanecerán, así, inalterados.

    Aunque el último procedimiento limita en gran medida la mole de trabajo de actualización repecto a los dos primeros, se trata de intervenir, en cualquier caso, en un elevado número de documentos.
    La solución de este problema consiste en hacer que los estilos de cada marcador se recojan en un documento independiente de las restantes páginas, las cuales simplemente los invocarán con una sencilla línea de código. De esta manera, las modificaciones del archivo "centralizado" se extenderán automáticamente a todos los documentos que lo invocan. En este hecho obvio se basan las hojas de estilo externas que aquí examinamos.

    Crear una hoja de estilo externa e invocarla dentro de las páginas HTML es un procedimiento sencillo que consta de 5 fases:
  • abre una página sin ningún tipo de encabezamiento HTML con el bloc de notas de Win95-98 o con tu editor HTML e incluye dentro de ella el siguiente código:

    H1 { font-size:17px; font-family:verdana; color:green }
    H2 { font-size:18px; font-family:arial; color:red }
  • Si estás usando el bloc de notas de Win95-98 va a ARCHIVO / GUARDA COMO en la primera voz de menú arriba a la izquierda. Se abrirá una ventana con dos campos para rellenar: nombre archivo y guardar como. En el primer campo, introduce tu nombre style.css y en el segundo imposta como "todos los documentos". Para acabar, pulsa el botón "guardar".
  • Una vez creado el archivo style.css (.css es la extensión asignada a las hojas de estilo externas, mientras que el nombre "style" se puede cambiar por el que queramos, cópialo en la carpeta principal de tu sitio web.
  • Abre los documentos HTML de tu sitio e introduce, entre las marcas <HEAD> el siguiente código:

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

    La marca link identifica un archivo externo al documento HTML con el que, en cualquier caso, tiene una relación directa. El atributo rel indica que el archivo conectado es una hoja de estilo (stylesheet). href invoca el recorrido del archivo .css externo (en este caso el archivo entendemos que está depositado en la misma carpeta en la que se halla el documento HTML. De no ser así, debería insertarse el recorrido del archivo, p. ej.: href="css/style.css"). El atributo type tiene la función antes vista para las hojas de estilo incorporadas.
    •
  • Dentro del documento, identifica los estilos que deben asignarse usando las marcas <H1> y <H2>. Por ejemplo, <H1> podría establecer los títulos y <H2> el texto de las páginas de esta manera:

    <H1>Título de la página</H1>

    <H2>Texto de la página de prueba, Texto de la página de prueba, Texto de la página de prueba, </H2>
    • Publicado por en
    Etiquetas: ,

    No hay comentarios:

    Publicar un comentario

    Suscribirse a: Enviar comentarios (Atom)