El Poder de las Hojas de Estilo (Cascading Style Sheets) para Reescribir la Web a su Modo

 <°){{{{>< 

Las Hojas de Estilo (Cascading Style Sheets=CSS) no sólo permiten al diseñador de páginas web manejar la presentación del documento sino que también son una poderosa herramienta para el usuario de Internet que se interesa más en buscar información que en el diseño de los sitios o que por alguna dificultad (mala vista, bajor recursos en su PC) necesita ver las páginas de una cierta manera.

Las CSS permiten separar (con sus ventajas y dsventajas), el diseño de la estructura de la página web.

Las instrucciones de estilo (CSS) se pueden o bien colocar en la parte HEAD (ya sea ecritas o con un link a un archivo terminado en .css que es un simple archivo de texto) o en cada elemento del BODY. la prioridad en orden de importancia para definir la presentación en caso de que se use más de un tipo es: documento, HEAD, link.

Ahora, lo que nos interesa aquí es mostrar que ciertos navegadores permiten usar una CSS definida por el usuario.

Uno de los mejores navegadores para esto es Opera ya que permite activarlas o desactivarlas mediante un botón en la ventana de navegación:
File:/Preferences/Documents/UserCSS
En Internet Explorer:
Propiedades de Internet/General/Accesibilidad/Hojas de Estilo del Usuario

En cada uno de los casos debe definir el lugar donde está su archivo .css

La forma más fácil de confeccionar su archivo .css es modificando uno que le haya gustado. Más abajo encontrará links a programas que facilitan su confección.

Para probar puede copiar este ejemplo en notepad y guardalo como nombre.css

--- copiar y pegar sin esta línea ---
/*esto es un comentario*/
/*http://www.netnormal.com/users/danielg/estilocss.html*/
P  {}

H1  {}

H2  {}

H3  {}

A: Link {
	color : #0000FF;
	text-decoration : underline;
}


A:Visited  {text-decoration: line-through;
	color : #FF0000;}

A:Active  {text-decoration : underline;
	color : #FF0000;
}

A:Hover  {
	text-decoration : none;
	color : #FFFFff;
	background-color : #00ff00;
}

BODY  {
	color : #000000
	font-size : medium;
	font-family : Arial;
	font-weight : normal;
	font-style : normal;
	background-color : #ffffff;
		text-decoration : none;
	text-align : left;
}

A:link IMG, A:visited IMG {border: 2px solid blue !important;}
A:hover IMG {border: 2px solid red !important;}
TABLE {border: 1px solid purple !important;}

--- copiar y pegar sin esta línea ---

En este caso el borde de las tablas está definido en 1 pixel para apreciar el diseño pero para el uso habitual puede fijarlo en 0. Hay otros elementos que no están definidos (P, H1, etc).

Si desea que todos los elementos deben tener fondo blanco y texto en negro (cosa muy útil cuando las páginas tienen malas ccombinaciones de colores) escriba:
* {background: white; color: black;!important}

Aquí hay una serie de CSS para Opera listas para bajar y usar.

Con las CSS se pueden controlar cómo se muestran las imágenes (no la carga) y los frames internos o iframe.

El programa gratuito Proxomitron también permite usar una CSS definida por el usuario (además de muchos otros tipos de filtros y reescritura de páginas) y funciona con cualquier navegador. En este caso deberá agregar un filtro en la parte de Web Page Filters:
Este es un ejemplo, bastante modificado de un original de Homeric:

Name = "CSS modificada de Homeric http://pagina.de/danielg (o lo que quiera)"
Active = TRUE
Limit = 256
Match = "<start>"
Replace = "\r\n <style type="text/css"> \r\n"
          ""
          "P  {}\r\n"
          ""
          "H1  {}\r\n"
          ""
          "H2  {}\r\n"
          ""
          "H3  {}\r\n"
          ""
          "A: Link {"
          "	color : #0000FF;"
          "	text-decoration : underline;"
          "}\r\n"
          ""
          ""
          "A:Visited  {text-decoration: line-through;"
          "	color : #FF0000;}\r\n"
          ""
          "A:Active  {text-decoration : underline;"
          "	color : #FF0000;"
          "}\r\n"
          ""
          "A:Hover  {"
          "	text-decoration : none;"
          "	color : #FFFFff;"
          "	background-color : #00ff00;"
          "}\r\n"
          ""
          "BODY  {"
          "	color : #000000"
          "	font-size : medium;"
          "	font-family : Arial;"
          "	font-weight : normal;"
          "	font-style : normal;"
          "	background-color : #ffffff;"
          "		text-decoration : none;"
          "	text-align : left;"
          "}\r\n"
          ""
          "A:link IMG, A:visited IMG {border: 2px solid blue !important;}\r\n"
          "A:hover IMG {border: 2px solid red !important;}\r\n"
          "TABLE {border: 0px solid purple !important;}\r\n"
          "</style> \r\n"

Esto debe pegarlo en la sección [Patterns] del archivo default.cfg de Proxomitron o introducir los valores sin "" a través de la interface del programa. para esto agregue:

Filter Name:CSS modificada de Homeric http://pagina.de/danielg (o lo que quiera)
Byte limit: 256
Matching expression:<start>

Replacement text:

\r\n<style type="text/css"> \r\n

P  {}\r\n

H1  {}\r\n

H2  {}\r\n

H3  {}\r\n

A: Link {
	color : #0000FF;
	text-decoration : underline;
}\r\n


A:Visited  {text-decoration: line-through;
	color : #FF0000;}\r\n

A:Active  {text-decoration : underline;
	color : #FF0000;
}\r\n

A:Hover  {
	text-decoration : none;
	color : #FFFFff;
	background-color : #00ff00;
}\r\n

BODY  {
	color : #000000
	font-size : medium;
	font-family : Arial;
	font-weight : normal;
	font-style : normal;
	background-color : #ffffff;
		text-decoration : none;
	text-align : left;
}\r\n

A:link IMG, A:visited IMG {border: 2px solid blue !important;}\r\n
A:hover IMG {border: 2px solid red !important;}\r\n
TABLE {border: 0px solid purple !important;}\r\n
</style> \r\n

Como dijimos Proxomitron permite definir muchos tipos de reglas de filtrado y reescritura.

A veces se usa !important para que el estilo predomine sobre otros. Ej.:text-decoration : underline !important;

Para aprender sobre CSS:
http://www.htmlhelp.com/es/reference/css/ Hojas de estilo en cascada, completo manual en Español
http://www.wmaestro.com/webmaestro/docs/indice.html Tutorial sobre HTML en Español. Excelente, encontrará una sección sobre CSS
http://www.wmaestro.com/webmaestro/misc/webmaest.zip El mismo en formato text en pequeño zip
http://www.w3.org/TR/REC-CSS2
http://www.oreillynet.com/pub/a/network/2000/07/21/magazine/css_anarchist.html

Programas para editar CSS:
Cualquier editor de texto.
Notetab Light (gratis). Tiene que bajar los acrhivos auxiliares sobre CSS.
TopStyle (gratis). Editor de CSS.
 

Por favor complete la Encuesta, sólo le tomará segundos. Gracias.

TOP

Página creada el 08/01/2000
Puede pedir aviso de actualización de esta página por email
URL: http://www.netnormal.com/users/danielg/estilocss.html