Leer om die voorkoms van jou webwerf te verbeter
Leer hoe om vorms met CSS te vorm, is 'n goeie manier om die voorkoms van jou webwerf te verbeter. HTML vorms is waarskynlik onder die lelikste dinge op die meeste webbladsye. Hulle is dikwels saai en utilitaristies en bied nie veel in die manier van styl nie.
Met CSS kan dit verander. Kombinasie van CSS met die meer gevorderde vormtekens kan 'n paar mooi vorms lewer.
Verander die kleure
Net soos met teks, kan jy die voorgrond en agtergrond kleure van vorm elemente verander.
'N Maklike manier om die agtergrondkleur van byna elke vormelement te verander, is om die agtergrondkleur-eiendom op die insetetiket te gebruik. Byvoorbeeld, hierdie kode pas 'n blou agtergrondkleur (# 9cf) op al die elemente toe.
insette {
agtergrondkleur: # 9cf;
kleur: # 000;
}
Om die agtergrondkleur van slegs sekere vormelemente te verander, voeg net teksarea by en kies vir die styl. Byvoorbeeld:
insette, teksarea, kies {
agtergrondkleur: # 9cf;
kleur: # 000;
}
Maak seker dat jy die teks kleur verander as jy jou agtergrondkleur donker maak. Kontrasterende kleure help om die vormelemente meer leesbaar te maak. Byvoorbeeld, teks op 'n donkerrooi agtergrondkleur is baie makliker om te lees as die tekskleur wit is. Byvoorbeeld, hierdie kode plaas wit teks op 'n rooi agtergrond.
insette, teksarea, kies {
agtergrondkleur: # c00;
kleur: #fff;
}
U kan selfs 'n agtergrondkleur op die vorm-tag self plaas. Onthou dat die vormmerker 'n blokelement is , dus die kleur vul die hele reghoek in, nie net die liggings van die elemente nie.
Jy kan 'n geel agtergrond by 'n blok element voeg om die area uit te beeld, soos volg:
vorm {
agtergrondkleur: #ffc;
}
Voeg grense by
Soos met kleure kan jy die grense van verskillende vormelemente verander. Jy kan 'n enkele grens rondom die hele vorm byvoeg. Maak seker dat jy opskrifte byvoeg, of jou vormelemente word reg langs die grens vasgelê.
Hier is 'n voorbeeld van die kode vir 'n 1-pixel swart grens met 5 pixels van vulling:
vorm {
grens: 1px solide # 000;
vulling: 5px;
}
U kan grense rondom meer as net die vorm self stel. Verander die grens van die insetitems om hulle uit te lig:
insette {
grens: 2px gestippel # c00;
}
Wees versigtig wanneer jy grense op insetkassies plaas, aangesien dit minder lyk as invoervakies, en sommige mense sal dalk nie besef dat hulle die vorm kan invul nie.
Kombineer stylfunksies
Deur u vormelemente met gedagtes en 'n paar CSS saam te voeg, kan u 'n mooi vorm opstel wat die ontwerp en uitleg van u webwerf komplementeer.