Ismerje meg, hogyan javíthatja webhelyének megjelenését
A CSS- tel való formázás megtanulása remek módja annak, hogy javítsa webhelyének megjelenését. A HTML formák vitathatatlanul a legtöbb weboldalon a legrondább dolgok között vannak. Gyakran unalmasak és haszonelvűek, és nem kínálnak sok stílust.
A CSS segítségével ez megváltozhat. A CSS és a fejlettebb űrlapkombinációk kombinálása egyes szép megjelenésű formákat eredményezhet.
Módosítsa a színeket
A szöveghez hasonlóan megváltoztathatja az űrlapelemek előtér és háttérszíneit is.
A legtöbb formai elem háttérszínének megváltoztatásának egyszerű módja a háttér-szín tulajdonság használata a beviteli címkén. Például ez a kód egy kék háttérszínt (# 9cf) tartalmaz minden elemen.
bemenet {
háttérszín: # 9cf;
szín: # 000;
}
Ha csak bizonyos űrlapelemek háttérszínét szeretné módosítani, csak adja hozzá a textarea területet, és válassza ki a stílust. Például:
bemenet, textarea, válassza a {
háttérszín: # 9cf;
szín: # 000;
}
Győződjön meg róla, hogy megváltoztatja a szöveg színét, ha sötét színt készít. A kontrasztos színek jobban olvashatóvá teszik az űrlapelemeket. Például a sötétvörös színű háttér színe sokkal könnyebben olvasható, ha a szöveg színe fehér. Például ez a kód piros háttérre helyezi a fehér szöveget.
bemenet, textarea, válassza a {
háttérszín: # c00;
szín: #fff;
}
A formanyomtatványon akár háttérszínt is elhelyezhet. Ne feledje, hogy az űrlap címke blokkelem , így a szín betölti a teljes téglalapot, nem csak az elemek helyét.
A blokk elemhez sárga hátteret adhat a terület kiemeléséhez:
form {
háttérszín: #ffc;
}
Határok hozzáadása
A színekhez hasonlóan megváltoztathatja a különböző űrlapelemek határait is. Egyetlen határt adhat az egész űrlap körül. Győződjön meg róla, hogy hozzáadja a kitöltést, vagy az űrlapelemek elakadnak a határ mellett.
Íme egy példa egy 1 képpontos fekete szegélyre, amely 5 képpontos kitöltéssel rendelkezik:
form {
határ: 1px szilárd # 000;
párnázottság: 5px;
}
A határokat több, mint maga az űrlap helyezheti el. Módosítsa a beviteli elemek szegélyét, hogy kiemelkedjenek:
bemenet {
határ: 2px szaggatott # c00;
}
Legyen óvatos, amikor határokat helyez a beviteli mezőkre, mivel kevésbé tűnnek a beviteli mezőnek, és egyesek nem veszik észre, hogy kitölthetik az űrlapot.
Kombinálja a stílus jellemzőit
Az űrlapelemeket gondolat és néhány CSS összeállításával létrehozhatja egy szép megjelenésű űrlapot, amely kiegészíti a webhely tervét és elrendezését.