CSS இல் வெவ்வேறு எல்லைகளை எவ்வாறு செயல்படுத்துவது?



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

உள்ளடக்கத்தை வரையறுக்கவும் சிறப்பிக்கவும் HTML பக்கங்களில் எல்லைகள் பயன்படுத்தப்படுகின்றன. ஒரு பக்கத்தில் ஏராளமான தகவல்கள் இருக்கும்போது, ​​குறிப்பிட்ட பகுதிகளுக்கு பயனரின் கவனத்தை ஈர்க்க விரும்பினால், அந்த உள்ளடக்கத்தைச் சுற்றி எல்லைகளைப் பயன்படுத்தவும். CSS இல் எல்லைகள் குறித்த இந்த கட்டுரையில் நான் பின்வரும் தலைப்புகளைப் பற்றி விவாதிப்பேன்:

எல்லைகளை எப்போது பயன்படுத்த வேண்டும்

HTML பக்கங்களில் எல்லைகளை வரையறுக்க CSS எல்லை குறிச்சொற்களைப் பயன்படுத்துவது நிலையான நடைமுறை:





  • முக்கியமான தலைப்புகளைச் சுற்றி
  • போஸ்ட்ஸ்கிரிப்ட் அல்லது முக்கியமான குறிப்புகளை முன்னிலைப்படுத்த
  • படங்கள், எடுத்துக்காட்டுகள், மக்களிடமிருந்து மேற்கோள்கள், வீடியோக்களை இணைக்க
  • விலை நிர்ணயம், காலக்கெடு அல்லது அத்தகைய குறிப்பிடத்தக்க தகவல்களுக்கு கவனத்தை ஈர்க்க

நீங்கள் படிக்க விரும்பலாம் CSS எல்லைகளைப் பற்றி அறிந்து கொள்வதற்கு முன்.

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



CSS இல் எல்லைகள்

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

ஜாவாவில் தரவு அமைப்பு மற்றும் வழிமுறை
உடல் {பின்னணி-வண்ணம்: லைட்ப்ளூ} h1 {உரை-சீரமை: மைய எல்லை-பாணி: திட} p {எழுத்துரு-குடும்பம்: வெர்டானா எழுத்துரு அளவு: 20px எல்லை-பாணி: புள்ளியிடப்பட்ட}

பத்தியைச் சுற்றிலும் எல்லை!

CSS இல் எல்லைகள்



CSS எல்லையின் பண்புக்கூறுகள்

CSS எல்லைகள் அவற்றின் 3 முக்கிய பண்புகளைக் கொண்டுள்ளன

  • நடை:திநடைபண்புக்கூறு எல்லையின் வடிவத்தை வரையறுக்கிறது.
  • நிறம்: CSS வண்ணங்களால் வரையறுக்கப்பட்ட தொகுப்பிலிருந்து வண்ணம் எதுவாக இருந்தாலும் இருக்கலாம்.
  • அகலம்: எல்லையின் தடிமன் மாறுபடுவதற்கும், அதை மேலும் முக்கியத்துவம் பெறுவதற்கும் அகலம் பயன்படுத்தப்படுகிறது.

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

  • எல்லை பாணி பண்புக்கூறு
உடை விளக்கம்
எல்லை-பாணி: திட
எல்லை-பாணி: இரட்டை
எல்லை-பாணி: பள்ளம்
எல்லை-பாணி: ரிட்ஜ்
எல்லை-பாணி: செருக
எல்லை-பாணி: ஆரம்பம்
எல்லை பாணி: எதுவுமில்லை
எல்லை-பாணி: மறைக்கப்பட்டுள்ளது
எல்லை-பாணி: புள்ளியிடப்பட்ட
எல்லை-பாணி: கோடு

‘எல்லை இல்லை’ மற்றும் ‘மறைக்கப்பட்ட எல்லை’ விருப்பமும் இருப்பதை நீங்கள் கவனிப்பீர்கள். ஒரு டெவலப்பர் ஒரு எல்லையை வரையறுப்பதைத் தவிர்க்கலாம், ஏன் அதை ‘மறைக்கப்பட்ட எல்லை’ என்று வெளிப்படையாக வரையறுக்கிறது? இது பக்கத்தின் பிற கூறுகளுடன் விண்வெளி பயன்பாடு மற்றும் சீரமைப்பு நோக்கங்களுக்காக செய்யப்படுகிறது.

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

உடை விளக்கம்
எல்லை-பாணி: புள்ளியிடப்பட்ட திடமான இரட்டை

எல்லை-மேல்-பாணி: புள்ளியிடப்பட்ட

எல்லை-வலது பாணி: கோடு

எல்லை-கீழ்-பாணி: திட

எல்லை-இடது பாணி: இரட்டை

  • எல்லை-வண்ணம் பண்புக்கூறு

ஒரு எல்லைக்கான வண்ண பண்புக்கூறு பல வழிகளில் அமைக்கப்படலாம். இது மற்ற உறுப்புகளுக்கு வண்ணத்தை அமைப்பதைப் போன்றது. பின்வரும் முறைகளில் ஒன்றை வண்ணங்களை அமைக்கலாம்:

  • பெயர் - “நீலம்” போன்ற வண்ணப் பெயரைக் குறிப்பிடவும். “BlanchedAlmond” போன்ற சில ஆடம்பரமான வண்ண விருப்பங்களையும் நீங்கள் முயற்சி செய்யலாம்!
  • ஹெக்ஸ் - “# ff0000” போன்ற ஒரு ஹெக்ஸ் மதிப்பைக் குறிப்பிடவும்
  • ஆர்ஜிபி - RGB குறியீட்டை அமைக்கவும். உதாரணமாக, rgb (255,255,0) என்றால் மஞ்சள்.
  • அமைப்பு - “வெளிப்படையான” அல்லது “ஒளிபுகா” போன்றவை
  • எல்லை அகலம் பண்புக்கூறு:

அகல சொத்து, பெயர் குறிப்பிடுவது போல, 4 எல்லை பக்கங்களின் தடிமன் வரையறுக்கிறது. ஒரு மதிப்பு வரையறுக்கப்பட்டால், அது எல்லா பக்கங்களுக்கும், இல்லையெனில் தனிப்பட்ட அகல மதிப்புகளையும் அமைக்கலாம்.

அகலத்தை பிக்சல்கள் (‘பி.எக்ஸ்’), புள்ளிகள் (‘பி.டி’) அல்லது சென்டிமீட்டரில் (‘செ.மீ’) போன்ற நிலையான அலகு ஏதேனும் குறிப்பிடலாம். ‘தடிமன்’, ‘மெல்லிய’ மற்றும் ‘நடுத்தர’ ஆகியவற்றின் முன் வரையறுக்கப்பட்ட மதிப்புகளைப் பயன்படுத்தி அகலத்தையும் குறிப்பிடலாம்.

உடை விளக்கம்
எல்லை அகலம்: 10px
எல்லை அகலம்: 0.1 செ.மீ.
எல்லை அகலம்: நடுத்தர
  • எல்லை-ஆரம் பண்புக்கூறு

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

பின்வரும் குறியீடு உருவாக்கும்:

எல்லை அகலம்: 10px
எல்லை-ஆரம்: 30px

எல்லை பண்புகளுக்கான இயல்புநிலை மதிப்புகள்

  • ஒரே கட்டாய பண்பு நடை . பாணி காணவில்லை என்றால், எல்லை தோன்றாது.

  • வண்ணம் குறிப்பிடப்படவில்லை எனில், அடிப்படை உறுப்புகளிலிருந்து வண்ணம் இயல்புநிலை மதிப்பாக எடுக்கப்படுகிறது. உதாரணமாக, ஒரு பத்தியின் உரை வண்ணம் ‘நீலம்’ என வரையறுக்கப்பட்டால், இயல்புநிலை எல்லை-வண்ணமும் நீலமாக இருக்கும். உறுப்புக்கு கூட வண்ண வரையறை இல்லை என்றால், இயல்புநிலை நிறம் ‘கருப்பு’.

  • அகலத்திற்கான இயல்புநிலை மதிப்பு ‘நடுத்தர’.

சுருக்கெழுத்தில் எல்லைகளை வரையறுக்கவும்

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

பின்வரும் குறியீடு பயன்படுத்தப்படுகிறது:

எல்லை-பாணி: கோடு
எல்லை-நிறம்: பச்சை
எல்லை அகலம்: 5px
எல்லை: கோடு பச்சை 5px

mysql workbench ஐ எவ்வாறு பயன்படுத்துவது

CSS இல் எல்லைகளை வடிவமைக்கும்போது மனதில் கொள்ள வேண்டிய புள்ளிகள்

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

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

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

CSS எல்லைகளில் நீங்கள் தேடும் தகவலைக் கண்டுபிடித்தீர்கள் என்று நம்புகிறேன், மற்றும் wஇது, CSS கட்டுரையில் இந்த எல்லைகளின் முடிவுக்கு வருகிறோம்.

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

எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? 'CSS இன் பார்டர்' வலைப்பதிவின் கருத்துகள் பிரிவில் இதைக் குறிப்பிடவும், நாங்கள் உங்களைத் தொடர்புகொள்வோம்.