Algo que tienes que saber de CSS3

COMPARTE

Like a la pagina de facebook

Suscribete

CSS3 es la última evolución del lenguaje de las Hojas de Estilo en Cascada (Cascading Style Sheets), y pretende ampliar la versión CSS2.1. Trae consigo muchas novedades altamente esperadas , como las esquinas redondeadas, sombras, gradientes , transiciones o animaciones, y nuevos layouts como multi-columnas, cajas flexibles o maquetas de diseño en cuadrícula (grid layouts).

Las partes experimentales son particulares para cada navegador y deberían ser evitadas en entornos de producción, o usadas con extrema precaución, ya que tanto la sintaxis como la semántica pueden cambiar en el futuro.

El Nivel 2 de CSS necesitó 9 años, desde Agosto de 2002 hasta Junio de 2011, para alcanzar el estado de Recomendación. Esto fué debido al hecho de que algunas características secundarias fueron retiradas de las especificaciones globales, con el fin de acelerar la normalización de las características no problemáticas, el Grupo de Trabajo CSS de la W3C, en una decisión referida como la doctrina Beijing  dividió CSS en componentes más pequeños llamados módulos cada uno de estos módulos es ahora una parte independiente del lenguaje y se dirije a la estandarización a su propio ritmo mientras algunos módulos son ya recomendados de la W3C, otros todavía son borradores iniciales tambíen se añaden nuevos módulos cuando se identifican nuevas necesidades.

Unos pocos módulos CSS son lo suficientemente estables y han alcanzado uno de los tres niveles de recomendación de CSSWG: Candidato (Candidate), Recomendación (Recommendation), Recomendación propuesta o Recomendación  (Proposed Recommendation or Recommendation). Estos puden ser usados sin un prefijo y son muy estables aunque algunas características aun pueden ser eliminadas de la etapa de Candidate Recommendation.

Estos módulos extienden y mejoran la especificación CSS2.1 la cual construye el núcleo de la especificación. Juntos, son el snapshot actual de la especificación CSS.

El CSS4 Iteración de fondos y Especificación de bordes ya está en progreso; aunque aún no ha alcanzado el estado del Primer Borrador de Trabajo Público, este planea agregar la característica de acortar los bordes (en el  CSS border-clipborder-clip-topborder-clip-rightborder-clip-bottom, y border-clip-left propiedades) o controlar la forma del borde en una esquina (usandopropiedad CSS border-corner-shape).

CSS tiene una sintaxis simple y usa un conjunto de palabras clave en inglés para especificar los nombres de varias propiedades de estilo.

Una hoja de estilos consiste en una serie de reglas. Cada regla, o conjunto de reglas consisten en uno o más selectores, y un bloque de declaración.

Selectores[editar]

Los selectores declaran qué etiquetas se le aplican los estilos que coincidan con la etiqueta o atributo señalados en la regla.

Los selectores pueden aplicarse a:

  • Todos los elementos de un tipo, como los párrafos <p>.
  • Elementos seguidos de un atributo, en particular:
    • id: identificador, un identificador único para la etiqueta.
    • class: clase, un identificador para anotar múltiples elementos.

Las clases y los identificadores son sensibles a las mayúsculas, comienzan con letras, y pueden incluir caracteres alfanuméricos y guiones bajos. Una clase se aplica a cualquier número de elementos. Un identificador se aplica un solo elemento.

Las pseudoclases son usadas en los selectores CSS para permitir el formateo usando información que no está incluida en el documento. Un ejemplo de una pseudoclase muy usada es :hover, que identifica el contenido que está siendo apuntado por un puntero, como el cursor del ratón. Este nombre se añade al selector, de esta manera: a:hover o #elementid:hover. Una pseudoclase clasifica elementos, como :link o :visited, mientras que un pseudoelemento hace una selección de elementos parciales, como ::first-line o ::first-letter.

Los selectores pueden ser combinados de muchas maneras para obtener una mayor flexibilidad y precisión. Múltiples selectores pueden ser unidos en una misma línea para especificar elementos por su ubicación, tipo de elemento, identificador, clase, o cualquier combinación de estos. El orden de los selectores es importante. Por ejemplo, div.myClass {color: red;}aplica a todos los elementos <div> con la clase myClass, mientras que.myClass div {color: red;} aplica a todos los elementos <div> que estén dentro de cualquier elemento con la clase myClass.

La tabla siguiente provee un resumen de la sintaxis de los diversos selectores, indicando su forma de uso y la versión de CSS en la que fueron introducidos:

Un bloque de declaraciones consiste en una lista de declaraciones unidas. Cada declaración consiste en una propiedad, dos puntos (:), y un valor. Si hay muchas declaraciones en un bloque, un punto y coma (;) es insertado para separar cada declaración.

Las propiedades son insertadas en el estándar CSS. Cada propiedad tiene un conjunto de posibles valores. Algunas propiedades afectan a cualquier elemento, otras solo a un grupo particular de elementos. Los valores pueden ser palabras clave, como «center» o «inherit», o valores numéricos, como 200px (200 píxeles) o 80% (80 por ciento del ancho de la ventana). Los valores de colores son especificados por medio de una palabra clave (ej. «red»), de valores hexadecimales (ej. #FF0000, pudiéndose abreviar como #F00), valores RGB en una escala del 0 al 255 (ej. rgb(255, 0, 0)), valores RGBA igual que los valores RGB pero con soporte para el canal alfa de transparencias (ej. rgba(255, 0, 0, 0.8)), y valores HSL o HSLA (ej. hsl(000, 100%, 50%)hsla(000, 100%, 50%, 80%)).