"കാസ്കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ്സ്" എന്ന താളിന്റെ പതിപ്പുകൾ തമ്മിലുള്ള വ്യത്യാസം
(ചെ.)No edit summary |
++ |
||
വരി 24: | വരി 24: | ||
പ്രദര്ശനക്രമം ബാധകമാകേണ്ട എച്.ടി.എം.എല് ഘടകങ്ങളെ തിരഞ്ഞെടുക്കാനാണ് സെലക്ടര്. ഡിക്ലറേഷനുകള് വഴിയാണ് സെലക്ടറിന്റെ ഗുണഗണങ്ങള് പറയുന്നത്. ഒരു ഡിക്ലറേഷനില് ഒരു ഗുണവും <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> > ടാഗുകള്ക്കകത്തും ഇത് പ്രയോഗിക്കപ്പെടും. |
||
സെലക്ടറുകള് പലവിധമുണ്ട്, മുകളിലത്തെ ചിത്രത്തില് കാണുന്നതുപോലെ ടാഗിന്റെ പേര് പറഞ്ഞു കൊടുത്ത് പ്രദര്ശനക്രമം ബാധകമാകേണ്ട എച്.ടി.എം.എല് ഘടകങ്ങളെ തിരഞ്ഞെടുക്കുന്നത് പലമാര്ഗങ്ങളില് ഒന്നാണ്, ഇതിനെ ടൈപ്പ് സെലക്ടര് എന്നാണ് പറയുക. ഇത് കൂടാതെ ഡിസന്ഡന്റ് സെലക്ടര്, ചൈല്ഡ് സെലക്ടര്, ആട്രിബ്യൂട്ട് സെലക്ടര്, ക്ലാസ് സെലക്ടര്, ഐഡി സെലക്ടര് തുടങ്ങിയവയുണ്ട്. ഇതില് കൂടുതല് ഉപയോഗത്തില് കാണുന്ന രണ്ടെണ്ണമാണ് ഐഡി സെലക്ടറും, ക്ലാസ് സെലക്ടറും. |
|||
===ഐഡി സെലക്ടര്=== |
|||
ഒരു പ്രത്യേക എച്.ടി.എം.എല് ഘടകത്തിന് മാത്രമായി പ്രദര്ശനക്രമം പറഞ്ഞുകൊടുക്കുവാനാണ് ഐഡി സെലക്ടര് ഉപയോഗിക്കുന്നത്. ഏത് എച്.ടി.എം.എല് ഘടകത്തിലാണ് പ്രയോഗിക്കേണ്ടതെന്ന് അതിന്റെ ഐഡി എന്ന ഗുണത്തില് നിന്നാണ് മനസ്സിലാക്കുന്നത്. ഐഡി സെലക്ടറുകള് ഉപയോഗിച്ച് സ്റ്റൈല് റൂളുകള് എഴുതുമ്പോള് # ചിഹ്നം അതിനുശേഷം ഐഡിയുടെ പേര് പിന്നെ <big>{}</big> ആവരണചിഹ്നത്തിനുള്ളിലായി ഡിക്ലറേഷനുകള് എന്ന നിയമം പാലിക്കണം. |
|||
'''<source lang="css"> |
|||
#blueHead |
|||
{ |
|||
font-family:verdana; |
|||
font-size:18px; |
|||
font-weight:bold; |
|||
color:blue; |
|||
} |
|||
</source>''' |
|||
ഏത് എച്.ടി.എം.എല് ഘടകത്തിനാണോ id="blueHead" എന്ന ഗുണമുള്ളത് ആ എച്.ടി.എം.എല് ഘടകത്തിനുള്ളില് മേല്പ്പറഞ്ഞിരിക്കുന്ന സ്റ്റൈല് റൂള് പ്രയോഗിക്കപ്പെടും. ഐഡി ഗുണത്തിന്റെ പ്രത്യേകതയെന്തെന്നു വച്ചാല് അത് അദ്വയമാണ്, ഒരു എച്.ടി.എം.എല് പ്രമാണത്തില് ഒരു ഘടകത്തിന്റെ ഐഡി മറ്റൊന്നിനു കൊടുക്കാന് സാധ്യമല്ല. |
|||
===ക്ലാസ് സെലക്ടര്=== |
|||
ഒന്നില് കൂടുതല് എച്.ടി.എം.എല് ഘടകങ്ങളില് ആവശ്യമനുസരിച്ച് പ്രദര്ശനക്രമങ്ങള് പ്രയോഗിക്കുവാനുള്ള സൗകര്യം ക്ലാസ് സെലക്ടറുകള് വഴി ലഭിക്കുന്നു. ഏതൊക്കെ എച്.ടി.എം.എല് ഘടകങ്ങളിലാണ് പ്രയോഗിക്കേണ്ടതെന്ന് ആ ഘടകങ്ങളുടെ ക്ലാസ് എന്ന ഗുണത്തില് നിന്നാണ് മനസ്സിലാക്കേണ്ടത്. ക്ലാസ് സെലക്ടറുകള് ഉപയോഗിച്ച് സ്റ്റൈല് റൂളുകള് എഴുതുമ്പോള് . ചിഹ്നം അതിനുശേഷം ക്ലാസിന്റെ പേര് പിന്നെ <big>{}</big> ആവരണചിഹ്നത്തിനുള്ളിലായി ഡിക്ലറേഷനുകള് എന്ന നിയമം പാലിക്കണം. ഒന്നില് കൂടുതല് ഘടകങ്ങള്ക്കി ഒരേ ക്ലാസ് ഗുണം കൊടുക്കാം. ഒരേ ക്ലാസ് പേരുള്ള എല്ലാ എച്.ടി.എം.എല് ഘടകങ്ങള്ക്കും ആ ക്ലാസ് സെലക്ടര് ഉപയോഗിച്ചു എഴുതിക്കൊടുത്തിട്ടുള്ള സ്റ്റൈല് റൂളുകള് ബാധകമാവും. |
|||
'''<source lang="css"> |
|||
.normalText |
|||
{ |
|||
font-family:verdana; |
|||
font-size:12px; |
|||
color:black; |
|||
} |
|||
</source>''' |
|||
ഏതൊക്കെ എച്.ടി.എം.എല് ഘടകങ്ങള്ക്കാണോ class="normalText" എന്ന ഗുണമുള്ളത് ആ എച്.ടി.എം.എല് ഘടകങ്ങളില് മേല്പ്പറഞ്ഞിരിക്കുന്ന സ്റ്റൈല് റൂള് പ്രയോഗിക്കപ്പെടും. |
|||
==പുറമെ നിന്നുള്ള കണ്ണികള്== |
==പുറമെ നിന്നുള്ള കണ്ണികള്== |
09:05, 24 നവംബർ 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 സി.എസ്.എസ് പ്രമാണങ്ങളില് ഉപയോഗിക്കുവാന് വേണ്ടി മാത്രമായി നീക്കിവച്ചിരിക്കുന്നു.
എഴുത്തു രീതി
വളരെ ലളിതമായ നിയമങ്ങളാണ് സി.എസ്.എസിനുള്ളത്. പ്രദര്ശനക്രമീകരണ നിര്ദ്ദേശങ്ങള്ക്ക് സ്റ്റൈല് റൂളുകള് (style rules) എന്നാണ് പറയുക. സ്റ്റൈല് ഷീറ്റുകളില് സ്റ്റൈല് റൂളുകളുടെ ഒരു കൂട്ടമാണുണ്ടാവുക. ഒരു സി.എസ്.എസ് സ്റ്റൈല് റൂളിന് രണ്ടു പ്രധാന ഭാഗങ്ങളാണുള്ളത്
- ഒരു സെലക്ടര്
- ഒന്നോ അധികലധികമോ ഡിക്ലറേഷനുകള്
പ്രദര്ശനക്രമം ബാധകമാകേണ്ട എച്.ടി.എം.എല് ഘടകങ്ങളെ തിരഞ്ഞെടുക്കാനാണ് സെലക്ടര്. ഡിക്ലറേഷനുകള് വഴിയാണ് സെലക്ടറിന്റെ ഗുണഗണങ്ങള് പറയുന്നത്. ഒരു ഡിക്ലറേഷനില് ഒരു ഗുണവും (property) അതിന്റെ മൂല്യവുമുണ്ടാകും (value). ഒരു സ്റ്റൈല് റൂളില് ഒന്നില് കൂടുതല് ഡിക്ലറേഷനുകള് കാണും, ഇവ {} ആവരണചിഹ്നത്തിനുള്ളിലായി തമ്മില് അര്ദ്ധവിരാമം ഉപയോഗിച്ച് വേര്തിരിച്ചാണെഴുതുക. മുകളില് കൊടുത്തിരിക്കുന്ന ഉദാഹരണചിത്രത്തില് , എച്.ടി.എം.എല് താളുകളില് ഖണ്ഡികകളെ നിര്വചിക്കുവാന് ഉപയോഗിക്കുന്ന < p > ടാഗിനു വേണ്ടിയുള്ള സി.എസ്.എസ് സ്റ്റൈല് റൂളാണ് കാണുന്നത്. അക്ഷരങ്ങളുടെ ഫോണ്ട് ഏരിയല് ആയിരിക്കണം, വലിപ്പം 25 പിക്സ്ല് വേണം, നിറം പച്ച എന്നിങ്ങനെയുള്ള നിര്ദ്ദേശങ്ങളാണ് ഇതിലുള്ളത്. താളിലുള്ള എല്ലാ ഖണ്ഡികള്ക്കും മേല്പ്പറഞ്ഞ സ്റ്റൈല്റൂള് ബാധകമാണ്, അതായത് എല്ലാ < p > ടാഗുകള്ക്കകത്തും ഇത് പ്രയോഗിക്കപ്പെടും.
സെലക്ടറുകള് പലവിധമുണ്ട്, മുകളിലത്തെ ചിത്രത്തില് കാണുന്നതുപോലെ ടാഗിന്റെ പേര് പറഞ്ഞു കൊടുത്ത് പ്രദര്ശനക്രമം ബാധകമാകേണ്ട എച്.ടി.എം.എല് ഘടകങ്ങളെ തിരഞ്ഞെടുക്കുന്നത് പലമാര്ഗങ്ങളില് ഒന്നാണ്, ഇതിനെ ടൈപ്പ് സെലക്ടര് എന്നാണ് പറയുക. ഇത് കൂടാതെ ഡിസന്ഡന്റ് സെലക്ടര്, ചൈല്ഡ് സെലക്ടര്, ആട്രിബ്യൂട്ട് സെലക്ടര്, ക്ലാസ് സെലക്ടര്, ഐഡി സെലക്ടര് തുടങ്ങിയവയുണ്ട്. ഇതില് കൂടുതല് ഉപയോഗത്തില് കാണുന്ന രണ്ടെണ്ണമാണ് ഐഡി സെലക്ടറും, ക്ലാസ് സെലക്ടറും.
ഐഡി സെലക്ടര്
ഒരു പ്രത്യേക എച്.ടി.എം.എല് ഘടകത്തിന് മാത്രമായി പ്രദര്ശനക്രമം പറഞ്ഞുകൊടുക്കുവാനാണ് ഐഡി സെലക്ടര് ഉപയോഗിക്കുന്നത്. ഏത് എച്.ടി.എം.എല് ഘടകത്തിലാണ് പ്രയോഗിക്കേണ്ടതെന്ന് അതിന്റെ ഐഡി എന്ന ഗുണത്തില് നിന്നാണ് മനസ്സിലാക്കുന്നത്. ഐഡി സെലക്ടറുകള് ഉപയോഗിച്ച് സ്റ്റൈല് റൂളുകള് എഴുതുമ്പോള് # ചിഹ്നം അതിനുശേഷം ഐഡിയുടെ പേര് പിന്നെ {} ആവരണചിഹ്നത്തിനുള്ളിലായി ഡിക്ലറേഷനുകള് എന്ന നിയമം പാലിക്കണം.
#blueHead
{
font-family:verdana;
font-size:18px;
font-weight:bold;
color:blue;
}
ഏത് എച്.ടി.എം.എല് ഘടകത്തിനാണോ id="blueHead" എന്ന ഗുണമുള്ളത് ആ എച്.ടി.എം.എല് ഘടകത്തിനുള്ളില് മേല്പ്പറഞ്ഞിരിക്കുന്ന സ്റ്റൈല് റൂള് പ്രയോഗിക്കപ്പെടും. ഐഡി ഗുണത്തിന്റെ പ്രത്യേകതയെന്തെന്നു വച്ചാല് അത് അദ്വയമാണ്, ഒരു എച്.ടി.എം.എല് പ്രമാണത്തില് ഒരു ഘടകത്തിന്റെ ഐഡി മറ്റൊന്നിനു കൊടുക്കാന് സാധ്യമല്ല.
ക്ലാസ് സെലക്ടര്
ഒന്നില് കൂടുതല് എച്.ടി.എം.എല് ഘടകങ്ങളില് ആവശ്യമനുസരിച്ച് പ്രദര്ശനക്രമങ്ങള് പ്രയോഗിക്കുവാനുള്ള സൗകര്യം ക്ലാസ് സെലക്ടറുകള് വഴി ലഭിക്കുന്നു. ഏതൊക്കെ എച്.ടി.എം.എല് ഘടകങ്ങളിലാണ് പ്രയോഗിക്കേണ്ടതെന്ന് ആ ഘടകങ്ങളുടെ ക്ലാസ് എന്ന ഗുണത്തില് നിന്നാണ് മനസ്സിലാക്കേണ്ടത്. ക്ലാസ് സെലക്ടറുകള് ഉപയോഗിച്ച് സ്റ്റൈല് റൂളുകള് എഴുതുമ്പോള് . ചിഹ്നം അതിനുശേഷം ക്ലാസിന്റെ പേര് പിന്നെ {} ആവരണചിഹ്നത്തിനുള്ളിലായി ഡിക്ലറേഷനുകള് എന്ന നിയമം പാലിക്കണം. ഒന്നില് കൂടുതല് ഘടകങ്ങള്ക്കി ഒരേ ക്ലാസ് ഗുണം കൊടുക്കാം. ഒരേ ക്ലാസ് പേരുള്ള എല്ലാ എച്.ടി.എം.എല് ഘടകങ്ങള്ക്കും ആ ക്ലാസ് സെലക്ടര് ഉപയോഗിച്ചു എഴുതിക്കൊടുത്തിട്ടുള്ള സ്റ്റൈല് റൂളുകള് ബാധകമാവും.
.normalText
{
font-family:verdana;
font-size:12px;
color:black;
}
ഏതൊക്കെ എച്.ടി.എം.എല് ഘടകങ്ങള്ക്കാണോ class="normalText" എന്ന ഗുണമുള്ളത് ആ എച്.ടി.എം.എല് ഘടകങ്ങളില് മേല്പ്പറഞ്ഞിരിക്കുന്ന സ്റ്റൈല് റൂള് പ്രയോഗിക്കപ്പെടും.
പുറമെ നിന്നുള്ള കണ്ണികള്