"കാസ്‌കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ്‌സ്" എന്ന താളിന്റെ പതിപ്പുകൾ തമ്മിലുള്ള വ്യത്യാസം

വിക്കിപീഡിയ, ഒരു സ്വതന്ത്ര വിജ്ഞാനകോശം.
നാൾപ്പതിപ്പുകൾ കാണുക
← മുൻപത്തെ വ്യത്യാസംഅടുത്ത വ്യത്യാസം →
Content deleted Content added
വ്യത്യാസം കാണൽവിക്കിഎഴുത്ത്
(ചെ.) യന്ത്രം നീക്കുന്നു: km:Cascading Style Sheets
(ചെ.) പുതിയ ചിൽ, നൾ എഡിറ്റ് ...
വരി 1: വരി 1:
{{prettyurl|Cascading style sheets}}
{{prettyurl|Cascading style sheets}}
{{Infobox file format
{{Infobox file format
| name = കാസ്‌കേഡിങ്ങ് സ്റ്റൈല്‍ ഷീറ്റ്‌സ് <small> (Cascading style sheets) </small>
| name = കാസ്‌കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ്‌സ് <small> (Cascading style sheets) </small>
| screenshot = [[പ്രമാണം:CSS.svg|140px]]
| screenshot = [[പ്രമാണം:CSS.svg|140px]]
| extension = .css
| extension = .css
| mime = text/css
| mime = text/css
| owner = [[വേള്‍ഡ് വൈഡ് വെബ് കണ്‍സോര്‍ഷ്യം]]
| owner = [[വേൾഡ് വൈഡ് വെബ് കൺസോർഷ്യം]]
| genre = [[സ്റ്റൈല്‍ഷീറ്റ് ഭാഷ]]
| genre = [[സ്റ്റൈൽഷീറ്റ് ഭാഷ]]
| standard = [http://www.w3.org/TR/CSS1 Level 1 (Recommendation)]<br />[http://www.w3.org/TR/CSS2/ Level 2 (Recommendation)]<br />[http://www.w3.org/TR/CSS21/ Level 2 Revision 1 (Candidate Recommendation)]
| standard = [http://www.w3.org/TR/CSS1 Level 1 (Recommendation)]<br />[http://www.w3.org/TR/CSS2/ Level 2 (Recommendation)]<br />[http://www.w3.org/TR/CSS21/ Level 2 Revision 1 (Candidate Recommendation)]
}}
}}


[[മാര്‍ക്കപ്പ് ഭാഷ|മാര്‍ക്കപ്പ് ഭാഷകള്‍]] ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്ന പ്രമാണങ്ങള്‍ എങ്ങനെ പ്രദര്‍ശിപ്പിക്കണമെന്ന് പറഞ്ഞുകൊടുക്കാന്‍ ഉപയോഗിക്കുന്ന ഒരു സ്റ്റൈല്‍ഷീറ്റ് ഭാഷയാണ് '''കാസ്‌കേഡിങ്ങ് സ്റ്റൈല്‍ ഷീറ്റ്''' <small>(Cascading Style Sheets)</small> അഥവാ '''സി.എസ്.എസ്''' <small>(CSS)</small>. സാധാരണ ഗതിയില്‍ [[എച്.റ്റി.എം.എല്‍.]] പിന്നെ [[എക്സ്.എച്.റ്റി.എം.എല്‍.]] എന്നീ മാര്‍ക്കപ്പ് ഭാഷകള്‍ ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്ന പ്രമാണങ്ങളുടെ പ്രദര്‍ശനം നിയന്ത്രിക്കുവാനും ദൃശ്യഭംഗി വര്‍ദ്ധിപ്പിക്കുവാനും മറ്റും സി.എസ്.എസ് ഉപയോഗിക്കുന്നു, പക്ഷെ ഈ സ്റ്റൈല്‍ഷീറ്റ് ഭാഷ ഏത് തരത്തിലുമുള്ള [[എക്സ്.എം.എല്‍]] പ്രമാണങ്ങളിലും, [[എസ്.വി.ജി.]] പിന്നെ [[എക്സ്.യു.എല്‍.]] ഉള്‍പ്പെടെ, ഉപയോഗിക്കുവാന്‍ സാധിക്കുന്നു.
[[മാർക്കപ്പ് ഭാഷ|മാർക്കപ്പ് ഭാഷകൾ]] ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്ന പ്രമാണങ്ങൾ എങ്ങനെ പ്രദർശിപ്പിക്കണമെന്ന് പറഞ്ഞുകൊടുക്കാൻ ഉപയോഗിക്കുന്ന ഒരു സ്റ്റൈൽഷീറ്റ് ഭാഷയാണ് '''കാസ്‌കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ്''' <small>(Cascading Style Sheets)</small> അഥവാ '''സി.എസ്.എസ്''' <small>(CSS)</small>. സാധാരണ ഗതിയിൽ [[എച്.റ്റി.എം.എൽ.]] പിന്നെ [[എക്സ്.എച്.റ്റി.എം.എൽ.]] എന്നീ മാർക്കപ്പ് ഭാഷകൾ ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്ന പ്രമാണങ്ങളുടെ പ്രദർശനം നിയന്ത്രിക്കുവാനും ദൃശ്യഭംഗി വർദ്ധിപ്പിക്കുവാനും മറ്റും സി.എസ്.എസ് ഉപയോഗിക്കുന്നു, പക്ഷെ ഈ സ്റ്റൈൽഷീറ്റ് ഭാഷ ഏത് തരത്തിലുമുള്ള [[എക്സ്.എം.എൽ]] പ്രമാണങ്ങളിലും, [[എസ്.വി.ജി.]] പിന്നെ [[എക്സ്.യു.എൽ.]] ഉൾപ്പെടെ, ഉപയോഗിക്കുവാൻ സാധിക്കുന്നു.


ഒരു ഉദാഹരണത്തിന് , ഒരു എച്.റ്റി.എം.എല്‍ പ്രമാണത്തിന്റെ പശ്ചാത്തലത്തിന് പച്ചനിറവും അക്ഷരങ്ങള്‍ക്കെല്ലാം വെള്ളനിറവും കൊടുക്കണമെന്നുണ്ടെങ്കില്‍ അത് സി.എസ്.എസ് ഉപയോഗിച്ച് പറഞ്ഞുകൊടുക്കാന്‍ സാധിക്കും. മുന്‍കാലങ്ങളില്‍ എച്.ടി.എം.എല്‍ താളുകളില്‍ ഉള്ളടക്കവും, താള്‍ [[വെബ് ബ്രൗസര്‍|ബ്രൗസറില്‍]] എങ്ങനെ പ്രദര്‍ശിപ്പിക്കണമെന്നുള്ള നിര്‍ദ്ദേശങ്ങളും ഒരുമിച്ചാണ് കൊടുത്തിരുന്നത്. ഓരോ എച്.ടി.എം.എല്‍ ഘടകത്തിന്റേയും പ്രദര്‍ശനക്രമങ്ങള്‍ അതാത് ടാഗിനുള്ളില്‍ വ്യക്തമാക്കേണ്ടി വന്നിരുന്നു, ഉദാഹരണത്തിന് അക്ഷരങ്ങളാണെങ്കില്‍ എത് ഫോണ്ട് ഉപയോഗിക്കണം, ഫോണ്ടുകളുടെ നിറം, വലിപ്പം, താളിന്റെ കാര്യത്തില്‍ പശ്ചാത്തലനിറം, പശ്ചാത്തല ചിത്രം, മറ്റ് എച്ച്.ടി.എം.എല്‍ ഘടകങ്ങളായ റ്റേബിള്‍, സ്പാന്‍ എന്നിവയുടെ കാര്യത്തില്‍ അരികുകള്‍ <small>(border)</small> അടയാളപ്പെടുത്തണോ, വേണമെങ്കില്‍ ഏത് നിറം ഉപയോഗിച്ചുവേണം , എത്ര വീതിയില്‍ വേണം എന്നിങ്ങനെയുള്ള അനേകം ഗുണങ്ങള്‍ അഥവാ പ്രോപ്പര്‍ട്ടികളും അവയുടെ മൂല്യങ്ങളും. ഉള്ളടക്കവും ഇത്തരം പ്രദര്‍ശന നിര്‍ദ്ദേശങ്ങളും എച്.ടി.എം.എല്‍ താളുകളില്‍ ഇടകലര്‍ന്നു കിടക്കുന്നതിനാല്‍ പലതരത്തിലുള്ള ബുദ്ധിമുട്ടുകള്‍ ഉണ്ടാവാം, സി.എസ്.എസിന്റെ വരവോടെ താളിലെ ഉള്ളടക്കവും പ്രദര്‍ശനക്രമീകരണ നിര്‍ദ്ദേശങ്ങളും തമ്മിലുള്ള വേര്‍തിരിവ് സാധ്യമായി. ഇത് പേജ് രൂപകല്പന ചെയ്യുന്നയാള്‍ക്ക് മെച്ചപ്പെട്ട നിയന്ത്രണം നല്‍കുന്നതോടൊപ്പം, ഒന്നില്‍ കൂടുതല്‍ താളുകളില്‍ ഒരേ സി.എസ്.എസ് ഉപയോഗിക്കുന്നതിലൂടെയും മറ്റും ആവര്‍ത്തനങ്ങള്‍ ഒഴിവാക്കുവാനും സഹായിക്കുന്നു.
ഒരു ഉദാഹരണത്തിന് , ഒരു എച്.റ്റി.എം.എൽ പ്രമാണത്തിന്റെ പശ്ചാത്തലത്തിന് പച്ചനിറവും അക്ഷരങ്ങൾക്കെല്ലാം വെള്ളനിറവും കൊടുക്കണമെന്നുണ്ടെങ്കിൽ അത് സി.എസ്.എസ് ഉപയോഗിച്ച് പറഞ്ഞുകൊടുക്കാൻ സാധിക്കും. മുൻകാലങ്ങളിൽ എച്.ടി.എം.എൽ താളുകളിൽ ഉള്ളടക്കവും, താൾ [[വെബ് ബ്രൗസർ|ബ്രൗസറിൽ]] എങ്ങനെ പ്രദർശിപ്പിക്കണമെന്നുള്ള നിർദ്ദേശങ്ങളും ഒരുമിച്ചാണ് കൊടുത്തിരുന്നത്. ഓരോ എച്.ടി.എം.എൽ ഘടകത്തിന്റേയും പ്രദർശനക്രമങ്ങൾ അതാത് ടാഗിനുള്ളിൽ വ്യക്തമാക്കേണ്ടി വന്നിരുന്നു, ഉദാഹരണത്തിന് അക്ഷരങ്ങളാണെങ്കിൽ എത് ഫോണ്ട് ഉപയോഗിക്കണം, ഫോണ്ടുകളുടെ നിറം, വലിപ്പം, താളിന്റെ കാര്യത്തിൽ പശ്ചാത്തലനിറം, പശ്ചാത്തല ചിത്രം, മറ്റ് എച്ച്.ടി.എം.എൽ ഘടകങ്ങളായ റ്റേബിൾ, സ്പാൻ എന്നിവയുടെ കാര്യത്തിൽ അരികുകൾ <small>(border)</small> അടയാളപ്പെടുത്തണോ, വേണമെങ്കിൽ ഏത് നിറം ഉപയോഗിച്ചുവേണം , എത്ര വീതിയിൽ വേണം എന്നിങ്ങനെയുള്ള അനേകം ഗുണങ്ങൾ അഥവാ പ്രോപ്പർട്ടികളും അവയുടെ മൂല്യങ്ങളും. ഉള്ളടക്കവും ഇത്തരം പ്രദർശന നിർദ്ദേശങ്ങളും എച്.ടി.എം.എൽ താളുകളിൽ ഇടകലർന്നു കിടക്കുന്നതിനാൽ പലതരത്തിലുള്ള ബുദ്ധിമുട്ടുകൾ ഉണ്ടാവാം, സി.എസ്.എസിന്റെ വരവോടെ താളിലെ ഉള്ളടക്കവും പ്രദർശനക്രമീകരണ നിർദ്ദേശങ്ങളും തമ്മിലുള്ള വേർതിരിവ് സാധ്യമായി. ഇത് പേജ് രൂപകല്പന ചെയ്യുന്നയാൾക്ക് മെച്ചപ്പെട്ട നിയന്ത്രണം നൽകുന്നതോടൊപ്പം, ഒന്നിൽ കൂടുതൽ താളുകളിൽ ഒരേ സി.എസ്.എസ് ഉപയോഗിക്കുന്നതിലൂടെയും മറ്റും ആവർത്തനങ്ങൾ ഒഴിവാക്കുവാനും സഹായിക്കുന്നു.


സി.എസ്.എസ് മാനദണ്ഡങ്ങള്‍ [[വേള്‍ഡ് വൈഡ് വെബ് കണ്‍സോര്‍ഷ്യം|വേള്‍ഡ് വൈഡ് വെബ് കണ്‍സോര്‍ഷ്യത്തിന്റെ]] മേല്‍നോട്ടത്തിലാണ് നിശ്ചയിക്കപ്പെടുന്നത്. 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%]]
[[പ്രമാണം: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> > ടാഗുകൾക്കകത്തും ഇത് പ്രയോഗിക്കപ്പെടും.


സെലക്‌ടറുകള്‍ പലവിധമുണ്ട്, മുകളിലത്തെ ചിത്രത്തില്‍ കാണുന്നതുപോലെ ടാഗിന്റെ പേര് പറഞ്ഞു കൊടുത്ത് പ്രദര്‍ശനക്രമം ബാധകമാകേണ്ട എച്.ടി.എം.എല്‍ ഘടകങ്ങളെ തിരഞ്ഞെടുക്കുന്നത് പലമാര്‍ഗങ്ങളില്‍ ഒന്നാണ്, ഇതിനെ ടൈപ്പ് സെലക്‌ടര്‍ എന്നാണ് പറയുക. ഇത് കൂടാതെ ഡിസെന്‍ഡന്റ് സെലക്‌ടര്‍ <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">
{{cite web
{{cite web
| url = http://w3schools.com/css/css_id_class.asp
| url = http://w3schools.com/css/css_id_class.asp
| title = സി.എസ്.എസ് ക്ലാസ്, ഐഡി സെലക്‌ടറുകള്‍
| title = സി.എസ്.എസ് ക്ലാസ്, ഐഡി സെലക്‌ടറുകൾ
| accessdate = 24-11-2009
| accessdate = 24-11-2009
| publisher = ഡബ്ല്യു3സ്‌കൂള്‍സ്.കോമില്‍ നിന്നും
| publisher = ഡബ്ല്യു3സ്‌കൂൾസ്.കോമിൽ നിന്നും
| language =<small>[[ഇംഗ്ലീഷ്]]</small>
| language =<small>[[ഇംഗ്ലീഷ്]]</small>
}}
}}
വരി 47: വരി 47:
}
}
</source>'''
</source>'''
ഏത് എച്.ടി.എം.എല്‍ ഘടകത്തിനാണോ id="blueHead" എന്ന ഗുണമുള്ളത് ആ എച്.ടി.എം.എല്‍ ഘടകത്തിനുള്ളില്‍ മേല്‍പ്പറഞ്ഞിരിക്കുന്ന സ്റ്റൈല്‍ റൂള്‍ പ്രയോഗിക്കപ്പെടും. ഐഡി ഗുണത്തിന്റെ പ്രത്യേകതയെന്തെന്നു വച്ചാല്‍ അത് അദ്വയമാണ്, ഒരു എച്.ടി.എം.എല്‍ പ്രമാണത്തില്‍ ഒരു ഘടകത്തിന്റെ ഐഡി മറ്റൊന്നിനു കൊടുക്കാന്‍ സാധ്യമല്ല.
ഏത് എച്.ടി.എം.എൽ ഘടകത്തിനാണോ id="blueHead" എന്ന ഗുണമുള്ളത് ആ എച്.ടി.എം.എൽ ഘടകത്തിനുള്ളിൽ മേൽപ്പറഞ്ഞിരിക്കുന്ന സ്റ്റൈൽ റൂൾ പ്രയോഗിക്കപ്പെടും. ഐഡി ഗുണത്തിന്റെ പ്രത്യേകതയെന്തെന്നു വച്ചാൽ അത് അദ്വയമാണ്, ഒരു എച്.ടി.എം.എൽ പ്രമാണത്തിൽ ഒരു ഘടകത്തിന്റെ ഐഡി മറ്റൊന്നിനു കൊടുക്കാൻ സാധ്യമല്ല.


=== ക്ലാസ് സെലക്‌ടര്‍ ===
=== ക്ലാസ് സെലക്‌ടർ ===
ഒന്നില്‍ കൂടുതല്‍ എച്.ടി.എം.എല്‍ ഘടകങ്ങളില്‍ ആവശ്യമനുസരിച്ച് പ്രദര്‍ശനക്രമങ്ങള്‍ പ്രയോഗിക്കുവാനുള്ള സൗകര്യം ക്ലാസ് സെലക്‌ടറുകള്‍ വഴി ലഭിക്കുന്നു. ഏതൊക്കെ എച്.ടി.എം.എല്‍ ഘടകങ്ങളിലാണ് പ്രയോഗിക്കേണ്ടതെന്ന് ആ ഘടകങ്ങളുടെ ക്ലാസ് <small>(class)</small> എന്ന ഗുണത്തില്‍ നിന്നാണ് മനസ്സിലാക്കേണ്ടത്. ക്ലാസ് സെലക്‌ടറുകള്‍ ഉപയോഗിച്ച് സ്റ്റൈല്‍ റൂളുകള്‍ എഴുതുമ്പോള്‍ ' '''.''' ' ചിഹ്നം, അതിനുശേഷം ക്ലാസിന്റെ പേര്, പിന്നെ <big>{}</big> ആവരണചിഹ്നത്തിനുള്ളിലായി ഡിക്ലറേഷനുകള്‍ എന്ന നിയമം പാലിക്കണം. ഒന്നില്‍ കൂടുതല്‍ ഘടകങ്ങള്‍ക്ക് ഒരേ ക്ലാസ് ഗുണം കൊടുക്കാം. ഒരേ ക്ലാസ് പേരുള്ള എല്ലാ എച്.ടി.എം.എല്‍ ഘടകങ്ങള്‍ക്കും ആ ക്ലാസ് സെലക്‌ടര്‍ ഉപയോഗിച്ചു എഴുതിക്കൊടുത്തിട്ടുള്ള സ്റ്റൈല്‍ റൂളുകള്‍ ബാധകമാവും.
ഒന്നിൽ കൂടുതൽ എച്.ടി.എം.എൽ ഘടകങ്ങളിൽ ആവശ്യമനുസരിച്ച് പ്രദർശനക്രമങ്ങൾ പ്രയോഗിക്കുവാനുള്ള സൗകര്യം ക്ലാസ് സെലക്‌ടറുകൾ വഴി ലഭിക്കുന്നു. ഏതൊക്കെ എച്.ടി.എം.എൽ ഘടകങ്ങളിലാണ് പ്രയോഗിക്കേണ്ടതെന്ന് ആ ഘടകങ്ങളുടെ ക്ലാസ് <small>(class)</small> എന്ന ഗുണത്തിൽ നിന്നാണ് മനസ്സിലാക്കേണ്ടത്. ക്ലാസ് സെലക്‌ടറുകൾ ഉപയോഗിച്ച് സ്റ്റൈൽ റൂളുകൾ എഴുതുമ്പോൾ ' '''.''' ' ചിഹ്നം, അതിനുശേഷം ക്ലാസിന്റെ പേര്, പിന്നെ <big>{}</big> ആവരണചിഹ്നത്തിനുള്ളിലായി ഡിക്ലറേഷനുകൾ എന്ന നിയമം പാലിക്കണം. ഒന്നിൽ കൂടുതൽ ഘടകങ്ങൾക്ക് ഒരേ ക്ലാസ് ഗുണം കൊടുക്കാം. ഒരേ ക്ലാസ് പേരുള്ള എല്ലാ എച്.ടി.എം.എൽ ഘടകങ്ങൾക്കും ആ ക്ലാസ് സെലക്‌ടർ ഉപയോഗിച്ചു എഴുതിക്കൊടുത്തിട്ടുള്ള സ്റ്റൈൽ റൂളുകൾ ബാധകമാവും.
<ref name="class_id_selectors">
<ref name="class_id_selectors">
{{cite web
{{cite web
| url = http://w3schools.com/css/css_id_class.asp
| url = http://w3schools.com/css/css_id_class.asp
| title = സി.എസ്.എസ് ക്ലാസ്, ഐഡി സെലക്‌ടറുകള്‍
| title = സി.എസ്.എസ് ക്ലാസ്, ഐഡി സെലക്‌ടറുകൾ
| accessdate = 24-11-2009
| accessdate = 24-11-2009
| publisher = ഡബ്ല്യു3സ്‌കൂള്‍സ്.കോമില്‍ നിന്നും
| publisher = ഡബ്ല്യു3സ്‌കൂൾസ്.കോമിൽ നിന്നും
| language =<small>[[ഇംഗ്ലീഷ്]]</small>
| language =<small>[[ഇംഗ്ലീഷ്]]</small>
}}
}}
വരി 69: വരി 69:
}
}
</source>'''
</source>'''
ഏതൊക്കെ എച്.ടി.എം.എല്‍ ഘടകങ്ങള്‍ക്കാണോ class="normalText" എന്ന ഗുണമുള്ളത് ആ എച്.ടി.എം.എല്‍ ഘടകങ്ങളില്‍ മേല്‍പ്പറഞ്ഞിരിക്കുന്ന സ്റ്റൈല്‍ റൂള്‍ പ്രയോഗിക്കപ്പെടും.
ഏതൊക്കെ എച്.ടി.എം.എൽ ഘടകങ്ങൾക്കാണോ class="normalText" എന്ന ഗുണമുള്ളത് ആ എച്.ടി.എം.എൽ ഘടകങ്ങളിൽ മേൽപ്പറഞ്ഞിരിക്കുന്ന സ്റ്റൈൽ റൂൾ പ്രയോഗിക്കപ്പെടും.


== എച്.ടി.എം.എൽ താളുകളിൽ സ്റ്റൈൽ ഷീറ്റുകൾ നൽകാനുള്ള മാർഗങ്ങൾ ==
== എച്.ടി.എം.എൽ താളുകളിൽ സ്റ്റൈൽ ഷീറ്റുകൾ നൽകാനുള്ള മാർഗങ്ങൾ ==
വിവിധ സ്രോതസ്സുകളിൽ നിന്നും സ്റ്റൈല്‍ ഷീറ്റുകള്‍ എച്.ടി.എം.എൽ താളുകൾ സ്വീകരിക്കും. സി.എസ്.എസ് നിർദ്ദേശങ്ങൾ എച്.ടി.എം.എൽ താളിനുള്ളിൽ തന്നെ എഴുതി കൊടുക്കാം, അല്ലെങ്കിൽ സി.എസ്.എസ് സ്റ്റൈൽ നിയമങ്ങൾക്കായി ഒരു പ്രത്യേക ഫയൽ തന്നെ സൃഷ്ടിക്കാം, ഇത്തരം ഫയലുകള്‍ക്ക് " .CSS " എക്സ്‌റ്റെന്‍ഷനായിരിക്കും ഉണ്ടാവുക. ഈ ഫയലിനെ ആവശ്യമുള്ള എച്.ടി.എം.എൽ താളുകളുമായി ബന്ധപ്പെടുത്താം. ഒരേ എച്.ടി.എം.എൽ താളിൽ തന്നെ വിവിധ സ്രോതസ്സുകളിൽ നിന്നുള്ള സ്റ്റൈൽ റൂളുകൾ ഉപയോഗിക്കുവാന്‍ സാധിക്കും. ഒന്നിൽ കൂടുതൽ സ്റ്റൈൽ ഷീറ്റുകൾ ഒരു പ്രമാണത്തിൽ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ സ്വതവേ ഉള്ള ഒരു മുന്‍ഗണനാക്രമത്തിന്റെ അടിസ്ഥാനത്തിലാണ് സ്റ്റൈൽ ഷീറ്റുകൾ പ്രയോഗിക്കപ്പെടുന്നത്, അതേ ക്രമത്തില്‍ തന്നെ താഴെ കൊടുത്തിരിക്കുന്നു,
വിവിധ സ്രോതസ്സുകളിൽ നിന്നും സ്റ്റൈൽ ഷീറ്റുകൾ എച്.ടി.എം.എൽ താളുകൾ സ്വീകരിക്കും. സി.എസ്.എസ് നിർദ്ദേശങ്ങൾ എച്.ടി.എം.എൽ താളിനുള്ളിൽ തന്നെ എഴുതി കൊടുക്കാം, അല്ലെങ്കിൽ സി.എസ്.എസ് സ്റ്റൈൽ നിയമങ്ങൾക്കായി ഒരു പ്രത്യേക ഫയൽ തന്നെ സൃഷ്ടിക്കാം, ഇത്തരം ഫയലുകൾക്ക് " .CSS " എക്സ്‌റ്റെൻഷനായിരിക്കും ഉണ്ടാവുക. ഈ ഫയലിനെ ആവശ്യമുള്ള എച്.ടി.എം.എൽ താളുകളുമായി ബന്ധപ്പെടുത്താം. ഒരേ എച്.ടി.എം.എൽ താളിൽ തന്നെ വിവിധ സ്രോതസ്സുകളിൽ നിന്നുള്ള സ്റ്റൈൽ റൂളുകൾ ഉപയോഗിക്കുവാൻ സാധിക്കും. ഒന്നിൽ കൂടുതൽ സ്റ്റൈൽ ഷീറ്റുകൾ ഒരു പ്രമാണത്തിൽ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ സ്വതവേ ഉള്ള ഒരു മുൻഗണനാക്രമത്തിന്റെ അടിസ്ഥാനത്തിലാണ് സ്റ്റൈൽ ഷീറ്റുകൾ പ്രയോഗിക്കപ്പെടുന്നത്, അതേ ക്രമത്തിൽ തന്നെ താഴെ കൊടുത്തിരിക്കുന്നു,


# '''ഓതർ സ്റ്റൈലുകൾ''' <small>(author style)</small>
# '''ഓതർ സ്റ്റൈലുകൾ''' <small>(author style)</small>
വരി 78: വരി 78:
# '''യൂസർ ഏജന്റ് സ്റ്റൈലുകൾ''' <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">
{{cite web
{{cite web
വരി 103: വരി 103:




== പുറമെ നിന്നുള്ള കണ്ണികള്‍ ==
== പുറമെ നിന്നുള്ള കണ്ണികൾ ==
* [http://w3schools.com/css/default.asp സി.എസ്.എസ് പഠനം ഡബ്ല്യു3സ്കൂള്‍സ്.കോമില്‍ നിന്നും]
* [http://w3schools.com/css/default.asp സി.എസ്.എസ് പഠനം ഡബ്ല്യു3സ്കൂൾസ്.കോമിൽ നിന്നും]


== അവലംബം ==
== അവലംബം ==
വരി 111: വരി 111:
{{Itstub}}
{{Itstub}}


[[വർഗ്ഗം:സ്റ്റൈൽഷീറ്റ് ഭാഷകൾ]]
[[വര്‍ഗ്ഗം:സ്റ്റൈല്‍ഷീറ്റ് ഭാഷകള്‍]]


[[ar:صفحات الطرز المتراصة]]
[[ar:صفحات الطرز المتراصة]]

01:39, 11 ഏപ്രിൽ 2010-നു നിലവിലുണ്ടായിരുന്ന രൂപം

കാസ്‌കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ്‌സ് (Cascading style sheets)
പ്രമാണം: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) എന്നാണ് പറയുക. സ്റ്റൈൽ ഷീറ്റുകളിൽ സ്റ്റൈൽ റൂളുകളുടെ ഒരു കൂട്ടമാണുണ്ടാവുക. ഒരു സി.എസ്.എസ് സ്റ്റൈൽ റൂളിന് രണ്ടു പ്രധാന ഭാഗങ്ങളാണുള്ളത്

  • ഒരു സെലക്‌ടർ
  • ഒന്നോ അധികലധികമോ ഡിക്ലറേഷനുകൾ

100%

പ്രദർശനക്രമം ബാധകമാകേണ്ട എച്.ടി.എം.എൽ ഘടകങ്ങളെ തിരഞ്ഞെടുക്കാനാണ് സെലക്‌ടർ. ഡിക്ലറേഷനുകൾ വഴിയാണ് സെലക്‌ടറിന്റെ ഗുണഗണങ്ങൾ പറയുന്നത്. ഒരു ഡിക്ലറേഷനിൽ ഒരു ഗുണവും (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 " എക്സ്‌റ്റെൻഷനായിരിക്കും ഉണ്ടാവുക. ഈ ഫയലിനെ ആവശ്യമുള്ള എച്.ടി.എം.എൽ താളുകളുമായി ബന്ധപ്പെടുത്താം. ഒരേ എച്.ടി.എം.എൽ താളിൽ തന്നെ വിവിധ സ്രോതസ്സുകളിൽ നിന്നുള്ള സ്റ്റൈൽ റൂളുകൾ ഉപയോഗിക്കുവാൻ സാധിക്കും. ഒന്നിൽ കൂടുതൽ സ്റ്റൈൽ ഷീറ്റുകൾ ഒരു പ്രമാണത്തിൽ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ സ്വതവേ ഉള്ള ഒരു മുൻഗണനാക്രമത്തിന്റെ അടിസ്ഥാനത്തിലാണ് സ്റ്റൈൽ ഷീറ്റുകൾ പ്രയോഗിക്കപ്പെടുന്നത്, അതേ ക്രമത്തിൽ തന്നെ താഴെ കൊടുത്തിരിക്കുന്നു,

  1. ഓതർ സ്റ്റൈലുകൾ (author style)
  2. യൂസർ സ്റ്റൈലുകൾ (user style)
  3. യൂസർ ഏജന്റ് സ്റ്റൈലുകൾ (user agent style)

ഓതർ സ്റ്റൈലുകൾ ഏതെങ്കിലുമുണ്ടെങ്കിൽ അതാവും പ്രസ്തുത താളിൽ പ്രയോഗിക്കപ്പെടുക, ഇല്ലെങ്കിൽ യൂസർ സ്റ്റൈലുകൾ എന്തെങ്കിലുമുണ്ടെങ്കിൽ അത്, അതുമില്ലെങ്കിൽ യൂസർ ഏജന്റ് സ്റ്റൈലുകൾ എന്ന ക്രമത്തിൽ സ്റ്റൈൽ നിയമങ്ങൾ പ്രയോഗിക്കപ്പെടും.

ഓതർ സ്റ്റൈലുകൾ

എച്.ടി.എം.എൽ താൾ രൂപകൽപന ചെയ്യുന്ന ആൾ പറഞ്ഞുകൊടുക്കുന്ന സ്റ്റൈൽ നിയമങ്ങളാണ് ഓതർ സ്റ്റൈലുകൾ. ഇത് മൂന്ന് വിധത്തിൽ എഴുതിക്കൊടുക്കുവാൻ സാധിക്കും. ഈ മൂന്നു വിധത്തിൽ എഴുതിക്കൊടുക്കുന്ന സ്റ്റൈൽ നിയമങ്ങളും മുൻഗണനാക്രമത്തിലാണ് പ്രയോഗിക്കപ്പെടുന്നത്, പ്രയോഗിക്കപ്പെടുന്ന അതേ ക്രമത്തിൽ തന്നെയാണ് താഴെ കൊടുത്തിരിക്കുന്നത്

  1. ഇൻലൈൻ സ്റ്റൈലുകൾ (inline styles) ,എച്.ടി.എം.എൽ ഘടകങ്ങളുടെ ടാഗുകൾക്കുള്ളിൽ തന്നെ സ്റ്റൈൽ നിയമങ്ങൾ എഴുതിക്കൊടുക്കുന്ന രീതിയാണിത്
  2. ഇന്റേർണൽ സ്റ്റൈലുകൾ അഥവാ എംബഡഡ് സ്റ്റൈലുകൾ (internal or embedded styles), എച്.ടി.എം.എൽ താളിന്റെ ഹെഡ് ടാഗിന്റെ (<head> - - - </head>) ഉള്ളിൽ സ്റ്റൈൽ നിയമങ്ങൾ എഴുതുന്ന രീതി
  3. എക്സ്‌‌റ്റേർണൽ സ്റ്റൈൽ ഷീറ്റുകൾ (external style sheets), അതായത് സി.എസ്.എസിനു വേണ്ടി ഒരു പ്രത്യേക ഫയൽ തന്നെ

ഇൻലൈൻ സ്റ്റൈലുകൾ ഉണ്ടെങ്കിൽ അത്, ഇല്ലെങ്കിൽ ഇന്റേർണൽ സ്റ്റൈലുകൾ, അതുമില്ലെങ്കിൽ എക്സ്‌റ്റേർണൽ സ്റ്റൈലുകൾ എന്നീ ക്രമത്തിലാണ് താളുകളിൽ ഓതർ സ്റ്റൈലുകൾ പ്രയോഗിക്കപ്പെടുക

യൂസർ സ്റ്റൈലുകൾ

ഉപയോക്താവിന്റെ നിർദ്ദേശപ്രകാരമുള്ള ഒരു സി.എസ്.എസ് ഫയൽ ഉപയോഗിച്ച് പ്രദർശന ക്രമീകരണങ്ങൾ നടത്തുക. യൂസർ ഏജന്റിൽ (സാധാരണ ഗതിയിൽ ഇതൊരു വെബ് ബ്രൗസർ ആയിരിക്കും) ഇങ്ങനെ ഒരു സി.എസ്.എസ് തിരഞ്ഞെടുക്കുവാനുള്ള സൗകര്യം ഉണ്ടെങ്കിൽ മാത്രമേ ഇത് സാധ്യമാകൂ. സ്വതവേ യൂസർ സ്റ്റൈലുകൾ ഓതർ സ്റ്റൈലുകൾ ഇല്ലെങ്കിൽ മാത്രമേ പ്രയോഗിക്കപ്പെടുകയുള്ളു, പക്ഷെ ഈ നിയമത്തെ മറികടന്ന്, ഓതർ സ്റ്റൈലുകൾക്ക് പകരം യൂസർ സ്റ്റൈലുകൾ ഉപയോഗിച്ച് എച്.ടി.എം.എൽ താളുകൾ പ്രദർശിപ്പിക്കുവാനുള്ള സൗകര്യം പുതിയ ബ്രൗസറുകളിൽ ഉണ്ട്. [2]

യൂസർ ഏജന്റ് സ്റ്റൈലുകൾ

മറ്റ് സ്റ്റൈൽ ഷീറ്റുകളൊന്നും പ്രയോഗത്തിലില്ലെങ്കിൽ യൂസർ ഏജന്റിന്റെ അതായത് വെബ് ബ്രൗസറിൽ സ്വതവേ ഉള്ള സ്റ്റൈൽ നിയമങ്ങൾ ഉപയോഗിച്ച് എച്.ടി.എം.എൽ താൾ. പ്രദർശിപ്പിക്കും


പുറമെ നിന്നുള്ള കണ്ണികൾ

അവലംബം

  1. ↑ 1.0 1.1 "സി.എസ്.എസ് ക്ലാസ്, ഐഡി സെലക്‌ടറുകൾ" (in ഇംഗ്ലീഷ്). ഡബ്ല്യു3സ്‌കൂൾസ്.കോമിൽ നിന്നും. Retrieved 24-11-2009. {{cite web}}: Check date values in: |accessdate= (help)CS1 maint: unrecognized language (link)
  2. ↑ "Using CSS as a Diagnostic Tool" (in ഇംഗ്ലീഷ്). സി.എസ്.എസ് ഡിസ്‌കസ് വിക്കി. Retrieved 30-11-2009. {{cite web}}: Check date values in: |accessdate= (help)CS1 maint: unrecognized language (link)

വിവരസാങ്കേതികവിദ്യയുമായി ബന്ധപ്പെട്ട ഈ ലേഖനം അപൂർണ്ണമാണ്‌. ഇതു പൂർത്തിയാക്കാൻ സഹായിക്കുക. 

"https://ml.wikipedia.org/w/index.php?title=കാസ്‌കേഡിങ്ങ്_സ്റ്റൈൽ_ഷീറ്റ്‌സ്&oldid=654532" എന്ന താളിൽനിന്ന് ശേഖരിച്ചത്