Cargando...
CSS Properties Complete Reference
Esta guía completa de propiedades CSS está diseñada para proporcionar a los desarrolladores una referencia rápida y exhaustiva de todas las propiedades CSS modernas. Sirve como una herramienta de consulta para codificación eficiente, permitiendo encontrar la sintaxis, ejemplos prácticos y compatibilidad con navegadores de manera rápida. La guía está organizada por categorías como Layout & Positioning, Box Model, Bordes y Contornos, Backgrounds, Tipografía, Flexbox y Grid, cubriendo tanto propiedades básicas como avanzadas. Ideal para desarrolladores web que buscan un recurso confiable y actualizado para construir interfaces responsivas, estilizadas y compatibles con todos los navegadores modernos.
📊 Layout & Positioning Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: value | Controla el tipo de visualización del elemento | display: flex | Todos los navegadores |
| position | position: value | Establece el método de posicionamiento | position: absolute | Todos los navegadores |
| top | top: value | Desplazamiento vertical | top: 10px | Todos los navegadores |
| right | right: value | Desplazamiento horizontal desde la derecha | right: 20px | Todos los navegadores |
| bottom | bottom: value | Desplazamiento vertical desde abajo | bottom: 10px | Todos los navegadores |
| left | left: value | Desplazamiento horizontal desde la izquierda | left: 20px | Todos los navegadores |
| z-index | z-index: number | Orden de apilamiento | z-index: 999 | Todos los navegadores |
| float | float: value | Dirección de flotado | float: left | Todos los navegadores |
| clear | clear: value | Limpia elementos flotantes | clear: both | Todos los navegadores |
| overflow | overflow: value | Manejo de contenido desbordante | overflow: hidden | Todos los navegadores |
| overflow-x | overflow-x: value | Desbordamiento horizontal | overflow-x: scroll | Todos los navegadores |
| overflow-y | overflow-y: value | Desbordamiento vertical | overflow-y: auto | Todos los navegadores |
| visibility | visibility: value | Visibilidad del elemento | visibility: hidden | Todos los navegadores |
| clip | clip: rect() | Recorta contenido del elemento | clip: rect(0,50px,50px,0) | Todos los navegadores |
| vertical-align | vertical-align: value | Alineación vertical | vertical-align: middle | Todos los navegadores |
📊 Box Model Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| width | width: value | Ancho del elemento | width: 300px | Todos los navegadores |
| height | height: value | Altura del elemento | height: 200px | Todos los navegadores |
| max-width | max-width: value | Ancho máximo | max-width: 100% | Todos los navegadores |
| min-width | min-width: value | Ancho mínimo | min-width: 200px | Todos los navegadores |
| max-height | max-height: value | Altura máxima | max-height: 500px | Todos los navegadores |
| min-height | min-height: value | Altura mínima | min-height: 100px | Todos los navegadores |
| margin | margin: value | Espaciado exterior | margin: 20px | Todos los navegadores |
| margin-top | margin-top: value | Margen superior | margin-top: 10px | Todos los navegadores |
| margin-right | margin-right: value | Margen derecho | margin-right: 15px | Todos los navegadores |
| margin-bottom | margin-bottom: value | Margen inferior | margin-bottom: 10px | Todos los navegadores |
| margin-left | margin-left: value | Margen izquierdo | margin-left: 15px | Todos los navegadores |
| padding | padding: value | Espaciado interno | padding: 15px | Todos los navegadores |
| padding-top | padding-top: value | Relleno superior | padding-top: 10px | Todos los navegadores |
| padding-right | padding-right: value | Relleno derecho | padding-right: 20px | Todos los navegadores |
| padding-bottom | padding-bottom: value | Relleno inferior | padding-bottom: 10px | Todos los navegadores |
| padding-left | padding-left: value | Relleno izquierdo | padding-left: 20px | Todos los navegadores |
| box-sizing | box-sizing: value | Cálculo del modelo de caja | box-sizing: border-box | IE8+ |
📊 Border & Outline Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| border | border: width style color | Borde completo | border: 2px solid #000 | Todos los navegadores |
| border-width | border-width: value | Grosor del borde | border-width: 3px | Todos los navegadores |
| border-style | border-style: value | Estilo del borde | border-style: dashed | Todos los navegadores |
| border-color | border-color: value | Color del borde | border-color: red | Todos los navegadores |
| border-top | border-top: width style color | Borde superior | border-top: 1px solid blue | Todos los navegadores |
| border-right | border-right: width style color | Borde derecho | border-right: 2px dotted red | Todos los navegadores |
| border-bottom | border-bottom: width style color | Borde inferior | border-bottom: 3px double green | Todos los navegadores |
| border-left | border-left: width style color | Borde izquierdo | border-left: 1px solid gray | Todos los navegadores |
| border-radius | border-radius: value | Esquinas redondeadas | border-radius: 10px | IE9+ |
| border-image | border-image: source slice width outset repeat | Borde con imagen | border-image: url(border.png) 30 round | IE11+ |
| outline | outline: width style color | Contorno del elemento | outline: 2px solid red | Todos los navegadores |
📊 Background Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| background | background: color image repeat position size | Fondo completo | background: #fff url() no-repeat center | Todos los navegadores |
| background-color | background-color: value | Color de fondo | background-color: #ff0000 | Todos los navegadores |
| background-image | background-image: url() | Imagen de fondo | background-image: url('bg.jpg') | Todos los navegadores |
| background-repeat | background-repeat: value | Repetición de imagen | background-repeat: no-repeat | Todos los navegadores |
| background-position | background-position: value | Posición de imagen | background-position: center top | Todos los navegadores |
| background-size | background-size: value | Escalado de imagen | background-size: cover | IE9+ |
📊 Typography Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| font | font: style variant weight size/height family | Fuente completa | font: bold 16px/1.5 Arial | Todos los navegadores |
| font-family | font-family: name | Tipografía | font-family: 'Arial', sans-serif | Todos los navegadores |
| font-size | font-size: value | Tamaño de texto | font-size: 18px | Todos los navegadores |
| font-weight | font-weight: value | Grosor del texto | font-weight: bold | Todos los navegadores |
| font-style | font-style: value | Estilo de texto | font-style: italic | Todos los navegadores |
| line-height | line-height: value | Altura de línea | line-height: 1.6 | Todos los navegadores |
| text-align | text-align: value | Alineación horizontal | text-align: center | Todos los navegadores |
| text-decoration | text-decoration: value | Decoración de texto | text-decoration: underline | Todos los navegadores |
| text-transform | text-transform: value | Transformación de texto | text-transform: uppercase | Todos los navegadores |
📊 Flexbox Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: flex | Activa flexbox | display: flex | IE10+ |
| flex-direction | flex-direction: value | Dirección del eje principal | flex-direction: column | IE10+ |
| justify-content | justify-content: value | Alineación eje principal | justify-content: space-between | IE10+ |
| align-items | align-items: value | Alineación eje cruzado | align-items: center | IE10+ |
| flex | flex: grow shrink basis | Flexibilidad de ítem | flex: 1 | IE10+ |
📊 Grid Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: grid | Activa grid | display: grid | IE10+ (-ms-) |
| grid-template-columns | grid-template-columns: values | Columnas | grid-template-columns: 1fr 2fr | IE10+ (-ms-) |
| grid-template-rows | grid-template-rows: values | Filas | grid-template-rows: 100px auto | IE10+ (-ms-) |
| grid-gap | grid-gap: row column | Espaciado entre ítems | grid-gap: 20px 10px | IE10+ (-ms-) |
| justify-items | justify-items: value | Alineación horizontal | justify-items: center | IE10+ (-ms-) |
| align-items | align-items: value | Alineación vertical | align-items: center | IE10+ (-ms-) |
Quick Examples
css
CSS Code
/* Ejemplo Layout */
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
/* Ejemplo Tipografía */
.text {
font: bold 18px/1.6 'Arial', sans-serif;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
/* Ejemplo Animación */
.box {
transition: transform 0.3s ease;
transform: scale(1);
}
.box:hover {
transform: scale(1.1);
}
---Buenas prácticas y consejos:
- Especificar siempre fuentes de respaldo en font-family
- Usar unidades relativas (em, rem, %) para mejor responsividad
- Minimizar el uso de !important
- Probar propiedades CSS en distintos navegadores
- Usar propiedades abreviadas para reducir tamaño de archivo
- Considerar impacto en rendimiento de animaciones complejas
- Validar CSS con herramientas online
- Usar variables CSS para código mantenible
- Incluir prefijos para propiedades experimentales
- Agrupar propiedades relacionadas para mejor organización
🧠 Pon a Prueba tu Conocimiento
Listo para Empezar
Reference Knowledge Check
Prueba tu conocimiento sobre propiedades CSS.
3
Preguntas
70%
Para Aprobar
∞
Tiempo
∞
Intentos
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior