മാതൃക ശൈലി ഷീറ്റിനൊപ്പം കാസ്കേഡിംഗ് ശൈലി ഷീറ്റുകളുടെ ഒരു അവലോകനം
സ്ക്രാച്ചിൽ നിന്ന് ഒരു വെബ്സൈറ്റ് നിർമ്മിക്കുമ്പോൾ, നിർവചിച്ചിരിക്കുന്ന അടിസ്ഥാന ശൈലികൾ ഉപയോഗിച്ച് ആരംഭിക്കാൻ അത് ശക്തിയുള്ളതാണ്. ശുദ്ധമായ ക്യാൻവാസും പുതിയ ബ്രഷുകളും തുടങ്ങുന്നതുപോലെ ഇത് പോലെയാണ്. വെബ് ഡിസൈനർമാർ നേരിടുന്ന ആദ്യ പ്രശ്നങ്ങളിലൊന്ന് വെബ് ബ്രൗസറുകളെല്ലാം വ്യത്യസ്തമാണ്. പ്ലാറ്റ്ഫോമിൽ നിന്ന് പ്ലാറ്റ്ഫോമിന് സ്ഥിരസ്ഥിതി ഫോണ്ട് സൈസ് വ്യത്യസ്തമാണ്, സഹജമായ ഫോണ്ട് കുടുംബം വ്യത്യസ്തമാണ്, ചില ബ്രൌസറുകൾ ബോഡി ടാഗിൽ മാർജിനുകളും പാഡിംഗും നിർവ്വചിക്കുന്നു, മറ്റുള്ളവർ അങ്ങനെ അല്ല. നിങ്ങളുടെ വെബ് പേജുകൾക്കായുള്ള സ്ഥിര ശൈലികൾ വ്യക്തമാക്കുന്നതിലൂടെ ഈ പൊരുത്തക്കേടുകൾക്ക് ചുറ്റും നേടുക.
CSS, ക്യാരക്ടർ സെറ്റ് എന്നിവ
ആദ്യം, നിങ്ങളുടെ CSS പ്രമാണങ്ങളുടെ പ്രതീക ഗണം utf-8 ലേക്ക് സജ്ജമാക്കുക. നിങ്ങൾ രൂപകൽപ്പന ചെയ്യുന്ന മിക്ക പേജുകളും ഇംഗ്ലീഷിൽ എഴുതിയിട്ടുണ്ടാകാം, ചിലപ്പോൾ ഭാഷാ-സംസ്ക്കാരവും സാംസ്കാരികവുമായ പശ്ചാത്തലത്തിൽ പ്രാദേശികവത്ക്കരിക്കപ്പെടുകയും ചെയ്യാം. അവർ എപ്പോഴാണ്, utf-8 പ്രക്രിയ ലളിതമാക്കുന്നു. ബാഹ്യ ശൈലി ഷീറ്റിൽ സജ്ജമാക്കിയ പ്രതീകം ഒരു HTTP ശീർഷകത്തിന് മുൻഗണന നൽകില്ല, എന്നാൽ മറ്റ് എല്ലാ സാഹചര്യങ്ങളിലും ഇത് മാറുന്നു.
പ്രതീക ഗണം സജ്ജമാക്കാൻ എളുപ്പമാണ്. സി.എസ്.എസ് പ്രമാണത്തിന്റെ ആദ്യ വരി എഴുതുക:
@charset "utf-8";ഈ രീതിയിൽ നിങ്ങൾ ഉള്ളടക്ക പ്രോപ്പർട്ടികളിൽ അല്ലെങ്കിൽ ക്ലാസ്, ഐഡി പേരുകളിൽ അന്തർദ്ദേശീയ പ്രതീകങ്ങൾ ഉപയോഗിക്കുകയാണെങ്കിൽ സ്റ്റൈൽഷീറ്റ് ശരിയായി പ്രവർത്തിക്കും.
പേജ് ബോഡി രൂപപ്പെടുത്തുക
അടുത്തത് ഒരു ഡിഫോൾട്ട് ശൈലി ഷീറ്റിന്റെ ആവശ്യകതയാണ്, അത് മാർജിനുകൾ, പാഡിംഗ്, ബോർഡറുകൾ എന്നിവയിലേക്ക് നീങ്ങുന്നു. എല്ലാ ബ്രൌസറുകളും ഒരേ സ്ഥലത്ത് ഉള്ളടക്കം സ്ഥാപിക്കുന്നുവെന്ന് ഉറപ്പുവരുത്തുന്നു, കൂടാതെ ബ്രൌസറിനും ഉള്ളടക്കം തമ്മിലുള്ള യാതൊരു മറച്ച സ്പേസുകളില്ല. മിക്ക വെബ് പേജുകൾക്കും, ഇത് ടെക്സ്റ്റിന് വളരെയടുത്ത് വളരെ അടുത്തിരിക്കുന്നു, എന്നാൽ അവിടെ ആരംഭിക്കേണ്ടത് പ്രധാനമാണ്, അതിലൂടെ പശ്ചാത്തല ഇമേജുകളും ലേഔട്ട് ഡിവിഷനുകളും ശരിയായി ഘടിപ്പിച്ചിട്ടുണ്ട്.
html, body {margin: 0px; പാഡിംഗ്: 0px; അതിർത്തി: 0px; }ഡിഫാൾ ഫോർഗ്രൌണ്ട് അല്ലെങ്കിൽ ഫോണ്ട് കളർ കറുപ്പിനും സ്വതവേയുള്ള പശ്ചാത്തല നിറം വെളുപ്പിനും സജ്ജമാക്കുക. ഇത് മിക്കവാറും മിക്ക വെബ്പേജ് ഡിസൈനുകളിലേയ്ക്കും മാറിയേക്കാം, ഈ സ്റ്റാൻഡേർഡ് നിറങ്ങൾ ശരീരത്തിൽ സജ്ജമാക്കി, ആദ്യം HTML ടാഗും വായിക്കാൻ എളുപ്പവുമാണ്.
html, body {color: # 000; പശ്ചാത്തലം: # ff; }സ്ഥിര ഫോണ്ട് സ്റ്റൈലുകൾ
ഫോണ്ട് വലുപ്പവും ഫോണ്ട് കുടുംബവും ഡിസൈൻ എടുക്കുമ്പോഴുള്ള അനിവാര്യമായും മാറ്റം വരുത്താനാവും, പക്ഷേ 1 അക്ഷരത്തിന്റെ സഹജമായ ഫോണ്ട് സൈസ്, ഏരിയ, ജിനീവ, അല്ലെങ്കിൽ മറ്റു സാൻസ് സെരിഫ് ഫോണ്ട് എന്നിവയുടെ സഹജമായ ഫോണ്ട് കുടുംബത്തോടൊപ്പം തുടങ്ങുക. പേജ് എമ്മിന്റെ ഉപയോഗം കഴിയുന്നത്രയും ലഭ്യമാക്കും, ഒപ്പം ഒരു സാൻസ്-സെരിഫ് ഫോണ്ട് സ്ക്രീനിൽ കൂടുതൽ സ്പഷ്ടമാണ്.
html, body, p, th, td, li, dd, dt {font: 1em Arial, ഹെൽവെറ്റിക്ക, sans-serif; }നിങ്ങൾ വാചകം കണ്ടെത്താവുന്ന മറ്റു സ്ഥലങ്ങൾ ഉണ്ടായിരിക്കാം, എന്നാൽ p , th , td , li , dd , dt തുടങ്ങിയവ അടിവരയാണു് അടിവരം ഫോണ്ട് നിർവ്വചിക്കുന്നത്. HTML- ഉം ശരീരവും ഉൾക്കൊള്ളിക്കുക , പക്ഷേ HTML അല്ലെങ്കിൽ ബോഡിക്ക് നിങ്ങളുടെ ഫോണ്ടുകൾ മാത്രം നിർവചിക്കുകയാണെങ്കിൽ പല ബ്രൗസറുകളും ഫോണ്ട് ചോയ്സുകളെ അസാധുവാക്കുന്നു.
പ്രധാന വാർത്തകൾ
നിങ്ങളുടെ സൈറ്റിന്റെ രൂപരേഖ തയ്യാറാക്കുന്നതിന് HTML ശീർഷകം പ്രധാനമാണ്, തിരയൽ എഞ്ചിനുകൾ നിങ്ങളുടെ സൈറ്റിൽ കൂടുതൽ ആഴ്ത്തിക്കളയട്ടെ. ശൈലികൾ ഇല്ലാതെ, അവ എല്ലാം തികച്ചും വൃത്തികെട്ടവയാണ്, അതിനാൽ അവയെല്ലാം സ്ഥിരസ്ഥിതി ശൈലികൾ സജ്ജമാക്കുകയും ഫോണ്ട് കുടുംബവും ഫോണ്ട് വലുപ്പങ്ങളും ഓരോന്നും നിർവചിക്കുകയും ചെയ്യുക.
h1, h2, h3, h4, h5, h6 {font-family: Arial, ഹെൽവെറ്റിക്ക, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }ലിങ്കുകൾ മറക്കുക
ലിങ്ക് നിറങ്ങൾ സ്റൈൽ എപ്പോഴും ഡിസൈൻ ഒരു നിർണായക ഭാഗമാണ്, എന്നാൽ നിങ്ങൾ സ്ഥിരസ്ഥിതി ശൈലികൾ അവരെ നിർവചിക്കുന്നില്ലെങ്കിൽ, നിങ്ങൾ കുറഞ്ഞത് ഒരു കപട ക്ലാസുകളും എങ്കിലും മറന്നു കാണാം. നീല നിറത്തിൽ കുറച്ച് ചെറിയ വ്യതിയാനങ്ങളുമായി അവയെ നിർവചിക്കുക, നിർവചിച്ചിരിക്കുന്ന സൈറ്റിനായി വർണ്ണ പാലറ്റ് ഉണ്ടെങ്കിൽ അവ പിന്നീട് മാറ്റുക.
നീല നിറങ്ങൾ, ലിങ്കുകൾ എന്നിവ സജ്ജമാക്കാൻ:
- നീല പോലെ ലിങ്കുകൾ
- കണ്ണുകൾ കറുത്തതായി കാണുന്നു
- ഇളം നീല ആയി ലിങ്കുകൾ ഹോവർ ചെയ്യുക
- സജീവ കണ്ണടകളും നീല നിറമുള്ളതുപോലെയാണ്
ഈ ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ:
a: ലിങ്ക് {color: # 00f; } a: സന്ദർശിച്ചു {വർണ്ണം: # 009; } a: ഹോവർ {വർണ്ണം: # 06f; } a: സജീവ {നിറം: # 0cf; } തികച്ചും വൈകല്യമുള്ള വർണ സ്കീമുകളുമായുള്ള ലിങ്കുകൾ രൂപപ്പെടുത്തുന്നതിലൂടെ, ഞാൻ ക്ലാസുകളിലൊന്നും മറക്കില്ല, അതോ സ്ഥിരസ്ഥിതി നീല, ചുവപ്പ്, ധൂമ്രനൂൽ എന്നിവയെക്കാൾ അൽപ്പം കുറച്ചുമാത്രമേ ഉറക്കെ വിളിക്കൂ എന്ന് ഉറപ്പുവരുത്തുന്നു.മുഴുവൻ ശൈലി ഷീറ്റ്
ഇവിടെ മുഴുവൻ സ്റ്റൈൽ ഷീറ്റാണ്:
@charset "utf-8"; html, body {margin: 0px; പാഡിംഗ്: 0px; അതിർത്തി: 0px; നിറം: # 000; പശ്ചാത്തലം: # ff; } html, body, p, th, td, li, dd, dt {font: 1em Arial, ഹെൽവെറ്റിക്ക, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: ലിങ്ക് {color: # 00f; } a: സന്ദർശിച്ചു {വർണ്ണം: # 009; } a: ഹോവർ {വർണ്ണം: # 06f; } a: സജീവ {നിറം: # 0cf; }