இணைப்புகள் வலைப்பக்கங்களில் மிகவும் பொதுவானவை, ஆனால் பல இணைய வடிவமைப்பாளர்கள் தங்கள் இணைப்புகளை திறம்பட கையாளவும் மற்றும் நிர்வகிக்கவும் CSS உடன் கொண்டுள்ள சக்தியை உணரவில்லை. நீங்கள் விஜயம், மிதவை மற்றும் செயலில் உள்ள நாடுகளுடன் இணைப்புகளை வரையறுக்கலாம். உங்கள் இணைப்புகள் இன்னும் pizzaz கொடுக்க அல்லது அவர்கள் பொத்தான்கள் அல்லது படங்களை போல் செய்ய எல்லைகளை மற்றும் பின்னணியில் வேலை செய்யலாம்.
பெரும்பாலான வலை வடிவமைப்பாளர்கள் "ஒரு" குறியில் ஒரு பாணியை வரையறுப்பதன் மூலம் தொடங்குகின்றனர்:
ஒரு {நிறம்: சிவப்பு; }இது பாணியில் உள்ள அனைத்து அம்சங்களிலும் (ஹோவர், விஜயம் மற்றும் செயலில்) இருக்கும். ஒவ்வொரு பகுதியும் தனித்தனியாக பாணியில், நீங்கள் போலி-வகுப்புகளைப் பயன்படுத்த வேண்டும்.
போலி போலி வகுப்புகள்
நீங்கள் வரையறுக்க முடியும் இணைப்பு போலி வகுப்புகள் நான்கு அடிப்படை வகைகள் உள்ளன:
- : இணைப்பு - இந்த இணைப்பை இயல்புநிலை பாணி
- : விஜயம் - இணைப்பைக் கிளிக் செய்தவுடன்
- : மிதவை - ஒரு சுட்டி ஒரு இணைப்பை மீது தயாராக உள்ளது (முன் கிளிக்)
- : செயலில் - இணைப்பை கிளிக் செய்வதன் சரியானது
ஒரு போலி போலி வர்க்கத்தை வரையறுக்க, உங்கள் CSS தேர்வுக்குழு ஒரு குறிச்சொல்லை அதை பயன்படுத்த. எனவே, உங்கள் எல்லா இணைப்புகளின் வணக்கம் சாம்பல் நிறத்தை மாற்ற, எழுதவும்:
a: விஜயம் {நிறம்: சாம்பல்; }நீங்கள் பாணியில் ஒரு போலி போலி வகுப்பு என்றால், அது அவர்களுக்கு அனைத்து பாணி ஒரு நல்ல யோசனை. அந்த வழியில் நீங்கள் வெளிப்படையான முடிவுகளை ஆச்சரியப்படுத்த முடியாது. நீங்கள் பார்வையிட்ட வண்ணத்தை சாம்பல் செய்ய விரும்பினால், உங்கள் இணைப்புகளின் அனைத்து போலி சூத்திரங்கள் கருப்பு நிறமாக இருக்கும்போது, நீங்கள் எழுதுவீர்கள்:
a: link, a: hover, a: செயலில் {color: black; } a: விஜயம் {நிறம்: சாம்பல்; }இணைப்பு நிறங்களை மாற்றவும்
பாணி இணைப்புகள் மிகவும் பிரபலமான வழி சுட்டி அதை மேல் வட்டமிடும் போது நிறம் மாற்ற வேண்டும்:
ஒரு {நிறம்: # 00f; } a: hover {color: # 0f0; }ஆனால் அதை கிளிக் செய்வதன் மூலம் இணைப்பை எப்படி பாதிக்கிறது என்பதை மறந்துவிடாதீர்கள்: செயலில் உள்ள சொத்து:
ஒரு {நிறம்: # 00f; } a: செயலில் {color: # f00; }அல்லது அதை நீங்கள் பார்வையிட்ட பின் இணைப்பு எப்படி இருக்கும்: பார்வையிட்ட சொத்து:
ஒரு {நிறம்: # 00f; } a: விஜயம் {color: # f0f; }அதை ஒன்றாக இணைக்க:
ஒரு {நிறம்: # 00f; } a: விஜயம் {color: # f0f; } a: hover {color: # 0f0; } a: செயலில் {color: # f00; }ஐகான்கள் அல்லது புல்லட்களைச் சேர்வதற்கான இணைப்புகளில் பின்னணியை வைக்கவும்
நீங்கள் ஸ்டைலிஷ் பின்னணியிலான கட்டுரையில் ஒரு பின்னணியில் ஒரு பின்னணி வைக்கலாம், ஆனால் பின்புலத்துடன் பின்னோக்கி விளையாடும் பொருட்டு, தொடர்புடைய ஐகானைக் கொண்ட இணைப்பை உருவாக்கலாம். உங்கள் உரை பெரியதாக இருந்தாலும், 15px ஐ 15px ஐ சிறியதாகக் கொண்ட ஐகானைத் தேர்ந்தெடுக்கவும். இணைப்பு ஒரு பக்க பின்னணி வைக்க மற்றும் மீண்டும் மீண்டும் மீண்டும் விருப்பத்தை அமைக்க. பின் இணைப்பை இணைக்க, இணைப்பு உள்ள உரை ஐகானைப் பார்க்க இடது அல்லது வலதுபுறம் மிக அதிகமாக நகர்த்தப்படுகிறது.
ஒரு {திணிப்பு: 0 2px 1px 15px; பின்னணி: #ff url (ball.gif) இடது மையம் மீண்டும் மீண்டும் இல்லை; வண்ணம்: # c00; }உங்கள் ஐகான் கிடைத்தவுடன், இணைப்பை மாற்றுவதற்கு உங்கள் மிதவை, செயலில் மற்றும் பார்வையிட்ட சின்னங்களை வேறு ஒரு படத்தை அமைக்கலாம்:
ஒரு {திணிப்பு: 0 2px 1px 15px; பின்னணி: #ff url (ball.gif) இடது மையம் மீண்டும் மீண்டும் இல்லை; வண்ணம்: # c00; } a: மிதவை {பின்னணி: # ff url (ball2.gif) இடது மையம் மீண்டும் மீண்டும்; } a: செயலில் {background: #ff url (ball3.gif) இடது மையம் மீண்டும் மீண்டும் இல்லை; }உங்கள் இணைப்புகளை பொத்தான்கள் பார்
பொத்தான்கள் மிகவும் பிரபலமாக உள்ளன, ஆனால் CSS சேர்ந்து வந்தது வரை, நீங்கள் உங்கள் பக்கங்களை ஏற்ற நேரம் எடுக்கும் படங்களை பயன்படுத்தி பொத்தான்கள் உருவாக்க வேண்டும். அதிர்ஷ்டவசமாக, நீங்கள் CSS உடன் எளிதாக ஒரு பொத்தானை போன்ற விளைவு உருவாக்க உதவும் ஒரு எல்லை பாணி உள்ளது.
ஒரு {border: 4px beginning; திணிப்பு: 2px; உரை அலங்காரம்: எதுவும் இல்லை; } a: செயலில் {border: 4px inset; }நீங்கள் ஆரம்பத்தில் நிறங்கள் மற்றும் செருகுவாய் பாணியை வைத்துக் கொண்டால், நீங்கள் எதிர்பார்ப்பதைப் போல உலாவிகளில் அவற்றை வழங்குவதற்கு வாய்ப்பு இல்லை. எனவே, வண்ண எல்லைகளை கொண்ட ஒரு ரசிகர் பொத்தானை இங்கே:
ஒரு {எல்லை பாணி: திட; எல்லை அகலம்: 1px 4px 4px 1px; உரை அலங்காரம்: எதுவும் இல்லை; திணிப்பு: 4px; எல்லை-வண்ணம்: # 69f # 00f # 00f # 69f; }நீங்கள் அந்த போலி-வகுப்புகள் பயன்படுத்த, அதே ஒரு பொத்தானை இணைப்பு மிதவை மற்றும் செயலில் பாணியை பாதிக்கும்:
a: இணைப்பு {border-style: solid; எல்லை அகலம்: 1px 4px 4px 1px; உரை அலங்காரம்: எதுவும் இல்லை; திணிப்பு: 4px; எல்லை-வண்ணம்: # 69f # 00f # 00f # 69f; } a: மிதவை {border-color: #ccc; }