INTRODUCCION A CSS
El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así
porque fue concebido para otros usos (científicos sobre todo), distinto a los actuales,
mucho más amplios.
Para solucionar estos problemas los diseñadores han utilizado técnicas tales como la
utilización de tablas imágenes transparentes para ajustarlas, utilización de etiquetas que
no son estándares del HTML y otras.
Estas "trampas" han causado a menudo problemas en
las páginas a la hora de su visualización en distintas plataformas.
Además, los diseñadores se han visto frustrados por la dificultad con la que, aun
utilizando estos trucos, se encontraban a la hora de maquetar las páginas, ya que muchos
de ellos venían maquetando páginas sobre el papel, donde el control sobre la forma del
documento es absoluto.
Finalmente, otro antecedente que ha hecho necesario el desarrollo de esta tecnología
consiste en que las páginas web tienen mezclado en su código HTML el contenido del
documento con las etiquetas necesarias para darle forma.
Esto tiene sus inconvenientes
ya que la lectura del código HTML se hace pesada y difícil a la hora de buscar errores o
depurar las páginas. Aunque, desde el punto de vista de la riqueza de la información y la
utilidad de las páginas a la hora de almacenar su contenido, es un gran problema que
estos textos está en mezclados con etiquetas incrustadas para dar forma a estos: se
degrada su utilidad.
En estas páginas de CSS pretendemos dar a conocer la tecnología con un enfoque
práctico para que en pocos capítulos podáis usar las CSS de una manera depurada,
reflejando toda nuestra experiencia en su uso. No pretenden demos explorar todos los
aspectos de la tecnología ya que para realizar esto necesitaríamos un la extensión de un
libro entero.
Características y ventajas de las CSS
El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial,
la forma de presentación que le aplicaremos a:
- Un web entero, de modo que se puede definir la forma de todo el web de una sola vez.
- Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código en la cabecera, a toda la página.
- Una porción del documento, aplicando estilos visibles en un trozo de la página.
- Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul, con márgenes, sin ellos...
La potencia de la tecnología salta a la vista. Pero no solo se queda aquí, ya que además
esta sintaxis CSS permite aplicar al documento formato de modo mucho más exacto. Si
antes el HTML se nos quedaba corto para maquetar las páginas y teníamos que utilizar
trucos para conseguir nuestros efectos, ahora tenemos muchas más herramientas que
nos permiten definir esta forma:
- Podemos definir la distancia entre líneas del documento.
- Se puede aplicar identado a las primeras líneas del párrafo.
- Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores.
- Y mucho más, como definir la visibilidad de los elementos, márgenes, subrayados, tachados...
Y seguimos mostrando ventajas, ya que si con el HTML tan sólo podíamos definir
atributos en las páginas con pixeles y porcentajes, ahora podemos definir utilizando
muchas más unidades como:
- Pixels (px) y porcentaje (%), como antes.
- Pulgadas (in)
- Puntos (pt)
- Centímetros (cm)
Soporte de CSS en los navegadores
El trabajo del diseñador web siempre está limitado por las posibilidades de los navegadores que
utilizan los usuarios para acceder a sus páginas. Por este motivo es imprescindible conocer el
soporte de CSS en cada uno de los navegadores más utilizados del mercado.
Internamente los navegadores están divididos en varios componentes. La parte del navegador
que se encarga de interpretar el código HTML y CSS para mostrar las páginas se denomina
motor. Desde el punto de vista del diseñador CSS, la versión de un motor es mucho más
importante que la versión del propio navegador.
Los navegadores Safari y Opera son los más avanzados en el soporte de CSS, ya que incluyen
muchos elementos de la futura versión CSS 3 y un soporte casi perfecto de la actual version 2.1.
El navegador Firefox no tiene un soporte tan avanzado de CSS 3 pero las últimas versiones están
alcanzando rápidamente a Safari y Opera.
Por su parte, el navegador Internet Explorer sólo puede considerarse adecuado desde el punto
de vista de CSS a partir de su versión 7. De hecho, la versión Internet Explorer 6 que aún utilizan
muchos usuarios sufre carencias muy importantes y contiene decenas de errores en su soporte
de CSS. Afortunadamente, Internet Explorer 8 asegura que su soporte de CSS 2.1 será tan
completo como el del resto de navegadores.
La información de la tabla anterior ha sido elaborada a partir de la información que se puede
encontrar en la página Comparison of layout engines (http://en.wikipedia.org/wiki/
Comparison_of_layout_engines_(Cascading_Style_Sheets)) de la Wikipedia, donde se muestra una
comparación exhaustiva sobre el soporte de todas las características de CSS por parte de cada
navegador.
Como incluir CSS en 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.
- 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 pueden 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 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.
- 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
enlazan mediante la etiqueta . Un archivo de tipo CSS no es más que un archivo simple de
texto cuya extensión es .css Se pueden crear todos los archivos CSS que sean necesarios y cada
página HTML puede enlazar tantos archivos CSS como necesite.
En el siguiente ejemplo, se crea un archivo de texto, se cambia su nombre a estilos.css y se
incluye el siguiente contenido:
p { color: black; font-family: Verdana; }
Etiqueta <link>
Normalmente, la etiqueta 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 en detalle los medios CSS y su funcionamiento.
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.
Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos CSS externos,
también se puede utilizar la etiqueta <style>. La forma alternativa de incluir un archivo CSS
externo se muestra a continuación:
TIPOS DE SELECTORES EN CSS:
- Selectores de Elementos: Seleccionan todos los elementos HTML de un tipo específico. Por ejemplo,
pselecciona todos los párrafos.
- Selectores de Clase: Seleccionan elementos HTML que tienen un atributo
classespecífico. Por ejemplo,.claseselecciona todos los elementos con la claseclase.
- Selectores de ID: Seleccionan un único elemento HTML que tiene un atributo
idespecífico. Por ejemplo,#idselecciona el elemento con el IDid.
- Selectores de Atributo: Seleccionan elementos HTML que tienen un atributo específico. Por ejemplo,
[type="text"]selecciona todos los elementos con el atributotypeestablecido en "text".
- Selectores de Pseudo-clase: Seleccionan elementos que están en un estado específico. Por ejemplo,
:hoverselecciona un elemento cuando el cursor del mouse se coloca sobre él.
PROPIEDADES MAS COMUNES DE CSS
- Color: Define el color del texto.
- Background-color: Define el color de fondo de un elemento.
- Font-family: Especifica la fuente o familia de fuentes que se utilizará para el texto.
- Font-size: Define el tamaño del texto.
- Font-weight: Establece el grosor del texto (por ejemplo, normal, bold).
- Margin: Establece el margen exterior de un elemento.
- Padding: Establece el espacio entre el borde de un elemento y su contenido.
- Border: Define el borde de un elemento.
- Width y Height: Establecen el ancho y la altura de un elemento, respectivamente.
CONCLUSIONES
CSS es una herramienta poderosa y flexible que permite a los desarrolladores web controlar la apariencia y el diseño de sus páginas HTML. Con una amplia variedad de selectores, propiedades y valores, CSS proporciona un alto grado de control sobre la presentación de contenido web, lo que permite crear sitios web atractivos y accesibles para los usuarios. Entender la estructura y el funcionamiento de CSS es fundamental para el desarrollo web moderno.
Para mas información, visita los siguientes enlaces y videos:
