ഒരു വലിയ അക്ഷരം, നിർവചനം അനുസരിച്ച്, താരതമ്യേന വലിപ്പം കൂടിയ വാചകത്തിന്റെ ഒരു ഘടകമാണ്, മിക്കവാറും എല്ലാ ഭാഷകളിലും, ഒരു വാചകം ആരംഭിക്കുന്നത് ഒരു വലിയ അക്ഷരത്തിലാണ്. ഒരു പ്രധാന വലിയ അക്ഷരം ഉപയോഗിച്ച് ഒരു ഖണ്ഡികയുടെ ആരംഭം രൂപകൽപ്പന ചെയ്യുന്നത് വാചകം രൂപപ്പെടുത്താൻ നിങ്ങളെ അനുവദിക്കുകയും അത് ഗ്രഹിക്കുന്നത് എളുപ്പമാക്കുകയും ചെയ്യുന്നു. ഒരു ഇന്റർനെറ്റ് പേജ് രൂപകൽപ്പന ചെയ്യുമ്പോൾ, രചയിതാവിന്റെ മുൻഗണനകൾക്കും റഷ്യൻ ഭാഷയുടെ നിയമങ്ങൾക്കും അനുസൃതമായി വാചകം എഴുതാം. ഒരു css എക്സ്റ്റൻഷൻ - ഒരു സ്റ്റൈൽ ഷീറ്റ് - അല്ലെങ്കിൽ നിങ്ങളുടെ html ഫയലിലേക്ക് ഒരു സ്റ്റൈൽ വിഭാഗം ചേർത്തുകൊണ്ട് ഒരു ഫയലിലേക്ക് ചില "കമാൻഡുകൾ" നൽകി നിങ്ങൾക്ക് അതിന്റെ ഡിസൈൻ "ഓട്ടോമേറ്റ്" ചെയ്യാനും കഴിയും. ടെക്‌സ്‌റ്റിലുടനീളം ചില ഡിസൈൻ ഘടകങ്ങൾ പെട്ടെന്ന് മാറ്റുന്നതിനായി എച്ച്‌ടിഎംഎൽ കൂടാതെ CSS സാധാരണയായി പഠിക്കുന്നു.

സൈറ്റിന് നൂറുകണക്കിന് പേജുകൾ ഉണ്ടെങ്കിൽ ഇത് പ്രത്യേകിച്ചും സത്യമാണ്, അവയിൽ ഓരോന്നിനും മാറ്റങ്ങൾ വരുത്തുന്നത് വളരെ അധ്വാനിക്കുന്ന പ്രക്രിയയാണ്.

നിങ്ങൾ css പ്രയോഗിക്കുകയാണെങ്കിൽ, ഓരോ ഖണ്ഡികയുടെയും തുടക്കത്തിലെ വലിയ അക്ഷരങ്ങൾ പ്രത്യേകമായി കാണപ്പെടും. ഉദാഹരണത്തിന്, താഴെയുള്ള കോഡ്, പരാൻതീസിസുകളില്ലാതെ html-ൽ നൽകിയത്, വലിയ അക്ഷരം - ആദ്യ അക്ഷരം - വലുത് - സാധാരണ വലുപ്പത്തിന്റെ 220%, മഞ്ഞ - വർണ്ണ മൂല്യം മഞ്ഞ, കൂടാതെ "p" ടാഗ് ഉപയോഗിച്ച് ഫോർമാറ്റ് ചെയ്ത വാചകം അനുവദിക്കുന്നു. ബാക്കിയുള്ള വാചകങ്ങളിൽ നിന്ന് വ്യത്യസ്തമായ ഒരു ഫോണ്ടിൽ എഴുതുക - ജോർജിയ വേഴ്സസ് ബറ്റാങ്ചെ.

()

p: ആദ്യാക്ഷരം (ഫോണ്ട്-കുടുംബം: ജോർജിയ; അക്ഷര വലുപ്പം: 220%; നിറം: മഞ്ഞ;)

()

ചിത്രങ്ങളുടെ രൂപത്തിൽ നിങ്ങളുടെ സ്വന്തം ഫോണ്ട് സൃഷ്ടിച്ചുകൊണ്ട് നിങ്ങൾക്ക് മനോഹരമായ വലിയ അക്ഷരങ്ങൾ ലഭിക്കും - ഓരോ അക്ഷരത്തിനും ഒരു പ്രത്യേക ചിത്രമുണ്ട്, ഉദാഹരണത്തിന്, പഴയ റഷ്യൻ അല്ലെങ്കിൽ ഗോതിക് ശൈലിയിൽ. അവ വരയ്ക്കാം, ആവശ്യമുള്ള സ്ഥലങ്ങളിൽ, വലിയ അക്ഷരത്തിന്റെ സ്ഥാനത്ത്, നിങ്ങൾക്ക് പരാൻതീസിസില്ലാതെ () കോഡ് ചേർക്കാം. അധിക ആട്രിബ്യൂട്ടുകൾ ഉയരവും വീതിയും ആയിരിക്കും - ചിത്രത്തിന്റെ വീതിയും ഉയരവും, ബാക്കിയുള്ള ടെക്‌സ്‌റ്റുമായി യോജിപ്പുള്ള സംയോജനത്തിനായി പിക്സലുകളിൽ സജ്ജമാക്കാൻ കഴിയും. ഉദാഹരണം: (). ചുറ്റും പരാൻതീസിസ്< и >ഞങ്ങൾ നീക്കം ചെയ്യുന്നു.

അക്ഷരമാല സ്വയം വരയ്ക്കാൻ നിങ്ങൾക്ക് അവസരമില്ലെങ്കിൽ, ഗൂഗിളിൽ (ഫോണ്ട് വിഭാഗം) അല്ലെങ്കിൽ മറ്റ് തിരയൽ എഞ്ചിനുകളിലും ഉറവിടങ്ങളിലും സൗജന്യമായി ലഭ്യമായ ഫോണ്ടുകൾ ഉപയോഗിച്ച് വലിയ അക്ഷരം രൂപകൽപ്പന ചെയ്യാൻ കഴിയും. ഇത് ചെയ്യുന്നതിന്, മുകളിലുള്ള കോഡ് ഇനിപ്പറയുന്ന രീതിയിൽ ഫോർമാറ്റ് ചെയ്യേണ്ടതുണ്ട്:

()

p (font-family: batangche; font-size:93%;)

p: ആദ്യാക്ഷരം (ഫോണ്ട്-ഫാമിലി: കെല്ലി+സ്ലാബ്; ഫോണ്ട്-സൈസ്: 220%; നിറം: നീല;)

()

().

Google സേവനം നിങ്ങളെ ഒന്നോ അല്ലെങ്കിൽ മറ്റൊന്നോ തിരഞ്ഞെടുക്കാൻ അനുവദിക്കുന്നു കൂടാതെ html അല്ലെങ്കിൽ css ലേക്ക് തിരുകുന്നതിന് റെഡിമെയ്ഡ് ലിങ്കുകൾ നൽകുന്നു. ഒരു ഫോണ്ട് ഗ്രൂപ്പ് തിരഞ്ഞെടുക്കേണ്ടത് അത്യാവശ്യമാണെന്ന വസ്തുതയിലേക്ക് ഞങ്ങൾ നിങ്ങളുടെ ശ്രദ്ധ ആകർഷിക്കുന്നു - ലാറ്റിൻ അല്ലെങ്കിൽ സിറിലിക്, കാരണം... റഷ്യൻ ഭാഷാ വാചകം ഫോർമാറ്റ് ചെയ്യുമ്പോൾ മിക്കവാറും എല്ലാ ലാറ്റിൻ ഫോണ്ടുകളും പ്രവർത്തിക്കില്ല. ഇപ്പോൾ, സെർച്ച് എഞ്ചിൻ ഏകദേശം 40 തരം സൗജന്യമായി നൽകുന്നു.

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

ഡ്രോപ്പ് ക്യാപ് (ടെക്‌സ്റ്റിൽ ഉൾച്ചേർത്തിരിക്കുന്ന ഒരു ഡ്രോപ്പ് ക്യാപ്) എന്നത് ഒരു ഖണ്ഡികയുടെ ആദ്യ അക്ഷരമാണ്, ബാക്കിയുള്ളതിനേക്കാൾ വലുതാണ്, കൂടാതെ അതിന്റെ മുകൾഭാഗം ഖണ്ഡികയുടെ ആദ്യ വരിയുടെ തലത്തിലായിരിക്കും. വാചകത്തിൽ ഉൾച്ചേർത്ത ഒരു ഡ്രോപ്പ് ക്യാപ്പിന്റെ ഒരു ഉദാഹരണം ചിത്രത്തിൽ നിങ്ങൾക്ക് കാണാൻ കഴിയും.

വഴിയിൽ, വേർഡ്പ്രസിന് ഒരു പ്രത്യേക പ്ലഗിൻ ഉണ്ട് (wordpress.org/extend/plugins/drop-caps) അത് സ്വയം ഉൾച്ചേർത്ത വാചകം സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു (താഴേക്ക് മാറ്റി) വലിയ അക്ഷരങ്ങൾ. അത്ഭുതം! എന്നിരുന്നാലും, നിങ്ങൾക്ക് ഒരു പ്ലഗിൻ ഉപയോഗിക്കാൻ താൽപ്പര്യമില്ലെങ്കിൽ (നിങ്ങൾ അങ്ങനെ ചെയ്യില്ലെന്ന് എനിക്ക് ഉറപ്പുണ്ട്), കൂടാതെ ഒന്നിലധികം പോസ്റ്റുകളിൽ ഒരു ഡ്രോപ്പ് ക്യാപ്പ് സൃഷ്‌ടിച്ചാൽ മാത്രം മതി, അല്ലെങ്കിൽ ഒരു പ്രത്യേക സ്ഥലത്ത്?

വലിയ അക്ഷരങ്ങൾ സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് ഒരു പ്ലഗിൻ ആവശ്യമില്ല എന്നതാണ് നല്ല വാർത്ത, നിങ്ങൾക്ക് വേണ്ടത് ഒരു ചെറിയ css ഉം ഒരു സ്പാൻ ടാഗും ആണ്. നിങ്ങളുടെ css ഫയൽ തുറന്ന് ഇനിപ്പറയുന്ന കോഡ് ചേർക്കുക:

Span.dropcaps ( font-family:Georgia, serif; colour: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; മാർജിൻ-വലത് : 0.09em; സ്ഥാനം: ബന്ധു;)

ഇതുപോലൊന്ന്. തീർച്ചയായും, നിങ്ങളുടെ ഡിസൈനും വാചകവും പൊരുത്തപ്പെടുന്ന ഒരു ശൈലി നിങ്ങൾക്ക് ആവശ്യമാണ്. ഉദാഹരണത്തിന്, പ്രോപ്പർട്ടി മൂല്യങ്ങൾ: ഫോണ്ട്-സൈസ്, മാർജിനുകൾ, ലൈൻ-ഹൈറ്റ് എന്നിവ നിങ്ങളുടെ ഡിസൈനും ടെക്സ്റ്റും അടിസ്ഥാനമാക്കി തിരഞ്ഞെടുക്കേണ്ടതുണ്ട്.

ടാഗ് സ്പാൻ

വാചകത്തിന്റെ വലിയ അക്ഷരത്തിൽ ശൈലി പ്രയോഗിക്കുന്നതിന്, നിങ്ങൾ ഒരു സ്പാൻ ടാഗിൽ വലിയ അക്ഷരം "പൊതിഞ്ഞ്" ഉചിതമായ ക്ലാസ് വ്യക്തമാക്കേണ്ടതുണ്ട്.

എ

കപട ഘടകം:ആദ്യാക്ഷരം

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

പി: ആദ്യ അക്ഷരം ( ഫോണ്ട്-കുടുംബം: ജോർജിയ, സെരിഫ്; നിറം: #ccc; ഫോണ്ട്-വലിപ്പം: 46px; ഫ്ലോട്ട്: ഇടത്; ഫോണ്ട്-ഭാരം: 400; ലൈൻ-ഉയരം: 1എം; മാർജിൻ-ബോട്ടം: -0.4എം; മാർജിൻ -വലത്: 0.09എം; സ്ഥാനം: ബന്ധു;)

CSS ഉപയോഗിച്ച് വലിയ അക്ഷരങ്ങൾ എഡിറ്റ് ചെയ്യുന്നതിനുള്ള രണ്ട് രീതികൾ ഇവിടെയുണ്ട്.

തുടക്കം മുതൽ ഒടുക്കം വരെ ടെക്‌സ്‌റ്റ് ഒരുപോലെ കാണപ്പെടുന്ന ഒരു ജനറിക് ഡിസൈനിന്റെ ഏകതാനത തകർക്കാൻ CSS ക്യാപ്‌സ് സഹായിക്കുന്നു.

പ്രാരംഭ അക്ഷരങ്ങൾ അന്നും ഇന്നും

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

ഉയർത്തിയതും വീഴ്ത്തിയതുമായ അക്ഷരങ്ങൾ ഇന്നും ഉപയോഗിക്കുന്നു. പത്രങ്ങൾ, മാസികകൾ, പുസ്തകങ്ങൾ എന്നിവയിലും ഡിജിറ്റൽ പ്രിന്റിംഗിലും അവ കാണാം. ഉയർത്തിയ തരത്തെ ചിലപ്പോൾ നീളമേറിയ തരം എന്ന് വിളിക്കുന്നു. അവ പിന്തുടരുന്ന ടെക്‌സ്‌റ്റിന്റെ അടിയിൽ ഫ്ലഷ് ചെയ്‌തിരിക്കുന്നു. ഡ്രോപ്പ് ചെയ്ത അക്ഷരങ്ങൾ ടെക്‌സ്‌റ്റിന്റെ മുകൾഭാഗത്ത് ഫ്ലഷ് ആയി സ്ഥാപിക്കുന്നു, ചിലപ്പോൾ ടെക്‌സ്‌റ്റ് ഉള്ളടക്കത്തിന്റെ ബോഡിക്ക് പിന്നിലെ ഒരു ലെയറിലോ ബാക്കിയുള്ള വാചകം അവയെ ചുറ്റിപ്പിടിക്കുന്നു.

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

ക്ലാസുകൾ ഉപയോഗിക്കുന്നു

CSS-നെ കുറിച്ച് ഇതിനകം തന്നെ ധാരണയുള്ള ഡിസൈനർമാർക്ക് ആദ്യത്തെ വലിയ അക്ഷരത്തിനായി ഒരു പ്രത്യേക CSS ക്ലാസ് സൃഷ്ടിക്കേണ്ടതുണ്ടെന്ന് അറിയാം.

ഖണ്ഡിക ഘടകത്തിനായുള്ള CSS കോഡും അക്ഷരം സൃഷ്ടിക്കുന്ന ക്ലാസും ഇതുപോലെ കാണപ്പെടും:

p (font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;).myinitialcaps (font-size:48px; font-family: Didot;)

കൂടാതെ HTML കോഡ് ഇതുപോലെ കാണപ്പെടും:

എന്താണ് നമുക്ക് നൽകുന്നത്:

വളരെ എളുപ്പമാണെന്ന് തോന്നുന്നുണ്ടോ? ഓരോ വലിയ അക്ഷരത്തിനും പ്രത്യേക കെർണിംഗ് ആവശ്യമുള്ളതിനാൽ, ഉയർത്തിയ നിർദ്ദിഷ്ട അക്ഷരങ്ങളെ ആശ്രയിച്ച് നിങ്ങൾ യഥാർത്ഥത്തിൽ ക്രമീകരണങ്ങൾ നടത്തേണ്ടതുണ്ട്. ഉയർത്തിയ അക്ഷരങ്ങൾക്കും ബോഡി ടെക്‌സ്‌റ്റിനും ഒരു ഫോണ്ട് തിരഞ്ഞെടുത്ത ശേഷം, ഉയർത്തിയ ഓരോ അക്ഷരത്തിനും നിങ്ങൾ പ്രത്യേക ക്ലാസുകൾ സൃഷ്ടിക്കേണ്ടതുണ്ട്. താഴെയുള്ള CSS ക്ലാസ്സിൽ.myinitialcapsi, I-നും n-നും ഇടയിലുള്ള ദൂരം കുറയ്ക്കുന്നതിന് വലതുവശത്തുള്ള മാർജിൻ നെഗറ്റീവ് മൂല്യത്തിലേക്ക് സജ്ജീകരിച്ചിരിക്കുന്നു.

Myinitialcapsi (font-size:48px; font-family: Didot; Margin-right:-1px;)

ഈ സാഹചര്യത്തിൽ, "I", "n" എന്നിവയ്ക്കിടയിൽ കുറച്ച് അധിക ഇടമുണ്ട്.

നെഗറ്റീവ് മാർജിൻ ഉള്ള ഒരു പുതിയ ക്ലാസ് ഉൾപ്പെടുത്തുന്നത് അതിനെ കൂടുതൽ അടുപ്പിക്കുന്നു.

മുകളിലെ ഉദാഹരണത്തിലെ സ്‌ക്രീൻ റെസല്യൂഷൻ അനുസരിച്ച്, I ഉം n ഉം ഒരുമിച്ച് മങ്ങിയതായി കാണപ്പെടാം. അക്ഷരങ്ങളുടെ അറ്റത്തുള്ള സെരിഫുകളാണ് ഇതിന് കാരണം. അതിനാൽ നിങ്ങളുടെ അന്തിമ CSS ശൈലികൾ തീരുമാനിക്കുന്നതിന് മുമ്പ്, CSS ക്യാപ്‌സ് ടെക്‌സ്‌റ്റ് അവയിൽ എങ്ങനെ കാണപ്പെടുന്നുവെന്ന് കാണാൻ വ്യത്യസ്ത ഉപകരണങ്ങളിൽ നിങ്ങളുടെ സൈറ്റ് പരിശോധിക്കുക.

ഉദ്ധരണികളും മറ്റ് പ്രത്യേക കേസുകളും

നിങ്ങൾക്ക് വാചകത്തിന്റെ തുടക്കത്തിലെ അക്ഷരങ്ങൾ മാത്രമല്ല വലുതാക്കാൻ കഴിയും. അക്ഷരത്തിന് അടുത്തായി ദൃശ്യമാകുന്ന ഉദ്ധരണി ചിഹ്നങ്ങളുടെ ഒരു വലിയ പതിപ്പ് സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് മറ്റൊരു ക്ലാസ് നടപ്പിലാക്കാം. ഞങ്ങളുടെ കാര്യത്തിൽ, 48 വലുപ്പമുള്ള ഒരു അക്ഷര ക്ലാസോ 20 പിക്സലുകളുടെ ഒരു ടെക്സ്റ്റ് ക്ലാസോ ഉദ്ധരണി ചിഹ്നങ്ങൾക്ക് അനുയോജ്യമല്ല. പകരം, അത് അതിനിടയിലുള്ള ഒന്നായിരിക്കും - 30 പിക്സലുകൾ. ഉദ്ധരണികൾ I എന്നതുമായി ഒപ്റ്റിക്കലായി വിന്യസിക്കാൻ ഞങ്ങൾ 4 പിക്സലുകൾ താഴേക്ക് നീക്കും:

Myinitialcapsq (font-size:30px; font-family: Didot; float:left; margin-top:4px;)

നെഗറ്റീവ് മാർജിൻ ഉള്ള ഒരു പുതിയ ക്ലാസ് "ഉൾപ്പെടെ" അതിനെ കൂടുതൽ അടുപ്പിക്കുന്നു.

ഓരോ CSS ക്യാപിറ്റലൈസേഷനുകളും ഉദ്ധരണികൾക്കൊപ്പം സജ്ജീകരിക്കുന്നതിൽ നിങ്ങൾ വളരെ ശ്രദ്ധാലുവായിരിക്കണം, അതിലൂടെ അവയുടെ കെർണിംഗും വിന്യാസവും ചുറ്റുമുള്ള മാർക്ക്അപ്പുമായി പൊരുത്തപ്പെടുന്നു. ഉദാഹരണത്തിന്, T എന്ന അക്ഷരം ഖണ്ഡികയുടെ അരികിൽ നിന്ന് ചെറുതായി ഇടത്തേക്ക് നീക്കേണ്ടതുണ്ട്, അങ്ങനെ അതിന്റെ തിരശ്ചീന രേഖ ദൃശ്യപരമായി ലേഔട്ടിലേക്ക് യോജിക്കുന്നു. C, G, O, Q എന്നിവ പോലുള്ള വൃത്താകൃതിയിലുള്ള അക്ഷരങ്ങൾ ഉപയോഗിച്ച് നിങ്ങൾ ഇത് ചെയ്യേണ്ടതുണ്ട്. ഈ ഉദാഹരണം 20, 30, 48 എന്നിവയുടെ ഫോണ്ട് വലുപ്പങ്ങൾ ഉപയോഗിക്കുന്നു. എന്നാൽ നിങ്ങൾ തിരഞ്ഞെടുക്കുന്ന നിർദ്ദിഷ്ട ഫോണ്ടുകളെ അടിസ്ഥാനമാക്കി നിങ്ങൾ വലുപ്പങ്ങൾ തിരഞ്ഞെടുക്കേണ്ടതുണ്ട്. അതുപോലെ സൈറ്റ് കാണുന്ന സ്‌ക്രീനുകളുടെ വലുപ്പങ്ങളും റെസല്യൂഷനുകളും.

കപട ഘടകങ്ങളും കപട ക്ലാസുകളും

CSS കപട-ഘടകം ഉപയോഗിച്ച്, ഒരു ഖണ്ഡിക ഘടകത്തിലേക്ക് :: ആദ്യ അക്ഷരം ചേർത്ത് നിങ്ങൾക്ക് എളുപ്പത്തിൽ ഉയർത്തിയ അക്ഷരം സൃഷ്ടിക്കാൻ കഴിയും. ലെഗസി ബ്രൗസറുകൾക്കായി :ആദ്യാക്ഷരം (ഒരു കോളൻ ഉള്ളത്) ഉപയോഗിക്കുക:

p ( ഫോണ്ട്-സൈസ്: 1.2എം; ഫോണ്ട്-ഫാമിലി: ജോർജിയ, "ടൈംസ് ന്യൂ റോമൻ", ടൈംസ്, സെരിഫ്; ലൈൻ-ഹൈറ്റ്: 2 എം; പാഡിംഗ്-ബോട്ടം: 1.2 എം;) പി:: ആദ്യ അക്ഷരം (ഫോണ്ട് വലുപ്പം: 3.6em; ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം: വലിയക്ഷരം; ഫോണ്ട്-ഫാമിലി: "മോണോടൈപ്പ് ബെർണാഡ് കണ്ടൻസ്ഡ്", സെരിഫ്; മാർജിൻ-വലത്:0.03em;).initialb (മാർജിൻ-വലത്:-0.1em;).initialn (മാർജിൻ-വലത്:-0.15 em;)

N, B എന്നീ അക്ഷരങ്ങളുടെ കെർണിംഗ് കണക്കിലെടുക്കുന്ന CSS ക്ലാസുകൾ ഉൾക്കൊള്ളുന്ന HTML കോഡ് ഇതുപോലെ കാണപ്പെടും...

ഒരു പ്രാരംഭ അക്ഷരം, ആദ്യ അക്ഷരം വലിയ അക്ഷരമാണ്.
ഒരു ലൈൻ ബ്രേക്കിനൊപ്പം, അടുത്ത വരിയിൽ പ്രാരംഭ തൊപ്പി ഇല്ല.

HTML-ലെ വലിയ അക്ഷരമല്ല, ആദ്യ അക്ഷരം 3.6em എന്ന പ്രാരംഭ തൊപ്പി വലുപ്പത്തിലേക്ക് എങ്ങനെ മാറുന്നുവെന്ന് HTML ഉറവിടത്തിൽ ശ്രദ്ധിക്കുക. വൃത്തിയായി, അല്ലേ?

എന്നാൽ ഒരു ഹാർഡ് റിട്ടേൺ, ഒരു പുതിയ ഖണ്ഡിക ആരംഭിക്കുമ്പോൾ, മറ്റൊരു പ്രാരംഭ തൊപ്പി എപ്പോഴും സൃഷ്ടിക്കപ്പെടും. നിങ്ങൾ സ്വയം ചോദിക്കുന്നുണ്ടാകാം, ഞാൻ ഇത് എങ്ങനെ കണക്കാക്കും? വളരെ പുതിയ ഖണ്ഡികയുടെ തുടക്കത്തിൽ എനിക്ക് ഒരു പ്രാരംഭ തൊപ്പി ഉണ്ടായിരിക്കേണ്ടതുണ്ടോ? ശരി, നിങ്ങൾക്ക് കഴിയുമായിരുന്നു. പക്ഷേ, അത് അങ്ങനെ കാണണമെന്ന് നിങ്ങൾ ആഗ്രഹിക്കുന്നുണ്ടോ, അത് അങ്ങനെ തന്നെ നോക്കേണ്ടതുണ്ടോ?

ഖണ്ഡികയിലെ ആദ്യത്തെ വലിയ അക്ഷരം ഒരു അക്ഷരമായി പരിവർത്തനം ചെയ്യുന്നു.
ഒരു ലൈൻ ബ്രേക്കിനു ശേഷമുള്ള ആദ്യ അക്ഷരം വലിയക്ഷരത്തിലേക്ക് പരിവർത്തനം ചെയ്യില്ല.

HTML സോഴ്‌സ് കോഡിൽ ആദ്യ അക്ഷരം വലിയക്ഷരമാക്കിയിട്ടില്ല, പക്ഷേ അത് 3.6em പ്രതീകമായി പരിവർത്തനം ചെയ്യപ്പെടുന്നു.

എന്നിരുന്നാലും, നിർബന്ധിത ലൈൻ ബ്രേക്കിനു ശേഷവും, ഓരോ പുതിയ ഖണ്ഡികയുടെയും തുടക്കത്തിൽ ഒരു കത്ത് സൃഷ്ടിക്കപ്പെടുന്നു. നിങ്ങൾ സ്വയം ചോദിക്കുന്നുണ്ടാകാം: ഞാൻ ഇത് എങ്ങനെ കണക്കിലെടുക്കും? ഈ കേസുകൾക്കെല്ലാം ഞാൻ അക്ഷരങ്ങൾ ചേർക്കേണ്ടതുണ്ടോ? ശരി, നിങ്ങൾക്ക് കഴിയും. എന്നാൽ ഇത് ആവശ്യമാണോ?

കപട ഘടകങ്ങൾ നൽകുന്ന ആനുകൂല്യങ്ങൾക്കൊപ്പം, കേർണിംഗ്, പാഡിംഗ് പ്രശ്‌നങ്ങൾ കൈകാര്യം ചെയ്യുന്നതിന് പ്രത്യേക ക്ലാസുകൾ നിർവചിക്കുന്നതിന് ഞങ്ങൾക്ക് ധാരാളം കോഡുകൾ ചേർക്കേണ്ടി വന്നു. എന്നാൽ ഈ രീതി ഓരോ പുതിയ ഖണ്ഡികയുടെയും ആദ്യ അക്ഷരത്തെ ഒരു CSS വലിയ അക്ഷരത്തിലേക്ക് മാറ്റുന്നു. ഓരോ ഖണ്ഡികയുടെയും ആദ്യ അക്ഷരം രൂപാന്തരപ്പെടുത്തേണ്ട ആവശ്യമില്ലാത്തതിനാൽ ചിലർക്ക് ഇത് അനുയോജ്യമല്ലായിരിക്കാം.

ഒരു സ്‌മാർട്ട് ലേഔട്ട് സൃഷ്‌ടിക്കാൻ കപട ക്ലാസുകളും കപട ഘടകങ്ങളും സംയോജിപ്പിക്കുന്നു

ആദ്യത്തെ കുട്ടി കപട ക്ലാസ് ചേർക്കുന്നത് ആദ്യ അക്ഷരങ്ങൾ അനാവശ്യമായി പരിവർത്തനം ചെയ്യുന്നതിനുള്ള പ്രശ്നം പരിഹരിക്കാൻ സഹായിക്കുന്നു:

p ( ഫോണ്ട്-സൈസ്: 1.2എം; ഫോണ്ട്-ഫാമിലി: ജോർജിയ, "ടൈംസ് ന്യൂ റോമൻ", ടൈംസ്, സെരിഫ്; ലൈൻ-ഹൈറ്റ്: 2 എം; പാഡിംഗ്-ബോട്ടം: 0.5 എം;) പി: ആദ്യ കുട്ടി:: ആദ്യ അക്ഷരം ( ഫോണ്ട് വലുപ്പം: 3.6em; ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം: വലിയക്ഷരം; ഫോണ്ട്-ഫാമിലി: "മോണോടൈപ്പ് ബെർണാഡ് കണ്ടൻസ്ഡ്", സെരിഫ്; മാർജിൻ-വലത്:0.03em;)

ഈ കോഡ് HTML-മായി സംയോജിപ്പിക്കുന്നു:

ആദ്യത്തെ കുട്ടി എന്ന് നിർവചിച്ചിരിക്കുന്ന ആദ്യത്തെ അക്ഷരം ഈ രീതി ഉപയോഗിച്ച് ഉയർത്തിയ ഡ്രോപ്പ് ക്യാപ്പിലേക്ക് പരിവർത്തനം ചെയ്യപ്പെടുന്ന ഒരേയൊരു അക്ഷരമാണ്.

ആദ്യത്തെ കുട്ടി എന്ന് നിർവചിച്ചിരിക്കുന്ന അക്ഷരം മാത്രമേ പരിവർത്തനം ചെയ്തിട്ടുള്ളൂ എന്നതിനാൽ, ഈ ഉദാഹരണം ആദ്യ കുട്ടി കൂടാതെ മുമ്പത്തേതിൽ നിന്ന് വ്യത്യസ്തമാണെന്ന് ശ്രദ്ധിക്കുക. കൂടാതെ, ഒരു ഖണ്ഡികയുടെ തുടക്കത്തിനും നിർബന്ധിത ലൈൻ ബ്രേക്കിനു ശേഷവും ഞങ്ങൾ ആദ്യ അക്ഷരങ്ങൾ പരിവർത്തനം ചെയ്യുന്നില്ല. ഞങ്ങൾ ഖണ്ഡികകളിലെ എല്ലാ ആദ്യ അക്ഷരങ്ങളും പരിവർത്തനം ചെയ്യുമ്പോൾ ലേഔട്ട് എങ്ങനെ കാണപ്പെട്ടു എന്നതിനേക്കാളും മനോഹരമായി ഇത് കാണപ്പെടുന്നു.

കപട ക്ലാസുകൾ ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനം വിവിധ പ്രത്യേക കേസുകൾ കൈകാര്യം ചെയ്യാനുള്ള കഴിവാണ്. കുറവുകളെക്കുറിച്ച്? നിരവധി വ്യത്യസ്ത കപട ക്ലാസുകൾ ഉണ്ട്, അവ പല തരത്തിൽ സംയോജിപ്പിച്ച് നിങ്ങളുടെ തല കറങ്ങാൻ കഴിയും. ഉദാഹരണത്തിന്, കപട ക്ലാസുകൾ : ഫസ്റ്റ്-ചൈൽഡ്, : ഫസ്റ്റ്-ഓഫ്-ടൈപ്പ് എന്നിവ ഒരേ ഫലങ്ങൾ ഉണ്ടാക്കും. നിങ്ങൾക്ക് ഒരു കപട-ക്ലാസ് ഒരു ഖണ്ഡികയിൽ മാത്രമല്ല, ഘടകങ്ങളിലേക്കും പ്രയോഗിക്കാവുന്നതാണ്. ഉദാഹരണത്തിന്, ഡിഡോട്ട് ഫോണ്ടിൽ താഴെ ഉയർത്തിയ അക്ഷരങ്ങളുടെ ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നത് പോലെ. A-യുടെ വലതുവശത്ത് മാർജിൻ ആട്രിബ്യൂട്ട് എങ്ങനെയാണ് ചേർത്തിരിക്കുന്നത് എന്ന് ശ്രദ്ധിക്കുക. അല്ലെങ്കിൽ, ഇത് വിഭാഗത്തിന്റെ തുടക്കത്തിൽ s എന്ന അക്ഷരത്തിനൊപ്പം "ഒപ്പം ഒട്ടിക്കും":

വിഭാഗം ( ഫോണ്ട്-സൈസ്: 1.2എം; ഫോണ്ട്-ഫാമിലി: ജോർജിയ, "ടൈംസ് ന്യൂ റോമൻ", ടൈംസ്, സെരിഫ്; ലൈൻ-ഹൈറ്റ്: 3 എം;) വിഭാഗം>p:ആദ്യം-കുട്ടി:ആദ്യ-അക്ഷരം (ഫോണ്ട്-വലിപ്പം: 4എം; ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം: വലിയക്ഷരം; ഫോണ്ട്-ഫാമിലി:ഡിഡോട്ട്, സെരിഫ്; മാർജിൻ-വലത്:5px;)

കൂടാതെ HTML സഹിതം:

വിഭാഗത്തിന്റെ തുടക്കത്തിൽ, ആദ്യ അക്ഷരത്തിനായി ഉയർത്തിയ ഒരു ഡ്രോപ്പ് ക്യാപ് വ്യക്തമാക്കിയിരിക്കുന്നു.

ഒപ്പം ഒരു പുതിയ ഖണ്ഡിക...

നിങ്ങൾക്ക് പരീക്ഷണാത്മകത തോന്നുന്നുവെങ്കിൽ, :ആദ്യകുട്ടി, :ആദ്യം-ഓഫ്-ടൈപ്പ് എന്നിവയ്‌ക്ക് പുറമേ നിങ്ങൾക്ക് വ്യത്യസ്‌ത രീതികൾ പര്യവേക്ഷണം ചെയ്യാം. ഉദാഹരണത്തിന്, CSS ക്യാപിറ്റലൈസേഷൻ ടെക്‌സ്‌റ്റിനായി ഈ അല്ലെങ്കിൽ മറ്റ് തരത്തിലുള്ള വ്യാജ ക്ലാസുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് കാണാൻ :nth-of-type അല്ലെങ്കിൽ :nth-of-child. ഈ ലേഖനത്തിൽ പറഞ്ഞിരിക്കുന്ന തത്ത്വങ്ങൾ നിങ്ങൾ പിന്തുടരുകയോ ആഴത്തിൽ കുഴിക്കാൻ തുടങ്ങുകയോ ചെയ്യുകയാണെങ്കിൽ, CSS കപട-ക്ലാസ് ഫസ്റ്റ്-ചൈൽഡ്, :ഫസ്റ്റ്-ഓഫ്-ടൈപ്പ്, കൂടാതെ:ഫസ്റ്റ്-ലെറ്റർ എന്നിവയ്‌ക്കൊപ്പം എങ്ങനെ പ്രവർത്തിക്കാമെന്ന് നിങ്ങൾ പഠിച്ചുകഴിഞ്ഞാൽ, നിങ്ങൾക്ക് അപേക്ഷിക്കാൻ കഴിയും. അവ HTML ഘടകങ്ങളിലേക്ക് ശരിയായി.

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

നമുക്ക് വാചകം രൂപാന്തരപ്പെടുത്താം

കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾക്ക് നന്ദി, നിങ്ങൾക്ക് ഒരു ബ്ലോക്കിന്റെ ആദ്യ പ്രതീകവും മുഴുവൻ വാചകവും മാറ്റാൻ കഴിയും. രണ്ടും എങ്ങനെ ചെയ്യാം എന്ന് ഞാൻ പറയാം. കൂടാതെ, ഈ ലേഖനത്തിൽ പരാമർശിച്ചിരിക്കുന്ന എല്ലാ ഉപകരണങ്ങളും മൂന്ന് ഭാഷാ തലങ്ങളിൽ പിന്തുണയ്ക്കുന്നു: css1, css2, css2.1, css3.

തിരഞ്ഞെടുത്തവയിലെ എല്ലാ ടെക്‌സ്‌റ്റ് ഉള്ളടക്കവും പരിഷ്‌ക്കരിക്കുന്ന രസകരമായ ഒരു പ്രോപ്പർട്ടി ഉപയോഗിച്ച് ഞാൻ ആരംഭിക്കും. ഇത് ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം ആണ്.

പേരിട്ട ഘടകത്തിന് പ്രതീകങ്ങളെ വലിയക്ഷരങ്ങളിലേക്കും ചെറിയക്ഷരങ്ങളിലേക്കും പരിവർത്തനം ചെയ്യാനും ഒരു വാക്കിന്റെ ഓരോ ആദ്യ പ്രതീകവും ഒരു വലിയ അക്ഷരമായി സജ്ജമാക്കാനും കഴിയും. പട്ടികയിലെ മൂല്യങ്ങളെക്കുറിച്ച് ഞാൻ കൂടുതൽ എഴുതി.

ഇപ്പോൾ, സൈദ്ധാന്തിക മെറ്റീരിയൽ ശക്തിപ്പെടുത്തുന്നതിന്, ഒരു ഉദാഹരണം നോക്കുക.

ടെക്‌സ്‌റ്റ് ട്രാൻസ്‌ഫോർമേഷൻ ബോഡി (ടെക്‌സ്‌റ്റ്-അലൈൻ: സെന്റർ; ) h1 (ടെക്‌സ്‌റ്റ്-ട്രാൻസ്‌ഫോം: വലിയക്ഷരം; ) h3 (ടെക്‌സ്‌റ്റ് രൂപാന്തരം: വലിയക്ഷരം; ) ശ്രദ്ധിക്കുക! !നാളെ എല്ലാ സൗന്ദര്യവർദ്ധക ഉൽപ്പന്നങ്ങൾക്കും ഒരു കിഴിവ് ഉണ്ട്!

നിങ്ങളുടെ നഗരത്തിൽ സ്ഥിതി ചെയ്യുന്ന എല്ലാ ശാഖകളിലും പ്രമോഷൻ സാധുവാണ്.

ഒരു ഡ്രോപ്പ് ക്യാപ് സൃഷ്ടിക്കുന്നു

"ഡ്രോപ്പ് ക്യാപ്" എന്ന പദത്തിന്റെ അർത്ഥമെന്താണെന്ന് നിങ്ങൾക്ക് അറിയില്ലെങ്കിൽ, അത് നിലവിലെ വിഷയവുമായി നേരിട്ട് ബന്ധപ്പെട്ടിരിക്കുന്നതിനാൽ അത് കണ്ടെത്താനുള്ള സമയമാണ്.

ഒരു വലിയ അക്ഷരം (അല്ലെങ്കിൽ ചിലപ്പോൾ അവർ ഒരു ഇനീഷ്യൽ എന്നും പറയും) ഒരു അധ്യായത്തിന്റെ ആദ്യ അക്ഷരമാണ്, അത് ബാക്കിയുള്ളവയിൽ നിന്ന് അതിന്റെ വലിയ വലുപ്പത്തിലും നിറത്തിലും ചില സന്ദർഭങ്ങളിൽ ഫോണ്ട് രൂപകൽപ്പനയിലും വ്യത്യാസപ്പെട്ടിരിക്കുന്നു. യഥാർത്ഥ ജീവിതത്തിൽ, അത്തരമൊരു കത്തിന്റെ ഒരു ഉദാഹരണം പഴയ കൈയെഴുത്തുപ്രതികളിലും പുസ്തകങ്ങളിലും കാണാം.

ഒരു ഇനീഷ്യൽ സൃഷ്ടിക്കാൻ നിരവധി മാർഗങ്ങളുണ്ട്. പലപ്പോഴും ഒരു ചിഹ്നം ഒരു മാർക്ക്അപ്പ് ലാംഗ്വേജ് ടാഗ് ഉപയോഗിച്ച് ഹൈലൈറ്റ് ചെയ്യപ്പെടുന്നു, തുടർന്ന് അത് പരിഷ്‌ക്കരിക്കുന്ന ശൈലികളിൽ ചില സവിശേഷതകൾ വ്യക്തമാക്കും. ഇതൊരു നല്ല മാർഗമാണ്, എന്നാൽ ഈ പ്രസിദ്ധീകരണം CSS മെക്കാനിസങ്ങളെക്കുറിച്ച് സംസാരിക്കുന്നു (എന്റെ അഭിപ്രായത്തിൽ, ഈ കേസിൽ ഉപയോഗിക്കാൻ കൂടുതൽ യുക്തിസഹവും സൗകര്യപ്രദവുമാണ്).

ഈ പ്രശ്നം പരിഹരിക്കാൻ, നിങ്ങൾക്ക് പോലുള്ള ഒരു ഉപകരണം ഉപയോഗിക്കാം.

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

ഒരു പ്രത്യേക ഉദാഹരണം പരിഗണിക്കാൻ ഞാൻ നിർദ്ദേശിക്കുന്നു. അവതരിപ്പിച്ച ചെറിയ പ്രോഗ്രാം നടപ്പിലാക്കുമ്പോൾ, ഒരു നിറമുള്ള പ്രാരംഭ അക്ഷരം മാത്രമല്ല, പൂക്കൾ കൊണ്ട് നിറയ്ക്കാൻ ഞാൻ തീരുമാനിച്ചു. ഇത് ചെയ്യുന്നതിന്, ഫോണ്ട് വർണ്ണം സുതാര്യമാക്കുകയും തിരഞ്ഞെടുത്ത ചിത്രം ഉപയോഗിച്ച് അക്ഷരം പൂരിപ്പിക്കുകയും ചെയ്തുകൊണ്ട് നിങ്ങൾ കുറച്ച് തന്ത്രപരമായ തന്ത്രങ്ങൾ ഉപയോഗിക്കേണ്ടതുണ്ട്.

നീണ്ടുനിൽക്കുന്ന പ്രാരംഭ p (അക്ഷര വലുപ്പം: 26px; ഫോണ്ട്-കുടുംബം: ഫാന്റസി; ) പി: ആദ്യ അക്ഷരം ( /*ഒരു ഖണ്ഡികയുടെ ആദ്യ അക്ഷരത്തിന് ശൈലി നിയമങ്ങൾ നിർദ്ദേശിക്കുക*/ ഫോണ്ട്-കുടുംബം: sant-serif; font-weight: 900 ; വർണ്ണം: സുതാര്യം; പശ്ചാത്തലം: url (http://dreempics.com/img/picture/Mar/26/51a6ff79968c93a6542e88e464368bce/1.jpg); പശ്ചാത്തല വലുപ്പം: 99%; ഫോണ്ട്-വലുപ്പം: 119px; ക്ലിപ്പ്: ടെക്സ്റ്റ് ;)

ഈ ഖണ്ഡികയിൽ വളരെ രസകരമായ ഉള്ളടക്കമുള്ള ഒരു വാക്യം അടങ്ങിയിരിക്കുന്നു.

രസകരമായ കഥ അടുത്ത ഖണ്ഡികയിൽ തുടരാം.

തത്ഫലമായുണ്ടാകുന്ന ഫലം വളരെ ആകർഷകവും അസാധാരണവുമാണ്, ഇത് അനുയോജ്യമായ ഒരു പരിഹാരമാണ്.

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

അവതരിപ്പിച്ച മെറ്റീരിയൽ നിങ്ങൾക്ക് ഉപയോഗപ്രദമായിരുന്നുവെങ്കിൽ, എന്റെ ബ്ലോഗ് അപ്‌ഡേറ്റുകൾ സബ്‌സ്‌ക്രൈബുചെയ്യുക കൂടാതെ നിങ്ങൾ നേടുന്ന അറിവ് (തീർച്ചയായും എന്റെ ബ്ലോഗിലേക്കുള്ള ലിങ്ക്) നിങ്ങളുടെ സുഹൃത്തുക്കളുമായി പങ്കിടാൻ മറക്കരുത്. നല്ലതുവരട്ടെ!

ബൈ ബൈ!

ആശംസകളോടെ, റോമൻ ചുഷോവ്

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

ഈ പ്രശ്നം പരിഹരിക്കുന്നതിനുള്ള നിരവധി ഓപ്ഷനുകൾ ഞാൻ കാണിക്കും: പ്രസിദ്ധീകരണത്തിന് മുമ്പുള്ള സാഹചര്യം jQuery ശരിയാക്കുമ്പോൾ, ഇതിനകം പ്രസിദ്ധീകരിച്ച മെറ്റീരിയലുകൾക്ക് PHP, CSS എന്നിവ കൂടുതൽ അനുയോജ്യമാണ്.

PHP-യിൽ വലിയക്ഷരത്തിലുള്ള ഒരു സ്ട്രിംഗിന്റെ ആദ്യ അക്ഷരം

PHP-യിൽ "ucfirst" എന്ന് വിളിക്കുന്ന ഒരു ഫംഗ്‌ഷൻ ഉണ്ട്, അത് ഒരു വരിയുടെ ആദ്യ പ്രതീകത്തെ വലിയക്ഷരത്തിലേക്ക് പരിവർത്തനം ചെയ്യുന്നു, പക്ഷേ അതിന്റെ പോരായ്മ അത് സിറിലിക്കിനൊപ്പം ശരിയായി പ്രവർത്തിക്കുന്നില്ല എന്നതാണ്.

ഇത് ചെയ്യുന്നതിന്, ഞങ്ങൾ സ്വന്തം ചെറിയ ഫംഗ്ഷൻ എഴുതും. നടപ്പിലാക്കൽ ഇതുപോലെ കാണപ്പെടും:

ഈ പതിപ്പിൽ, ഒരു വലിയ അക്ഷരത്തിൽ ആരംഭിക്കുന്ന ഒരു വാചകം നമുക്ക് ലഭിക്കും, അത് വാസ്തവത്തിൽ നമുക്ക് ആവശ്യമുള്ളതാണ്.

CSS-ലെ ഒരു സ്ട്രിംഗിന്റെ വലിയക്ഷരം

ഈ രീതി ദൃശ്യപരമായി (അതായത്, സൈറ്റിന്റെ സോഴ്‌സ് കോഡിലുള്ളത് പോലെ നിർദ്ദേശങ്ങൾ ദൃശ്യമാകും) ആദ്യത്തെ പ്രതീകത്തെ വലിയക്ഷരത്തിലേക്ക് പരിവർത്തനം ചെയ്യുന്നു.

ഉപയോഗം ഇപ്രകാരമാണ്:

ആദ്യ വാചകം

രണ്ടാമത്തെ വാചകം

മൂന്നാമത്തെ വാചകം

നാലാമത്തെ വാചകം

#ഉള്ളടക്കം p:ആദ്യാക്ഷരം (ടെക്‌സ്‌റ്റ് രൂപാന്തരം: വലിയക്ഷരം; )

"ആദ്യ-അക്ഷരം" കപട-ഘടകവും "ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം" പ്രോപ്പർട്ടിയും ഉപയോഗിച്ച്, ഖണ്ഡികയിലെ ഓരോ ആദ്യ അക്ഷരത്തിനും ഞങ്ങൾ ഡിസൈൻ സജ്ജമാക്കുന്നു.

jQuery-ൽ വലിയക്ഷരത്തിലുള്ള ഒരു സ്ട്രിംഗിന്റെ ആദ്യ അക്ഷരം

ഞാൻ നേരത്തെ പറഞ്ഞതുപോലെ, ഇനിയും പ്രസിദ്ധീകരിക്കാത്ത മെറ്റീരിയലുകൾക്ക് ഈ പരിവർത്തന രീതി ഏറ്റവും അനുയോജ്യമാണ്.

ഉദാഹരണത്തിന്, ഞങ്ങൾ ഒരു ടെക്സ്റ്റ് ഫീൽഡ് എടുക്കും (അത് ഒരു ശീർഷകം നൽകുന്നതിനുള്ള ഒരു ഫീൽഡായി പ്രവർത്തിക്കും) അതിനായി ഒരു ചെറിയ സ്ക്രിപ്റ്റ് എഴുതുക, ഒരു ചെറിയ അക്ഷരം ഉപയോഗിച്ച് ഒരു വാചകം നൽകുമ്പോൾ അത് വലിയക്ഷരമാക്കുന്നു:

$(document).ready(function() ( $(".content").on("keyup", function() (var text = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1); $(this).val(new_text);));));

വാചകം എഴുതുമ്പോഴും ലളിതമായി തിരുകുമ്പോഴും സ്ക്രിപ്റ്റ് പ്രവർത്തിക്കുന്നു. നിങ്ങളുടെ സൈറ്റിൽ സ്ക്രിപ്റ്റുകൾ പ്രവർത്തിക്കുന്നതിന്, നിങ്ങൾ jQuery ലൈബ്രറി പ്രവർത്തനക്ഷമമാക്കിയിരിക്കണം എന്നത് മറക്കരുത്.