മൊഡ്യൂൾ CSS ടെക്സ്റ്റ്ഫോർമാറ്റ് ചെയ്ത ടെക്സ്റ്റിലേക്കും ലൈൻ റാപ്പിംഗിലേക്കും സോഴ്സ് ടെക്സ്റ്റിന്റെ വിവർത്തനം നിയന്ത്രിക്കുന്ന CSS ഫംഗ്ഷനുകൾ വിവരിക്കുന്നു. വിവിധ CSS പ്രോപ്പർട്ടികൾ കേസ് പരിവർത്തനം, വൈറ്റ്സ്പേസ് കൈകാര്യം ചെയ്യൽ, ടെക്സ്റ്റ്, ലൈൻ റാപ്പിംഗ് നിയമങ്ങൾ, വിന്യാസം, സ്പെയ്സിംഗ്, ഇൻഡന്റേഷൻ എന്നിവയിൽ നിയന്ത്രണം നൽകുന്നു.
വാചകത്തിന്റെ അടിസ്ഥാന യൂണിറ്റ് ചിഹ്നമാണ്. എന്നിരുന്നാലും, എഴുത്ത് സംവിധാനങ്ങൾ എല്ലായ്പ്പോഴും അടിസ്ഥാന ഇംഗ്ലീഷ് അക്ഷരമാല പോലെ ലളിതമല്ല എന്നതിനാൽ, യഥാർത്ഥത്തിൽ ഒരു ചിഹ്നം എന്താണ് എന്നത് ഈ പദം ഉപയോഗിക്കുന്ന സന്ദർഭത്തെ ആശ്രയിച്ചിരിക്കുന്നു. ഉദാഹരണത്തിന്, കൊറിയൻ എഴുത്ത് സമ്പ്രദായത്തിൽ, ഒരു അക്ഷരത്തിന്റെ (ഉദാ. 한 = ഹാൻ) ഓരോ ചതുര പ്രതിനിധാനവും ഒരു പ്രതീകമായി കണക്കാക്കാം. എന്നിരുന്നാലും, ചതുര ചിഹ്നത്തിൽ നിരവധി അക്ഷരങ്ങൾ അടങ്ങിയിരിക്കുന്നു, അവ ഓരോന്നും ഒരു ശബ്ദരൂപത്തെ പ്രതിനിധീകരിക്കുന്നു (ഉദാഹരണത്തിന്, ㅎ = h, ㅏ = a, ㄴ = n), ഇവ ഓരോന്നും ഒരു ചിഹ്നമായി കണക്കാക്കാം.
1. ടെക്സ്റ്റ് ട്രാൻസ്ഫോർമിംഗ്: ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം പ്രോപ്പർട്ടി
ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം പ്രോപ്പർട്ടി ശൈലികൾ ടെക്സ്റ്റ്. ഇത് അടിസ്ഥാനപരമായ ഉള്ളടക്കത്തെ ബാധിക്കില്ല കൂടാതെ പ്ലെയിൻ ടെക്സ്റ്റ് കോപ്പി-പേസ്റ്റ് പ്രവർത്തനത്തിന്റെ ഉള്ളടക്കത്തെ ബാധിക്കരുത്.
സ്വത്ത് പാരമ്പര്യമായി ലഭിച്ചതാണ്.
വാക്യഘടന
ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം: ഒന്നുമില്ല; ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം: ക്യാപിറ്റലൈസ്; ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം: വലിയക്ഷരം; ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം: ചെറിയക്ഷരം; ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം: അനന്തരാവകാശം; ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം: പ്രാരംഭ;
2. സ്പെയ്സുകളും ലൈൻ ബ്രേക്കുകളും കൈകാര്യം ചെയ്യുന്നു: വൈറ്റ്-സ്പേസ് പ്രോപ്പർട്ടി
വൈറ്റ്-സ്പേസ് പ്രോപ്പർട്ടി ഒരു ഘടകത്തിനുള്ളിലെ വാക്കുകൾക്കും ലൈൻ ബ്രേക്കുകൾക്കുമിടയിലുള്ള ഇടങ്ങൾ കൈകാര്യം ചെയ്യുന്നു.
സ്വത്ത് പാരമ്പര്യമായി ലഭിച്ചതാണ്.
വൈറ്റ്-സ്പെയ്സ് | |
---|---|
മൂല്യങ്ങൾ: | |
സാധാരണ | സ്ഥിര മൂല്യം. വാക്കുകൾക്കിടയിൽ ഒരു ഇടം മാത്രമേ ചേർത്തിട്ടുള്ളൂ; അധിക സ്പെയ്സുകൾ നിരസിച്ചു. ആവശ്യമുള്ളപ്പോൾ മാത്രം വാചകം പൊതിയുന്നു. |
ഇപ്പോൾ റാപ്പ് | ഉപയോഗിക്കുമ്പോൾ ഒഴികെയുള്ള ലൈൻ ബ്രേക്കുകൾ നിരോധിക്കുന്നു . |
മുൻ | ടെക്സ്റ്റിലെ സ്പെയ്സുകൾ അവഗണിക്കപ്പെടുന്നില്ല; ബ്രൗസർ അധിക സ്പെയ്സുകളും ലൈൻ ബ്രേക്കുകളും പ്രദർശിപ്പിക്കുന്നു. |
പ്രീ-റാപ്പ് | ആവശ്യമുള്ളിടത്ത് ലൈൻ ബ്രേക്കുകൾ ചേർത്ത് വാചകത്തിൽ വൈറ്റ്സ്പെയ്സ് സംരക്ഷിക്കുന്നു. |
പ്രീ-ലൈൻ | ഒഴികെയുള്ള അധിക ഇടങ്ങൾ നീക്കം ചെയ്യുന്നു . |
ഇടവേള-സ്ഥലങ്ങൾ | സ്വഭാവം പ്രീ-റാപ്പിന് സമാനമാണ്, അത് ഒഴികെ: നീക്കം ചെയ്യാനാവാത്ത സ്പെയ്സുകളുടെ ഏത് ശ്രേണിയും എല്ലായ്പ്പോഴും സ്പെയ്സ് എടുക്കുന്നു, വരിയുടെ അവസാനം ഉൾപ്പെടെ; സ്പെയ്സുകൾക്കിടയിലുള്ളതുൾപ്പെടെ, നീക്കം ചെയ്യാനാവാത്ത ഓരോ സ്പെയ്സിന് ശേഷവും ഒരു ലൈൻ ബ്രേക്കിന്റെ സാധ്യത നിലനിൽക്കുന്നു. |
പ്രാഥമിക | |
അനന്തരാവകാശം |
വാക്യഘടന
വൈറ്റ്-സ്പെയ്സ്: സാധാരണ; വൈറ്റ്-സ്പെയ്സ്: നൗറാപ്പ്; വൈറ്റ്-സ്പെയ്സ്: പ്രീ; വൈറ്റ്-സ്പേസ്: പ്രീ-റാപ്പ്; വൈറ്റ്-സ്പെയ്സ്: പ്രീ-ലൈൻ; വൈറ്റ്-സ്പേസ്: ബ്രേക്ക്-സ്പേസ്; വൈറ്റ്-സ്പെയ്സ്: അനന്തരാവകാശം; വൈറ്റ്-സ്പെയ്സ്: പ്രാരംഭം;
3. ടാബ് ക്രമീകരണങ്ങൾ: ടാബ് വലുപ്പത്തിലുള്ള പ്രോപ്പർട്ടി
TAB കീ നിർമ്മിക്കുന്ന ഇൻഡന്റേഷന്റെ അളവ് മാറ്റാൻ ടാബ് സൈസ് പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു. വൈറ്റ്-സ്പേസ് പ്രോപ്പർട്ടി പ്രീ-ലൈൻ, നോർമൽ അല്ലെങ്കിൽ നൗറാപ്പ് എന്നീ മൂന്ന് മൂല്യങ്ങളിൽ ഒന്നായി സജ്ജീകരിക്കുമ്പോൾ പ്രോപ്പർട്ടി മൂല്യങ്ങൾ അവഗണിക്കപ്പെടും.
ഘടകങ്ങൾക്ക് മാത്രം പ്രവർത്തിക്കുന്നു
സ്വത്ത് പാരമ്പര്യമായി ലഭിച്ചതാണ്.
വാക്യഘടന
ടാബ് വലുപ്പം: 0; ടാബ് വലുപ്പം: 10px; ടാബ് വലുപ്പം: അനന്തരാവകാശം; ടാബ് വലുപ്പം: പ്രാരംഭം;
4. ലൈൻ ബ്രേക്കുകളും വാക്കുകളുടെ അതിരുകളും
ലൈൻ-ലെവൽ ഉള്ളടക്കം ലൈനുകളായി വിഭജിക്കുമ്പോൾ, അത് ലീനിയർ ബ്ലോക്കുകളായി വിഭജിക്കപ്പെടുന്നു. ഈ ഇടവേളയെ ലൈൻ ബ്രേക്ക് എന്ന് വിളിക്കുന്നു.
ഒരു പുതിയ ലൈൻ അല്ലെങ്കിൽ ടാഗ് പോലുള്ള വ്യക്തമായ ലൈൻ ബ്രേക്ക് നിയന്ത്രണങ്ങൾ കാരണം ഒരു ലൈൻ തകരുമ്പോൾ
, ഒരു ബ്ലോക്കിന്റെ തുടക്കമോ അവസാനമോ നിർബന്ധിത ലൈൻ ബ്രേക്ക് ആണ്.
ഉള്ളടക്കം പൊതിയുന്നത് കാരണം ഒരു ലൈൻ പൊട്ടിപ്പോകുകയാണെങ്കിൽ, അവിടെ ബ്രൗസർ അനാവശ്യമായ ലൈൻ ബ്രേക്കുകൾ സൃഷ്ടിക്കുന്നുവെങ്കിൽ, അത് ഒരു സോഫ്റ്റ് റാപ്പാണ്.
4.1 അക്ഷരങ്ങൾക്കുള്ള നിയമങ്ങൾ ലംഘിക്കുക: വാക്ക് ബ്രേക്ക് പ്രോപ്പർട്ടി
അക്ഷരങ്ങൾക്കിടയിലുള്ള മൃദു ഹൈഫനേഷന്റെ സാധ്യതയെ വേഡ്-ബ്രേക്ക് പ്രോപ്പർട്ടി നിർണ്ണയിക്കുന്നു, അതായത്. വാചകത്തിന്റെ വരികൾ തകർക്കുന്നത് എപ്പോഴാണ് സ്വീകാര്യമാകുന്നത്? പ്രത്യേകിച്ചും, അടുത്തുള്ള ടൈപ്പോഗ്രാഫിക് ലെറ്റർ യൂണിറ്റുകൾ കൂടാതെ/അല്ലെങ്കിൽ അക്കങ്ങൾക്കിടയിൽ സോഫ്റ്റ് ഹൈഫനേഷൻ നിലവിലുണ്ടോ എന്ന് ഇത് നിയന്ത്രിക്കുന്നു. സ്പെയ്സുകൾ സൃഷ്ടിച്ച സോഫ്റ്റ്-ട്രാൻസ്ഫർ അവസരങ്ങളെ നിയന്ത്രിക്കുന്ന നിയമങ്ങളെ ഇത് ബാധിക്കില്ല.
സ്വത്ത് പാരമ്പര്യമായി ലഭിച്ചതാണ്.
വാക്യഘടന
വേഡ്-ബ്രേക്ക്: സാധാരണ; വേഡ്-ബ്രേക്ക്: ബ്രേക്ക്-എല്ലാം; വാക്ക്-ബ്രേക്ക്: സൂക്ഷിക്കുക-എല്ലാം; വാക്ക്-ബ്രേക്ക്: അനന്തരാവകാശം; വേഡ്-ബ്രേക്ക്: പ്രാരംഭ;
4.2 ലൈൻ ബ്രേക്ക്: ലൈൻ ബ്രേക്ക്
ലൈൻ-ബ്രേക്ക് പ്രോപ്പർട്ടി ഒരു ഘടകത്തിനുള്ളിൽ പ്രയോഗിക്കുന്ന ലൈൻ-ബ്രേക്കിംഗ് നിയമങ്ങളെ നിർവചിക്കുന്നു, പ്രത്യേകിച്ചും ലൈൻ-ബ്രേക്കിംഗ് വിരാമചിഹ്നങ്ങളോടും ചിഹ്നങ്ങളോടും എങ്ങനെ ഇടപെടുന്നു.
സ്വത്ത് പാരമ്പര്യമായി ലഭിച്ചതാണ്.
ലൈൻ-ബ്രേക്ക് | |
---|---|
മൂല്യങ്ങൾ: | |
ഓട്ടോ | ബ്രൗസർ ഉപയോഗിക്കാനുള്ള ലൈൻ ബ്രേക്കിംഗ് നിയന്ത്രണങ്ങളുടെ ഒരു കൂട്ടം നിർവചിക്കുന്നു, അത് ലൈൻ ദൈർഘ്യത്തെ ആശ്രയിച്ച് വ്യത്യാസപ്പെടാം, ഉദാഹരണത്തിന്, ചെറിയ ലൈനുകൾക്കായി ലൈൻ ബ്രേക്കിംഗ് നിയമങ്ങളുടെ കുറച്ച് നിയന്ത്രണങ്ങൾ ഉപയോഗിക്കുക. സ്ഥിര മൂല്യം. |
അയഞ്ഞ | ലൈൻ ബ്രേക്കിംഗ് നിയമങ്ങളുടെ ഏറ്റവും കുറഞ്ഞ നിയന്ത്രിത സെറ്റ് ഉപയോഗിച്ച് ടെക്സ്റ്റ് ലംഘിക്കുന്നു. പത്രങ്ങൾ പോലെയുള്ള ചെറിയ വരികൾക്കായി സാധാരണയായി ഉപയോഗിക്കുന്നു. |
സാധാരണ | ലൈൻ ബ്രേക്കിംഗ് നിയമങ്ങളുടെ ഏറ്റവും സാധാരണമായ സെറ്റ് ഉപയോഗിച്ച് ടെക്സ്റ്റ് തകർക്കുന്നു. |
കണിശമായ | ലൈൻ ബ്രേക്കിംഗ് നിയമങ്ങളുടെ കർശനമായ സെറ്റ് ഉപയോഗിച്ച് വാചകം തകർക്കുന്നു. |
പ്രാഥമിക | പ്രോപ്പർട്ടി മൂല്യം സ്ഥിര മൂല്യത്തിലേക്ക് സജ്ജമാക്കുന്നു. |
അനന്തരാവകാശം | മാതൃ ഘടകത്തിൽ നിന്ന് പ്രോപ്പർട്ടി മൂല്യം അവകാശമാക്കുന്നു. |
വാക്യഘടന
ലൈൻ ബ്രേക്ക്: ഓട്ടോ; ലൈൻ-ബ്രേക്ക്: അയഞ്ഞ; ലൈൻ-ബ്രേക്ക്: സാധാരണ; ലൈൻ-ബ്രേക്ക്: കർശനമായ; ലൈൻ-ബ്രേക്ക്: അനന്തരാവകാശം; ലൈൻ-ബ്രേക്ക്: പ്രാരംഭ;
4.3 ഹൈഫനേഷൻ: ഹൈഫൻസ് പ്രോപ്പർട്ടി
ടെക്സ്റ്റിന്റെ ഒരു വരിയിൽ മൃദു-ഹൈഫനേഷൻ കഴിവുകൾ സൃഷ്ടിക്കാൻ ഹൈഫനുകളെ അനുവദിക്കുമോ എന്ന് ഹൈഫൻസ് പ്രോപ്പർട്ടി നിർണ്ണയിക്കുന്നു.
ഖണ്ഡികകളുടെ ഒഴുക്ക് മെച്ചപ്പെടുത്തുന്നതിന് സാധാരണയായി തകർക്കാൻ അനുവദിക്കാത്ത വാക്കുകളുടെ നിയന്ത്രിത ബ്രേക്കിംഗാണ് ഹൈഫനേഷൻ. സാധാരണഗതിയിൽ, പദങ്ങൾ സിലബിക് അല്ലെങ്കിൽ മോർഫെമിക് അതിരുകളോടെയും വിഭജനത്തിന്റെ ദൃശ്യ സൂചനയോടെയും വിഭജിക്കപ്പെടുന്നു (സാധാരണയായി ഒരു ഹൈഫൻ തിരുകുന്നതിലൂടെ, ‐). ചില സന്ദർഭങ്ങളിൽ, ഹൈഫനേഷനുകൾക്ക് ഒരു വാക്കിന്റെ അക്ഷരവിന്യാസം മാറ്റാനും കഴിയും. ഏത് സാഹചര്യത്തിലും, വേഡ് റാപ്പ് ഒരു റെൻഡറിംഗ് ഇഫക്റ്റ് മാത്രമാണ്: ഇത് പ്രമാണത്തിന്റെ ഉള്ളടക്കത്തെയോ ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കുന്നതിനോ തിരയലിനെയോ ബാധിക്കരുത്.
CSS ടെക്സ്റ്റ് ലെവൽ 3 കൃത്യമായ വേഡ് ഹൈഫനേഷൻ നിയമങ്ങൾ നിർവചിക്കുന്നില്ല, അതിനാൽ ഭാഷയ്ക്ക് അനുയോജ്യമായ ഹൈഫനേഷൻ പോയിന്റുകൾ തിരഞ്ഞെടുക്കാൻ ശുപാർശ ചെയ്യുന്നു.
സ്വത്ത് പാരമ്പര്യമായി ലഭിച്ചതാണ്.
ഹൈഫനുകൾ | |
---|---|
മൂല്യങ്ങൾ: | |
ഒന്നുമില്ല | വാക്കിനുള്ളിലെ പ്രതീകങ്ങൾ ഹൈഫനേഷൻ കഴിവുകളെ വ്യക്തമായി നിർവചിച്ചാലും, വാക്കുകൾ ഹൈഫനേറ്റ് ചെയ്യുന്നില്ല. |
മാനുവൽ | വാക്ക് ഹൈഫനേഷന്റെ (പ്രത്യേക പ്രതീകം -) സാധ്യതയെ വ്യക്തമായി സൂചിപ്പിക്കുന്ന പദത്തിനുള്ളിൽ ചിഹ്നങ്ങൾ ഉള്ള സ്ഥലങ്ങളിൽ മാത്രമേ വാക്കുകൾ ഹൈഫനേറ്റ് ചെയ്യപ്പെടുകയുള്ളൂ. സ്ഥിര മൂല്യം. |
ഓട്ടോ | സോപാധിക ഹൈഫൻ വ്യക്തമായി സൂചിപ്പിക്കുന്നതിന് പുറമെ ഭാഷയ്ക്ക് അനുയോജ്യമായ ഹൈഫനേഷൻ റിസോഴ്സ് ഉപയോഗിച്ച് സ്വയമേവ നിർണ്ണയിക്കുന്ന ഹൈഫനേഷൻ സാധ്യതകളായി വാക്കുകളെ വിഭജിക്കാം. ശരിയായ ഓട്ടോമാറ്റിക് വേഡ് റാപ്പിംഗ് ലഭിക്കുന്നതിന് നിങ്ങളുടെ ഉള്ളടക്കത്തിന്റെ ഭാഷ നിങ്ങൾ സജ്ജീകരിക്കണം (ഉദാഹരണത്തിന്, HTML lang ആട്രിബ്യൂട്ട് അല്ലെങ്കിൽ HTTP ഉള്ളടക്ക-ഭാഷാ തലക്കെട്ട് ഉപയോഗിച്ച്). |
പ്രാഥമിക | പ്രോപ്പർട്ടി മൂല്യം സ്ഥിര മൂല്യത്തിലേക്ക് സജ്ജമാക്കുന്നു. |
അനന്തരാവകാശം | മാതൃ ഘടകത്തിൽ നിന്ന് പ്രോപ്പർട്ടി മൂല്യം അവകാശമാക്കുന്നു. |
വാക്യഘടന
ഹൈഫൻസ്: ഒന്നുമില്ല; ഹൈഫൻസ്: മാനുവൽ; ഹൈഫൻസ്: ഓട്ടോ; ഹൈഫനുകൾ: അനന്തരാവകാശം; ഹൈഫൻസ്: പ്രാരംഭം;
4.4 റാപ്പർ ബ്ലോക്ക് ഓവർഫ്ലോ: ഓവർഫ്ലോ-റാപ്പ്/വേഡ്-റാപ്പ് പ്രോപ്പർട്ടി
ഓവർഫ്ലോ-റാപ്പ് പ്രോപ്പർട്ടി (അല്ലെങ്കിൽ അതിന്റെ അവസാനിപ്പിച്ച പേര് വേഡ്-റാപ്പ്) ലൈൻ ബ്ലോക്ക് ഓവർഫ്ലോ ചെയ്യുന്നത് തടയാൻ പരിഹരിക്കപ്പെടാത്ത പോയിന്റുകളിൽ ഒരു നോൺ-ബ്രേക്കിംഗ് ലൈൻ തകർക്കാൻ കഴിയുമോ എന്ന് വ്യക്തമാക്കുന്നു. വൈറ്റ്-സ്പെയ്സ് പ്രോപ്പർട്ടി പൊതിയാൻ അനുവദിക്കുമ്പോൾ പ്രവർത്തിക്കുന്നു.
സ്വത്ത് പാരമ്പര്യമായി ലഭിച്ചതാണ്.
overflow-wrap, word-wrap | |
---|---|
മൂല്യങ്ങൾ: | |
സാധാരണ | നോൺ-ബ്രേക്കിംഗ് ലൈനുകൾ അനുവദനീയമായ ബ്രേക്ക് പോയിന്റുകളിൽ മാത്രമേ തകർക്കാൻ കഴിയൂ. സ്ഥിര മൂല്യം. |
ഇടവേള-വാക്ക് | |
എവിടെയും | വരിയിൽ മറ്റ് സ്വീകാര്യമായ ബ്രേക്ക് പോയിന്റുകൾ ഇല്ലെങ്കിൽ, ഒരു അനിയന്ത്രിതമായ പോയിന്റിൽ പ്രതീകങ്ങളുടെ അനിയന്ത്രിതമായ ശ്രേണി തകർക്കാൻ കഴിയും. യഥാർത്ഥ വാചകത്തെ ബാധിക്കാതെ വിഷ്വൽ ഡിസ്പ്ലേയെ മാത്രം ബാധിക്കുന്നു. ലൈൻ ബ്രേക്ക് പോയിന്റിൽ ഹൈഫൻ ഒന്നും ചേർത്തിട്ടില്ല. നിങ്ങളുടെ സ്വന്തം കുറഞ്ഞ ഉള്ളടക്ക അളവുകൾ കണക്കാക്കുമ്പോൾ എവിടെയും നിലവിലുള്ള സോഫ്റ്റ്-റാപ്പ് കഴിവുകൾ കണക്കിലെടുക്കുന്നു. |
പ്രാഥമിക | പ്രോപ്പർട്ടി മൂല്യം സ്ഥിര മൂല്യത്തിലേക്ക് സജ്ജമാക്കുന്നു. |
അനന്തരാവകാശം | മാതൃ ഘടകത്തിൽ നിന്ന് പ്രോപ്പർട്ടി മൂല്യം അവകാശമാക്കുന്നു. |
വാക്യഘടന
ഓവർഫ്ലോ-റാപ്പ്: സാധാരണ; ഓവർഫ്ലോ-റാപ്പ്: ബ്രേക്ക്-വേഡ്; ഓവർഫ്ലോ-റാപ്പ്: എവിടെയും; ഓവർഫ്ലോ-റാപ്പ്: അനന്തരാവകാശം; ഓവർഫ്ലോ-റാപ്പ്: പ്രാരംഭം;
5. വരികളുടെ വിന്യാസവും ന്യായീകരണവും
ഒരു ലൈൻ ബ്ലോക്കിനുള്ളിൽ ഇൻലൈൻ ഉള്ളടക്കം എങ്ങനെ വിതരണം ചെയ്യപ്പെടുന്നു എന്നത് ലൈൻ വിന്യാസവും ന്യായീകരണവും നിയന്ത്രിക്കുന്നു.
5.1 ടെക്സ്റ്റ് വിന്യാസത്തിനുള്ള ചുരുക്കെഴുത്ത്: ടെക്സ്റ്റ് അലൈൻ പ്രോപ്പർട്ടി
ലീനിയർ ബ്ലോക്കുകളുടെ ഒരു ശേഖരമാണ് ടെക്സ്റ്റ് ബ്ലോക്ക്. ടെക്സ്റ്റ്-അലൈൻ പ്രോപ്പർട്ടി ടെക്സ്റ്റ്-അലൈൻ-എല്ലാം, ടെക്സ്റ്റ്-അലൈൻ-ലാസ്റ്റ് പ്രോപ്പർട്ടികൾ വ്യക്തമാക്കുകയും ഓരോ ലൈൻ ബോക്സിലെയും ലൈൻ-ലെവൽ ബോക്സുകൾ ലൈൻ ബോക്സിന്റെ ആരംഭ, അവസാന വശങ്ങളുമായി ബന്ധപ്പെട്ട് എങ്ങനെയാണ് വിന്യസിച്ചിരിക്കുന്നതെന്ന് വിവരിക്കുകയും ചെയ്യുന്നു. ജസ്റ്റിഫൈ-എല്ലാം അല്ലെങ്കിൽ മാച്ച്-പാരന്റ് ഒഴികെയുള്ള മൂല്യങ്ങൾ ടെക്സ്റ്റ്-അലൈൻ-എല്ലാത്തിനും നിയുക്തമാക്കുകയും ടെക്സ്റ്റ്-അലൈൻ-ലാസ്റ്റ് എന്നതിൽ യാന്ത്രികമായി പുനഃസജ്ജമാക്കുകയും ചെയ്യുന്നു.
സ്വത്ത് പാരമ്പര്യമായി ലഭിച്ചതാണ്.
ടെക്സ്റ്റ്-അലൈൻ | |
---|---|
മൂല്യങ്ങൾ: | |
ആരംഭിക്കുക | ലൈൻ-ലെവൽ ഉള്ളടക്കം ലൈൻ ബോക്സിന്റെ മുൻവശത്ത് വിന്യസിച്ചിരിക്കുന്നു. സ്ഥിര മൂല്യം. |
അവസാനിക്കുന്നു | ലൈൻ-ലെവൽ ഉള്ളടക്കം ലൈൻ ബോക്സിന്റെ പിൻഭാഗത്ത് വിന്യസിച്ചിരിക്കുന്നു. |
ഇടത്തെ | ലൈൻ-ലെവൽ ഉള്ളടക്കം ലൈൻ ബ്ലോക്ക് ലൈനിന്റെ ഇടതുവശത്ത് വിന്യസിച്ചിരിക്കുന്നു. വെർട്ടിക്കൽ റൈറ്റിംഗ് സിസ്റ്റങ്ങളിൽ, ഇത് ടെക്സ്റ്റിന്റെ ഓറിയന്റേഷൻ അനുസരിച്ച് ഫിസിക്കൽ ടോപ്പ് അല്ലെങ്കിൽ താഴത്തെ ആയിരിക്കും. |
ശരിയാണ് | ലൈൻ-ലെവൽ ഉള്ളടക്കം ലൈൻ ബ്ലോക്ക് ലൈനിന്റെ വലതുവശത്ത് വിന്യസിച്ചിരിക്കുന്നു. വെർട്ടിക്കൽ റൈറ്റിംഗ് സിസ്റ്റങ്ങളിൽ, ഇത് ടെക്സ്റ്റിന്റെ ഓറിയന്റേഷൻ അനുസരിച്ച് ഫിസിക്കൽ ടോപ്പ് അല്ലെങ്കിൽ താഴത്തെ ആയിരിക്കും. |
കേന്ദ്രം | ലൈൻ-ലെവൽ ഉള്ളടക്കം ലൈൻ ബോക്സിനുള്ളിൽ കേന്ദ്രീകരിച്ചിരിക്കുന്നു. |
ന്യായീകരിക്കുക | പാരന്റ് എലമെന്റിന്റെ ഇടത് വലത് അരികുകളിൽ അമർത്തി ലൈൻ മാർജിൻ കൃത്യമായി പൂരിപ്പിക്കുന്നതിന് വാചകം ലൈൻ ബോക്സിന്റെ വീതിയിലേക്ക് വിന്യസിച്ചിരിക്കുന്നു. ടെക്സ്റ്റ്-അലൈൻ-ലാസ്റ്റ് എന്നതിൽ മറ്റുവിധത്തിൽ വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, നിർബന്ധിത ബ്രേക്കിന് മുമ്പുള്ള അവസാന വരി അല്ലെങ്കിൽ ഒരു ബ്ലോക്കിന്റെ അവസാനം തുടക്കത്തിലേക്ക് വിന്യസിച്ചിരിക്കുന്നു. വാക്കുകൾക്കും അക്ഷരങ്ങൾക്കും ഇടയിലുള്ള ഇടങ്ങൾ വിതരണം ചെയ്യുന്നതിനാൽ എല്ലാ വരികളുടെയും നീളം തുല്യമായിരിക്കും. വ്യത്യസ്ത ബ്രൗസറുകൾ വാക്കുകൾക്കിടയിലുള്ള ഇൻഡന്റേഷനും അക്ഷരങ്ങൾ തമ്മിലുള്ള അകലവും വർദ്ധിപ്പിച്ചേക്കാം. |
എല്ലാം ന്യായീകരിക്കുക | ന്യായീകരിക്കുന്നതിന് ടെക്സ്റ്റ്-അലൈൻ-എല്ലാം, ടെക്സ്റ്റ്-അലൈൻ-ലാസ്റ്റ് എന്നിവയും സജ്ജീകരിക്കുന്നു, അവസാന വരിയും വിന്യസിക്കുന്നു. |
പൊരുത്തം-മാതാപിതാവ് | പാരമ്പര്യ മൂല്യവുമായി (അല്ലെങ്കിൽ രക്ഷകർത്താക്കൾ ഇല്ലെങ്കിൽ ബ്ലോക്ക് അടങ്ങുന്ന ഒറിജിനൽ) പാരമ്പര്യമായി ലഭിച്ച ആരംഭ അല്ലെങ്കിൽ അവസാന മൂല്യം വ്യാഖ്യാനിക്കപ്പെടുന്നു എന്നതൊഴിച്ചാൽ, മൂല്യം പാരമ്പര്യമായി തന്നെ പ്രവർത്തിക്കുന്നു, കൂടാതെ ഇടത് അല്ലെങ്കിൽ വലത് എന്നതിന്റെ കമ്പ്യൂട്ട് മൂല്യത്തിൽ കലാശിക്കുന്നു. |
അനന്തരാവകാശം | മാതൃ ഘടകത്തിൽ നിന്ന് പ്രോപ്പർട്ടി മൂല്യം അവകാശമാക്കുന്നു. |
വാക്യഘടന
ടെക്സ്റ്റ്-അലൈൻ: ആരംഭിക്കുക; ടെക്സ്റ്റ്-അലൈൻ: അവസാനം; ടെക്സ്റ്റ്-അലൈൻ: ഇടത്; ടെക്സ്റ്റ്-അലൈൻ: വലത്; ടെക്സ്റ്റ്-അലൈൻ: സെന്റർ; ടെക്സ്റ്റ്-അലൈൻ: ന്യായീകരിക്കുക; ടെക്സ്റ്റ്-അലൈൻ: ന്യായീകരിക്കുക-എല്ലാം; ടെക്സ്റ്റ്-അലൈൻ: മാച്ച്-പാരന്റ്; ടെക്സ്റ്റ്-അലൈൻ: അനന്തരാവകാശം;
5.2 ഡിഫോൾട്ട് ടെക്സ്റ്റ് വിന്യാസം: ടെക്സ്റ്റ്-അലൈൻ-എല്ലാ പ്രോപ്പർട്ടിയും
ടെക്സ്റ്റ്-അലൈൻ-എല്ലാ പ്രോപ്പർട്ടിയും ടെക്സ്റ്റ്-അലൈൻ പ്രോപ്പർട്ടിയുടെ ഒരു ഷോർട്ട്ഹാൻഡ് പതിപ്പാണ്, അത് ബ്ലോക്ക് കണ്ടെയ്നറിലെ ഉള്ളടക്കത്തിന്റെ എല്ലാ വരികളുടെയും വിന്യാസം വ്യക്തമാക്കുന്നു, അവസാന വരികൾ ഒഴികെ, ടെക്സ്റ്റ്-അലൈൻ-ലാസ്റ്റ് ഉപയോഗിച്ച് അസാധുവാക്കുന്നു. ആരംഭം, അവസാനം, ഇടത്, വലത്, മധ്യം, ന്യായീകരിക്കുക, മാച്ച്-പാരന്റ് എന്നീ മൂല്യങ്ങൾ സ്വീകരിക്കുന്നു.
സ്വത്ത് പാരമ്പര്യമായി ലഭിച്ചതാണ്.
വാക്യഘടന
ടെക്സ്റ്റ്-അലൈൻ-എല്ലാം: ആരംഭിക്കുക; ടെക്സ്റ്റ്-അലൈൻ-എല്ലാം: അവസാനം; ടെക്സ്റ്റ്-അലൈൻ-എല്ലാം: ഇടത്; ടെക്സ്റ്റ്-അലൈൻ-എല്ലാം: വലത്; ടെക്സ്റ്റ്-അലൈൻ-എല്ലാം: കേന്ദ്രം; ടെക്സ്റ്റ്-അലൈൻ-എല്ലാം: ന്യായീകരിക്കുക; ടെക്സ്റ്റ്-അലൈൻ-എല്ലാം: മാച്ച്-പാരന്റ്; text-align-all: inherit;
5.3 അവസാന വരി വിന്യാസം: ടെക്സ്റ്റ്-അലൈൻ-അവസാന പ്രോപ്പർട്ടി
നിർബന്ധിത ലൈൻ ബ്രേക്കിന് തൊട്ടുമുമ്പ് ഒരു ബ്ലോക്കിന്റെയോ വരിയുടെയോ അവസാന വരി എങ്ങനെ വിന്യസിച്ചിരിക്കുന്നുവെന്ന് ടെക്സ്റ്റ്-അലൈൻ-ലാസ്റ്റ് പ്രോപ്പർട്ടി വിവരിക്കുന്നു.
സ്വയമേവ സജ്ജീകരിക്കുകയാണെങ്കിൽ, ടെക്സ്റ്റ്-അലൈൻ-എല്ലാം ന്യായീകരിക്കാൻ സജ്ജീകരിച്ചിട്ടില്ലെങ്കിൽ, അനുബന്ധ വരിയിലെ ഉള്ളടക്കം ടെക്സ്റ്റ്-അലൈൻ-എല്ലാമായി വിന്യസിക്കും, ഈ സാഹചര്യത്തിൽ അത് ബ്ലോക്കിന്റെ ആരംഭത്തിലേക്ക് വിന്യസിച്ചിരിക്കുന്നു. മറ്റെല്ലാ മൂല്യങ്ങളും ടെക്സ്റ്റ്-അലൈനിനായി വിവരിച്ചിരിക്കുന്നതുപോലെ വ്യാഖ്യാനിക്കപ്പെടുന്നു.
മൂല്യങ്ങൾ സ്വയമേവ സ്വീകരിക്കുന്നു , ആരംഭം , അവസാനം , ഇടത് , വലത് , മധ്യം , ന്യായീകരിക്കുക , മാച്ച്-പാരന്റ് .
സ്വത്ത് പാരമ്പര്യമായി ലഭിച്ചതാണ്.
വാക്യഘടന
വാചകം-അലൈൻ-അവസാനം: സ്വയമേവ; text-align-last: start; text-align-last: end; text-align-last: left; text-align-last: right; text-align-last: centre; ടെക്സ്റ്റ്-അലൈൻ-അവസാനം: ന്യായീകരിക്കുക; text-align-last: match-parent;
6. വിടവുകൾ
വാക്കുകളും അക്ഷരങ്ങളും തമ്മിലുള്ള സ്പെയ്സിംഗ് നിയന്ത്രിക്കാൻ CSS നിങ്ങളെ അനുവദിക്കുന്നു.
6.1 വാക്കുകൾക്കിടയിലുള്ള ഇടങ്ങൾ: വാക്ക്-സ്പെയിംഗ് പ്രോപ്പർട്ടി
വാക്ക്-സ്പെയ്സിംഗ് പ്രോപ്പർട്ടി വാക്കുകൾക്കിടയിൽ അധിക സ്പെയ്സിംഗ് വ്യക്തമാക്കുന്നു.
വാക്കുകൾക്കിടയിൽ അകലം ക്രമീകരിക്കുന്നു. പോസിറ്റീവ്, നെഗറ്റീവ് മൂല്യങ്ങൾ ഉപയോഗിക്കാം. നിഷേധാത്മകമായ അർത്ഥത്തിൽ, വാക്കുകൾക്ക് പരസ്പരം ഓവർലാപ്പ് ചെയ്യാൻ കഴിയും.
ന്യായീകരിക്കപ്പെട്ട ടെക്സ്റ്റിന്റെ കാര്യത്തിൽ ടെക്സ്റ്റ്-അലൈൻ പ്രോപ്പർട്ടിയുടെ മൂല്യം വാക്ക് സ്പെയ്സിംഗിന്റെ മൂല്യത്തെ ബാധിക്കുന്നു.
സ്വത്ത് പാരമ്പര്യമായി ലഭിച്ചതാണ്.
വാക്യഘടന
പദ-അകലം: സാധാരണ; പദ-അകലം: 1px; പദ-അകലം: 0.2എം; പദ-അകലം: 50%; പദ-അകലം: അനന്തരാവകാശം; വാക്ക്-സ്പേസിംഗ്: പ്രാരംഭം;
6.2 ട്രാക്കിംഗ്: ലെറ്റർ-സ്പെയ്സ് പ്രോപ്പർട്ടി
അക്ഷര-അകലത്തിലുള്ള പ്രോപ്പർട്ടി, അടുത്തുള്ള ടൈപ്പോഗ്രാഫിക് പ്രതീകങ്ങൾക്കിടയിൽ അധിക ഇടം അല്ലെങ്കിൽ ട്രാക്കിംഗ് വ്യക്തമാക്കുന്നു. അക്ഷരങ്ങൾ തമ്മിലുള്ള അകലം ഒരു പൂരകവും പദ-അകലവുമാണ്. ഫലത്തിലുള്ള വിന്യാസ നിയമങ്ങളെ ആശ്രയിച്ച്, ടെക്സ്റ്റ് വിന്യസിക്കുന്നതിന് ഉപയോക്തൃ ഏജന്റുമാർ ടൈപ്പോഗ്രാഫിക് ക്യാരക്ടർ യൂണിറ്റുകൾക്കിടയിലുള്ള സ്പെയ്സിംഗ് വർദ്ധിപ്പിക്കുകയോ കുറയ്ക്കുകയോ ചെയ്തേക്കാം.
സ്വത്ത് പാരമ്പര്യമായി ലഭിച്ചതാണ്.
വാക്യഘടന
അക്ഷര-അകലം: സാധാരണ; അക്ഷര-അകലം: 0.1എം; അക്ഷര-അകലം: 2px; അക്ഷര-അകലം: അനന്തരാവകാശം; അക്ഷര-അകലം: പ്രാരംഭം;
7. ആദ്യ വരി ഇൻഡന്റ്: ടെക്സ്റ്റ്-ഇൻഡന്റ് പ്രോപ്പർട്ടി
ടെക്സ്റ്റ്-ഇൻഡന്റ് പ്രോപ്പർട്ടി ഒരു ബ്ലോക്കിനുള്ളിലെ ഇൻലൈൻ ഉള്ളടക്കത്തിന്റെ ലൈനുകളിൽ പ്രയോഗിക്കുന്ന ഇൻഡന്റേഷൻ വ്യക്തമാക്കുന്നു. ലൈൻ ബോക്സിന്റെ ആരംഭ അറ്റത്ത് പ്രയോഗിക്കുന്ന ഒരു മാർജിൻ ആയിട്ടാണ് പാഡിംഗ് കണക്കാക്കുന്നത്.
ഒരു ബ്ലോക്ക് എലമെന്റിന്റെ ആദ്യ വരിയിൽ ഒരു ഇമേജ് ഉണ്ടെങ്കിൽ, അത് ബാക്കിയുള്ള വാചകത്തിനൊപ്പം നീങ്ങും.
സ്വത്ത് പാരമ്പര്യമായി ലഭിച്ചതാണ്.
വാക്യഘടന
ടെക്സ്റ്റ്-ഇൻഡന്റ്: 5 മിമി; ടെക്സ്റ്റ്-ഇൻഡന്റ്: 20px; ടെക്സ്റ്റ്-ഇൻഡന്റ്: 5%; ടെക്സ്റ്റ്-ഇൻഡന്റ്: 2എം ഓരോ വരിയും; ടെക്സ്റ്റ്-ഇൻഡന്റ്: 2എം തൂക്കിയിരിക്കുന്നു; ടെക്സ്റ്റ്-ഇൻഡന്റ്: അനന്തരാവകാശം; ടെക്സ്റ്റ്-ഇൻഡന്റ്: പ്രാരംഭ;
ഹലോ, ബ്ലോഗ് സൈറ്റിന്റെ പ്രിയ വായനക്കാർ. ഇന്ന് ഞങ്ങൾ പഠനം തുടരുന്നു, അടുത്തതായി നമുക്ക് ടെക്സ്റ്റ്-ഡെക്കറേഷൻ, വെർട്ടിക്കൽ-അലൈൻ, ടെക്സ്റ്റ്-അലൈൻ, ടെക്സ്റ്റ്-ഇൻഡന്റ് എന്നിങ്ങനെയുള്ള പ്രോപ്പർട്ടികൾ ഉണ്ട്, ഇത് എച്ച്ടിഎംഎൽ കോഡിലെ ടെക്സ്റ്റുകളുടെ രൂപഭാവം രൂപകൽപ്പന ചെയ്യാൻ സഹായിക്കുന്നു.
കഴിഞ്ഞ ലേഖനത്തിൽ, ഫോണ്ടുകളുടെ രൂപം ഇഷ്ടാനുസൃതമാക്കാൻ ഉദ്ദേശിച്ചുള്ള പ്രോപ്പർട്ടികൾ ഞങ്ങൾ പരിശോധിച്ചു.
ശരി, നേരത്തെ തന്നെ ഞങ്ങൾ എല്ലാ തരങ്ങളും വിശദമായി പരിശോധിച്ചു, അവ എങ്ങനെ ഗ്രൂപ്പുചെയ്യാമെന്നും അവ വ്യാഖ്യാനിക്കുമ്പോൾ ബ്രൗസർ സജ്ജീകരിക്കുന്ന മുൻഗണനകളെക്കുറിച്ചും പഠിച്ചു. ശരിയാണ്, ഇതെല്ലാം നിരവധി ലേഖനങ്ങളായി തിരിച്ചിരിക്കുന്നു, അതിനാൽ ആശയക്കുഴപ്പത്തിലാകാതിരിക്കാൻ, നൽകിയിരിക്കുന്ന ക്രമത്തിലുള്ള മെറ്റീരിയലുകൾ പഠിക്കാൻ ഞാൻ നിങ്ങളെ ഉപദേശിക്കുന്നു.
CSS-ൽ ടെക്സ്റ്റ്-ഡെക്കറേഷൻ, ടെക്സ്റ്റ്-അലൈൻ, ടെക്സ്റ്റ്-ഇൻഡന്റ്
Css-ൽ ടെക്സ്റ്റ് ഉപയോഗിച്ച് എങ്ങനെ പ്രവർത്തിക്കാം? ഇതിനായി പ്രത്യേകം രൂപകല്പന ചെയ്ത നിയമങ്ങൾ ഉണ്ടെന്ന് കരുതുന്നത് യുക്തിസഹമായിരിക്കും. നമുക്ക് ടെക്സ്റ്റ്-അലൈൻ ഉപയോഗിച്ച് ആരംഭിക്കാം, ഇത് യഥാർത്ഥത്തിൽ അലൈൻ ആട്രിബ്യൂട്ടിന് പകരമാണ് (പി പാരഗ്രാഫുകൾ അല്ലെങ്കിൽ തലക്കെട്ടുകൾ പോലുള്ള ഉള്ളടക്കം വിന്യസിക്കാൻ ഇത് ഉപയോഗിച്ചു).
ഇതിന് സാധ്യമായ നാല് അർത്ഥങ്ങൾ മാത്രമേയുള്ളൂ:
അർത്ഥം പഴയതുപോലെ തന്നെ തുടരുന്നു. ടെക്സ്റ്റ് വിന്യസിക്കുക- ഇതാണ് വരികളുടെ തിരശ്ചീന വിന്യാസം. ഈ നിയമം ബ്ലോക്ക് ഘടകങ്ങൾക്ക് (ഖണ്ഡികകൾ, തലക്കെട്ടുകൾ മുതലായവ) മാത്രം ബാധകമാണ്, അതായത്. നിരവധി വരികൾ ദൃശ്യമാകുന്ന ടാഗുകൾ. കാരണം ഇൻലൈൻ ഘടകങ്ങൾക്ക് ഒരു വരി മാത്രമേ ഉണ്ടാകൂ എന്നതിനാൽ, അവയിൽ ടെക്സ്റ്റ്-അലൈൻ ഉപയോഗിക്കുന്നതിൽ പ്രത്യേക പോയിന്റൊന്നുമില്ല.
ഈ നിയമത്തിന്റെ മൂല്യങ്ങൾ യഥാക്രമം വിന്യാസത്തെ അർത്ഥമാക്കുന്നത് വ്യക്തമാണ്: ഇടത്, വലത്, മധ്യഭാഗം, പേജ് വീതി (നീതീകരിക്കുക - ഒരേസമയം ഇടത്തോട്ടും വലത്തോട്ടും വാക്കുകൾ തമ്മിലുള്ള ദൂരം വർദ്ധിപ്പിച്ച്) . കുറഞ്ഞത് നിരവധി വരികൾ ഉള്ള ഘടകങ്ങൾക്ക് ജസ്റ്റിഫൈ മൂല്യം ഉപയോഗിക്കണമെന്ന് പറയാതെ വയ്യ, അല്ലാത്തപക്ഷം ദൃശ്യമായ പ്രഭാവം ഉണ്ടാകില്ല.
ഉദാഹരണത്തിന്, ഞാൻ മുമ്പത്തെ ഖണ്ഡികയെ ന്യായീകരിച്ചു (ഇതിന് ഇടത്തും വലത്തും മിനുസമാർന്ന ബോർഡറുകളുണ്ടെന്ന് നിങ്ങൾക്ക് കാണാം) ഇനിപ്പറയുന്നവ ഉപയോഗിച്ച്:
ടെക്സ്റ്റ്-അലൈൻ:ന്യായീകരിക്കുക;
സ്ഥിരസ്ഥിതിയായി, തിരശ്ചീനമായ ടെക്സ്റ്റ് വിന്യാസം അവശേഷിക്കുന്നു, അതായത്. ടെക്സ്റ്റ്-അലൈൻ:ഇടത് എന്ന് പ്രത്യേകമായി എഴുതേണ്ട ആവശ്യമില്ല, തീർച്ചയായും, നിങ്ങൾ മുമ്പ് മറ്റൊരു വിന്യാസം വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ. വഴിയിൽ, ഞാൻ ഈ ഖണ്ഡികയെ കേന്ദ്രത്തിലേക്ക് (മധ്യത്തിൽ) വിന്യസിച്ചു, ഒരു വ്യക്തമായ ഉദാഹരണത്തിനായി വീണ്ടും, എന്നാൽ ഇവിടെ, എല്ലാം വ്യക്തമാണെന്ന് ഞാൻ കരുതുന്നു.
അടുത്ത Css റൂൾ ടെക്സ്റ്റ്-ഇൻഡന്റ്ഒരു ചുവന്ന വര വ്യക്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, ഉദാഹരണത്തിന്, ഒരു ഖണ്ഡിക ടാഗിലെ ടെക്സ്റ്റിനായി P. ചുവന്ന വരയുടെ ഇൻഡന്റേഷൻ ഒരു മൂല്യം (ഒന്നുകിൽ ഒരു പ്ലസ് ചിഹ്നം അല്ലെങ്കിൽ മൈനസ് ചിഹ്നം ഉപയോഗിച്ച്, ഉപയോഗിച്ച് ) അല്ലെങ്കിൽ ശതമാനം ഉപയോഗിച്ച് വ്യക്തമാക്കാം:
ടെക്സ്റ്റ്-ഇൻഡന്റിൽ നിന്ന് എത്ര ശതമാനം കണക്കാക്കുന്നു? വാചകത്തിനായി നീക്കിവച്ചിരിക്കുന്ന സ്ഥലത്തിന്റെ വീതിയിൽ നിന്ന്. ആ. CSS റൂൾ ടെക്സ്റ്റ്-ഇൻഡന്റ്:50% ഈ വരിയുടെ പകുതി നീളത്തിന് തുല്യമായ ഒരു ചുവന്ന വര സജ്ജീകരിക്കും. ശരി, ഈ ഖണ്ഡിക അത്തരമൊരു നിയമത്തിന്റെ ഒരു ഉദാഹരണമായി വർത്തിക്കുന്നു.
അല്ലെങ്കിൽ നിങ്ങൾക്ക്, ഉദാഹരണത്തിന്, ടെക്സ്റ്റ്-ഇൻഡന്റിലുള്ള ചുവന്ന വരയ്ക്ക് ഒരു നെഗറ്റീവ് മൂല്യം സജ്ജമാക്കാൻ കഴിയും, തുടർന്ന് ഈ ഖണ്ഡികയിൽ നിങ്ങൾ കാണുന്നത് ഏകദേശം ഞങ്ങൾക്ക് ലഭിക്കും. ഈ ഫലം നേടുന്നതിന്, പി പാരഗ്രാഫ് ടാഗിനായി ഞാൻ ഇനിപ്പറയുന്ന CSS റൂൾ എഴുതി:
ടെക്സ്റ്റ്-ഇൻഡന്റ്:-1എം;
ശരി, ടെക്സ്റ്റ്-ഇൻഡന്റിൻറെ ഒരു സാധാരണ ഉപയോഗം (സ്റ്റാൻഡേർഡ് റെഡ് ലൈൻ സജ്ജീകരിക്കുന്നതിന്) ഇതുപോലെയായിരിക്കാം: text-indent:40px; (ഈ ഖണ്ഡികയിൽ ബാധകമാണ്, വഴി). ഈ നിയമം, നേരത്തെ ചർച്ച ചെയ്ത ടെക്സ്റ്റ്-അലൈൻ പോലെ, ബ്ലോക്ക് ഘടകങ്ങൾക്ക് മാത്രം ബാധകമാണ്, അതായത്. അവിടെ നിരവധി വരികൾ പ്രത്യക്ഷപ്പെടാം (ഖണ്ഡികകൾ, തലക്കെട്ടുകൾ മുതലായവ).
ശരി, ഇപ്പോൾ നമുക്ക് മുന്നോട്ട് പോകാം ടെക്സ്റ്റ് അലങ്കാരം(ഒരു തിരശ്ചീന രേഖ ഉപയോഗിച്ച് രൂപകൽപ്പന ചെയ്യുക), ഇത് ഇതിനകം തന്നെ എല്ലാ Html ഘടകങ്ങളിലും (ഇൻലൈനിലും ബ്ലോക്കിലും) പ്രയോഗിക്കുന്നു.
ഇതിന് നാല് അർത്ഥങ്ങൾ മാത്രമേ ഉണ്ടാകൂ:
ആ. ടെക്സ്റ്റ്-ഡെക്കറേഷൻ ഉപയോഗിച്ച് ഉപയോഗിക്കാം: ഓവർലൈൻ, ലൈൻ-ത്രൂ അല്ലെങ്കിൽ അടിവര, അല്ലെങ്കിൽ ഒന്നും ഉപയോഗിക്കരുത് (ഒന്നുമില്ല). ചില HTML ഘടകങ്ങൾക്ക് ഇതിനകം ഡിഫോൾട്ടായി ഒരു തിരശ്ചീന ലൈൻ ഡിസൈൻ ഉണ്ട്, ഉദാഹരണത്തിന് (അവ സ്ഥിരസ്ഥിതിയായി അടിവരയിട്ടിരിക്കുന്നു).
അതിനാൽ, അടിവരയിട്ട് (ഹൈപ്പർലിങ്കുകൾ ഒഴികെ) മറ്റെന്തെങ്കിലും ഹൈലൈറ്റ് ചെയ്യുന്നത് നല്ലതല്ല, കാരണം ഉപയോക്താക്കൾ അവരുടെ ഉപബോധമനസ്സിൽ അത് അടിവരയിട്ടാൽ (നിറത്തിലും ഹൈലൈറ്റ് ചെയ്തിരിക്കുന്നു) എഴുതിയിട്ടുണ്ട്, അതിനർത്ഥം അവർക്ക് പോകാൻ അതിൽ ക്ലിക്ക് ചെയ്യാം എന്നാണ്. എന്നാൽ സാധാരണ ടെക്സ്റ്റ് അടിവരയിട്ട് ഹൈലൈറ്റ് ചെയ്യുന്നതിലൂടെ, നിങ്ങൾ ഉപയോക്താവിനെ തെറ്റിദ്ധരിപ്പിക്കുകയും തുടർന്ന് നിങ്ങളുടെ വിഭവത്തിൽ നിരാശരാകുകയും ചെയ്യുന്നു (അത് അങ്ങനെയാണെന്ന് അദ്ദേഹം കരുതി, പക്ഷേ അത് സംഭവിച്ചു ...).
Css ടെക്സ്റ്റ് ഡെക്കറേഷൻ റൂൾ ഉപയോഗിക്കുന്നതിലെ സൂക്ഷ്മത, ഏത് Html ഘടകത്തിനും ഒരേസമയം മൂന്ന് (അല്ലെങ്കിൽ രണ്ട്) മൂല്യങ്ങൾ നൽകാം (ഒന്നും ഒഴിവാക്കാതെ) അതിന്റെ ഫലമായി നിങ്ങൾക്ക് ലഭിക്കും വാചകത്തിന്റെ അടിവരയിട്ട-അടിവരയിട്ട-ക്രോസ് ഔട്ട് ശകലം(ശബ്ദവും രസകരവുമാണ്, അല്ലേ?):
ടെക്സ്റ്റ്-ഡെക്കറേഷൻ: അടിവരയിട്ട ഓവർലൈൻ ലൈൻ-ത്രൂ;
ടെക്സ്റ്റ് അലങ്കാരത്തിനുള്ള മൂല്യങ്ങൾ (അവയിൽ പലതും ഒരേസമയം ഉപയോഗിക്കണമെങ്കിൽ) എഴുതേണ്ടതുണ്ട് ഒരു സ്പേസ് കഥാപാത്രത്തിലൂടെ.
ലംബ-അലൈൻ - ലംബ വിന്യാസം
അടുത്തതായി നമുക്ക് ലംബ വിന്യാസം ഉണ്ട് - ലംബ-അലൈൻ. HTML കോഡിലെ മിക്കവാറും എല്ലാ ഘടകങ്ങൾക്കും, ഇൻലൈൻ ഘടകങ്ങളെ അവയുടെ അടിസ്ഥാനരേഖയുമായി ബന്ധപ്പെട്ട വാചകവുമായി വിന്യസിക്കുക എന്നാണ് ഇതിനർത്ഥം. ശരിയാണ്, ഇതിനർത്ഥം കുറച്ച് വ്യത്യസ്തമാണ് - ഈ സെല്ലുകളിലെ എല്ലാ ഉള്ളടക്കവും ലംബമായി വിന്യസിക്കും.
CSS ലംബ-അലൈൻ നിയമത്തിന്, നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന മൂല്യങ്ങൾ ഉപയോഗിക്കാം:
വരികൾ ഡിഫോൾട്ടായി ബേസ്ലൈൻ വിന്യസിച്ചിരിക്കുന്നു. നോക്കൂ, ഞാൻ അപേക്ഷിച്ചു ഈ വാചകത്തിന്റെ ഫോണ്ട് വലുപ്പം വർദ്ധിപ്പിക്കുകഈ രണ്ട് ശകലങ്ങളും അടിസ്ഥാന (താഴെ) വരിയിൽ വിന്യസിച്ചിരിക്കുന്നു. ഒപ്പം ലംബ-അലൈൻ ഉപയോഗിച്ചുള്ള ലംബ വിന്യാസം, വരികൾ വിന്യസിക്കുന്ന രീതി മാറ്റാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.
ഉദാഹരണത്തിന്, ഞാൻ വലുതാക്കിയ അതേ വാചകത്തിന് വെർട്ടിക്കൽ-അലൈൻ:ബേസ്ലൈൻ എന്ന് എഴുതുകയാണെങ്കിൽ, മാറ്റങ്ങളൊന്നും സംഭവിക്കില്ല, കാരണം ഈ CSS റൂളിനായി അടിസ്ഥാന മൂല്യം സ്ഥിരസ്ഥിതിയായി ഉപയോഗിക്കുന്നു.
വഴിയിൽ, നിങ്ങൾക്ക് അതിനുള്ള മൂല്യങ്ങളായി അക്കങ്ങളും ഉപയോഗിക്കാം, കൂടാതെ ലംബ-അലൈൻ: 0 എന്ന ലിഖിതം ലംബ-അലൈൻ:ബേസ്ലൈൻ, അതായത് ലംബ-അലൈൻ എന്നതിന് സമാനമാണ് അർത്ഥമാക്കുന്നത്. അടിസ്ഥാനരേഖ പൂജ്യത്തിന് തുല്യമാണ്. അതിനാൽ, ലംബ വിന്യാസത്തിലെ ഏതെങ്കിലും ഷിഫ്റ്റ് സൂചിപ്പിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഈ ഷിഫ്റ്റ് അടിസ്ഥാനരേഖയുമായി (അല്ലെങ്കിൽ പൂജ്യം) ആപേക്ഷികമായി വ്യക്തമാക്കും.
നിങ്ങൾക്ക് ഇത് ഇതുപോലെ എഴുതാം:
ലംബ-അലൈൻ:10px;
ഞങ്ങൾ സ്വീകരിക്കുകയും ചെയ്യും വലിയ ഫോണ്ട് ഉപയോഗിച്ച് ശകലം മുകളിലേക്ക് മാറ്റുകബേസ്ലൈനുമായി ബന്ധപ്പെട്ട് 10 പിക്സലുകൾ. നമ്മൾ ഒരു നെഗറ്റീവ് മൂല്യം എഴുതുകയാണെങ്കിൽ:
ലംബ-അലൈൻ:-10px;
അപ്പോൾ നമുക്ക് ലഭിക്കും ശകലം താഴേക്ക് മാറ്റുകഅടിസ്ഥാനരേഖയുമായി ബന്ധപ്പെട്ട്. ഷിഫ്റ്റ് കാരണം, വരിയുടെ ഉയരം വർദ്ധിച്ചുവെന്ന് ഉദാഹരണങ്ങളിൽ നിന്ന് വ്യക്തമാണ്, അതിനാൽ വാചകം അടുത്തുള്ള വരിയുമായി കൂട്ടിയിടിക്കാതെ അതിൽ യോജിക്കുന്നു. Em, Ex എന്നിവയിലും ഷിഫ്റ്റ് വ്യക്തമാക്കാം, ഈ മൂലകത്തിന്റെ ലൈൻ ഉയരത്തിൽ നിന്ന് കണക്കാക്കുന്ന ഒരു ശതമാനമായി ഇത് കണക്കാക്കാം (അവസാന ലേഖനത്തിൽ ഞങ്ങൾ ഇത് എങ്ങനെ സജ്ജീകരിക്കാമെന്ന് പഠിച്ചത് ഓർക്കുക).
പട്ടിക സെല്ലുകളുടെ ഉള്ളടക്കങ്ങൾ ലംബമായി വിന്യസിക്കുന്നതിന്, സെല്ലിന്റെ മുകളിലേക്കും താഴേക്കും ഉള്ളടക്കത്തെ യഥാക്രമം വിന്യസിക്കുന്നതിന്, ലംബ-അലൈന് മുകളിലും താഴെയുമുള്ള മൂല്യങ്ങൾ ഉപയോഗിക്കണം (നന്നായി, ഒരു പട്ടിക സെല്ലിലെ മധ്യഭാഗം സ്ഥിര ലംബ വിന്യാസ മൂല്യമായി ഉപയോഗിക്കുന്നു. ).
ഫോണ്ട് ഘടകങ്ങൾക്കായി നിങ്ങൾക്ക് ടെക്സ്റ്റ്-ടോപ്പ്, ടെക്സ്റ്റ്-ബോട്ടം, മിഡിൽ എന്നിവ ഉപയോഗിക്കാം. നമുക്ക് അത് ഒരു ഉദാഹരണമായി ഉപയോഗിക്കാം ഈ വാചകംഅർത്ഥം:
ലംബ-അലൈൻ:മധ്യം;
എന്തായിരുന്നു ഫലം? വലുതാക്കിയ ശകലത്തിന്റെ മധ്യരേഖ സാധാരണ വാചകത്തിന്റെ അടിസ്ഥാനരേഖയുമായി വിന്യസിച്ചിരിക്കുന്നു, അതായത്. ഞങ്ങൾക്ക് മധ്യരേഖയിലേക്ക് ലംബ വിന്യാസം ലഭിച്ചു. ടെക്സ്റ്റ്-ടോപ്പ്, ടെക്സ്റ്റ്-ബോട്ടം എന്നിവയ്ക്ക് എല്ലാം ഒരുപോലെയായിരിക്കും. ഇത് ടെക്സ്റ്റ്-ടോപ്പ് ആണ്, ഇത് ടെക്സ്റ്റ്-ബോട്ടം ആണ്.
Css പ്രോപ്പർട്ടി വെർട്ടിക്കൽ-അലൈൻ സബ്, സൂപ്പർ എന്നിവയുടെ മൂല്യങ്ങൾ ശുദ്ധമായ Html-ൽ (വിഷ്വൽ ഡിസൈനിനായി CSS പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നതിന് മുമ്പ്) നടന്ന സബ്-സൂപ്പർ-ഇൻഡക്സുമായി പൊരുത്തപ്പെടുന്നു.
ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം, ലെറ്റർ സ്പെയ്സിംഗ്, വേഡ് സ്പെയ്സിംഗ്, വൈറ്റ് സ്പെയ്സിംഗ്
ഒന്നും ഡിഫോൾട്ടായി ഉപയോഗിക്കുന്നില്ല, ടെക്സ്റ്റിലെ പ്രതീകങ്ങൾ ഒരു തരത്തിലും മാറില്ല എന്നാണ് അർത്ഥമാക്കുന്നത് - Html-ൽ എഴുതിയിരിക്കുന്നതുപോലെ, അവ പ്രദർശിപ്പിക്കുന്നത് ഇങ്ങനെയാണ്. ടെക്സ്റ്റ് പരിവർത്തനത്തിനായുള്ള വലിയക്ഷര മൂല്യം ശകലത്തിലെ എല്ലാ അക്ഷരങ്ങളെയും വലിയ അക്ഷരങ്ങളാക്കി മാറ്റും ( ഒരു ഉദാഹരണം ഈ വാക്യത്തിൽ കാണിച്ചിരിക്കുന്നു, ഇവിടെ ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം:അപ്പർകേസ് റൂൾ ഉപയോഗിച്ചു, അക്ഷരങ്ങൾ യഥാർത്ഥത്തിൽ ചെറിയക്ഷരത്തിലാണ് എഴുതിയിരുന്നത്).
Css ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം റൂളിനായുള്ള ചെറിയക്ഷര മൂല്യം, ശകലത്തിലെ എല്ലാ പ്രതീകങ്ങളെയും ചെറിയക്ഷരത്തിലേക്ക് പരിവർത്തനം ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കും, കൂടാതെ വലിയക്ഷര മൂല്യം വാക്കിന്റെ എല്ലാ ആദ്യ അക്ഷരങ്ങളെയും വലിയക്ഷരമാക്കും ( ഈ വാക്യത്തിലെ ഉദാഹരണം- ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം:ക്യാപിറ്റലൈസ്). ആ. ടെക്സ്റ്റ് ട്രാൻസ്ഫോം ഉപയോഗിച്ച് പ്ലെയിൻ ടെക്സ്റ്റ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് ആവശ്യമുള്ളതെന്തും ചെയ്യാം, തുടർന്ന് എല്ലാം എളുപ്പത്തിൽ തിരികെ നൽകാം.
അതിനാൽ, ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് എല്ലാ തലക്കെട്ടുകളും വലിയ അക്ഷരങ്ങളിൽ മാത്രം എഴുതാനുള്ള ചുമതലയുണ്ടെങ്കിൽ, അവ പതിവുപോലെ Html-ൽ എഴുതുക, കൂടാതെ അവയെ ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം:അപ്പർകേസ് വഴി CSS-ൽ വലിയ അക്ഷരങ്ങളാക്കുക. തുടർന്ന്, നിങ്ങൾ എന്തെങ്കിലും തിരികെ മാറ്റാൻ തീരുമാനിക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ സൈറ്റിലെ എല്ലാ 100,500 തലക്കെട്ടുകളുടെയും ഉള്ളടക്കത്തിലല്ല, ശൈലികളിൽ ഒരു ചെറിയ മാറ്റം വരുത്തിയാൽ മതിയാകും.
ഡിഫോൾട്ടായി, അക്ഷര-അകലവും പദ-അകലവും സാധാരണമായി സജ്ജീകരിച്ചിരിക്കുന്നു, അല്ലെങ്കിൽ ഇത് പൂജ്യത്തിന് തുല്യമാണ് (അതായത്, പ്രതീകങ്ങളും വാക്കുകളും തമ്മിലുള്ള ദൂരം ഒരു തരത്തിലും മാറില്ല). ഈ നിയമങ്ങളിലെ ദൂരത്തിലുള്ള മാറ്റത്തിന്റെ അളവ് പിക്സലുകളിൽ മാത്രമേ വ്യക്തമാക്കാൻ കഴിയൂ, ഒന്നുകിൽ Em അല്ലെങ്കിൽ Ex, എന്നാൽ ശതമാനത്തിൽ അല്ല.
എന്നിരുന്നാലും, നിങ്ങൾക്ക് പോസിറ്റീവ് (അക്ഷരങ്ങളുടെയോ വാക്കുകളുടെയോ വിരളത) നെഗറ്റീവ് മൂല്യങ്ങളും (അക്ഷരങ്ങളെയോ വാക്കുകളെയോ അടുപ്പിക്കുക) ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് കഴിയും "ഇങ്ങനെയാണ് ഈ വാക്യത്തിലെ കഥാപാത്രങ്ങളെ മെലിഞ്ഞത്"ഇനിപ്പറയുന്ന Css നിയമം ഉപയോഗിക്കുന്നു:
അക്ഷര-അകലം:0.4എം;
അല്ലെങ്കിൽ നിങ്ങൾക്ക് കഴിയും "ഈ വാക്യത്തിലെ ചിഹ്നങ്ങളെ എങ്ങനെ അടുപ്പിക്കാം"ഉപയോഗിച്ച്:
അക്ഷര-അകലം:-1px;
വാക്കുകളുടെ ഇടയിലുള്ള ദൂരം മാറുമെന്ന വ്യത്യാസം മാത്രമുള്ള പദ-അകലത്തെ കുറിച്ചും ഇതുതന്നെ പറയാം. ഉദാഹരണത്തിന്, ഈ വാക്യത്തിൽ, ഈ CSS നിർമ്മാണം ഉപയോഗിക്കുന്നു:
പദ-അകലം:4എം;
അതുപോലെ, വാക്കുകൾ തമ്മിലുള്ള അകലം കുറയ്ക്കാൻ നിങ്ങൾക്ക് പദ-അകലത്തിൽ നെഗറ്റീവ് മൂല്യങ്ങൾ ഉപയോഗിക്കാം.
ശരി, ഇന്നത്തെ അവസാനത്തെ CSS റൂൾ, Html കോഡിലെ ടെക്സ്റ്റ് ഒരു പ്രത്യേക രീതിയിൽ ഫോർമാറ്റ് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു, ഇതാണ് വൈറ്റ്-സ്പെയ്സ്. Html കോഡ് എഴുതുമ്പോൾ സംഭവിച്ച ഒരു വെബ് പേജിൽ വൈറ്റ്സ്പേസ് പ്രതീകങ്ങൾ പ്രദർശിപ്പിക്കുന്നതിന് ഇത് ഉത്തരവാദിയാണ്.
ലേഖനത്തിൽ നിന്ന് നിങ്ങൾ ഓർക്കുന്നത് പോലെ, ബ്രൗസർ, കോഡ് പാഴ്സ് ചെയ്യുമ്പോൾ, എല്ലാ സ്പെയ്സുകളും ലൈൻ ബ്രേക്കുകളും ടാബുകളും ഒരൊറ്റ സ്പെയ്സിലേക്ക് സംയോജിപ്പിക്കുകയും കോഡിലെ സ്പെയ്സ് പ്രതീകങ്ങൾക്കനുസരിച്ച് വെബ് പേജിലെ ലൈനുകൾ തകർക്കുകയും ചെയ്യുന്നു.
അതിനാൽ, വൈറ്റ് സ്പേസിന് മൂന്ന് മൂല്യങ്ങളിൽ ഒന്ന് എടുക്കാം:
സ്ഥിരസ്ഥിതി മൂല്യം സാധാരണമാണെന്നും ഈ സാഹചര്യത്തിൽ ഞാൻ മുകളിൽ വിവരിച്ചതുപോലെ എല്ലാം പ്രദർശിപ്പിക്കുമെന്നും വ്യക്തമാണ്. എന്നാൽ പ്രീ മൂല്യം ഉപയോഗിക്കുമ്പോൾ, ഉപയോഗവുമായി പൂർണ്ണമായ സാമ്യം നമുക്ക് ലഭിക്കും, അതായത്. വെബ് പേജിൽ, കോഡ് എഴുതുമ്പോൾ ഉണ്ടായിരുന്ന എല്ലാ അധിക വൈറ്റ്സ്പേസ് പ്രതീകങ്ങളോടും കൂടി ടെക്സ്റ്റ് പ്രദർശിപ്പിക്കും, കൂടാതെ ബ്രൗസറിന് അവ ഉപയോഗിച്ച് കൈമാറ്റം ചെയ്യാൻ ഇനി കഴിയില്ല.
ശരി, എന്താണ് അർത്ഥം? ഇപ്പോൾ റാപ്പ് CSS റൂൾ വൈറ്റ്-സ്പേസ്:നൗറാപ്പ് ഉപയോഗിച്ച് ഒരു ശകലത്തിനുള്ളിൽ കണ്ടെത്തുന്ന വൈറ്റ്സ്പെയ്സ് പ്രതീകങ്ങൾ പൊതിയുന്നതിൽ നിന്ന് ഇത് ബ്രൗസറിനെ തടയും. ലളിതമായ ഒരു Html ഫയൽ സൃഷ്ടിച്ച്, ഇതുപോലുള്ള ടാഗുകളിൽ ഏതെങ്കിലും ടെക്സ്റ്റ് ഉൾപ്പെടുത്തിക്കൊണ്ട് ഇതെല്ലാം എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് നിങ്ങൾക്ക് പരീക്ഷിക്കാം:
നിങ്ങൾക്ക് ആശംസകൾ! ബ്ലോഗ് സൈറ്റിന്റെ പേജുകളിൽ ഉടൻ കാണാം
നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടാകാം
ലിസ്റ്റ് ശൈലി (തരം, ഇമേജ്, സ്ഥാനം) - Html കോഡിലെ ലിസ്റ്റുകളുടെ രൂപം ഇഷ്ടാനുസൃതമാക്കുന്നതിനുള്ള Css നിയമങ്ങൾ
മൗസ് കഴ്സർ മാറ്റാൻ Z-ഇൻഡക്സും CSS കഴ്സർ റൂളും ഉപയോഗിച്ച് പൊസിഷനിംഗ്
പാഡിംഗ്, മാർജിൻ, ബോർഡർ - CSS-ൽ ആന്തരികവും ബാഹ്യവുമായ പാഡിംഗ് സജ്ജീകരിക്കുക, കൂടാതെ എല്ലാ വശങ്ങൾക്കുമുള്ള ബോർഡറുകൾ (മുകളിൽ, താഴെ, ഇടത്, വലത്)
CSS എന്തിനുവേണ്ടിയാണ്, ഒരു Html ഡോക്യുമെന്റിലേക്ക് കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ എങ്ങനെ ബന്ധിപ്പിക്കാം, ഈ ഭാഷയുടെ അടിസ്ഥാന വാക്യഘടന
CSS-ൽ ഫ്ലോട്ടുചെയ്ത് മായ്ക്കുക - ബ്ലോക്ക് ലേഔട്ട് ടൂളുകൾ
CSS - അതെന്താണ്, സ്റ്റൈലും ലിങ്കും ഉപയോഗിച്ച് കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ Html കോഡിലേക്ക് എങ്ങനെ ബന്ധിപ്പിച്ചിരിക്കുന്നു
CSS-ലെ ഡൈമൻഷൻ യൂണിറ്റുകളും (പിക്സലുകൾ, Em, Ex) പാരമ്പര്യ നിയമങ്ങളും
ടാഗ്, ക്ലാസ്, ഐഡി, യൂണിവേഴ്സൽ സെലക്ടറുകൾ, കൂടാതെ ആധുനിക CSS-ലെ ആട്രിബ്യൂട്ട് സെലക്ടറുകൾ
സ്ഥാനം (കേവലവും ആപേക്ഷികവും സ്ഥിരവും) - CSS-ൽ Html ഘടകങ്ങൾ സ്ഥാപിക്കുന്നതിനുള്ള വഴികൾ (നിയമങ്ങൾ ഇടത്, വലത്, മുകളിൽ, താഴെ)
CSS-ലെ പശ്ചാത്തലം (നിറം, സ്ഥാനം, ചിത്രം, ആവർത്തനം, അറ്റാച്ച്മെന്റ്) - Html ഘടകങ്ങളുടെ പശ്ചാത്തല വർണ്ണമോ പശ്ചാത്തല ചിത്രമോ സജ്ജീകരിക്കുന്നതിനുള്ള എല്ലാം
ടെക്സ്റ്റ് വിന്യാസവും ഇൻഡന്റേഷനും നിർണ്ണയിക്കുന്ന HTML ടാഗുകൾ
ടൈപ്പോഗ്രാഫിയിൽ ഉപയോഗിക്കുന്ന ന്യായീകരിക്കപ്പെട്ട വാചകം
താഴെയുള്ള ഉദാഹരണം എങ്ങനെ വിന്യസിക്കണമെന്ന് കാണിക്കുന്നു വാചകം മുതൽ വീതി വരെപേജുകൾ:
വിന്യസിക്കുക = "ഇടത്" | വിന്യസിക്കുക = "വലത്" |
---|---|
സേവന മേഖലയിലും വിവരങ്ങൾ പ്രചരിപ്പിക്കുന്നതിലും ജോലി ചെയ്യുന്ന തൊഴിലാളികളുടെ എണ്ണം അനുദിനം വർദ്ധിച്ചുകൊണ്ടിരിക്കുകയാണ്. കഴിഞ്ഞ നൂറ്റാണ്ടുകളിലെ ചിഹ്നങ്ങൾ ഫാമും ഫാക്ടറിയുമായിരുന്നുവെങ്കിൽ, നിലവിലെ 21-ാം നൂറ്റാണ്ടിന്റെ ചിഹ്നം വിവര പ്രവാഹത്തിലേക്ക് പ്രവേശനമുള്ള കമ്പ്യൂട്ടറുകൾ കൊണ്ട് സജ്ജീകരിച്ചിരിക്കുന്ന ഒരു ഓഫീസാണ്. |
|
വിന്യസിക്കുക=നീതീകരിക്കുക | വിന്യസിക്കുക = "കേന്ദ്രം" |
സേവന മേഖലയിലും വിവരങ്ങൾ പ്രചരിപ്പിക്കുന്നതിലും ജോലി ചെയ്യുന്ന തൊഴിലാളികളുടെ എണ്ണം അനുദിനം വർദ്ധിച്ചുകൊണ്ടിരിക്കുകയാണ്. കഴിഞ്ഞ നൂറ്റാണ്ടുകളിലെ ചിഹ്നങ്ങൾ ഫാമും ഫാക്ടറിയുമായിരുന്നുവെങ്കിൽ, നിലവിലെ 21-ാം നൂറ്റാണ്ടിന്റെ ചിഹ്നം വിവര പ്രവാഹത്തിലേക്ക് പ്രവേശനമുള്ള കമ്പ്യൂട്ടറുകൾ കൊണ്ട് സജ്ജീകരിച്ചിരിക്കുന്ന ഒരു ഓഫീസാണ്. |
സേവന മേഖലയിലും വിവരങ്ങൾ പ്രചരിപ്പിക്കുന്നതിലും ജോലി ചെയ്യുന്ന തൊഴിലാളികളുടെ എണ്ണം അനുദിനം വർദ്ധിച്ചുകൊണ്ടിരിക്കുകയാണ്. കഴിഞ്ഞ നൂറ്റാണ്ടുകളിലെ ചിഹ്നങ്ങൾ ഫാമും ഫാക്ടറിയുമായിരുന്നുവെങ്കിൽ, നിലവിലെ 21-ാം നൂറ്റാണ്ടിന്റെ ചിഹ്നം വിവര പ്രവാഹത്തിലേക്ക് പ്രവേശനമുള്ള കമ്പ്യൂട്ടറുകൾ കൊണ്ട് സജ്ജീകരിച്ചിരിക്കുന്ന ഒരു ഓഫീസാണ്. |
ന്യായീകരിക്കുന്ന മൂല്യം ഏകീകൃതത ഉറപ്പാക്കുന്നു വാചകം വലത്തോട്ടും ഇടത്തോട്ടും വിന്യസിക്കുക, അതാണ് വീതിയിൽ. ഈ രീതി അച്ചടിയിൽ വ്യാപകമായി ഉപയോഗിക്കുന്നു.
HTML ലെ ടെക്സ്റ്റ് മധ്യത്തിലേക്കും വീതിയിലേക്കും വിന്യസിക്കുന്നു
HTML-ൽ ടെക്സ്റ്റ് കേന്ദ്രീകരിച്ച് വലത്തോട്ട് വിന്യസിക്കുക:
ഫലമായി:
ആട്രിബ്യൂട്ടുകളും മൂല്യങ്ങളും
- align="left" - നിർവചിക്കുന്നു ഇടത് വാചക വിന്യാസം(സ്ഥിരസ്ഥിതി).
- വിന്യസിക്കുക = "കേന്ദ്രം" - വാചകം മധ്യഭാഗത്തേക്ക് വിന്യസിക്കുന്നു.
- വിന്യസിക്കുക = "വലത്" - വാചകം വലതുവശത്തേക്ക് വിന്യസിക്കുന്നു.
വിന്യസിക്കുക | HTML ടെക്സ്റ്റ് ഇൻഡന്റേഷൻ
HTML വാചകവും പേജിന്റെ ഇടതുവശത്തുള്ള അതിന്റെ ഇൻഡന്റേഷനും
ഞങ്ങൾ ഉൽപ്പാദിപ്പിക്കും ടെക്സ്റ്റ് ഇൻഡന്റേഷൻഇടതുവശത്ത് രണ്ട് തരത്തിൽ:
ഫലമായി:
പുതിയ വിൻഡോയിൽ കാണുക.
ടെക്സ്റ്റ് ബ്ലോക്കിന്റെ അവസാന വരിയുടെ വിന്യാസം സജ്ജമാക്കുന്നു.
സംക്ഷിപ്ത വിവരങ്ങൾ
പദവികൾ
വിവരണം | ഉദാഹരണം | |
---|---|---|
<тип> | മൂല്യത്തിന്റെ തരം സൂചിപ്പിക്കുന്നു. | <размер> |
എ && ബി | മൂല്യങ്ങൾ വ്യക്തമാക്കിയ ക്രമത്തിൽ ഔട്ട്പുട്ട് ആയിരിക്കണം. | <размер> && <цвет> |
എ | ബി | നിർദ്ദിഷ്ട മൂല്യങ്ങളിൽ നിന്ന് (A അല്ലെങ്കിൽ B) ഒരു മൂല്യം മാത്രമേ നിങ്ങൾ തിരഞ്ഞെടുക്കേണ്ടതുള്ളൂ എന്ന് സൂചിപ്പിക്കുന്നു. | സാധാരണ | ചെറിയ തൊപ്പികൾ |
എ || ബി | ഓരോ മൂല്യവും സ്വതന്ത്രമായി അല്ലെങ്കിൽ മറ്റുള്ളവരുമായി ചേർന്ന് ഏത് ക്രമത്തിലും ഉപയോഗിക്കാം. | വീതി || എണ്ണുക |
ഗ്രൂപ്പുകളുടെ മൂല്യങ്ങൾ. | [ വിള || കുരിശ് ] | |
* | പൂജ്യമോ അതിലധികമോ തവണ ആവർത്തിക്കുക. | [,<время>]* |
+ | ഒന്നോ അതിലധികമോ തവണ ആവർത്തിക്കുക. | <число>+ |
? | നിർദ്ദിഷ്ട തരം, വാക്ക് അല്ലെങ്കിൽ ഗ്രൂപ്പ് ഓപ്ഷണൽ ആണ്. | ഇൻസെറ്റ്? |
(എ, ബി) | കുറഞ്ഞത് A ആവർത്തിക്കുക, എന്നാൽ B തവണയിൽ കൂടരുത്. | <радиус>{1,4} |
# | കോമകളാൽ വേർതിരിച്ച ഒന്നോ അതിലധികമോ തവണ ആവർത്തിക്കുക. | <время># |
മൂല്യങ്ങൾ
ന്യായീകരിക്കുന്ന മൂല്യം ഒഴികെ, ടെക്സ്റ്റ്-അലൈൻ പ്രോപ്പർട്ടി വ്യക്തമാക്കിയ വിന്യാസവുമായി യാന്ത്രികമായി പൊരുത്തപ്പെടുന്നു. അതിനായി, അലൈൻമെന്റ് ആരംഭം പോലെയായിരിക്കും. ആരംഭിക്കുക, വരി ബ്ലോക്കിന്റെ ആരംഭ അരികിലേക്ക് വിന്യസിച്ചിരിക്കുന്നു, ഇത് ടെക്സ്റ്റിന്റെ ദിശയെ ആശ്രയിച്ച് (ഇടത്തുനിന്ന് വലത്തോട്ടോ വലത്തുനിന്ന് ഇടത്തോട്ടോ) മാറാം. അവസാനം വരി ബ്ലോക്കിന്റെ അവസാനത്തെ അരികിലേക്ക് വിന്യസിച്ചിരിക്കുന്നു, അത് ടെക്സ്റ്റിന്റെ ദിശയനുസരിച്ച് നിർണ്ണയിക്കപ്പെടുന്നു. ഇടത് ലൈൻ ഇടതുവശത്തേക്ക് വിന്യസിച്ചിരിക്കുന്നു. വലത് വരി വലതുവശത്തേക്ക് വിന്യസിച്ചിരിക്കുന്നു. മധ്യരേഖ കേന്ദ്രീകരിച്ചിരിക്കുന്നു. ന്യായീകരിക്കുക വരി ന്യായമാണ്. അവസാന വരിയിൽ ഒരു വാക്ക് മാത്രമേ ഉള്ളൂവെങ്കിൽ, അത് വിന്യസിക്കപ്പെടും.
വാചകത്തിന്റെ സ്ഥാനത്ത് വ്യത്യസ്ത മൂല്യങ്ങളുടെ പ്രഭാവം പട്ടികയിൽ കാണിച്ചിരിക്കുന്നു. 1.
അർത്ഥം | വിന്യാസം | ടെക്സ്റ്റ് തരം |
---|---|---|
ഇടത്തെ | ഇടത്തെ | |
ശരിയാണ് | ശരിയാണ് | ![]() |
കേന്ദ്രം | കേന്ദ്രീകരിച്ചു | ![]() |
ന്യായീകരിക്കുക | വീതി | ![]() |
സാൻഡ്ബോക്സ്
വിന്നി ദി പൂഹ് എപ്പോഴും ഒരു ചെറിയ ഉന്മേഷത്തിന് വിമുഖത കാണിച്ചിരുന്നില്ല, പ്രത്യേകിച്ച് രാവിലെ പതിനൊന്ന് മണിക്ക്, കാരണം ആ സമയത്ത് പ്രഭാതഭക്ഷണം വളരെക്കാലം അവസാനിച്ചിരുന്നു, ഉച്ചഭക്ഷണം ഇതുവരെ ആരംഭിച്ചിട്ടില്ല. തീർച്ചയായും, മുയൽ കപ്പുകളും പ്ലേറ്റുകളും പുറത്തെടുക്കുന്നത് കണ്ട് അയാൾക്ക് ഭയങ്കര സന്തോഷമായി.
div (വാചകം-അലൈൻ-അവസാനം: ആരംഭിക്കുക;)
ഉദാഹരണം
ഒബ്ജക്റ്റ് മോഡൽ
ഒരു വസ്തു.style.textAlignLast
കുറിപ്പ്
Internet Explorer ഉം Edge ഉം ആരംഭ, അവസാന മൂല്യങ്ങളെ പിന്തുണയ്ക്കുന്നില്ല.
പതിപ്പ് 49-ന് മുമ്പുള്ള ഫയർഫോക്സ് -moz-text-align-last പ്രോപ്പർട്ടി പിന്തുണയ്ക്കുന്നു.
സ്പെസിഫിക്കേഷൻ
ഓരോ സ്പെസിഫിക്കേഷനും അംഗീകാരത്തിന്റെ പല ഘട്ടങ്ങളിലൂടെ കടന്നുപോകുന്നു.
- ശുപാർശ - സ്പെസിഫിക്കേഷൻ W3C അംഗീകരിച്ചു, ഒരു സ്റ്റാൻഡേർഡായി ശുപാർശ ചെയ്യുന്നു.
- സ്ഥാനാർത്ഥി ശുപാർശ ( സാധ്യമായ ശുപാർശ) - സ്റ്റാൻഡേർഡിന്റെ ഉത്തരവാദിത്തമുള്ള ഗ്രൂപ്പ് അതിന്റെ ലക്ഷ്യങ്ങൾ നിറവേറ്റുന്നതിൽ തൃപ്തരാണ്, എന്നാൽ സ്റ്റാൻഡേർഡ് നടപ്പിലാക്കാൻ വികസന കമ്മ്യൂണിറ്റിയിൽ നിന്ന് സഹായം ആവശ്യമാണ്.
- നിർദ്ദേശിച്ച ശുപാർശ നിർദ്ദേശിച്ച ശുപാർശ) - ഈ ഘട്ടത്തിൽ അന്തിമ അംഗീകാരത്തിനായി ഡോക്യുമെന്റ് W3C ഉപദേശക സമിതിക്ക് സമർപ്പിക്കുന്നു.
- വർക്കിംഗ് ഡ്രാഫ്റ്റ് - കമ്മ്യൂണിറ്റി അവലോകനത്തിനായി ചർച്ച ചെയ്യുകയും ഭേദഗതി ചെയ്യുകയും ചെയ്ത ഡ്രാഫ്റ്റിന്റെ കൂടുതൽ പക്വമായ പതിപ്പ്.
- എഡിറ്ററുടെ ഡ്രാഫ്റ്റ് ( എഡിറ്റോറിയൽ ഡ്രാഫ്റ്റ്) - പ്രോജക്റ്റ് എഡിറ്റർമാർ മാറ്റങ്ങൾ വരുത്തിയതിന് ശേഷമുള്ള സ്റ്റാൻഡേർഡിന്റെ ഒരു ഡ്രാഫ്റ്റ് പതിപ്പ്.
- ഡ്രാഫ്റ്റ് ( ഡ്രാഫ്റ്റ് സ്പെസിഫിക്കേഷൻ) - സ്റ്റാൻഡേർഡിന്റെ ആദ്യ ഡ്രാഫ്റ്റ് പതിപ്പ്.
സി.എസ്.എസ് | ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ | ക്രോം | ഓപ്പറ | സഫാരി | ഫയർഫോക്സ് | ആൻഡ്രോയിഡ് | ഐഒഎസ് | |
2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
3 | 2.0+ | 11.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ |
സംക്ഷിപ്ത വിവരങ്ങൾ
CSS പതിപ്പുകൾ
മൂല്യങ്ങൾ
കേന്ദ്രം വാചകം മധ്യഭാഗത്തേക്ക് വിന്യസിക്കുന്നു. ടെക്സ്റ്റ് ബ്ലോക്ക് സ്ഥിതിചെയ്യുന്ന ബ്രൗസർ വിൻഡോയിലോ കണ്ടെയ്നറിലോ തിരശ്ചീനമായി ടെക്സ്റ്റ് സ്ഥാപിച്ചിരിക്കുന്നു. വെബ് പേജിന്റെ മധ്യഭാഗത്തായി പ്രവർത്തിക്കുന്ന ഒരു അദൃശ്യ അക്ഷത്തിൽ വാചകത്തിന്റെ വരികൾ കെട്ടിയിരിക്കുന്നതായി തോന്നുന്നു. ഈ വിന്യാസ രീതി തലക്കെട്ടുകളിലും അടിക്കുറിപ്പുകൾ പോലുള്ള വിവിധ ഒപ്പുകളിലും സജീവമായി ഉപയോഗിക്കുന്നു; ഇത് ടെക്സ്റ്റ് ഡിസൈനിന് ഔദ്യോഗികവും ദൃഢവുമായ രൂപം നൽകുന്നു. മറ്റെല്ലാ സാഹചര്യങ്ങളിലും, അത്തരം വാചകങ്ങൾ വലിയ അളവിൽ വായിക്കുന്നത് അസൌകര്യം കാരണം അപൂർവ്വമായി കേന്ദ്ര വിന്യാസം ഉപയോഗിക്കുന്നു. ന്യായീകരിക്കുക, ഒരേ സമയം ഇടത്തോട്ടും വലത്തോട്ടും വിന്യസിച്ചിരിക്കുന്നു എന്നർത്ഥം. ഈ പ്രവർത്തനം നടത്താൻ, ഈ സാഹചര്യത്തിൽ ബ്രൗസർ വാക്കുകൾക്കിടയിൽ ഇടങ്ങൾ ചേർക്കുന്നു. ഇടത് വാചകം ഇടതുവശത്തേക്ക് വിന്യസിക്കുന്നു. ഈ സാഹചര്യത്തിൽ, വാചകത്തിന്റെ വരികൾ ഇടതുവശത്തേക്ക് വിന്യസിച്ചിരിക്കുന്നു, വലത് അറ്റം ഒരു ഗോവണിയായി ക്രമീകരിച്ചിരിക്കുന്നു. ഈ വിന്യാസ രീതി വെബ്സൈറ്റുകളിൽ ഏറ്റവും പ്രചാരമുള്ളതാണ്, കാരണം ഇത് ഉപയോക്താവിനെ എളുപ്പത്തിൽ ഒരു പുതിയ വരി തിരയാനും വലിയ ടെക്സ്റ്റ് സുഖമായി വായിക്കാനും അനുവദിക്കുന്നു. വലത് വാചകം വലതുവശത്തേക്ക് വിന്യസിക്കുന്നു. ഈ വിന്യാസ രീതി മുമ്പത്തെ തരത്തിലുള്ള ഒരു എതിരാളിയായി പ്രവർത്തിക്കുന്നു. അതായത്, വാചകത്തിന്റെ വരികൾ വലത് അരികിൽ വിന്യസിച്ചിരിക്കുന്നു, ഇടത് "കീറി" നിലകൊള്ളുന്നു. ഇടത് അറ്റം വിന്യസിച്ചിട്ടില്ലാത്തതിനാൽ, പുതിയ വരികൾ വായിക്കുന്നിടത്താണ്, ഈ വാചകം വിന്യസിച്ചിരിക്കുന്നതിനേക്കാൾ വായിക്കാൻ ബുദ്ധിമുട്ടാണ്. അതിനാൽ, മൂന്ന് വരികളിൽ കൂടാത്ത ഹ്രസ്വ തലക്കെട്ടുകൾക്കായി വലത് വിന്യാസം സാധാരണയായി ഉപയോഗിക്കുന്നു. ടെക്സ്റ്റ് വലത്തുനിന്ന് ഇടത്തോട്ട് വായിക്കേണ്ട നിർദ്ദിഷ്ട സൈറ്റുകൾ ഞങ്ങൾ പരിഗണിക്കുന്നില്ല, ഒരുപക്ഷേ സമാനമായ വിന്യാസ രീതി ഉപയോഗപ്രദമാകും. യാന്ത്രിക ഘടകം മൂലകത്തിന്റെ സ്ഥാനം മാറ്റില്ല. അനന്തരാവകാശം മാതാപിതാക്കളുടെ മൂല്യം അവകാശമാക്കുന്നു. ടെക്സ്റ്റ് ഇടത്തുനിന്ന് വലത്തോട്ടും വലത്തുനിന്ന് ഇടത്തോട്ട് പോകുമ്പോൾ വലത്തോട്ടും പോകുകയാണെങ്കിൽ ഇടത് പോലെ തന്നെ ആരംഭിക്കുക. വാചകം ഇടത്തുനിന്ന് വലത്തോട്ടും വലത്തുനിന്ന് ഇടത്തോട്ട് പോകുമ്പോൾ ഇടത്തോട്ടും പോയാൽ വലത് പോലെ അവസാനിക്കും.HTML5 CSS2.1 IE Cr Op Sa Fx
ഈ ഉദാഹരണത്തിന്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 1.
അരി. 1. സഫാരി ബ്രൗസറിൽ ടെക്സ്റ്റ് വിന്യസിക്കുക
ഇൻറർനെറ്റ് എക്സ്പ്ലോറർ പതിപ്പ് 7.0 വരെ ഈ ഉദാഹരണം മറ്റ് ബ്രൗസറുകളിൽ നിന്ന് വ്യത്യസ്തമായി വ്യാഖ്യാനിക്കുന്നു, ടെക്സ്റ്റ് മാത്രമല്ല, ബ്ലോക്കുകളും വിന്യസിക്കുന്നു (ചിത്രം 2).
അരി. 2. ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 7-ലെ ടെക്സ്റ്റ് അലൈൻമെന്റ്
ഒബ്ജക്റ്റ് മോഡൽ
document.getElementById("elementID ").style.textAlign
ബ്രൗസറുകൾ
പതിപ്പ് 7.0 വരെയുള്ളതും ഉൾപ്പെടുന്നതുമായ IE ഒരു ബ്ലോക്ക്-ലെവൽ എലമെന്റിന്റെ ഉള്ളടക്കങ്ങളെ മാത്രമല്ല, മൂലകത്തെയും വിന്യസിക്കുന്നു.