வலைப்பக்க கூறுகளை ஒழுங்கமைப்பதில் HTML உறுப்புகளின் நிலை முக்கிய பங்கு வகிக்கிறது. இன்னும் குறிப்பாக, CSS ஐப் பயன்படுத்தி உறுப்புகளின் நிலையை சரிசெய்யலாம். நிலை ”சொத்து. இந்த சொத்து மேல், இடது, வலது மற்றும் கீழ் பண்புகள் போன்ற ஆஃப்செட் பண்புகளுடன் தொடர்புடையது, இது பக்கத்தில் உள்ள உறுப்பை சரிசெய்ய குறிப்பிட்ட மதிப்புகளை வழங்குகிறது. இருப்பினும், ' அறுதி 'நிலைப்படுத்தப்பட்ட உறுப்புகளை அருகில் உள்ள உறுப்புடன் ஒப்பிடலாம்.
இந்த இடுகை CSS முழுமையான நிலைப்படுத்தலை விளக்கும்.
CSS 'நிலை' சொத்து
' நிலை 'உறுப்பின் நிலையை சரிசெய்ய CSS இல் உள்ள சொத்து பயன்படுத்தப்படலாம். நிலை சொத்தின் வெவ்வேறு மதிப்புகள் நிலையான, முழுமையான, உறவினர், நிலையான மற்றும் ஒட்டும். இந்த மதிப்புகள் உறுப்பின் நிலையைச் சரிசெய்வதற்காக மேல், வலது, இடது மற்றும் கீழ் போன்ற ஆஃப்செட் பண்புகளுடன் அமைக்கப்பட்டுள்ளன.
CSS முழுமையான நிலைப்பாட்டை எவ்வாறு பயன்படுத்துவது?
உறுப்புகளின் முழுமையான நிலைப்படுத்தலை CSS ஐப் பயன்படுத்திப் பயன்படுத்தலாம் ' நிலை 'மதிப்பு கொண்ட சொத்து' அறுதி ”. முழுமையான நிலையுடன் கூடிய உறுப்பு அதன் அருகில் உள்ள பெற்றோர் உறுப்புக்கு ஏற்ப சரிசெய்யப்படுகிறது. ஆனால் மூதாதையர் நிலைநிறுத்தப்படாவிட்டால், அது ஆவணத்தின் உடல் பகுதியுடன் தொடர்புடையதாக இருக்கும்.
உதாரணமாக
ஒரு நடைமுறை உதாரணத்துடன் கருத்தைப் புரிந்துகொள்வோம்.
படி 1: ஒரு HTML கோப்பை உருவாக்கவும்
HTML கோப்பில், உடல் உறுப்புக்குள், வகுப்புப் பெயருடன் ஒரு div ஐச் சேர்க்கவும். முக்கிய ”. பின்னர், உருவாக்கப்பட்ட div இன் உள்ளே, பின்வரும் பண்புக்கூறுகளுடன் தொடர்புடைய HTML குறிச்சொல்லைச் சேர்க்கவும்:
-
- ' src ” படத்திற்கான இணைப்பை வழங்குகிறது.
- ' வர்க்கம் 'உறுப்புகளை வடிவமைக்க CSS இல் பயன்படுத்தப்படுகிறது.
- ' எல்லாம் ” பண்புக்கூறு, பக்கத்தில் படத்தை ஏற்றத் தவறினால், படத்தின் இடத்தில் காண்பிக்கப்படும் உரையைக் குறிப்பிடுகிறது.
- ' எல்லாம் ” பண்புக்கூறு, படம் பக்கத்தில் ஏற்றப்படத் தவறினால், படத்தின் இடத்தில் பக்கத்தில் காண்பிக்கும் உரையைக் குறிப்பிடுகிறது.
பின்னர், தலைப்பு மற்றும் பத்தியின் h1 மற்றும் p கூறுகளைக் கொண்ட மற்றொரு div ஐச் சேர்க்கவும்:
< div வர்க்கம் = 'முக்கிய' >< div வர்க்கம் = 'உள்ளடக்கம்' >
< img src = 'images/linuxlogo.png' வர்க்கம் = 'வீடு' எல்லாம் = 'லினக்ஸ் லோகோ' அகலம் = '80px' >
< h1 > CSS முழுமையான நிலைப்படுத்தல் h1 >
< ப > வணக்கம் Linuxhint குழு ! ப >
div >
div >
CSS இல், HTML கூறுகளை அலங்கரிக்க பல ஸ்டைலிங் பண்புகள் பயன்படுத்தப்படுகின்றன.
படி 2: 'அனைத்து' கூறுகளையும் உடை
* {எழுத்துரு குடும்பம்: வெர்டானா, ஜெனீவா, தஹோமா, சான்ஸ்-செரிஃப்;
}
HTML கூறுகள் '' ஐப் பயன்படுத்தி வடிவமைக்கப்பட்டுள்ளன எழுத்துரு குடும்பம் 'மதிப்பு கொண்ட சொத்து' வெர்டானா, ஜெனீவா, தஹோமா, சான்ஸ்-செரிஃப் ”. உலாவி முதல் பாணியை ஆதரிக்கவில்லை என்றால், மற்றொன்று பயன்படுத்தப்படும் என்பதை இந்த மதிப்புகளின் பட்டியல் உறுதி செய்கிறது.
படி 3: பாணி 'வீடு' பிரிவு
.வீடு {நிலை: முழுமையான;
மேல்: 50px;
இடது: 45px;
}
'க்கு பயன்படுத்தப்படும் பண்புகள் கீழே உள்ளன வீடு ” பிரிவு:
-
- ' நிலை 'சொத்து உறுப்பு நிலையை அமைக்கிறது. இங்கே, சேர்க்கப்பட்டது ' அறுதி ” என்பது HTML இன் உடல் பிரிவுடன் தொடர்புடைய உறுப்பை வைக்கும்.
- ' மேல் 'உறுப்பின் செங்குத்து சரிசெய்தலுக்கு சொத்து பயன்படுத்தப்படுகிறது.
- ' விட்டு 'சொத்து உறுப்பின் கிடைமட்ட சரிசெய்தலுக்குப் பயன்படுத்தப்படுகிறது.
படி 4: உடை 'உள்ளடக்கம்' பிரிவு
.உள்ளடக்கம் {பின்னணி நிறம்: கேடட்ப்ளூ;
அகலம்: 300px;
உயரம்: 250px;
திணிப்பு-இடது: 40px;
விளிம்பு-இடது: 80px;
}
'க்கு பயன்படுத்தப்படும் CSS பண்புகள் கீழே உள்ளன உள்ளடக்கம் ” பிரிவு:
-
- ' பின்னணி நிறம் ”பண்பு உறுப்புகளின் பின்னணி நிறத்தை அமைக்கிறது.
- ' அகலம் ”பண்பு உறுப்புகளின் அகலத்தை அமைக்கிறது.
- ' உயரம் ”பண்பு உறுப்புகளின் உயரத்தை அமைக்கிறது.
- ' திணிப்பு-இடது 'உறுப்பின் உள்ளடக்கத்தின் இடது பக்கத்தில் இடத்தைச் சேர்க்கும் வகையில் சொத்து அமைக்கப்பட்டுள்ளது.
- ' விளிம்பு-இடது ” பண்பு என்பது உறுப்புக்கு இடது பக்கத்தில் உள்ள இடத்தைக் குறிப்பிடுகிறது.
இந்த கட்டத்தில், எங்கள் வலைப்பக்கம் இப்படி இருக்கும்:
ஆவணத்தின் உடலின் மேற்புறத்தில் இருந்து 50px மற்றும் இடதுபுறத்தில் 45px என்ற அளவில் div இல்லத்தின் படம் வைக்கப்பட்டிருப்பதை மேலே உள்ள முடிவிலிருந்து காணலாம். மேலும், ஹோம் டிவியின் நிலை HTML இன் உடல் பகுதியுடன் தொடர்புடையதாக அமைக்கப்பட்டுள்ளது.
நிலைப்படுத்தப்பட்ட பெற்றோர் உறுப்புடன் 'உறவினர்' உறுப்புகளின் நிலையை எவ்வாறு சரிசெய்வது?
இந்தப் பிரிவு, அருகில் உள்ள தாய் உறுப்புடன் தொடர்புடைய உறுப்பின் நிலையைச் சரிசெய்வதற்கு உங்களுக்கு வழிகாட்டும்.
'உள்ளடக்கம்' பிரிவின் 'நிலை' சொத்தை அமைக்கவும்
நிலை: உறவினர்;
மூல உறுப்புடன் தொடர்புடைய உறுப்பின் நிலையைச் சரிசெய்ய, ' நிலை 'மூல உறுப்புக்கான சொத்து' உறவினர் ' மதிப்பு.
'img' தனிமத்தின் 'நிலை' பண்பை அமைக்கவும்
.வீடு {நிலை: முழுமையான;
மேல்: 100px;
இடது: 220px;
}
இங்கே:
-
- ' நிலை 'சொத்து' என அமைக்கப்பட்ட மதிப்பு அறுதி ” என்பது பெற்றோர் உறுப்புடன் தொடர்புடையதாக இருக்கும் (அதாவது, உள்ளடக்கம் DIV நிலை மதிப்புடன் தொடர்புடையது).
- ' மேல் 'உறுப்பு நிலையை மேலே இருந்து அமைப்பதற்கு சொத்து பயன்படுத்தப்படுகிறது.
- ' விட்டு இடதுபுறத்தில் இருந்து உறுப்பு நிலையை அமைக்க சொத்து பயன்படுத்தப்படுகிறது.
வெளியீடு
இதன் விளைவாகப் படம் அதன் பெற்றோர் டிவியுடன் தொடர்புடையதாக அமைந்திருப்பதைக் காணலாம், மேலும் அது பொருத்தமானதாகத் தெரிகிறது.
முடிவுரை
CSS” நிலை HTML உறுப்புகளின் நிலையை அமைக்க சொத்து பயன்படுத்தப்படுகிறது. இந்த சொத்தை நிலையான, உறவினர், முழுமையான, ஒட்டும் மற்றும் நிலையானதாக மதிப்பிடலாம். ' அறுதி ”மதிப்பு அதன் அருகிலுள்ள நிலைபெற்ற தாய் உறுப்புடன் தொடர்புடைய உறுப்பை நிலைநிறுத்தும். இந்த இடுகை CSS முழுமையான நிலைப்படுத்தலை ஒரு நடைமுறை உதாரணத்துடன் விளக்கியுள்ளது.