Mafomu Athu ndi CSS

Phunzirani Kupititsa patsogolo Maonekedwe a Website Yanu

Kuphunzira momwe mungayesere mafomu ndi CSS ndi njira yabwino yowonjezera maonekedwe a webusaiti yanu. Mafomu a HTML akutsutsana pakati pa zinthu zoipitsitsa pa masamba ambiri. Nthawi zambiri zimakhala zosangalatsa komanso zogwiritsira ntchito ndipo sizipereka zambiri pamayendedwe.

Ndi CSS, izi zingasinthe. Kuphatikiza CSS ndi mawonekedwe apamwamba kwambiri angapereke mitundu yowoneka bwino.

Sinthani Mitundu

Mofanana ndi malemba, mungasinthe mitundu yoyambirira ndi mizere ya mawonekedwe a mawonekedwe.

Njira yosavuta yosinthira mtundu wachibadwidwe wa pafupifupi mtundu uliwonse wa mawonekedwe ndi kugwiritsa ntchito malo a mtundu wachikulire pamtundu wolembera. Mwachitsanzo, code iyi imagwiritsa ntchito mtundu wa buluu (# 9cf) pa zinthu zonse.

cholowa {
zojambulajambula: # 9cf;
Mtundu: # 000;
}}

Kusintha mtundu wa chiyambi cha mawonekedwe ena okha, ingowonjezerani textarea ndikusankha kwa kalembedwe. Mwachitsanzo:

zolemba, textarea, kusankha {
zojambulajambula: # 9cf;
Mtundu: # 000;
}}

Onetsetsani kuti mutembenuza mtundu wa maonekedwe ngati mutayatsa mdima wanu. Mitundu yosiyana imathandiza kupanga mawonekedwewo kukhala omveka bwino. Mwachitsanzo, malemba pamtundu wakuda wofiira amawerengeka mosavuta ngati maonekedwe ake ndi oyera. Mwachitsanzo, chikhochi chimalemba zoyera pamsana wofiira.

zolemba, textarea, kusankha {
mzere wa kumbuyo: # # c00;
mtundu: #fff;
}}

Mukhoza kuyika mtundu wachikulire pa fomu tageni. Kumbukirani kuti mawonekedwe a fomu ndi chinthu chofunika kwambiri , choncho mtundu umadzaza lonse lonse, osati malo okhawo.

Mukhoza kuwonjezera chikwangwani kumtunda kuti mupange dera lanu, monga izi:

mawonekedwe {
zojambulajambula: #ffc;
}}

Onjezani malire

Mofanana ndi mitundu, mungasinthe malire a mawonekedwe osiyanasiyana. Mukhoza kuwonjezera malire amodzi pozungulira mawonekedwe onse. Onetsetsani kuti muwonjezere padding, kapena zinthu zanu za mawonekedwe zidzakanikiridwa pafupi ndi malire.

Pano pali chitsanzo cha ndondomeko yamtundu wakuda wa pixel wakuda ndi pixel 5 za padding:

mawonekedwe {
malire: 1px olimba # 000;
padding: 5px;
}}

Mukhoza kuika malire mozungulira kuposa mawonekedwe okhaokha. Sinthani malire a zinthu zopangira kuti awawonetsere:

cholowa {
malire: 2px adasambira # c00;
}}

Samalani mukaika malire pa bokosi lopangira pamene akuwoneka ngati ochepa ngati bokosi lolowera apo, ndipo anthu ena sangadziwe kuti akhoza kudzaza mawonekedwe.

Gwirizanitsani Zithunzi Zojambula

Mwa kusonkhanitsa zinthu zanu za mawonekedwe ndi maganizo ndi CSS, mukhoza kukhazikitsa mawonekedwe abwino omwe amamaliza kupanga ndi kusintha tsamba lanu.