CSS

CSS es la abreviatura de Cascading Style Sheets (Hojas de Estilo en Cascada), que quiere decir plantillas de diseño escalonadas. CCS se utiliza para crear hojas de estilo para páginass web. CSS es un lenguaje de marcado declarativo con documentos HTML y, en algunos casos, la información en XML puede procesarse en términos de diseño y apariencia. Actualmente se está utilizando el nivel 3 del CSS y todavía se están elaborando los borradores y módulos de trabajo individuales.

Información general

Las primeras propuestas de hojas de estilo surgieron entre 1993 y 1995. Håkon Wium Lie sugirió las primeras hojas de estilo en cascada en 1994. Bert Bos estaba trabajando en un navegador que se suponía que tenía su propio lenguaje de hojas de estilo. Lie presentó el CSS en el Mosaic y la Web '94 En Chicago por primera vez. Bos se fijó en él y desde entonces desarrollaron CSS en un esfuerzo conjunto. En diciembre de 1996, se introdujo el nivel 1 de CSS, que era una propuesta de estandarización, que ahora es totalmente compatible con la mayoría de los navegadores.

En mayo de 1998, se publicó CSS Nivel 2, pero de momento este estándar nunca ha sido completamente implementado por ningún navegador. En la mayoría de los casos, el apoyo se limitó a técnicas parciales. Desde 2002, el CSS 2 ha sido corregido y se han eliminado técnicas parciales que no estaban integradas por navegadores. El CSS 3 ha estado en desarrollo desde 2003.

Periódicamente se añaden nuevas características y funciones que se están desarrollando en los grupos de trabajo del CSS3. A la luz de los diferentes dispositivos, lenguajes de programación y scripting, esta práctica ha demostrado ser útil. Tan pronto como se necesitaron nuevas características debido a la falta de apoyo, la comunidad respondió y comenzó a desarrollarse. Los fabricantes siguieron más tarde e implementaron el soporte. Lo mismo ocurrió con los navegadores y el soporte para versiones más nuevas de HTML.

El uso de nuevos dispositivos también significa que los diseñadores web han tenido que optar por formas específicas de implementar el diseño de una web. CSS 3 ofrece soluciones integrales y opciones de diseño modernas para estos escenarios de aplicación. Efectos, consultas de medios y muchas otras propiedades de CSS ahora se pueden elegir para que no sólo se pueda especificar el diseño, sino también el comportamiento del diseño en el dispositivo.

Uso

Como lenguaje de estilo, CSS define el aspecto o el diseño de los documentos HTML. Las fuentes, colores, bordes y fondos de ciertos elementos HTML se definen en CSS. Por ejemplo, para encabezados de primer orden, todas las propiedades como tamaño, fuente, negrita, cursiva pueden ser especificadas o se puede determinar el fondo, color de fuente, etc., para cuadros de texto completos. CSS se limita al formato y diseño. Las tareas de HTML permanecen en la estructuración del contenido de las páginas web. Esta separación de contenido y diseño es decisiva en muchos lenguajes de marcado; proporciona la opción de cambiar la apariencia de los contenidos sin tener que cambiar el contenido mismo.

El diseño de un sitio web con CSS se realiza mediante archivos CSS referenciados o comandos online que se pueden listar en el código fuente HTML en la sección HEAD del elemento <style>. Sin embargo, se recomienda escribir el diseño por separado en un archivo CSS. Se pueden crear diferentes diseños para diferentes medios de salida como impresión, proyecciones o pantallas con diferentes resoluciones utilizando CSS. Esto es una ayuda, especialmente con el gran número de dispositivos móviles diferentes que existen hoy en día. Una definición estándar para diferentes soportes permite optimizar el diseño y el flujo de texto para que el contenido se pueda consumir fácilmente.

Sintaxis

Los archivos CSS se llaman hojas de estilo. Las reglas son la base de una hoja de estilo. Cada regla contiene al menos un selector y un par de corchetes que contienen pares atributo-valor. Contiene una propiedad, seguida de dos puntos, seguida de un valor. El valor se puede terminar opcionalmente con un punto y coma.

example: a selector composed of: selector {property: value; }

El selector selecciona el elemento deseado, por ejemplo, un cuadro de texto o un título. La propiedad y el valor definen el diseño, como la fuente de un cuadro de texto, el texto en negrita en Times New Roman:

#Text01 { font:bold Times; }

Las partes individuales de un documento o grupo de elementos se pueden referenciar con los selectores.

selector1, selector2 { property: value; }

Los paréntesis que contienen pares atributo-valor son las condiciones que se adjuntan al selector. Si el elemento está en el [Código Fuente|código fuente]] de la página actual y se desea que se visualice correctamente, debe visualizarse según las características y los valores.

Selectores

Existen diferentes tipos de selectores:

  • Selectores simples: Esto incluye el selector universal * y el elemento selector de tipo. Ejemplos de selectores simples son elementos como .class, #id y diferentes atributos.
  • Los combinadores encadenan varios selectores juntos. Con ellos se pueden expresar la sucesión y las relaciones.
  • Los pseudoelementos son selectores que no se limitan a un elemento, como es el caso de los selectores simples. Puede, por ejemplo, hacer que la primera letra de un párrafo sea particularmente grande, como se hace en muchos periódicos impresos.
  • Las pseudoclases son simples selectores que dirigen un elemento sólo si cumple con una determinada propiedad. Se distingue entre pseudoclases estructurales y dinámicas. La primera permite seleccionar elementos específicos en la estructura HTML. Este último selecciona los elementos debido a la interacción del usuario.

Hay una serie de características que incluyen tipos de letra, formato, alineación de texto y muchas otras propiedades CSS además de los selectores. Se recomienda una referencia rápida para tener todo tipo de características disponibles.

Consultas sobre medios y el Modelo de Caja CSS

Para aplicar estos selectores, es necesario conocer el 'modelo de caja CSS.' Cada página web se considera una caja que se describe por ciertas características. Esto incluye las características de los cuatro lados de la caja (superior, izquierda, derecha, inferior) y cuatro márgenes, bordes y comandos de relleno. Se puede describir un layout con este concepto. Se define por las posiciones y distancias de los elementos individuales. El cuadro CSS es una especie de cuadrícula abstracta que permite definir la disposición exacta.

Un enfoque similar se utiliza en las consultas sobre medios. Las consultas a los medios se introdujeron en el CSS 3. Consultan las propiedades del dispositivo del usuario con el que se muestra el contenido. Se puede consultar la anchura y la altura de la ventana del navegador para adaptar el contenido a los navegadores móviles. Por lo general, se anotan los valores en píxeles. Si se trata de una ventana de navegador más grande de lo normal, se utilizarán las características convencionales previamente definidas por el diseñador web. Una generalización de las consultas se puede lograr con el llamado viewport, que está integrado con un meta elemento en el código fuente:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Importancia para el SEO

Con la separación de diseño y contenido, los archivos CSS deben estar fuera del código fuente HTML tanto como sea posible. Si bien esto es sólo una recomendación, es bastante razonable en el contexto de código fuente válido, especialmente porque el tamaño del archivo también afectará el tiempo de carga de una web y mejorará la experiencia del usuario. Además, los escenarios de prueba se pueden implementar con una clara separación de contenido y diseño, ya que no es necesario cambiar el contenido para probar los diferentes diseños y la aceptación del usuario. A largo plazo, esta separación ahorra tiempo, que los webmasters pueden invertir en otros lugares, como en la construcción de enlaces o en la optimización de una página.[1]

Con CSS, el contenido puede ser organizado de tal manera que contenga ciertas marcas semánticas y así trabajar sin problemas en diferentes medios de salida. Por lo tanto, se puede lograr una estructura HTML muy clara, que probablemente tendrá un impacto positivo en el crawl y la indexación por parte de los motores de búsqueda. Los menús CSS que funcionan sin JavaScript son un ejemplo. La mayoría de los motores de búsqueda recomiendan dicha navegación. Por otro lado, hay algunos trucos de CSS y hacks de CSS que deben ser evitados. Contenidos como texto e imágenes no deben ser ocultados con CSS. Los motores de búsqueda pueden clasificarlo como un intento de engaño.

La variedad de medios de salida hace necesaria una clara configuración de CSS. Si el contenido está marcado con CSS de cierta manera, se puede mostrar en diferentes dispositivos sin ningún problema. Este contenido se puede recuperar mucho más fácilmente, independientemente del navegador que se utilice.[2]

Referencias

  1. (CSS) y SEO stonetemple.com. Visitado el 25/01/2016
  2. Cñomo usar CSS para SEO htmlgoodies.com. Visitado el 25/01/2016

Categoría

Related Articles