സിഎസ്എസ്: പട്ടിക ഡിസൈൻ. രജിസ്ട്രേഷൻ ഉദാഹരണങ്ങൾ

സിഎസ്എസ് ഉപയോഗിച്ച് പട്ടികകൾ ഉണ്ടാക്കുന്നു - രസകരമായ ഉത്തരവാദിത്തം പാഠം എന്ന. ഈ സമീപനം എല്ലാ സാധ്യമായ ശൈലികൾ അറിവോടുകൂടി ചൊംപെതെംത്ല്യ് വേണം. കൂടാതെ ഇത് അവരുടെ സർഗാത്മകത സന്ദർശകർക്ക് ഓഫ് ഭയപ്പെടുത്തുവാനല്ല വേണ്ടി സൗന്ദര്യം പ്രതീതി കൈവശമാക്കേണ്ടതിന്നു അത്യാവശ്യമാണ്.

പട്ടികകൾ മിക്കവാറും എല്ലാം മാറ്റാൻ കഴിയുന്ന. മനോഹരമായ ഡിസൈൻ സി.എസ്.എസ് ടേബിളുകൾ ഡിസൈൻ ബൗണ്ടറികൾ ഉപയോഗം, പട്ടിക പശ്ചാത്തലം, സെൽ പശ്ചാത്തല, അവരെ കൂടുതൽ തമ്മിലുള്ള വിടവ് ഉൾപ്പെടുന്നു. ഏറ്റവും അടിസ്ഥാന ചിന്തിക്കുക.

പട്ടിക ബോർഡർ

സി.എസ്.എസ് പട്ടിക രീതിയിൽ രൂപകല്പന ഒരു അതിർത്തി (ഫ്രെയിം) ഒരു ഗെയിം ഉൾപ്പെടുന്നു. എല്ലാ സ്ഥിര പട്ടികകൾ ഭഗവനേന് ഫ്രെയിം അല്ല. അതായത് അതിന്റെ 0 പിക്സൽ തുല്യമാണ്. എന്നാൽ ഈ പ്രോപ്പർട്ടി അതിർത്തി തിരുത്താനായത് കഴിയും.

നിങ്ങൾ മുഴുവൻ പട്ടികയുടെ പുറം ഫ്രെയിം നൽകാം:

പട്ടികയുടെ {അതിർത്തി: ൩പ്ക്സ കടും കറുപ്പ്; }

ഈ രീതിയിൽ ഉപയോഗിക്കുന്ന സൈറ്റിലെ എല്ലാ പട്ടികകൾ ഈ ലൈൻ നന്ദി കറുത്ത ഫ്രെയിം ആണ്. മാത്രം വേണമങ്കിലും, എന്നാൽ പട്ടികയുടെ ഉള്ളിൽ അതിർത്തിയിൽ ശ്രദ്ധിക്കുക. സെൽ ലൈനുകളും ഫ്രെയിം അല്ലെങ്കിൽ പറഞ്ഞിരിക്കുന്ന.

ആം, ടി.ഡി. {അതിർത്തി: ൩പ്ക്സ കടും കറുപ്പ്;}

കനം നിറവും, എന്തെങ്കിലും വ്യക്തമാക്കാൻ കഴിയും. സെല്ലുകൾ സ്പ്ലിചിന്ഗ് സമയത്ത് ബൗണ്ടറികൾ ഇരട്ടിയായി അല്ല എന്നത് ഓർമിക്കുക.

വചനം ഒരു സോളിഡ് തുടർച്ചയായി രജിസ്ട്രേഷൻ സൂചിപ്പിക്കുന്നു. നിങ്ങൾ മറ്റ് മൂല്യങ്ങൾ വ്യക്തമാക്കാൻ കഴിയും.

കൂടുതൽ ആകർഷകമായ തോന്നുന്നു, സൈറ്റിന്റെ പ്രധാന ഉള്ളടക്കം നിന്നും ശ്രദ്ധ കണ്ടതല്ലേ ഇല്ല അത്, സാധാരണയായി ഉപയോഗിക്കുന്ന ദൃഢ ഫ്രെയിം ആണ്.

അതിർത്തി പ്രോപ്പർട്ടി ബോർഡിൽ പുറമേ നൽകാം. അതിർത്തി മുകളിൽ, താഴെ, ഇടത് അല്ലെങ്കിൽ വലത് വശത്ത് സജ്ജമാക്കാനാകൂ. കാരണം ചില സാഹചര്യങ്ങളിൽ ഇത് ഒരേസമയം മുഴുവൻ പട്ടിക ഫ്രെയിമിൽ ഒരു സാദ്ധ്യമായ ഓപ്ഷൻ അല്ല.

പട്ടിക {അതിർത്തി-മുകളിൽ: 1px സോളിഡ് ചുവന്ന; }

അങ്ങനെ മാത്രമേ പട്ടികയുടെ മുകളിൽ ഫ്രെയിമിൽ സജ്ജമാക്കാൻ കഴിയും. വലത്, ഇടത് അല്ലെങ്കിൽ താഴെ: മറ്റ് ഏതെങ്കിലും പാർട്ടികൾ, പകരം മുകളിൽ എഴുതുക വരെ.

പട്ടിക തലക്കെട്ട്

പട്ടിക തലക്കെട്ട് ടാഗ് ഉപയോഗിച്ച് <അടിക്കുറിപ്പ്> നൽകാം. ഈ ടാഗ് ഫൈൻ ട്യൂണിംഗ് വേണ്ടി ഉള്ള ഒരു രജിസ്റ്റർ ചെയ്യാൻ CSS- ൽ കഴിയും. സി.എസ്.എസ് പട്ടിക ഡിസൈൻ ഘടകങ്ങൾ .തീവ്രമായ നിങ്ങൾ ആഗ്രഹിക്കുന്ന വഴി സാധ്യമാണ് കാരണം നല്ലതാണ്.

ഈ ശീർഷകം പുസ്തകങ്ങൾ (പോലുള്ള "പട്ടിക 1") ഒരു സാധാരണ പോലെ പ്രദർശിപ്പിച്ചിരിക്കുന്നു.

ശീർഷകം സ്വത്തിനും അടിക്കുറിപ്പ്-സൈഡ് (മുകളിൽ അല്ലെങ്കിൽ ചുവടെ) സ്ഥാനം വ്യക്തമാക്കാൻ കഴിയും. പ്രോപ്പർട്ടി ടെക്സ്റ്റ്-വിന്യാസം ഇടത് അല്ലെങ്കിൽ വലത് പരിപൂര്ണമാണ് നിർവചിച്ചിരിക്കുന്നത്.

പശ്ചാത്തല പട്ടികകൾ

പട്ടികയുടെ പശ്ചാത്തലം ഏതെങ്കിലും നിറം അല്ലെങ്കിൽ പാറ്റേൺ ആകാം. കളർ ഒരു പ്രോപ്പർട്ടി പശ്ചാത്തല-നിറം സജ്ജീകരിക്കുന്നു. പ്രസംഗത്തിൽ ഉപയോഗങ്ങൾ പൂർണ്ണമായും സ്ഥിരതയുള്ള ഉള്ള പേരുകൾ. ഇത് പല തവണ സംഭരിക്കാനായി സൗകര്യമൊരുക്കുന്നു.

നിറം പേര് വ്യക്തമാക്കണം കഴിയും, വ്യത്യസ്ത എന്കോഡിംഗുകള്. കൂടാതെ, നിങ്ങൾ താഴെ നൽകാം:

• സുതാര്യ - സുതാര്യമായ.
• പാരമ്പര്യം - നിറം മൂല ഘടകം ആ തന്നെ ആണ്.
• പ്രാരംഭ - സ്ഥിര.

സുതാര്യത കൊണ്ട് ഓപ്ഷൻ എവിടെ ഫയൽ വാചകം എല്ലാ പട്ടികകൾ ഒരു നിറം ഉണ്ടായ ആ സാഹചര്യങ്ങളിൽ ഉപയോഗിക്കാൻ കഴിയും, എന്നാൽ ഈ കേസിൽ ആവശ്യമില്ല.

കൂടാതെ, പശ്ചാത്തല ഒരു ചിത്രം ആയിരിക്കാം. , ഇത് ചെയ്യുന്നതിന് രീതിയിൽ നിർദ്ദേശിക്കുന്ന പശ്ചാത്തല-ഇമേജ് സവിശേഷതകൾ. പാത ഇങ്ങനെയാണ്:

URL ( 'വിലാസം')

ഫയൽ പാത്ത് ആപേക്ഷിക അല്ലെങ്കിൽ സമ്പൂർണ്ണ ആകാം.

കൂടുതൽ സങ്കീർണ്ണമായ ഫിൽ ഒരു ഗ്രേഡിയന്റ് ഉപയോഗിച്ച് ചെയ്യാൻ കഴിയും:

• ലീനിയർ-വിതറുക ();
• റേഡിയൽ-വിതറുക ();
• ആവർത്തിക്കുന്നത്-ലീനിയർ-വിതറുക () ഉം ആവർത്തിക്കപ്പെടുന്ന-റേഡിയൽ-വിതറുക () - ഗ്രേഡിയന്റ് ആവർത്തിച്ചു.

പശ്ചാത്തല സെൽ

പൊതുവെ ഒരു പശ്ചാത്തലത്തിൽ പുറമേ, നിങ്ങൾ നിരകളും വരികളും ഒരു വരയൻ പശ്ചാത്തലത്തിൽ വ്യക്തമാക്കാൻ കഴിയും. വരികൾ വിഷ്വൽ ശുദ്ധീകരണ എളുപ്പം വിവരങ്ങൾ വായിക്കാൻ കാരണം സ്വത്ത് രജിസ്റ്റർ, പലപ്പോഴും ഉപയോഗിക്കുന്നു.

മാറിമാറി പുറമേ, നിങ്ങൾ ഒരു പ്രത്യേക നിര അല്ലെങ്കിൽ വരി എണ്ണം വ്യക്തമാക്കാൻ കഴിയും. ഇങ്ങനെ ഉദാഹരണത്തിന്:

• TR: .അതെ-കുട്ടി (പോലും) {...} - കൂടിച്ചേർന്ന വ്യക്തമാക്കുക;
• TR: .അതെ-കുട്ടി (1) {...} - ഒരു പ്രത്യേക വരി ഉള്ള സൂചന;
• TD: .അതെ-കുട്ടി (പോലും) {...} - ഒരു നിരകൾ പ്രത്യനുധാര എന്ന സൂചന;
• TD: .അതെ-കുട്ടി (1) {...} - ഒരു പ്രത്യേക കോളത്തിന്റെ ഉള്ള ഒരു സൂചന.

അനുക്രമം നമ്പറുകളും കൂടാതെ വ്യക്തമാക്കിയ കഴിയും - ആദ്യ (ടി.ഡി.: ആദ്യ കുട്ടി) അല്ലെങ്കിൽ കഴിഞ്ഞ (ടി.ഡി.: അവസാന കുട്ടി).

കോശങ്ങൾ തമ്മിലുള്ള വിടവ്

സി.എസ്.എസ് ൽ, പട്ടിക ഡിസൈൻ കോശങ്ങൾ തമ്മിലുള്ള ഇടങ്ങൾ നീക്കം അനുവദിക്കുന്നു. സ്ഥിരമായി അവർ. ഉദാഹരണത്തിന്, നിങ്ങൾ അതിരുകൾ തമ്മിലുള്ള ദൂരം ക്രമീകരണം ഇല്ലാതെ പട്ടികയിലെ ഫ്രെയിം വെച്ചു, അത് ഇവിടെ ഈ ഫലം.

, അംഗീകരിക്കുക അതു വളരെ നല്ലതല്ല തോന്നുന്നു വായിച്ചു വിരല് ആകുന്നു. ഉപയോക്താക്കൾക്ക് കാരണം ഈ ദൃഷ്ടിയിൽ റിപ്പിൾ ഉണ്ടാകും. ഈ വിടവുകൾ നീക്കംചെയ്യുക പട്ടിക ശൈലിയിൽ അത്തരമൊരു ലൈൻ എഴുതി കഴിയും:

അതിർത്തി-ദുരന്തം: തകർന്ന്

എന്നാൽ അത് ദൂരം, മറിച്ച്, വർദ്ധിച്ചു വേണം സംഭവിക്കുന്നു. മാത്രമല്ല, വിടവുകൾ വലിപ്പം നിരകൾ തമ്മിൽ ലൈനുകളും തമ്മിലുള്ള വ്യക്തമാക്കണം കഴിയും. ഒരു മൂല്യം (പകരം ചുരുക്കാൻ) സൂചിപ്പിക്കാൻ:

അതിർത്തി-ദുരന്തം: പ്രത്യേക

എന്നാൽ അത്തരം പ്രവർത്തനം അതിനെ കോശങ്ങൾ വേർതിരിച്ചു അത്യാവശ്യമാണ് എന്നതാണ്. അത് അവരുടെ പങ്ക് ഇരിക്കുമ്പോൾ അധിക പ്രോപ്പർട്ടി സൂചിപ്പിച്ചു:

അതിർത്തി-സ്പെയ്സിംഗ്: 20px.

നിങ്ങൾ വരികളും നിരകളും തമ്മിൽ മറ്റൊരു ദൂരം വ്യക്തമാക്കാൻ ചെയ്യണമെങ്കിൽ, രണ്ടു കാര്യങ്ങൾ സൂചിപ്പിക്കുന്നു:

അതിർത്തി-അകലമുണ്ടാക്കിക്കൊണ്ട്: ൧൦പ്ക്സ൨൦പ്ക്സ.

ബ്രൗസറുകളിൽ വ്യത്യാസം

സി.എസ്.എസ് ഡിസൈൻ പട്ടികകൾ ബ്രൗസർ അനുസരിച്ച്, വ്യത്യസ്തമായി വേണ്ടി ഓർമിക്കുക. പ്രത്യേകിച്ച് മോശം സി.എസ്.എസ് ഇന്നവേഷൻസ് പിന്തുണയ്ക്കുന്നില്ല പഴയ പതിപ്പുകൾ കൊണ്ട് കേസ്.

മുകളിൽ ഡിജിറ്റൽ മൂല്യങ്ങളിലേക്ക് ഫ്രെയിം ഥിച്ക്നെഷെസ് ഒരു ഉദാഹരണമാണ്.

ഈ ഉദാഹരണത്തിന്, സ്ഥിരാങ്കങ്ങളും വേണ്ടി ഫ്രെയിമുകൾ കനം.

ബോർഡർ ശൈലികൾ പുറമേ വളരെ വ്യത്യാസപ്പെട്ടിരിക്കുന്നു.

അതുകൊണ്ടു, വികസനം എപ്പോഴും വ്യത്യസ്ത ബ്രൗസറുകളിൽ ഫലം കാണാൻ.

സി.എസ്.എസ് ഡിസൈൻ പട്ടികകൾ ബ്രൗസർ തരം പരിശോധിക്കാൻ ശുപാർശ. പ്രത്യേകിച്ച് വലിയ പ്രശ്നം ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ പഴയ പതിപ്പുകൾ ഉപയോക്താക്കൾക്ക് ഉപയോഗിക്കുന്ന.

വളരെ വിപുലമായ ഡെവലപ്പർമാർ, തികച്ചും വ്യത്യസ്തമായ സി.എസ്.എസ് ഫയലുകൾ കണക്ട് ബ്രൗസർ അനുസരിച്ച് കഴിയും. എന്നാൽ ആരെങ്കിലും ഓരോ ഒരു ചെക്ക് അല്ലെങ്കിൽ ചില പ്രത്യേക രീതിയിൽ (ക്ലാസ്) ചെയ്യുന്നു.

മിക്ക പ്രശ്നങ്ങൾ നിഴലുകൾ നിന്ന് എഴുന്നേറ്റു.

സിഎസ്എസ്: പട്ടിക ഫോർമാറ്റ് ഉദാഹരണങ്ങൾ

രജിസ്ട്രേഷൻ ഇക്കാലയളവിൽ കഴിയും. എല്ലാ മുഴുവൻ സൈറ്റ് അതിന്റെ ഡിസൈൻ ആശ്രയിച്ചിരിക്കുന്നു. എല്ലാ യോജിപ്പിക്കണം ഒപ്പം കാണാറുണ്ട് നിറങ്ങൾ. കൂടാതെ ഒരു വലിയ പങ്ക് സ്വാദും ഡെവലപ്പർ ചെയ്യുന്നു. സൌന്ദര്യത്തിന്റെ സെൻസ് എല്ലാ വ്യത്യസ്തമാണ്.

നാം വിവിധ പട്ടികകൾ ചില ഉദാഹരണങ്ങൾ തരും. മുകളിൽ കണക്കുകൾ പശ്ചാത്തല വർണ്ണവും അതിർനാടും ടിൽറ്റും കളിയുടെ ഉപയോഗം കാണിക്കുന്നു.

പല കണ്ണ് ഉപയോക്താക്കളെ മുറിച്ചു ഇല്ല എന്ന് മനോഹരമായ വിലങ്ങുതടിയായി ഡിസൈൻ ഉദാഹരണത്തിന് ആയിരിക്കും. ഈ ദുരിതം ഏത് സാഹചര്യത്തിലും ഉചിതമാണ്.

അറ്റങ്ങൾ വൃത്താകാരം കഴിയും. ഇത് വളരെ നല്ല തോന്നുന്നു.

തീരുമാനം

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

രൂപകൽപ്പനയിൽ പ്രധാന കാര്യം - ഇഫക്റ്റുകൾ അതിനെ കെടന്നൊറങ്ങുന്ന ചെയ്യരുത്. എല്ലാം മിതമായ ചെയ്യണം. ആദ്യം, ലേഔട്ട് ഉടനെ അവരുടെ എല്ലാ അറിവ് പരീക്ഷണങ്ങൾ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്നു. പട്ടികയുടെ ഫലമായി ഒവെര്സതുരതെദ് പ്രോപ്പർട്ടികൾ ഉണ്ട്. ഈ പിശകുകൾ ഒഴിവാക്കുന്നതിന് ശ്രമിക്കുക.

മാത്രമല്ല, ചില പരാമീറ്ററുകൾ പരസ്പരം തടസ്സപ്പെടുത്തിയേക്കാം. ഉദാഹരണത്തിന്, വ്യക്തമാക്കാൻ ആവശ്യമില്ല പശ്ചാത്തല നിറം വ്യക്തമാക്കിയ നിറം ഓവർലാപ് ഏത് സെറ്റ് പശ്ചാത്തല ചിത്രം, ഇപ്പോഴും ഉണ്ടെങ്കിൽ അതേസമയം, പട്ടികയുടെ.