ჰიპერტექსტის ნიშნის ენის, HTML გამოგონების შემდეგ, ვებ – დოკუმენტების განლაგების და განლაგების ცნებები მკვეთრად შეიცვალა. პოპულარული ბრაუზერების თითქმის სრული მხარდაჭერით CSS და CSS2 კასკადური სტილის ფურცლის სტანდარტებისთვის, შესაძლებელი გახდა დოკუმენტის ვიზუალური წარმოდგენის თითქმის ნებისმიერი ასპექტის გავლენა. მაგალითად, შეგიძლიათ გააკეთოთ ბმულის ფონი ფერადი, შევსებული რაიმე გამოსახულებით და ასევე შეიცვალოს, რაც დამოკიდებულია მომხმარებლის ქმედებებზე.
აუცილებელია
- - დოკუმენტის ტექსტის ან დოკუმენტის სტილის ფურცლების ტექსტის რედაქტირების შესაძლებლობა;
- - ტექსტის რედაქტორი, რომელიც საშუალებას გაძლევთ შეინახოთ დოკუმენტი თავდაპირველ კოდირებაში.
ინსტრუქციები
Ნაბიჯი 1
გააკეთეთ ბმულის ფონი ერთნაირად შევსებული შემთხვევითი ფერით და დაამატეთ A ელემენტს inline სტილის ინფორმაცია. დაამატეთ სტილი A ელემენტის ატრიბუტებს ბმულს, რომლის ფონის შეცვლაც გსურთ. სტილის ატრიბუტის შინაარსში განათავსეთ ფონის ფერის CSS თვისება მოცემული მნიშვნელობით, რომელიც არის სწორი იდენტიფიკატორი ფონის ფერისთვის. მაგალითად, შეიძლება ასე გამოიყურებოდეს:
ბმულის ტექსტი
ნაბიჯი 2
განსაზღვრეთ თქვენი დოკუმენტის გარე ან ჩანერგილი სტილის ფურცლის ბმული. შესაბამის სტილის ფურცელში დაამატეთ წესების კომპლექტი, რომელსაც მიმართავს სპეციფიკის მისაღები დონის ამორჩეველი. წესების სისტემაში შეიყვანეთ ფონის ფერის თვისება ისევე, როგორც წინა ეტაპზე. შეარჩიეთ სელექტორის სპეციფიკა CSS2 კასკადური წესებისა და სასურველი მასშტაბის საფუძველზე. ამრიგად, თუ მხოლოდ ერთი ბმულის ფერის დაყენება გჭირდებათ, აზრი აქვს ID- ს ამორჩევის გამოყენებას, თუ რამდენიმე ასეთი ბმული არსებობს, უმჯობესია გამოიყენოთ ატრიბუტის ამორჩევა კლასის მნიშვნელობიდან გამომდინარე.
მაგალითად, დოკუმენტის კონკრეტული ბმულისთვის მწვანე ფონის დასაყენებლად, სტილის ფურცელს შეგიძლიათ დაამატოთ წესების ნაკრები:
# ID_GREEN
{
ფონის ფერი: # 00FF00;
}
თქვენ ასევე უნდა დააყენოთ ID ელემენტის ID ატრიბუტი, რომელიც შეესაბამება შესაბამის ბმულს ID_GREEN:
ბმულის ტექსტი
ნაბიჯი 3
შეავსეთ ბმულის ფონი გამოსახულებით. დაიცავით პირველი და მეორე ნაბიჯებით აღწერილი მეთოდები, მაგრამ ფონის ფერის CSS თვისების ნაცვლად, გამოიყენეთ ფონის სურათი. Მაგალითად:
ბმულის ტექსტი
საჭიროების შემთხვევაში, CSS წესებს დაამატეთ ფონის გამეორების თვისება, რათა განისაზღვროს ფონის სურათის ჰორიზონტალურად და ვერტიკალურად დუბლირების ვარიანტები.
ნაბიჯი 4
შეცვალეთ ბმულის ფონი, როდესაც მას გადააფარებთ თავს ან ფოკუსის გადაადგილებისას. დაამატეთ წესების ნაკრები დოკუმენტის გარე ან ჩანერგილ სტილის ფურცელს, რომლებიც განსაზღვრავს ბმულის ან ჯგუფების ფონს სხვადასხვა შტატებში. გამოიყენეთ ID და ატრიბუტების ამორჩევა დინამიკურ ფსევდო კლასებთან ერთად: hover,: active და: focus. მაგალითად, იმისათვის, რომ ID_DYNAMIC_BACKGROUND ID ატრიბუტის მნიშვნელობის მქონე ბმულის ფონი იყოს წითელი არააქტიურ მდგომარეობაში და მწვანე ფერის მაუსის კურსორის ქვეშ, სტილის ფურცელს უნდა დაემატოს შემდეგი წესები:
# ID_DYNAMIC_BACKGROUND
{
ფონის ფერი: # FF0000;
}
# ID_DYNAMIC_BACKGROUND: იარეთ
{
ფონის ფერი: # 00FF00;
}
იგივე შეგიძლიათ გააკეთოთ დინამიურად ცვალებადი გამოსახულების მქონე ფონის შესაქმნელად.
