ഒരു മാസ്റ്റർ സ്റ്റൈൽഷീറ്റിൽ സ്ഥിര ബ്രൗസർ ശൈലി നീക്കം ചെയ്യുന്നത് എങ്ങനെ

ഈ നുറുങ്ങുകൾ ഉപയോഗിച്ച് വസ്തുതകൾ നേടുക

എല്ലാ വെബ് ബ്രൌസറുകളിലും അറിയപ്പെടുന്നവയെല്ലാം "അവ്യക്തമായ ശൈലികൾ" എന്നാണ് അറിയപ്പെടുന്നത്. ഇവ മറ്റ് ശൈലി വിവരങ്ങളുടെ അഭാവത്തിൽ HTML ഘടകങ്ങളുടെ രൂപവും ഭാവവും അടങ്ങുന്ന ശൈലികളാണ്. ഉദാഹരണത്തിന്, ഏതാണ്ട് എല്ലാ ബ്രൌസറുകളിലും ഹൈപ്പർലിങ്കുകളുടെ ഡിഫോൾട്ട് രൂപം അടിവരയിട്ട ഒരു നീലനിറമായിരിക്കും. വ്യത്യസ്തങ്ങളായ വിധത്തിൽ പ്രദർശിപ്പിക്കാൻ ആവശ്യപ്പെടുന്നതുവരെ ആ ലിങ്കുകൾ ഇങ്ങനെയാണ് കാണുന്നത്.

സഹജമായ ബ്രൗസർ ശൈലികൾ സഹായകരമാകുമെങ്കിലും മിക്കപ്പോഴും വെബ് ഡിസൈനർമാർ ഈ ശൈലികൾ നീക്കംചെയ്യാൻ ആഗ്രഹിക്കുന്നു, അതിലൂടെ അവർക്ക് 100 ശതമാനം നിയന്ത്രണങ്ങൾ ഉള്ള ശൈലികൾ ഉപയോഗിച്ച് ആരംഭിക്കാൻ കഴിയും. ഇത് ഒരു "മാസ്റ്റർ സ്റ്റൈൽഷീറ്റ്" എന്ന് വിളിക്കുന്നു.

ഒരു മാസ്റ്റർ സ്റ്റൈൽഷീറ്റ് നിങ്ങളുടെ എല്ലാ പ്രമാണങ്ങളിലും നിങ്ങൾ വിളിക്കുന്ന ആദ്യത്തെ സ്റ്റൈൽ ഷീറ്റായിരിക്കണം. ക്രോസ്-ബ്രൌസർ വെബ് ഡിസൈനിൽ പ്രശ്നങ്ങൾക്ക് കാരണമായ സ്ഥിര ബ്രൗസർ ക്രമീകരണങ്ങൾ ഒഴിവാക്കാൻ നിങ്ങൾ ഒരു മാസ്റ്റർ സ്റ്റൈൽഷീറ്റ് ഉപയോഗിക്കുന്നു. ഒരു മാസ്റ്റർ സ്റ്റൈൽ ഷീറ്റിനൊപ്പം ശൈലികൾ മായ്ച്ചുകഴിഞ്ഞാൽ, നിങ്ങളുടെ ഡിസൈൻ എല്ലാ ബ്രൗസറുകളിലും ഒരേ സ്ഥലത്തുനിന്ന് ആരംഭിക്കും - പെയിന്റിംഗിനായി ഒരു ശുദ്ധമായ ക്യാൻവാസ് പോലെ.

ആഗോള സ്ഥിരസ്ഥിതികൾ

പേജിൽ മാർജിനുകൾ, പാഡിംഗ്സ്, ബോർഡറുകൾ എന്നിവ പരിശോധിക്കാതെ നിങ്ങളുടെ മാസ്റ്റർ സ്റ്റൈൽഷീറ്റ് ആരംഭിക്കണം. ചില വെബ് ബ്രൌസറുകൾ ബ്രൗസറിന്റെ പാളി അരികുകളിൽ നിന്ന് ഇൻഡ്യൻ 1 അല്ലെങ്കിൽ 2 പിക്സലുകളിലേക്ക് സ്ഥിരസ്ഥിതിയായിരിക്കും. ഇത് എല്ലാവരും എല്ലാം ഒരേ കാര്യം തന്നെ പ്രദർശിപ്പിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു:

html, body {margin: 0px; പാഡിംഗ്: 0px; അതിർത്തി: 0px; }

നിങ്ങൾ ഫോണ്ട് സ്ഥിരമായി മാറ്റാൻ ആഗ്രഹിക്കുന്നു. നിങ്ങളുടെ പേജ് ആക്സസ് ചെയ്യാവുന്ന ഫോണ്ട് സൈസ് 100 ശതമാനമോ 1 എന്നയോ സെറ്റ് ആയിരിക്കുമെന്നത് ഉറപ്പാക്കുക, പക്ഷേ വലിപ്പം ഇപ്പോഴും സ്ഥിരമായിരിക്കും. ലൈൻ-ഉയരം ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക.

ശരീരം {font: 1em / 1.25 ഏരിയൽ, ഹെൽവെറ്റിക്ക, സാൻസ് സെരിഫ്; }

തലക്കെട്ട് ഫോർമാറ്റിംഗ്

ഹെഡ്ലൈൻ അല്ലെങ്കിൽ ശീർഷക ടാഗുകൾ (H1, H2, H3, മുതലായവ) സാധാരണയായി ബോൾഡ് ടെക്സ്റ്റിന് സ്വതവേയുള്ള വലിയ മാർജിനുകളോ പാഡിങോ നൽകാം. ഭാരം, മാർജിനുകൾ, പാഡിംഗ് എന്നിവ നീക്കം ചെയ്യുന്നതിലൂടെ, ഈ ടാഗുകൾ കൂടുതൽ വേറിട്ടുനിൽക്കുന്നതിനേക്കാൾ (അല്ലെങ്കിൽ അതിൽ ചെറുതോ) അവശേഷിക്കുന്ന വാചകങ്ങൾ ഇന്നും നിലനിൽക്കുന്നുണ്ടെന്ന് ഉറപ്പുവരുത്തുക:

h1, h 2, h3, h4, h5, h6 {margin: 0; പാഡിംഗ്: 0; font-weight: normal; ഫോണ്ട്-കുടുംബം: ഏരിയൽ, ഹെൽവെറ്റിക്ക, സാൻസ്-സെരിഫ്; }

നിങ്ങളുടെ പ്രധാന ടാഗുകൾക്ക് പ്രത്യേക വലുപ്പങ്ങൾ, അക്ഷര-സ്പെയ്സിംഗ്, പാഡിംഗുകൾ എന്നിവ ക്രമീകരിക്കാൻ നിങ്ങൾ താൽപ്പര്യപ്പെട്ടേക്കാം, എന്നാൽ നിങ്ങൾ രൂപകൽപ്പന ചെയ്യുന്ന സൈറ്റിന്റെ ശൈലിയും മാസ്റ്റർ ശൈലി ഷീറ്റിൽ നിന്ന് അവശേഷിക്കും. നിങ്ങളുടെ നിർദ്ദിഷ്ട രൂപകൽപ്പനയ്ക്ക് ആവശ്യമായ ഈ ഹെഡിംഗ്ങ്ങിനായി നിങ്ങൾക്ക് കൂടുതൽ ശൈലികൾ ചേർക്കാൻ കഴിയും.

പ്ലെയിൻ ടെക്സ്റ്റ് ഫോർമാറ്റിംഗ്

തലക്കെട്ടുകൾക്കപ്പുറത്ത്, മറ്റ് വാചക ടാഗുകൾ നിങ്ങൾക്ക് മായ്ക്കണമെന്ന് ഉറപ്പാക്കേണ്ടതുണ്ട്. പലപ്പോഴും ആളുകൾ മറക്കുന്ന ഒരു സെറ്റ് പട്ടിക സെൽ ടാഗുകളും (TH, TD) ഫോമുകൾ (SELECT, TEXTAREA, INPUT) എന്നിവയുമാണ്. നിങ്ങളുടെ ബോഡി, ഖണ്ഡികാ വാചകത്തിന്റെ അതേ വലുപ്പത്തിൽ ഇതിനെ സജ്ജമാക്കിയിട്ടില്ലെങ്കിൽ, ബ്രൌസറുകൾ എങ്ങനെ റെൻഡർ ചെയ്യണമെന്നത് നിങ്ങൾ അമ്പരപ്പിക്കുന്നതായിരിക്കാം.

p, th, td, li, dd, dt, ul, ol, blockquote, q, ചുരുക്കി, abbr, a, ഇൻപുട്ട്, സെലക്ട്, ടെക്സ്റ്ററ {margin: 0; പാഡിംഗ്: 0; ഫോണ്ട്: സാധാരണ നോർമൽ സാധാരണ 1em / 1.25 ഏരിയൽ, ഹെൽവെറ്റിക്ക, സാൻസ്-സെരിഫ്; }

നിങ്ങളുടെ ഉദ്ധരണികൾ (BLOCKQUOTE, Q), ചുരുക്കിപ്പറഞ്ഞാൽ, ചുരുക്കത്തിൽ കൂടുതൽ സ്റ്റൈൽ സംഗ്രഹങ്ങൾ നൽകുന്നതും നല്ലതാണ്.

ബ്ലോക്ക്ക്ലോട്ട് {margin: 1.25em; padding: 1.25em} q {font-style: italic; } അക്രോണിം, abbr {cursor: help; ബോർഡർ-അടിയിൽ: 1px ഡാഷ് ചെയ്തു; }

ലിങ്കുകളും ചിത്രങ്ങളും

മുൻപ് പറഞ്ഞിരിക്കുന്ന നീലനിറമുള്ള നീല അടിവരയിട്ട വാചകത്തിൽ നിന്ന് നിയന്ത്രിക്കാനും മാറ്റാനും എളുപ്പമാണ് ലിങ്കുകൾ. എല്ലായ്പ്പോഴും എന്റെ ലിങ്കുകൾ അടിവരയിട്ടു തുടരുകയാണ്, എന്നാൽ നിങ്ങൾക്കത് വ്യത്യസ്തമായ രീതിയിലാണെങ്കിൽ നിങ്ങൾക്ക് ഈ ഓപ്ഷനുകൾ പ്രത്യേകമായി സജ്ജമാക്കാൻ കഴിയും. ഞാൻ മാസ്റ്റർ ശൈലി ഷീറ്റിലെ നിറങ്ങൾ ഉൾപ്പെടുത്തരുത്, കാരണം ആ ഡിസൈനിനെ ആശ്രയിച്ചിരിക്കുന്നു.

a, a: link, a: visited, a: active, a: hover {text-decoration: underline; }

ചിത്രങ്ങൾ ഉപയോഗിച്ച്, അതിരുകൾ ഓഫ് ചെയ്യേണ്ടത് പ്രധാനമാണ്. മിക്ക ബ്രൌസറുകളിലും പ്ലെയിന് ഇമേജ് ചുറ്റും ഒരു ബോർഡർ പ്രദർശിപ്പിക്കില്ലെങ്കിലും, ചിത്രം ബന്ധിപ്പിക്കുമ്പോൾ, ബ്രൌസറുകൾ ബോർഡർ ഓൺ ചെയ്യുകയാണ്. ഇത് പരിഹരിക്കാൻ:

img {border: none; }

പട്ടികകൾ

ലേഔട്ട് ആവശ്യകതകൾക്കായി ടേബിളുകൾ ഇനി ഉപയോഗിക്കപ്പെടുന്നില്ലെങ്കിലും, യഥാർത്ഥ ടാബ്ലാർ ഡാറ്റയ്ക്കായി നിങ്ങൾ തുടർന്നും ഉപയോഗിക്കാനാകും. ഇത് HTML പട്ടികകളുടെ നല്ല ഉപയോഗമാണ്. നിങ്ങളുടെ പട്ടിക സെല്ലുകളിൽ സ്വതവേയുള്ള ടെക്സ്റ്റ് വലുപ്പം തുല്യമാണെന്ന കാര്യം ഞങ്ങൾ ഇതിനകം ഉറപ്പാക്കിയിട്ടുണ്ട്, പക്ഷേ നിങ്ങൾക്കാവശ്യമുള്ള മറ്റ് സ്റ്റൈലുകൾ നിങ്ങളുടെ ടേബിളുകൾ അതേപടി നിലനിർത്തണം:

പട്ടിക {മാർജിൻ: 0; പാഡിംഗ്: 0; അതിർത്തി: ഒന്നുമില്ല; }

ഫോമുകൾ

മറ്റ് മൂലകങ്ങളോട് പോലെ, നിങ്ങൾ നിങ്ങളുടെ ഫോമുകൾക്ക് ചുറ്റുമുള്ള അറ്റങ്ങളും പാഡുകളും നീക്കംചെയ്യണം. ഞാൻ ആഗ്രഹിക്കുന്ന മറ്റൊരു കാര്യം ഫോം ടാഗ് " ഇൻലൈൻ " ആയി തിരുത്തിയെഴുതുന്നതിനാൽ അത് നിങ്ങൾക്ക് കോഡിൽ ടാഗ് ചെയ്യുന്ന സ്ഥലം അധികമായി ചേർക്കുന്നില്ല. മറ്റ് ടെക്സ്റ്റ് മൂലകഘടനകളെ പോലെ, സെലക്ട്, ടെക്സ്റ്റ്, ഇൻപുട്ട് മുകളിലുള്ള ഇൻപുട്ട് എന്നീ വിവരങ്ങളുടെ ഫോണ്ട് വിവരങ്ങൾ ഞാൻ നിർവ്വചിക്കുന്നു, അങ്ങനെ എന്റെ ടെക്സ്റ്റിന്റെ ബാക്കി ഭാഗമാണിത്.

രൂപം {margin: 0; പാഡിംഗ്: 0; പ്രദർശിപ്പിക്കുക: ഇൻലൈൻ; }

നിങ്ങളുടെ ലേബലുകൾക്കായി കർസർ മാറ്റുന്നത് നല്ല കാര്യമാണ്. ലേബൽ അവർ ക്ലിക്കുചെയ്യുമ്പോൾ എന്തെങ്കിലും ചെയ്യുമെന്ന് ഇത് ആളുകളെ സഹായിക്കുന്നു.

ലേബൽ {കഴ്സർ: പോയിന്റർ; }

സാധാരണ ക്ലാസുകൾ

മാസ്റ്ററിന്റെ സ്റ്റൈൽഷീറ്റിന്റെ ഈ ഭാഗത്തിന്, നിങ്ങൾക്ക് അർത്ഥമാക്കുന്ന ക്ലാസുകൾ നിർവ്വചിക്കേണ്ടതുണ്ട്. ഞാൻ പലപ്പോഴും ഉപയോഗിക്കുന്ന ചില ക്ലാസുകളാണ് ഇവ. അവ ഏതെങ്കിലും പ്രത്യേക ഘടകത്തിലേക്ക് ക്രമീകരിച്ചിട്ടില്ലെന്നത് ശ്രദ്ധിക്കുക, അതിനാൽ നിങ്ങൾക്ക് ആവശ്യമുള്ളത് അവരെ ഏൽപ്പിക്കാം:

. തെളിഞ്ഞത്: രണ്ട്; }. floatLeft {float: left; }. floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textstyle {text-align: justify; }. ബ്ലോക്ക്സെന്റർ {display: block; മാർജിൻ-ഇടത്: ഓട്ടോ; മാർജിൻ വലത്: ഓട്ടോ; } / * വീതി * /. ബോൽഡ് സെറ്റ് ചെയ്യാൻ ഓർമ്മിക്കുക {font-weight: bold; } .ശൃംഖല {font-style: italic; }. കുറിപ്പു് {text-decoration: അടിവരയിട്ട്; }. വിനോദം {margin-left: 0; പാഡിംഗ് ഇടത്: 0; } .nomargin {margin: 0; }. നോപ്പാഡ് ചെയ്യുന്നത് {പാഡിംഗ്: 0; } .nobullet {list-style: none; list-style-image: none; }

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

മുഴുവൻ മാസ്റ്റർ സ്റ്റൈൽഷീറ്റ്

/ * ആഗോള സ്ഥിരസ്ഥിതികൾ * / html, ശരീരം {margin: 0px; പാഡിംഗ്: 0px; അതിർത്തി: 0px; } body {font: 1em / 1.25 ഏരിയൽ, ഹെൽവെറ്റിക്ക, സാൻസ് സെരിഫ്; } / * തലക്കെട്ടുകൾ * / h1, h2, h3, h4, h5, h6 {margin: 0; പാഡിംഗ്: 0; font-weight: normal; ഫോണ്ട്-കുടുംബം: ഏരിയൽ, ഹെൽവെറ്റിക്ക, സാൻസ്-സെരിഫ്; } / * ടെക്സ്റ്റ് ശൈലികൾ * / p, th, td, li, dd, dt, ul, ബ്ലോക്ക്ക്വോട്ട്, q, എക്രോണിം, abbr, a, ഇൻപുട്ട്, സെലക്ട്, ടെക്സ്റ്റാര {മാർജിൻ: 0; പാഡിംഗ്: 0; ഫോണ്ട്: സാധാരണ നോർമൽ സാധാരണ 1em / 1.25 ഏരിയൽ, ഹെൽവെറ്റിക്ക, സാൻസ്-സെരിഫ്; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } അക്രോണിം, abbr {cursor: help; ബോർഡർ-അടിയിൽ: 1px ഡാഷ് ചെയ്തു; } ചെറിയ {font-size: .85; } വലിയ {font-size: 1.2em; } / * ലിങ്കുകളും ഇമേജുകളും * / a, a: link, a: സന്ദർശിച്ചു, ഒരു: സജീവമായത്: a: ഹോവർ {text-decoration: അടിവരയിട്ട്; } img {border: none; } / * പട്ടികകൾ * / പട്ടിക {margin: 0; പാഡിംഗ്: 0; അതിർത്തി: ഒന്നുമില്ല; } / * ഫോമുകൾ * / ഫോം {margin: 0; പാഡിംഗ്: 0; പ്രദർശിപ്പിക്കുക: ഇൻലൈൻ; } ലേബൽ {കഴ്സർ: പോയിന്റർ; } / * സാധാരണ ക്ലാസുകൾ * /. }. floatLeft {float: left; }. floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textstyle {text-align: justify; }. ബ്ലോക്ക്സെന്റർ {display: block; മാർജിൻ-ഇടത്: ഓട്ടോ; മാർജിൻ വലത്: ഓട്ടോ; } / * വീതി * /. ബോൽഡ് സെറ്റ് ചെയ്യാൻ ഓർമ്മിക്കുക {font-weight: bold; } .ശൃംഖല {font-style: italic; }. കുറിപ്പു് {text-decoration: അടിവരയിട്ട്; }. വിനോദം {margin-left: 0; പാഡിംഗ് ഇടത്: 0; } .nomargin {margin: 0; }. നോപ്പാഡ് ചെയ്യുന്നത് {പാഡിംഗ്: 0; } .nobullet {list-style: none; list-style-image: none; }

ജെന്നിഫർ ക്രിയിൻ എഴുതിയ ലേഖനം എഡിറ്റു ചെയ്തത് ജെറമി ഗിർാർഡ് 10/6/17 ന്