Programación III — UTN

Clase 02 · Introducción a CSS

Archivos de la clase

01

Aplicación de CSS

Estilos en línea (style), bloque interno (<style>), hoja externa (<link>) e importación con @import.

Abrir
02

Selectores de Clase

Selector de elemento, clase ligada a elemento (p.clase) y clase genérica (.clase).

Abrir
03

ID y Pseudoclases

Selector #id, pseudoclases de enlace (:link, :hover, :visited) y pseudoelementos (:first-letter).

Abrir
04

Combinando Clases

Clase ligada a elemento y clase genérica aplicadas simultáneamente con múltiples valores en class.

Abrir
05

Selectores Descendentes

Selectores p span.colorado y ul#listado li: aplican solo a elementos dentro de un contexto específico.

Abrir
06

Unidades Viewport

Unidades vw y vh: dimensionan elementos en proporción al área visible del navegador.

Abrir
07

Media Queries

Reglas @media con min-width y orientation para diseño responsivo.

Abrir
08

Flexbox

display:flex, flex-direction, justify-content, flex-wrap y align-content.

Abrir
09

Colores en CSS

Notaciones de color: nombres predefinidos, hexadecimal #rrggbb y rgba(r, g, b, alfa).

Abrir
10

Bordes Redondeados

Propiedad border-radius para rectángulos redondeados y formas circulares con fondo de color, borde o imagen.

Abrir
11

Animaciones CSS

Página contenedora de dos ejemplos de @keyframes: sintaxis abreviada y propiedades individuales.

Abrir
A1

Animación 1 – Shorthand

Uso de la propiedad abreviada animation con @keyframes para animar posición y color.

Abrir
A2

Animación 2 – Propiedades

Uso de las propiedades individuales animation-name, animation-duration, animation-direction, etc.

Abrir

This is the first item’s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.