Aprende a mellorar o aspecto do teu sitio web
Aprender formas de estilo con CSS é unha boa forma de mellorar o aspecto do teu sitio web. Os formularios HTML son, posiblemente, entre as cousas máis feas na maioría das páxinas web. Son moitas veces aburridas e utilitarias e non ofrecen moito no camiño do estilo.
Con CSS, iso pode cambiar. A combinación de CSS coas etiquetas de formulario máis avanzadas pode ofrecer algúns formularios de aspecto agradable.
Cambia as cores
Do mesmo xeito que co texto, pode cambiar as cores de fondo e fondo dos elementos do formulario.
Un xeito doado de cambiar a cor de fondo de case todos os elementos forma é usar a propiedade de cor de fondo na etiqueta de entrada. Por exemplo, este código aplica unha cor de fondo azul (# 9cf) en todos os elementos.
entrada {
cor de fondo: # 9cf;
cor: # 000;
}
Para cambiar a cor de fondo de só certos elementos de formulario, engada textarea e seleccione o estilo. Por exemplo:
entrada, textarea, seleccione {
cor de fondo: # 9cf;
cor: # 000;
}
Asegúrese de cambiar a cor do texto se fai escura a súa cor de fondo. As cores contrastantes axudan a que os elementos do formulario sexan máis lexibles. Por exemplo, o texto nunha cor de fondo vermello escuro é moito máis fácil de ler se a cor do texto é branca. Por exemplo, este código coloca o texto en branco sobre fondo vermello.
entrada, textarea, seleccione {
cor de fondo: # c00;
cor: #fff;
}
Podes incluso poñer unha cor de fondo na etiqueta do formulario. Lembra que a etiqueta do formulario é un elemento de bloque , polo que a cor enche o rectángulo enteiro, non só as localizacións dos elementos.
Pode engadir un fondo amarelo a un elemento de bloque para destacar a zona, así:
forma {
cor de fondo: #ffc;
}
Engadir bordos
Do mesmo xeito que coas cores, pode cambiar os bordos de varios elementos de formulario. Pode engadir un único bordo ao redor do formulario completo. Asegúrese de engadir o recheo ou os elementos do formulario quedarán atascados á beira do borde.
Aquí tes un exemplo de código para un borde negro de 1 píxel con 5 píxeles de recheo:
forma {
bordo: 1px sólido n. º 000;
padding: 5px;
}
Pode poñer as fronteiras máis que o propio formulario. Cambia o bordo dos elementos de entrada para resaltar:
entrada {
bordo: 2px trazado # c00;
}
Teña coidado cando coloque as fronteiras nas caixas de entrada cando parezan menos as caixas de entrada, e algunhas persoas non se dan conta de que poden cubrir o formulario.
Combina as características do estilo
Ao axustar os seus elementos de forma con pensamento e algúns CSS, pode configurar un bo aspecto que complementa o deseño e o deseño do seu sitio.