CSS2 மற்றும் CSS3 இடையே மிகப்பெரிய வித்தியாசம் CSS3 தொகுதிகள் என்று பல்வேறு பிரிவுகள், பிரிந்து வருகிறது. இந்த மாதிரிகள் ஒவ்வொன்றும் W3C வழியாக பல்வேறு வழிகளில் சிபாரிசு செயல்முறையின் வழியாக செல்கின்றன. இந்த செயல்முறை பல்வேறு உற்பத்தியாளர்களால் உலாவியின் ஏற்றுக்கொள்ளப்பட்ட மற்றும் செயல்படுத்தப்பட்ட பல்வேறு துண்டுகளை எளிதாகச் செய்துள்ளது.
நீங்கள் இந்த செயல்முறையை CSS2 உடன் என்ன நடந்தது எனில், அனைத்தையும் உள்ளடக்கிய ஒற்றை ஆவணத்தில் உள்ள அனைத்து அடுக்கு நடைத்தாள்கள் தகவலுடன் சமர்ப்பிக்கப்பட்டால், சிறிய, தனிப்பட்ட துண்டுகளாக சிபாரிசுகளை முறிப்பதற்கான அனுகூலங்களை நீங்கள் பார்க்கலாம். ஒவ்வொரு தொகுதிகளும் தனித்தனியாக வேலை செய்வதால், CSS3 தொகுப்பிற்கான அதிக பரந்த உலாவி ஆதரவு உள்ளது.
எந்த புதிய மற்றும் மாறும் விவரக்குறிப்பு போன்ற, உங்கள் உலாவிகளில் மற்றும் இயக்க முறைமைகளில் நீங்கள் முழுமையாக உங்கள் CSS3 பக்கங்களை சோதிக்க உறுதியாக இருக்க வேண்டும். இலக்கு ஒவ்வொரு உலாவியில் சரியாக இருக்கும் வலை பக்கங்கள் உருவாக்க அல்ல, ஆனால் நீங்கள் CSS3 பாணிகளை உட்பட, பயன்படுத்தும் எந்த பாணியை, அவர்கள் ஆதரவு என்று உலாவிகளில் அழகாக மற்றும் அவர்கள் பழைய உலாவிகளில் மனதார மீண்டும் விழும் என்று உறுதி என்று வலை நினைவில் வேண்டாம்.
புதிய CSS3 தேர்வாளர்கள்
CSS3 நீங்கள் புதிய CSS தேர்வாளர்கள், அதே போல் ஒரு புதிய கலப்பான், மற்றும் சில புதிய போலி கூறுகள் CSS விதிகள் எழுத முடியும் புதிய வழிகளில் ஒரு கொத்து வழங்குகிறது.
மூன்று புதிய பண்புக்கூறு தேர்வாளர்கள்:
- கற்பனை தொடங்குகிறது
உறுப்பு foo ^ = "பார்" உறுப்பு "பார்" உடன் தொடங்கும் foo என்ற பண்புக்கூறு உள்ளது, எ.கா.
- பண்புடன் முடிவுகளை கற்பித்தல் சரியாக உள்ளது
உறுப்பு foo $ = "பார்" உறுப்பு "பார்" உடன் முடிவடையும் foo என்ற பண்புக்கூறு உள்ளது, எ.கா.
- கற்பிதம் போட்டியில் உள்ளது
உறுப்பு foo * = "பார்" இந்த உறுப்பு foo என்றழைக்கப்படும் ஒரு பண்புக்கூறு உள்ளது, இது சர "bar" ஐ கொண்டுள்ளது, எ.கா.
16 புதிய போலி வகுப்புகள்:
- : ரூட்
- ஆவணத்தின் ரூட் உறுப்பு. HTML இல் இது எப்போதும் உள்ளது.
- : N வது குழந்தை (n),
- மாற்றாக போட்டிகளைப் பெறுவதற்கு சரியான குழந்தை உறுப்புகளை அல்லது மாறிகள் பயன்படுத்த இதைப் பயன்படுத்தவும்.
- : N வது-கடைசி குழந்தை (n),
- கடைசியில் இருந்து கணக்கிடும் சரியான குழந்தை கூறுகளை ஒப்பிடுக.
- : N வது ஆஃப் வகை (n),
- ஆவணம் மரத்தின் முன் அதே பெயருடன் உடன்பிறப்பு கூறுகளை பொருத்தவும்.
- : N வது கடைசி ஆஃப் வகை (n),
- கீழே இருந்து எண்ணும் அதே பெயரில் உடன்பிறப்பு கூறுகளை பொருத்து.
- : கடைசி குழந்தை
- பெற்றோர் கடைசி குழந்தை உறுப்புடன் ஒப்பிடுக.
- : முதல்-வகை
- அந்த வகையின் முதல் உடன்பிறப்பு உறுப்புடன் ஒப்பிடலாம்.
- : கடைசி வகை-
- அந்த வகையின் கடைசி உடன்பிறப்பு உறுப்புடன் ஒப்பிடலாம்.
- :ஒரே குழந்தை
- அதன் பெற்றோரின் ஒரே மகனாக இருக்கும் உறுப்புடன் ஒப்பிடுக.
- : ஒரே வகை-
- அதன் வகையின் ஒரே ஒரு உறுப்புடன் ஒப்பிடுக.
- :காலியாக
- குழந்தைகள் இல்லை (உரை முனைகள் உட்பட) உறுப்பு பொருந்தும்.
- : இலக்கு
- குறிப்பிடும் URI இன் இலக்காக இருக்கும் உறுப்புடன் பொருந்துக.
- : செயல்படுத்தப்படும்
- இயக்கப்பட்டிருக்கும் போது உறுப்புடன் பொருந்தவும்.
- : ஊனமுற்றோர்
- இது முடக்கப்பட்டிருக்கும்போது உறுப்புடன் பொருந்தவும்.
- : சரிபார்க்கப்பட்டது
- இது சோதனை செய்யப்படும் போது (ரேடியோ பொத்தான் அல்லது சரிபார்க்கும்) உறுப்புடன் பொருந்தும்.
- : இல்லை (ங்கள்)
- உறுப்பு எளிய தேர்வுக்குழுக்களுடன் பொருந்தவில்லை என்பதைப் பொருத்து.
ஒரு புதிய இணைப்பான்:
- உறுப்பு A ~ உறுப்பு B
- ElementB ஆனது எங்காவது உறுப்புக்குப் பின் எதையாவது பின்வருமாறு பின்பற்றுகிறது, உடனடியாக அவசியம் இல்லை.
புதிய பண்புகள்
CSS3 புதிய CSS பண்புகளை பல அறிமுகப்படுத்தியது. ஃபோட்டோஷாப் போன்ற ஒரு கிராபிக் திட்டத்துடன் கூடுதலாக இணைந்திருக்கும் காட்சி வடிவங்களை உருவாக்க இந்த பண்புகள் பல இருந்தன. இவை சில, border-radius அல்லது box-shadow போன்றவை, CSS3 அறிமுகப்படுத்தியதிலிருந்து சுற்றி வருகின்றன. மற்றவர்கள், flexbox அல்லது CSS கட்டம் போன்ற இன்னும் அடிக்கடி CSS3 சேர்த்தல் கருதப்படுகிறது என்று புதிய பாணிகளை.
CSS3 இல், பாக்ஸ் மாடல் மாறவில்லை. ஆனால் உங்கள் பாணியின் பின்னணியையும் எல்லைகளையும் உங்களுக்கு உதவும் புதிய பாணி பண்புகளை ஒரு கொத்து உள்ளது.
பல பின்னணி நான் mages
பின்னணி படத்தை, பின்னணி-நிலை மற்றும் பின்னணி-மீண்டும் பாணியைப் பயன்படுத்தி நீங்கள் பல பின்னணி படங்களை பெட்டி ஒன்றில் மேல் ஒன்றாக அடுக்கு செய்யலாம். முதல் படம் பயனருக்கு நெருக்கமான அடுக்கு, பின்வருமாறு பின்வருமாறு வரையப்பட்டிருக்கிறது. பின்னணி வண்ணம் இருந்தால், அது அனைத்து பட அடுக்குகளுக்கும் கீழே வரையப்பட்டது.
புதிய பின்னணி உடை பண்புகள்
CSS3 இல் சில புதிய பின்னணி பண்புகள் உள்ளன.
- பின்னணி-கிளிப்
- இந்த சொத்து பின்னணி படத்தை எவ்வாறு கட்டுப்படுத்த வேண்டும் என்பதை வரையறுக்கிறது. இயல்புநிலை எல்லை பெட்டி, ஆனால் அது திணிப்பு பெட்டியில் அல்லது உள்ளடக்க பெட்டியில் மாற்றப்படலாம்.
- பின்னணி-தோற்றம்
- இந்த சொத்து பின்னணி பெட்டி, எல்லை பெட்டி அல்லது உள்ளடக்க பெட்டியில் இடங்களில் இருக்க வேண்டுமா என தீர்மானிக்கிறது.
- பின்னணி அளவு
- இந்த சொத்து பின்னணி படத்தை அளவு குறிக்க அனுமதிக்கிறது. இது பக்கம் பொருந்தும் சிறிய படங்களை நீட்டும் அனுமதிக்கிறது.
இருக்கும் பின்னணி உடை பண்புகள் மாற்றங்கள்
இருக்கும் பின்னணி பாணியில் சில மாற்றங்கள் உள்ளன:
- பின்னணி-மீண்டும்
- இந்த சொத்துக்கான இரண்டு புதிய மதிப்புகள் உள்ளன: விண்வெளி மற்றும் சுற்று. செதுக்கப்படாத பெட்டியில் உள்ள இடைவெளிகளோடு ஒளியூட்டப்பட்ட படத்தின் இடைவெளிகள் இடம். வட்டமானது பின்னணி படத்தை மறுசீரமைக்கிறது, இதனால் பெட்டியில் ஒரு முழு எண்ணை டைல் செய்யும்.
- பின்னணி-இணைப்பு
- அந்த உறுப்பு ஒரு உருள் பட்டை கொண்டிருக்கும் போது பின்புலமானது உறுப்பு உள்ளடக்கத்துடன் உருட்டும் என்று புதிய மதிப்பு "உள்ளூர்" சேர்க்கப்படுகிறது.
- பின்னணி
- பின்னணி சுருக்கெழுத்து சொத்து அளவு மற்றும் தோற்றம் பண்புகளை சேர்க்கிறது.
CSS3 பார்டர் பண்புகள்
CSS3 எல்லைகளில் நாம் (திட, இரட்டை, கோடிட்ட, முதலியன) பயன்படுத்தப்படுகிறது அல்லது அவர்கள் ஒரு படத்தை இருக்க முடியும் பாணிகள் இருக்க முடியும். பிளஸ், CSS3 வட்டமான மூலைகளிலும் உருவாக்க திறனை கொண்டு.நீங்கள் நான்கு எல்லைகளின் ஒரு படத்தை உருவாக்கி, உங்கள் எல்லைகளுக்கு அந்த படத்தை எப்படி பயன்படுத்துவது என்பதை CSS க்குள் சொல்லும் வண்ணம் சுவாரசியமானவை.
புதிய பார்டர் உடை பண்புகள்
CSS3 இல் சில புதிய எல்லை பண்புகள் உள்ளன:
- எல்லை-ஆரம்
- எல்லை-மேல் வலது-ஆரம், எல்லை-கீழ் வலது-ஆரம், எல்லை-கீழ் இடது-ஆரம், எல்லை-மேல் இடது-ஆரம்
- இந்த அம்சங்கள் உங்கள் எல்லைகளில் வட்டமான மூலைகளை உருவாக்க அனுமதிக்கின்றன.
- எல்லை-படத்தை மூல
- ஏற்கனவே வரையறுத்திருக்கும் எல்லை பாணியைப் பதிலாக பயன்படுத்த பட மூல கோப்பைக் குறிப்பிடுகிறது.
- எல்லை-படத்தை-ஸ்லைஸ்
- எல்லை பட விளிம்புகளிலிருந்து உள்ளார்ந்த முனையங்களைக் குறிக்கிறது
- எல்லை-படத்தை அகல
- உங்கள் எல்லை படத்திற்கான அகலத்தின் மதிப்பை வரையறுக்கிறது.
- எல்லை படத்தில் தொடக்கத்திலேயே
- எல்லைப் பட பகுதியை எல்லை பெட்டிக்கு அப்பால் அளிக்கும் அளவு குறிப்பிடுகிறது.
- எல்லை-படத்தை நீட்டிக்க
- எல்லைப் படத்தின் பக்கங்களும் பக்கங்களும் எப்படி ஓடுவது அல்லது அளக்கப்பட வேண்டும் என்பதை வரையறுக்கிறது.
- எல்லை-படத்தை
- அனைத்து எல்லை படத்தை பண்புகள் சுருக்குக்குறியீடு சொத்து.
எல்லைகள் மற்றும் பின்னணியில் தொடர்புடைய கூடுதல் CSS3 பண்புகள்
ஒரு பக்க முறிவில் ஒரு பாக்ஸ் உடைக்கப்படும் போது, வரி முறிவுக்கு (இன்லைன் உறுப்புகளுக்கு) நெடுவரிசை முறிவு பாக்ஸ்-அலங்காரம்-உடை சொத்து என்பது புதிய பெட்டிகள் எல்லை மற்றும் திணிப்புடன் எவ்வாறு மூடப்பட்டிருக்கும் என்பதை வரையறுக்கிறது. இந்த சொத்து பயன்படுத்தி பல உடைந்த பெட்டிகள் இடையே பின்னணிகள் பிரிக்கலாம்.
பாக்ஸ் உறுப்புகளுக்கு நிழல்கள் சேர்க்க பயன்படும் ஒரு பெட்டியற்ற நிழல் சொத்து உள்ளது.
CSS3 கொண்டு, நீங்கள் இப்போது எளிதாக அட்டவணைகள் இல்லாமல் பல நெடுவரிசைகள் அல்லது சிக்கலான DIV டேக் கட்டமைப்புகள் ஒரு வலை பக்கம் அமைக்க முடியும். நீங்கள் உடல் உறுப்பு வேண்டும் எத்தனை பத்திகள் மற்றும் அவர்கள் இருக்க வேண்டும் எப்படி பரந்த உலாவி வெறுமனே சொல்ல. பிளஸ் நீங்கள் எல்லைகளை (விதிகள்), பத்தியின் உயரத்தை உச்சரிக்கக்கூடிய பின்னணி வண்ணங்களைச் சேர்க்கலாம், மேலும் உங்கள் உரை தானாக அனைத்து நெடுவரிசைகளிலும் ஓடும்.
CSS3 பத்திகள் - பத்திகள் எண்ணிக்கை மற்றும் அகலம் வரையறுக்க
உங்கள் நெடுவரிசைகளின் எண்ணிக்கை மற்றும் அகலத்தை வரையறுக்க மூன்று புதிய பண்புகள் உள்ளன:
- நிரலை அகல
- உங்கள் நெடுவரிசை இருக்க வேண்டும் அகலம் வரையறுக்கிறது. உலாவி அகலமான பரவளையுடன் இடத்தை நிரப்ப உரையை ஓடும்.
- நிரலை-எண்ணிக்கை
- பக்கத்தின் நெடுவரிசைகளின் எண்ணிக்கையை வரையறுக்கிறது. உலாவி பின்னர் இடைவெளியில் பொருந்தக்கூடிய அளவுக்கு நெடுவரிசைகளை உருவாக்கும், ஆனால் நீங்கள் குறிப்பிடும் எண்ணுக்கு மட்டுமே.
- பத்திகள்
- நீங்கள் அகலத்தை அல்லது எண்ணை வரையறுக்கக்கூடிய ஷார்ட்ரண்ட் சொத்து (அல்லது இரண்டும், ஆனால் அரிதாகவே அர்த்தம்).
CSS3 நெடுவரிசை இடைவெளி மற்றும் விதிகள்
இடைவெளிகளிலும், விதிகளிலும் ஒரே பன்மடங்கு காட்சியில் நெடுவரிசைகளுக்கு இடையே வைக்கப்படுகிறது. இடைவெளிகள் நெடுவரிசைகளைத் தவிர்த்துவிடும், ஆனால் விதிகள் எந்த இடத்தையும் எடுக்காது. நெடுவரிசையை விட ஒரு நெடுவரிசை விட்டம் அதிகமாக இருந்தால், அது அடுத்தடுத்த நெடுவரிசைகளை இணைக்கும். நெடுவரிசை விதிகள் மற்றும் இடைவெளிகளில் ஐந்து புதிய பண்புகள் உள்ளன:
- கம்ப-இடைவெளி
- பத்திகளுக்கு இடைவெளிகளின் அகலத்தை வரையறுக்கிறது.
- கம்ப-ஆட்சி வண்ண
- ஆட்சியின் நிறத்தை வரையறுக்கிறது.
- கம்ப-ஆட்சி பாணி
- விதிகளின் பாணி (திட, புள்ளி, இரட்டை, முதலியவை) வரையறுக்கிறது.
- கம்ப-ஆட்சி அகல
- விதி அகலத்தை வரையறுக்கிறது.
- கம்ப-ஆட்சி
- ஒரே நேரத்தில் மூன்று நெடுவரிசை விதி பண்புகள் வரையறுக்கும் சுருக்கெழுத்து சொத்து.
CSS3 நெடுவரிசை இடைவெளிகள், Spanning பத்திகள், மற்றும் நிரப்புதல் நிரல்கள்
நெடுவரிசை இடைவெளிகள் பேஜ்டு உள்ளடக்கத்தில் இடைவெளிகளை வரையறுக்க பயன்படுத்தப்படும் அதே CSS2 விருப்பங்களைப் பயன்படுத்துகின்றன, ஆனால் மூன்று புதிய பண்புகளுடன்: உடைக்க முன், உடைக்க பிறகு, மற்றும் உடைக்க-உள்ளே.
அட்டவணையைப் போலவே, நெடுவரிசைகளை நெடுவரிசை span சொத்துடன் இணைக்க முடியும். இது பல பத்திரிகைகளைப் போல ஒரு பத்திரிகை போன்ற தலைப்புகளை உருவாக்குவதற்கு உங்களை அனுமதிக்கிறது.
ஒவ்வொரு நெடுவரிசையில் எத்தனை உள்ளடக்கம் இருக்கும் என்பதை நிரப்பு நிரப்புகிறது. பத்தியில் பத்திகள் முழுமையாக நிரப்பப்படும் வரை அடுத்த உள்ளடக்கத்திற்கு பாயும் போது சமச்சீரற்ற பத்திகள் ஒவ்வொரு நிரலிலும் உள்ளடக்கத்தை அதே அளவு வைக்க முயற்சிக்கின்றன.
CSS2 இல் சேர்க்கப்படவில்லை என்று CSS3 இல் மேலும் அம்சங்கள்
CSS2 இல் இல்லை என்று CSS3 கூடுதல் அம்சங்கள் நிறைய உள்ளன, இதில்:
- CSS டெம்ப்ளேட் அமைப்பு தொகுதி மற்றும் CSS3 கட்டம் நிலைப்படுத்தல் தொகுதி: CSS உடன் கட்டங்களை உருவாக்குதல்.
- CSS3 உரை தொகுதி: உரை உரை மற்றும் கூட CSS கொண்டு drop-shadows உருவாக்க.
- CSS3 வண்ண தொகுதி: இப்போது ஒளிபுகா.
- பாக்ஸ் மாதிரி மாற்றங்கள்: IE குறி போன்ற செயல்படும் ஒரு மார்கியூ சொத்து உட்பட.
- CSS3 பயனர் இடைமுகம் தொகுதி: புதிய புதிய இடஞ்சுட்டிகள், செயல்களுக்கான பதில்கள், தேவையான புலங்கள், மற்றும் மறு கூறுகள் ஆகியவற்றையும் கொடுக்கிறது.
- மீடியா கேள்விகள்: ஒரு நடை தாள் எவ்வாறு பயன்படுத்தப்பட வேண்டும் என்பதை வரையறுக்கும்போது ஊடக வினவல்கள் நீங்கள் அதிக நெகிழ்வுத்தன்மையை அனுமதிக்கின்றன. உதாரணமாக, நீங்கள் 20m ஐ விட அதிகமான பார்வை கொண்ட கையடக்க சாதனங்களுக்கான ஒரு நடை தாளை வரையறுக்கலாம்.
- CSS3 ரூபி தொகுதி: ஆவணங்களை சிறுகுறிப்பு உரை ரூபி பயன்படுத்தும் மொழிகளை ஆதரவு வழங்குகிறது.
- CSS3 பேஜ்டு மீடியா தொகுதி: பேஜ்டு ஊடகங்களுக்கு இன்னும் ஆதரவு (காகிதம், transparencies, போன்றவை).
- உருவாக்கப்பட்ட உள்ளடக்கம்: L இயங்கும் தலைப்புகள் மற்றும் அடிக்குறிப்பு, அடிக்குறிப்புகள் மற்றும் நிரலாக்க ரீதியாக உருவாக்கப்படும் பிற உள்ளடக்கம், குறிப்பாக பேஜ்டு ஊடகங்களுக்கு.
- CSS3 பேச்சு தொகுதி: சுருள் CSS மாற்றங்கள்.
