കാസ്കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ്സ്
പ്രമാണം:CSS.svg | |
എക്സ്റ്റൻഷൻ | .css |
---|---|
ഇന്റർനെറ്റ് മീഡിയ തരം | text/css |
വികസിപ്പിച്ചത് | വേൾഡ് വൈഡ് വെബ് കൺസോർഷ്യം |
ഫോർമാറ്റ് തരം | സ്റ്റൈൽഷീറ്റ് ഭാഷ |
മാനദണ്ഡങ്ങൾ | Level 1 (Recommendation) Level 2 (Recommendation) Level 2 Revision 1 (Candidate Recommendation) |
മാർക്കപ്പ് ഭാഷകൾ ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്ന പ്രമാണങ്ങൾ എങ്ങനെ പ്രദർശിപ്പിക്കണമെന്ന് പറഞ്ഞുകൊടുക്കാൻ ഉപയോഗിക്കുന്ന ഒരു സ്റ്റൈൽഷീറ്റ് ഭാഷയാണ് കാസ്കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ് (Cascading Style Sheets) അഥവാ സി.എസ്.എസ് (CSS). സാധാരണ ഗതിയിൽ എച്.റ്റി.എം.എൽ. പിന്നെ എക്സ്.എച്.റ്റി.എം.എൽ. എന്നീ മാർക്കപ്പ് ഭാഷകൾ ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്ന പ്രമാണങ്ങളുടെ പ്രദർശനം നിയന്ത്രിക്കുവാനും ദൃശ്യഭംഗി വർദ്ധിപ്പിക്കുവാനും മറ്റും സി.എസ്.എസ് ഉപയോഗിക്കുന്നു, പക്ഷെ ഈ സ്റ്റൈൽഷീറ്റ് ഭാഷ ഏത് തരത്തിലുമുള്ള എക്സ്.എം.എൽ പ്രമാണങ്ങളിലും, എസ്.വി.ജി. പിന്നെ എക്സ്.യു.എൽ. ഉൾപ്പെടെ, ഉപയോഗിക്കുവാൻ സാധിക്കുന്നു.
ഒരു ഉദാഹരണത്തിന് , ഒരു എച്.റ്റി.എം.എൽ പ്രമാണത്തിന്റെ പശ്ചാത്തലത്തിന് പച്ചനിറവും അക്ഷരങ്ങൾക്കെല്ലാം വെള്ളനിറവും കൊടുക്കണമെന്നുണ്ടെങ്കിൽ അത് സി.എസ്.എസ് ഉപയോഗിച്ച് പറഞ്ഞുകൊടുക്കാൻ സാധിക്കും. മുൻകാലങ്ങളിൽ എച്.ടി.എം.എൽ താളുകളിൽ ഉള്ളടക്കവും, താൾ ബ്രൗസറിൽ എങ്ങനെ പ്രദർശിപ്പിക്കണമെന്നുള്ള നിർദ്ദേശങ്ങളും ഒരുമിച്ചാണ് കൊടുത്തിരുന്നത്. ഓരോ എച്.ടി.എം.എൽ ഘടകത്തിന്റേയും പ്രദർശനക്രമങ്ങൾ അതാത് ടാഗിനുള്ളിൽ വ്യക്തമാക്കേണ്ടി വന്നിരുന്നു, ഉദാഹരണത്തിന് അക്ഷരങ്ങളാണെങ്കിൽ എത് ഫോണ്ട് ഉപയോഗിക്കണം, ഫോണ്ടുകളുടെ നിറം, വലിപ്പം, താളിന്റെ കാര്യത്തിൽ പശ്ചാത്തലനിറം, പശ്ചാത്തല ചിത്രം, മറ്റ് എച്ച്.ടി.എം.എൽ ഘടകങ്ങളായ റ്റേബിൾ, സ്പാൻ എന്നിവയുടെ കാര്യത്തിൽ അരികുകൾ (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" എന്ന ഗുണമുള്ളത് ആ എച്.ടി.എം.എൽ ഘടകങ്ങളിൽ മേൽപ്പറഞ്ഞിരിക്കുന്ന സ്റ്റൈൽ റൂൾ പ്രയോഗിക്കപ്പെടും.
എച്.ടി.എം.എൽ താളുകളിൽ സ്റ്റൈൽ ഷീറ്റുകൾ നൽകാനുള്ള മാർഗങ്ങൾ
വിവിധ സ്രോതസ്സുകളിൽ നിന്നും സ്റ്റൈൽ ഷീറ്റുകൾ എച്.ടി.എം.എൽ താളുകൾ സ്വീകരിക്കും. സി.എസ്.എസ് നിർദ്ദേശങ്ങൾ എച്.ടി.എം.എൽ താളിനുള്ളിൽ തന്നെ എഴുതി കൊടുക്കാം, അല്ലെങ്കിൽ സി.എസ്.എസ് സ്റ്റൈൽ നിയമങ്ങൾക്കായി ഒരു പ്രത്യേക ഫയൽ തന്നെ സൃഷ്ടിക്കാം, ഇത്തരം ഫയലുകൾക്ക് " .CSS " എക്സ്റ്റെൻഷനായിരിക്കും ഉണ്ടാവുക. ഈ ഫയലിനെ ആവശ്യമുള്ള എച്.ടി.എം.എൽ താളുകളുമായി ബന്ധപ്പെടുത്താം. ഒരേ എച്.ടി.എം.എൽ താളിൽ തന്നെ വിവിധ സ്രോതസ്സുകളിൽ നിന്നുള്ള സ്റ്റൈൽ റൂളുകൾ ഉപയോഗിക്കുവാൻ സാധിക്കും. ഒന്നിൽ കൂടുതൽ സ്റ്റൈൽ ഷീറ്റുകൾ ഒരു പ്രമാണത്തിൽ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ സ്വതവേ ഉള്ള ഒരു മുൻഗണനാക്രമത്തിന്റെ അടിസ്ഥാനത്തിലാണ് സ്റ്റൈൽ ഷീറ്റുകൾ പ്രയോഗിക്കപ്പെടുന്നത്, അതേ ക്രമത്തിൽ തന്നെ താഴെ കൊടുത്തിരിക്കുന്നു,
- ഓതർ സ്റ്റൈലുകൾ (author style)
- യൂസർ സ്റ്റൈലുകൾ (user style)
- യൂസർ ഏജന്റ് സ്റ്റൈലുകൾ (user agent style)
ഓതർ സ്റ്റൈലുകൾ ഏതെങ്കിലുമുണ്ടെങ്കിൽ അതാവും പ്രസ്തുത താളിൽ പ്രയോഗിക്കപ്പെടുക, ഇല്ലെങ്കിൽ യൂസർ സ്റ്റൈലുകൾ എന്തെങ്കിലുമുണ്ടെങ്കിൽ അത്, അതുമില്ലെങ്കിൽ യൂസർ ഏജന്റ് സ്റ്റൈലുകൾ എന്ന ക്രമത്തിൽ സ്റ്റൈൽ നിയമങ്ങൾ പ്രയോഗിക്കപ്പെടും.
ഓതർ സ്റ്റൈലുകൾ
എച്.ടി.എം.എൽ താൾ രൂപകൽപന ചെയ്യുന്ന ആൾ പറഞ്ഞുകൊടുക്കുന്ന സ്റ്റൈൽ നിയമങ്ങളാണ് ഓതർ സ്റ്റൈലുകൾ. ഇത് മൂന്ന് വിധത്തിൽ എഴുതിക്കൊടുക്കുവാൻ സാധിക്കും. ഈ മൂന്നു വിധത്തിൽ എഴുതിക്കൊടുക്കുന്ന സ്റ്റൈൽ നിയമങ്ങളും മുൻഗണനാക്രമത്തിലാണ് പ്രയോഗിക്കപ്പെടുന്നത്, പ്രയോഗിക്കപ്പെടുന്ന അതേ ക്രമത്തിൽ തന്നെയാണ് താഴെ കൊടുത്തിരിക്കുന്നത്
- ഇൻലൈൻ സ്റ്റൈലുകൾ (inline styles) ,എച്.ടി.എം.എൽ ഘടകങ്ങളുടെ ടാഗുകൾക്കുള്ളിൽ തന്നെ സ്റ്റൈൽ നിയമങ്ങൾ എഴുതിക്കൊടുക്കുന്ന രീതിയാണിത്
- ഇന്റേർണൽ സ്റ്റൈലുകൾ അഥവാ എംബഡഡ് സ്റ്റൈലുകൾ (internal or embedded styles), എച്.ടി.എം.എൽ താളിന്റെ ഹെഡ് ടാഗിന്റെ (<head> - - - </head>) ഉള്ളിൽ സ്റ്റൈൽ നിയമങ്ങൾ എഴുതുന്ന രീതി
- എക്സ്റ്റേർണൽ സ്റ്റൈൽ ഷീറ്റുകൾ (external style sheets), അതായത് സി.എസ്.എസിനു വേണ്ടി ഒരു പ്രത്യേക ഫയൽ തന്നെ
ഇൻലൈൻ സ്റ്റൈലുകൾ ഉണ്ടെങ്കിൽ അത്, ഇല്ലെങ്കിൽ ഇന്റേർണൽ സ്റ്റൈലുകൾ, അതുമില്ലെങ്കിൽ എക്സ്റ്റേർണൽ സ്റ്റൈലുകൾ എന്നീ ക്രമത്തിലാണ് താളുകളിൽ ഓതർ സ്റ്റൈലുകൾ പ്രയോഗിക്കപ്പെടുക
യൂസർ സ്റ്റൈലുകൾ
ഉപയോക്താവിന്റെ നിർദ്ദേശപ്രകാരമുള്ള ഒരു സി.എസ്.എസ് ഫയൽ ഉപയോഗിച്ച് പ്രദർശന ക്രമീകരണങ്ങൾ നടത്തുക. യൂസർ ഏജന്റിൽ (സാധാരണ ഗതിയിൽ ഇതൊരു വെബ് ബ്രൗസർ ആയിരിക്കും) ഇങ്ങനെ ഒരു സി.എസ്.എസ് തിരഞ്ഞെടുക്കുവാനുള്ള സൗകര്യം ഉണ്ടെങ്കിൽ മാത്രമേ ഇത് സാധ്യമാകൂ. സ്വതവേ യൂസർ സ്റ്റൈലുകൾ ഓതർ സ്റ്റൈലുകൾ ഇല്ലെങ്കിൽ മാത്രമേ പ്രയോഗിക്കപ്പെടുകയുള്ളു, പക്ഷെ ഈ നിയമത്തെ മറികടന്ന്, ഓതർ സ്റ്റൈലുകൾക്ക് പകരം യൂസർ സ്റ്റൈലുകൾ ഉപയോഗിച്ച് എച്.ടി.എം.എൽ താളുകൾ പ്രദർശിപ്പിക്കുവാനുള്ള സൗകര്യം പുതിയ ബ്രൗസറുകളിൽ ഉണ്ട്. [2]
യൂസർ ഏജന്റ് സ്റ്റൈലുകൾ
മറ്റ് സ്റ്റൈൽ ഷീറ്റുകളൊന്നും പ്രയോഗത്തിലില്ലെങ്കിൽ യൂസർ ഏജന്റിന്റെ അതായത് വെബ് ബ്രൗസറിൽ സ്വതവേ ഉള്ള സ്റ്റൈൽ നിയമങ്ങൾ ഉപയോഗിച്ച് എച്.ടി.എം.എൽ താൾ. പ്രദർശിപ്പിക്കും
പുറമെ നിന്നുള്ള കണ്ണികൾ
അവലംബം
- ↑ 1.0 1.1
"സി.എസ്.എസ് ക്ലാസ്, ഐഡി സെലക്ടറുകൾ" (in ഇംഗ്ലീഷ്). ഡബ്ല്യു3സ്കൂൾസ്.കോമിൽ നിന്നും. Retrieved 24-11-2009.
{{cite web}}
: Check date values in:|accessdate=
(help)CS1 maint: unrecognized language (link) - ↑
"Using CSS as a Diagnostic Tool" (in ഇംഗ്ലീഷ്). സി.എസ്.എസ് ഡിസ്കസ് വിക്കി. Retrieved 30-11-2009.
{{cite web}}
: Check date values in:|accessdate=
(help)CS1 maint: unrecognized language (link)