El CSS: definiendo estilos
Definiciones CSS
En esta etapa vamos a redondear el aspecto de la claculadora definiendo los estilos CSS.
Si tienes a mano el documento web verás a que elementos corresponde cada clase y con el boceto sabrás el aspecto qeu debe teener cada elemento y donde debe estar.
Esta calculadora parece una tabla ¿verdad? pues vamos a usar el layout grid para toda ella.
Con el HTML y este archivo CSS linkado ya tendrás la parte gráfica de la claculador. Falta la lógica que la haga funcionar, falta el Javascript.
@charset "utf-8";
.marco {
border: 2px solid gray;
width: fit-content;
padding: 8px;
margin:0 auto;
display: grid;
grid-gap: 10px;
grid-template-areas:
"visor visor visor visor"
". . . s"
". . . r"
". . . p"
"sgn . . d"
"eq eq eq clr";
}
.marco .tecla{
text-align: center;
height: 32px;
width: 50px;
line-height: 32px;
cursor: pointer;
box-shadow: 1px 1px 3px 2px lightgray ;
}
.marco .tecla:active, .marco .visor{
box-shadow: 0px 0px 3px 2px lightgray ;
}
.marco .visor{
border: 1px solid lightgray;
grid-area: visor;
height: 32px;
line-height: 32px;
padding-right: 8px;
text-align: right;
cursor: default;
box-shadow: none;
}
.marco .signo{
grid-area: sgn;
}
.marco .borrar{
grid-area: clr;
background: aliceblue
}
.marco :is(.oper_S, .oper_R, .oper_P, .oper_D){
background: gray;
color: white;
}
.marco .oper_S{
grid-area: s;
}
.marco .oper_R{
grid-area: r;
}
.marco .oper_P{
grid-area: p;
}
.marco .oper_D{
grid-area: d;
}
.tecla.enter{
width: auto;
grid-area: eq;
}
Comentarios
La regla .marco contiene un borde para encerarr la calculadora y suancho va a venir dado por el conentido, o sea, por el ancho de las teclas.
Cada tecla va a tener sus clases. Las clases las vamos a definir no solo por el apecto sino también pensado en el script.
Esta regla define como se colocan las teclas en la calculadora mediante un layout Grid
El grid se define mediante areas y por disposición automática: los números y el punto decimal van colocados según están escritos en la páginas.
El visor, cambio de signos, operadores y borrado se colocan por sus nombres de area.
Las teclas (.tecla) definen el tamaño, entrado vertical con line-height. el box-shadow le da el aspecto de tecla elevada para mostrar un aspecto 3D o relieve
La tecla enter debe tener un ancho automático para ocupar más de una celda en el grid
En las reglas como .signo .borrar .oper_ se nombran las areas, para ser usadas en el Grid
El pseudo-slector :active aplicado a .tecla hace que desaparezca la sombra al pulsar sobre la tecla con el ratón, pierde el relieve dando la sensación de que la tecla es presionada