"കാസ്‌കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ്‌സ്" എന്ന താളിന്റെ പതിപ്പുകൾ തമ്മിലുള്ള വ്യത്യാസം
(ചെ.) തലക്കെട്ടു മാറ്റം: കാസ്‌കേഡിങ്ങ് സ്റ്റൈല്‍ ഷീറ്റ്‌സ് >>> കാസ്‌കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ്‌സ്: പ |
(ചെ.) യന്ത്രം പുതുക്കുന്നു: lv:Cascading Style Sheets; cosmetic changes |
||
| വരി 16: | വരി 16: | ||
സി.എസ്.എസ് മാനദണ്ഡങ്ങള്‍ [[വേള്‍ഡ് വൈഡ് വെബ് കണ്‍സോര്‍ഷ്യം|വേള്‍ഡ് വൈഡ് വെബ് കണ്‍സോര്‍ഷ്യത്തിന്റെ]] മേല്‍നോട്ടത്തിലാണ് നിശ്ചയിക്കപ്പെടുന്നത്. 1998 മാര്‍ച്ചില്‍ പ്രസിദ്ധീകരിച്ച ആര്‍.എഫ്.സി 2318 <small>(RFC 2318)</small> പ്രകാരം [[ഇന്റര്‍നെറ്റ് മീഡിയാ തരം]] അഥവാ മൈം തരമായ text/css സി.എസ്.എസ് പ്രമാണങ്ങളില്‍ ഉപയോഗിക്കുവാന്‍ വേണ്ടി മാത്രമായി നീക്കിവച്ചിരിക്കുന്നു. |
സി.എസ്.എസ് മാനദണ്ഡങ്ങള്‍ [[വേള്‍ഡ് വൈഡ് വെബ് കണ്‍സോര്‍ഷ്യം|വേള്‍ഡ് വൈഡ് വെബ് കണ്‍സോര്‍ഷ്യത്തിന്റെ]] മേല്‍നോട്ടത്തിലാണ് നിശ്ചയിക്കപ്പെടുന്നത്. 1998 മാര്‍ച്ചില്‍ പ്രസിദ്ധീകരിച്ച ആര്‍.എഫ്.സി 2318 <small>(RFC 2318)</small> പ്രകാരം [[ഇന്റര്‍നെറ്റ് മീഡിയാ തരം]] അഥവാ മൈം തരമായ text/css സി.എസ്.എസ് പ്രമാണങ്ങളില്‍ ഉപയോഗിക്കുവാന്‍ വേണ്ടി മാത്രമായി നീക്കിവച്ചിരിക്കുന്നു. |
||
==എഴുത്തു രീതി== |
== എഴുത്തു രീതി == |
||
വളരെ ലളിതമായ നിയമങ്ങളാണ് സി.എസ്.എസിനുള്ളത്. പ്രദര്‍ശനക്രമീകരണ നിര്‍ദ്ദേശങ്ങള്‍ക്ക് സ്റ്റൈല്‍ റൂളുകള്‍ <small> (style rules)</small> എന്നാണ് പറയുക. സ്റ്റൈല്‍ ഷീറ്റുകളില്‍ സ്റ്റൈല്‍ റൂളുകളുടെ ഒരു കൂട്ടമാണുണ്ടാവുക. ഒരു സി.എസ്.എസ് സ്റ്റൈല്‍ റൂളിന് രണ്ടു പ്രധാന ഭാഗങ്ങളാണുള്ളത് |
വളരെ ലളിതമായ നിയമങ്ങളാണ് സി.എസ്.എസിനുള്ളത്. പ്രദര്‍ശനക്രമീകരണ നിര്‍ദ്ദേശങ്ങള്‍ക്ക് സ്റ്റൈല്‍ റൂളുകള്‍ <small> (style rules)</small> എന്നാണ് പറയുക. സ്റ്റൈല്‍ ഷീറ്റുകളില്‍ സ്റ്റൈല്‍ റൂളുകളുടെ ഒരു കൂട്ടമാണുണ്ടാവുക. ഒരു സി.എസ്.എസ് സ്റ്റൈല്‍ റൂളിന് രണ്ടു പ്രധാന ഭാഗങ്ങളാണുള്ളത് |
||
*ഒരു സെലക്‌ടര്‍ |
* ഒരു സെലക്‌ടര്‍ |
||
*ഒന്നോ അധികലധികമോ ഡിക്ലറേഷനുകള്‍ |
* ഒന്നോ അധികലധികമോ ഡിക്ലറേഷനുകള്‍ |
||
[[ |
[[പ്രമാണം:Cssrule.png|100%]] |
||
പ്രദര്‍ശനക്രമം ബാധകമാകേണ്ട എച്.ടി.എം.എല്‍ ഘടകങ്ങളെ തിരഞ്ഞെടുക്കാനാണ് സെലക്‌ടര്‍. ഡിക്ലറേഷനുകള്‍ വഴിയാണ് സെലക്‌ടറിന്റെ ഗുണഗണങ്ങള്‍ പറയുന്നത്. ഒരു ഡിക്ലറേഷനില്‍ ഒരു ഗുണവും <small>(property)</small> അതിന്റെ മൂല്യവുമുണ്ടാകും <small>(value)</small>. ഒരു സ്റ്റൈല്‍ റൂളില്‍ ഒന്നില്‍ കൂടുതല്‍ ഡിക്ലറേഷനുകള്‍ കാണും, ഇവ <big>{}</big> ആവരണചിഹ്നത്തിനുള്ളിലായി തമ്മില്‍ അര്‍ദ്ധവിരാമം ഉപയോഗിച്ച് വേര്‍തിരിച്ചാണെഴുതുക. മുകളില്‍ കൊടുത്തിരിക്കുന്ന ഉദാഹരണചിത്രത്തില്‍ , എച്.ടി.എം.എല്‍ താളുകളില്‍ ഖണ്ഡികകളെ നിര്‍വചിക്കുവാന്‍ ഉപയോഗിക്കുന്ന < '''<big>p</big>''' > ടാഗിനു വേണ്ടിയുള്ള സി.എസ്.എസ് സ്റ്റൈല്‍ റൂളാണ് കാണുന്നത്. അക്ഷരങ്ങളുടെ ഫോണ്ട് ഏരിയല്‍ ആയിരിക്കണം, വലിപ്പം 25 പിക്സ്‌ല്‍ വേണം, നിറം പച്ച എന്നിങ്ങനെയുള്ള നിര്‍ദ്ദേശങ്ങളാണ് ഇതിലുള്ളത്. താളിലുള്ള എല്ലാ ഖണ്ഡികള്‍ക്കും മേല്‍പ്പറഞ്ഞ സ്റ്റൈല്‍റൂള്‍ ബാധകമാണ്, അതായത് എല്ലാ < <big>p</big> > ടാഗുകള്‍ക്കകത്തും ഇത് പ്രയോഗിക്കപ്പെടും. |
പ്രദര്‍ശനക്രമം ബാധകമാകേണ്ട എച്.ടി.എം.എല്‍ ഘടകങ്ങളെ തിരഞ്ഞെടുക്കാനാണ് സെലക്‌ടര്‍. ഡിക്ലറേഷനുകള്‍ വഴിയാണ് സെലക്‌ടറിന്റെ ഗുണഗണങ്ങള്‍ പറയുന്നത്. ഒരു ഡിക്ലറേഷനില്‍ ഒരു ഗുണവും <small>(property)</small> അതിന്റെ മൂല്യവുമുണ്ടാകും <small>(value)</small>. ഒരു സ്റ്റൈല്‍ റൂളില്‍ ഒന്നില്‍ കൂടുതല്‍ ഡിക്ലറേഷനുകള്‍ കാണും, ഇവ <big>{}</big> ആവരണചിഹ്നത്തിനുള്ളിലായി തമ്മില്‍ അര്‍ദ്ധവിരാമം ഉപയോഗിച്ച് വേര്‍തിരിച്ചാണെഴുതുക. മുകളില്‍ കൊടുത്തിരിക്കുന്ന ഉദാഹരണചിത്രത്തില്‍ , എച്.ടി.എം.എല്‍ താളുകളില്‍ ഖണ്ഡികകളെ നിര്‍വചിക്കുവാന്‍ ഉപയോഗിക്കുന്ന < '''<big>p</big>''' > ടാഗിനു വേണ്ടിയുള്ള സി.എസ്.എസ് സ്റ്റൈല്‍ റൂളാണ് കാണുന്നത്. അക്ഷരങ്ങളുടെ ഫോണ്ട് ഏരിയല്‍ ആയിരിക്കണം, വലിപ്പം 25 പിക്സ്‌ല്‍ വേണം, നിറം പച്ച എന്നിങ്ങനെയുള്ള നിര്‍ദ്ദേശങ്ങളാണ് ഇതിലുള്ളത്. താളിലുള്ള എല്ലാ ഖണ്ഡികള്‍ക്കും മേല്‍പ്പറഞ്ഞ സ്റ്റൈല്‍റൂള്‍ ബാധകമാണ്, അതായത് എല്ലാ < <big>p</big> > ടാഗുകള്‍ക്കകത്തും ഇത് പ്രയോഗിക്കപ്പെടും. |
||
| വരി 27: | വരി 27: | ||
സെലക്‌ടറുകള്‍ പലവിധമുണ്ട്, മുകളിലത്തെ ചിത്രത്തില്‍ കാണുന്നതുപോലെ ടാഗിന്റെ പേര് പറഞ്ഞു കൊടുത്ത് പ്രദര്‍ശനക്രമം ബാധകമാകേണ്ട എച്.ടി.എം.എല്‍ ഘടകങ്ങളെ തിരഞ്ഞെടുക്കുന്നത് പലമാര്‍ഗങ്ങളില്‍ ഒന്നാണ്, ഇതിനെ ടൈപ്പ് സെലക്‌ടര്‍ എന്നാണ് പറയുക. ഇത് കൂടാതെ ഡിസെന്‍ഡന്റ് സെലക്‌ടര്‍ <small>(Descendant selectors)</small> ചൈല്‍ഡ് സെലക്‌ടര്‍<small> (Child selectors)</small>, ആട്രിബ്യൂട്ട് സെലക്‌ടര്‍ <small>(Attribute selectors)</small>, ക്ലാസ് സെലക്‌ടര്‍ <small>(Class selectors)</small>, ഐഡി സെലക്‌ടര്‍ <small>(ID selectors)</small> തുടങ്ങിയവയുണ്ട്. ഇതില്‍ കൂടുതല്‍ ഉപയോഗത്തില്‍ കാണുന്ന രണ്ടെണ്ണമാണ് ഐഡി സെലക്‌ടറും, ക്ലാസ് സെലക്‌ടറും. |
സെലക്‌ടറുകള്‍ പലവിധമുണ്ട്, മുകളിലത്തെ ചിത്രത്തില്‍ കാണുന്നതുപോലെ ടാഗിന്റെ പേര് പറഞ്ഞു കൊടുത്ത് പ്രദര്‍ശനക്രമം ബാധകമാകേണ്ട എച്.ടി.എം.എല്‍ ഘടകങ്ങളെ തിരഞ്ഞെടുക്കുന്നത് പലമാര്‍ഗങ്ങളില്‍ ഒന്നാണ്, ഇതിനെ ടൈപ്പ് സെലക്‌ടര്‍ എന്നാണ് പറയുക. ഇത് കൂടാതെ ഡിസെന്‍ഡന്റ് സെലക്‌ടര്‍ <small>(Descendant selectors)</small> ചൈല്‍ഡ് സെലക്‌ടര്‍<small> (Child selectors)</small>, ആട്രിബ്യൂട്ട് സെലക്‌ടര്‍ <small>(Attribute selectors)</small>, ക്ലാസ് സെലക്‌ടര്‍ <small>(Class selectors)</small>, ഐഡി സെലക്‌ടര്‍ <small>(ID selectors)</small> തുടങ്ങിയവയുണ്ട്. ഇതില്‍ കൂടുതല്‍ ഉപയോഗത്തില്‍ കാണുന്ന രണ്ടെണ്ണമാണ് ഐഡി സെലക്‌ടറും, ക്ലാസ് സെലക്‌ടറും. |
||
===ഐഡി സെലക്‌ടര്‍=== |
=== ഐഡി സെലക്‌ടര്‍ === |
||
ഒരു പ്രത്യേക എച്.ടി.എം.എല്‍ ഘടകത്തിന് മാത്രമായി പ്രദര്‍ശനക്രമം പറഞ്ഞുകൊടുക്കുവാനാണ് ഐഡി സെലക്‌ടര്‍ ഉപയോഗിക്കുന്നത്. ഏത് എച്.ടി.എം.എല്‍ ഘടകത്തിലാണ് പ്രയോഗിക്കേണ്ടതെന്ന് അതിന്റെ ഐഡി <small>(id)</small> എന്ന ഗുണത്തില്‍ നിന്നാണ് മനസ്സിലാക്കുന്നത്. ഐഡി സെലക്‌ടറുകള്‍ ഉപയോഗിച്ച് സ്റ്റൈല്‍ റൂളുകള്‍ എഴുതുമ്പോള്‍ ' '''#''' 'ചിഹ്നം, അതിനുശേഷം ഐഡിയുടെ പേര്, പിന്നെ <big>{}</big> ആവരണചിഹ്നത്തിനുള്ളിലായി ഡിക്ലറേഷനുകള്‍ എന്ന നിയമം പാലിക്കണം. |
ഒരു പ്രത്യേക എച്.ടി.എം.എല്‍ ഘടകത്തിന് മാത്രമായി പ്രദര്‍ശനക്രമം പറഞ്ഞുകൊടുക്കുവാനാണ് ഐഡി സെലക്‌ടര്‍ ഉപയോഗിക്കുന്നത്. ഏത് എച്.ടി.എം.എല്‍ ഘടകത്തിലാണ് പ്രയോഗിക്കേണ്ടതെന്ന് അതിന്റെ ഐഡി <small>(id)</small> എന്ന ഗുണത്തില്‍ നിന്നാണ് മനസ്സിലാക്കുന്നത്. ഐഡി സെലക്‌ടറുകള്‍ ഉപയോഗിച്ച് സ്റ്റൈല്‍ റൂളുകള്‍ എഴുതുമ്പോള്‍ ' '''#''' 'ചിഹ്നം, അതിനുശേഷം ഐഡിയുടെ പേര്, പിന്നെ <big>{}</big> ആവരണചിഹ്നത്തിനുള്ളിലായി ഡിക്ലറേഷനുകള്‍ എന്ന നിയമം പാലിക്കണം. |
||
<ref name="class_id_selectors"> |
<ref name="class_id_selectors"> |
||
| വരി 49: | വരി 49: | ||
ഏത് എച്.ടി.എം.എല്‍ ഘടകത്തിനാണോ id="blueHead" എന്ന ഗുണമുള്ളത് ആ എച്.ടി.എം.എല്‍ ഘടകത്തിനുള്ളില്‍ മേല്‍പ്പറഞ്ഞിരിക്കുന്ന സ്റ്റൈല്‍ റൂള്‍ പ്രയോഗിക്കപ്പെടും. ഐഡി ഗുണത്തിന്റെ പ്രത്യേകതയെന്തെന്നു വച്ചാല്‍ അത് അദ്വയമാണ്, ഒരു എച്.ടി.എം.എല്‍ പ്രമാണത്തില്‍ ഒരു ഘടകത്തിന്റെ ഐഡി മറ്റൊന്നിനു കൊടുക്കാന്‍ സാധ്യമല്ല. |
ഏത് എച്.ടി.എം.എല്‍ ഘടകത്തിനാണോ id="blueHead" എന്ന ഗുണമുള്ളത് ആ എച്.ടി.എം.എല്‍ ഘടകത്തിനുള്ളില്‍ മേല്‍പ്പറഞ്ഞിരിക്കുന്ന സ്റ്റൈല്‍ റൂള്‍ പ്രയോഗിക്കപ്പെടും. ഐഡി ഗുണത്തിന്റെ പ്രത്യേകതയെന്തെന്നു വച്ചാല്‍ അത് അദ്വയമാണ്, ഒരു എച്.ടി.എം.എല്‍ പ്രമാണത്തില്‍ ഒരു ഘടകത്തിന്റെ ഐഡി മറ്റൊന്നിനു കൊടുക്കാന്‍ സാധ്യമല്ല. |
||
===ക്ലാസ് സെലക്‌ടര്‍=== |
=== ക്ലാസ് സെലക്‌ടര്‍ === |
||
ഒന്നില്‍ കൂടുതല്‍ എച്.ടി.എം.എല്‍ ഘടകങ്ങളില്‍ ആവശ്യമനുസരിച്ച് പ്രദര്‍ശനക്രമങ്ങള്‍ പ്രയോഗിക്കുവാനുള്ള സൗകര്യം ക്ലാസ് സെലക്‌ടറുകള്‍ വഴി ലഭിക്കുന്നു. ഏതൊക്കെ എച്.ടി.എം.എല്‍ ഘടകങ്ങളിലാണ് പ്രയോഗിക്കേണ്ടതെന്ന് ആ ഘടകങ്ങളുടെ ക്ലാസ് <small>(class)</small> എന്ന ഗുണത്തില്‍ നിന്നാണ് മനസ്സിലാക്കേണ്ടത്. ക്ലാസ് സെലക്‌ടറുകള്‍ ഉപയോഗിച്ച് സ്റ്റൈല്‍ റൂളുകള്‍ എഴുതുമ്പോള്‍ ' '''.''' ' ചിഹ്നം, അതിനുശേഷം ക്ലാസിന്റെ പേര്, പിന്നെ <big>{}</big> ആവരണചിഹ്നത്തിനുള്ളിലായി ഡിക്ലറേഷനുകള്‍ എന്ന നിയമം പാലിക്കണം. ഒന്നില്‍ കൂടുതല്‍ ഘടകങ്ങള്‍ക്ക് ഒരേ ക്ലാസ് ഗുണം കൊടുക്കാം. ഒരേ ക്ലാസ് പേരുള്ള എല്ലാ എച്.ടി.എം.എല്‍ ഘടകങ്ങള്‍ക്കും ആ ക്ലാസ് സെലക്‌ടര്‍ ഉപയോഗിച്ചു എഴുതിക്കൊടുത്തിട്ടുള്ള സ്റ്റൈല്‍ റൂളുകള്‍ ബാധകമാവും. |
ഒന്നില്‍ കൂടുതല്‍ എച്.ടി.എം.എല്‍ ഘടകങ്ങളില്‍ ആവശ്യമനുസരിച്ച് പ്രദര്‍ശനക്രമങ്ങള്‍ പ്രയോഗിക്കുവാനുള്ള സൗകര്യം ക്ലാസ് സെലക്‌ടറുകള്‍ വഴി ലഭിക്കുന്നു. ഏതൊക്കെ എച്.ടി.എം.എല്‍ ഘടകങ്ങളിലാണ് പ്രയോഗിക്കേണ്ടതെന്ന് ആ ഘടകങ്ങളുടെ ക്ലാസ് <small>(class)</small> എന്ന ഗുണത്തില്‍ നിന്നാണ് മനസ്സിലാക്കേണ്ടത്. ക്ലാസ് സെലക്‌ടറുകള്‍ ഉപയോഗിച്ച് സ്റ്റൈല്‍ റൂളുകള്‍ എഴുതുമ്പോള്‍ ' '''.''' ' ചിഹ്നം, അതിനുശേഷം ക്ലാസിന്റെ പേര്, പിന്നെ <big>{}</big> ആവരണചിഹ്നത്തിനുള്ളിലായി ഡിക്ലറേഷനുകള്‍ എന്ന നിയമം പാലിക്കണം. ഒന്നില്‍ കൂടുതല്‍ ഘടകങ്ങള്‍ക്ക് ഒരേ ക്ലാസ് ഗുണം കൊടുക്കാം. ഒരേ ക്ലാസ് പേരുള്ള എല്ലാ എച്.ടി.എം.എല്‍ ഘടകങ്ങള്‍ക്കും ആ ക്ലാസ് സെലക്‌ടര്‍ ഉപയോഗിച്ചു എഴുതിക്കൊടുത്തിട്ടുള്ള സ്റ്റൈല്‍ റൂളുകള്‍ ബാധകമാവും. |
||
<ref name="class_id_selectors"> |
<ref name="class_id_selectors"> |
||
| വരി 71: | വരി 71: | ||
ഏതൊക്കെ എച്.ടി.എം.എല്‍ ഘടകങ്ങള്‍ക്കാണോ class="normalText" എന്ന ഗുണമുള്ളത് ആ എച്.ടി.എം.എല്‍ ഘടകങ്ങളില്‍ മേല്‍പ്പറഞ്ഞിരിക്കുന്ന സ്റ്റൈല്‍ റൂള്‍ പ്രയോഗിക്കപ്പെടും. |
ഏതൊക്കെ എച്.ടി.എം.എല്‍ ഘടകങ്ങള്‍ക്കാണോ class="normalText" എന്ന ഗുണമുള്ളത് ആ എച്.ടി.എം.എല്‍ ഘടകങ്ങളില്‍ മേല്‍പ്പറഞ്ഞിരിക്കുന്ന സ്റ്റൈല്‍ റൂള്‍ പ്രയോഗിക്കപ്പെടും. |
||
==എച്.ടി.എം.എൽ താളുകളിൽ സ്റ്റൈൽ ഷീറ്റുകൾ നൽകാനുള്ള മാർഗങ്ങൾ== |
== എച്.ടി.എം.എൽ താളുകളിൽ സ്റ്റൈൽ ഷീറ്റുകൾ നൽകാനുള്ള മാർഗങ്ങൾ == |
||
വിവിധ സ്രോതസ്സുകളിൽ നിന്നും സ്റ്റൈല്‍ ഷീറ്റുകള്‍ എച്.ടി.എം.എൽ താളുകൾ സ്വീകരിക്കും. സി.എസ്.എസ് നിർദ്ദേശങ്ങൾ എച്.ടി.എം.എൽ താളിനുള്ളിൽ തന്നെ എഴുതി കൊടുക്കാം, അല്ലെങ്കിൽ സി.എസ്.എസ് സ്റ്റൈൽ നിയമങ്ങൾക്കായി ഒരു പ്രത്യേക ഫയൽ തന്നെ സൃഷ്ടിക്കാം, ഇത്തരം ഫയലുകള്‍ക്ക് " .CSS " എക്സ്‌റ്റെന്‍ഷനായിരിക്കും ഉണ്ടാവുക. ഈ ഫയലിനെ ആവശ്യമുള്ള എച്.ടി.എം.എൽ താളുകളുമായി ബന്ധപ്പെടുത്താം. ഒരേ എച്.ടി.എം.എൽ താളിൽ തന്നെ വിവിധ സ്രോതസ്സുകളിൽ നിന്നുള്ള സ്റ്റൈൽ റൂളുകൾ ഉപയോഗിക്കുവാന്‍ സാധിക്കും. ഒന്നിൽ കൂടുതൽ സ്റ്റൈൽ ഷീറ്റുകൾ ഒരു പ്രമാണത്തിൽ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ സ്വതവേ ഉള്ള ഒരു മുന്‍ഗണനാക്രമത്തിന്റെ അടിസ്ഥാനത്തിലാണ് സ്റ്റൈൽ ഷീറ്റുകൾ പ്രയോഗിക്കപ്പെടുന്നത്, അതേ ക്രമത്തില്‍ തന്നെ താഴെ കൊടുത്തിരിക്കുന്നു, |
വിവിധ സ്രോതസ്സുകളിൽ നിന്നും സ്റ്റൈല്‍ ഷീറ്റുകള്‍ എച്.ടി.എം.എൽ താളുകൾ സ്വീകരിക്കും. സി.എസ്.എസ് നിർദ്ദേശങ്ങൾ എച്.ടി.എം.എൽ താളിനുള്ളിൽ തന്നെ എഴുതി കൊടുക്കാം, അല്ലെങ്കിൽ സി.എസ്.എസ് സ്റ്റൈൽ നിയമങ്ങൾക്കായി ഒരു പ്രത്യേക ഫയൽ തന്നെ സൃഷ്ടിക്കാം, ഇത്തരം ഫയലുകള്‍ക്ക് " .CSS " എക്സ്‌റ്റെന്‍ഷനായിരിക്കും ഉണ്ടാവുക. ഈ ഫയലിനെ ആവശ്യമുള്ള എച്.ടി.എം.എൽ താളുകളുമായി ബന്ധപ്പെടുത്താം. ഒരേ എച്.ടി.എം.എൽ താളിൽ തന്നെ വിവിധ സ്രോതസ്സുകളിൽ നിന്നുള്ള സ്റ്റൈൽ റൂളുകൾ ഉപയോഗിക്കുവാന്‍ സാധിക്കും. ഒന്നിൽ കൂടുതൽ സ്റ്റൈൽ ഷീറ്റുകൾ ഒരു പ്രമാണത്തിൽ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ സ്വതവേ ഉള്ള ഒരു മുന്‍ഗണനാക്രമത്തിന്റെ അടിസ്ഥാനത്തിലാണ് സ്റ്റൈൽ ഷീറ്റുകൾ പ്രയോഗിക്കപ്പെടുന്നത്, അതേ ക്രമത്തില്‍ തന്നെ താഴെ കൊടുത്തിരിക്കുന്നു, |
||
#'''ഓതർ സ്റ്റൈലുകൾ''' <small>(author style)</small> |
# '''ഓതർ സ്റ്റൈലുകൾ''' <small>(author style)</small> |
||
#'''യൂസർ സ്റ്റൈലുകൾ''' <small>(user style) </small> |
# '''യൂസർ സ്റ്റൈലുകൾ''' <small>(user style) </small> |
||
#'''യൂസർ ഏജന്റ് സ്റ്റൈലുകൾ''' <small>(user agent style) </small> |
# '''യൂസർ ഏജന്റ് സ്റ്റൈലുകൾ''' <small>(user agent style) </small> |
||
ഓതര്‍ സ്റ്റൈലുകള്‍ ഏതെങ്കിലുമുണ്ടെങ്കില്‍ അതാവും പ്രസ്തുത താളില്‍ പ്രയോഗിക്കപ്പെടുക, ഇല്ലെങ്കില്‍ യൂസര്‍ സ്റ്റൈലുകള്‍ എന്തെങ്കിലുമുണ്ടെങ്കില്‍ അത്, അതുമില്ലെങ്കില്‍ യൂസര്‍ ഏജന്റ് സ്റ്റൈലുകള്‍ എന്ന ക്രമത്തില്‍ സ്റ്റൈല്‍ നിയമങ്ങള്‍ പ്രയോഗിക്കപ്പെടും. |
ഓതര്‍ സ്റ്റൈലുകള്‍ ഏതെങ്കിലുമുണ്ടെങ്കില്‍ അതാവും പ്രസ്തുത താളില്‍ പ്രയോഗിക്കപ്പെടുക, ഇല്ലെങ്കില്‍ യൂസര്‍ സ്റ്റൈലുകള്‍ എന്തെങ്കിലുമുണ്ടെങ്കില്‍ അത്, അതുമില്ലെങ്കില്‍ യൂസര്‍ ഏജന്റ് സ്റ്റൈലുകള്‍ എന്ന ക്രമത്തില്‍ സ്റ്റൈല്‍ നിയമങ്ങള്‍ പ്രയോഗിക്കപ്പെടും. |
||
===ഓതർ സ്റ്റൈലുകൾ=== |
=== ഓതർ സ്റ്റൈലുകൾ === |
||
എച്.ടി.എം.എൽ താള്‍ രൂപകൽപന ചെയ്യുന്ന ആൾ പറഞ്ഞുകൊടുക്കുന്ന സ്റ്റൈൽ നിയമങ്ങളാണ് ഓതർ സ്റ്റൈലുകൾ. ഇത് മൂന്ന് വിധത്തിൽ എഴുതിക്കൊടുക്കുവാന്‍ സാധിക്കും. ഈ മൂന്നു വിധത്തിൽ എഴുതിക്കൊടുക്കുന്ന സ്റ്റൈൽ നിയമങ്ങളും മുന്‍ഗണനാക്രമത്തിലാണ് പ്രയോഗിക്കപ്പെടുന്നത്, പ്രയോഗിക്കപ്പെടുന്ന അതേ ക്രമത്തിൽ തന്നെയാണ് താഴെ കൊടുത്തിരിക്കുന്നത് |
എച്.ടി.എം.എൽ താള്‍ രൂപകൽപന ചെയ്യുന്ന ആൾ പറഞ്ഞുകൊടുക്കുന്ന സ്റ്റൈൽ നിയമങ്ങളാണ് ഓതർ സ്റ്റൈലുകൾ. ഇത് മൂന്ന് വിധത്തിൽ എഴുതിക്കൊടുക്കുവാന്‍ സാധിക്കും. ഈ മൂന്നു വിധത്തിൽ എഴുതിക്കൊടുക്കുന്ന സ്റ്റൈൽ നിയമങ്ങളും മുന്‍ഗണനാക്രമത്തിലാണ് പ്രയോഗിക്കപ്പെടുന്നത്, പ്രയോഗിക്കപ്പെടുന്ന അതേ ക്രമത്തിൽ തന്നെയാണ് താഴെ കൊടുത്തിരിക്കുന്നത് |
||
#'''ഇന്‍ലൈന്‍ സ്റ്റൈലുകൾ''' <small>(inline styles) </small> ,എച്.ടി.എം.എല്‍ ഘടകങ്ങളുടെ ടാഗുകള്‍ക്കുള്ളില്‍ തന്നെ സ്റ്റൈല്‍ നിയമങ്ങള്‍ എഴുതിക്കൊടുക്കുന്ന രീതിയാണിത് |
# '''ഇന്‍ലൈന്‍ സ്റ്റൈലുകൾ''' <small>(inline styles) </small> ,എച്.ടി.എം.എല്‍ ഘടകങ്ങളുടെ ടാഗുകള്‍ക്കുള്ളില്‍ തന്നെ സ്റ്റൈല്‍ നിയമങ്ങള്‍ എഴുതിക്കൊടുക്കുന്ന രീതിയാണിത് |
||
#'''ഇന്റേർണൽ സ്റ്റൈലുകൾ അഥവാ എംബഡഡ് സ്റ്റൈലുകൾ''' <small>(internal or embedded styles)</small>, എച്.ടി.എം.എല്‍ താളിന്റെ ഹെഡ് ടാഗിന്റെ <small>(<head> - - - </head>)</small> ഉള്ളില്‍ സ്റ്റൈല്‍ നിയമങ്ങള്‍ എഴുതുന്ന രീതി |
# '''ഇന്റേർണൽ സ്റ്റൈലുകൾ അഥവാ എംബഡഡ് സ്റ്റൈലുകൾ''' <small>(internal or embedded styles)</small>, എച്.ടി.എം.എല്‍ താളിന്റെ ഹെഡ് ടാഗിന്റെ <small>(<head> - - - </head>)</small> ഉള്ളില്‍ സ്റ്റൈല്‍ നിയമങ്ങള്‍ എഴുതുന്ന രീതി |
||
#'''എക്സ്‌‌റ്റേർണൽ സ്റ്റൈൽ ഷീറ്റുകൾ''' <small>(external style sheets)</small>, അതായത് സി.എസ്.എസിനു വേണ്ടി ഒരു പ്രത്യേക ഫയൽ തന്നെ |
# '''എക്സ്‌‌റ്റേർണൽ സ്റ്റൈൽ ഷീറ്റുകൾ''' <small>(external style sheets)</small>, അതായത് സി.എസ്.എസിനു വേണ്ടി ഒരു പ്രത്യേക ഫയൽ തന്നെ |
||
ഇന്‍ലൈന്‍ സ്റ്റൈലുകള്‍ ഉണ്ടെങ്കില്‍ അത്, ഇല്ലെങ്കില്‍ ഇന്റേര്‍ണല്‍ സ്റ്റൈലുകള്‍, അതുമില്ലെങ്കില്‍ എക്സ്‌റ്റേര്‍ണല്‍ സ്റ്റൈലുകള്‍ എന്നീ ക്രമത്തിലാണ് താളുകളില്‍ ഓതര്‍ സ്റ്റൈലുകള്‍ പ്രയോഗിക്കപ്പെടുക |
ഇന്‍ലൈന്‍ സ്റ്റൈലുകള്‍ ഉണ്ടെങ്കില്‍ അത്, ഇല്ലെങ്കില്‍ ഇന്റേര്‍ണല്‍ സ്റ്റൈലുകള്‍, അതുമില്ലെങ്കില്‍ എക്സ്‌റ്റേര്‍ണല്‍ സ്റ്റൈലുകള്‍ എന്നീ ക്രമത്തിലാണ് താളുകളില്‍ ഓതര്‍ സ്റ്റൈലുകള്‍ പ്രയോഗിക്കപ്പെടുക |
||
===യൂസർ സ്റ്റൈലുകൾ=== |
=== യൂസർ സ്റ്റൈലുകൾ === |
||
ഉപയോക്താവിന്റെ നിര്‍ദ്ദേശപ്രകാരമുള്ള ഒരു സി.എസ്.എസ് ഫയൽ ഉപയോഗിച്ച് പ്രദർശന ക്രമീകരണങ്ങൾ നടത്തുക. യൂസര്‍ ഏജന്റില്‍ (സാധാരണ ഗതിയില്‍ ഇതൊരു വെബ് ബ്രൗസര്‍ ആയിരിക്കും) ഇങ്ങനെ ഒരു സി.എസ്.എസ് തിരഞ്ഞെടുക്കുവാനുള്ള സൗകര്യം ഉണ്ടെങ്കിൽ മാത്രമേ ഇത് സാധ്യമാകൂ. സ്വതവേ യൂസര്‍ സ്റ്റൈലുകള്‍ ഓതര്‍ സ്റ്റൈലുകള്‍ ഇല്ലെങ്കില്‍ മാത്രമേ പ്രയോഗിക്കപ്പെടുകയുള്ളു, പക്ഷെ ഈ നിയമത്തെ മറികടന്ന്, ഓതര്‍ സ്റ്റൈലുകള്‍ക്ക് പകരം യൂസര്‍ സ്റ്റൈലുകള്‍ ഉപയോഗിച്ച് എച്.ടി.എം.എല്‍ താളുകള്‍ പ്രദര്‍ശിപ്പിക്കുവാനുള്ള സൗകര്യം പുതിയ ബ്രൗസറുകളില്‍ ഉണ്ട്. |
ഉപയോക്താവിന്റെ നിര്‍ദ്ദേശപ്രകാരമുള്ള ഒരു സി.എസ്.എസ് ഫയൽ ഉപയോഗിച്ച് പ്രദർശന ക്രമീകരണങ്ങൾ നടത്തുക. യൂസര്‍ ഏജന്റില്‍ (സാധാരണ ഗതിയില്‍ ഇതൊരു വെബ് ബ്രൗസര്‍ ആയിരിക്കും) ഇങ്ങനെ ഒരു സി.എസ്.എസ് തിരഞ്ഞെടുക്കുവാനുള്ള സൗകര്യം ഉണ്ടെങ്കിൽ മാത്രമേ ഇത് സാധ്യമാകൂ. സ്വതവേ യൂസര്‍ സ്റ്റൈലുകള്‍ ഓതര്‍ സ്റ്റൈലുകള്‍ ഇല്ലെങ്കില്‍ മാത്രമേ പ്രയോഗിക്കപ്പെടുകയുള്ളു, പക്ഷെ ഈ നിയമത്തെ മറികടന്ന്, ഓതര്‍ സ്റ്റൈലുകള്‍ക്ക് പകരം യൂസര്‍ സ്റ്റൈലുകള്‍ ഉപയോഗിച്ച് എച്.ടി.എം.എല്‍ താളുകള്‍ പ്രദര്‍ശിപ്പിക്കുവാനുള്ള സൗകര്യം പുതിയ ബ്രൗസറുകളില്‍ ഉണ്ട്. |
||
<ref name="override_userstyle"> |
<ref name="override_userstyle"> |
||
| വരി 99: | വരി 99: | ||
</ref> |
</ref> |
||
===യൂസർ ഏജന്റ് സ്റ്റൈലുകൾ=== |
=== യൂസർ ഏജന്റ് സ്റ്റൈലുകൾ === |
||
മറ്റ് സ്റ്റൈൽ ഷീറ്റുകളൊന്നും പ്രയോഗത്തിലില്ലെങ്കിൽ യൂസർ ഏജന്റിന്റെ അതായത് വെബ് ബ്രൗസറിൽ സ്വതവേ ഉള്ള സ്റ്റൈൽ നിയമങ്ങൾ ഉപയോഗിച്ച് എച്.ടി.എം.എൽ താൾ. പ്രദർശിപ്പിക്കും |
മറ്റ് സ്റ്റൈൽ ഷീറ്റുകളൊന്നും പ്രയോഗത്തിലില്ലെങ്കിൽ യൂസർ ഏജന്റിന്റെ അതായത് വെബ് ബ്രൗസറിൽ സ്വതവേ ഉള്ള സ്റ്റൈൽ നിയമങ്ങൾ ഉപയോഗിച്ച് എച്.ടി.എം.എൽ താൾ. പ്രദർശിപ്പിക്കും |
||
==പുറമെ നിന്നുള്ള കണ്ണികള്‍== |
== പുറമെ നിന്നുള്ള കണ്ണികള്‍ == |
||
* [http://w3schools.com/css/default.asp സി.എസ്.എസ് പഠനം ഡബ്ല്യു3സ്കൂള്സ്.കോമില്‍ നിന്നും] |
* [http://w3schools.com/css/default.asp സി.എസ്.എസ് പഠനം ഡബ്ല്യു3സ്കൂള്സ്.കോമില്‍ നിന്നും] |
||
==അവലംബം== |
== അവലംബം == |
||
{{reflist}} |
{{reflist}} |
||
{{Itstub}} |
{{Itstub}} |
||
[[വര്‍ഗ്ഗം:സ്റ്റൈല്‍ഷീറ്റ് ഭാഷകള്‍]] |
[[വര്‍ഗ്ഗം:സ്റ്റൈല്‍ഷീറ്റ് ഭാഷകള്‍]] |
||
| വരി 147: | വരി 148: | ||
[[la:CSS]] |
[[la:CSS]] |
||
[[lt:CSS]] |
[[lt:CSS]] |
||
[[lv: |
[[lv:Cascading Style Sheets]] |
||
[[ms:Cascading Style Sheets]] |
[[ms:Cascading Style Sheets]] |
||
[[nl:Cascading Style Sheets]] |
[[nl:Cascading Style Sheets]] |
||
12:19, 12 ഫെബ്രുവരി 2010-നു നിലവിലുണ്ടായിരുന്ന രൂപം
| പ്രമാണം: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)
|
വിവരസാങ്കേതികവിദ്യയുമായി ബന്ധപ്പെട്ട ഈ ലേഖനം അപൂർണ്ണമാണ്‌. ഇതു പൂർത്തിയാക്കാൻ സഹായിക്കുക. |