img

CSS3: Diseño y Estilización para una Web Moderna

¿Qué es CSS?

CSS3 (Cascading Style Sheets) es el lenguaje utilizado para estilizar y diseñar páginas web. Permite definir colores, tipografías, tamaños, posicionamiento y animaciones, mejorando la experiencia del usuario.

Selectores y Especificidad

Elemento, Selectores básicos: p, h1, div, span, div

Selectores de clase: .clase { color: blue; } ,Aplica estilos a todos los elementos con la clase especificada.

Selectores de ID: #id { font-size: 20px; }, Aplica estilos al elemento con el ID especificado (solo puede haber un elemento con ese ID en la página)

Selectores avanzados: div > p, section + aside, input [type="text"]`

Selector universal: *, aplica estilos a todos los elementos de la página.

Selector de comentario: /**/, Aplica para insertar comentarios en la seccion de estilos, Ejemplo (/*Aqui va un comentario*/), sin que se vea al ejecutar el código.

Selector de grupo: elemento1, elemento2, aplica estilos a todos los elementos especificados.

Selector de hijo: elemento padre > elemento hijo, aplica estilos a los elementos hijo directos del elemento padre.

Selector de adyacente: elemento + elemento adyacente, aplica estilos al elemento adyacente al elemento especificado.

Selector de hermano: elemento ~ elemento hermano, aplica estilos a todos los elementos hermano del elemento especificado.

Selector de atributo: [atributo], aplica estilos a los elementos con el atributo especificado.

Selector de atributo con valor: [atributo="valor"], Aplica estilos a los elementos con el atributo y valor especificados.

Selector de pseudo-clase: :pseudo-clase, plica estilos a los elementos en un estado específico ejemplo (:hover, :active).

Selector de pseudo-elemento: ::pseudo-elemento, aplica estilos a partes específicas de un elemento ejemplo (::before, ::after).

Asignadores de propiedades

color /* Define el color del texto */

background-color /* Define el color de fondo */

font-family /* Define la fuente del texto */

font-size /* Define el tamaño del texto */

font-weight /* Define el grosor del texto */

text-align /* Define la alineación del texto */

text-decoration /* Define la decoración del texto (ej: subrayado, tachado) */

line-height /* Define la altura de línea del texto */

margin /* Define el margen exterior del elemento */

padding /* Define el margen interior del elemento */

border /* Define el borde del elemento */

border-radius /* Define el la curva de las esquinas del borde del elemento */

width /* Define el ancho del elemento */

height /* Define la altura del elemento */

display /* Define cómo se muestra el elemento (ej: block, inline, flex) */

position /* Define la posición del elemento (ej: relative, absolute, fixed) */

float /* Define cómo se flotan los elementos */

opacity /* Define la opacidad del elemento */

box-shadow /* Define la sombra del elemento */

border-radius /* Define el radio de las esquinas del elemento */

transition /* Define las transiciones de las propiedades */

animation /* Define las animaciones del elemento */

transform /* Define las transformaciones del elemento (ej: rotación, escala) */

flex /* Define las propiedades de flexbox */

grid /* Define las propiedades de grid */

Asignadores de medidas

px /* Píxeles */

em /* Tamaño de la fuente del elemento padre */

rem /* Tamaño de la fuente del elemento raíz */

% /* Porcentaje */

vw /* Ancho de la ventana gráfica */

vh /* Altura de la ventana gráfica */

Ver Glosario Completo

Diseño Responsivo con CSS3

Media Queries

Permite adaptar el diseño en panalla de usuario de los diferentes dispositivos.

   @media (max-width: 768px) {
       body {
           background-color: lightgray;
               }
   }

Flexbox

Un sistema de diseño que organiza elementos en una dirección flexible.

   display: flex;
   justify-content: center;
   align-items: center;

CSS Grid

Permite construir layouts complejos de manera eficiente.

   display: grid;
   grid-template-columns: 1fr 2fr;
   gap: 10px;

Animaciones y Transiciones

Transiciones

   button {
        transition: background-color 0.3s ease;
   }

Animaciones con @keyframes

   @keyframes mover {
       from { transform: translateX(0); }
       to { transform: translateX(100px); }
   }

Ver Glosario Completo

Buenas Prácticas de CSS3

Usar un enfoque modular con clases reutilizables.

Evitar el uso excesivo de !important.

Utilizar preprocesadores como SASS o LESS para código más limpio.

Optimizar el rendimiento minimizando archivos CSS.

📚 Siguiente Paso El próximo artículo exploraremos JavaScript: Interactividad y Funcionalidad en la Web.

Etiquetas

Buscar en este blog