Thursday, May 21, 2020

RESUMEN DE CSS3



CSS corresponde a las siglas de Cascade Style Sheet o Hojas de Estilos en Cascada en cristiano. Como indica su nombre CSS3 corresponde a la tercera revisión del mismo y los primeros módulos se convirtieron en recomendaciones oficiales de W3C en 2011.

La World Wide Web Consortium o W3C es la encargada de formular las especificaciones de las hojas de estilos que servirán de estándar para los navegadores o los agentes de usuario.

El CSS3 es el lenguaje utilizado para definir los estilos de los documentos HTML o XML. Su desarrolló partió de la idea de separar la estructura de un documento de su presentación, haciendo así mucho mas fácil su mantenimiento.

La información de los estilos puede ser definida en el mismo HTML con el elemento <style> o en un archivo separado con la terminación .css. Evidentemente, este último es el utilizado a día de hoy, precisamente aprovechando el fin para el que fue creado CSS, no mezclar el HTML con los estilos en un mismo documento y que resulte mucho mas fácil su mantenimiento.

El funcionamiento de CSS consiste en definir, mediante su propia sintaxis, el formato de presentación que se aplicará a un sitio web completo, una página o documento HTML, a una parte de un documento HTML o a una etiqueta en concreto.

Si por ejemplo tenemos una etiqueta H1 de título como esta:

<h1>Título de tu página</h1>

Podemos darle estilos de esta forma:

h1 {
font-size : 12px;
font-family : verdana;
text-decoration : underline;
text-align : left;
}

Con esto, le estaríamos dando un tamaño de fuente de 12 pixeles, un tipo de fuente Verdana, un subrayado y una alineación a la izquierda.

Características:

Bordes:
  • Colores múltiples de borde en un mismo lado
  • Imágenes de borde
  • Bordes redondeados
Fondos:
  • Fondos Múltiples pueden ser añadidos al mismo elemento como capas
  • Posicionamiento del fondo con mayor precisión
  • Pueden ser redimensionados
Color:
  • Opacidad
  • Gradientes
  • Valores de color: HSL
Text:
  • Sombras
  • Desbordamiento
  • Ajuste de línea
Transformaciones:
  • Escalar
  • Sesgar
  • Mover
  • Rotar en 2D o 3D
Transiciones:
  • Transición sencilla de estilos
Cajas:
  • Sombras
  • Cajas redimensionables
  • Overflow separado en vertical u horizontal
  • Compensación entre contorno y borde
  • Modelos para especifcar altura y anchura
Contenido:
  • Los estilos pueden añadir contenido a los elementos
Opacidad:
  • Los elementos pueden ser transparentes

No comments:

Post a Comment