M�todos Avanzados / Incluyendo las Reglas de CSS

Incluyendo las Reglas de CSS
(Including CSS Rules)

Existen tres maneras en que le puedes a�adir capasidades de estilo a una p�gina.   Cada m�todo provee un grado diferente de acceso.  Puedes:

  1. a�adir una regla de css dentro de una etiqueta sola; entonces la regla solo aplica al instante de la etiqueta

  2. poner una regla en el encabezado de la etiqueta  <head> de una p�gina; entonces la regla puede aplicar a la p�gina completa

  3. poner una regla en un archivo externo; entonces la regla puede aplicar a p�ginas m�ltiples (hasta una direcci�n completa en la red)

M�todos 2 y 3 nos permiten crear una nueva versi�n por "omisi�n" ("default") de la etiqueta, para una p�gina o un conjunto de p�ginas, respectivamente. M�todo 1 es el mas usado para imponerse sobre una de �stas nuevas casos por omisiones (defaults) individualmente, ya sea para regresar a la versi�n de la etiqueta original del navegador por omisi�n o para crear una versi�n de etiqueta para usarse unal sola vez. Ahora vamos a ver algunos ejemplos de cada uno de �stos enfoques.

M�todo 1:
Aplicando una simple Regla se CSS Dentro de una simple Etiqueta de HTML
(Applying a Single CSS Rule Inside a Single HTML Tag)

En un extremo de accesibilidad de CSS, podemos colocar que una regla aplique a un solo instante de una etiquet. Podemos hacer esto a�adiendo una regla de CSS dentro de una etiqueta en particular para provocar el efecto que deseamos.

Por ejemplo, supongamos que hemos usado m�todo 2 � 3 (en un momento sabremos como hacerlo) para crear una versi�n nueva por omisi�n de la etiqueta <h3> que tiene las caracter�sticas mostradas en nuestro ejemplo anterior: un rojo oscuro (cc0000) resombreado sans-serif font at 16pt. Pero ahora, por alguna raz�n, decidimos que queremos una etiqueta  <h3> en una de las p�ginas para mostrar el encabezado en verde oscuro (00cc00) en letra cursiva.

Siempre nos queda pasar por el procedimiento que ten�amos que usar antes de la disponibilidad de p�ginas estilizadas: usa la etiqueta del tipo de letra   <font> para especificar todoas las caracter�sticas que deseamos para este encabezado en particular (y a�adir <p> despu�s del encabezado). Pero ahora, desde que hemos usado las p�ginas estilizadas para crearuna nueva versi�n por omisi�n de <h3> tambi�n podemos usar CSS para solamente modificar aquellas propiedades de la nueva omisi�n que deseamos cambiar para este encabezamiento en particular: Logramos esto a�adiendo CSS para redefinir estas propiedades dentro de la etiqueta que deseamos modificar.

     
<h3 style="font-style: italic; color: #00cc00;">     
H3 Heading in Green Italics     
</h3>

Nota que a�adimos la regla de CSS a una etiqueta cuando introducimos un atributo nuevo a la etiqueta: estilo. El valor que le damos a este atributo is simplemente la lista de nuevas definiciones que le queremos proveer para la etiqueta <h3> para que pueda sobrepasar las propiedades de su propia omisi�n. Principalmente, inclu�mos estilo de letra: cursivo para poner el encabezado en cursivo e incluimos color: #00cc00 para hacer el encabezado verde oscuro. Cada definici�n consiste en el nombre de la propiedad a ser definida y el valor definido a la propiedad.                       

La propiedad y el valor son separados por una coma. Definiciones consecutivas en una regla son separadas por ; .  La regla completa (i.e., el valor asignado al estilo de la etiqueta se encierra en ? (signo de pregunta). He aqu� la regla en acci�n: Example 2.

M�todo  2:
A�adir reglas  CSS en las p�ginas HTML donde son utilizadas
Ahora veremos como modificar un p�gina HTML sencilla  de manera que las 6 reglas css mencionadas previamente creen versiones nuevas de  las etiquetas  <h1>,..., <h6>  en esta p�gina.  S�lo tenemos que a�adir la etiqueta de  <head> en nuestra p�gina: 

     
<style type="text/css">     
<!--    
h1 {font-family: Arial, Helvetica, sans-serif;      
    font-size: 24pt; font-weight: bold; color: #cc3300}     
h2 {font-family: Arial, Helvetica, sans-serif;      
    font-size: 18pt; font-weight: bold; color: #cc3300}     
h3 {font-family: Arial, Helvetica, sans-serif;      
    font-size: 16pt; font-weight: bold; color: #cc3300}     
h4 {font-family: Arial, Helvetica, sans-serif;      
    font-size: 14pt; font-weight: bold; color: #cc3300}     
h5 {font-family: Arial, Helvetica, sans-serif;      
    font-size: 12pt; font-weight: bold; color: #cc3300}     
h6 {font-family: Arial, Helvetica, sans-serif;      
    font-size: 10pt; font-weight: bold; color: #cc3300}    
-->    
</style>

Nota que solo son las 6 reglas css, definidas anteriormente y ahora incluyen  <style> and </style>.  Tambi�n  <style> tiene atributo: type="text/css" Este atributo identifica el tipo de hoja de estilo que ha sido especificada (como mencionados anteriormente , existen otros tipos de hojas de estilo que pueden caer en forma de cascada pero este tipo alternativo no tienen mucho apoyo). Incluir esta informaci�n probablemente no sea tan necesaria para los navagadores m�s nuevos; estos navegadores pueden determinar el tipo correcto de hoja de estilo tomando en cuenta la sintaxis de la regla. Probablemente, haci�ndolo as� sea una buena idea, ya que podr�a ayudar (ver pr�ximo p�rrafo). Incluir el atributo puede ayudar a las personas a examinar esta parte de la codificaci�n de html de tu p�gina.

Nota que tambi�n hemos incluido las sies reglas contenidas dentro de un comentario de HTML (justo dentro de <style> y </style>). No es absolutamente necessario que tu hagas esto, pero ser�a bueno. Esto tambi�n asegurar�a que navegadores mas obsoletos, que no son de clase css no veran (y posiblemente intente mostrarlas literalmente) las reglas css.

He aqu� otras formas de ver las reglas en acci�n: Example 1. Despu�s de oprimir este enlace, usa tu navegador para hojear la fuente de la p�gina subiendo a tu nueva ventana. Observa como los encabezamientos de las secciones swon producidas en �sta p�gina: ninguna etiquetas <font>, solamente las etiquetas <h1>,..., <h6>. Tambi�n nota que las seis reglas css creando la nueva versi�n est�n ubicadas en la p�gina <head>.

Nota que hemos incluido las reglas de css que "reconfigura" las etiquetas <h1>,..., <h6>, entonces, cada vez que usemos la versi�n por omisi�n de una de �stas etiquetas en �sta p�gina, los encabezamientos se producir�n de acuerdo con las especificaciones de �stas reglas. (Aun podemos imponernos sobre las nuevas especificaciones, caso por caso si lo deseamos.)

M�todo 3:Ubicando las Reglas de css en un archivo externo
(Method 3: Putting CSS Rules in an External File)

En vez de poner las reglas de css en el encabezamiento de la p�gina donde queremos versiones nuevas de etiquetas para usarse, podemos poner las reglas de css en un archivo separado y despu�s referirnos al ese archivo en la p�gina donde deseamos usar las nuevas versiones de etiquetas. (Lo llam�mos un archivo externo, porque ahora las reglas est�n ubicadas fuera de el archivo conteniendo el HTML que ser� afectado por las reglas.)

Una ventaja de �sta forma es que podemos referirnos al archivo de las reglas de css en un sin n�mero de p�ginas de HTML. Esto nos permitir� aplicar un conjunto de etiquetas costomizadas uniformes a un grupo entero de p�ginas (a�n a una direcci�n de la red entera si lo deseamos.). En adici�n, si mas tarde necesitas reconfigurar tus etiquetas costomizadas, todo lo que necesitas hacer es hacer los cambios que desees a las reglas de css en un solo lugar: solo edita las reglas en el archivo externo. Despu�s ol�!, todos los encabezamientos hechos a la medida y/u otras etiquetas autom�ticamente se actualizar�n en todas las p�ginas HTML que se refieran al archivo externo.

El formato del archivo externo es bien simple: es simplemente una lista de reglas css para las etiquetas que deseamos definir. Si deseas, puedes incluir comentarios css para ayudarte a recordar para que son las reglas, como deseas usarlas, etc. En el archivo externo la lista de reglas NO debe estar encerrada en una etiqueta de <estilo> o en un comentario HTML. De hecho, no debieras incluir ninguna etiqueta HTML en el archivo externo css.

Puedes incluir un comentario de una sola l�nea en un archivo css precediendo al comentario con dos forward slashes //. Puedes incluir comentarios multilineares poniendo /* al principio del comentario y */ al final. Si utilizas comentarios multilineas, procura usar los s�mbolos de comienzo y despedida en pares. Si comienzas un comentario y olvidas los s�mbolos en cada extremo, probablemente las cosas no trabajar�n como lo intentas.

a los archivo externos de css les puedes dar cualquier nombre legal en la computadora donde el estilo de la hoja ser� usada. Es probablemente buena idea a�adir una extensi�n .css al nombre del archivo; �sto te ayudar� a recordar el prop�sito del archivo. La extensi�n .css no es un requisito para los archivos de hojas de estilo externo funcionen.

Conectando un Archivo Externo CSS a una P�gina de HTML
(Connecting an External CSS File to an HTML Page)

En teor�a, existendos maneras que una �gina de HTML pueda referise a un archivo externo que contenga definiciones CSS: el archivo HTML puede 1) hacer un enlace al archivo de CSS o 2) puede importar el archivo css. Aunque ,en pr�ctica, importar a�n no es apoyado ampliamente por navegadores existentes, as� que no hablaremos ampliamente de eso en �ste momento.

Enlazando un archivo HTML a un archivo externo css es bien simple: solo tienes que incluir una etiqueta de <link> en el encabezamiento del archivo HTML. La etiqueta <link> tiene trea atributos, dos de las cuales siempre son las mismas (asi que puede pensar en ellas como parte del boilerplate para la etiqueta). El tercer atributo da el nombre del archivo externo a ser enlazado. Por ejemplo, para enlazar un archivo HTML a un conjunto de reglas css definidas en un archvio llamado, stylefile1.css, usar�s una etiqueta de enlace con los siguientes atributos:

rel=stylesheet (siempre el mismo)

type="text/css" (siempre el mismo; y opcional)

href="stylefile1.css"

Esta p�gina se enlaza a las reglas del archivo de estilo de un archvio externo: Example 3. Y he aqu� la etiqueta de enlace el ejemplo HTML que contiene la p�gina:

 

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

 

En �ste caso el archivo externo stylefile1.css est� en el mismo cartapacio que el archivo HTML que se est� enlazando. Si estos archivos est�n en cartapacios diferentes, el valor asignado a href debe incluir no solo el nombre del archivo css sino su localizaci�n (pasillo) relativo al archivo HTML.

Atajo: Eliminando Repetici�n de Reglas
(A Shortcut: Eliminating Repetition in Rules)

Probablemente has notado que nuestras reglas (anteriormente mencionadas) para las etiquetas <h1>,... ,<h6> hay mucha repetici�n. Todas las etiquetas est�n definidas para usarse con el mismo tipo de letra, peso, y color; las �nicas diferencias en �stas reglas son el tama�o. En casos como �ste realmente no necesitamos repetir todas las definiciones que son las mismas en cada regla. De vez podemos usar una sola regla para preparar las caracter�sticas comunes de varias etiquetas y despu�s usar reglas adicionales para etiquetas individuales para especificar solamente los caminos que deseamos que las etiquetas difieran. He aqu� un caso en que obtenemos los mismos resultados que antes pero con un conjunto mas compacto de reglas: Example 4. . Y ahora he aqu� reglas nuevas mas complicadas:

h1, h2, h3, h4, h5, h6
{font-family: Arial, Helvetica, sans-serif;
font-weight: bold; color: #cc3300}
h1 {font-size: 24pt;}
h2 {font-size: 18pt;}
h3 {font-size: 16pt;}
h4 {font-size: 14pt;}
h5 {font-size: 12pt;}
h6 {font-size: 10pt;}

Nota que para tener un conjunto de etiquetas gobernada por las mismas reglas debemos enumerar todas las etiquetas en listas, separadas por comas, al principio de cada regla, simplemente fuera de los par�ntesis.