ஒரு வலைத்தளத்தின் காட்சி பாணி மற்றும் தளவமைப்பு CSS அல்லது விழுத்தொடர் நடைத்தாள்கள் மூலம் ஆணையிடப்படுகின்றன. இவை வலைப்பக்கத்தின் HTML குறியீட்டை வடிவமைக்கும் ஆவணங்களாகும், அவை இணைய உலாவிகளுக்கு அந்த மார்க்கெப்ட்டின் விளைவாக பக்கங்களை எவ்வாறு காட்ட வேண்டும் என்பதைக் காட்டும். CSS ஒரு பக்கம் அமைப்பை கையாளுகிறது, அதே போல் நிறம், பின்னணி படங்கள், அச்சுக்கலை மற்றும் மிகவும்.
நீங்கள் CSS கோப்பை பார்த்தால், எந்த மார்க்அப் அல்லது குறியீட்டு மொழி போலவே, இந்த கோப்புகளுக்கு ஒரு குறிப்பிட்ட இலக்கணத்தை நீங்கள் காணலாம். ஒவ்வொரு நடைமுறை தாள் பல CSS விதிகள் கொண்டது. இந்த விதிகள், முழுமையாக எடுக்கப்பட்ட போது, தளங்கள் என்ன பாணிகள் உள்ளன.
ஒரு CSS விதி பகுதிகள்
ஒரு CSS ஆட்சி இரண்டு தனித்துவமான பகுதிகளால் உருவாக்கப்பட்டது - தேர்வுக்குழு மற்றும் அறிவிப்பு. ஒரு பக்கத்தில் பாணியில் என்ன நடக்கிறது என்பதை தெரிவுசெய்கிறது மற்றும் அது எப்படி பாணியில் இருக்க வேண்டும் என்பதை அறிவிக்கிறது. உதாரணத்திற்கு:
p {
நிறம்: # 000;
}
இது ஒரு CSS விதி. தேர்வுப் பகுதி "p" ஆகும், இது "பத்திகள்" க்கான உறுப்பு தேர்வுக்குழு ஆகும். எனவே, இது ஒரு தளத்தில் உள்ள அனைத்து பத்திகளையும் தேர்ந்தெடுத்து, இந்த பாணியில் வழங்கப்படும். (உங்கள் CSS ஆவணத்தில் வேறுபட்ட பாணிகளை இலக்காகக் கொண்ட பத்திகள் இருக்கும்பட்சத்தில்).
"நிறம்: # 000; பிரகடனம் என்று கூறப்படுகிறது. அந்த அறிவிப்பு இரண்டு துண்டுகள் - சொத்து மற்றும் மதிப்பு.
சொத்து இந்த அறிவிப்பின் "வண்ண" துண்டு. இது தேர்வாளரின் அம்சம் பார்வைக்கு மாறும்.
மதிப்பு தேர்ந்தெடுக்கப்பட்ட CSS சொத்து மாற்றப்படும் என்ன. எங்கள் எடுத்துக்காட்டாக, நாம் "கருப்பு" ஐந்து CSS சுருக்கெழுத்து இது # 000 என்ற hex மதிப்பு பயன்படுத்தி.
இந்த CSS விதியைப் பயன்படுத்துவதால், எங்கள் பக்கம் கருப்பு நிறத்தில் உள்ள எழுத்துரு வண்ணத்தில் காட்டப்படும் பத்திகள் இருக்கும்.
CSS சொத்து அடிப்படைகள்
நீங்கள் CSS பண்புகளை எழுதும்போது, நீங்கள் பொருத்தமாக இருப்பதைப் போல் நீங்கள் அவற்றை வெறுமனே உருவாக்க முடியாது. உதாரணமாக, "வண்ணம்" என்பது ஒரு உண்மையான CSS சொத்து, எனவே அதை நீங்கள் பயன்படுத்தலாம். இந்த சொத்து ஒரு உறுப்பு உரை வண்ணம் தீர்மானிக்கிறது என்ன. நீங்கள் CSS பண்புகளாக "text-color" அல்லது "font-color" ஐப் பயன்படுத்த முயற்சி செய்தால், இவை CSS மொழியின் உண்மையான பகுதிகளல்ல, ஏனெனில் அவை தோல்வியடையும்.
மற்றொரு உதாரணம் சொத்து "பின்னணி-படம்". இந்த சொத்து பின்னணிக்கு பயன்படுத்தக்கூடிய ஒரு படத்தை அமைக்கிறது, இதைப் போன்றது:
. லோகோ {
பின்னணி-படம்: url (/images/company-logo.png);
}
நீங்கள் "பின்னணி-படம்" அல்லது "பின்னணி-கிராஃபிக்" சொத்தை ஒரு சொத்து என்று பயன்படுத்தினால், அவர்கள் தோல்வியடைவார்கள், ஏனெனில் மீண்டும், இந்த உண்மையான CSS பண்புகள் அல்ல.
சில CSS பண்புகள்
ஒரு தளம் பாணி பயன்படுத்த முடியும் என்று CSS பண்புகள் பல உள்ளன. சில உதாரணங்கள்:
- எல்லை (எல்லை பாணி, எல்லை-வண்ணம் மற்றும் எல்லை அகலம் உட்பட)
- திணிப்பு (திணிப்பு-மேல், திணிப்பு-வலது, திணிப்பு-கீழே, மற்றும் திணிப்பு-இடது உட்பட)
- விளிம்புகள் (விளிம்பு-மேல், விளிம்பு-வலது, விளிம்பு-கீழ், மற்றும் விளிம்பு-இடது உட்பட)
- எழுத்துரு குடும்பம்
- எழுத்துரு அளவு
- பின்னணி நிறம்
- அகலம்
- உயரம்
இந்த CSS பண்புகளை உதாரணமாக பயன்படுத்த பெரியவர்கள், அவர்கள் அனைத்து மிகவும் நேரடியான மற்றும் ஏனெனில், நீங்கள் CSS தெரியாது கூட, ஒருவேளை நீங்கள் அவர்கள் பெயர்கள் அடிப்படையில் என்ன நினைக்கிறேன்.
மற்ற பெயர்களையும் நீங்கள் காணலாம், அவை அவற்றின் பெயர்களை அடிப்படையாகக் கொண்டு எவ்வாறு செயல்படுகின்றன என்பது தெளிவாக தெரியவில்லை:
- மிதவை
- தெளிவு
- அளவிற்கதிகமாக
- உரை மாற்றும்
- Z- குறியீட்டு
நீங்கள் வலை வடிவமைப்பு ஆழமாக கிடைக்கும் என, நீங்கள் இந்த பண்புகள் மற்றும் இன்னும் சந்திப்பதில்லை (மற்றும் பயன்படுத்த)!
பண்புகள் கலாச்சாரம் தேவை
ஒவ்வொரு முறையும் நீங்கள் ஒரு சொத்தை பயன்படுத்தினால், நீங்கள் அதை ஒரு மதிப்பை கொடுக்க வேண்டும் - சில குறிப்பிட்ட பண்புகள் சில குறிப்பிட்ட மதிப்புகளை மட்டுமே ஏற்றுக்கொள்ளும்.
"வண்ணம்" சொத்தின் முதலாவதான உதாரணம், நாம் ஒரு வண்ண மதிப்பு பயன்படுத்த வேண்டும். இது ஒரு ஹெக்ஸ் மதிப்பு , RGBA மதிப்பு அல்லது நிற முக்கிய வார்த்தைகளாக இருக்கலாம் . இந்தச் சொற்களில் "இருண்ட" வார்த்தையை நீங்கள் பயன்படுத்தியிருந்தால் அந்த மதிப்புகள் எந்தவொரு வேலை செய்தாலும், அது ஒன்றும் செய்யாது, ஏனென்றால் அந்த வார்த்தையை விவரிப்பதால் இது CSS இல் அங்கீகரிக்கப்பட்ட மதிப்பு அல்ல.
"பின்னணி-படத்தை" எங்கள் இரண்டாவது உதாரணம் ஒரு பட பாதை உங்கள் தளத்தில் கோப்புகளை ஒரு உண்மையான படத்தை பெற பயன்படுத்த வேண்டும். இது மதிப்பு / தொடரியல் தேவைப்படுகிறது.
அனைத்து CSS பண்புகள் அவர்கள் எதிர்பார்க்கும் மதிப்புகள் உள்ளன. உதாரணத்திற்கு:
- பார்டர்-வண்ணம் வண்ண மதிப்பு எதிர்பார்க்கிறது
- பிக்ஸல் அளவு, பிக்சல்கள் அல்லது சதவிகிதம் போன்ற அளவிடக்கூடிய மதிப்பை எதிர்பார்க்கிறது
- பார்டர் பாணியை இந்த சொத்துக்காக பயன்படுத்தப்படும் ஒதுக்கப்பட்ட வடிவங்களில் ஒன்றை எதிர்பார்க்கிறது, "திடமான"
நீங்கள் CSS பண்புகளின் பட்டியல் வழியாக சென்றால், அவை ஒவ்வொன்றும் குறிப்பிட்ட நோக்கங்களைக் கொண்டிருக்கின்றன என்பதை அவர்கள் கண்டுபிடிப்பார்கள், அவை அவர்கள் நோக்கம் கொண்டுள்ள பாணியை உருவாக்க பயன்படுத்தலாம்.
ஜெர்மி கிரார்ட் திருத்தப்பட்டது