logo 3con14 css cod css
  • CSS
  • Conceptos
  • Selectores
  • Unidades, Color
  • Modelo de cajas
  • Posicionamiento
  • Textos, Enlaces
  • Listas, Menús
  • Tablas, Columnas
  • Diseño (Layout)
    • Grid Layout
    • Flex Box
    • Media queries
  • Imagen, Filtros, ...
  • Movimientos
    • Transformaciones
    • Transiciones
    • Animaciones
  • Formularios
  • 🔴 TAREAS
 
 
icon html5
icon css3
mlogo 3con14 css cod

  • Inicio
  • Conceptos
  • ¿Qué es CSS?

¿Qué es CSS?

CSS

Es necesario que los diseñadores web, a la hora de crear sitios web, dominen fundamentalmente dos lenguajes: uno, HTML (HyperText Markup Language) y el otro, CSS (Cascading Style Sheets). Las últimas versiones de estos dos lenguajes: HTML5 y CSS3, han revolucionado la forma de crear sitios web últimamente, ofreciendo nuevas posibilidades de estructura, formato y composición.

CSS (hojas de estilo en cascada) es un lenguaje de hojas de estilos creado para diseñar y dotar de un determinado aspecto a los documentos HTML. CSS es la mejor forma de separar los contenidos de su aspecto formal y es imprescindible para crear páginas web complejas.

Separar contenido y aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce el tiempo y la complejidad de su mantenimiento y permite visualizar el mismo documento en distintos dispositivos (smarphones, tablets o desktops).

Al crear una página web, se utiliza en primer lugar el lenguaje HTML estructurar y marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página web: un párrafo, un titulo, un texto destacado, una tabla, una lista de elementos, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: el color de la letra y fondo, el tamaño y tipo de letra del texto, la separación horizontal y vertical entre elementos, la posición de cada elemento dentro de la página, etc.

Las normas oficiales están escritas en inglés y se pueden consultar de forma gratuita en las siguientes direcciones:

  • Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
  • Descriptions of all CSS specifications

Ventajas de utilizar CSS:

  • Separar la estructura de las páginas y su contenido (HTML), del formato del texto y de la página
  • Tener muchas más posibilidades de formato y de presentación de la página
  • Definir un estilo una sola vez y poder aplicarlo tantas veces como se desee
  • Evitar los errores causados por la repetición
  • Reagrupar todos los estilos
  • Hacer actualizaciones de forma extremadamente rápida
    etc, etc, etc, ... (vamos, todo son ventajas)

Las versiones del CSS

La versión "level 1" aparece en diciembre de 1996. La versión "level 2" es de mayo de 1998. Ésta se trataba de una versión muy ambiciosa, ¡demasiado ambiciosa incluso!. La gran cantidad de novedades (fuentes, síntesis vocal...) hicieron que no fueran adoptadas por los navegadores más comunes.

Ante ese "fracaso parcial" el W3C volvió a retomar el trabajo para publicar, en el período de 2004-2006, la versión level 2 revision 1, conocida como CSS 2.1. La versión 2.1 de  CSS fue publicada como "Recomendación" el 7 de junio de 2011.

CSS3 está dividido en varios documentos separados, llamados “módulos”. Cada módulo añade nuevas funcionalidades a las definidas ya en CSS2, de manera que se preservan las anteriores para mantener la compatibilidad. Los trabajos en el CSS3, comenzaron a la vez que se publicó la recomendación oficial de CSS2, y los primeros borradores de CSS3 fueron liberados en junio de 1999.

Las principales novedades de CSS3 son las posibilidades de:

  • Crear sitios web que se adapten a los distintos tamaños de pantalla.
  • Aplicar imágenes a los bordes y añadir varios bordes
  • Crear fondos con degradados y con imágenes múltiples
  • Usar la transparencia con los colores y con los elementos
  • Aplicar sombras a los elementos (cajas, texto, etc.)
  • Aplicar transformaciones, transiciones y animaciones a los elementos
  • Insertar fuentes con caracteres diversos y especiales
    etc ...

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.

Los navegadores Firefox, Chrome, Safari y Opera son los más avanzados en el soporte de CSS, ya que incluyen muchos elementos de la versión CSS 3 y un soporte casi perfecto de la version 2.1.

Una de los sitios más utilizados por todos los desarrolladores y diseñadores web para comprobar la compatibilidad CSS es http://caniuse.com/

can i use

Por otra parte, el navegador Internet Explorer sólo puede considerarse adecuado, desde el punto de vista de CSS, a partir de su versión 9, y aún así, con numerosas limitaciones, incluida la última versión disponible hoy, MS-Edge.

También existe un blog oficial en el que se publican todas las novedades relacionadas con el estándar CSS.

 

  • Siguiente

Introducción

  • ¿Qué es CSS?
  • Formas de incluir CSS
  • Esquema de regla CSS
  • Los comentarios en CSS
  • Notación en CSS
  • Los Reset de CSS
  • Lista de propiedades

Recursos ...

  • Visual Studio code
  • Sublime Text
  • CSS LINT
  • Normalize

codepen

uniwebsidad

overapi

can i use

w3schools

mdn

Licencias ...

3con14─LAB 1998 - 2021
www.3con14.biz
(cc) Jesús Plaza M.
─ Otros Reconocimientos ─

Visitas ...

Hoy ... 7

Ayer ... 15

Week 7

Mes ... 643

TOTAL ... 42474

  • CSS
  • Conceptos
  • Selectores
  • Unidades, Color
  • Modelo de cajas
  • Posicionamiento
  • Textos, Enlaces
  • Listas, Menús
  • Tablas, Columnas
  • Diseño (Layout)
    • Grid Layout
    • Flex Box
    • Media queries
  • Imagen, Filtros, ...
  • Movimientos
    • Transformaciones
    • Transiciones
    • Animaciones
  • Formularios
  • 🔴 TAREAS