Aplicarea stilurilor formularelor CSS
Într-una din lecțiile HTML, puteți să vă familiarizați cu formularele web de bază și conceptele de bază despre ele. Scopul acestei lecții este de a arăta că puteți aplica stiluri formularelor, precum și altor elemente.
Adică folosind clase, identificatori și selectori pentru a seta dimensiunea, culoarea de fundal, forma și culoarea cadrului, etc.
În această lecție, aplicația stilurilor asupra următoarelor elemente va fi arătată și explicată în mod detaliat: câmpul de text, butonul, caseta de selectare, radiobutonul. În plus, este afișată crearea unui simplu format de înregistrare.
Aplicarea stilului în câmpul de testare CSS
Pe multe site-uri există un șir de căutare - uneori acesta este un câmp standard și, uneori, ceva original care se potrivește bine cu designul "așa" al site-ului.
Mai jos este un câmp de test cu o frontieră verde și ușor rotunjită. În fundal, puteți vedea cuvântul "Căutare", care dispare când plasați mouse-ul sau tastați. De asemenea, când plasați mouse-ul, culoarea ramei se schimbă ușor de la verde deschis la mai întunecat.
display: block - oferă câmpului text o proprietate a blocului (setarea dimensiunii, culorii marginii, indenturilor etc.);
căutarea_1: focalizare - evenimentul "faceți clic" pe câmpul de text - adică focalizați-vă pe acesta pentru a începe să scrieți. Pentru acest eveniment, este setată numai culoarea frontală, dar puteți specifica alte opțiuni;
contur: nici una - granița câmpului nu va fi evidențiată (adică va fi invizibilă);
placeholder = "Căutare" - textul afișat atunci când câmpul text este inactiv (până când textul este imprimat);
Semnificația parametrilor rămași ar trebui să vă fie cunoscuți din lecțiile anterioare.
Următorul exemplu „șirul de căutare“ este un câmp de text, care concentrându-se pe ea, contur evidențiat de culoare verde strălucitor și arată ca și în cazul în care este umbra a cadrului principal. De asemenea, câmpul are mai multe colțuri rotunjite decât cel anterior și fundalul are o nuanță verde deschis.
box-shadow: - adaugă o umbră elementului;
inset - înseamnă că va fi afișat în interiorul elementului;
0 0 4px RGBA (0,0,0,0.1) - schimbare de offset X. Y. Raza, rgb culoare estompare RGBA întindere - format specific pentru determinarea culorii (0,0,0.);
0 0 6px 3px # CEFE90 - Shift cu X. Shift de Y. Blur, raza de întindere, culoare;
În detaliu, umbra în cutie: proprietatea și parametrii ei sunt discutate în una din lecțiile anterioare.
Stil pentru butonul CSS
Primul exemplu prezintă butonul "Căutare". care are un cadru ușor rotunjit. În starea inactivă de culoare gri ei de lumină, care este atunci când treci cu modificările cursorul mouse-ului o lumină verde de către trasition proprietate: (care este discutat în detaliu în lecția precedentă). La fel ca butonul în sine, iar în prezent textul în interiorul acestuia prin intermediul proprietăților umbra box-umbra: și text-umbra: discutat mai sus (precum și într-o sesiune anterioară). Pentru a demonstra apăsarea unui buton, se mișcă un pixel în jos (când este apăsat) - această condiție este redată
în evenimentul .but_test: active - top: 1px;
Un alt exemplu este butonul "Conectare". Are un cadru foarte rotund. În starea inactivă, umbra gri a butonului de pe contur este slab vizibilă. Când poziționați cursorul mouse-ului, culoarea textului din interiorul butonului se schimbă în albastru deschis și apare o umbră de-a lungul conturului de aceeași culoare. Când apăsați butonul, se mișcă un pixel în jos.
Stil pentru caseta de selectare CSS
Spre deosebire de exemplele anterioare pentru "caseta de selectare" stilul nu este setat de clase simple, ci cu ajutorul unui selector special - introduceți [type = "checkbox"]. Acest lucru ar da flagului un fel special de "mult complicat" nu trebuie să - trebuie doar să ascundă elementul original pentru a pune în locul său imaginea.
display: none - atributul care ascunde elementul original;
Întrebarea apare - dacă caseta de validare este ascunsă, atunci ce trebuie să apăs eu?
Pentru a simula un clic pe caseta de validare, se fac următoarele: fiecare pavilion are propriul id = ""
Numele etichetei este cuprins între etichete . și că acest nume aparține casetei de selectare cu id = "cb1", apoi pentru a intra în etichetă, trebuie să scrieți numele aceluiași id.
Folosind etichete în interior . există o imitație a unui clic pe steag.
Folosind selectorul dublu, selectați întreaga etichetă în interiorul etichetelor . care aparțin elementului - casetă de selectare:
introduceți [type = "checkbox"] + interval de etichetă
Și, în cele din urmă, pentru ceea ce este făcut totul - pentru că drapelul are două stări, atunci aveți nevoie de două imagini:
Caseta de selectare nu a fost bifată:
Deoarece imaginile au o dimensiune de 28 pixeli, lățimea: și înălțimea: atributele trebuie să aibă aceeași valoare (28px);
Bifați caseta 1
Bifați caseta 2
Bifați caseta 3
Aplicarea stilului la RadioButton CSS
Pentru a aplica stilul elementului radiobutton, trebuie să faceți totul la fel ca pentru caseta de selectare (elementul anterior). Etichetele și numele lor li se atribuie codul de identificare și utilizează intervalul de timp, clicul fiind simulat.
Imagini pentru un exemplu:
Radiobutton nu a fost verificat:
Radiobutton nu a fost verificat:
Buton radio 1
Butonul radio 2
Butonul radio 3
Crearea unui stil pentru un formular CSS
În câmpul "login" există o imagine de jumătate de om, aici este:
În câmpul în care trebuie să introduceți parola, imaginea cheii este plasată:
Aceste imagini sunt desenate în Photoshop pe un fundal transparent.
Majoritatea codului trebuie să vă fie deja clar (pe baza informațiilor furnizate în paragrafele anterioare și lecțiile anterioare), însă trebuie explicate mai multe linii:
#h: după. h: înainte - cu aceste identificatori, se specifică o linie care accentuează textul titlului. Valoarea parametrilor: 2px; stânga: 8px; și top: 45px; setați înălțimea liniei și liniuțele din partea superioară și din stânga a blocului, altfel această linie va fi în partea superioară a textului.
#my_field - în interiorul acestui identificator se stabilește că dimensiunea cadrului care înconjoară întregul formular va fi zero.
Cunoștințele prezentate în această lecție sunt suficiente pentru a începe să experimentați proiectarea formularelor web și a elementelor individuale.
Articole similare
Trimiteți-le prietenilor: