Una de las cosas que con frecuencia pueden ser requeridas por quien quiere involucrarse en el ámbito del desarrollo web con o sin manejadores de contenido, es el uso de las hojas de estilo CSS. La presente es una introducción en extremo básica a este tema, que preparé en función de una charla que di hace poco para el TechDay del grupo Iguana Valley de Ecuador.
Porque hablar de CSS 2.1 y no de la ultima versión CSS 3, pues porque al momento de escribir este artículo la mayoría de los navegadores no son compatibles con esta ultima versión aun en desarrollo.
OBJETIVOS DE ESTE DOCUMENTO
- Conocer que es CSS y para que sirve
- Conocer como asignar estilos a un documento XHTML
- Conocer la estructura básica del código CSS
- Conocer recomendaciones para escribir código CSS
A continuación el desarrollo de estos objetivos.
Esta es la presentación en Prezi de la charla si desean revisarla:
QUE ES CSS
Es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con XHTML.
Es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.
PARA QUE SIRVE EL CSS
Sirve para separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo. Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.
Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.
COMO ASIGNAR ESTILOS A UN DOCUMENTO XHTML
Una de las principales características de CSS es su flexibilidad y las diferentes opciones que ofrece para realizar una misma tarea. De hecho, existen tres opciones para incluir CSS en un documento HTML.
Incluir CSS en los elementos HTML
Este método para incluir estilos CSS en documentos HTML es el peor y el menos utilizado, ya que tiene los mismos problemas que la utilización de las etiquetas <font>.
Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto.
Incluir CSS en el mismo documento HTML
Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se deben incluir en la cabecera del documento(sólo dentro de la sección <head>).
Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web.
El principal inconveniente de este método es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar.
Definir CSS en un archivo externo
En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML/XHTML enlazan mediante la etiqueta <link>.
Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css
Se pueden crear más de un archivo CSS para un proyecto y cada página HTML puede enlazar tantos archivos CSS como necesite.
Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo CSS:
- rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet
- type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css
- href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
- media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se explican algunos de los medios CSS.
De todas las formas de incluir CSS en las páginas HTML, esta es la más utilizada con mucha diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de páginas HTML, por lo que se garantiza la aplicación homogénea de los mismos estilos a todas las páginas que forman un sitio web.
Con este método, el mantenimiento del sitio web se simplifica al máximo, ya que un solo cambio en un solo archivo CSS permite variar de forma instantánea los estilos de todas las páginas HTML que enlazan ese archivo.
ESTRUCTURA BÁSICA DEL CÓDIGO CSS
CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS.
Los diferentes términos se definen a continuación:
- Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de “selectores”, un símbolo de “llave de apertura” ({), otra parte denominada “declaración” y por último, un símbolo de “llave de cierre” (}).
- Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
- Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.
- Propiedad: permite modificar el aspecto de una característica del elemento.
- Valor: indica el nuevo valor de la característica modificada en el elemento.
Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener infinitos selectores y cada declaración puede estar formada por un número infinito de pares propiedad/valor.
Nota Importante: Los selectores XHTML son sustituidos con frecuencia por nombres de clase e identificadores.
Uso de Clases
Se hace creando un nombre definido por el usuario, su sintaxis es un punto(.) antes del nombre definido, sustituye a un selector XHTML o se usa en conjunto con ellos.
Uso de Identificadores
Se hace creando utilizando el nombre de un identificador previamente definido en XHTML, su sintaxis es el signo de número (#)antes del nombre del identificador y sustituye a un selector XHTML o se usa en conjunto con este o las clases creadas previamente.
RECOMENDACIONES PARA ESCRIBIR CÓDIGO CSS
Definir uso para diferentes medios
Los medios más utilizados actualmente son Screen (para definir el aspecto de la página en pantalla), Print (para definir el aspecto de la página cuando se imprime) y Handheld (que define el aspecto de la página cuando se visualiza mediante un dispositivo móvil).
<link rel=”stylesheet” type=”text/css” href=”/css/estilos.css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”/css/estilosPrint.css” media=”print” />
<link rel=”stylesheet” type=”text/css” href=”/css/estilosMobil.css” media=”handheld” />
Usar XHTML en lugar de HTML
Implica escribir etiquetas totalmente en minúsculas, cerrar correctamente todas las etiquetas, respetar la jerarquía de anidación, entre otras.
Usar XHTML semántico antes que selectores propios
Dar predominancia al uso de etiquetas XHTML antes que el uso de clases e identificadores
Usar Comentarios
Comentar el código y organizarlo de acuerdo a la sección al que se aplica un estilo
Usar estructura MVC para manejadores de contenido
Para desarrollos con CMSs usar diferentes hojas de estilo de acuerdo a la estructura, por ejemplo comun.css(common.css), estructura.css(layout.css), estilo.css(customize.css)
Para plantillas de manejadores de contenido usar common.css
Si se trabaja con plantillas separadas para cada sección de un sitio web, usar una hoja de estilo común para la definición de los estilos compartidos en todas las páginas.
Especificidad
Conocer la especificidad las reglas CSS, es decir la importancia específica de unas reglas de estilos CSS con respecto de otras. Para esto se pueden dar muchas combinaciones pero los valores de importancia básicos son estos:
- Importancia numérica del atributo style = 1000
- Importancia numérica de un identificador (id) = 100
- Importancia numérica de una clase, pseudo-clase o atributo = 10
- Importancia numérica de un elemento html = 1
La regla CSS que tenga mayor peso de acuerdo a lo anterior será la que se aplique en el browser.
Eso es muy útil una vez que tienes 2 estilos diferentes para un mismo selector que es algo que te sucede con frecuencia en los desarrollos de sitios medianos y grandes.
Aplicar métodos específicos para cada navegador
Conocer métodos para aplicar estilos de acuerdo a cada navegador, la manera no estándar es usando trampas o ( hacks), la manera estándar es mediante la detección del tipo de navegador o motor y creando hojas de estilo para cada cáso específico.
Usar frameworks CSS
Usar frameworks CSS cuando sea posible para agilitar la aplicación del código, estas aplicaciones traen creada una estructura lista de acuerdo a la necesidad de cada proyecto, esto ayuda muchísimo al inicio rápido de un proyecto, algunos frameworks conocidos son:
Validar el código
Validar el código CSS incrementa la posibilidad de que tu desarrollo sea visto en mayor cantidad de navegadores o dispositivos.
Para hacerlo hay cantidades de herramientas en Internet, personalmente uso una extensión de Mozilla Firefox llamada WebDeveloper a mas de permitirme validar el código local y remotamente trae una infinidad de mini aplicaciones de utilidad a la hora de desarrollar sitios web.
Fin de esta parte
Para la introducción a las hojas de estilo estás son algunas ideas que nos ayudarán a profundizar, en el futuro ampliaré la explicación de algunas técnicas en lo que será una continuación a este artículo, espero que les sea de utilidad.
Comments
No Responses to “Introducción a CSS 2.1”