സി.എസ്.എസ് വസ്തു നിർവ്വചനം

ഒരു വെബ്സൈറ്റിന്റെ ദൃശ്യ ശൈലി, ലേഔട്ട് എന്നിവ CSS അല്ലെങ്കിൽ കാസ്കേഡിംഗ് ശൈലി ഷീറ്റുകൾക്ക് വിധേയമാണ്. ഈ മാർക്കപ്പിൽ നിന്ന് ലഭിക്കുന്ന പേജുകൾ എങ്ങനെ പ്രദർശിപ്പിക്കാമെന്നതിനെക്കുറിച്ചുള്ള നിർദ്ദേശങ്ങളടങ്ങിയ വെബ്പേജുകളുടെ HTML മാർക്ക്അപ്പ് രൂപകൽപ്പന ചെയ്യുന്ന പ്രമാണങ്ങളാണ് ഇവ. ഒരു പേജ് ലേഔട്ടിനെ CSS, അതുപോലെ നിറം, പശ്ചാത്തല ഇമേജുകൾ, ടൈപ്പോഗ്രാഫി തുടങ്ങിയവ കൈകാര്യം ചെയ്യുന്നു.

നിങ്ങൾ ഒരു CSS ഫയൽ നോക്കിയാൽ, ഏതെങ്കിലും മാർക്ക്അപ്പ് അല്ലെങ്കിൽ കോഡിങ് ഭാഷ പോലെ, ഈ ഫയലുകൾക്ക് ഒരു പ്രത്യേക സിന്റാക്സ് ഉണ്ട്. ഓരോ ശൈലി ഷീറ്റും നിരവധി സിഎസ്എസ് നിയമങ്ങളാൽ നിർമ്മിച്ചിരിക്കയാണ്. ഈ ചട്ടങ്ങൾ പൂർണ്ണമായി ഏറ്റെടുക്കുമ്പോൾ സൈറ്റിന്റെ ശൈലിയാണ്.

ഒരു CSS റൂളിന്റെ ഭാഗങ്ങൾ

സെലർ ബോർഡ് രണ്ട് വ്യത്യസ്ത ഭാഗങ്ങളാൽ നിർമ്മിച്ചിരിക്കുന്നത് - സെലക്ടർ, പ്രഖ്യാപനം. ഒരു പേജിൽ സ്റ്റൈലാക്കപ്പെടുന്നത് എന്തൊക്കെയാണെന്ന് സെലക്ടർ നിർണ്ണയിക്കുന്നു, അത് എങ്ങനെയാണ് രൂപകൽപ്പന ചെയ്യേണ്ടത് എന്ന് വ്യക്തമാക്കുന്നു. ഉദാഹരണത്തിന്:

p {
നിറം: # 000;
}

ഇത് ഒരു CSS ഭരണം ആണ്. സെലക്ടർ ഭാഗമാണ് "p", "ഖണ്ഡികകൾ" എന്നതിന് ഒരു ഘടക സെലക്ടർ ആണ്. അതിനാൽ, ഒരു സൈറ്റിൽ എല്ലാ ഖണ്ഡികകളും തിരഞ്ഞെടുത്ത് ഈ സ്റ്റൈൽ നൽകണം (നിങ്ങളുടെ CSS പ്രമാണത്തിൽ മറ്റെവിടെയെങ്കിലും കൂടുതൽ പ്രത്യേക ശൈലികൾ ലക്ഷ്യമിടുന്ന ഖണ്ഡികകൾ ഇല്ലെങ്കിൽ).

"നിറം: # 000;" എന്ന് പറയുന്ന ഭവനത്തിന്റെ ഭാഗം പ്രഖ്യാപനം എന്ന് അറിയപ്പെടുന്നു. വസ്തുവും മൂല്യവും - രണ്ടു കഷണങ്ങൾ കൊണ്ടാണ് ആ പ്രഖ്യാപനം നിർമ്മിച്ചിരിക്കുന്നത്.

ഈ പ്രഖ്യാപനത്തിന്റെ സ്വഭാവം "നിറം" ആണ്. ഏത് സെലക്ടറിൻറെ ഏത് വീക്ഷണമാണ് ദൃശ്യമാക്കുന്നത് എന്നതിനെ ഇത് നിർദ്ദേശിക്കുന്നു.

മൂല്യം എന്നത് തിരഞ്ഞെടുത്ത CSS പ്രോപ്പർട്ടിയിലേക്ക് മാറ്റും. ഉദാഹരണത്തിന് നമ്മൾ "black" എന്നതിനായുള്ള CSS ഷോർട്ട് ഹാൻഡ് ആയ # ന്റെ hex മൂല്യം ഉപയോഗിക്കുന്നു.

ഈ സിഎസ്എസ് ഭരണം ഉപയോഗിച്ചുകൊണ്ട് നമ്മുടെ പേജിന് കറുത്ത ഫോണ്ട് വർണ്ണത്തിൽ കാണിക്കുന്ന ഖണ്ഡികകൾ ഉണ്ടായിരിക്കും.

CSS പ്രോപ്പർട്ടി അടിസ്ഥാനങ്ങൾ

നിങ്ങൾ CSS പ്രോപ്പർട്ടികൾ എഴുതുമ്പോൾ, നിങ്ങൾക്ക് അനുയോജ്യമായതായി കാണുന്നതുപോലെ നിങ്ങൾക്ക് അവ ഉണ്ടാക്കാൻ കഴിയില്ല. ഉദാഹരണത്തിന്, "വർണ്ണം" ഒരു യഥാർത്ഥ CSS വസ്തുവാണ്, അതിനാൽ നിങ്ങൾക്ക് അത് ഉപയോഗിക്കാൻ കഴിയും. ഒരു വസ്തുവിന്റെ വാചക വർണ്ണത്തെ നിർണ്ണയിക്കുന്നതാണ് ഈ വസ്തു. നിങ്ങൾ CSS വസ്തുക്കളായി "ടെക്സ്റ്റ് വർണം" അല്ലെങ്കിൽ "font-color" ഉപയോഗിക്കാൻ ശ്രമിച്ചെങ്കിൽ, അവർ സി.എ.എസ് ഭാഷയുടെ യഥാർത്ഥ ഭാഗങ്ങളല്ലെന്നിരിക്കെ, ഇത് പരാജയപ്പെടും.

മറ്റൊരു ഉദാഹരണമാണ് "background-image". ഈ വസ്തു ഒരു പശ്ചാത്തലത്തിനായി ഉപയോഗിക്കാവുന്ന ഒരു ഇമേജ് സജ്ജീകരിക്കുന്നു, ഇതുപോലുള്ളവ:

.ലോഗോ {
പശ്ചാത്തല-ഇമേജ്: url (/images/company-logo.png);
}

നിങ്ങൾ "പശ്ചാത്തല-ചിത്രം" അല്ലെങ്കിൽ "പശ്ചാത്തല-ഗ്രാഫിക്" ഒരു വസ്തുവായി ഉപയോഗിക്കാൻ ശ്രമിച്ചെങ്കിൽ, അവർ പരാജയപ്പെടും കാരണം, ഒരിക്കൽ കൂടി, ഇവ യഥാർത്ഥ CSS പ്രോപ്പർട്ടികൾ അല്ല.

ചില CSS പ്രോപ്പർട്ടികൾ

നിങ്ങൾക്ക് ഒരു സൈറ്റിന്റെ ശൈലിയിൽ ഉപയോഗിക്കാനാവുന്ന ധാരാളം സിഎസ്എസ് പ്രോപ്പർട്ടികൾ ഉണ്ട്. ചില ഉദാഹരണങ്ങൾ:

• ബോർഡർ (ബോർഡർ ശൈലി, ബോർഡർ വർണം, ബോർഡർ വീതി ഉൾപ്പെടെ)
• പാഡിംഗ് (പാഡിംഗ്-ടോപ്പ്, പാഡിംഗ്-വലത്, പാഡിംഗ്-അടിംഗ്, പാഡിംഗ്-ഇടതുമടക്കം)
• മാർജിനുകൾ (മാർജിൻ-ടോപ്പ്, മാർജിൻ-വലത്, മാർജിൻ-അടിസ്റ്റ്, മാർജിൻ-ഇടതുമടക്കം)
• ഫോണ്ട്-കുടുംബം
• അക്ഷര വലിപ്പം
• പശ്ചാത്തല നിറം
• വീതി
• ഉയരം

ഈ സിഎസ്എസ് പ്രോപ്പർട്ടികൾ നിങ്ങൾക്ക് ഉദാഹരണങ്ങൾ പോലെ ഉപയോഗിക്കാം, കാരണം അവ വളരെ ലളിതമാണ്, നിങ്ങൾക്ക് സിഎസ്സി അറിയില്ലെങ്കിലും, അവരുടെ പേരുകൾ അടിസ്ഥാനമാക്കി നിങ്ങൾക്ക് എന്തുചെയ്യാം എന്ന് ഊഹിക്കാം.

നിങ്ങൾ നേരിട്ട മറ്റ് CSS വസ്തുക്കളും ഉണ്ട്, അവരുടെ പേരുകൾ അടിസ്ഥാനമാക്കി അവർ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നത് വ്യക്തമല്ല.

• ഫ്ലോട്ട്
• തെളിഞ്ഞത്
• ഓവർഫ്ലോ
• ടെക്സ്റ്റ് പരിവർത്തനം
• Z- സൂചിക

നിങ്ങൾക്ക് വെബ് ഡിസൈനിൽ കൂടുതൽ ആഴത്തിൽ പ്രവേശിക്കുന്തോറും നിങ്ങൾ ഈ സ്വത്തുക്കളും മറ്റും കണ്ടുമുട്ടുമ്പോൾ (കൂടുതൽ ഉപയോഗിക്കാം).

പ്രോപ്പർട്ടികൾ മൂല്യങ്ങൾക്ക് ആവശ്യമാണ്

ഓരോ പ്രാവശ്യവും നിങ്ങൾ ഒരു വസ്തു ഉപയോഗിക്കുകയാണെങ്കിൽ, അത് ഒരു മൂല്യം നൽകണം - ചില പ്രോപ്പർട്ടികൾക്ക് ചില മൂല്യങ്ങൾ മാത്രം സ്വീകരിക്കാൻ കഴിയും.

"നിറം" പ്രോപ്പർട്ടി ഞങ്ങളുടെ ആദ്യത്തെ ഉദാഹരണത്തിൽ നമ്മൾ വർണ്ണ മൂല്യം ഉപയോഗിക്കേണ്ടതുണ്ട്. ഇത് ഒരു ഹെക്സ് മൂല്യം , RGBA മൂല്യം, അല്ലെങ്കിൽ കളർ കീവേഡുകളാകാം . ഈ മൂല്യങ്ങളുള്ള "വിലപേശി" എന്ന വാക്ക് ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ ആ മൂല്യങ്ങൾ ഒന്നും തന്നെ പ്രവർത്തിക്കില്ല, കാരണം അത് ഒന്നും ചെയ്യാൻ കഴിയില്ല കാരണം, ആ പദത്തിന്റെ വിവരണമാകാം, അത് CSS- ൽ അംഗീകൃത മൂല്യമല്ല.

"Background-image" ന്റെ രണ്ടാമത്തെ ഉദാഹരണം നിങ്ങളുടെ സൈറ്റിന്റെ ഫയലുകളിൽ നിന്നും ഒരു യഥാർത്ഥ ഇമേജ് നേടുന്നതിന് ഇമേജ് പാത്ത് ഉപയോഗിക്കുവാൻ ആവശ്യമാണ്. ഇത് ആവശ്യമുള്ള മൂല്യവും സിന്റാക്സും ആണ്.

എല്ലാ CSS പ്രോപ്പർട്ടികളിലും അവർ പ്രതീക്ഷിക്കുന്ന മൂല്യങ്ങൾ ഉണ്ട്. ഉദാഹരണത്തിന്:

• ബോർഡർ-വർണ്ണം നിറത്തിൻറെ മൂല്യം പ്രതീക്ഷിക്കുന്നു
• പിക്സൽ വലുപ്പം പിക്സലുകൾ അല്ലെങ്കിൽ ശതമാനങ്ങൾ പോലെയുള്ള വലുപ്പത്തിലുള്ള വലുപ്പം പ്രതീക്ഷിക്കുന്നു
• "സോളിഡ്" പോലെയുള്ള ഈ പ്രോപ്പർട്ടിയ്ക്കായി ഉപയോഗിക്കുന്ന കരുതിവച്ച ശൈലികളിൽ ഒന്നാണ് ബോർഡർ ശൈലികൾ,

നിങ്ങൾ CSS പ്രോപ്പർട്ടികൾ ലിസ്റ്റുചെയ്തിട്ടുണ്ടെങ്കിൽ, അവയിൽ ഓരോന്നും പ്രത്യേക മൂല്യങ്ങളുണ്ടെന്ന് അവർ കണ്ടെത്തും, അവർ അവ ഉദ്ദേശിച്ചിട്ടുള്ള ശൈലികൾ സൃഷ്ടിക്കാൻ ഉപയോഗിക്കും.

എഡിറ്റുചെയ്ത ജെറിമി ഗിർാർഡ്