CSS ("Cascading Style Sheets") es una metodología para dar uniformidad al uso de tags en documentos HTML, como habrá notado en las secciones anteriores de la guia rápida, el agregar atributos a cada Tag HTML puede ser un proceso mecánico. Imagínese que desee centrar todas las celdas (<td> ) en un documento o en todo un sitio, seguramente el agregar align="center" a todos los elementos <td> sería un proceso muy tediosos, y es precisamente a través de CSS ("Cascading Style Sheets") que se facilitan este tipo de tareas.
El nombre Cascading (En Cascada) tiene sus raíces en el funcionamiento de las mismas, ya que es posible definir uniformidades en tres distintos puntos de un documento :
<style> y <span> )
Ahora bien, el efecto en Cascada se debe al nivel de precedencia (importancia) que se toma al ser interpretadas las diversas uniformidades en el documento, esto es, si en los atributos dentro de los tags <style> (Uniformidad en Documento) existen varias definiciones traslapadas con aquellas definidas en un archivo CSS, entonces las ultimas tomarán precedencia, de igual manera, aquellas definiciones por Tag ( Clases y en Linea) tomarán precedencia sobre aquellas de Documento (Tags <style> y <span>) y archivos CSS.
Finalmente vale mencionar que en dado caso de no definirse ninguna funcionalidad para algún tag el Navegador utiliza sus valores "defaults".
Esta implementación es aquella utilizada a lo largo de varios documentos y su funcionamiento depende de un archivo que es llamado dentro del documento HTML, este tipo de declaración es similar a la de una imagen, y existen dos posibilidades como se muestra a continuación :
<html> <head> <title> Documento de CSS </title> <link rel="stylesheet" type="text/css" href="/css/estilo.css"> <style type="text/css"> <!-- @import url(http://www.osmosislatina.com/css/estilo.css) --> </style> </head> <body> ........ ........ </body> </html> |
Nótese que ambas definiciones para importar el archivo CSS son anidadas dentro del Tag <head> del documento; la primer declaración importa el archivo CSS mediante el elemento link son sus respectivos atributos, la segunda declaración hace uso de los Tags <style> para importar el mismo archivo CSS; a pesar de las diferencias en sintaxis, ambas declaraciones tienen el mismo funcionamiento.
La utilización de comentarios <!-- y --> antes y después de los tags <style> se hace con la intención de evitar errores en los Navegadores que no reconocen el tag <style> y/o tienen desactivado el uso de CSS.
<style> y <span> ).
Dentro de los tag <style> también es posible definir el comportamiento de tags que afectarán un documento en particular.
<head>
<title> Documento de CSS </title>
<style type="text/css">
<!--
body { background-color:black }
h1,h3,h4 {text-align: center}
h2 {text-align: right}
p b {color: yellow}
a:link { color: blue }
a:active { color: red; font-weight: bold}
a:visited { color: green }
span { color: red }
span.negrita { font-weight: bold }
-->
</style>
</head>
|
Los parámetros definidos dentro de los tags <style> indican lo siguiente:
body { background-color: black } : Cualquier contenido dentro de los Tags <body> (todo el documento en sí) tendrá fondo negro. h1,h3,h4 {text-align: center} : Cualquier contenido dentro de los Tags <h1> , <h3> , <h4> será alineado en el centro. h2 {text-align: right} : Cualquier contenido dentro de los Tags <h2> será alineado hacia la derecha. p b {color: yellow} : Después de cualquier salto de renglón ( tags <p> ) si precedía de letras negritas ( tags <b> ) el contenido será de color amarillo; aquí es importante mencionar que si existen letras negritas no será asignado el color amarillo salvo estas se encuentren dentro de un salto de renglón, lo anterior se debe a la omisión de comas (",") entre los elementos que genera un comportamiento anidado. a:link { color: red } : Todos los links de la página ( tags <a> ) estarán en rojo. a:active { color: blue; font-weight: bold}: Al momento de oprimir el Link, la letras aparecerán azules y la letra se tornará negrita. a:visited { color: green } : Si el usuario observa un Link que ya visito, éste aparecerá de color verde. Las definiciones que inician con span tienen un comportamiento especifico ya que forman parte de CSS; al utilizarse las diversas definiciones mencionadas anteriormente, estas toman un efecto sobre todas las declaraciones del documento, esto es, todo el contenido de los Tags <h2> será alineado a la derecha, aquel de <a> (links) será rojo, sin embargo, existen ocasiones en las que este comportamiento no es deseado para todos los elementos del documento, para este tipo de situaciones se utiliza el Tag <span>
La siguiente declaración permite que únicamente una sección del contenido sea afectada:
|
Para que el tag <span> pueda ser utilizado en diversas circunstancias, es posible generar clases de la siguiente manera:
|
Además del uso de clases, el Tag <span> también puede contener declaraciones en linea a través del atributo style ; el uso de Clases y declaraciones en linea forma parte de las definiciones más refinadas en CSS descrita a continuación.
Finalmente existe la posibilidad de definir el funcionamiento de cualquier tag HTML al mismo nivel de tags , esto es, el funcionamiento solo tendrá efecto dentro del tag y ningún otro tag del mismo tipo será afectado en el documento, para esto existen dos posibilidades:
<style> o bien que sean incluidas estas definiciones en un archivo CSS:
<head>
<title> Documento de CSS </title>
<style type="text/css">
<!--
h2.azul {color: azul}
h2.verde {color: green; text-align: center}
h2.amarilla { color: yellow }
.cursiva { font-style: italic }
-->
</style>
</head>
|
Los parámetros anteriores definen tres funcionamientos para títulos con tags <h2> , esto otorga la flexibilidad de emplear títulos con diferentes colores. Para utilizar la funcionalidad los tags son llamados con el parámetro class :
|
|
La clase genérica .cursiva puede ser utilizada para cualquier tipo de tag , esto es :
|
El uso de clases ( class ) no esta limitado a colores y alineación , esta metodología puede ser empleada para cualquier tipo de funcionalidad que sea apoyada por CSS.
Aunque muy similar a la metodología utilizada en clases ( class ) esta se especifica dentro del tag de la siguiente manera:
|
Esta última metodología también garantiza que solo tags individuales sean afectados.