കാസ്‌കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ്‌സ്
മാർക്കപ്പ് ഭാഷകൾ ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്ന പ്രമാണങ്ങൾ എങ്ങനെ പ്രദർശിപ്പിക്കണമെന്ന് പറഞ്ഞുകൊടുക്കാൻ ഉപയോഗിക്കുന്ന ഒരു സ്റ്റൈൽഷീറ്റ് ഭാഷയാണ് കാസ്‌കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ് (Cascading Style Sheets) അഥവാ സി.എസ്.എസ് (CSS). സാധാരണ ഗതിയിൽ എച്.റ്റി.എം.എൽ. പിന്നെ എക്സ്.എച്.റ്റി.എം.എൽ. എന്നീ മാർക്കപ്പ് ഭാഷകൾ ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്ന പ്രമാണങ്ങളുടെ പ്രദർശനം നിയന്ത്രിക്കുവാനും ദൃശ്യഭംഗി വർദ്ധിപ്പിക്കുവാനും മറ്റും സി.എസ്.എസ് ഉപയോഗിക്കുന്നു, പക്ഷെ ഈ സ്റ്റൈൽഷീറ്റ് ഭാഷ ഏത് തരത്തിലുമുള്ള എക്സ്.എം.എൽ പ്രമാണങ്ങളിലും, എസ്.വി.ജി. പിന്നെ എക്സ്.യു.എൽ. ഉൾപ്പെടെ, ഉപയോഗിക്കുവാൻ സാധിക്കുന്നു.
 ഏറ്റവും പുതിയ പതിപ്പായ സിഎസ്എസ് 3 യുടെ ഔദ്യോഗിക ലോഗോ | |
| എക്സ്റ്റൻഷൻ | .css |
|---|---|
| ഇന്റർനെറ്റ് മീഡിയ തരം | text/css |
| യൂനിഫോം ടൈപ്പ് ഐഡന്റിഫയർ | public.css |
| പുറത്തിറങ്ങിയത് | 17 ഡിസംബർ 1996 |
| ഏറ്റവും പുതിയ പതിപ്പ് | CSS 2.1 : Level 2 Revision 1 / 12 ഏപ്രിൽ 2016 |
| ഫോർമാറ്റ് തരം | Style sheet language |
| വെബ്സൈറ്റ് | www |
ഒരു ഉദാഹരണത്തിന് , ഒരു എച്.റ്റി.എം.എൽ പ്രമാണത്തിന്റെ പശ്ചാത്തലത്തിന് പച്ചനിറവും അക്ഷരങ്ങൾക്കെല്ലാം വെള്ളനിറവും കൊടുക്കണമെന്നുണ്ടെങ്കിൽ അത് സി.എസ്.എസ് ഉപയോഗിച്ച് പറഞ്ഞുകൊടുക്കാൻ സാധിക്കും. മുൻകാലങ്ങളിൽ എച്.ടി.എം.എൽ താളുകളിൽ ഉള്ളടക്കവും, താൾ ബ്രൗസറിൽ എങ്ങനെ പ്രദർശിപ്പിക്കണമെന്നുള്ള നിർദ്ദേശങ്ങളും ഒരുമിച്ചാണ് കൊടുത്തിരുന്നത്. ഓരോ എച്.ടി.എം.എൽ ഘടകത്തിന്റേയും പ്രദർശനക്രമങ്ങൾ അതത് ടാഗിനുള്ളിൽ വ്യക്തമാക്കേണ്ടി വന്നിരുന്നു, ഉദാഹരണത്തിന് അക്ഷരങ്ങളാണെങ്കിൽ എത് ഫോണ്ട് ഉപയോഗിക്കണം, ഫോണ്ടുകളുടെ നിറം, വലിപ്പം, താളിന്റെ കാര്യത്തിൽ പശ്ചാത്തലനിറം, പശ്ചാത്തല ചിത്രം, മറ്റ് എച്ച്.ടി.എം.എൽ ഘടകങ്ങളായ റ്റേബിൾ, സ്പാൻ എന്നിവയുടെ കാര്യത്തിൽ അരികുകൾ (border) അടയാളപ്പെടുത്തണോ, വേണമെങ്കിൽ ഏത് നിറം ഉപയോഗിച്ചുവേണം , എത്ര വീതിയിൽ വേണം എന്നിങ്ങനെയുള്ള അനേകം ഗുണങ്ങൾ അഥവാ പ്രോപ്പർട്ടികളും അവയുടെ മൂല്യങ്ങളും. ഉള്ളടക്കവും ഇത്തരം പ്രദർശന നിർദ്ദേശങ്ങളും എച്.ടി.എം.എൽ താളുകളിൽ ഇടകലർന്നു കിടക്കുന്നതിനാൽ പലതരത്തിലുള്ള ബുദ്ധിമുട്ടുകൾ ഉണ്ടാവാം, സി.എസ്.എസിന്റെ വരവോടെ താളിലെ ഉള്ളടക്കവും പ്രദർശനക്രമീകരണ നിർദ്ദേശങ്ങളും തമ്മിലുള്ള വേർതിരിവ് സാധ്യമായി. ഇത് പേജ് രൂപകല്പന ചെയ്യുന്നയാൾക്ക് മെച്ചപ്പെട്ട നിയന്ത്രണം നൽകുന്നതോടൊപ്പം, ഒന്നിൽ കൂടുതൽ താളുകളിൽ ഒരേ സി.എസ്.എസ് ഉപയോഗിക്കുന്നതിലൂടെയും മറ്റും ആവർത്തനങ്ങൾ ഒഴിവാക്കുവാനും സഹായിക്കുന്നു.
സി.എസ്.എസ് മാനദണ്ഡങ്ങൾ വേൾഡ് വൈഡ് വെബ് കൺസോർഷ്യത്തിന്റെ മേൽനോട്ടത്തിലാണ് നിശ്ചയിക്കപ്പെടുന്നത്. 1998 മാർച്ചിൽ പ്രസിദ്ധീകരിച്ച ആർ.എഫ്.സി 2318 (RFC 2318) പ്രകാരം ഇന്റർനെറ്റ് മീഡിയാ തരം അഥവാ മൈം തരമായ text/css സി.എസ്.എസ് പ്രമാണങ്ങളിൽ ഉപയോഗിക്കുവാൻ വേണ്ടി മാത്രമായി നീക്കിവച്ചിരിക്കുന്നു.
എഴുത്തു രീതി
തിരുത്തുകവളരെ ലളിതമായ നിയമങ്ങളാണ് സി.എസ്.എസിനുള്ളത്. പ്രദർശനക്രമീകരണ നിർദ്ദേശങ്ങൾക്ക് സ്റ്റൈൽ റൂളുകൾ (style rules) എന്നാണ് പറയുക. സ്റ്റൈൽ ഷീറ്റുകളിൽ സ്റ്റൈൽ റൂളുകളുടെ ഒരു കൂട്ടമാണുണ്ടാവുക. ഒരു സി.എസ്.എസ് സ്റ്റൈൽ റൂളിന് രണ്ടു പ്രധാന ഭാഗങ്ങളാണുള്ളത്
- ഒരു സെലക്ടർ
- ഒന്നോ അധികലധികമോ ഡിക്ലറേഷനുകൾ
പ്രദർശനക്രമം ബാധകമാകേണ്ട എച്.ടി.എം.എൽ ഘടകങ്ങളെ തിരഞ്ഞെടുക്കാനാണ് സെലക്ടർ. ഡിക്ലറേഷനുകൾ വഴിയാണ് സെലക്‌ടറിന്റെ ഗുണഗണങ്ങൾ പറയുന്നത്. ഒരു ഡിക്ലറേഷനിൽ ഒരു ഗുണവും (property) അതിന്റെ മൂല്യവുമുണ്ടാകും (value). ഒരു സ്റ്റൈൽ റൂളിൽ ഒന്നിൽ കൂടുതൽ ഡിക്ലറേഷനുകൾ കാണും, ഇവ {} ആവരണചിഹ്നത്തിനുള്ളിലായി തമ്മിൽ അർദ്ധവിരാമം ഉപയോഗിച്ച് വേർതിരിച്ചാണെഴുതുക. മുകളിൽ കൊടുത്തിരിക്കുന്ന ഉദാഹരണചിത്രത്തിൽ , എച്.ടി.എം.എൽ താളുകളിൽ ഖണ്ഡികകളെ നിർവചിക്കുവാൻ ഉപയോഗിക്കുന്ന < p > ടാഗിനു വേണ്ടിയുള്ള സി.എസ്.എസ് സ്റ്റൈൽ റൂളാണ് കാണുന്നത്. അക്ഷരങ്ങളുടെ ഫോണ്ട് ഏരിയൽ ആയിരിക്കണം, വലിപ്പം 25 പിക്സ്‌ൽ വേണം, നിറം പച്ച എന്നിങ്ങനെയുള്ള നിർദ്ദേശങ്ങളാണ് ഇതിലുള്ളത്. താളിലുള്ള എല്ലാ ഖണ്ഡികൾക്കും മേൽപ്പറഞ്ഞ സ്റ്റൈൽറൂൾ ബാധകമാണ്, അതായത് എല്ലാ < p > ടാഗുകൾക്കകത്തും ഇത് പ്രയോഗിക്കപ്പെടും.
സെലക്‌ടറുകൾ പലവിധമുണ്ട്, മുകളിലത്തെ ചിത്രത്തിൽ കാണുന്നതുപോലെ ടാഗിന്റെ പേര് പറഞ്ഞു കൊടുത്ത് പ്രദർശനക്രമം ബാധകമാകേണ്ട എച്.ടി.എം.എൽ ഘടകങ്ങളെ തിരഞ്ഞെടുക്കുന്നത് പലമാർഗങ്ങളിൽ ഒന്നാണ്, ഇതിനെ ടൈപ്പ് സെലക്ടർ എന്നാണ് പറയുക. ഇത് കൂടാതെ ഡിസെൻഡന്റ് സെലക്ടർ (Descendant selectors) ചൈൽഡ് സെലക്ടർ (Child selectors), ആട്രിബ്യൂട്ട് സെലക്ടർ (Attribute selectors), ക്ലാസ് സെലക്ടർ (Class selectors), ഐഡി സെലക്ടർ (ID selectors) തുടങ്ങിയവയുണ്ട്. ഇതിൽ കൂടുതൽ ഉപയോഗത്തിൽ കാണുന്ന രണ്ടെണ്ണമാണ് ഐഡി സെലക്‌ടറും, ക്ലാസ് സെലക്‌ടറും.
ഐഡി സെലക്ടർ
തിരുത്തുകഒരു പ്രത്യേക എച്.ടി.എം.എൽ ഘടകത്തിന് മാത്രമായി പ്രദർശനക്രമം പറഞ്ഞുകൊടുക്കുവാനാണ് ഐഡി സെലക്ടർ ഉപയോഗിക്കുന്നത്. ഏത് എച്.ടി.എം.എൽ ഘടകത്തിലാണ് പ്രയോഗിക്കേണ്ടതെന്ന് അതിന്റെ ഐഡി (id) എന്ന ഗുണത്തിൽ നിന്നാണ് മനസ്സിലാക്കുന്നത്. ഐഡി സെലക്‌ടറുകൾ ഉപയോഗിച്ച് സ്റ്റൈൽ റൂളുകൾ എഴുതുമ്പോൾ ' # 'ചിഹ്നം, അതിനുശേഷം ഐഡിയുടെ പേര്, പിന്നെ {} ആവരണചിഹ്നത്തിനുള്ളിലായി ഡിക്ലറേഷനുകൾ എന്ന നിയമം പാലിക്കണം. [1]
#blueHead
{
font-family:verdana;
font-size:18px;
font-weight:bold;
color:blue;
}
ഏത് എച്.ടി.എം.എൽ ഘടകത്തിനാണോ id="blueHead" എന്ന ഗുണമുള്ളത് ആ എച്.ടി.എം.എൽ ഘടകത്തിനുള്ളിൽ മേൽപ്പറഞ്ഞിരിക്കുന്ന സ്റ്റൈൽ റൂൾ പ്രയോഗിക്കപ്പെടും. ഐഡി ഗുണത്തിന്റെ പ്രത്യേകതയെന്തെന്നു വച്ചാൽ അത് അദ്വയമാണ്, ഒരു എച്.ടി.എം.എൽ പ്രമാണത്തിൽ ഒരു ഘടകത്തിന്റെ ഐഡി മറ്റൊന്നിനു കൊടുക്കാൻ സാധ്യമല്ല.
ക്ലാസ് സെലക്ടർ
തിരുത്തുകഒന്നിൽ കൂടുതൽ എച്.ടി.എം.എൽ ഘടകങ്ങളിൽ ആവശ്യമനുസരിച്ച് പ്രദർശനക്രമങ്ങൾ പ്രയോഗിക്കുവാനുള്ള സൗകര്യം ക്ലാസ് സെലക്‌ടറുകൾ വഴി ലഭിക്കുന്നു. ഏതൊക്കെ എച്.ടി.എം.എൽ ഘടകങ്ങളിലാണ് പ്രയോഗിക്കേണ്ടതെന്ന് ആ ഘടകങ്ങളുടെ ക്ലാസ് (class) എന്ന ഗുണത്തിൽ നിന്നാണ് മനസ്സിലാക്കേണ്ടത്. ക്ലാസ് സെലക്‌ടറുകൾ ഉപയോഗിച്ച് സ്റ്റൈൽ റൂളുകൾ എഴുതുമ്പോൾ ' . ' ചിഹ്നം, അതിനുശേഷം ക്ലാസിന്റെ പേര്, പിന്നെ {} ആവരണചിഹ്നത്തിനുള്ളിലായി ഡിക്ലറേഷനുകൾ എന്ന നിയമം പാലിക്കണം. ഒന്നിൽ കൂടുതൽ ഘടകങ്ങൾക്ക് ഒരേ ക്ലാസ് ഗുണം കൊടുക്കാം. ഒരേ ക്ലാസ് പേരുള്ള എല്ലാ എച്.ടി.എം.എൽ ഘടകങ്ങൾക്കും ആ ക്ലാസ് സെലക്ടർ ഉപയോഗിച്ചു എഴുതിക്കൊടുത്തിട്ടുള്ള സ്റ്റൈൽ റൂളുകൾ ബാധകമാവും. [1]
.normalText
{
font-family:verdana;
font-size:12px;
color:black;
}
ഏതൊക്കെ എച്.ടി.എം.എൽ ഘടകങ്ങൾക്കാണോ class="normalText" എന്ന ഗുണമുള്ളത് ആ എച്.ടി.എം.എൽ ഘടകങ്ങളിൽ മേൽപ്പറഞ്ഞിരിക്കുന്ന സ്റ്റൈൽ റൂൾ പ്രയോഗിക്കപ്പെടും.
സെലക്ടർ
തിരുത്തുകമാർക്ക്അപ്പിലെ ടാഗുകളും ആട്രിബ്യൂട്ടുകളും പൊരുത്തപ്പെടുത്തിക്കൊണ്ടുള്ള ഒരു ശൈലി മാർക്ക്അപ്പിന്റെ ഏത് ഭാഗത്തിന് ബാധകമാണെന്ന് സി‌എസ്‌എസിൽ സെലക്ടേഴ്സ് പ്രഖ്യാപിക്കുന്നു. സെലക്ടേഴ്സിന് ഇനിപ്പറയുന്നവ ബാധകമാണ്:
- ഒരു നിർദ്ദിഷ്ട തരത്തിന്റെ എല്ലാ എലമെന്റുകളും ഉൾപ്പെടുന്നു, ഉദാ. രണ്ടാമത്തെ ലെവൽ തലക്കെട്ടുകൾ h2
- ആട്രിബ്യൂട്ട് വ്യക്തമാക്കിയ എലമെന്റുകൾ, പ്രത്യേകിച്ചും:
- ഐഡി: പ്രമാണത്തിനുള്ളിൽ അദ്വിതീയമായ ഒരു ഐഡന്റിഫയർ, ഒരു ഹാഷ് പ്രിഫിക്‌സ് ഉപയോഗിക്കുന്നു ഉദാ.
#id - ക്ലാസ്: ഒരു പ്രമാണത്തിലെ ഒന്നിലധികം എലമെന്റുകളെ വ്യാഖ്യാനിക്കാൻ കഴിയുന്ന ഒരു ഐഡന്റിഫയർ, ഒരു പീരിയഡ് പ്രിഫിക്‌സ് ഉപയോഗിക്കുന്നു, ഉദാ.
.classname
- ഐഡി: പ്രമാണത്തിനുള്ളിൽ അദ്വിതീയമായ ഒരു ഐഡന്റിഫയർ, ഒരു ഹാഷ് പ്രിഫിക്‌സ് ഉപയോഗിക്കുന്നു ഉദാ.
- ഡോക്യുമെന്റ് ട്രീയിലെ മറ്റുള്ളവയുമായി എങ്ങനെ ബന്ധപ്പെട്ടുകിടക്കുന്നു എന്നതിനെ ആശ്രയിച്ചാണ് എലമെന്റിന്റെ നിലനിൽപ്.
ക്ലാസുകളും ഐഡികളും കേസ് സെൻ‌സിറ്റീവ് ആണ്, അക്ഷരങ്ങളിൽ ആരംഭിക്കുക, കൂടാതെ ആൽ‌ഫാന്യൂമെറിക് പ്രതീകങ്ങൾ, ഹൈഫനുകൾ, അടിവരകൾ എന്നിവ ഉൾ‌പ്പെടുത്താം. ഏതെങ്കിലും എലമെന്റുകളുടെ എത്ര ഉദാഹരണങ്ങൾ വേണമെങ്കിലും ക്ലാസ് ഉൾപ്പെടുത്തുവാൻ കഴിയും. എന്നാൽ ഒരൊറ്റ എലമെന്റിൽ മാത്രമേ ഐഡി പ്രയോഗിക്കാൻ കഴിയൂ.
ഡോക്യുമെന്റ് ട്രീയിൽ ഇല്ലാത്ത വിവരങ്ങളുടെ അടിസ്ഥാനത്തിൽ ഫോർമാറ്റിംഗ് അനുവദിക്കുന്നതിന് സിഎസ്എസ് സെലക്ടറുകളിൽ സ്യൂഡോ ക്ലാസുകൾ ഉപയോഗിക്കുന്നു. വ്യാപകമായി ഉപയോഗിക്കുന്ന സ്യൂഡോ ക്ലാസാണ്:hoverഉപയോക്താവ് ദൃശ്യമാകുന്ന എലമെന്റിനെ "പോയിന്റുചെയ്യുമ്പോൾ" മാത്രമേ ഉള്ളടക്കം ദൃശ്യമാകുകയുള്ളു, ഉദാഹരണത്തിന് മൗസ് കഴ്‌സർ മുകളിൽ പിടിക്കുമ്പോൾ മാത്രമെ a:hover അല്ലെങ്കിൽ #elementid:hover പോലുള്ള സെലക്ടർ കാണാൻ കഴിയുകയുള്ളു. ഒരു സ്യൂഡോ-ക്ലാസ് പ്രമാണ ഘടകങ്ങളെ തരംതിരിക്കുന്നു ഉദാ::link അല്ലെങ്കിൽ :visited, അതേസമയം ഒരു സ്യൂഡോ എലമെന്റ് ഭാഗിക ഘടകങ്ങൾ ഉൾക്കൊള്ളുന്ന ഒരു തിരഞ്ഞെടുപ്പ് നടത്തുന്നു, ഉദാ: ::first-line അല്ലെങ്കിൽ ::first-letter.[2]
മികച്ച സവിശേഷതയും വഴക്കവും നേടുന്നതിന് സെലക്ടേഴ്സിനെ പല തരത്തിൽ സംയോജിപ്പിക്കാം.[3] സ്ഥാനം, എലമെന്റ് ടൈപ്പ്, ഐഡി, ക്ലാസ് അല്ലെങ്കിൽ അതിന്റെ ഏതെങ്കിലും കോമ്പിനേഷൻ അനുസരിച്ച് ഘടകങ്ങൾ വ്യക്തമാക്കുന്നതിന് ഒന്നിലധികം സെലക്ടേഴ്സിനെ ഒരു സ്പേസ്ഡ് ലിസ്റ്റിൽ ചേർക്കാം. സെലക്ടേഴ്സിന്റെ ക്രമം പ്രധാനമാണ്. ഉദാഹരണത്തിന്,div .myClass {color: red;}ക്ലാസ് എലമെന്റിലുള്ള ക്ലാസ് myClass ന്റെ എല്ലാ ഘടകങ്ങൾക്കും ഇത് ബാധകമാണ് .myClass div {color: red;}ക്ലാസ് മൈക്ലാസിലെ ഘടകങ്ങളിലുള്ള എല്ലാ ഡിവ്(div)എലമെന്റുകൾക്കും ഇത് ബാധകമാണ്. ഇത് പോലുള്ള സംയോജിത ഐഡന്റിഫയറുകളുമായി തെറ്റിദ്ധരിക്കരുത് div.myClass {color: red;}ക്ലാസ് myClass സിലെ ഡിവ് എലമെന്റുകൾക്കും ഇത് ബാധകമാണ്.
ഇനിപ്പറയുന്ന പട്ടിക ഉപയോഗത്തെ സൂചിപ്പിക്കുന്ന സെലക്ടർ സിന്റാക്സിന്റെ സംഗ്രഹവും അത് അവതരിപ്പിച്ച സി‌എസ്‌എസിന്റെ പതിപ്പുകളുടെ വിവരങ്ങളും നൽകുന്നു.
[4]
| പാറ്റേൺ | പൊരുത്തങ്ങൾ | സിഎസ്എസ് ലെവലിൽ ആദ്യം നിർവചിച്ചിരിക്കുന്നത് |
|---|---|---|
E |
ടൈപ്പ് ഇയുടെ(E) ഒരു ഘടകം | 1 |
E:link |
ടാർഗെറ്റ് ഇതുവരെ സന്ദർശിച്ചിട്ടില്ലാത്ത (: link) അല്ലെങ്കിൽ ഇതിനകം സന്ദർശിച്ച (:link) ഒരു ഹൈപ്പർലിങ്കിന്റെ സോഴ്സ് ആങ്കറാണ് ഇ എലമെന്റ്. | 1 |
E:active |
ചില ഉപയോക്തൃ പ്രവർത്തനങ്ങളിൽ ഉള്ള ഇ എലമെന്റ് | 1 |
E::first-line |
ഒരു ഇ എലമെന്റിന്റെ ആദ്യത്തെ ഫോർമാറ്റ് ചെയ്ത വരി | 1 |
E::first-letter |
ഒരു ഇ എലമെന്റിന്റെ ആദ്യത്തെ ഫോർമാറ്റ് ചെയ്ത അക്ഷരം | 1 |
.c |
class="c" യിൽ തുടങ്ങുന്ന എല്ലാ ഘടകങ്ങളും | 1 |
#myid |
id="myid" തുടങ്ങുന്ന ഘടകം | 1 |
E.warning |
ക്ലാസ് "വാണിംഗ്" ഉള്ള ഇ ഘടകം (ക്ലാസ് എങ്ങനെ നിർണ്ണയിക്കണമെന്ന് ഡോക്യുമെന്റ് ഭാഷ വ്യക്തമാക്കുന്നു) | 1 |
E#myid |
ഐഡിക്ക് തുല്യമായ ഇ(E) ഘടകമാണ് "myid" | 1 |
.c#myid |
class="c", ഐഡി എന്നിവ "myid" യക്ക് തുല്യമായ ഘടകമാണ് | 1 |
E F |
എഫ് എലമെന്റ് ഇ എലമെന്റിന്റെ പിൻ‌ഗാമിയാണ് | 1 |
* |
എതെങ്കിലും എലമെന്റ് | 2 |
E[foo] |
"foo" ആട്രിബ്യൂട്ട് ഉള്ള ഒരു E ഘടകം | 2 |
E[foo="bar"] |
ഫൂ("foo") ആട്രിബ്യൂട്ട് മൂല്യം "ബാർ"(bar) എന്നതിന് തുല്യമായ ഒരു E ഘടകം | 2 |
E[foo~="bar"] |
"ഫൂ" ആട്രിബ്യൂട്ട് മൂല്യം വൈറ്റ്സ്പേസ് വേർതിരിച്ച മൂല്യങ്ങളുടെ ഒരു പട്ടികയാണ്, അതിൽ ഒന്ന് "ബാർ" എന്നതിന് തുല്യമാണ് | 2 |
E[foo|="en"] |
"foo" ആട്രിബ്യൂട്ടിന് "en" എന്ന് ആരംഭിക്കുന്ന (ഇടത് നിന്ന്) ആരംഭിക്കുന്ന മൂല്യങ്ങളുടെ ഹൈഫനാൽ വേർതിരിച്ച ഒരു E ഘടകമുണ്ട്. | 2 |
E:first-child |
ഒരു ഇ ഘടകം, അതിന്റെ പാരന്റിന്റെ ഫസ്റ്റ് ചൈൽഡ് | 2 |
E:lang(fr) |
"fr" ഭാഷയിലെ ടൈപ്പ് E യുടെ ഒരു ഘടകം (ഭാഷ എങ്ങനെ നിർണ്ണയിക്കണമെന്ന് പ്രമാണ ഭാഷ വ്യക്തമാക്കുന്നു) | 2 |
E::before |
ഒരു ഇ ഘടകത്തിന്റെ ഉള്ളടക്കത്തിന് മുമ്പായി സൃഷ്ടിച്ച ഉള്ളടക്കം | 2 |
E::after |
ഒരു ഇ ഘടകത്തിന്റെ ഉള്ളടക്കത്തിന് ശേഷം ജനറേറ്റുചെയ്ത ഉള്ളടക്കം | 2 |
E > F |
ഒരു ഇ എലമെന്റിന്റെ എഫ് ഘടകം | 2 |
E + F |
ഒരു എഫ് എലമെന്റിന് തൊട്ടുമുമ്പുള്ള ഒരു ഇ എലമെന്റ് | 2 |
E[foo^="bar"] |
"ഫൂ" ആട്രിബ്യൂട്ട് മൂല്യം "ബാർ" എന്ന സ്ട്രിംഗിൽ നിന്ന് ആരംഭിക്കുന്ന ഒരു ഇ ഘടകം | 3 |
E[foo$="bar"] |
"ഫൂ" ആട്രിബ്യൂട്ട് മൂല്യം "ബാർ" എന്ന സ്ട്രിംഗിൽ അവസാനിക്കുന്ന ഒരു ഇ ഘടകം | 3 |
E[foo*="bar"] |
"ഫൂ" ആട്രിബ്യൂട്ട് മൂല്യത്തിൽ "ബാർ" എന്ന സബ്‌സ്ട്രിംഗ് അടങ്ങിയിരിക്കുന്ന ഒരു ഇ ഘടകം | 3 |
E:root |
ഒരു ഇ ഘടകം, പ്രമാണത്തിന്റെ റൂട്ടാണ് | 3 |
E:nth-child(n) |
ഒരു ഇ ഘടകം, അതിന്റെ പാരന്റിന്റെ n-th ചൈൽഡാണ് | 3 |
E:nth-last-child(n) |
ഒരു ഇ ഘടകം, അതിന്റെ പാരന്റിന്റെ n-th ചൈൽഡ്, അവസാനത്തേതിൽ നിന്ന് കണക്കാക്കുന്നു | 3 |
E:nth-of-type(n) |
ഒരു ഇ ഘടകം, അതിന്റെ ടൈപ്പിന്റെ n-th സിബിളിംഗാണ് | 3 |
E:nth-last-of-type(n) |
ഒരു ഇ ഘടകം, അതിന്റെ ടൈപ്പിന്റെ n-th സിബിളിംഗ്, അവസാനത്തേതിൽ നിന്ന് കണക്കാക്കുന്നു | 3 |
E:last-child |
ഒരു ഇ ഘടകം, അതിന്റെ പാരന്റിന്റെ അവസാനത്തെ ചൈൽഡാണ് | 3 |
E:first-of-type |
ഒരു ഇ ഘടകം, അതിന്റെ ടൈപ്പനുസരിച്ചുള്ള ആദ്യ സിബിളിംഗാണ് | 3 |
E:last-of-type |
ഒരു ഇ ഘടകം, അതിന്റെ അവസാനത്തെ സിബിളിംഗ് | 3 |
E:only-child |
ഒരു ഇ ഘടകം, അതിന്റെ പാരന്റിന്റെ ഏക ചൈൽഡ് | 3 |
E:only-of-type |
ഒരു ഇ ഘടകം, അതിന്റെ ടൈപ്പിലുള്ള സിബിളിംഗുകൾ മാത്രം | 3 |
E:empty |
ചിൽഡ്രൻസില്ലാത്ത ഒരു ഇ ഘടകം (ടെക്സ്റ്റ് നോഡുകൾ ഉൾപ്പെടെ) | 3 |
E:target |
റഫറിംഗ് യു‌ആർ‌ഐ ലക്ഷ്യമിടുന്ന ഒരു ഇ ഘടകം | 3 |
E:enabled |
എലമെന്റ് ഇയുടെ പ്രവർത്തനക്ഷമമാക്കിയ ഒരു ഉപയോക്തൃ ഇന്റർഫേസ് | 3 |
E:disabled |
എലമെന്റ് ഇയുടെ പ്രവർത്തനരഹിതമാക്കിയ ഒരു ഉപയോക്തൃ ഇന്റർഫേസ് | 3 |
E:checked |
എലമെന്റ് ഇയുടെ പരിശോധന നടത്തിയ ഉപയോക്തൃ ഇന്റർഫേസ് (ഉദാഹരണത്തിന് ഒരു റേഡിയോ-ബട്ടൺ അല്ലെങ്കിൽ ചെക്ക്ബോക്സ്) | 3 |
E:not(s) |
ലളിതമായ സെലക്ടർ എസുമായി(selector s) പൊരുത്തപ്പെടാത്ത ഒരു ഇ ഘടകം | 3 |
E ~ F |
ഒരു എഫ് എലമെന്റിന് മുമ്പുള്ള ഒരു ഇ എലമെന്റ് | 3 |
എച്.ടി.എം.എൽ താളുകളിൽ സ്റ്റൈൽ ഷീറ്റുകൾ നൽകാനുള്ള മാർഗങ്ങൾ
തിരുത്തുകവിവിധ സ്രോതസ്സുകളിൽ നിന്നും സ്റ്റൈൽ ഷീറ്റുകൾ എച്.ടി.എം.എൽ താളുകൾ സ്വീകരിക്കും. സി.എസ്.എസ് നിർദ്ദേശങ്ങൾ എച്.ടി.എം.എൽ താളിനുള്ളിൽ തന്നെ എഴുതി കൊടുക്കാം, അല്ലെങ്കിൽ സി.എസ്.എസ് സ്റ്റൈൽ നിയമങ്ങൾക്കായി ഒരു പ്രത്യേക ഫയൽ തന്നെ സൃഷ്ടിക്കാം, ഇത്തരം ഫയലുകൾക്ക് " .CSS " എക്സ്‌റ്റെൻഷനായിരിക്കും ഉണ്ടാവുക. ഈ ഫയലിനെ ആവശ്യമുള്ള എച്.ടി.എം.എൽ താളുകളുമായി ബന്ധപ്പെടുത്താം. ഒരേ എച്.ടി.എം.എൽ താളിൽ തന്നെ വിവിധ സ്രോതസ്സുകളിൽ നിന്നുള്ള സ്റ്റൈൽ റൂളുകൾ ഉപയോഗിക്കുവാൻ സാധിക്കും. ഒന്നിൽ കൂടുതൽ സ്റ്റൈൽ ഷീറ്റുകൾ ഒരു പ്രമാണത്തിൽ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ സ്വതേ ഉള്ള ഒരു മുൻഗണനാക്രമത്തിന്റെ അടിസ്ഥാനത്തിലാണ് സ്റ്റൈൽ ഷീറ്റുകൾ പ്രയോഗിക്കപ്പെടുന്നത്, അതേ ക്രമത്തിൽ തന്നെ താഴെ കൊടുത്തിരിക്കുന്നു,
- ഓതർ സ്റ്റൈലുകൾ (author style)
- യൂസർ സ്റ്റൈലുകൾ (user style)
- യൂസർ ഏജന്റ് സ്റ്റൈലുകൾ (user agent style)
ഓതർ സ്റ്റൈലുകൾ ഏതെങ്കിലുമുണ്ടെങ്കിൽ അതാവും പ്രസ്തുത താളിൽ പ്രയോഗിക്കപ്പെടുക, ഇല്ലെങ്കിൽ യൂസർ സ്റ്റൈലുകൾ എന്തെങ്കിലുമുണ്ടെങ്കിൽ അത്, അതുമില്ലെങ്കിൽ യൂസർ ഏജന്റ് സ്റ്റൈലുകൾ എന്ന ക്രമത്തിൽ സ്റ്റൈൽ നിയമങ്ങൾ പ്രയോഗിക്കപ്പെടും.
ഓതർ സ്റ്റൈലുകൾ
തിരുത്തുകഎച്.ടി.എം.എൽ താൾ രൂപകൽപന ചെയ്യുന്ന ആൾ പറഞ്ഞുകൊടുക്കുന്ന സ്റ്റൈൽ നിയമങ്ങളാണ് ഓതർ സ്റ്റൈലുകൾ. ഇത് മൂന്ന് വിധത്തിൽ എഴുതിക്കൊടുക്കുവാൻ സാധിക്കും. ഈ മൂന്നു വിധത്തിൽ എഴുതിക്കൊടുക്കുന്ന സ്റ്റൈൽ നിയമങ്ങളും മുൻഗണനാക്രമത്തിലാണ് പ്രയോഗിക്കപ്പെടുന്നത്, പ്രയോഗിക്കപ്പെടുന്ന അതേ ക്രമത്തിൽ തന്നെയാണ് താഴെ കൊടുത്തിരിക്കുന്നത്
- ഇൻലൈൻ സ്റ്റൈലുകൾ (inline styles) ,എച്.ടി.എം.എൽ ഘടകങ്ങളുടെ ടാഗുകൾക്കുള്ളിൽ തന്നെ സ്റ്റൈൽ നിയമങ്ങൾ എഴുതിക്കൊടുക്കുന്ന രീതിയാണിത്
- ഇന്റേർണൽ സ്റ്റൈലുകൾ അഥവാ എംബഡഡ് സ്റ്റൈലുകൾ (internal or embedded styles), എച്.ടി.എം.എൽ താളിന്റെ ഹെഡ് ടാഗിന്റെ (<head> - - - </head>) ഉള്ളിൽ സ്റ്റൈൽ നിയമങ്ങൾ എഴുതുന്ന രീതി
- എക്സ്റ്റേർണൽ സ്റ്റൈൽ ഷീറ്റുകൾ (external style sheets), അതായത് സി.എസ്.എസിനു വേണ്ടി ഒരു പ്രത്യേക ഫയൽ തന്നെ
ഇൻലൈൻ സ്റ്റൈലുകൾ ഉണ്ടെങ്കിൽ അത്, ഇല്ലെങ്കിൽ ഇന്റേർണൽ സ്റ്റൈലുകൾ, അതുമില്ലെങ്കിൽ എക്സ്റ്റേർണൽ സ്റ്റൈലുകൾ എന്നീ ക്രമത്തിലാണ് താളുകളിൽ ഓതർ സ്റ്റൈലുകൾ പ്രയോഗിക്കപ്പെടുക
യൂസർ സ്റ്റൈലുകൾ
തിരുത്തുകഉപയോക്താവിന്റെ നിർദ്ദേശപ്രകാരമുള്ള ഒരു സി.എസ്.എസ് ഫയൽ ഉപയോഗിച്ച് പ്രദർശന ക്രമീകരണങ്ങൾ നടത്തുക. യൂസർ ഏജന്റിൽ (സാധാരണ ഗതിയിൽ ഇതൊരു വെബ് ബ്രൗസർ ആയിരിക്കും) ഇങ്ങനെ ഒരു സി.എസ്.എസ് തിരഞ്ഞെടുക്കുവാനുള്ള സൗകര്യം ഉണ്ടെങ്കിൽ മാത്രമേ ഇത് സാധ്യമാകൂ. സ്വതേ യൂസർ സ്റ്റൈലുകൾ ഓതർ സ്റ്റൈലുകൾ ഇല്ലെങ്കിൽ മാത്രമേ പ്രയോഗിക്കപ്പെടുകയുള്ളു, പക്ഷെ ഈ നിയമത്തെ മറികടന്ന്, ഓതർ സ്റ്റൈലുകൾക്ക് പകരം യൂസർ സ്റ്റൈലുകൾ ഉപയോഗിച്ച് എച്.ടി.എം.എൽ താളുകൾ പ്രദർശിപ്പിക്കുവാനുള്ള സൗകര്യം പുതിയ ബ്രൗസറുകളിൽ ഉണ്ട്. [5]
യൂസർ ഏജന്റ് സ്റ്റൈലുകൾ
തിരുത്തുകമറ്റ് സ്റ്റൈൽ ഷീറ്റുകളൊന്നും പ്രയോഗത്തിലില്ലെങ്കിൽ യൂസർ ഏജന്റിന്റെ അതായത് വെബ് ബ്രൗസറിൽ സ്വതേ ഉള്ള സ്റ്റൈൽ നിയമങ്ങൾ ഉപയോഗിച്ച് എച്.ടി.എം.എൽ താൾ. പ്രദർശിപ്പിക്കും
പുറമെ നിന്നുള്ള കണ്ണികൾ
തിരുത്തുകഅവലംബം
തിരുത്തുക- ↑ 1.0 1.1 "സി.എസ്.എസ് ക്ലാസ്, ഐഡി സെലക്‌ടറുകൾ" (in ഇംഗ്ലീഷ്). ഡബ്ല്യു3സ്കൂൾസ്.കോമിൽ നിന്നും. Archived from the original on 2009-11-20. Retrieved 24-11-2009.
{{cite web}}: Check date values in:|accessdate=(help)CS1 maint: unrecognized language (link) - ↑ "W3C CSS2.1 specification for pseudo-elements and pseudo-classes". World Wide Web Consortium. 7 June 2011. Archived from the original on 30 April 2012. Retrieved 30 April 2012.
- ↑ see the complete definition of selectors at the W3C Web site Archived 2006-04-23 at the Wayback Machine..
- ↑ "Selectors Level 3". W3.org. Archived from the original on 2014-06-03. Retrieved 2014-05-30.
- ↑ "Using CSS as a Diagnostic Tool" (in ഇംഗ്ലീഷ്). സി.എസ്.എസ് ഡിസ്‌കസ് വിക്കി. Archived from the original on 2009-12-21. Retrieved 30-11-2009.
{{cite web}}: Check date values in:|accessdate=(help)CS1 maint: unrecognized language (link)
|
വിവരസാങ്കേതികവിദ്യയുമായി ബന്ധപ്പെട്ട ഈ ലേഖനം അപൂർണ്ണമാണ്‌. ഇതു പൂർത്തിയാക്കാൻ സഹായിക്കുക. |