கேஸ்கேடிங் ஸ்டைல் ​​ஷீட்கள் என்றால் என்ன, சிஎஸ்எஸ் எதற்காகப் பயன்படுத்தப்படுகிறது?

கேஸ்கேடிங் ஸ்டைல் ​​ஷீட்கள் என்றால் என்ன, சிஎஸ்எஸ் எதற்காகப் பயன்படுத்தப்படுகிறது?

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





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



CSS எப்படி இருக்கும்?

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





HTML கூறுகள் CSS பாணியிலான பல்வேறு பண்புகளைக் கொண்டுள்ளன. தி நிறம் சொத்து முன் (எ.கா. உரை) நிறத்தை அமைக்கிறது. எழுத்துரு அளவு சார்ந்தது எழுத்துரு அளவு சொத்து

ஒவ்வொரு சொத்தும் ஆதரிக்கப்படும் மதிப்புக்கு அமைக்கப்படலாம். ஒரு சொத்துக்கான மதிப்பை ஒதுக்குவது ஒரு 'பிரகடனம்' ஆகும். பொதுவாக, அவை இப்படி இருக்கும்:



property: value

உதாரணத்திற்கு:

ஐபாடில் இருந்து ஐடியூன்ஸ் இசையை மாற்றுவது எப்படி
color: red

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



color: #ff0000
color: rgb(255, 0, 0)

எப்படி HTML மற்றும் ஸ்டைல் ​​ஷீட்கள் ஒன்றாக வருகின்றன

நீங்கள் HTML மற்றும் CSS ஐ வெவ்வேறு வழிகளில் இணைக்கலாம், ஒவ்வொன்றும் அதன் நன்மைகளுடன்.

ஸ்டைல்கள் இன்லைன் எழுதுதல்

எளிமையான முறை, ஸ்டைல் ​​பிரகடனங்களை நேரடியாக HTML கோப்பில் உள்ள ஒரு உறுப்புடன் இணைப்பது. இதைப் பயன்படுத்தி இதைச் செய்யலாம் பாணி இது போன்ற பண்பு:




Most of this text is red …


… but this isn’t!


இது போன்ற இன்லைன் ஸ்டைலிங் கூறுகள் வசதியாக இருந்தாலும், அது பல குறைபாடுகளைக் கொண்டுள்ளது. தொடக்கத்தில், இது HTML ஐ சிக்கலாக்குகிறது, இது ஒரு பார்வையில் படிக்க கடினமாக உள்ளது. பராமரிப்பதும் அருவருப்பானது: ஒவ்வொரு பத்தியின் நிறத்தையும் நாம் அமைக்க விரும்பும் ஒரு நீண்ட ஆவணத்தை கற்பனை செய்து பாருங்கள். இது CSS, ஆனால் அது 'ஸ்டைல் ​​ஷீட்ஸ்' அல்ல.

தலையில் ஸ்டைல்களை உட்பொதித்தல்

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





/* style instructions go here */



...

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

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

உங்கள் தொலைபேசியை அதிக வெப்பமடையாமல் பாதுகாப்பது எப்படி
selector {
declaration1;
declaration2;
/* etc. */
}

எடுத்துக்காட்டாக, பத்திகளின் உரை நீலத்தை வடிவமைக்க, பின்வருவனவற்றை நாம் குறிப்பிடலாம்:

p {
color: blue;
}

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

வெளிப்புற நடை தாளை இணைத்தல்

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


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

CSS இன் சக்தி

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

இந்த பிரிவின் சில நன்மைகள் இங்கே:

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

அடுக்கை விளக்குகிறது

பாணிகள் மற்றும் ஸ்டைல் ​​ஷீட்களைப் பற்றி நீங்கள் நிறைய கற்றுக்கொண்டீர்கள், ஆனால் CSS இன் அடுக்கு பகுதி பற்றி என்ன?

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

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

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

வாசகருக்கு சில கட்டுப்பாட்டைக் கொடுக்கும் மற்றொரு பாணி தாள் ஆதாரம் உள்ளது. எந்தவொரு வலை பயனரும், கோட்பாட்டில், தனிப்பயன் விதிகளுடன் பயனர் பாணி தாளை பராமரிக்க முடியும். இவை நடுவில் அமர்ந்துள்ளன: பயனர் விதிகள் இயல்புநிலை உலாவி அமைப்புகளை மீறும், ஆனால் அவை ஆசிரியர் பாணிகளால் மீறப்படும். துரதிர்ஷ்டவசமாக, பயனர் பாணி தாள்களுக்கான ஆதரவு எப்போதும் பரவலாக இல்லை.

வெவ்வேறு ஊடகங்களை குறிவைத்தல்

திரைக்கு அப்பால், பல்வேறு சூழல்களில் ஸ்டைல் ​​ஷீட்களைப் பயன்படுத்தலாம். தி பாதி என்ற பண்பு இணைப்பு பாணி தாள் எந்த ஊடக வகைகளுக்கு பொருந்தும் என்பதை உறுப்பு வரையறுக்கிறது. உதாரணமாக, நீங்கள் a ஐ வரையறுக்கலாம் அச்சுக்கான பாணி தாள் பின்வருவது போன்ற மார்க்அப்பைப் பயன்படுத்துதல்:

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

தொடர்புடையது: நீங்கள் பார்வையற்றவராகவோ அல்லது பார்வையற்றவராகவோ இருந்தால் இணையத்தை உலாவுவது எப்படி

இசையை இலவசமாக எங்கே பதிவிறக்கம் செய்வது

விக்கிபீடியா போன்ற தளங்கள் CSS ஐ அவற்றின் அச்சு பாணியைக் கட்டுப்படுத்தவும், தேவையற்ற கூறுகளை மறைக்கவும், அமைப்பை எளிமைப்படுத்தவும் பயன்படுத்துகின்றன.

CSS ஆனது HTML ஐ அழகாக பார்க்க வைக்கிறது

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

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

பகிர் பகிர் ட்வீட் மின்னஞ்சல் அத்தியாவசிய CSS3 பண்புகள் ஏமாற்று தாள்

அத்தியாவசிய CSS தொடரியல் எங்கள் CSS3 பண்புகள் ஏமாற்று தாள்.

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்
  • நிரலாக்க
  • இணைய மேம்பாடு
  • CSS
எழுத்தாளர் பற்றி பாபி ஜாக்(58 கட்டுரைகள் வெளியிடப்பட்டன)

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

பாபி ஜாக் இருந்து மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்