വിവരണം
ഒരു ഘടകത്തിന് ചുറ്റും ബോർഡർ ശൈലി സജ്ജമാക്കുന്നു. ഒരു മൂലകത്തിൻ്റെ വ്യത്യസ്ത വശങ്ങൾക്കായി വ്യക്തിഗത ശൈലികൾ സജ്ജീകരിക്കുന്നത് അനുവദനീയമാണ്.
വാക്യഘടന
ബോർഡർ ശൈലി: (1,4) | അനന്തരാവകാശം
മൂല്യങ്ങൾ
അതിർത്തിയുടെ രൂപം നിയന്ത്രിക്കുന്നതിന് ബോർഡർ-സ്റ്റൈൽ പ്രോപ്പർട്ടിക്കായി നിരവധി മൂല്യങ്ങൾ നൽകിയിട്ടുണ്ട്. രൂപഭാവം ഉപയോഗിച്ച ബ്രൗസറിനേയും ബോർഡർ കനം സജ്ജമാക്കിയതിനേയും ആശ്രയിച്ചിരിക്കുന്നു. പട്ടികയിൽ 1 വ്യത്യസ്ത കനം മൂല്യങ്ങൾക്കുള്ള ശൈലികളുടെ പേരുകളും ഫലമായുണ്ടാകുന്ന ഫ്രെയിമും കാണിക്കുന്നു - 1, 3, 5, 7 പിക്സലുകൾ.
പട്ടികയിൽ ലിസ്റ്റുചെയ്തിരിക്കുന്ന മൂല്യങ്ങൾക്ക് പുറമേ, ഇനിപ്പറയുന്ന കീവേഡുകൾ ഉപയോഗിക്കുന്നു.
ഒന്നുമില്ല ബോർഡർ പ്രദർശിപ്പിക്കുന്നില്ല, അതിൻ്റെ കനം (ബോർഡർ-വീതി) പൂജ്യമായി സജ്ജീകരിച്ചിരിക്കുന്നു. ബോർഡർ-തകർച്ച പ്രോപ്പർട്ടി തകരാൻ സജ്ജമാക്കിയിരിക്കുന്ന ടേബിൾ സെല്ലുകളിൽ ബോർഡർ-സ്റ്റൈൽ പ്രയോഗിക്കുന്നത് ഒഴികെ, മറഞ്ഞിരിക്കുന്നതിന് സമാനമായ ഫലമില്ല. ഈ സാഹചര്യത്തിൽ, സെല്ലിന് ചുറ്റുമുള്ള അതിർത്തി ദൃശ്യമാകില്ല. അനന്തരാവകാശം മാതാപിതാക്കളുടെ മൂല്യം അവകാശമാക്കുന്നു.
ഒരു സ്‌പെയ്‌സ് കൊണ്ട് വേർതിരിച്ച് നിങ്ങൾക്ക് ഒന്നോ രണ്ടോ മൂന്നോ നാലോ മൂല്യങ്ങൾ ഉപയോഗിക്കാം. പ്രഭാവം അളവിനെ ആശ്രയിച്ചിരിക്കുന്നു, പട്ടികയിൽ സൂചിപ്പിച്ചിരിക്കുന്നു. 2.
HTML5 CSS2.1 IE Cr Op Sa Fx
ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റ്യൂവർ അഡിപിസ്സിംഗ് എലിറ്റ്, സെഡ് ഡൈം നോൺയുമി നിബ്ഹ് യൂയിസ്‌മോഡ് ടിൻസിഡൻ്റ് യുട്ട് ലാക്രീറ്റ് ഡോളോർ മാഗ്ന അലിഗ്വാം എററ്റ് വോലുട്ട്പറ്റ്.
ഈ ഉദാഹരണത്തിൻ്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 1.
അരി. 1. ബോർഡർ-സ്റ്റൈൽ പ്രോപ്പർട്ടി പ്രയോഗിക്കുന്നു
ഒബ്ജക്റ്റ് മോഡൽ
document.getElementById("elementID ").style.borderStyle
ബ്രൗസറുകൾ
ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ ബ്രൗസർ പതിപ്പ് 6 വരെയുള്ള ഡിസ്‌പ്ലേകൾ 1px ബോർഡർ കനം കൊണ്ട് ഡാഷ് ചെയ്തിരിക്കുന്നു. 2px ഉം അതിലും ഉയർന്നതുമായ കനം ഉള്ളതിനാൽ, ഡോട്ട് ഇട്ട മൂല്യം ശരിയായി പ്രവർത്തിക്കുന്നു. ഈ ബഗ് IE7-ൽ പരിഹരിച്ചിരിക്കുന്നു, എന്നാൽ എല്ലാ 1px ബോർഡറുകൾക്കും മാത്രം. ബ്ലോക്ക് ബോർഡറുകളിൽ ഒന്നിന് 2px അല്ലെങ്കിൽ അതിൽ കൂടുതൽ കനം ഉണ്ടെങ്കിൽ, IE7-ൽ ഡോട്ട് ഇട്ട മൂല്യം ഡാഷ് ആയി മാറുന്നു.
7.0 വരെയുള്ള ഇൻറർനെറ്റ് എക്സ്പ്ലോറർ പതിപ്പുകൾ മറഞ്ഞിരിക്കുന്നതും അവകാശമാക്കുന്നതുമായ മൂല്യങ്ങളെ പിന്തുണയ്ക്കുന്നില്ല.
ഗ്രോവ് , റിഡ്ജ് , ഇൻസെറ്റ് അല്ലെങ്കിൽ ഔട്ട്സെറ്റ് മൂല്യങ്ങൾ ഉപയോഗിക്കുമ്പോൾ ബോർഡർ ശൈലി ബ്രൗസറുകൾക്കിടയിൽ അല്പം വ്യത്യാസപ്പെടാം.
ടെക്‌സ്‌റ്റിനും ഫോണ്ട് ഡിസൈനിനുമുള്ള പ്രോപ്പർട്ടികൾ ഞങ്ങൾ പഠിച്ചു, ഇപ്പോൾ മറ്റ് ഘടകങ്ങളിലേക്ക് പോകാനുള്ള ഞങ്ങളുടെ ഊഴമാണ്. ഈ ട്യൂട്ടോറിയലിൽ നമ്മൾ ഫ്രെയിമുകൾ സൃഷ്ടിക്കുന്നത് നോക്കും സി.എസ്.എസ്. ഈ പ്രോപ്പർട്ടി പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്, അതിനാൽ കുറച്ചുകൂടി ശ്രദ്ധിക്കേണ്ടതാണ്.
അതിനാൽ, ചില ഘടകത്തിന് ചുറ്റും നിങ്ങൾ ഒരു ഫ്രെയിം നിർമ്മിക്കേണ്ടതുണ്ടെന്ന് നമുക്ക് അനുമാനിക്കാം. ഉദാഹരണത്തിന്, നമുക്ക് ഒരു തലക്കെട്ട് ഉണ്ടാക്കാംഞങ്ങൾ അതിനു ചുറ്റും ഒരു ഫ്രെയിം ഉണ്ടാക്കും.
ഫ്രെയിമിൻ്റെ പ്രത്യേകതകൾ: 1) ഫ്രെയിം കനം, 2) ഫ്രെയിം ശൈലി, 3) ഫ്രെയിം നിറം. നമുക്ക് ക്രമത്തിൽ പോകാം:
- 1. ഫ്രെയിം കനം: അതിർത്തി വീതി: 2px;
- 2. ഫ്രെയിം ശൈലി: അതിർത്തി ശൈലി: ഖര;
- 3. ഫ്രെയിം നിറം: അതിർത്തി നിറം: #ff0000;
ഫ്രെയിം ശൈലികൾ എന്തൊക്കെയാണ് സി.എസ്.എസ്? ലഭ്യമായ എല്ലാ ഫ്രെയിം ശൈലികളും ചുവടെ:
- കുത്തുകളുള്ള - ഇതൊരു ഡോട്ട് ഫ്രെയിം ആണ്.
- ഡാഷ് ചെയ്തു - ഇതൊരു ഡോട്ട് ഫ്രെയിമാണ്
- ഖര - ഇതൊരു സോളിഡ് ഫ്രെയിമാണ്
- ഇരട്ടി - ഇതൊരു ഇരട്ട ഫ്രെയിം ആണ്
- ഗ്രോവ് - വോള്യൂമെട്രിക് കാഴ്ച
- വരമ്പ് - വോള്യൂമെട്രിക് കാഴ്ച
- ഇൻസെറ്റ് - വോള്യൂമെട്രിക് കാഴ്ച
- തുടക്കം - വോള്യൂമെട്രിക് കാഴ്ച
ശീർഷകത്തിന് ചുറ്റും ഒരു ഫ്രെയിം സൃഷ്ടിക്കുന്നതിനുള്ള എല്ലാം ഇപ്പോൾ ഞങ്ങളുടെ പക്കലുണ്ട്.
HTML
ശീർഷകത്തിന് ചുറ്റും ഒരു ഫ്രെയിം സൃഷ്ടിക്കുക.
ഫ്രെയിമിനുള്ള ശൈലിയും.
H2(ബോർഡർ-വീതി: 2px; ബോർഡർ-സ്റ്റൈൽ: സോളിഡ്; ബോർഡർ-നിറം: #FF0000; )
തത്ഫലമായി, കട്ടിയുള്ള ഒരു കട്ടിയുള്ള ചുവന്ന ഫ്രെയിം 2px.
ഫ്രെയിം നാല് വശങ്ങളിൽ നിന്നാണ് നിർമ്മിച്ചിരിക്കുന്നത്: മുകളിലെ, ശരിയാണ്, താഴത്തെഒപ്പം ഇടത്തെകൂടാതെ, ഞങ്ങൾക്ക് സ്വത്ത് വ്യക്തമാക്കിയിട്ടുള്ളതിനാൽ അതിർത്തി , തുടർന്ന് ബ്രൗസർ സ്ഥിരസ്ഥിതിയായി ഫ്രെയിമിൻ്റെ നാല് വശങ്ങളും വരയ്ക്കുന്നു. അതിനാൽ, നിങ്ങൾക്ക് ഒരു വശത്ത് മാത്രം ഒരു ഫ്രെയിം വ്യക്തമാക്കണമെങ്കിൽ, ഫ്രെയിം സൃഷ്ടിക്കേണ്ട വശം സൂചിപ്പിക്കാൻ പ്രിഫിക്സുകൾ ഉപയോഗിക്കുന്നു.
- മുകളിൽ - മുകളിൽ.
- ശരിയാണ് - ശരിയാണ്
- താഴെ - താഴെ
- ഇടത്തെ - ഇടത്തെ
അതിനാൽ, ഖണ്ഡികയുടെ അടിയിൽ മാത്രം ഒരു ഫ്രെയിം നിർമ്മിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, അതായത്, അടിവരയിടുക, തുടർന്ന് ഓരോ പ്രോപ്പർട്ടിക്കും അതിർത്തി ഒരു പ്രിഫിക്സ് ചേർക്കുക താഴെ . ഫലം ഇനിപ്പറയുന്ന കോഡ് ഘടനയായിരിക്കും.
H2(ബോർഡർ-ബോട്ടം-വീഡ്: 2px; ബോർഡർ-ബോട്ടം-സ്റ്റൈൽ: ഡബിൾ; ബോർഡർ-ബോട്ടം-വർണ്ണം: #FF0000; )
ബ്രൗസറിനായി ഈ ശൈലികൾ ഉപയോഗിക്കുന്നത് അർത്ഥമാക്കുന്നത് നിങ്ങൾ താഴെ നിന്ന് ഒരു ഫ്രെയിം മാത്രം സൃഷ്ടിക്കേണ്ടതുണ്ട്, അതായത്. തലക്കെട്ട് ഊന്നിപ്പറയുന്നു. അതുപോലെ, മറുവശത്ത് ഫ്രെയിം സജ്ജീകരിച്ചുകൊണ്ട് നിങ്ങൾക്ക് ഈ കോഡ് ഡ്യൂപ്ലിക്കേറ്റ് ചെയ്യാം, ഉദാഹരണത്തിന് മുകളിൽ.
H2(ബോർഡർ-ബോട്ടം-വീഡ്: 2px; ബോർഡർ-ബോട്ടം-സ്റ്റൈൽ: ഡബിൾ; ബോർഡർ-ബോട്ടം-വർണ്ണം: #FF0000; ബോർഡർ-മുകളിൽ-വിഡ്ത്ത്: 2px; ബോർഡർ-ടോപ്പ്-സ്റ്റൈൽ: ഡബിൾ; ബോർഡർ-ടോപ്പ്-വർണ്ണം: # FF0000;)
ശീർഷകത്തിന് ഇപ്പോൾ മുകളിലും താഴെയും ചുവന്ന ബോർഡർ ഉണ്ടായിരിക്കും. മറ്റു പാർട്ടികൾക്കും ഇതുതന്നെ ചെയ്യാം.
നിങ്ങൾ ഇതിനകം ശ്രദ്ധിച്ചിരിക്കാം, റെക്കോർഡിംഗ് വളരെ വലുതായി മാറി, അതിനാൽ പ്രായോഗികമായി പലപ്പോഴും ഉപയോഗിക്കുന്ന ഒരു ചുരുക്കിയ തരം റെക്കോർഡിംഗ് ഉണ്ട്.
മുകളിലെ ചിത്രം ചുരുക്കിയ നൊട്ടേഷൻ്റെ ഘടന കാണിക്കുന്നു, അവിടെ പ്രോപ്പർട്ടി സൂചിപ്പിച്ചിരിക്കുന്നു അതിർത്തി മൂല്യങ്ങളായി, ഒരു സ്‌പെയ്‌സ് കൊണ്ട് വേർതിരിച്ച്, ഫ്രെയിമിൻ്റെ വീതി സൂചിപ്പിച്ചിരിക്കുന്നു - അതിർത്തി വീതി , ഫ്രെയിം ശൈലി - അതിർത്തി ശൈലി ഫ്രെയിമിൻ്റെ നിറവും - #ff0000 .
അതായത്, ബ്രൗസർ, അത്തരമൊരു സംക്ഷിപ്ത എൻട്രി കാണുന്നത് അതിർത്തി: 2px സോളിഡ് #ff0000; , ശീർഷകത്തിൻ്റെ നാല് വശങ്ങളിലും ഒരു ഫ്രെയിം സൃഷ്ടിക്കും. ഈ ഹ്രസ്വ എൻട്രി ഞങ്ങൾ മുകളിൽ ഉപയോഗിച്ച എൻട്രിക്ക് തുല്യമാണ് (മൂന്ന് പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ചത്).
ഒരു ചെറിയ നൊട്ടേഷൻ ഉപയോഗിക്കുകയാണെങ്കിൽ, ഒരു വശത്ത് മാത്രം ഫ്രെയിം സൂചിപ്പിക്കണമെങ്കിൽ, ഫ്രെയിം സൃഷ്ടിക്കേണ്ട വശത്തെ സൂചിപ്പിക്കുന്ന സിമ്പിൾടൺ ഞങ്ങൾ പ്രോപ്പർട്ടിയിലേക്ക് ചേർക്കുന്നു.
H2(ബോർഡർ-ടോപ്പ്:2px സോളിഡ് #ff0000;)
അതിനാൽ, ഒരു ചെറിയ കുറിപ്പ് ഉപയോഗിച്ച്, മുകളിൽ നിന്ന് ഒരു ഫ്രെയിം നിർമ്മിക്കുന്നു, അവിടെ ഫ്രെയിമിൻ്റെ കനം, ശൈലി, നിറം എന്നിവയും സൂചിപ്പിച്ചിരിക്കുന്നു.
ഈ രീതിയിൽ, പ്രോപ്പർട്ടി ഉപയോഗിച്ച് അതിർത്തി ഏതെങ്കിലും ഘടകത്തിന് ചുറ്റും ഒരു ഫ്രെയിം നിർമ്മിച്ചിരിക്കുന്നു. അടിവരയ്ക്ക് മറ്റൊരു നിറം ആവശ്യമുള്ളപ്പോൾ ലിങ്കുകൾക്ക് അടിവരകൾ സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് ഫ്രെയിം ഉപയോഗിക്കാം. ശരി, ചട്ടക്കൂടിനൊപ്പം അത്രയേയുള്ളൂ, നമുക്ക് അടുത്ത പ്രധാന പാഠത്തിലേക്ക് പോകാം, അവിടെ ഞങ്ങൾ നോക്കും
സ്വത്ത് സി.എസ്.എസ് – « അതിർത്തി", മൂലകത്തിന് ചുറ്റുമുള്ള ചുറ്റളവ് വരിയുടെ കനം, നിറം, തരം എന്നിവ സജ്ജമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഈ പ്രോപ്പർട്ടിയുടെ പാരാമീറ്ററുകൾ ഒരു വരിയിൽ എഴുതാം, ഒരു സ്‌പെയ്‌സ് കൊണ്ട് വേർതിരിച്ച് ഏത് ക്രമത്തിലും.
- - ലൈൻ കനം ഒരു പിക്സൽ
- - കട്ടിയായ വര
- - വെളുത്ത നിറം
- - കറുത്ത നിറം
- - ചാര നിറം
സോളിഡ് എലമെൻ്റ് ബോർഡർ
ഡാഷ് എലമെൻ്റ് ബോർഡർ
ഡോട്ട് ഇട്ട എലമെൻ്റ് ബോർഡർ
ഇരട്ട വരയുള്ള മൂലക ബോർഡർ
വ്യക്തിഗത അതിർത്തി വിഭാഗങ്ങളുടെ സ്വത്ത്
വോളിയത്തിൽ ഗ്രോവ്ഡ് ഫ്രെയിം അമർത്തി
വോളിയത്തിൽ കോൺവെക്സ് കോറഗേറ്റഡ് ഫ്രെയിം
വോള്യൂമെട്രിക് അമർത്തിയ ഫ്രെയിം
വോള്യൂമെട്രിക് കോൺവെക്സ് ഫ്രെയിം
പാഠങ്ങൾ / CSS /
പാഠം 7: CSS എലമെൻ്റ് ബോർഡർ
മിക്കവാറും എല്ലാ വെബ്‌സൈറ്റുകളും ഒരു ഘടകത്തിന് ചുറ്റും ഒരു ബോർഡർ സൃഷ്‌ടിക്കുന്ന ഒരു പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു. ബട്ടണുകൾക്കോ ടെക്സ്റ്റുള്ള ബ്ലോക്കുകൾക്കോ ഇത് ആവശ്യമാണ്. ഒരു ബോർഡർ സൃഷ്ടിക്കുന്നതിന്, ഒരു ഘടകത്തിന് CSS-ൽ രണ്ട് ഗുണങ്ങളുണ്ട്: ബോർഡറും ഔട്ട്‌ലൈനും. നമുക്ക് അവരെ നോക്കാം.
അതിർത്തി
ഒരു ഘടകത്തിന് ചുറ്റും ഒരു ഫ്രെയിം സജ്ജീകരിക്കാൻ ഈ പ്രോപ്പർട്ടി ആവശ്യമാണ്; ഇത് ഒരു വെബ് ഡോക്യുമെൻ്റിൽ അതിൻ്റെ ബോർഡർ സൂചിപ്പിക്കുന്നു; ഘടകം സ്ഥാപിക്കുമ്പോൾ ഫ്രെയിമിൻ്റെ വീതി കണക്കിലെടുക്കുന്നു. ഇതിന് 3 അർത്ഥങ്ങളുണ്ട് - നിറം, കനം, ഫ്രെയിം തരം.
ബോർഡർ പ്രോപ്പർട്ടിയുടെ വാക്യഘടന ഇപ്രകാരമാണ്:
അതിർത്തി: വീതി തരം നിറം;
പ്രോപ്പർട്ടി മൂല്യങ്ങൾ വ്യക്തമാക്കുന്നതിന് നിങ്ങൾക്ക് മറ്റൊരു ഓർഡർ തിരഞ്ഞെടുക്കാം, എന്നാൽ പ്രധാന കാര്യം ഒരു സ്പെയ്സിലൂടെയാണ്.
ഫ്രെയിമിൻ്റെ കനം (വീതി) പിക്സലിൽ (px) അല്ലെങ്കിൽ ശതമാനത്തിൽ (%) വ്യക്തമാക്കണം.
RGB (റെഡ് ഗ്രീൻ ബ്ലൂ) ഫോർമാറ്റിലോ HTML HEX കോഡിലോ നിറം വ്യക്തമാക്കാം.
താഴെ ലൈനുകളുടെ തരങ്ങൾഅവരുടെ പേരുകൾക്കൊപ്പം:
ഒരു മൂലകത്തിന് ബോർഡറുകൾ എങ്ങനെ ക്രമീകരിക്കാം? ഞങ്ങൾ ഇത് ഇനിപ്പറയുന്ന രീതിയിൽ ചെയ്യുന്നു:
#ബ്ലോക്ക് (
ബോർഡർ:3px സോളിഡ് #0085ss; /* വരി 3 പിക്സൽ കനവും നീലയും ആയി സജ്ജമാക്കുക */
}
നിങ്ങൾക്ക് ഒന്ന്, രണ്ട്, മൂന്ന് ഇൻസ്റ്റാൾ ചെയ്യണമെങ്കിൽ ഒരു പ്രത്യേക വശത്ത് ഫ്രെയിമുകൾ, തുടർന്ന് ഞങ്ങൾ ഇത് ഇതുപോലെ സൂചിപ്പിക്കുന്നു:
ബോർഡർ ടോപ്പ്- മുകളിൽ ഫ്രെയിം;
അതിർത്തി-താഴെ- താഴെയുള്ള ഫ്രെയിം;
അതിർത്തി-ഇടത്- ഇടതുവശത്ത് ഫ്രെയിം;
അതിർത്തി-വലത്- വലതുവശത്ത് ഫ്രെയിം;
തടയുക (
ബോർഡർ-വലത്: 3px സോളിഡ് #0085cc;
ബോർഡർ-ബോട്ടം: 2px ഡാഷ്ഡ് #0085cc;
}
നിനക്ക് വേണമെങ്കിൽ ഫ്രെയിമുകൾ നീക്കം ചെയ്യുക CSS ലെ ഘടകം, തുടർന്ന് ബോർഡർ പ്രോപ്പർട്ടിയിൽ എഴുതുക - ഒന്നുമില്ല
ശൂന്യം (
അതിർത്തി: ഒന്നുമില്ല; /* ക്ലാസ് ശൂന്യമായ ഒരു ഘടകത്തിന് ബോർഡർ ഉണ്ടാകില്ല */
}
രൂപരേഖ
ഒരു മൂലകത്തിൻ്റെ ബാഹ്യ അതിർത്തി സജ്ജീകരിക്കുന്നതിന് ആവശ്യമായ ഒരു വസ്തുവാണ് ഔട്ട്ലൈൻ.
കഴിക്കുക അതിർത്തിയിൽ നിന്നുള്ള രണ്ട് വ്യത്യാസങ്ങൾ:
ഒന്നാമതായി, ഔട്ട്ലൈനിൽ വ്യക്തമാക്കിയ വരി ബ്ലോക്കിൻ്റെ സ്ഥാനം, അതിൻ്റെ വീതി, ഉയരം എന്നിവയെ ബാധിക്കില്ല.
രണ്ടാമതായി, ഒരു പ്രത്യേക വശത്ത് ഒരു ഫ്രെയിം ഇൻസ്റ്റാൾ ചെയ്യാനുള്ള സാധ്യതയില്ല.
വാക്യഘടനയും ബോർഡർ തന്നെയാണ്.
ഔട്ട്ലൈൻ: 2px ഡോട്ടഡ് #0085cc; /* ഫ്രെയിം 2 പിക്സൽ നീല ഡോട്ട് */
ഔട്ട്‌ലൈനിനും ബോർഡറിനും, ഒന്നുമില്ല എന്ന് എഴുതി നിങ്ങൾക്ക് ഫ്രെയിമുകൾ നീക്കംചെയ്യാം:
നിങ്ങളുടെ ശ്രദ്ധയ്ക്ക് നന്ദി!
മുൻ ലേഖനം
പാഠം 6.
മൂലക അതിരുകൾ.
CSS-ൽ പാഡിംഗും മാർജിനുകളും. മാർജിനും പാഡിംഗും എന്താണ്? അടുത്ത ലേഖനം
പാഠം 8. CSS-ൽ ഒരു ഘടകത്തിൻ്റെ ടെക്സ്റ്റ് നിറവും പശ്ചാത്തലവും എങ്ങനെ സജ്ജീകരിക്കാം?
ലേഖനത്തിലെ അഭിപ്രായങ്ങൾ (vk.com)
അതിർത്തി
ബ്രൗസർ പിന്തുണ
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
വിവരണം
ഒരു ബ്ലോക്കിൻ്റെ ബോർഡറിൻ്റെ വീതിയും ശൈലിയും നിറവും ഒരേസമയം സജ്ജമാക്കാൻ CSS പ്രോപ്പർട്ടി നിങ്ങളെ അനുവദിക്കുന്നു. ഒരു ബ്ലോക്ക് ബോർഡർ എന്നത് എല്ലാ വശങ്ങളിലും ബ്ലോക്കിനെ ചുറ്റുന്ന ഒരു സാധാരണ ലൈൻ/ഫ്രെയിം ആണ്. ഒരു ഫ്രെയിം ചേർക്കുമ്പോൾ, അത് ബ്ലോക്കിൻ്റെ മൊത്തത്തിലുള്ള വലുപ്പത്തെ ബാധിക്കുമെന്നത് പരിഗണിക്കേണ്ടതാണ്.
മൂല്യങ്ങൾ ഒരു സ്‌പെയ്‌സ് ഉപയോഗിച്ച് വേർതിരിക്കപ്പെടുന്നു, ഏത് ക്രമത്തിലും ദൃശ്യമാകും; ആവശ്യമുള്ള പാരാമീറ്ററുമായി പൊരുത്തപ്പെടുന്ന ഒന്ന് ബ്രൗസർ തന്നെ നിർണ്ണയിക്കും. മൂന്ന് മൂല്യങ്ങളും വ്യക്തമാക്കേണ്ട ആവശ്യമില്ല; വീതിയും കൂടാതെ/അല്ലെങ്കിൽ വർണ്ണവും ഒഴിവാക്കാവുന്നതാണ്, ഈ സാഹചര്യത്തിൽ നഷ്ടപ്പെട്ട മൂല്യത്തിന് പകരം സ്വത്തിനുവേണ്ടി സ്ഥിരസ്ഥിതിയായി സജ്ജീകരിച്ചിരിക്കുന്ന മൂല്യം ഉപയോഗിക്കും, അതായത്. ഉദാഹരണത്തിന്, വീതി വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, വസ്തുവിൻ്റെ സ്ഥിര മൂല്യം ഉപയോഗിക്കും. വാക്യഘടനയ്ക്ക് കീഴിലുള്ള പട്ടിക ഏത് പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കാമെന്ന മൂല്യങ്ങളെ സൂചിപ്പിക്കുന്നു.
ശ്രദ്ധിക്കുക: ഒരു ഘടകത്തിൻ്റെ ചില വശങ്ങളിൽ മാത്രം ബോർഡറുകൾ സജ്ജീകരിക്കുന്നതിന്, ഇനിപ്പറയുന്ന പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുക: ബോർഡർ-മുകളിൽ, ബോർഡർ-ബോട്ടം, ബോർഡർ-ഇടത്, ബോർഡർ-വലത്.
നുറുങ്ങ്: സാധാരണയായി, ഒരു ബോർഡർ ഉപയോഗിക്കുമ്പോൾ, നിങ്ങൾ പാഡിംഗ് ചേർക്കേണ്ടതുണ്ട്.
CSS പ്രോപ്പർട്ടി: അതിർത്തി
അവർ ബ്ലോക്ക് ഫ്രെയിമിനും അതിൻ്റെ ഉള്ളടക്കത്തിനും ഇടയിൽ വൈറ്റ് സ്പേസ് ചേർക്കുന്നു: ടെക്സ്റ്റ്, ഇമേജുകൾ അല്ലെങ്കിൽ ചൈൽഡ് ടാഗുകൾ. സാധാരണയായി ബോർഡർ എലമെൻ്റിൻ്റെ ഉള്ളടക്കത്തോട് അടുത്താണ് വരയ്ക്കുന്നത്, ചിത്രത്തിന് ചുറ്റും ഒരു ബോർഡർ സജ്ജീകരിക്കണമെങ്കിൽ മാത്രമേ ഇത് ഉപയോഗപ്രദമാകൂ.
വാക്യഘടന
ബോർഡർ: ബോർഡർ-വീഡ് ബോർഡർ-സ്റ്റൈൽ ബോർഡർ-വർണ്ണം|അനുവസിക;
പ്രോപ്പർട്ടി മൂല്യങ്ങൾ
ഉദാഹരണം
ഇവിടെ ചില വാചകങ്ങളുണ്ട്.
ബ്രൗസർ വിൻഡോയിലെ ഈ ഉദാഹരണത്തിൻ്റെ ഫലം:
ബോക്സുകളിൽ ബോർഡറിൻ്റെ നിറവും ശൈലിയും വലുപ്പവും എങ്ങനെ സജ്ജീകരിക്കാം.
മാർക്ക്അപ്പ് ഭാഷകളിൽ, ബോർഡർ( അതിർത്തി), പട്ടികകളും ചിത്രങ്ങളും ഫ്രെയിമുകളും മാത്രമേ ഉള്ളൂ, ചില സന്ദർഭങ്ങളിൽ ബോർഡറിൻ്റെ നിറം സജ്ജീകരിക്കാൻ കഴിയും, അത്രമാത്രം.
അതിർത്തി ആട്രിബ്യൂട്ട്
കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ ഞങ്ങൾക്ക് കൂടുതൽ ഓപ്‌ഷനുകൾ നൽകുന്നു, എന്നാൽ ആദ്യം കാര്യങ്ങൾ ആദ്യം.
CSS-ൽ നമുക്ക് ബോർഡറിൻ്റെ വീതി നിയന്ത്രിക്കാനാകും അതിർത്തി വീതി, അല്ലെങ്കിൽ കൂടുതൽ കൃത്യമായി പറഞ്ഞാൽ, നമുക്ക് ഓരോ വശത്തിൻ്റെയും കനം വെവ്വേറെ നിയന്ത്രിക്കാം:
അതിർത്തി-മുകളിൽ-വീതി- മുകളിലെ അതിർത്തിയുടെ കനം
അതിർത്തി-വലത്-വീതി- വലത് അതിർത്തിയുടെ കനം
അതിർത്തി-താഴെ വീതി- താഴത്തെ അതിർത്തിയുടെ കനം
അതിർത്തി-ഇടത്-വീതി- ഇടത് കർബിൻ്റെ കനം
എന്നാൽ ചുരുക്കിയ ഒരു രൂപവും ഉണ്ടാകാം:
പി(ബോർഡർ വീതി: മുകളിൽ വലത് താഴെ ഇടത്;)(മുകളിൽ വലത് താഴെ ഇടത്).
അതിർത്തി വീതി സജ്ജമാക്കാൻ കഴിയും:
അക്കങ്ങളിൽ DIV(ബോർഡർ വീതി:5px), പൂജ്യം മുതൽ അനന്തത വരെ, അതായത്. പോസിറ്റീവ്.
നേർത്ത- നേർത്ത ബോർഡർ, DIV(ബോർഡർ വീതി: നേർത്ത)
ഇടത്തരം- ഇടത്തരം ബോർഡർ, DIV(ബോർഡർ-വീതി:ഇടത്തരം)
കട്ടിയുള്ള- കട്ടിയുള്ള ബോർഡർ, DIV(ബോർഡർ വീതി:കട്ടിയുള്ള)
അക്കങ്ങൾ വ്യക്തമാണ്, എന്നാൽ ഈ മൂല്യങ്ങൾ ഉപയോഗിച്ച് ഇതെല്ലാം ബ്രൗസറിനെ ആശ്രയിച്ചിരിക്കുന്നു, പക്ഷേ ഇപ്പോഴും നേർത്ത<= medium <= thick
.
ഉപയോഗിച്ച് ബോർഡറിൻ്റെ നിറവും നമുക്ക് നിയന്ത്രിക്കാം അതിർത്തി നിറംഅല്ലെങ്കിൽ കൂടുതൽ കൃത്യമായി പറഞ്ഞാൽ, ഓരോ വശത്തിൻ്റെയും നിറം:
ബോർഡർ-മുകളിലെ നിറംമുകളിലെ ബോർഡർ നിറം;
അതിർത്തി-വലത്-നിറംവലത് ബോർഡർ നിറം;
അതിർത്തി-താഴെ നിറംതാഴെയുള്ള ബോർഡർ നിറം;
ബോർഡർ-ഇടത്-നിറംഇടതുവശത്ത് ബോർഡർ നിറം.
വർണ്ണ മൂല്യം സജ്ജീകരിച്ചിരിക്കുന്നു നിറം, അതായത്. 16 നിറങ്ങളിൽ ഒന്ന്: അക്വാ, കറുപ്പ്, നീല, ഫ്യൂഷിയ, ഗ്രേ, പച്ച, നാരങ്ങ, മെറൂൺ, നേവി, ഒലിവ്, പർപ്പിൾ, ചുവപ്പ്, വെള്ളി, ടീൽ, വെള്ള അല്ലെങ്കിൽ മഞ്ഞ, നിങ്ങൾക്ക് നിറങ്ങൾ സജ്ജീകരിക്കാനും കഴിയും: നിറം:#000000, നിറം:#AF0 , നിറം:rgb(255,0,0)അഥവാ നിറം:rgb(100%, 0%, 0%).
നിങ്ങൾ ഏത് വർണ്ണ സ്കീം തിരഞ്ഞെടുത്താലും, ബ്രൗസറുകൾ അതിനെ തുടർന്നും പരിവർത്തനം ചെയ്യും നിറം:rgb(255,0,0). ഉദാഹരണത്തിന് നിറം: നാരങ്ങ = നിറം:#00ff00 = നിറം:#0F0 = നിറം:rgb(0%, 100%, 0%), എന്നാൽ ബ്രൗസറിന് എല്ലാം സമാനമാണ് നിറം:rgb(0,255,0), അതായത്. അത് ഈ മൂല്യം കണക്കാക്കും.
ബോർഡറിൻ്റെ കനവും നിറവും HTML-ന് നിയന്ത്രിക്കാൻ കഴിയുമെങ്കിൽ, ശൈലി( അതിർത്തി ശൈലി) CSS മാത്രം!!!
ശൈലി ഓരോ വശത്തും വെവ്വേറെ നിയന്ത്രിക്കാം:
ബോർഡർ-ടോപ്പ്-സ്റ്റൈൽമുകളിലെ അതിർത്തി ശൈലി;
അതിർത്തി-വലത്-ശൈലിവലത് ബോർഡർ ശൈലി;
ബോർഡർ-ബോട്ടം-സ്റ്റൈൽതാഴെയുള്ള അതിർത്തി ശൈലി;
ബോർഡർ-ഇടത് ശൈലിഇടത് വശത്തെ ബോർഡർ ശൈലി.
ഇപ്പോൾ നമുക്ക് ശൈലി മൂല്യങ്ങൾ നോക്കാം:
1)ബോർഡർ ശൈലി: ഒന്നുമില്ല- ഇതാണ് ബോർഡർ വീതി:0 എന്നതിന് സമാനമായ ഡിഫോൾട്ട് മൂല്യം.
2)ബോർഡർ ശൈലി:മറഞ്ഞിരിക്കുന്നു- അതേ കാര്യം, പട്ടികകൾ ഒഴികെ, ഞങ്ങൾ പിന്നീട് നോക്കും.
3)ബോർഡർ-സ്റ്റൈൽ:ഡോട്ടഡ്- ഡോട്ടുകൾ കൊണ്ട് നിർമ്മിച്ച ഒരു അതിർത്തി.
4)ബോർഡർ-സ്റ്റൈൽ: ഡാഷ്- ഒരു ഡോട്ട് ലൈനിൽ നിന്ന് നിർമ്മിച്ച ബോർഡർ.
5)ബോർഡർ ശൈലി: സോളിഡ്- ഒരു സോളിഡ് ലൈൻ കൊണ്ട് നിർമ്മിച്ച ഒരു അതിർത്തി, അതായത്. HTML ലെ പോലെ.
6)ബോർഡർ-സ്റ്റൈൽ:ഇരട്ട- ഇരട്ട സോളിഡ് ലൈൻ കൊണ്ട് നിർമ്മിച്ച ഒരു ബോർഡർ, ഇവിടെ നിങ്ങൾക്ക് കുറഞ്ഞത് 3 പിക്സലുകളുടെ ബോർഡർ വീതി ആവശ്യമാണ്.
7)ബോർഡർ-സ്റ്റൈൽ:ഗ്രോവ്- ബോർഡർ ക്യാൻവാസിൽ നിന്ന് മുറിച്ചതായി തോന്നുന്നു.
8)ബോർഡർ-സ്റ്റൈൽ: റിഡ്ജ്- ബോർഡർ ക്യാൻവാസിന് മുകളിൽ നീണ്ടുനിൽക്കുന്നതായി തോന്നുന്നു.
9)ബോർഡർ-സ്റ്റൈൽ:ഇൻസെറ്റ്- മുഴുവൻ ബോക്സും ക്യാൻവാസിൽ അമർത്തിപ്പിടിച്ചതായി തോന്നുന്നു.
10)ബോർഡർ ശൈലി:ആരംഭം- മുമ്പത്തേതിൻ്റെ വിപരീതം.
ചില ബ്രൗസറുകൾ മൂല്യങ്ങൾ അവഗണിച്ചേക്കാം: ഡോട്ട്, ഡാഷ്, ഡബിൾ, ഗ്രോവ്, റിഡ്ജ്, ഇൻസെറ്റ്, ഔട്ട്സെറ്റ് എന്നിവ സോളിഡ് ആയി പ്രദർശിപ്പിക്കുക, അതായത്. ഒരു സാധാരണ അതിർത്തി.
തീർച്ചയായും ഇതെല്ലാം ശരിയാണ്, എന്നാൽ മുകളിലുള്ള എല്ലാ ഉദാഹരണങ്ങളും പ്രവർത്തന തത്വം മാത്രമാണ്, മെക്കാനിസമല്ല.
റൂൾ പ്രോപ്പർട്ടി അതിർത്തിസൂചിപ്പിക്കുന്നത് (ബോർഡർ: സൈസ് സ്റ്റൈൽ കളർ;), മൂന്ന് മൂല്യങ്ങളും നിലവിലുണ്ടെങ്കിൽ ഈ നിയമം തൃപ്തികരമാണ്, ഉദാഹരണത്തിന്, ഈ ശ്രേണിയിൽ മാത്രം H1(ബോർഡർ: 5px ഇരട്ട ചുവപ്പ്;), എന്നാൽ ഈ മൂല്യങ്ങൾ മാർക്ക്അപ്പ് ഭാഷകൾ നൽകിയിട്ടുണ്ടെങ്കിൽ ഒഴിവാക്കലുകൾ ഉണ്ടാകാം, ഉദാഹരണത്തിന് ഒരു പട്ടിക പട്ടിക(ബോർഡർ: 2px), അതായത്. ഒരു മൂല്യം മാത്രമേ വ്യക്തമാക്കിയിട്ടുള്ളൂ.
മുഴുവൻ ബോർഡറും അല്ല, ഓരോ ഭാഗവും വെവ്വേറെ നിയന്ത്രിക്കുന്നതിന്, നിയമങ്ങളുണ്ട്:
(ബോർഡർ ടോപ്പ്: സൈസ് സ്റ്റൈൽ കളർ;)മുകളിലെ നിയന്ത്രണ നിയന്ത്രണം;
(അതിർത്തി-വലത്: വലിപ്പം ശൈലി നിറം;)വലതുവശത്ത് കർബ് നിയന്ത്രണം;
(ബോർഡർ-ബോട്ടം: സൈസ് സ്റ്റൈൽ കളർ;)താഴെയുള്ള നിയന്ത്രണ നിയന്ത്രണം;
(ബോർഡർ-ഇടത്: വലിപ്പം ശൈലി നിറം;)ഇടതുവശത്ത് കർബ് നിയന്ത്രണം.
ഈ നിയമങ്ങൾ വ്യക്തിഗതമായി അല്ലെങ്കിൽ എല്ലാം ഒരുമിച്ച് ഉപയോഗിക്കാം.
ഒഴിവാക്കൽ ഈ നിയമമാണ്:
H1(
ബോർഡർ: 4px ഖര പച്ച;
}
കാര്യം, CSS-ൽ അവസാന നിയമത്തിന് ഏറ്റവും ഉയർന്ന മുൻഗണനയുണ്ട്, ഈ സാഹചര്യത്തിൽ ബോർഡർ പ്രോപ്പർട്ടിയിൽ ബോർഡർ-ഇടത് അടങ്ങിയിരിക്കുന്നു, അതിനാൽ ബോർഡർ-ഇടത് നിയമം അവഗണിക്കപ്പെടും, ഇതുപോലെ ശരിയായി:
H1(
ബോർഡർ: 4px ഖര പച്ച;
ബോർഡർ-ഇടത്: 2px ഇരട്ട ചുവപ്പ്;
}
ആദ്യം, മുഴുവൻ ബോർഡറിനും ഞങ്ങൾ നിയമങ്ങൾ സജ്ജമാക്കി, തുടർന്ന് വ്യക്തിഗത വിഭാഗങ്ങൾക്കായി.
ടേബിളുകളിലും മറ്റ് ഒഴിവാക്കലുകളിലും എത്തുമ്പോൾ ചില പ്രോപ്പർട്ടികൾ നോക്കാം എന്നതൊഴിച്ചാൽ, ഘടകങ്ങൾക്കുള്ള ബോർഡറുകൾക്കായി എനിക്ക് എല്ലാം ഉണ്ട്.
CSS: അതിർത്തി. മൂലക അതിരുകൾ.
CSS3 ബോർഡറുകൾ
CSS3 ബോർഡറുകൾ
CSS3 ഉപയോഗിച്ച്, നിങ്ങൾക്ക് വൃത്താകൃതിയിലുള്ള ബോർഡറുകൾ സൃഷ്ടിക്കാനും കണ്ടെയ്‌നറുകളിൽ ഷാഡോകൾ ചേർക്കാനും ഫോട്ടോഷോപ്പ് പോലുള്ള ഡിസൈൻ പ്രോഗ്രാം ഉപയോഗിക്കാതെ തന്നെ ഒരു ചിത്രം ബോർഡറായി ഉപയോഗിക്കാനും കഴിയും.
ഈ പാഠത്തിൽ, ഒരു ബോർഡറിൻ്റെ ഇനിപ്പറയുന്ന ഗുണങ്ങളെക്കുറിച്ച് നിങ്ങൾ പഠിക്കും:
- ബോർഡർ-റേഡിയസ്
- പെട്ടി-നിഴൽ
- അതിർത്തി-ചിത്രം
ബ്രൗസർ പിന്തുണ
| സ്വത്ത് | ബ്രൗസർ പിന്തുണ |
|---|---|
| ബോർഡർ-റേഡിയസ് | |
| പെട്ടി-നിഴൽ | |
| അതിർത്തി-ചിത്രം |
Internet Explorer 9 ചില പുതിയ ബോർഡർ പ്രോപ്പർട്ടികൾ പിന്തുണയ്ക്കുന്നു.
ഫയർഫോക്സിന് ബോർഡർ ഇമേജിനായി -moz- പ്രിഫിക്സ് ആവശ്യമാണ്.
Chrome-നും Safari-നും ബോർഡർ ഇമേജിനായി -webkit- പ്രിഫിക്സ് ആവശ്യമാണ്.
ഓപ്പറയ്ക്ക് ബോർഡർ ഇമേജിന് -o- എന്ന പ്രിഫിക്സ് ആവശ്യമാണ്.
സഫാരിക്ക് ബോക്സ് ഷാഡോയ്ക്ക് -വെബ്‌കിറ്റ്- പ്രിഫിക്‌സും ആവശ്യമാണ്.
ഓപ്പറ പുതിയ ബോർഡർ പ്രോപ്പർട്ടികൾ പിന്തുണയ്ക്കുന്നു.
CSS3 വൃത്താകൃതിയിലുള്ള കോണുകൾ
CSS2-ൽ വൃത്താകൃതിയിലുള്ള മൂലകൾ ചേർക്കുന്നത് ബുദ്ധിമുട്ടുള്ള കാര്യമായിരുന്നു. ഓരോ ആംഗിളിനും വ്യത്യസ്തമായ ചിത്രം ഉപയോഗിക്കേണ്ടി വന്നു.
CSS3-ൽ, വൃത്താകൃതിയിലുള്ള കോണുകൾ സൃഷ്ടിക്കുന്നത് എളുപ്പമാണ്.
CSS3-ൽ, വൃത്താകൃതിയിലുള്ള കോണുകൾ സൃഷ്ടിക്കാൻ ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു:
ഈ ബ്ലോക്കിന് വൃത്താകൃതിയിലുള്ള മൂലകളുണ്ട്!
CSS3 കണ്ടെയ്നർ ഷാഡോ
CSS3-ൽ, കണ്ടെയ്‌നറുകളിൽ ഒരു നിഴൽ ചേർക്കാൻ ബോക്സ്-ഷാഡോ പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു:
CSS3 ബോർഡർ-ചിത്രം
CSS3 ബോർഡർ-ഇമേജ് പ്രോപ്പർട്ടി വഴി, നിങ്ങൾക്ക് ഒരു ബോർഡർ സൃഷ്ടിക്കാൻ ഒരു ചിത്രം ഉപയോഗിക്കാം:
ഒരു ഇമേജ് ബോർഡർ വ്യക്തമാക്കാൻ ബോർഡർ-ഇമേജ് പ്രോപ്പർട്ടി നിങ്ങളെ അനുവദിക്കുന്നു!
ബോർഡർ സൃഷ്ടിക്കാൻ ഉപയോഗിച്ച യഥാർത്ഥ ചിത്രം നിങ്ങളുടേതാണ്:
പുതിയ ബോർഡർ പ്രോപ്പർട്ടികൾ
അതിർത്തി ആട്രിബ്യൂട്ട്
അതിർത്തി ആട്രിബ്യൂട്ട്, ടാഗ്
