"കാസ്‌കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ്‌സ്" എന്ന താളിന്റെ പതിപ്പുകൾ തമ്മിലുള്ള വ്യത്യാസം
++ |
++ |
||
| വരി 10: | വരി 10: | ||
}} |
}} |
||
[[മാര്‍ക്കപ്പ് ഭാഷ|മാര്‍ക്കപ്പ് ഭാഷകള്‍]] ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്ന പ്രമാണങ്ങള്‍ എങ്ങനെ പ്രദര്‍ശിപ്പിക്കണമെന്ന് പറഞ്ഞുകൊടുക്കാന്‍ ഉപയോഗിക്കുന്ന ഒരു സ്റ്റൈല്‍ഷീറ്റ് ഭാഷയാണ് '''കാസ്‌കേഡിങ്ങ് സ്റ്റൈല്‍ ഷീറ്റ്''' <small>(Cascading Style Sheets)</small> അഥവാ സി.എസ്.എസ് <small>(CSS)</small>. സാധാരണ ഗതിയില്‍ [[എച്.റ്റി.എം.എല്‍.]] പിന്നെ [[എക്സ്.എച്.റ്റി.എം.എല്‍.]] എന്നീ മാര്‍ക്കപ്പ് ഭാഷകള്‍ ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്ന പ്രമാണങ്ങളുടെ പ്രദര്‍ശനം നിയന്ത്രിക്കുവാനും ദൃശ്യഭംഗി വര്‍ദ്ധിപ്പിക്കുവാനും മറ്റും സി.എസ്.എസ് ഉപയോഗിക്കുന്നു, പക്ഷെ ഈ സ്റ്റൈല്‍ഷീറ്റ് ഭാഷ ഏത് തരത്തിലുമുള്ള [[എക്സ്.എം.എല്‍]] പ്രമാണങ്ങളിലും, [[എസ്.വി.ജി.]] പിന്നെ [[എക്സ്.യു.എല്‍.]] ഉള്‍പ്പടെ, ഉപയോഗിക്കുവാന്‍ സാധിക്കുന്നു. |
[[മാര്‍ക്കപ്പ് ഭാഷ|മാര്‍ക്കപ്പ് ഭാഷകള്‍]] ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്ന പ്രമാണങ്ങള്‍ എങ്ങനെ പ്രദര്‍ശിപ്പിക്കണമെന്ന് പറഞ്ഞുകൊടുക്കാന്‍ ഉപയോഗിക്കുന്ന ഒരു സ്റ്റൈല്‍ഷീറ്റ് ഭാഷയാണ് '''കാസ്‌കേഡിങ്ങ് സ്റ്റൈല്‍ ഷീറ്റ്''' <small>(Cascading Style Sheets)</small> അഥവാ '''സി.എസ്.എസ്''' <small>(CSS)</small>. സാധാരണ ഗതിയില്‍ [[എച്.റ്റി.എം.എല്‍.]] പിന്നെ [[എക്സ്.എച്.റ്റി.എം.എല്‍.]] എന്നീ മാര്‍ക്കപ്പ് ഭാഷകള്‍ ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്ന പ്രമാണങ്ങളുടെ പ്രദര്‍ശനം നിയന്ത്രിക്കുവാനും ദൃശ്യഭംഗി വര്‍ദ്ധിപ്പിക്കുവാനും മറ്റും സി.എസ്.എസ് ഉപയോഗിക്കുന്നു, പക്ഷെ ഈ സ്റ്റൈല്‍ഷീറ്റ് ഭാഷ ഏത് തരത്തിലുമുള്ള [[എക്സ്.എം.എല്‍]] പ്രമാണങ്ങളിലും, [[എസ്.വി.ജി.]] പിന്നെ [[എക്സ്.യു.എല്‍.]] ഉള്‍പ്പടെ, ഉപയോഗിക്കുവാന്‍ സാധിക്കുന്നു. |
||
ഒരു ഉദാഹരണത്തിന് , ഒരു എച്.റ്റി.എം.എല്‍ പ്രമാണത്തിന്റെ പശ്ചാത്തലത്തിന് പച്ചനിറവും അക്ഷരങ്ങള്‍ക്കെല്ലാം വെള്ളനിറവും കൊടുക്കണമെന്നുണ്ടെങ്കില്‍ അത് സി.എസ്.എസ് ഉപയോഗിച്ച് പറഞ്ഞുകൊടുക്കാന്‍ സാധിക്കും. മുന്‍കാലങ്ങളില്‍ എച്.ടി.എം.എല്‍ താളുകളില്‍ ഉള്ളടക്കവും, താള്‍ [[വെബ് ബ്രൗസര്‍|ബ്രൗസറില്‍]] എങ്ങനെ പ്രദര്‍ശിപ്പിക്കണമെന്നുള്ള നിര്‍ദ്ദേശങ്ങളും ഒരുമിച്ചാണ് കൊടുത്തിരുന്നത്. ഓരോ എച്.ടി.എം.എല്‍ ഘടകത്തിന്റേയും പ്രദര്‍ശനക്രമങ്ങള്‍ അതാത് ടാഗിനുള്ളില്‍ വ്യക്തമാക്കേണ്ടി വന്നിരുന്നു, ഉദാഹരണത്തിന് അക്ഷരങ്ങളാണെങ്കില്‍ എത് ഫോണ്ട് ഉപയോഗിക്കണം, ഫോണ്ടുകളുടെ നിറം, വലിപ്പം, താളിന്റെ കാര്യത്തില്‍ പശ്ചാത്തലനിറം, പശ്ചാത്തല ചിത്രം, മറ്റ് എച്ച്.ടി.എം.എല്‍ ഘടകങ്ങളായ റ്റേബിള്‍, സ്പാന്‍ എന്നിവയുടെ കാര്യത്തില്‍ അരികുകള്‍ <small>(border)</small> അടയാളപ്പെടുത്തണോ, വേണമെങ്കില്‍ ഏത് നിറം ഉപയോഗിച്ചുവേണം , എത്ര വീതിയില്‍ വേണം എന്നിങ്ങനെയുള്ള അനേകം ഗുണങ്ങള്‍ അഥവാ പ്രോപ്പര്‍ട്ടികളും അവയുടെ മൂല്യങ്ങളും. ഉള്ളടക്കവും ഇത്തരം പ്രദര്‍ശന നിര്‍ദ്ദേശങ്ങളും എച്.ടി.എം.എല്‍ താളുകളില്‍ ഇടകലര്‍ന്നു കിടക്കുന്നതിനാല്‍ പലതരത്തിലുള്ള ബുദ്ധിമുട്ടുകള്‍ ഉണ്ടാവാം, സി.എസ്.എസിന്റെ വരവോടെ താളിലെ ഉള്ളടക്കവും പ്രദര്‍ശനക്രമീകരണ നിര്‍ദ്ദേശങ്ങളും തമ്മിലുള്ള വേര്‍തിരിവ് സാധ്യമായി. ഇത് പേജ് രൂപകല്പന ചെയ്യുന്നയാള്‍ക്ക് മെച്ചപ്പെട്ട നിയന്ത്രണം നല്‍കുന്നതോടൊപ്പം ആവര്‍ത്തനങ്ങള്‍ ഒഴിവാക്കുവാനും സഹായിക്കുന്നു, ഒന്നില്‍ കൂടുതല്‍ താളുകളില്‍ ഒരേ സി.എസ്.എസ് ഉപയോഗിക്കുന്നതിലൂടെയും മറ്റും. |
ഒരു ഉദാഹരണത്തിന് , ഒരു എച്.റ്റി.എം.എല്‍ പ്രമാണത്തിന്റെ പശ്ചാത്തലത്തിന് പച്ചനിറവും അക്ഷരങ്ങള്‍ക്കെല്ലാം വെള്ളനിറവും കൊടുക്കണമെന്നുണ്ടെങ്കില്‍ അത് സി.എസ്.എസ് ഉപയോഗിച്ച് പറഞ്ഞുകൊടുക്കാന്‍ സാധിക്കും. മുന്‍കാലങ്ങളില്‍ എച്.ടി.എം.എല്‍ താളുകളില്‍ ഉള്ളടക്കവും, താള്‍ [[വെബ് ബ്രൗസര്‍|ബ്രൗസറില്‍]] എങ്ങനെ പ്രദര്‍ശിപ്പിക്കണമെന്നുള്ള നിര്‍ദ്ദേശങ്ങളും ഒരുമിച്ചാണ് കൊടുത്തിരുന്നത്. ഓരോ എച്.ടി.എം.എല്‍ ഘടകത്തിന്റേയും പ്രദര്‍ശനക്രമങ്ങള്‍ അതാത് ടാഗിനുള്ളില്‍ വ്യക്തമാക്കേണ്ടി വന്നിരുന്നു, ഉദാഹരണത്തിന് അക്ഷരങ്ങളാണെങ്കില്‍ എത് ഫോണ്ട് ഉപയോഗിക്കണം, ഫോണ്ടുകളുടെ നിറം, വലിപ്പം, താളിന്റെ കാര്യത്തില്‍ പശ്ചാത്തലനിറം, പശ്ചാത്തല ചിത്രം, മറ്റ് എച്ച്.ടി.എം.എല്‍ ഘടകങ്ങളായ റ്റേബിള്‍, സ്പാന്‍ എന്നിവയുടെ കാര്യത്തില്‍ അരികുകള്‍ <small>(border)</small> അടയാളപ്പെടുത്തണോ, വേണമെങ്കില്‍ ഏത് നിറം ഉപയോഗിച്ചുവേണം , എത്ര വീതിയില്‍ വേണം എന്നിങ്ങനെയുള്ള അനേകം ഗുണങ്ങള്‍ അഥവാ പ്രോപ്പര്‍ട്ടികളും അവയുടെ മൂല്യങ്ങളും. ഉള്ളടക്കവും ഇത്തരം പ്രദര്‍ശന നിര്‍ദ്ദേശങ്ങളും എച്.ടി.എം.എല്‍ താളുകളില്‍ ഇടകലര്‍ന്നു കിടക്കുന്നതിനാല്‍ പലതരത്തിലുള്ള ബുദ്ധിമുട്ടുകള്‍ ഉണ്ടാവാം, സി.എസ്.എസിന്റെ വരവോടെ താളിലെ ഉള്ളടക്കവും പ്രദര്‍ശനക്രമീകരണ നിര്‍ദ്ദേശങ്ങളും തമ്മിലുള്ള വേര്‍തിരിവ് സാധ്യമായി. ഇത് പേജ് രൂപകല്പന ചെയ്യുന്നയാള്‍ക്ക് മെച്ചപ്പെട്ട നിയന്ത്രണം നല്‍കുന്നതോടൊപ്പം ആവര്‍ത്തനങ്ങള്‍ ഒഴിവാക്കുവാനും സഹായിക്കുന്നു, ഒന്നില്‍ കൂടുതല്‍ താളുകളില്‍ ഒരേ സി.എസ്.എസ് ഉപയോഗിക്കുന്നതിലൂടെയും മറ്റും. |
||
| വരി 23: | വരി 23: | ||
[[File:Cssrule.png|100%]] |
[[File:Cssrule.png|100%]] |
||
പ്രദര്‍ശനക്രമം പറഞ്ഞു കൊടുക്കേണ്ട എച്.ടി.എം.എല്‍ ഘടകത്തിനാണ് സെലക്‌ടര്‍ എന്നു പറയുക. ഡിക്ലറേഷനുകള്‍ വഴിയാണ് സെലക്‌ടറിന്റെ ഗുണഗണങ്ങള്‍ പറയുന്നത്. ഒരു ഡിക്ലറേഷനില്‍ ഒരു ഗുണവും <small>(property)</small> അതിന്റെ മൂല്യവുമുണ്ടാകും <small>(value)</small>. മുകളില്‍ കൊടുത്തിരിക്കുന്ന ഉദാഹരണചിത്രത്തില്‍ , ഖണ്ഡികകളെ നിര്‍വചിക്കുവാന്‍ ഉപയോഗിക്കുന്ന '''p''' ടാഗിനു വേണ്ടിയുള്ള സി.എസ്.എസ് സ്റ്റൈല്‍ റൂളാണ് കാണുന്നത്. അക്ഷരങ്ങളുടെ ഫോണ്ട് ഏരിയല്‍ ആയിരിക്കണം, വലിപ്പം 25 പിക്സ്‌ല്‍ വേണം, നിറം പച്ച എന്നിങ്ങനെയുള്ള നിര്‍ദ്ദേശങ്ങളാണ് ഇതിലുള്ളത്. |
പ്രദര്‍ശനക്രമം പറഞ്ഞു കൊടുക്കേണ്ട എച്.ടി.എം.എല്‍ ഘടകത്തിനാണ് സെലക്‌ടര്‍ എന്നു പറയുക. ഡിക്ലറേഷനുകള്‍ വഴിയാണ് സെലക്‌ടറിന്റെ ഗുണഗണങ്ങള്‍ പറയുന്നത്. ഒരു ഡിക്ലറേഷനില്‍ ഒരു ഗുണവും <small>(property)</small> അതിന്റെ മൂല്യവുമുണ്ടാകും <small>(value)</small>. മുകളില്‍ കൊടുത്തിരിക്കുന്ന ഉദാഹരണചിത്രത്തില്‍ , എച്.ടി.എം.എല്‍ താളുകളില്‍ ഖണ്ഡികകളെ നിര്‍വചിക്കുവാന്‍ ഉപയോഗിക്കുന്ന < '''<big>p</big>''' > ടാഗിനു വേണ്ടിയുള്ള സി.എസ്.എസ് സ്റ്റൈല്‍ റൂളാണ് കാണുന്നത്. അക്ഷരങ്ങളുടെ ഫോണ്ട് ഏരിയല്‍ ആയിരിക്കണം, വലിപ്പം 25 പിക്സ്‌ല്‍ വേണം, നിറം പച്ച എന്നിങ്ങനെയുള്ള നിര്‍ദ്ദേശങ്ങളാണ് ഇതിലുള്ളത്. |
||
==പുറമെ നിന്നുള്ള കണ്ണികള്‍== |
==പുറമെ നിന്നുള്ള കണ്ണികള്‍== |
||
18:09, 20 നവംബർ 2009-നു നിലവിലുണ്ടായിരുന്ന രൂപം
| പ്രമാണം:CSS.svg | |
| എക്സ്റ്റൻഷൻ | .css |
|---|---|
| ഇന്റർനെറ്റ് മീഡിയ തരം | text/css |
| വികസിപ്പിച്ചത് | വേള്‍ഡ് വൈഡ് വെബ് കണ്‍സോര്‍ഷ്യം |
| ഫോർമാറ്റ് തരം | സ്റ്റൈല്‍ഷീറ്റ് ഭാഷ |
| മാനദണ്ഡങ്ങൾ | Level 1 (Recommendation) Level 2 (Recommendation) Level 2 Revision 1 (Candidate Recommendation) |
മാര്‍ക്കപ്പ് ഭാഷകള്‍ ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്ന പ്രമാണങ്ങള്‍ എങ്ങനെ പ്രദര്‍ശിപ്പിക്കണമെന്ന് പറഞ്ഞുകൊടുക്കാന്‍ ഉപയോഗിക്കുന്ന ഒരു സ്റ്റൈല്‍ഷീറ്റ് ഭാഷയാണ് കാസ്‌കേഡിങ്ങ് സ്റ്റൈല്‍ ഷീറ്റ് (Cascading Style Sheets) അഥവാ സി.എസ്.എസ് (CSS). സാധാരണ ഗതിയില്‍ എച്.റ്റി.എം.എല്‍. പിന്നെ എക്സ്.എച്.റ്റി.എം.എല്‍. എന്നീ മാര്‍ക്കപ്പ് ഭാഷകള്‍ ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്ന പ്രമാണങ്ങളുടെ പ്രദര്‍ശനം നിയന്ത്രിക്കുവാനും ദൃശ്യഭംഗി വര്‍ദ്ധിപ്പിക്കുവാനും മറ്റും സി.എസ്.എസ് ഉപയോഗിക്കുന്നു, പക്ഷെ ഈ സ്റ്റൈല്‍ഷീറ്റ് ഭാഷ ഏത് തരത്തിലുമുള്ള എക്സ്.എം.എല്‍ പ്രമാണങ്ങളിലും, എസ്.വി.ജി. പിന്നെ എക്സ്.യു.എല്‍. ഉള്‍പ്പടെ, ഉപയോഗിക്കുവാന്‍ സാധിക്കുന്നു.
ഒരു ഉദാഹരണത്തിന് , ഒരു എച്.റ്റി.എം.എല്‍ പ്രമാണത്തിന്റെ പശ്ചാത്തലത്തിന് പച്ചനിറവും അക്ഷരങ്ങള്‍ക്കെല്ലാം വെള്ളനിറവും കൊടുക്കണമെന്നുണ്ടെങ്കില്‍ അത് സി.എസ്.എസ് ഉപയോഗിച്ച് പറഞ്ഞുകൊടുക്കാന്‍ സാധിക്കും. മുന്‍കാലങ്ങളില്‍ എച്.ടി.എം.എല്‍ താളുകളില്‍ ഉള്ളടക്കവും, താള്‍ ബ്രൗസറില്‍ എങ്ങനെ പ്രദര്‍ശിപ്പിക്കണമെന്നുള്ള നിര്‍ദ്ദേശങ്ങളും ഒരുമിച്ചാണ് കൊടുത്തിരുന്നത്. ഓരോ എച്.ടി.എം.എല്‍ ഘടകത്തിന്റേയും പ്രദര്‍ശനക്രമങ്ങള്‍ അതാത് ടാഗിനുള്ളില്‍ വ്യക്തമാക്കേണ്ടി വന്നിരുന്നു, ഉദാഹരണത്തിന് അക്ഷരങ്ങളാണെങ്കില്‍ എത് ഫോണ്ട് ഉപയോഗിക്കണം, ഫോണ്ടുകളുടെ നിറം, വലിപ്പം, താളിന്റെ കാര്യത്തില്‍ പശ്ചാത്തലനിറം, പശ്ചാത്തല ചിത്രം, മറ്റ് എച്ച്.ടി.എം.എല്‍ ഘടകങ്ങളായ റ്റേബിള്‍, സ്പാന്‍ എന്നിവയുടെ കാര്യത്തില്‍ അരികുകള്‍ (border) അടയാളപ്പെടുത്തണോ, വേണമെങ്കില്‍ ഏത് നിറം ഉപയോഗിച്ചുവേണം , എത്ര വീതിയില്‍ വേണം എന്നിങ്ങനെയുള്ള അനേകം ഗുണങ്ങള്‍ അഥവാ പ്രോപ്പര്‍ട്ടികളും അവയുടെ മൂല്യങ്ങളും. ഉള്ളടക്കവും ഇത്തരം പ്രദര്‍ശന നിര്‍ദ്ദേശങ്ങളും എച്.ടി.എം.എല്‍ താളുകളില്‍ ഇടകലര്‍ന്നു കിടക്കുന്നതിനാല്‍ പലതരത്തിലുള്ള ബുദ്ധിമുട്ടുകള്‍ ഉണ്ടാവാം, സി.എസ്.എസിന്റെ വരവോടെ താളിലെ ഉള്ളടക്കവും പ്രദര്‍ശനക്രമീകരണ നിര്‍ദ്ദേശങ്ങളും തമ്മിലുള്ള വേര്‍തിരിവ് സാധ്യമായി. ഇത് പേജ് രൂപകല്പന ചെയ്യുന്നയാള്‍ക്ക് മെച്ചപ്പെട്ട നിയന്ത്രണം നല്‍കുന്നതോടൊപ്പം ആവര്‍ത്തനങ്ങള്‍ ഒഴിവാക്കുവാനും സഹായിക്കുന്നു, ഒന്നില്‍ കൂടുതല്‍ താളുകളില്‍ ഒരേ സി.എസ്.എസ് ഉപയോഗിക്കുന്നതിലൂടെയും മറ്റും.
സി.എസ്.എസ് മാനദണ്ഡങ്ങള്‍ വേള്‍ഡ് വൈഡ് വെബ് കണ്‍സോര്‍ഷ്യത്തിന്റെ മേല്‍നോട്ടത്തിലാണ് നിശ്ചയിക്കപ്പെടുന്നത്. ഇന്റര്‍നെറ്റ് മീഡിയാ തരം അഥവാ മൈം തരമായ text/css സി.എസ്.എസ് പ്രമാണങ്ങളില്‍ ഉപയോഗിക്കുവാന്‍ വേണ്ടി മാത്രമായി നീക്കിവച്ചിരിക്കുന്നു.
എഴുത്തു രീതി
വളരെ ലളിതമായ നിയമങ്ങളാണ് സി.എസ്.എസിനുള്ളത്. പ്രദര്‍ശനക്രമീകരണ നിര്‍ദ്ദേശങ്ങള്‍ക്ക് സ്റ്റൈല്‍ റൂള്‍ എന്നാണ് പറയുക. സ്റ്റൈല്‍ ഷീറ്റുകളില്‍ സ്റ്റൈല്‍ റൂളുകളുടെ ഒരു കൂട്ടമാണുണ്ടാവുക. ഒരു സി.എസ്.എസ് സ്റ്റൈല്‍ റൂളിന് രണ്ടു പ്രധാന ഭാഗങ്ങളാണുള്ളത്
- ഒരു സെലക്‌ടര്‍
- ഒന്നോ അധികലധികമോ ഡിക്ലറേഷനുകള്‍
പ്രദര്‍ശനക്രമം പറഞ്ഞു കൊടുക്കേണ്ട എച്.ടി.എം.എല്‍ ഘടകത്തിനാണ് സെലക്‌ടര്‍ എന്നു പറയുക. ഡിക്ലറേഷനുകള്‍ വഴിയാണ് സെലക്‌ടറിന്റെ ഗുണഗണങ്ങള്‍ പറയുന്നത്. ഒരു ഡിക്ലറേഷനില്‍ ഒരു ഗുണവും (property) അതിന്റെ മൂല്യവുമുണ്ടാകും (value). മുകളില്‍ കൊടുത്തിരിക്കുന്ന ഉദാഹരണചിത്രത്തില്‍ , എച്.ടി.എം.എല്‍ താളുകളില്‍ ഖണ്ഡികകളെ നിര്‍വചിക്കുവാന്‍ ഉപയോഗിക്കുന്ന < p > ടാഗിനു വേണ്ടിയുള്ള സി.എസ്.എസ് സ്റ്റൈല്‍ റൂളാണ് കാണുന്നത്. അക്ഷരങ്ങളുടെ ഫോണ്ട് ഏരിയല്‍ ആയിരിക്കണം, വലിപ്പം 25 പിക്സ്‌ല്‍ വേണം, നിറം പച്ച എന്നിങ്ങനെയുള്ള നിര്‍ദ്ദേശങ്ങളാണ് ഇതിലുള്ളത്.
പുറമെ നിന്നുള്ള കണ്ണികള്‍
|
വിവരസാങ്കേതികവിദ്യയുമായി ബന്ധപ്പെട്ട ഈ ലേഖനം അപൂർണ്ണമാണ്‌. ഇതു പൂർത്തിയാക്കാൻ സഹായിക്കുക. |