|
Guía |
||||||
|
Hojas de Estilos CSS
Hojas de Estilos CSS Las hojas de estilo CSS permiten definir una serie de estilos, para luego aplicarlos a una página HTML, o incluso a un grupo determinado de páginas Web. Con las hojas de estilo CSS se puede:
Los estilos se definen de la siguiente manera: <style type="text/css"> Por ejemplo: <style type="text/css"> En este ejemplo todos los hipervínculos no visitados (A:link) aparecerán en negrita (bold) y en azul (blue). Dónde definir las hojas de estilo Los estilos se pueden definir en el encabezado de la página HTML (entre las etiquetas <head> y </head>) o en un archivo externo que llevará la extensión “.css”. El beneficio de utilizar un archivo externo, es que éste permitirá el uso de las definiciones de estilo, definidas en él, en todas las páginas que lo referencien. De esta forma, si se debe hacer algún cambio en el estilo de una o más páginas que se vinculan con un mismo archivo externo css, sólo se tiene que hacer la modificación en un único archivo (el CSS). Cabe destacar que las hojas de estilo CSS no solo funcionan para dar formato al texto, sino también a las tablas, a las listas y a los párrafos entre otros. Formas de definir los estilos Existen varias maneras de definir estilos CSS, ya sea tanto para redefinir las etiquetas standard como para crear nuevos estilos; a continuación se describirán algunas de ellas: • Definiéndolos y aplicándolos para
determinadas etiquetas en todo el <style type="text/css"> En este caso H1 es la etiqueta del Titular de mayor tamaño (encabezado
1) y cada vez • Estilos "in line", cuando solo se utilizarán
una vez y por esta razón se los <p style="color:blue; background:lightblue;
font-weight:bold"> En este caso, el estilo se está aplicando a un párrafo. • Como clases de estilos: Se pueden crear clases de estilos propios, en las etiquetas a aplicar. Para crear una clase, el nombre debe comenzar con un punto y no puede contener caracteres como acentos o eñes. <stile type="text/css"> Para aplicarlo al cuerpo del documento (etiqueta <body>), se debe utilizar el atributo class: <body class="TextoArial"> Una clase se puede aplicar a distintas etiquetas de HTML: P{font-family:arial; color:blue} Y se aplica de la siguiente forma: <P>Parrafo con letra ARIAL y color azul</P> • También se pueden utilizar identificadores cuando se quiere aplicar un estilo a uno o a varios elementos, los cuales pueden haberse definido con anterioridad o no por lo que se pueden hacer modificaciones y excepciones. Se los define con el signo de numeral (#) <style type="text/css"> Para utilizarlo, por ejemplo en una celda, se aplica el atributo id: <td id="resaltado">Ocupación</td> <td>Estudiante de Ingeniería</td> En esta tabla, se aplica el formato definido para la etiqueta <table> y en la primera celda se aplica un identificador para aumentar el tamaño del texto y pasarlo a negrita. Vínculos de hojas de estilo externas Es posible crear una sola hoja de estilos CSS global y guardarla en un archivo con extensión CSS, para que pueda ser vinculada a una o más páginas HTML. Para crear esta hoja de estilos se puede utilizar cualquier editor de texto, como el Block de notas o Note Pad de Windows, y guardarla con la extención: .css (ejemplo:"estilos.css"). Para realizar el vínculo se debe colocar el siguiente código en la sección <head>: <link rel="stylesheet" type="text/css" href="estilos.css"> En el atributo href, se coloca la ubicación del archivo css. Así, todas las páginas que lleven el link a la hoja de estilos (en nuestro ejemplo “estilos.css”), utilizarán el mismo formato y si de precisar hacer algún cambio, solo se debe modificar el archivo css correspondiente. Estilos para los links Un formato comúnmente visto, es que los hipervínculos cambien de color y forma al pasar con el puntero del mouse por encima. Esto se logra definiendo el estilo de la etiqueta hipervínculo <a>: • a:link: estilo que asume el link común. Algunas propiedades: textdecoration: none: Los links se presentarán sin subrayado, Ejemplo <style type="text/css"> Comentarios Las hojas de estilo en cascada facilitan la tarea de formatear el documento, siempre y cuando sean bien planificadas y organizadas.
Herramientas Generador de estilos de texto, campos y botones. Para abrirla hacer clic aquí Generador de estilo para links. Para abrirla hacer clic aquí |
||||||
|
Técnica Administrativa, Buenos Aires http://www.cyta.com.ar - |
Guía de Hojas de estilo |
|||||
|
Abril del 2005 |
||||||