Formák stílusai css - leckék css
Stílusok alkalmazása CSS formákra
Az egyik HTML leckében megismerkedhet az alapvető webes űrlapokkal és alapvető fogalmakkal. A lecke célja annak bemutatása, hogy stílusokat alkalmazhat formákra, valamint más elemekre. Vagyis az osztályok, azonosítók és szelektorkészletek használatával beállíthatja a keret méretét, háttérszínét, alakját és színét stb.
Ebben a leckében a stílusok alkalmazását az alábbi elemekre világosan meg lehet jeleníteni és részletesen megmagyarázni: szövegmező, gomb, jelölőnégyzet, rádióbutton. Ezenkívül megjelenik egy egyszerű gyönyörű regisztrációs űrlap létrehozása.
Stílus alkalmazása a CSS tesztmezőhöz
Sok helyen van egy keresőszöveg - néha ez egy szabványos mező, néha pedig valami eredeti, ami jól illeszkedik a webhely "ilyen" designjába.
Az alábbiakban egy zöld mező és egy kissé lekerekített testmező található. A háttérben megjelenik a "Keresés" szó, amely eltűnik, amikor egérrel vagy gépeléssel lebeg. Emellett az egér mozgatásakor a keret színe simán változik a világoszöldtől a sötétebbé.
kijelző: blokk - a szövegmező egy blokk tulajdonságot ad (beállítja a méretet, a határszínt, a behúzást stb.);
search_1: fókusz - esemény "kattintson" a szövegmezőre - vagyis az írás kezdetekor. Ehhez az eseményhez csak a határszín beállított, de megadhat más paramétereket is;
vázlat: nincs - a mező határa nem kerül kiemelésre (azaz láthatatlan lesz);
placeholder = "Keresés" - szöveg, amely akkor jelenik meg, ha a szövegmező inaktív (a szöveg nyomtatásáig);
A fennmaradó paraméterek jelentése az előző leckékből ismeretes.
A "Keresési sor" következő példája olyan szövegmező, amely a rajzra összpontosított állapotban világos zöld színnel kiemelve jelenik meg, és úgy néz ki, mintha árnyék lenne a fő keretből. Továbbá a mezőnek több kerek sarka van, mint az előző, és a háttér világos zöld színnel rendelkezik.
box-shadow: - hozzáadja az árnyékot az elemhez;
beillesztés - azt jelenti, hogy az az elemen belül megjelenik;
0 0 4px rgba (0,0,0,0,1) - eltolódás X. eltolódás Y. nyújtási sugárban, rgb-szín, blur rgba (0,0,0) - speciális formátum a szín meghatározásához;
0 0 6px 3px # CEFE90 - Shift az X. Shift segítségével Y. Blur, nyújtó sugara, szín;
Részletesen, a box-shadow: property és paramétereit az előző leckek egyikében tárgyaljuk.
Stílus a CSS gombhoz
Az első példa a "Keresés" gombot mutatja. amely kissé lekerekített kerettel rendelkezik. Az inaktív állapotban világosszürke színű, amely az egér kurzorának mozgatásakor simán, zölden zöldre változik a transzlációs tulajdonság használatával: (amelyet részletesen az előző leckében tárgyalunk). Mind a gomb, mind a szöveg belsejében árnyék van árnyékkal: és text-shadow: a fent tárgyalt tulajdonságok (valamint a korábbi lecke). Egy nyomógomb megnyomására egy pixel lefelé mozog (amikor megnyomja) - ez a feltétel meg van adva
a .but_test eseményen: aktív - top: 1px;
Egy másik példa a "Bejelentkezés" gombra. Nagyon lekerekített kerete van. Inaktív állapotban a kontúron lévő gomb szürke árnyéka gyengén látható. Amikor az egérmutatót lenyomva tartja, a gombon belül megjelenő szöveg színe világos kékre változik, és egy árnyék jelenik meg az azonos színű kontúr mentén. Amikor megnyomja a gombot, egy pixel lefelé mozog.
Stílus jelölőnégyzet CSS
A "checkbox" stílus korábbi példáitól eltérően nem egyszerű osztályok, hanem egy speciális választó - bemenet [type = "checkbox"] segítségével van beállítva. Ez a zászlót egy különleges "nagyon trükkös" nem kell - csak el kell rejteni az eredeti elemet, hogy helyreállítsa a képet.
display: none - az eredeti elemet elrejtő attribútum;
A kérdés jelenik meg - ha a jelölőnégyzet el van rejtve, akkor mit kell megnyomni?
A jelölőnégyzet kipipálásának szimulálásához a következőket kell tenni: minden zászló saját id = ""
A címke neve a címkék közé kerül . és hogy ez a név az id = "cb1" jelölőnégyzethez tartozott, majd a címkén belüli felhasználásra, akkor ugyanazt a azonosító nevet kell írni.
A span belső címkék használata . van egy utánzás egy kattintás a zászlót.
A kettős választó használatával jelölje ki az összes szóközt a címkéken belül . amelyek az elemhez tartoznak - jelölőnégyzet:
input [type = "jelölőnégyzet"] + label span
És végül, mert mindez azért történt, mert a zászlónak két állama van, akkor két képre van szüksége:
A jelölőnégyzet nincs bejelölve:
Mivel a képek mérete 28 képpont, a szélesség: és a magasság: attribútumoknak azonos értékűnek kell lenniük (28px);
Jelölje be a 1-es mezőt
Jelölje be a 2. kockát
Jelölje be a 3. kockát
Stílus alkalmazása a RadioButton CSS-hez
Annak érdekében, hogy a stílust a rádióbutton elemére alkalmazzuk, mindent meg kell tennie ugyanaz, mint a jelölőnégyzet (az előző tétel) esetében. A címkéket és nevüket az azonosítójukhoz rendelik hozzá, és a span használatával a kattintást szimulálják.
Képek egy példahez:
A rádiógomb nincs ellenőrizve:
A rádiógomb nincs ellenőrizve:
Rádió gomb 1
Rádiós gomb 2
Rádiógomb 3
Stílus létrehozása CSS formához
A "belépés" mezőben egy fél ember képe látható, itt van:
Azon a mezőn, ahol meg kell adnia a jelszót, a kulcsképet el kell helyezni:
Ezeket a képeket a Photoshopban rajzolja át átlátszó háttérrel.
A legtöbb kódnak már egyértelműnek kell lennie (az előző bekezdésekben és az előző tanórákban megadott információk alapján), de több sort is tisztázni kell:
#h: után. h: előtte - ezekkel az azonosítókkal egy sort ad meg, amely kiemeli a cím szöveget. Paraméter magasság: 2px; balra: 8px; és top: 45px; állítsa be a vonal és a behúzások magasságát a blokk felső és bal oldalán, különben ez a sor a szöveg tetején lesz.
#my_field - ezen az azonosítón belül megállapítást nyer, hogy a teljes formátumot körülvevő keret mérete nulla lesz.
A leckében megfogalmazott ismeretek elegendőek ahhoz, hogy elkezdjen kísérletezni a webes űrlapok és az egyes elemek tervezésével.