ბმულები ძალიან ხშირია ვებ-გვერდებზე, მაგრამ ბევრი ვებ დიზაინერი არ აცნობიერებს ძალას, რომ მათ აქვთ CSS- ის მანიპულირება და მათი კავშირების ეფექტურად მართვა. თქვენ შეგიძლიათ განვსაზღვროთ ბმულები ვიზიტი, hover და აქტიური შტატები. თქვენ ასევე შეგიძლიათ მუშაობა საზღვრებთან და ფონზე, რათა თქვენი ბმულები უფრო pizzaz ან მათ ჰგავს ღილაკები ან თუნდაც images.
ყველაზე ვებ დიზაინერები დაიწყება მიერ განსაზღვრავს სტილი "a" tag:
{ფერი: წითელი; }ეს სტილის ყველა ასპექტს შეესაბამება (hover, visited და აქტიური). თითოეული ნაწილის სტილი ცალ-ცალკე, თქვენ უნდა გამოვიყენოთ ბმული ფსევდო-კლასები.
ლინკები ფსევდო კლასები
არსებობს ფსევდო-კლასების ოთხი ძირითადი ტიპი, რომლებიც შეგიძლიათ განსაზღვროთ:
- : ბმული - ეს არის ნაგულისხმევი სტილის ბმული
- : ეწვია - მას შემდეგ, რაც კავშირი დაიხურა
- : hover - როგორც მაუსი არის poised მეტი ბმული (წინასწარი დაჭერით)
- : აქტიური - მარჯვენა, როგორც ბმული იდება
ფსევდო-კლასების განსაზღვრისათვის, გამოიყენეთ ეს ტეგით თქვენი CSS- ის სელექტორისთვის . ასე რომ, შეცვალოთ ეწვია ფერი ყველა თქვენი ბმულები ნაცრისფერი, წერენ:
a: ეწვია {ფერი: ნაცრისფერი; }თუ სტილის ერთი ბმული ფსევდო კლასში, ეს არის კარგი იდეა სტილის მათ ყველა. ამგვარად, არ გაგიკვირდებათ ექსტრავის შედეგები. ასე რომ, თუ უბრალოდ გსურთ შეცვალოთ ეწვია ფერი ნაცრისფერი, ხოლო ყველა სხვა ფსევდო თვისებები თქვენი კავშირები რჩება შავი, ნება წერთ:
a: ლინკი, a: hover, a: აქტიური {ფერი: შავი; }: ეწვია {ფერი: ნაცრისფერი; }შეიცვალა ლინკები ფერები
ყველაზე პოპულარული გზა სტილის ბმულები არის შეცვალოს ფერი, როდესაც მაუსის hovers მასზე:
{ფერი: # 00f; } a: hover {color: # 0f0; }მაგრამ არ უნდა დაგვავიწყდეს, რომ თქვენ შეგიძლიათ გავლენა მოახდინოთ იმაზე, თუ როგორ ბმული გამოიყურება როგორც ისინი დაწკაპვით მასთან ერთად: აქტიური ქონება:
{ფერი: # 00f; }: აქტიური {ფერი: # f00; }ან როგორ ბმული გამოიყურება შემდეგ თქვენ ეწვია მას: ეწვია ქონება:
{ფერი: # 00f; }: ეწვია {ფერი: # f0f; }ყველაფერთან ერთად:
{ფერი: # 00f; }: ეწვია {ფერი: # f0f; } a: hover {color: # 0f0; }: აქტიური {ფერი: # f00; }დაამატეთ ფონტები ლინკების დამატებაზე ხატები ან ტყვიები
თქვენ შეგიძლიათ დააყენოთ ფონზე ბმული, როგორც სტილისტური ფონის სტატიაში, მაგრამ ფონზე ცოტათი თამაშობთ, შეგიძლიათ შექმნათ ბმული, რომელსაც აქვს ასოცირებული ხატი. აირჩიეთ ხატი, რომელიც პატარაა, 15px- ით 15px- ით, თუ თქვენი ტექსტი უფრო დიდია. მოათავსეთ ფონდი ერთ მხარეს ბმული და მითითებული განმეორებითი ვარიანტი არ განმეორებითი. შემდეგ, ბმულის ჩასმა ისე, რომ ბმული ტექსტში შიგნიდან მარჯვნივ ან მარცხნივ გადაადგილდეს ხატის სანახავად.
{padding: 0 2px 1px 15px; ფონის: #ff url (ball.gif) მარცხენა ცენტრი არ გაიმეორებს; ფერი: # c00; }მას შემდეგ, რაც თქვენ მიიღეთ ხატი, შეგიძლიათ დააყენოთ სხვა სურათი, როგორც თქვენი hover, აქტიური და ეწვია ხატები, რათა ბმული ცვლილება:
{padding: 0 2px 1px 15px; ფონის: #ff url (ball.gif) მარცხენა ცენტრი არ გაიმეორებს; ფერი: # c00; } a: hover {background: #ff url (ball2.gif) მარცხენა ცენტრი არ გაიმეორებს; }: აქტიური {background: #ff url (ball3.gif) მარცხენა ცენტრი არ გაიმეორებს; }ჩადება შენი ბმულები ჰგავს Buttons
Buttons ძალიან პოპულარულია, მაგრამ სანამ CSS მოვიდა, თქვენ უნდა შექმნათ ღილაკები გამოყენებით სურათები , რაც თქვენი გვერდები მიიღოს უფრო დატვირთვის. საბედნიეროდ, არსებობს საზღვრის სტილი, რომელიც დაგეხმარებათ შექმნას ღილაკს მსგავსი ეფექტი ადვილად CSS.
{border: 4px თავიდანვე; padding: 2px; ტექსტი-გაფორმება: არა; } a: აქტიური {border: 4px inset; }შენიშვნა, როდესაც თქვენ ფერები თავიდანვე და ინსტალაციის სტილებს, ბრაუზერები არ არიან სავარაუდოდ გამოიტანოს ისინი, როგორც თქვენ შეიძლება ველოდოთ. ასე რომ, აქ არის ფრანსის ღილაკი ფერადი საზღვრებით:
{border- სტილი: მყარი; საზღვრის სიგანე: 1px 4px 4px 1px; ტექსტი-გაფორმება: არა; padding: 4px; საზღვრის ფერი: # 69f # 00f # 00f # 69f; }და თქვენ შეგიძლიათ გავლენა მოახდინოს ღილაკზე ბმულზე მოძრავი და აქტიური სტილის გამოყენება, უბრალოდ გამოიყენოთ ფსევდო-კლასები:
a: ბმული {საზღვრის სტილის: მყარი; საზღვრის სიგანე: 1px 4px 4px 1px; ტექსტი-გაფორმება: არა; padding: 4px; საზღვრის ფერი: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }