Uzziniet, kā uzlabot jūsu tīmekļa vietnes izskatu
Mācīšanās, kā veidot veidlapas ar CSS, ir lielisks veids, kā uzlabot jūsu vietnes izskatu. HTML veidlapas neapšaubāmi ir viena no ugliestām lietām lielākajā daļā tīmekļa lapu. Viņi bieži vien ir garlaicīgi un lietderīgi un nepiedāvā daudz stilu.
Ar CSS tas var mainīties. CSS apvienošana ar daudzveidīgākām veidlapu tagēm var nodrošināt dažas jaukas formas.
Mainiet Krāsas
Tāpat kā ar tekstu, varat mainīt veidlapu elementu priekšplāna un fona krāsas.
Vienkāršs veids, kā mainīt gandrīz visu formu elementa fona krāsu, ir ievades taga izmantot fona krāsu īpašību. Piemēram, šis kods attiecas uz visiem elementiem zilu fona krāsu (# 9cf).
ievade {
fona krāsa: # 9cf;
krāsa: # 000;
}
Lai mainītu tikai noteiktu formu elementu fona krāsu, vienkārši pievienojiet teksta apgabalu un izvēlieties stilu. Piemēram:
ievade, textarea, izvēlieties {
fona krāsa: # 9cf;
krāsa: # 000;
}
Noteikti mainiet teksta krāsu, ja fona krāsa kļūst tumša. Kontrastējošas krāsas palīdz padarīt veidlapas elementus salasāmākus. Piemēram, teksts tumši sarkanā fona krāsā ir daudz vieglāk lasāms, ja teksta krāsa ir balta. Piemēram, šis kods novieto baltu tekstu uz sarkanā fona.
ievade, textarea, izvēlieties {
fona krāsa: # c00;
krāsa: #fff;
}
Jūs pat varat veidot fona krāsu veidlapas tagā. Atcerieties, ka veidlapas tags ir bloķēšanas elements , tāpēc krāsa aizpilda visu taisnstūri, nevis tikai elementu atrašanās vietas.
Jūs varat pievienot dzeltenu fonu bloķēšanas elementam, lai apgabals izceltu, piemēram:
forma {
fona krāsa: #ffc;
}
Pievienot robežas
Kā ar krāsām, jūs varat mainīt dažādu formu elementu robežas. Varat pievienot vienu robežu ap visu formu. Pārliecinieties, vai esat pievienojis polsterējumu, vai arī jūsu veidlapas elementi tiks iestrēdzēti tieši pie robežas.
Tālāk ir piemērs kodam melnā 1-pikseļu malai ar 5 pikseļu polsterējumu:
forma {
robeža: 1px cietais # 000;
polsterējums: 5 pikseļi;
}
Jūs varat novietot robežas vairāk nekā tikai pati forma. Mainiet ieejas vienumu robežu, lai tās izceltu:
ievade {
robeža: 2 pikseļu punktiņi # c00;
}
Esiet piesardzīgs, kad jūs ievietojat robežas ar ievades lodziņiem, jo tie izskatās mazāk kā ievades lodziņi, un daži cilvēki, iespējams, neapzinās, ka viņi var aizpildīt veidlapu.
Apvienot stila iezīmes
Novietojot veidlapas elementus ar domu un kādu CSS, jūs varat izveidot jauku meklējamu formu, kas papildina jūsu vietnes dizainu un izkārtojumu.