டெயில்விண்டில் அனைத்து பக்கங்களிலும் திணிப்பை எவ்வாறு சேர்ப்பது?

Teyilvintil Anaittu Pakkankalilum Tinippai Evvaru Cerppatu



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

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







டெயில்விண்டில் அனைத்து பக்கங்களிலும் திணிப்பை எவ்வாறு சேர்ப்பது?

டெயில்விண்டில் ஒரு குறிப்பிட்ட உறுப்பின் அனைத்துப் பக்கங்களிலும் திணிப்பைச் சேர்க்க, ஒரு HTML கட்டமைப்பை உருவாக்கவும். பின்னர், குறிப்பிட்ட உறுப்புடன் “p-” பயன்பாட்டு வகுப்பைப் பயன்படுத்தவும். ஒரு உறுப்புக்கு திணிப்பைப் பயன்படுத்த விரும்பிய மதிப்பைக் குறிப்பிடுவது அவசியம். அடுத்து, மாற்றங்களை உறுதிப்படுத்த HTML வலைப்பக்கத்தைப் பார்க்கவும்.



தொடரியல்



< உறுப்பு வர்க்கம் = 'p-' ... உறுப்பு >


2, 4, 12, 20, போன்ற ஏதேனும் விரும்பிய எண்ணுடன் “<மதிப்பு>” ஐ மாற்றவும்.





உதாரணமாக

இந்த எடுத்துக்காட்டில், எங்களிடம் இரண்டு '

'உறுப்புகள் மற்றும் நாங்கள் இரண்டு வெவ்வேறு பேடிங்குகளைப் பயன்படுத்துவோம், அதாவது' ப-8 'மற்றும்' ப-14 ”அவர்கள் மீது:



< உடல் >

< div வர்க்கம் = 'bg-pink-600 p-8 w-max' >
திணிப்பு உள்ளே டெயில்விண்ட் CSS
div >

< br >

< div வர்க்கம் = 'bg-teal-600 p-14 w-max' >
திணிப்பு உள்ளே டெயில்விண்ட் CSS
div >

உடல் >


இங்கே, முதலில்

:

    • ' பிஜி-பிங்க்-600 ”வகுப்பு இளஞ்சிவப்பு நிறத்தை
      உறுப்பின் பின்னணியில் அமைக்கிறது.
    • ' ப-8 ” வகுப்பானது கொள்கலனின் அனைத்துப் பக்கங்களிலும் திணிப்பின் 8 அலகுகளைச் சேர்க்கிறது.
    • ' w-அதிகபட்சம் ” வகுப்பு
      உறுப்பின் அகலத்தை அதன் அதிகபட்ச உள்ளடக்க அகலத்திற்கு அமைக்கிறது.

இரண்டாவது

இல்:

    • ' bg-teal-600 ”வகுப்பு
      உறுப்பின் பின்னணியில் டீல் நிறத்தை அமைக்கிறது.
    • ' ப-14 ” வகுப்பானது கொள்கலனின் அனைத்துப் பக்கங்களிலும் 14 யூனிட் திணிப்புகளைப் பயன்படுத்துகிறது.
    • ' w-அதிகபட்சம் ” வகுப்பு
      உறுப்பின் அகலத்தை அதன் அதிகபட்ச உள்ளடக்க அகலத்திற்கு அமைக்கிறது.

வெளியீடு


மேலே உள்ள வெளியீட்டின் படி, குறிப்பிட்ட திணிப்பு இரண்டு கொள்கலன்களின் அனைத்து பக்கங்களிலும் பயன்படுத்தப்பட்டது.

முடிவுரை

டெயில்விண்டில் உள்ள உறுப்பின் அனைத்துப் பக்கங்களிலும் திணிப்பைச் சேர்க்க, HTML நிரலில் விரும்பிய உறுப்புடன் “p-” பயன்பாட்டு வகுப்பு பயன்படுத்தப்படுகிறது. ஒரு உறுப்புக்கு திணிப்பைப் பயன்படுத்த பயனர்கள் குறிப்பிட்ட மதிப்பைக் குறிப்பிட வேண்டும். சரிபார்ப்புக்கு, HTML இணையப் பக்கத்தைப் பார்த்து, மாற்றங்களை உறுதிப்படுத்தவும். இந்தக் கட்டுரை டெயில்விண்டில் உள்ள ஒரு உறுப்பின் அனைத்துப் பக்கங்களிலும் திணிப்புச் சேர்க்கும் முறையை எடுத்துக்காட்டுகிறது.