კასკადური სტილის ფურცლების გამოყენების გარეშე, ფორმის ელემენტები გამოჩნდება ბრაუზერის გამოყენების შესაბამისად ოპერაციული სისტემა ნაგულისხმევი პარამეტრები. მაგრამ cSS- ის გამოყენებით. საშუალებას გაძლევთ შექმნათ ფორმები, რომლებიც შეესაბამება თქვენს საიტზე დიზაინს.

გადაწყვეტილება
ფორმა ელემენტის სტილი, ისევე როგორც ნებისმიერი სხვა HTML ელემენტის, შეიძლება მითითებული გამოყენებით CSS.

ნახაზი. 6.1. ნაგულისხმევი ფორმა ხედი Firefoxi ბრაუზერში

სურათები ნახაზი. 6.1 ფორმა გაფორმებულია Firefox ბრაუზერის მიერ გამოყენებული ნაგულისხმევი პარამეტრების მიხედვით Windows XP- ზე. მისი სახეობები შეიცვლება სხვადასხვა ბრაუზერებში სხვადასხვა პლატფორმების დროს. ქვემოთ არის ტიპიური ფორმა:

"http://www.w3.org/1999/xhtml"lang \u003d "en-us"\u003e\u003e

Რა გქვია?

აირჩიეთ საყვარელი ფერი: ცისფერი წითელი მწვანე ყვითელი

სართული?
მამაკაცის
ქალი

კომენტარი:

ამ ფორმის გამოჩენა შეიძლება შეიცვალოს ელემენტების სტილის მიხედვით:

ფორმა (საზღვარი: 1px dotted #Aaaaaaa; padding: 0 .5EM;) ფორმა div (margin-bottom: 1EM;) შეყვანა (ფერი: # 00008b; Background-Color: # Add8E6; სიგანე: 100px; ფერი: # 00008b; ფონის ფერი: # add8e6; სასაზღვრო: 1px მყარი # 00008b;) Textarea (სიგანე: 200px; სიმაღლე: 40px; ფერი: # 00008b; ფონის ფერი: # add8e6; სასაზღვრო: 1px მყარი # 00008b;)

ახლა ფორმა ჰგავს ფიგურაში. 6.2.

დისკუსია
როგორც თქვენ ალბათ მიხვდა, Stetpoints სტილის HTML ელემენტები ფორმა, შეყვანა, ტექსტურია და აირჩიეთ ისინი მიმართავენ თითოეულ მათგანს, რომელიც მდებარეობს გვერდზე, რომელთანაც სტილი მაგიდის ფაილი ასოცირდება. საველე დარგების სახით შეცვალოს, ჩვენ შეგვიძლია გამოვიყენოთ სხვადასხვა თვისებები. გამოყენებით CSS შეგიძლიათ მართოთ თითქმის ყველა ასპექტს სფეროში :

შეყვანა (ფერი: # 00008b; ფონის ფერი: # add8e6; სასაზღვრო: 1px მყარი # 00008b; შრიფტი: 0 .9EM arial, helvetica, sans-serif; padding: 0 .2EM;

საბჭო
ფორმები და ფონის ფერი. თქვენი საიტის სტუმრების ნაწილი შეიძლება შეიცავდეს ფერების ცუდად და ნაწილს შეუძლია გამოიყენოს ხმა ბრაუზერი. აქედან გამომდინარე, ფერები არასდროს არ უნდა შეასრულოს მნიშვნელოვანი ფუნქციები - მაგალითად, ინსტრუქციები, როგორიცაა "ყვითელი ველი, რომელიც უნდა შეავსოთ", უნდა იყოს სრული აკრძალვა.

განვიხილოთ თვისებები უფრო დეტალურად:

ლაბორატორიული სამუშაო ნომერი 4

კასკადური სტილის მაგიდები (CSS)

სამუშაოების მიზანი

აკმაყოფილებდეს კასკადური მაგიდის კონცეფციას styles CSS., ასევე მათი გამოყენების პრაქტიკული უნარების მოპოვება.

თეორიული ინფორმაცია.

Internet Explorer. გთავაზობთ თქვენს სტილს, მოუწოდა default. ეს სტილი მოიცავს თეთრი სუფთა ფონის, შავი შრიფტის ფერის, ყველა ცნობას ხაზს უსვამს და ლურჯი და ა.შ., რა, თუ არ მოგწონს ეს ყველაფერი? თქვენ უკვე იცით, თუ როგორ უნდა შეიცვალოს სხვადასხვა ატრიბუტები პირდაპირ. მაშინაც კი, თუ იგივე ობიექტები იგივეა, თქვენ უკვე იცით, თუ როგორ უნდა გამოიყენოთ კლასები. მაგრამ არსებობს კიდევ ერთი შესაძლებლობა. დოკუმენტის მთელი სტილის განსაზღვრის მიზნით, ე.წ. იერარქიული სტილის ცხრილები გამოიყენება (კასკადური სტილის ფურცლები - CSS), რომლებიც სხვადასხვა ობიექტების თვისებების კომპლექტი არიან. რაღაცები, რომლებიც კლასებს ჰგავს, მაგრამ თუ კლასი იქმნება დოკუმენტში და შეიძლება გამოყენებულ იქნას და არ არის გამოყენებული, მაშინ CSS, თუ ეს დაკავშირებულია, დანადგარები გავლენას ახდენს დოკუმენტში ყველა ობიექტზე.

შესავალი CSS.

CSS ძალიან ჰგავს კლასებს, მხოლოდ განსხვავებით, რომ სტილი აღწერილია მათთვის უკვე ცნობილი ობიექტისთვის. ვიზუალური მაგალითისთვის, შეამოწმეთ თქვენი ოთახი ახლა (ოფისი, დარბაზი ...), რომელშიც თქვენ ხართ. რა თქმა უნდა, თქვენ ნახავთ ბევრ სხვადასხვა ნივთს (მაგიდა, სკამი, ფანჯარა, კომპიუტერი). თითოეული მათგანი ობიექტის ობიექტს აქვს მახასიათებლები და თქვენ უნდა გააკეთოთ ამ ნივთების სია და მათი მახასიათებლები. იქნებ რაღაც შემდეგნაირად გექნებათ:

მაგიდა:
ყავისფერი
მასალა - ხის
კომპიუტერი:
თეთრი ფერი
მასალა - პლასტმასის
მიზანი - სამუშაოსთვის

რა თქმა უნდა, თქვენ შეგიძლიათ სხვა გზით წასვლა, მაგრამ მხოლოდ CSS შედგენილია ზუსტად სადაც, ობიექტების ნაცვლად, ობიექტების პროვოცირება და მათი მახასიათებლები ცოტა განსხვავებულია. მაგალითად, აქ არის ასეთი დოკუმენტის ამონაწერი:

სხეული.
{
ფონის ფერი: RGB (255,255,153);
ფერი: RGB (51,51,153);
}
H3.
{
ფერი: RGB (255,0,0);
შრიფტის ოჯახი: არლიალი, ჰელვეტიკა;
}

აქ არის სთხოვა, რა იქნება სხეულის და H3 ელემენტის სტილი. ეს პარამეტრები, რომლებიც არ არის მითითებული.

CSS- ის შექმნა არ საჭიროებს განსაკუთრებულ ძალისხმევას და შეიძლება შესრულდეს მარტივი ნოუთბუქში, თუმცა ამ მიზნებისათვის სპეციალური პროგრამებიხელშეწყობა მუშაობა და ნათლად აჩვენებს, თუ როგორ მომავალი დოკუმენტი გამოიყურება ამ სტილის გამოყენებით. შეხედეთ ამ პროგრამებს თქვენს დისკზე ან ნაცნობებს.

2.2.სტილის მაგიდის შექმნა დოკუმენტში

CSS- ის დაკავშირების ორი გზა არსებობს. პირველი არის ის სტილის ელემენტში დოკუმენტის დასაწყისში, როგორც კლასში. ეს კეთდება (მაგალითად, 1):

ეს დოკუმენტი

იყენებს სტილის ცხრილებს

ამ მაგალითში, ეკრანზე ნახავთ ორ ხაზს, რომელიც შედგება ორი ობიექტისგან: H3 და H3. შეხედე, რომელშიც Internet Explorer- ის ნაგულისხმევი სტილი აღმოჩნდა. მაგრამ ჩვენ არ გავაკეთეთ რაიმე ინსტრუქციებში ობიექტი თავად მისი სტილი. ამდენად, არ აქვს მნიშვნელობა, რამდენი თქვენ გაქვთ ობიექტების H3 და H3, მათი სტილი ყოველთვის იქნება, როგორც თქვენ მითითებული სტილისტი მაგიდა.

2. 3. სტილი მაგიდა ცალკე ფაილი

თუ გსურთ სტილის შექმნა და გსურთ გამოიყენოთ ეს ყველაფერი თქვენს დოკუმენტში. ან თქვენი დოკუმენტი შედგება კომპლექტისგან Html გვერდები და ყველა მათგანს უნდა ჰქონდეს იგივე სტილი, თქვენ არ გჭირდებათ სტილის მაგიდის სტრიქონების ჩასატარებლად ყოველ ჯერზე დოკუმენტის დასაწყისში.

მეორე გზა დაკავშირება CSS ვებ გვერდზე არის შექმნა CSS. ცალკე ფაილში და გვერდი თავად ეხება ამ ფაილს. მაშინ, თქვენ შეგიძლიათ დაწეროთ გვერდზე მხოლოდ ერთი ხაზი და მაინც სტილი იქნება როგორც განსაზღვრული სტილისტი მაგიდა გარე ფაილი. მე ვფიქრობ, რომ არ არის აუცილებელი, ვისაუბროთ ამგვარი სარგებლის შესახებ.

ასე რომ, თავდაპირველად თქვენ შექმნით მაგიდას, ზემოთ მოყვანილი წესების შემდეგ. მაშინ, თქვენ დაამატეთ ელემენტს იმისათვის, რომ ჩართოთ სიმებიანი სტილის ფურცელი შემდეგნაირად:

ბმული ნიშნავს Ამჟამინდელი გვერდი ელემენტს, rel და ტიპის დაკავშირებულია ელემენტს, როგორც სტილიზებული მაგიდა, მაგრამ HREF შეიცავს მისამართს, რომლის ფაილი თქვენს CSS- სთან არის.

დინამიური ცვლილება CSS.

თქვენ შეგიძლიათ დინამიურად შეიცვალოს დანამატი სტილისტის მაგიდაზე, შესაბამისად, შეცვლის სტილის შეცვლას. აქ არის ფუნქცია, in jscript ენაზე, რომელიც, როდესაც მოუწოდებდა მას, თუ რაიმე სტილი უკვე გამოიყენება, შლის და აკავშირებს ახალს.

ფუნქცია CHANGE_STYLE ()

(თუ (document.stylesheets.href! \u003d null)
document.stylesheets.href \u003d "newstyle.css";
}

თუ სტილის მაგიდა განისაზღვრება HTML- ის გვერდზე, შეგიძლიათ დაამატოთ ახალი განმარტებები addrule ფუნქციის გამოყენებით (ობიექტი, სტილი). სადაც ობიექტი არის ობიექტი და სტილი, შესაბამისად, სტილისტური დანადგარები. აქ არის მაგალითი, რომელშიც ღილაკზე დაჭერით, სტილიზებული მაგიდა შეიცვალა (მაგალითი 2):

ეს დოკუმენტი იყენებს სტილის ფურცლებს

ეს არის პუნქტი. დააჭირეთ ღილაკს მისი სტილის შესაცვლელად

Დამაკლიკე

გვერდის განხილვის შემდეგ ასეთი კოდით, ნახავთ, თუ როგორ ხდება სტილის ცვლილებები სტილის ფურცლის დასამატებლად.

კლასები

კლასი არის კიდევ ერთი გზა დააყენოთ, თუ როგორ უნდა გამოიყურებოდეს ტექსტი გვერდზე. არსებითად, თქვენ განსაზღვრავს კომპლექტი სტილის, როგორიცაა ფერი, შრიფტის სისქე, მისი ზომა, და ასე, მაგრამ არ მივანიჭოთ ეს კონკრეტული tag. კლასი ასე გამოიყურება:

ეს მაგალითი ქმნის სამ კლასს: რეგულარული, Superbig, საავტორო უფლებები. ქვემოთ არის ნაჩვენები, თუ როგორ უნდა გამოიყენოთ ეს კლასები ტექსტის ნავიგაციის ფენაში.

თქვენ ასევე შეგიძლიათ კონკრეტულად აკავშირებს კლასის tag. Მაგალითად:

პ.
{
ფონტის ზომა: 16pt;
შრიფტის წონა: თამამი;
}

P.small
(შრიფტის ზომა: 9pt;
ზღვარი-მარცხნივ: 5EM;
ზღვარი მარჯვნივ: 5EM;
}
ქვემოთ არის ნაჩვენები, თუ როგორ უნდა გამოიყენოთ კლასი