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.