CSS (கேஸ்கேடிங் ஸ்டைல் ஷீட்ஸ்) என்பது மார்க்அப் மொழியில் எழுதப்பட்ட ஆவணத்தின் விளக்கக்காட்சியை விவரிக்கப் பயன்படுத்தப்படும் ஒரு நடை தாள் மொழியாகும். வலைப்பக்கங்களின் தளவமைப்பு, எழுத்துருக்கள், வண்ணங்கள் மற்றும் பிற காட்சி அம்சங்களைக் கட்டுப்படுத்த இது பயன்படுகிறது.
CSS, அல்லது அடுக்கு நடை தாள்கள், வலைப்பக்கங்களை வடிவமைக்கவும் வடிவமைக்கவும் பயன்படுத்தப்படும் குறியீட்டு மொழியாகும். இணையதளத்தில் உள்ள உரை, படங்கள் மற்றும் பிற கூறுகளின் தோற்றம், அவற்றின் அளவு, நிறம் மற்றும் பக்கத்தின் நிலை ஆகியவற்றைக் கட்டுப்படுத்த இது வலை வடிவமைப்பாளர்களை அனுமதிக்கிறது. எளிமையான சொற்களில், CSS வலைத்தளங்களை அழகாகவும் ஒழுங்கமைக்கவும் செய்கிறது.
CSS, அல்லது அடுக்கு நடை தாள்கள், HTML அல்லது XML இல் எழுதப்பட்ட ஆவணத்தின் விளக்கக்காட்சியை விவரிக்கப் பயன்படுத்தப்படும் ஒரு நிரலாக்க மொழியாகும். CSS ஆனது HTML உடன் ஒரு வலைத்தளத்தின் பாணியை வரையறுக்கப் பயன்படுகிறது மற்றும் உங்கள் வலைப்பக்கத்தில் உள்ள குறிப்பிட்ட கூறுகள் அல்லது கூறுகளின் குழுக்களுக்குப் பயன்படுத்தப்பட வேண்டிய பாணிகளின் குழுக்களைக் குறிப்பிடுவதன் மூலம் விதிகளை வரையறுக்க உங்களை அனுமதிக்கும் ஒரு விதி அடிப்படையிலான மொழியாகும்.
CSS என்பது ஒரு சக்திவாய்ந்த கருவியாகும், இது ஒரே நேரத்தில் பல வலைப்பக்கங்களின் தளவமைப்பைக் கட்டுப்படுத்துகிறது, நிறைய வேலைகளைச் சேமிக்கிறது. அழகான மற்றும் செயல்பாட்டு இணையதளங்களை உருவாக்க இது உரை வண்ணங்கள், பெட்டிகள் மற்றும் பிற கூறுகளை கையாள முடியும். திரையில், காகிதத்தில், பேச்சில் அல்லது பிற ஊடகங்களில் கூறுகள் எவ்வாறு வழங்கப்பட வேண்டும் என்பதை CSS விவரிக்கிறது, இது இணைய வளர்ச்சியின் இன்றியமையாத பகுதியாகும்.
நீங்கள் ஒரு தொடக்கநிலை அல்லது அனுபவம் வாய்ந்த வலை உருவாக்குநராக இருந்தாலும், பார்வைக்கு ஈர்க்கும் மற்றும் பயனர் நட்பு இணையதளத்தை உருவாக்க CSS ஐப் புரிந்துகொள்வது மிகவும் முக்கியமானது. இந்த கட்டுரையில், CSS என்றால் என்ன, அது எவ்வாறு செயல்படுகிறது மற்றும் பல்வேறு வகையான CSS பற்றி ஆழமாக ஆராய்வோம். CSS ஐப் பயன்படுத்தி, செயல்பாட்டு மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய அற்புதமான வலைத்தளங்களை உருவாக்குவதற்கான சில சிறந்த நடைமுறைகளையும் நாங்கள் ஆராய்வோம்.
CSS என்றால் என்ன?
CSS அல்லது Cascading Style Sheets என்பது HTML அல்லது XML இல் எழுதப்பட்ட ஆவணத்தின் விளக்கக்காட்சியை விவரிக்கப் பயன்படுத்தப்படும் ஒரு நிரலாக்க மொழியாகும். HTML கூறுகளை வடிவமைக்கவும், ஒரே நேரத்தில் பல வலைப்பக்கங்களின் அமைப்பைக் கட்டுப்படுத்தவும் இது பயன்படுகிறது.
வரையறை
CSS என்பது ஒரு விதி அடிப்படையிலான மொழியாகும், இது திரை, காகிதம், பேச்சு அல்லது பிற ஊடகங்களில் கூறுகளை எவ்வாறு வழங்க வேண்டும் என்பதற்கான விதிகளை வரையறுக்கிறது. வலைப்பக்கத்தின் விளக்கக்காட்சியை அதன் உள்ளடக்கத்திலிருந்து பிரிக்க டெவலப்பர்களை இது அனுமதிக்கிறது, இது வலைத்தளத்தைப் பராமரிப்பதையும் புதுப்பிப்பதையும் எளிதாக்குகிறது.
வரலாறு
CSS முதன்முதலில் 1996 இல் அறிமுகப்படுத்தப்பட்டது, அதன் பின்னர் பல புதுப்பிப்புகள் மற்றும் திருத்தங்களுக்கு உட்பட்டுள்ளது. ஸ்டைலிங் மற்றும் லேஅவுட் அடிப்படையில் HTML இன் வரம்புகளை நிவர்த்தி செய்ய இது உருவாக்கப்பட்டது. CSS க்கு முன், HTML ஆனது வலைப்பக்கத்தின் கட்டமைப்பையும் அதன் விளக்கக்காட்சியையும் வரையறுக்கப் பயன்படுத்தப்பட்டது. இருப்பினும், இது ஒரு வலைத்தளத்தின் தளவமைப்பு அல்லது வடிவமைப்பில் மாற்றங்களைச் செய்வதை கடினமாக்கியது.
முக்கியத்துவம்
டெவலப்பர்கள் பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் பதிலளிக்கக்கூடிய வலைத்தளங்களை உருவாக்க அனுமதிப்பதால், CSS இணைய மேம்பாட்டில் முக்கிய பங்கு வகிக்கிறது. இது ஒரு வலைத்தளத்தின் விளக்கக்காட்சியின் மீது அதிக கட்டுப்பாட்டை அனுமதிக்கிறது மற்றும் பல வலைப்பக்கங்களில் நிலையான தோற்றத்தையும் உணர்வையும் உருவாக்க டெவலப்பர்களுக்கு உதவுகிறது.
முடிவில், CSS என்பது இணைய உருவாக்குநர்களுக்கு பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் பதிலளிக்கக்கூடிய வலைத்தளங்களை உருவாக்க ஒரு இன்றியமையாத கருவியாகும். இது ஒரு வலைத்தளத்தின் விளக்கக்காட்சியை அதன் உள்ளடக்கத்திலிருந்து பிரிக்கிறது மற்றும் பல வலைப்பக்கங்களில் நிலையான தோற்றத்தையும் உணர்வையும் உருவாக்க டெவலப்பர்களுக்கு உதவுகிறது.
CSS அடிப்படைகள்
CSS என்பது ஒரு சக்திவாய்ந்த ஸ்டைலிங் மொழியாகும், இது வலைப்பக்கத்தின் தளவமைப்பை வடிவமைக்கப் பயன்படுகிறது. இந்த பிரிவில், தொடரியல், தேர்வாளர்கள், பண்புகள் மற்றும் மதிப்புகள் உட்பட CSS இன் சில அடிப்படைக் கருத்துகளை நாங்கள் உள்ளடக்குவோம்.
தொடரியல்
CSS என்பது ஒரு விதி அடிப்படையிலான மொழியாகும், இது வலைப்பக்கத்தில் HTML கூறுகள் எவ்வாறு காட்டப்பட வேண்டும் என்பதைத் தீர்மானிக்க விதிகளின் தொகுப்பைப் பயன்படுத்துகிறது. ஒரு CSS விதி ஒரு தேர்வாளர் மற்றும் ஒரு அறிவிப்பு தொகுதியைக் கொண்டுள்ளது. தேர்வாளர் HTML உறுப்பை பாணியில் சுட்டிக்காட்டுகிறார், அதே சமயம் அறிவிப்பு தொகுதி அரைப்புள்ளிகளால் பிரிக்கப்பட்ட ஒன்று அல்லது அதற்கு மேற்பட்ட அறிவிப்புகளைக் கொண்டுள்ளது. ஒவ்வொரு அறிவிப்பிலும் CSS சொத்துப் பெயர் மற்றும் பெருங்குடலால் பிரிக்கப்பட்ட மதிப்பு ஆகியவை அடங்கும்.
தேர்வாளர்கள்
வலைப்பக்கத்தில் குறிப்பிட்ட HTML உறுப்புகளை குறிவைக்க தேர்வாளர்கள் பயன்படுத்தப்படுகின்றன. உறுப்பு தேர்வாளர்கள், வகுப்பு தேர்வாளர்கள், ஐடி தேர்வாளர்கள் மற்றும் பண்புக்கூறு தேர்வாளர்கள் உட்பட பல வகையான தேர்வாளர்கள் உள்ளன. தனிம தேர்வாளர்கள் குறிப்பிட்ட HTML கூறுகளை குறிவைக்கிறார்கள், அதே சமயம் வகுப்பு தேர்வாளர்கள் ஒரு குறிப்பிட்ட வகுப்பு பண்புடன் கூறுகளை குறிவைக்கிறார்கள். ஐடி தேர்வாளர்கள் ஒரு குறிப்பிட்ட ஐடி பண்புக்கூறுடன் கூறுகளை குறிவைக்கின்றனர், அதே சமயம் பண்புக்கூறு தேர்வாளர்கள் குறிப்பிட்ட பண்புக்கூறுடன் கூறுகளை குறிவைக்கின்றனர்.
பண்புகள்
வலைப்பக்கத்தில் HTML உறுப்புகளின் காட்சித் தோற்றத்தைக் கட்டுப்படுத்த CSS பண்புகள் பயன்படுத்தப்படுகின்றன. நிறம், எழுத்துரு அளவு, பின்னணி நிறம் மற்றும் விளிம்பு உள்ளிட்ட பல CSS பண்புகள் உள்ளன. ஒரு உறுப்பு எவ்வாறு காட்டப்படுகிறது என்பதைக் கட்டுப்படுத்த, CSS பண்புகளை வண்ணம் அல்லது எழுத்துரு அளவு போன்ற குறிப்பிட்ட மதிப்புகளுக்கு அமைக்கலாம்.
மதிப்புகள்
CSS பண்புகளின் குறிப்பிட்ட மதிப்புகளை அமைக்க மதிப்புகள் பயன்படுத்தப்படுகின்றன. எடுத்துக்காட்டாக, சிவப்பு, பச்சை அல்லது நீலம் போன்ற ஒரு குறிப்பிட்ட வண்ண மதிப்பிற்கு வண்ணப் பண்புகளை அமைக்கலாம். எழுத்துரு அளவு போன்ற பிற பண்புகளை 12px அல்லது 16px போன்ற குறிப்பிட்ட மதிப்புகளுக்கு அமைக்கலாம்.
விதிகள் மற்றும் முன்னுரிமை
வலைப்பக்கத்தில் குறிப்பிட்ட HTML உறுப்புகளுக்கான ஸ்டைலிங்கை அமைக்க CSS விதிகள் பயன்படுத்தப்படுகின்றன. ஒரே உறுப்பிற்குப் பல விதிகள் பொருந்தும் போது, மிக உயர்ந்த விவரக்குறிப்பு மற்றும் மிக சமீபத்தில் பயன்படுத்தப்பட்ட விதி முன்னுரிமை பெறும். சில சந்தர்ப்பங்களில், மற்ற விதிகளை மீறுவதற்கும் ஒரு குறிப்பிட்ட பாணி பயன்படுத்தப்படுவதை உறுதி செய்வதற்கும் !முக்கியமான முக்கிய சொல்லைப் பயன்படுத்துவது அவசியமாக இருக்கலாம்.
முடிவில், CSS என்பது ஒரு சக்திவாய்ந்த ஸ்டைலிங் மொழியாகும், இது வலைப்பக்கத்தின் அமைப்பை வடிவமைக்கப் பயன்படுகிறது. CSS தொடரியல், தேர்வாளர்கள், பண்புகள் மற்றும் மதிப்புகள் ஆகியவற்றின் அடிப்படைகளைப் புரிந்துகொள்வதன் மூலம், செல்லவும் எளிதாகவும் பார்வைக்கு ஈர்க்கக்கூடியதாகவும் அழகான மற்றும் பதிலளிக்கக்கூடிய வலைப்பக்கங்களை நீங்கள் உருவாக்கலாம்.
CSS பதிப்புகள்
CSS ஆனது பல ஆண்டுகளாக உருவாகி வருகிறது, வலை உருவாக்குநர்களின் மாறிவரும் தேவைகளைப் பூர்த்தி செய்ய புதிய பதிப்புகள் அறிமுகப்படுத்தப்பட்டுள்ளன. தற்போது, CSS இன் நான்கு முக்கிய பதிப்புகள் உள்ளன: CSS1, CSS2.1, CSS3 மற்றும் CSS4.
CSS1
CSS1 என்பது CSS இன் முதல் பதிப்பாகும், இது 1996 இல் வெளியிடப்பட்டது. இது எழுத்துரு நிறம், அளவு மற்றும் பாணி போன்ற அடிப்படை ஸ்டைலிங் விருப்பங்களை வழங்கியது. ஒரு பக்கத்தில் உள்ள உறுப்புகளின் நிலையைக் குறிப்பிடுவதன் மூலம் எளிய தளவமைப்புகளை உருவாக்கவும் இது அனுமதித்தது. CSS1 ஆனது முந்தைய வலைப்பக்கங்களை ஸ்டைலிங் செய்யும் முறைகளைக் காட்டிலும் குறிப்பிடத்தக்க முன்னேற்றமாக இருந்தது, இதில் உறுப்புகளின் தோற்றத்தை வரையறுக்க HTML குறிச்சொற்களைப் பயன்படுத்தியது.
CSS2.1
CSS2.1 1998 இல் வெளியிடப்பட்டது மற்றும் அச்சு மற்றும் திரை போன்ற ஊடக வகைகளுக்கான ஆதரவு மற்றும் உறுப்புகள் காண்பிக்கப்பட வேண்டிய வரிசையைக் குறிப்பிடும் திறன் உட்பட பல புதிய அம்சங்களைச் சேர்த்தது. இது தேர்வாளர்களின் கருத்தையும் அறிமுகப்படுத்தியது, இது டெவலப்பர்கள் ஒரு பக்கத்தில் குறிப்பிட்ட கூறுகளை குறிவைத்து அவற்றிற்கு பாணிகளைப் பயன்படுத்த அனுமதித்தது.
CSS3
CSS3 1999 இல் அறிமுகப்படுத்தப்பட்டது மற்றும் இது CSS இன் மிகச் சமீபத்திய பதிப்பாகும். இது அனிமேஷன்கள், மாற்றங்கள் மற்றும் சாய்வுகளுக்கான ஆதரவு உட்பட பல புதிய அம்சங்களைச் சேர்த்தது. CSS3 ஆனது ஃப்ளெக்ஸ்பாக்ஸ் மற்றும் கிரிட் போன்ற புதிய தளவமைப்பு விருப்பங்களை அறிமுகப்படுத்தியது, இது மிகவும் சிக்கலான தளவமைப்புகளை குறைந்த குறியீட்டில் உருவாக்க அனுமதிக்கிறது. CSS3 இன்றும் பரவலாகப் பயன்படுத்தப்படுகிறது மற்றும் நவீன வலை அபிவிருத்திக்கான தரநிலையாக மாறியுள்ளது.
CSS4
CSS4 தற்போது வளர்ச்சியில் உள்ளது மற்றும் எதிர்காலத்தில் வெளியிடப்படும் என எதிர்பார்க்கப்படுகிறது. இது மாறிகளுக்கான ஆதரவு உட்பட பல புதிய அம்சங்களை அறிமுகப்படுத்தும், இது டெவலப்பர்கள் தங்கள் ஸ்டைல்ஷீட்கள் முழுவதும் மதிப்புகளை வரையறுத்து மீண்டும் பயன்படுத்த அனுமதிக்கும். CSS4 புதிய தளவமைப்பு விருப்பங்களை உள்ளடக்கும், அதாவது கொள்கலன் வினவல்கள் போன்றவை, டெவலப்பர்கள் அவர்கள் வைக்கப்பட்டுள்ள கொள்கலனின் அளவிற்கு ஏற்ப பதிலளிக்கக்கூடிய வடிவமைப்புகளை உருவாக்க அனுமதிக்கும்.
முடிவில், CSS அதன் தொடக்கத்திலிருந்து நீண்ட தூரம் வந்துள்ளது, வலை உருவாக்குநர்களின் மாறிவரும் தேவைகளைப் பூர்த்தி செய்ய புதிய பதிப்புகள் அறிமுகப்படுத்தப்பட்டுள்ளன. ஒவ்வொரு பதிப்பும் புதிய அம்சங்கள் மற்றும் திறன்களைச் சேர்த்தது, சிக்கலான தளவமைப்புகள் மற்றும் பாணிகளை உருவாக்குவதை எளிதாக்குகிறது. அடிவானத்தில் CSS4 வெளியிடப்பட்டவுடன், இணைய மேம்பாட்டின் எதிர்காலம் பிரகாசமாகத் தெரிகிறது, டெவலப்பர்களுக்கு இன்னும் சக்திவாய்ந்த கருவிகள் மற்றும் விருப்பங்கள் கிடைக்கும்.
CSS மற்றும் HTML
CSS மற்றும் HTML ஆகியவை இணையப் பக்கங்களை உருவாக்கப் பயன்படுத்தப்படும் இரண்டு மொழிகள். HTML என்பது வலைப்பக்கத்தில் உள்ளடக்கத்தை கட்டமைக்க பயன்படும் மார்க்அப் மொழியாகும், அதே சமயம் CSS ஆனது உள்ளடக்கத்தை வடிவமைக்கவும் வடிவமைக்கவும் பயன்படுகிறது. இந்தப் பிரிவில், CSS மற்றும் HTML எவ்வாறு இணைந்து செயலாற்றுகின்றன என்பதைப் பற்றி நாம் ஆராய்வோம்.
HTML கூறுகள்
HTML கூறுகள் ஒரு வலைப்பக்கத்தின் கட்டுமானத் தொகுதிகள். அவை வலைப்பக்கத்தின் கட்டமைப்பு மற்றும் உள்ளடக்கத்தை வரையறுக்கும் குறிச்சொற்கள். தலைப்புகள், பத்திகள், பட்டியல்கள், படங்கள் மற்றும் பலவற்றை உருவாக்க HTML கூறுகளைப் பயன்படுத்தலாம். ஒவ்வொரு HTML உறுப்புக்கும் அதன் சொந்த பண்புகள் உள்ளன, அவை CSS ஐப் பயன்படுத்தி வடிவமைக்கப்படலாம்.
மார்க்அப் மொழி
HTML என்பது வலைப்பக்கத்தின் கட்டமைப்பை வரையறுக்க குறிச்சொற்களைப் பயன்படுத்தும் மார்க்அப் மொழியாகும். குறிச்சொற்கள் உள்ளடக்கத்தை இணைக்கவும், அதற்கு அர்த்தம் கொடுக்கவும் பயன்படுத்தப்படுகின்றன. உதாரணமாக, தி <h1> டேக் என்பது ஒரு உயர்மட்ட தலைப்பை வரையறுக்கப் பயன்படுகிறது <p> குறிச்சொல் ஒரு பத்தியை வரையறுக்கப் பயன்படுகிறது. HTML என்பது ஒரு சக்திவாய்ந்த மொழியாகும், இது சிக்கலான வலைப்பக்கங்களை உருவாக்க பயன்படுகிறது.
இணைப்புகள்
எந்தவொரு வலைப்பக்கத்திலும் இணைப்புகள் இன்றியமையாத பகுதியாகும். அவை பயனர்களை பக்கங்களுக்கு இடையில் செல்லவும் வெளிப்புற ஆதாரங்களை அணுகவும் அனுமதிக்கின்றன. இதைப் பயன்படுத்தி இணைப்புகள் உருவாக்கப்படுகின்றன <a> குறிச்சொல் மற்றும் CSS ஐப் பயன்படுத்தி வடிவமைக்க முடியும். வலைப்பக்கத்தில் புக்மார்க்குகளை உருவாக்கவும் இணைப்புகள் பயன்படுத்தப்படலாம், பயனர்கள் பக்கத்தின் குறிப்பிட்ட பகுதிகளுக்கு விரைவாக செல்ல அனுமதிக்கிறது.
ஒட்டுமொத்தமாக, CSS மற்றும் HTML இணைந்து பார்வைக்கு ஈர்க்கும் இணையப் பக்கங்களை உருவாக்குகின்றன. HTML ஒரு வலைப்பக்கத்தின் கட்டமைப்பு மற்றும் உள்ளடக்கத்தை வரையறுக்கிறது, அதே நேரத்தில் CSS அந்த உள்ளடக்கத்தை வடிவமைக்கவும் வடிவமைக்கவும் பயன்படுகிறது. HTML மற்றும் CSS ஆகியவற்றை ஒன்றாகப் பயன்படுத்துவதன் மூலம், வலை உருவாக்குநர்கள் பயன்படுத்துவதற்கும் வழிசெலுத்துவதற்கும் எளிதான அழகான மற்றும் செயல்பாட்டு இணையதளங்களை உருவாக்க முடியும்.
CSS மற்றும் வலை வடிவமைப்பு
இணைய வடிவமைப்பில் CSS முக்கிய பங்கு வகிக்கிறது. இணையப் பக்கங்களின் காட்சித் தோற்றத்தைக் கட்டுப்படுத்தவும், பல பக்கங்களில் நிலைத்தன்மையை உறுதிப்படுத்தவும் டெவலப்பர்களுக்கு இது உதவுகிறது. இந்தப் பிரிவில், தளவமைப்பு, அச்சுக்கலை, வண்ணம் மற்றும் படங்கள் உட்பட வலை வடிவமைப்பின் பல்வேறு அம்சங்களை CSS எவ்வாறு பாதிக்கிறது என்பதை ஆராய்வோம்.
லேஅவுட்
CSS ஆனது இணைய உருவாக்குநர்களை வலைப்பக்கங்களின் தளவமைப்பைக் கட்டுப்படுத்த அனுமதிக்கிறது. CSS ஐப் பயன்படுத்துவதன் மூலம், டெவலப்பர்கள் ஒரு வலைப்பக்கத்தில் வெவ்வேறு கூறுகளை நிலைநிறுத்தலாம், இந்த உறுப்புகளின் அளவைக் கட்டுப்படுத்தலாம் மற்றும் வெவ்வேறு சாதனங்களில் அவை தொடர்ந்து காட்டப்படுவதை உறுதிசெய்யலாம். CSS ஆனது டெவலப்பர்களுக்கு வெவ்வேறு திரை அளவுகளுக்கு ஏற்றவாறு பதிலளிக்கக்கூடிய வடிவமைப்புகளை உருவாக்க உதவுகிறது, எல்லா சாதனங்களிலும் வலைப்பக்கங்களை அணுகுவதை உறுதி செய்கிறது.
அச்சுக்கலை
CSS ஆனது டெவலப்பர்களுக்கு வலைப்பக்கங்களின் அச்சுக்கலையைக் கட்டுப்படுத்துவதற்கான பரந்த அளவிலான விருப்பங்களை வழங்குகிறது. CSS மூலம், டெவலப்பர்கள் எழுத்துரு குடும்பம், எழுத்துரு அளவு, வரி உயரம் மற்றும் வலைப்பக்கத்தில் உள்ள உரையின் எழுத்து இடைவெளி ஆகியவற்றைக் கட்டுப்படுத்தலாம். அவர்கள் உரையின் சீரமைப்பு மற்றும் வலைப்பக்கத்தில் வெவ்வேறு கூறுகளுக்கு இடையே உள்ள இடைவெளியைக் கட்டுப்படுத்தலாம்.
கலர்
வலைப்பக்கத்தில் பயன்படுத்தப்படும் வண்ணங்களைக் கட்டுப்படுத்த CSS டெவலப்பர்களுக்கு உதவுகிறது. CSS மூலம், டெவலப்பர்கள் வலைப்பக்கத்தின் பின்னணி நிறத்தை அமைக்கலாம், உரையின் நிறத்தை மாற்றலாம் மற்றும் வலைப்பக்கத்தில் உள்ள பல்வேறு உறுப்புகளின் நிறத்தைக் கட்டுப்படுத்தலாம். CSS டெவலப்பர்களுக்கு சாய்வு மற்றும் பிற சிக்கலான வண்ண விளைவுகளை உருவாக்கும் திறனையும் வழங்குகிறது.
படங்கள்
CSS டெவலப்பர்களை வலைப்பக்கத்தில் படங்களைக் காட்டுவதைக் கட்டுப்படுத்த உதவுகிறது. CSS மூலம், டெவலப்பர்கள் படங்களின் அளவைக் கட்டுப்படுத்தலாம், இணையப் பக்கத்தில் படங்களின் நிலையை அமைக்கலாம் மற்றும் படங்களின் ஒளிபுகாநிலையைக் கட்டுப்படுத்தலாம். சிஎஸ்எஸ் டெவலப்பர்களுக்கு நிழல்கள் மற்றும் எல்லைகள் போன்ற சிக்கலான பட விளைவுகளை உருவாக்கும் திறனையும் வழங்குகிறது.
முடிவில், CSS என்பது இணைய வடிவமைப்பிற்கு இன்றியமையாத கருவியாகும். வலைப்பக்கத்தில் பயன்படுத்தப்படும் தளவமைப்பு, அச்சுக்கலை, வண்ணம் மற்றும் படங்களைக் கட்டுப்படுத்த டெவலப்பர்களை இது செயல்படுத்துகிறது, வலைப்பக்கங்கள் பார்வைக்கு ஈர்க்கக்கூடியதாகவும் எல்லா சாதனங்களிலும் அணுகக்கூடியதாகவும் இருப்பதை உறுதிசெய்கிறது.
CSS மற்றும் வலை அபிவிருத்தி
CSS, அல்லது அடுக்கு நடை தாள்கள், வலை உருவாக்குபவர்களுக்கு இன்றியமையாத கருவியாகும். தளவமைப்பு, வண்ணங்கள், எழுத்துருக்கள் மற்றும் பலவற்றை உள்ளடக்கிய HTML மற்றும் XML ஆவணங்களின் விளக்கக்காட்சியைக் கட்டுப்படுத்த இது அவர்களை அனுமதிக்கிறது.
வெளிப்புற CSS
வெளிப்புற CSS என்பது ஒரு வலைத்தளம் பயன்படுத்தும் அனைத்து பாணிகளையும் கொண்ட ஒரு தனி கோப்பாகும். இந்த கோப்பு HTML ஆவணத்துடன் இணைக்கப்பட்டுள்ளது குறிச்சொல். உள்ளடக்கத்திலிருந்து விளக்கக்காட்சியை தனித்தனியாக வைத்திருக்க வெளிப்புற CSS ஒரு சிறந்த வழியாகும், இது வலைத்தளத்தைப் பராமரிப்பதையும் புதுப்பிப்பதையும் எளிதாக்குகிறது. இது ஒரு இணையதளத்தில் பல பக்கங்களில் நிலைத்தன்மையையும் அனுமதிக்கிறது.
உள் CSS
HTML ஆவணத்தில் உள்ளக CSS ஐப் பயன்படுத்தி வரையறுக்கப்படுகிறது tag. It is useful when you want to apply styles to a single page or a specific section of a website. However, it can make the HTML document cluttered and harder to read.
இன்லைன் CSS
இன்லைன் CSS என்பது HTML உறுப்புக்குள் நடை பண்புக்கூறைப் பயன்படுத்தி வரையறுக்கப்படுகிறது. நீங்கள் ஒரு குறிப்பிட்ட உறுப்புக்கு பாணிகளைப் பயன்படுத்த விரும்பும்போது இது பயனுள்ளதாக இருக்கும். இருப்பினும், இது HTML ஆவணத்தை இரைச்சலாகவும் படிக்க கடினமாகவும் செய்யலாம். பெரிய அளவிலான ஸ்டைலிங்கிற்கு இன்லைன் CSS ஐப் பயன்படுத்த பரிந்துரைக்கப்படவில்லை.
ஊடக வினவல்கள்
சாதனத்தின் திரை அளவின் அடிப்படையில் வெவ்வேறு பாணிகளைப் பயன்படுத்த மீடியா வினவல்கள் பயன்படுத்தப்படுகின்றன. இது ஒரு வலைத்தளத்தை பதிலளிக்கக்கூடியதாகவும், தொலைபேசிகள், டேப்லெட்டுகள் மற்றும் டெஸ்க்டாப்கள் போன்ற பல்வேறு சாதனங்களுக்கு ஏற்பவும் அனுமதிக்கிறது. மீடியா வினவல்களை வெளிப்புற CSS கோப்பில் அல்லது HTML ஆவணத்தில் வரையறுக்கலாம்.
முடிவில், CSS என்பது வலை உருவாக்குநர்களுக்கு இன்றியமையாத கருவியாகும். இது விளக்கக்காட்சி மற்றும் உள்ளடக்கத்தைப் பிரிக்க அனுமதிக்கிறது, இது ஒரு வலைத்தளத்தைப் பராமரிப்பதையும் புதுப்பிப்பதையும் எளிதாக்குகிறது. பெரிய அளவிலான ஸ்டைலிங்கிற்கு வெளிப்புற CSS பரிந்துரைக்கப்படுகிறது, அதே நேரத்தில் உள் மற்றும் இன்லைன் CSS சிறிய அளவிலான ஸ்டைலிங்கிற்கு பயனுள்ளதாக இருக்கும். ஊடக வினவல்கள் ஒரு வலைத்தளத்தை பதிலளிக்கக்கூடியதாகவும் வெவ்வேறு சாதனங்களுக்கு ஏற்பவும் அனுமதிக்கின்றன.
CSS நன்மைகள்
CSS என்பது ஒரு சக்திவாய்ந்த கருவியாகும், இது வலை டெவலப்பர்களை பார்வைக்கு ஈர்க்கும் மற்றும் நிலையான வலைப்பக்கங்களை உருவாக்க உதவுகிறது. CSS ஐப் பயன்படுத்துவதன் சில நன்மைகள் இங்கே:
வேகம்
CSS இன் முக்கிய நன்மைகளில் ஒன்று அதன் வேகம். CSS ஆனது டெவலப்பர்களை அதன் உள்ளடக்கத்திலிருந்து வலைப்பக்கத்தின் வடிவமைப்பு மற்றும் தளவமைப்பைப் பிரிக்க அனுமதிக்கிறது. ஒவ்வொரு பக்கத்திற்கும் உலாவி பல நடைத் தாள்களைப் பதிவிறக்க வேண்டியதில்லை என்பதால், இந்தப் பிரிப்பு இணையப் பக்கத்தை ஏற்றும் நேரத்தைக் கணிசமாகக் குறைக்கும். அதற்கு பதிலாக, உலாவி ஸ்டைல் ஷீட்டை தேக்ககப்படுத்துகிறது, இது பல பக்கங்களில் பயன்படுத்தப்படலாம், இதன் விளைவாக வேகமாக பக்கம் ஏற்றப்படும்.
மீண்டும் மீண்டும் செயல்
பல வலைப்பக்கங்களில் நிலையான வடிவமைப்புகளை உருவாக்க டெவலப்பர்களுக்கு CSS உதவுகிறது. ஒற்றை நடை தாளைப் பயன்படுத்துவதன் மூலம், இணையதளத்தில் உள்ள அனைத்து பக்கங்களும் சீரான தோற்றத்தையும் உணர்வையும் கொண்டிருப்பதை டெவலப்பர்கள் உறுதிசெய்ய முடியும். இந்த நிலைத்தன்மை பயனர் அனுபவத்தை மேம்படுத்த உதவும், ஏனெனில் பயனர்கள் இணையதளத்தை மிக எளிதாக செல்லவும், தங்களுக்குத் தேவையான தகவல்களை விரைவாகக் கண்டறியவும் முடியும்.
பராமரிப்பு
CSS வலைத்தளத்தை பராமரிப்பதையும் புதுப்பிப்பதையும் எளிதாக்குகிறது. ஒரு வலைத்தளத்தின் வடிவமைப்பு மற்றும் தளவமைப்பை அதன் உள்ளடக்கத்திலிருந்து பிரிப்பதன் மூலம், டெவலப்பர்கள் உள்ளடக்கத்தைப் பாதிக்காமல் வடிவமைப்பில் மாற்றங்களைச் செய்யலாம். அதாவது, ஒரு இணையதளத்தின் வடிவமைப்பில் மாற்றம் செய்ய வேண்டும் என்றால், முழு இணையதளத்தையும் மீண்டும் எழுதாமல் விரைவாகவும் எளிதாகவும் செய்யலாம்.
CSS ஆனது இணையதளத்தின் அமைப்பில் மாற்றங்களைச் செய்வதையும் எளிதாக்குகிறது. CSS ஐப் பயன்படுத்துவதன் மூலம், வலைப்பக்கத்தில் உள்ள பல கூறுகளுக்குப் பயன்படுத்தக்கூடிய மறுபயன்பாட்டு பாணிகளை டெவலப்பர்கள் உருவாக்க முடியும். இதன் பொருள், ஒரு வலைப்பக்கத்தின் அமைப்பில் மாற்றம் செய்யப்பட வேண்டும் என்றால், CSS நடை தாளைப் புதுப்பிப்பதன் மூலம் விரைவாகவும் எளிதாகவும் செய்யலாம்.
முடிவில், CSS என்பது வலை உருவாக்குநர்களுக்கு பல நன்மைகளை வழங்கும் ஒரு சக்திவாய்ந்த கருவியாகும். CSS ஐப் பயன்படுத்துவதன் மூலம், டெவலப்பர்கள் பார்வைக்கு ஈர்க்கும் மற்றும் சீரான இணையப் பக்கங்களை உருவாக்க முடியும், அவை விரைவாக ஏற்றப்படும் மற்றும் பராமரிக்கவும் புதுப்பிக்கவும் எளிதானது.
CSS குறிப்புகள்
CSS உடன் பணிபுரியும் போது, உங்களுக்கு அறிமுகமில்லாத பண்புகள் அல்லது தொடரியல் இருக்கும்போது ஆலோசனை செய்ய நம்பகமான குறிப்பை வைத்திருப்பது அவசியம். அதிர்ஷ்டவசமாக, CSS ஐ திறம்பட புரிந்துகொள்ளவும் பயன்படுத்தவும் உங்களுக்கு உதவ ஏராளமான ஆதாரங்கள் உள்ளன.
W3C
உலகளாவிய வலை கூட்டமைப்பு (W3C) என்பது CSS உட்பட வலைத் தரங்களை மேம்படுத்துவதற்கும் பராமரிப்பதற்கும் பொறுப்பான முதன்மை நிறுவனமாகும். அடிப்படை தொடரியல் முதல் மேம்பட்ட தளவமைப்பு நுட்பங்கள் வரை மொழியின் அனைத்து அம்சங்களையும் உள்ளடக்கிய விரிவான CSS குறிப்பை அவர்களின் இணையதளம் வழங்குகிறது. குறிப்பு சொத்தின் மூலம் ஒழுங்கமைக்கப்பட்டுள்ளது மற்றும் ஒவ்வொன்றையும் எவ்வாறு பயன்படுத்துவது என்பதற்கான எடுத்துக்காட்டுகளை உள்ளடக்கியது.
குறிப்புக்கு கூடுதலாக, W3C வலைத்தளம் CSS ஐக் கற்றுக்கொள்வதற்கும் பயன்படுத்துவதற்கும் மற்ற வளங்களை வழங்குகிறது, இதில் பயிற்சிகள், விவரக்குறிப்புகள் மற்றும் சிறந்த நடைமுறைகள் ஆகியவை அடங்கும். நீங்கள் CSS ஐ மாஸ்டரிங் செய்வதில் தீவிரமாக இருந்தால், W3C இணையதளம் ஒரு அத்தியாவசிய ஆதாரமாகும்.
தொகுதிகள்
CSS என்பது ஒரு மட்டு மொழி, அதாவது இது ஒரு முழுமையான நடை தாளை உருவாக்க தனித்தனி தொகுதிகளால் ஆனது. ஒவ்வொரு தொகுதியும் CSS இன் ஒரு குறிப்பிட்ட பகுதியில், தளவமைப்பு, அச்சுக்கலை அல்லது வண்ணம் போன்றவற்றில் கவனம் செலுத்துகிறது. CSSஐ தொகுதிகளாகப் பிரிப்பதன் மூலம், புரிந்துகொள்வது மற்றும் திறம்பட பயன்படுத்துவது எளிது.
W3C இணையதளம் அனைத்து CSS தொகுதிகளின் பட்டியலையும், அவற்றின் விவரக்குறிப்புகளுக்கான இணைப்புகளையும் வழங்குகிறது. மிக முக்கியமான தொகுதிகள் சில:
- CSS தேர்வாளர்கள்: ஆவணத்தில் உள்ள கூறுகளைத் தேர்ந்தெடுப்பதற்கான தொடரியல் வரையறுக்கிறது.
- CSS பெட்டி மாதிரி: ஒரு பக்கத்தில் கூறுகள் எவ்வாறு அமைக்கப்படுகின்றன என்பதை விவரிக்கிறது.
- CSS கிரிட் லேஅவுட்: சிக்கலான தளவமைப்புகளை உருவாக்குவதற்கான சக்திவாய்ந்த அமைப்பை வழங்குகிறது.
- CSS மாற்றங்கள்: உறுப்புகளின் வடிவம், அளவு மற்றும் நிலையை மாற்ற உங்களை அனுமதிக்கிறது.
- CSS அனிமேஷன்கள்: CSS ஐப் பயன்படுத்தி அனிமேஷன்கள் மற்றும் மாற்றங்களை உருவாக்க உங்களை அனுமதிக்கிறது.
பல்வேறு CSS தொகுதிகளுடன் உங்களைப் பழக்கப்படுத்துவதன் மூலம், நீங்கள் மிகவும் திறமையான CSS டெவலப்பர் ஆகலாம் மேலும் மேம்பட்ட மற்றும் அதிநவீன வடிவமைப்புகளை உருவாக்கலாம்.
முடிவில், CSS உடன் பணிபுரியும் எந்தவொரு டெவலப்பருக்கும் நம்பகமான CSS குறிப்பைக் கொண்டிருப்பது மிகவும் முக்கியமானது. W3C இணையதளம் உங்களுக்கு CSS இல் தேர்ச்சி பெற உதவுவதற்கு, பல ஆதாரங்களுடன் விரிவான குறிப்பை வழங்குகிறது. கூடுதலாக, பல்வேறு CSS தொகுதிகளைப் புரிந்துகொள்வது மிகவும் மேம்பட்ட மற்றும் அதிநவீன வடிவமைப்புகளை உருவாக்க உதவும்.
CSS அனிமேஷன்கள்
CSS அனிமேஷன்கள் ஒரு சக்திவாய்ந்த கருவியாகும், இது டெவலப்பர்கள் தங்கள் வலைத்தளங்களில் மாறும் மற்றும் ஈர்க்கக்கூடிய பயனர் அனுபவங்களை உருவாக்க அனுமதிக்கிறது. அனிமேஷன்கள் ஒரு பக்கத்தில் உள்ள குறிப்பிட்ட கூறுகளுக்கு கவனத்தை ஈர்க்க, பயனர்களுக்கு கருத்துக்களை வழங்க அல்லது காட்சி ஆர்வத்தை சேர்க்க பயன்படுத்தலாம்.
CSS அனிமேஷனை உருவாக்க, முதலில் நீங்கள் அனிமேஷன் செய்ய விரும்பும் உறுப்பைத் தேர்ந்தெடுத்து, CSS பண்புகளைப் பயன்படுத்தி அனிமேஷனை வரையறுக்க வேண்டும். தி animation அனிமேஷனை வரையறுக்க சொத்து பயன்படுத்தப்படுகிறது, மேலும் இது அனிமேஷனின் நேரம், கால அளவு மற்றும் பிற விவரங்களைக் கட்டுப்படுத்த உங்களை அனுமதிக்கும் பல துணை பண்புகளைக் கொண்டுள்ளது.
கவனிக்க வேண்டிய ஒரு முக்கியமான விஷயம் என்னவென்றால், அனிமேஷன்கள் வளம் மிகுந்ததாக இருக்கும், எனவே அவற்றை சிக்கனமாகவும் கவனமாகவும் பயன்படுத்துவது முக்கியம். அனிமேஷன்கள் பயனர் அனுபவத்தை மேம்படுத்த வேண்டும், அதிலிருந்து விலகாமல் இருக்க வேண்டும், எனவே அவற்றை முழுமையாகச் சோதித்து, அவை உங்கள் இணையதளத்தின் ஒட்டுமொத்த செயல்திறனை எவ்வாறு பாதிக்கும் என்பதைக் கருத்தில் கொள்வது அவசியம்.
அனிமேஷன்களை உருவாக்க நீங்கள் பயன்படுத்தக்கூடிய சில முக்கிய CSS பண்புகள் இங்கே:
அனிமேஷன்-பெயர்
இந்த சொத்து நீங்கள் ஒரு உறுப்புக்கு பயன்படுத்த விரும்பும் அனிமேஷனின் பெயரை வரையறுக்கிறது. நீங்கள் பல அனிமேஷன்களை வரையறுத்து அவற்றை உங்கள் பக்கத்தில் உள்ள வெவ்வேறு கூறுகளுக்குப் பயன்படுத்தலாம்.
அனிமேஷன்-காலம்
இந்த சொத்து அனிமேஷன் முடிக்க எடுக்கும் நேரத்தை வரையறுக்கிறது. நீங்கள் கால அளவை வினாடிகள் அல்லது மில்லி விநாடிகளில் குறிப்பிடலாம்.
அனிமேஷன்-நேர செயல்பாடு
அனிமேஷனின் வேகத்தைக் கட்டுப்படுத்தப் பயன்படுத்தப்படும் நேரச் செயல்பாட்டை இந்தப் பண்பு வரையறுக்கிறது. நீங்கள் பயன்படுத்தக்கூடிய பல முன் வரையறுக்கப்பட்ட நேர செயல்பாடுகள் உள்ளன linear, ease-in, மற்றும் ease-out, அல்லது உங்கள் சொந்த தனிப்பயன் நேர செயல்பாடுகளை நீங்கள் உருவாக்கலாம்.
அனிமேஷன்-தாமதம்
இந்த சொத்து அனிமேஷன் தொடங்கும் முன் எவ்வளவு நேரம் ஆகும் என்பதை வரையறுக்கிறது. ஒரு பக்கத்தில் பல அனிமேஷன்களின் நேரத்தைத் தடுமாறச் செய்ய விரும்பினால் இது பயனுள்ளதாக இருக்கும்.
அனிமேஷன்-மறுபடி-எண்ணிக்கை
அனிமேஷன் எத்தனை முறை திரும்பத் திரும்பும் என்பதை இந்த சொத்து வரையறுக்கிறது. நீங்கள் குறிப்பிட்ட எண்ணிக்கையிலான மறு செய்கைகளைக் குறிப்பிடலாம் அல்லது மதிப்பைப் பயன்படுத்தலாம் infinite காலவரையின்றி சுழலும் அனிமேஷனை உருவாக்க.
அனிமேஷன்-திசை
இந்த பண்பு அனிமேஷன் இயக்கப்படும் திசையை வரையறுக்கிறது. நீங்கள் குறிப்பிடலாம் normal முன்னோக்கி அனிமேஷனுக்காக, reverse பின்தங்கிய அனிமேஷனுக்காக, அல்லது alternate முன்னோக்கி மற்றும் பின்தங்கிய அனிமேஷன்களுக்கு இடையில் மாற்றியமைக்க.
அனிமேஷன்-நிரப்பு-முறை
அனிமேஷன் செய்யப்பட்ட உறுப்பு அனிமேஷனுக்கு முன்னும் பின்னும் எவ்வாறு வடிவமைக்கப்பட வேண்டும் என்பதை இந்த பண்பு வரையறுக்கிறது. நீங்கள் குறிப்பிடலாம் none உறுப்புகளின் பாணியை மாற்றாமல் விட்டுவிட, forwards அனிமேஷனின் முடிவில் உறுப்பின் பாணியை வைத்திருக்க, அல்லது backwards அனிமேஷனின் தொடக்கத்தில் உறுப்பு பாணியைப் பயன்படுத்துதல்.
அனிமேஷன்-ப்ளே-ஸ்டேட்
அனிமேஷன் இயங்குகிறதா அல்லது இடைநிறுத்தப்பட்டதா என்பதை இந்த சொத்து வரையறுக்கிறது. நீங்கள் மதிப்பைப் பயன்படுத்தலாம் paused அனிமேஷனை இடைநிறுத்த, அல்லது running அதை தொடங்க அல்லது மீண்டும் தொடங்க.
முடிவில், CSS அனிமேஷன்கள் ஒரு சக்திவாய்ந்த கருவியாகும், இது உங்கள் இணையதளத்தில் மாறும் மற்றும் ஈர்க்கக்கூடிய பயனர் அனுபவங்களை உருவாக்க பயன்படுகிறது. இருப்பினும், அவற்றை சிக்கனமாகவும் கவனமாகவும் பயன்படுத்துவது முக்கியம், ஏனெனில் அவை வளம் மிகுந்ததாகவும் உங்கள் வலைத்தளத்தின் ஒட்டுமொத்த செயல்திறனை பாதிக்கும். அனிமேஷன்களை உருவாக்கப் பயன்படும் முக்கிய CSS பண்புகளைப் புரிந்துகொள்வதன் மூலம், பயனர் அனுபவத்தை மேம்படுத்தும் மற்றும் உங்கள் இணையதளத்தில் காட்சி ஆர்வத்தைச் சேர்க்கும் அனிமேஷன்களை நீங்கள் உருவாக்கலாம்.
மேலும் வாசிப்பு
CSS (கேஸ்கேடிங் ஸ்டைல் ஷீட்ஸ்) என்பது HTML மற்றும் XML போன்ற மார்க்அப் மொழிகளின் விளக்கக்காட்சியை விவரிக்கப் பயன்படும் ஒரு மொழியாகும். எழுத்துரு, நிறம், அளவு மற்றும் உள்ளடக்கத்தின் இடைவெளியை மாற்றுவதன் மூலம், பல நெடுவரிசைகளாகப் பிரிப்பதன் மூலம் அல்லது அனிமேஷன்கள் மற்றும் பிற அலங்கார அம்சங்களைச் சேர்ப்பதன் மூலம் வலைப்பக்கங்களின் பாணி மற்றும் தளவமைப்புக்கு இது பயன்படுகிறது. CSS நிறைய வேலைகளைச் சேமிக்கிறது மற்றும் ஒரே நேரத்தில் பல இணையப் பக்கங்களின் அமைப்பைக் கட்டுப்படுத்த முடியும். (ஆதாரம்: MDN வலை டாக்ஸ், W3Schools)
தொடர்புடைய இணையதள மேம்பாட்டு விதிமுறைகள்