Referencia de CSS

La Hoja de estilos en cascada o CSS controla el estilo y diseño de sitios web y aplicaciones. En App Maker, puedes usar CSS para especificar los colores, fuentes y bordes de los widgets, entre otras opciones, con el fin de personalizar el aspecto de tu app.

Agrega tu CSS en la pestaña Estilo, en el menú a la derecha del Editor de páginas. Por ejemplo, para que un botón llamado Button1 se vuelva color anaranjado, puedes seleccionar el botón en tu página y agregar el código siguiente en la pestaña Estilo:

.app-NewPage-Button1 {
      background-color: orange;
    }
    

CSS básico

Fuentes

Efecto CSS/Estilo Original Con estilo aplicado Valores posibles
Negrita font-weight: bold; Texto de ejemplo Texto de ejemplo normal, negrita
Cursiva font-style:italic; Texto de ejemplo Texto de ejemplo normal, cursiva
Tachar text-decoration: line-through; Texto de ejemplo Texto de ejemplo subrayado, tachado, línea alta
Color del texto color: red;
color: #ff0000;
Texto de ejemplo Texto de ejemplo nombre del color o un código HTML de color
Tamaño del texto font-size:20px; Texto de ejemplo Texto de ejemplo tamaño de píxel o unidades em
Alineación del texto text-align: right; Texto de ejemplo Texto de ejemplo izquierda, centro, derecha

Paneles, botones, etcétera.

Bordes

Efecto CSS/Estilo Original Con estilo aplicado
Agregar o cambiar bordes border: 1px red solid;
Quitar bordes border: none;

Bordes redondeados

Efecto CSS/Estilo Original Con estilo aplicado
Redondear todas las esquinas border-radius:5px;
Redondear las esquinas de forma individual border-top-right-radius: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
Texto de ejemplo
Texto de ejemplo

Color del fondo

Efecto CSS/Estilo Original Con estilo aplicado
** Agregar o cambiar color ** background-color: lightgreen;
Quitar color background: none;

Cursor

Efecto CSS/Estilo Original Con estilo aplicado
Puntero (elementos en los que se puede hacer clic) cursor: pointer; Texto de ejemplo Texto de ejemplo
Flecha (elementos en los que no se puede hacer clic) cursor: default; vínculo de ejemplo vínculo de ejemplo

Controla el contenido desbordado

A veces, el contenido de tu app es demasiado grande para el contenedor. CSS puede definir cómo responde tu app cuando el contenido se desborda de su contenedor, ya sea un texto demasiado grande para un widget de etiqueta o un grupo de widgets que no entra en el panel.

Oculta el contenido desbordado

Efecto CSS/Estilo Original Con estilo aplicado
Cortar contenido desbordante
overflow: hidden;
CSS ES INCREÍBLE
CSS ES INCREÍBLE
Habilitar el desplazamiento
overflow: auto;
CSS ES INCREÍBLE
CSS ES INCREÍBLE
Cortar el contenido que es demasiado ancho
overflow-x: hidden;
CSS ES INCREÍBLE
CSS ES INCREÍBLE
Habilitar el desplazamiento para contenido que es demasiado largo
overflow-y: auto;
CSS ES INCREÍBLE
CSS ES INCREÍBLE

Usa puntos suspensivos para el texto desbordado

Efecto CSS/Estilo Original Con estilo aplicado
Puntos suspensivos overflow: hidden;
text-overflow: ellipsis;
Internacionalización
Internacionalización

Cambia los efectos estándar del navegador

Tu navegador tiene una forma estándar de mostrar la mayoría de los elementos interactivos. Por ejemplo, los vínculos que ya visitaste, en general, se muestran subrayados y en color morado. Puedes volver a definir estos estilos con pseudoselectores CSS.

Desplazamiento

La acción de posicionar el mouse sobre un elemento se llama desplazamiento. Los botones y vínculos tienen efectos de desplazamiento integrados, pero puedes agregar efectos de desplazamiento a cualquier widget de App Maker, incluso los campos de entrada y paneles.

CSS/Estilo Original Con estilo aplicado
.blueButton {background-color: blue;}
.blueButton:hover {background-color: pink;}
.testClass {}
.testClass:hover {background-color: #FFA500;}
Texto de ejemplo
Texto de ejemplo

Enfoque y el modificador !important

Interactuar con un elemento hace que se enfoque. Por ejemplo, cuando haces clic en un cuadro de entrada, aparece un cursor de texto. Tener enfoque significa que todo lo que se ingresa desde el teclado va directo al elemento enfocado.

Algunas veces, tus estilos entran en conflicto con los estilos definidos por el navegador o los temas de App Maker. Si tu CSS tiene problemas para realizar el procesamiento, intenta agregar el modificador !important a tu estilo para asegurarte de que no lo anule el estilo del navegador o del tema. Trata de no aplicar el modificador demasiado; podría anular estilos integrados importantes.

CSS/Estilo Original Con estilo aplicado
.inputClass {}
.inputClass:focus {border:1px solid red;}
.inputClass1 {}
.inputClass1:focus {border:1px solid red !important;}

Pasos siguientes