Contenido del Artículo
Estructura básica de CSS
Una regla CSS se compone de tres partes fundamentales:
- Selector: Indica a qué elemento(s) HTML se aplicará el estilo
- Propiedad: La característica visual que queremos modificar
- Valor: La configuración específica para esa propiedad
Sintaxis
selector { propiedad: valor; }
Comentarios
/* Esto es un comentario en CSS */
Cascada
Los estilos se aplican en cascada (de arriba a abajo)
/* Ejemplo básico */
p {
color: blue;
font-size: 16px;
margin: 10px 0;
}
/* Esto es un comentario */
.header {
background-color: #f8f8f8;
padding: 20px;
}
Selectores CSS básicos
Los selectores determinan a qué elementos se aplicarán los estilos:
/* Selector de elemento */
p { color: #333; }
/* Selector de clase */
.destacado { background: yellow; }
/* Selector de ID */
#header { height: 80px; }
/* Selector universal */
* { box-sizing: border-box; }
/* Selector de atributo */
input[type="text"] { border: 1px solid #ccc; }Las clases (.) se pueden reutilizar, mientras que los IDs (#) deben ser únicos en el documento
| Selector | Ejemplo | Descripción |
|---|---|---|
| Elemento | p | Todos los elementos <p> |
| Clase | .clase | Elementos con class="clase" |
| ID | #id | Elemento con id="id" |
| Universal | * | Todos los elementos |
| Atributo | [type] | Elementos con el atributo especificado |
Propiedades CSS más utilizadas
Estas son algunas de las propiedades CSS más comunes:
Texto
color, font-family, font-size, text-align
Modelo de caja
width, height, margin, padding, border
Fondo
background-color, background-image
Disposición
display, position, flex, grid
/* Ejemplo con propiedades comunes */
.articulo {
/* Texto */
color: #222;
font-family: 'Arial', sans-serif;
font-size: 1rem;
line-height: 1.6;
/* Modelo de caja */
width: 80%;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
/* Fondo */
background-color: #fff;
/* Disposición */
display: block;
}
Unidades y valores en CSS
CSS ofrece múltiples unidades para diferentes propósitos:
/* Unidades absolutas */
.pulgada { font-size: 1in; }
.cm { width: 2.54cm; } /* 1 pulgada */
/* Unidades relativas */
.rem { font-size: 1.2rem; } /* Relativo al font-size del root */
.em { padding: 1em; } /* Relativo al font-size del elemento */
.vh { height: 50vh; } /* 50% del viewport height */
/* Colores */
.hex { color: #ff5733; }
.rgb { background: rgb(255, 87, 51); }
.rgba { border-color: rgba(255, 87, 51, 0.5); }
.hsl { color: hsl(12, 100%, 60%); }Para diseño responsive, las unidades relativas (rem, vh, %) son más flexibles que las absolutas (px, pt)
| Tipo | Unidad | Descripción |
|---|---|---|
| Absolutas | px | Píxeles (1/96 de pulgada) |
| Absolutas | pt | Puntos (1/72 de pulgada) |
| Relativas | % | Porcentaje relativo al elemento padre |
| Relativas | rem | Relativo al font-size del elemento root |
| Relativas | vw/vh | Porcentaje del viewport width/height |
| Colores | hex/rgb/hsl | Diferentes formatos para especificar colores |
Buenas prácticas en CSS
Consejos para escribir CSS mantenible y escalable:
Nomenclatura
Usa nombres descriptivos (BEM, SMACSS)
Organización
Agrupa propiedades de forma lógica
Responsive
Usa unidades relativas y media queries
Comentarios
Documenta tus estilos
/* Ejemplo de CSS bien organizado */
/* ===== HEADER ===== */
.header {
/* Posicionamiento */
position: fixed;
top: 0;
left: 0;
/* Modelo de caja */
width: 100%;
height: 80px;
padding: 0 20px;
/* Estilos visuales */
background-color: #2c3e50;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
/* Tipografía */
font-family: 'Roboto', sans-serif;
/* Misceláneo */
z-index: 1000;
}
/* Navegación principal */
.header__nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
