ஒரு HTML ஆவணத்தின் கட்டமைப்பு ஒரு குடும்ப மரம் போலவே உள்ளது. உங்கள் குடும்பத்தில், உங்களுக்கு முன்னால் வந்த உங்கள் பெற்றோரும் மற்றவர்களும் இருக்கிறார்கள். இவை உங்கள் முன்னோர்கள். அந்த மரத்தின் பின் பிள்ளைகள் மற்றும் உன் பின் வந்தவர்கள் உன் சந்ததியினர். இதே பாணியில் HTML வேலை செய்கிறது. மற்ற கூறுகளின் உள்ளே இருக்கும் உறுப்புகள் அவற்றின் வழித்தோன்றல்களாக இருக்கின்றன. உதாரணமாக, கிட்டத்தட்ட ஒவ்வொரு HTML உறுப்பு
குறிச்சொற்களை உள்ளே இருக்கும் என்பதால், அவர்கள் அந்த உறுப்புகள் ஒரு சந்ததியினர் இருக்க வேண்டும். இந்த உறவு நீங்கள் CSS உடன் பணிபுரிய ஆரம்பிக்கும் போது புரிந்து கொள்ள முக்கியம் மற்றும் காட்சி பாணியை பயன்படுத்த குறிப்பிட்ட கூறுகளை இலக்கு வேண்டும்.CSS வம்சாவளியினர் தேர்வாளர்கள்
ஒரு CSS வம்சாவளி தேர்வுக்குழு மற்றொரு உறுப்பு உள்ளே இருக்கும் உறுப்புகள் பொருந்தும் (அல்லது இன்னும் துல்லியமாக கூறினார், மற்றொரு உறுப்பு ஒரு வழித்தோன்றல் என்று ஒரு உறுப்பு). உதாரணமாக, ஒரு வரிசையிலமையாத பட்டியல் வம்சாவளிகளாக குறிச்சொற்களை கொண்ட ஒரு டேக் உள்ளது. ஒரு உதாரணமாக பின்வரும் HTML ஐப் பயன்படுத்தலாம்:
- இது ஒரு இணைப்பு li> ul>
LI குறிச்சொற்கள் UL குறியீட்டின் வம்சாவளிகள். ஒரு குறிச்சொல் LI (குழந்தை இறந்தவர்) மற்றும் UL (பேரப்பிள்ளை வழித்தோன்றல்) குறிப்புகள் இருவரின் சந்ததியும் ஆகும். குடும்ப மரத்தின் உதாரணத்தைப் பயன்படுத்தி இதைப் பற்றி யோசிக்கிறீர்கள் என்றால்,
- பெற்றோராக இருப்பார்,
- அந்த உறுப்பு குழந்தையாக இருக்கும், மேலும்
- மற்றும் குழந்தைகளின் பேரன்
- .
- ) வம்சாவளியைச் சேர்ந்த ஒரு இணைப்பு உறுப்பு () க்கு மட்டுமே பொருந்தும். பட்டியல் உருப்படியின் வம்சாவளியில் இல்லாத பக்கத்தின் எல்லா மற்ற இணைப்புகள் இந்த பாணியைப் பெறாது.
நினைவில் கொள்ள வேண்டிய ஒரு முக்கியமான விஷயம் என்னவென்றால், உங்கள் வம்சாவளியை தேர்ந்தெடுப்பவர்களிடம் நீங்கள் பயன்படுத்தும் குறிச்சொற்களுக்கு இடையே உள்ள எத்தனை குறிச்சொற்களைப் பொருட்படுத்துவதில்லை. இரண்டாவது உறுப்பு முதல் உறுப்புக்குள் எங்காவது இணைக்கப்பட்டிருந்தால், அது ஒரு வம்சாவளியாக தேர்வு செய்யப்படும்.
உல் கூறுகள் இருந்து இறங்கிய அனைத்து அறிவிப்பாளர்களையும் தேர்ந்தெடுக்க விரும்பினால், நீங்கள் எழுதுவீர்கள்:
உல் ஒரு {உரை அலங்காரம்: எதுவும்; }இப்போது, இந்த பாணியை பட்டியல் உருப்படியின் வம்சாவழி என்று எந்த இணைப்புக்கும் பொருந்தும். இந்த தேர்வையும் நீங்கள் எழுதலாம்
ul li a {உரை அலங்காரம்: none; }இது இரண்டு வகையிலான வகை தேர்வாளர்களைப் பயன்படுத்தும் ஒரு சந்ததி தேர்வுக்குழு ஆகும். இந்த விஷயத்தில், இது பட்டியல் உருப்படிக்கு உள்ளேயும் மற்றும் வரிசையற்ற பட்டியலின் உள்ளேயும் இருக்கும் இணைப்புகளுக்கு பொருந்தும்.
வகுப்பு தேர்வாளர்கள் மற்றும் அடையாள தேர்வாளர்களைப் பயன்படுத்துதல்
நீங்கள் இறங்கிக் கொண்டிருக்கும் தேர்வாளர்கள் எப்போதுமே வகை வம்சாவளியினராக இருக்க வேண்டியதில்லை. உதாரணமாக, நீங்கள் தளத்தில் ஒரு பகுதி (ஒரு பிரிவு போன்றவை) "பில்போர்டு" ஐடி பண்புடன் கொண்டிருப்பதாக கற்பனை செய்து கொள்ளுங்கள். இந்த ஐடியிலிருந்து ஒரு வம்சாவளியை தேர்ந்தெடுக்கும் ஒருவரை நீங்கள் அமைக்கலாம்:
# பில்போர்டு ul {பின்னணி-நிறம்: #ccc; }இது "பில்போர்டு" இன் அடையாளத்துடன் ஒரு உறுப்பு ஒரு வம்சாவளியைக் கொண்ட வரிசையற்ற பட்டியல். வர்க்க மதிப்புகளுக்கு நீங்கள் இதை செய்யலாம்.
div.billboard ul {background-color: #ccc; }இது பிரிவு "பில்போர்டு" வகுப்பின் மதிப்பைக் கொண்டுள்ளது என்று கருதுகிறது. மேலே உள்ள CSS
- உறுப்பு இந்த வர்க்க மதிப்பு கொண்ட எந்த பிரிவின் உள்ளே இருக்கும்.
நீங்கள் சந்ததிக்கு தேர்ந்தெடுப்பவர்களுடனான கடுமையான கை மற்றும் விர்போஸ் பெறலாம். உதாரணமாக, நீங்கள் உங்கள் HTML குறியீட்டை எழுத ட்ரீம்வீவர் பயன்படுத்தினால், நீங்கள் புதிய CSS விதிகள் சேர்க்கும் போது, அந்த அமைப்பில் உங்கள் கர்சரை அமைத்து அடிப்படையாகக் கொண்ட, தேர்ந்தெடுப்பாளரைத் தானாக உருவாக்க முடியும். இந்த சந்தர்ப்பங்களில் ட்ரீம்வீவர் என்ன செய்வது என்பது ஒரு பரவலான விர்போஸ் மற்றும் நீண்ட வழித்தோன்றலான தேர்வுக்குழு உருவாக்கப்படுகிறது. உங்கள் CSS வேலை செய்ய மிகவும் அவசியம் இல்லை. நீங்கள் செய்ய வேண்டியது என்னவென்றால், நீங்கள் விரும்பும் துல்லியமான கூறுகளை (நீங்கள் பாதிக்க விரும்பாத ஸ்டைலிங் ஒன்றைப் பயன்படுத்தாமல்) கீழே இழுக்க முடியும் என்று குறிப்பிட்ட ஒரு வம்சாவளியைத் தேர்ந்தெடுப்பதற்கு இடையே உள்ள சமநிலையைக் காணலாம். பெரிய.
எனவே, இந்த வம்சாவளி தேர்வுக்குழுவைப் பயன்படுத்தி வலைப்பக்கத்தில் குறிப்பிட்ட உறுப்புகளை நீங்கள் எப்படிக் குறிப்பீர்கள்? முதல், நீங்கள் இடைவெளிகளால் பிரிக்கப்பட்ட இரண்டு (அல்லது அதற்கு மேற்பட்ட) வகை தேர்வாளர்களைப் பயன்படுத்தி இறந்த தேர்வுக்குழுவை வரையறுக்க வேண்டும்.
li a {text-decoration: none; }அந்த எடுத்துக்காட்டில், பாணிகள் பட்டியல் உருப்படியின் (
- ) வம்சாவளியைச் சேர்ந்த ஒரு இணைப்பு உறுப்பு () க்கு மட்டுமே பொருந்தும். பட்டியல் உருப்படியின் வம்சாவளியில் இல்லாத பக்கத்தின் எல்லா மற்ற இணைப்புகள் இந்த பாணியைப் பெறாது.