,

,

,

. குறியிடவும்
கட்டங்களை உருவாக்க நவீன வலைத்தளங்களின் தளவமைப்பில் பெரும்பாலும் பயன்படுத்தப்படுகிறது மற்றும் சில வகையான தொகுதி அல்லது கொள்கலன் என்று பொருள். மற்ற குறிச்சொற்களை அதில் கூடு கட்டுவதும் சாத்தியமாகும், இது அனைத்து தொகுதி கூறுகளிலும் சாத்தியமில்லை
பயன்படுத்த வசதியானது. தொகுதிகள் பொதுவாக ஒன்றன் மேல் ஒன்றாக அடுக்கி வைக்கப்படும் மற்றும் இன்லைன் உறுப்புகளில் செருகப்படுவதில்லை. HTML இன்லைன் கூறுகள் உரை, மற்றும் CSS அதை வடிவமைக்கப் பயன்படுகிறது.
உள்ளடக்க அகலம் கொடுக்கப்பட்டால், மொத்த தொகுதி அகலம் என்பது வலது மற்றும் இடது திணிப்பு, விளிம்பு, பார்டர் மற்றும் அகல மதிப்புகளின் கூட்டுத்தொகையாகும். கொடுக்கப்பட்ட உயரத்தில் - மேல் மற்றும் கீழ் திணிப்பு, விளிம்புகள், எல்லைகள் மற்றும் உயரத்திலிருந்து. தொகுதி உறுப்புகளில் உள்ள உரை இயல்புநிலையாக சீரமைக்கப்படும். அவற்றில் ஒன்று பிளாக் உறுப்புகளுடன் இணைந்து இன்லைன் கூறுகளைக் கொண்டிருந்தால், இன்லைன் உறுப்புகளைச் சுற்றி ஒரு அநாமதேயத் தொகுதி உருவாக்கப்படும். இயல்புநிலை பாணி அதற்குப் பயன்படுத்தப்படும். இது அதன் பெற்றோருக்கு ஒதுக்கப்பட்ட குறிப்பிட்ட பாணியையும் பெறுகிறது.
ஆவண ஓட்டம்
CSS இல் குறிப்பிடப்பட்டுள்ள பண்புகளால் தீர்மானிக்கப்படும் பக்க உறுப்புகள் காண்பிக்கப்படும் வரிசையை ஓட்டம் குறிக்கிறது. இந்த வழக்கில், இயல்பாக, தொகுதிகள் மேலிருந்து கீழாக வரிசையாக இருக்கும், மேலும் போதுமான இடம் இல்லை என்றால், இன்லைன் குறிச்சொற்கள் ஒரு புதிய வரிக்கு நகர்த்தப்பட்டு மேலிருந்து கீழாகவும் இடமிருந்து வலமாகவும் அமைக்கப்பட்டிருக்கும். பக்கத்தில் உள்ள ஒரு உறுப்பின் இருப்பிடம் குறியீட்டில் அதன் இடத்தைப் பொறுத்தது: அது எவ்வளவு அதிகமாக இருக்கிறதோ, அவ்வளவு முன்னதாக அது அமைந்துள்ளது. தொகுதி உறுப்புகள் ஒவ்வொன்றும் அதன் அண்டை நாடுகளைத் தள்ளும் ஒரு செவ்வகம் போல் தெரிகிறது. சிறப்பு பண்புகளைப் பயன்படுத்தி இந்த நடத்தையை நீங்கள் மாற்றலாம். CSS இல் ஒரு கொள்கலனின் மையத்தில் அல்லது பக்கங்களில் சில தொகுதிகளை சீரமைப்பது பொசிஷனிங் எனப்படும்.
நிலைப்படுத்தல் கூறுகள்
முழுமையான மற்றும் உறவினர் நிலைப்படுத்தலைப் பயன்படுத்தி தொகுதிகளின் இடத்தைக் கட்டுப்படுத்தலாம். ஒரு பக்கத்தின் பெரிய பகுதிகளுக்கு ஒரு குறிப்பிட்ட இடத்தை வழங்கவும், சிக்கலான இடைமுகங்கள், பாப்-அப்கள் மற்றும் அலங்கார கூறுகளை உருவாக்கவும் நிலைப்படுத்தல் பயன்படுத்தப்படுகிறது. CSS இல் தொகுதிகளை நிலைநிறுத்தப் பயன்படுத்தப்படும் முக்கிய சொத்து நிலை. இது நான்கு முக்கிய பண்புகளைக் கொண்டுள்ளது:
• உறவினர்;
• அறுதி;
• நிலையான;
• நிலையான.
அவர்களின் உதவியுடன், நீங்கள் நான்கு அளவுருக்களில் ஒன்றைக் குறிப்பிடுவதன் மூலம் தளவமைப்பு முறைகளை மாற்றலாம்: மேல், வலது, கீழ் அல்லது இடது. லேயர்களை ஆர்டர் செய்வதற்கும் ஒரு சொத்து உள்ளது - z-index. நிலையான சொத்துடன் நிலைநிறுத்துவது பொதுவாகப் பயன்படுத்தப்படுவதில்லை, ஏனெனில் இது தொகுதிகளின் இயல்புநிலை நிலைப்படுத்தலைக் குறிக்கிறது. எனவே, எந்த அளவுருக்களின் பயன்பாடும் அதை எந்த வகையிலும் பாதிக்காது. மற்ற மூன்று பண்புகள் தளவமைப்புக்கு பயன்படுத்தப்படுகின்றன: உறவினர், முழுமையானது, நிலையானது.
உறவினர் நிலைப்படுத்தல்
CSS இல் உள்ள தொகுதிகளின் தொடர்புடைய நிலைப்படுத்தல், அதாவது நிலை: உறவினர் சொத்து, ஒரு உறுப்பு நகர்த்தப்பட்டு அதன் அசல் நிலையை மாற்றலாம். அத்தகைய தொகுதி இன்னும் ஸ்ட்ரீமில் உள்ளது. உண்மையில், இடம்பெயர்ந்தவர் அவர் அல்ல, ஆனால் அவரது நகல். தொகுதி ஒரு திசையில் அல்லது மற்றொரு திசையில் எவ்வளவு நகரும் என்பதைக் குறிக்க சொத்து மதிப்புகள் அமைக்கப்பட்டுள்ளன. அவை பெரும்பாலும் பிக்சல்களில் அளவிடப்படுகின்றன. ஆனால் மற்ற அலகுகளைப் பயன்படுத்துவது ஏற்றுக்கொள்ளத்தக்கது.

உறவினர் நிலைப்பாட்டிற்கான பண்புகளைப் பயன்படுத்துதல்
மேல் சொத்து ஒரு குறிப்பிட்ட தொகுதியின் நகலை, சொத்தில் குறிப்பிடப்பட்டுள்ள பிக்சல்களின் எண்ணிக்கையால் மேலே அல்லது கீழ் நோக்கி நகர்த்துகிறது. அதைப் பயன்படுத்தும் போது, ​​​​கீழே அல்லது மேலே அமைந்துள்ள கூறுகள் அவற்றின் இடங்களில் இருக்கும், ஏனெனில் உண்மையில் மாற்றப்பட்ட தொகுதி எங்கும் நகராது.
கீழே உள்ள சொத்து மேல் சொத்துக்கு எதிர் திசையில் தொகுதியை நகர்த்துகிறது. நேர்மறை மதிப்பு அதை மேலே நகர்த்த உதவுகிறது, மேலும் எதிர்மறை மதிப்பு அதை கீழே நகர்த்த உதவுகிறது. வலது மற்றும் இடது பண்புகள் முறையே உறுப்பை வலது மற்றும் இடது பக்கம் நகர்த்துகின்றன. அவை அனைத்தையும் இணைப்பதன் மூலம், பக்கத்தில் உள்ள தொகுதியின் சரியான இருப்பிடத்தை நீங்கள் அமைக்கலாம், அதை செங்குத்து மற்றும் கிடைமட்ட ஒருங்கிணைப்பு அச்சுகளுடன் மாற்றலாம். நீங்கள் உள்தள்ளல்களை அதிகரித்தால், அவை தொகுதியின் விளிம்பிலிருந்து கணக்கிடப்படும், ஆனால் அதன் நகல் ஆஃப்செட்டிலிருந்து பக்கவாட்டில் இருந்து கணக்கிடப்படும்.

முழுமையான நிலைப்படுத்தல்
CSS இல் உள்ள தொகுதிகளின் முழுமையான நிலைப்பாடு, முழுமையான நிலைப் பண்புகளின் மதிப்பால் குறிப்பிடப்படுகிறது. நிலைநிறுத்தப்பட்ட ஒரு உறுப்பு ஆவண ஓட்டத்திலிருந்து முற்றிலும் வெளியேறுகிறது, மேலும் அதன் இடம் அண்டை தொகுதிகளால் எடுக்கப்படுகிறது. அத்தகைய உறுப்பின் அகலம் அதன் உள்ளடக்கத்தைப் பொறுத்து நீட்டிக்கப்படுகிறது, மேலும் மேல், இடது, வலது, கீழ் பண்புகளுக்கு சில மதிப்புகளை அமைப்பதன் மூலம் அதை மாற்றலாம். CSS இல் தொகுதிகளின் முழுமையான நிலைப்பாடு தலைப்புகளுக்கு பயனுள்ளதாக இருக்கும். ஆனால் நிலை: முழுமையானது தொகுதி உறுப்புகளுக்கு மட்டுமல்ல, இன்லைன் கூறுகளுக்கும் மட்டும் வேலை செய்கிறது.
கூறுகளை மையத்தில் சீரமைத்தல்
நிலைநிறுத்தப்பட்ட முற்றிலும் இன்லைன் உறுப்பு ஒரு இன்லைன் உறுப்பு போலவே செயல்படும். எனவே, CSS இல் உரையைக் கட்டுப்படுத்தவும் பொருத்துதல் பயன்படுத்தப்படலாம். நீங்கள் அதற்கு சில புதிய பண்புகளைப் பயன்படுத்தலாம், எடுத்துக்காட்டாக, உயரம் மற்றும் அகலத்தை மாற்றவும். CSS இல் மையப்படுத்துதல் மற்றும் செங்குத்து சீரமைப்பு பல பண்புகளின் கலவையைப் பயன்படுத்துகிறது. மேல் சொத்தின் செங்குத்து சீரமைப்பைக் கட்டுப்படுத்துகிறது. நீங்கள் CSS இல் ஒரு தொகுதியை மையப்படுத்த விரும்பினால், பிரதான கொள்கலன் ஒப்பீட்டளவில் நிலைநிறுத்தப்பட வேண்டும், மேலும் சீரமைக்கப்பட்ட உறுப்பு முற்றிலும் நிலைநிறுத்தப்பட வேண்டும். கொள்கலன் மேல் சொத்தை அமைக்க வேண்டும்: 50%, மற்றும் உறுப்பை அதன் சொந்த உயரத்தில் பாதியாக நகர்த்த, "0, -50%" மதிப்புடன் மொழிபெயர்க்கும் சொத்தைப் பயன்படுத்தவும். முற்றிலும் நிலைநிறுத்தப்பட்ட கூறுகளை ஒரு புதிய வகையாக வேறுபடுத்தலாம், ஏனெனில் மற்ற வகை பொருத்துதலுக்கு கிடைக்காத பண்புகள் அவர்களுக்குப் பயன்படுத்தப்படுகின்றன.

உலாவியின் மேல் இடது மூலையில் தொடர்புடைய நிலைப்பாடு
இடது, மேல், வலது மற்றும் கீழ் பண்புகள் முற்றிலும் மற்றும் ஒப்பீட்டளவில் நிலைநிறுத்தப்பட்ட உறுப்புகளில் வித்தியாசமாக வேலை செய்கின்றன. தொடர்புடைய உறுப்புகளுக்கு, இந்த பண்புகள் உறுப்பு அமைந்துள்ள இடத்துடன் தொடர்புடைய ஆஃப்செட்டை அமைக்கிறது. உலாவி சாளரத்தின் அளவுடன் இணைக்கப்பட்ட ஒரு குறிப்பிட்ட ஒருங்கிணைப்பு அமைப்புடன் ஒப்பிடும்போது முற்றிலும் நிலைநிறுத்தப்பட்டவை ஒரு இடத்தைப் பிடித்துள்ளன. இந்த அமைப்பின் தொடக்க புள்ளிகள் சாளரத்தின் மூலைகளாகும். இடது சொத்தைப் பயன்படுத்தும் போது, ​​உலாவியின் இடது பக்கத்திலிருந்து உள்தள்ளல் கணக்கிடப்படும், ஆனால் ஸ்க்ரோல்பார் இருக்காது. மேல் சொத்து, முற்றிலும் நிலைநிறுத்தப்படும் போது, ​​உலாவியின் மேல் இருந்து அது பயன்படுத்தப்படும் உறுப்பு மேல் ஆஃப்செட் குறிப்பிடுகிறது. இரண்டு பண்புகளையும் இணைப்பதன் மூலம், உறுப்பை உலாவியின் மேல் இடது மூலையில் நகர்த்தலாம்.

உலாவியின் மேல் வலது மூலையில் தொடர்புடைய நிலைப்பாடு
இதேபோல், வலது மற்றும் மேல் பண்புகளைப் பயன்படுத்தி, உலாவி சாளரத்தின் வலது பக்கத்தில் ஒரு உறுப்பை அழுத்தி, அதன் செங்குத்து நிலையை மாற்றலாம், அதை மேல் வலது மூலையில் நகர்த்தலாம். சரியான சொத்து எதிர்மறை மதிப்புக்கு அமைக்கப்பட்டால், தொகுதி சாளர எல்லைக்கு வெளியே நகரும். இதற்குப் பிறகு, ஒரு உருள் பட்டை தோன்றும். ஒரு உறுப்பை கீழே நகர்த்த, கீழே உள்ள சொத்தை பயன்படுத்தவும். இது உலாவி சாளரத்தின் கீழ் விளிம்பிலிருந்து தொகுதியின் அடிப்பகுதிக்கு உள்தள்ளலைக் குறிப்பிடுகிறது. அதன் மதிப்பு எதிர்மறையாக இருந்தால், உலாவி சாளரத்தின் கீழ் எல்லைக்கு அப்பால் உறுப்பு நகர்த்தப்பட்டதால், ஒரு உருள் பட்டை தோன்றும்.
முழுமையான நிலைப்பாட்டிற்கான ஒருங்கிணைப்பு அமைப்பு
முன்னிருப்பாக, முழுமையான நிலைப்படுத்தல் கொடுக்கப்பட்ட அனைத்து கூறுகளும் ஒரு ஒருங்கிணைப்பு அமைப்புடன் இணைக்கப்பட்டுள்ளன - உலாவி சாளரம். ஆனால் சில பெற்றோர் உறுப்புகளின் உறவினர் நிலைப்பாட்டைக் கொடுப்பதன் மூலம் அதை மாற்றலாம். பின்னர் குழந்தை தொகுதி பெற்றோரைப் பொறுத்து அதன் இருப்பிடத்தை மாற்றும். பெற்றோர் கூறுகளில் உறவினர் பொருத்துதலுடன் பல இருந்தால், எண்ணுதல் அவற்றுக்கு அருகில் இருந்து மேற்கொள்ளப்படுகிறது. இந்த வழக்கில், உடல் குறிச்சொல்லில் குறிப்பிடப்பட்டுள்ளவற்றிலிருந்து இயல்பு நிலைப்படுத்தல் இருக்கும்.

முற்றிலும் நிலைப்படுத்தப்பட்ட உறுப்புக்கான குறிப்பு புள்ளி
ஒரு உறுப்புக்கு ஒரு முழுமையான நிலைப்பாடு வழங்கப்படுவதற்கு முன்பு, அது ஒரு இடத்தில் மறைமுகமான தோற்றம் என்று அழைக்கப்பட்டது. அத்தகைய தொகுதிக்கு பண்புகள் வழங்கப்படாவிட்டால், அது நகராது. விளிம்பு சொத்தை அமைப்பதன் மூலம் நீங்கள் அதை மாற்றலாம். இது நிலைப்படுத்தல் பண்புகளைப் போலவே செயல்படும். இடது சொத்து மற்றும் மற்ற எல்லாவற்றின் மதிப்பையும் நீங்கள் வரையறுக்கவில்லை என்றால், அது ஆட்டோவிற்கு சமமாக இருக்கும். உறுப்புகளை அவற்றின் அசல் இடங்களுக்குத் திருப்பித் தர, தானாகவும் பயன்படுத்தலாம்.

நிலையான நிலைப்படுத்தல்
மற்றொரு மதிப்பு நிலையானது. நிலைப் பண்பு ஒரு குறிப்பிட்ட இடத்தில் ஒரு உறுப்பைத் தொகுக்கிறது. CSS இல் மெனுக்களை உருவாக்க நிலையான பொருத்துதல் பெரும்பாலும் பயன்படுத்தப்படுகிறது. இது முழுமையானது போன்றது, ஆனால் நிலையான தொகுதி ஓட்டத்திலிருந்து வெளியேறுகிறது. பக்கத்தை ஸ்க்ரோல் செய்யும் போது கூட, அத்தகைய உறுப்பு இடத்தில் இருக்கும், எனவே CSS இல் ஒரு மெனுவை உருவாக்க அதைப் பயன்படுத்துவது வசதியானது. தொடக்கப் புள்ளி உலாவி சாளரத்துடன் இணைக்கப்படும். பல நிலைப்படுத்தப்பட்ட தொகுதிகள் இருந்தால், அவற்றை ஆர்டர் செய்ய z-index பண்பு பயன்படுத்தப்படுகிறது. அதன் உதவியுடன், நீங்கள் ஒரு முழு எண்ணாக வெளிப்படுத்தப்படும் தொடர்புடைய குறியீட்டைக் கொடுத்தால், முழுமையான தொகுதிகளுடன் தொடர்புடைய தொகுதிகளை ஒன்றுடன் ஒன்று சேர்க்கலாம். அது பெரியது, தொகுதி அதிகமாக இருக்கும்.
CSS ஐப் பற்றிய சிறந்த விஷயங்களில் ஒன்று, எந்தவொரு பக்கத்திலும் கற்பனை செய்யக்கூடிய வகையில் உள்ளடக்கம் மற்றும் கூறுகளை நிலைநிறுத்தும் திறனை ஸ்டைல்கள் நமக்கு வழங்குகின்றன. இது எங்கள் வடிவமைப்பிற்கு கட்டமைப்பை சேர்க்கிறது மற்றும் உள்ளடக்கத்தை மேலும் காட்சிப்படுத்த உதவுகிறது.
ஒரு சில உள்ளன பல்வேறு வகையான CSS இல் நிலைப்படுத்துதல், இந்த வகைகளில் ஒவ்வொன்றும் அதன் சொந்த நோக்கம் கொண்டது. இந்த அத்தியாயத்தில், நாங்கள் சில வேறுபட்ட பயன்பாட்டு நிகழ்வுகளைப் பார்க்கப் போகிறோம்-மீண்டும் பயன்படுத்தக்கூடிய தளவமைப்புகளை உருவாக்குதல் மற்றும் செலவழிக்கக்கூடிய கூறுகளை தனித்துவமாக நிலைநிறுத்துதல்-மற்றும் அவ்வாறு செய்வதற்கான சில முறைகளை விவரிக்கிறோம்.
மிதவை மூலம் நிலைப்படுத்துதல்
ஒரு பக்கத்தில் உறுப்புகளை நிலைநிறுத்துவதற்கான ஒரு வழி மிதவை சொத்து ஆகும். இந்த சொத்து மிகவும் பல்துறை மற்றும் பல்வேறு வழிகளில் பயன்படுத்தப்படலாம்.
அடிப்படையில், மிதவை சொத்து ஒரு உறுப்பை எடுத்து, பக்கத்தின் இயல்பான ஓட்டத்தில் இருந்து அகற்றி, அதன் மூல உறுப்பின் இடது அல்லது வலதுபுறத்தில் நிலைநிறுத்துகிறது. பக்கத்தில் உள்ள மற்ற அனைத்து கூறுகளும் அத்தகைய உறுப்பைச் சுற்றிக் கொண்டிருக்கும். எடுத்துக்காட்டாக, உறுப்பாக இருந்தால் பத்திகள் ஒரு படத்தைச் சுற்றி இருக்கும் மிதவை சொத்து அமைக்கப்பட்டுள்ளது.
ஃப்ளோட் பண்பை ஒரே நேரத்தில் பல உறுப்புகளுக்குப் பயன்படுத்தும்போது, ​​பல நெடுவரிசை அமைப்பில் காட்டப்பட்டுள்ளபடி, ஒன்றோடொன்று அல்லது எதிரே மிதக்கும் உறுப்புகளுடன் ஒரு தளவமைப்பை உருவாக்குவதை இது சாத்தியமாக்குகிறது.
மிதவை சொத்து பல மதிப்புகளை எடுக்கும், இரண்டு மிகவும் பிரபலமானவை இடது மற்றும் வலது, இது உறுப்பு அதன் பெற்றோரின் இடது அல்லது வலது பக்கம் மிதக்க அனுமதிக்கிறது.
Img ( மிதவை: இடது; )
நடைமுறையில் மிதக்க
மேலே தலைப்பு, மையத்தில் இரண்டு நெடுவரிசைகள் மற்றும் கீழே ஒரு அடிக்குறிப்புடன் பொதுவான பக்க அமைப்பை உருவாக்குவோம். வெறுமனே, இந்த பக்கம் உறுப்புகளுடன் குறிக்கப்பட வேண்டும்
,
,