შეიტყვეთ გაუმჯობესება ნახვა თქვენი საიტი
სწავლის როგორ სტილის ფორმები CSS არის დიდი გზა გასაუმჯობესებლად ნახვა თქვენი ნახვა. HTML ფორმები, სავარაუდოდ, ყველაზე უცნაურ თემებს შორის ყველაზე ვებ გვერდებზეა. ისინი ხშირად მოსაწყენი და უტილიტარულნი არიან და სტილის გზას არ აძლევენ.
CSS- ით, რომელსაც შეუძლია შეცვალოს. შერწყმა CSS უფრო მოწინავე ფორმით tags შეიძლება მიწოდება ზოგიერთი ლამაზი ორიენტირებული ფორმები.
შეცვალეთ ფერები
ისევე, როგორც ტექსტი, შეგიძლიათ შეცვალოთ ფორმის ელემენტების წინა პლანზე და ფონის ფერები.
თითქმის ყველა ფორმის ელემენტის ფონური ფერის შეცვლის მარტივი გზაა შეყვანის ტეგიზე ფონური ფერის გამოყენება. მაგალითად, ეს კოდი გამოიყენება ყველა ელემენტზე ლურჯი ფონის ფერის (# 9cf) ფერით.
შეყვანის {
ფონის ფერი: # 9 ც.
ფერი: # 000;
}
მხოლოდ გარკვეული ფორმის ელემენტების ფონის შეცვლა, უბრალოდ დაამატეთ ტექსტურა და აირჩიეთ სტილი. მაგალითად:
შეყვანა, ტექსტურიზაცია, აირჩიეთ {
ფონის ფერი: # 9 ც.
ფერი: # 000;
}
დარწმუნდით, რომ შეცვალოთ ტექსტის ფერი თუ თქვენი ფონის ფერი მუქი. კონტრასტული ფერები ხელს უწყობს ფორმის ელემენტებს უფრო მეტყველებს. მაგალითად, ტექსტის მუქი წითელი ფონის ფერი ბევრად უფრო ადვილად იკითხება, თუ ტექსტის ფერი თეთრია. მაგალითად, ეს კოდი წითელ ფონზე თეთრ ტექსტს ათავსებს.
შეყვანა, ტექსტურიზაცია, აირჩიეთ {
ფონის ფერი: # c00;
ფერი: # ff;
}
თქვენ ასევე შეგიძლიათ დააყენოთ ფონის ფერი ფორმა tag. გახსოვდეთ, რომ ფორმის ტეგი არის ბლოკ-ელემენტი , ასე რომ ფერი მთლიანი ოთხკუთხედში ავსებს, არა მხოლოდ ელემენტების ადგილმდებარეობას.
თქვენ შეგიძლიათ ყვითელი ფონის დამატება ბლოკ ელემენტზე, რათა მოედანი გამოდგეს, როგორც:
ფორმა {
ფონის ფერი: # fc;
}
სანიშნეს საზღვრები
ფერების მსგავსად, შეგიძლიათ შეცვალოთ სხვადასხვა ფორმის ელემენტების საზღვრები. თქვენ შეგიძლიათ დაამატოთ ერთი საზღვარი მთელს ფორმაზე. დარწმუნდით, რომ დაამატოთ padding, ან თქვენი ფორმა ელემენტები იქნება შეიკრიბა უფლება შემდეგ საზღვრის.
აქ არის მაგალითი კოდი 1-პიქსელი შავი საზღვრისთვის 5 პიქსელით padding:
ფორმა {
საზღვარი: 1px მყარი # 000;
padding: 5px;
}
საზღვრები უფრო მეტია, ვიდრე მხოლოდ ფორმა. შეტანის ელემენტების საზღვრის შეცვლა, რათა გამოირჩეოდნენ:
შეყვანის {
საზღვარი: 2px dashed # c00;
}
ფრთხილად იყავით, როცა შეყვანის ყუთებში საზღვრები ჩანერგილია, რადგან შეყვანის ყუთების მსგავსად ნაკლებად გამოიყურება და ზოგიერთმა ადამიანმა შეიძლება არ იცოდეს, რომ შეავსოთ ფორმა.
კომბინირებული სტილი მახასიათებლები
თქვენი ფორმის ელემენტებთან ერთად აზრისა და ზოგიერთი CSS- სთან ერთად შეგიძლიათ შეიქმნას ლამაზი ფორმა, რომელიც ავსებს თქვენს ვებ-გვერდის დიზაინსა და განლაგებას.