டிராப் கேப் (உரையில் உட்பொதிக்கப்பட்ட ஒரு துளி தொப்பி) என்பது ஒரு பத்தியின் முதல் எழுத்து, மற்றவற்றை விட பெரியது, மேலும் அதன் மேற்பகுதி பத்தியின் முதல் வரியின் மட்டத்தில் இருக்கும்படி வைக்கப்படுகிறது. படத்தில் நீங்கள் உரையில் உட்பொதிக்கப்பட்ட துளி தொப்பியின் உதாரணத்தைக் காணலாம்.

மூலம், வேர்ட்பிரஸ் ஒரு சிறப்பு செருகுநிரலைக் கொண்டுள்ளது (wordpress.org/extend/plugins/drop-caps) இது தானாக உட்பொதிக்கப்பட்ட உரையை உருவாக்க உங்களை அனுமதிக்கிறது (மற்றும் கீழே மாற்றப்பட்டது) மூலதன கடிதங்கள். அற்புதம்! இருப்பினும், நீங்கள் ஒரு செருகுநிரலைப் பயன்படுத்த விரும்பவில்லை என்றால் என்ன செய்வது (நிச்சயமாகச் சொல்கிறேன்), மேலும் நீங்கள் பல இடுகைகளில் ஒரு துளி தொப்பியை உருவாக்க வேண்டும், ஒருவேளை ஒரு குறிப்பிட்ட இடத்தில்?

நல்ல செய்தி என்னவென்றால், பெரிய எழுத்துக்களை உருவாக்க உங்களுக்கு செருகுநிரல் தேவையில்லை, உங்களுக்கு தேவையானது ஒரு சிறிய css மற்றும் span டேக். உங்கள் css கோப்பைத் திறந்து பின்வரும் குறியீட்டைச் சேர்க்கவும்:

Span.dropcaps ( font-family:Georgia, serif; நிறம்: #ccc; எழுத்துரு அளவு: 46px; மிதவை: இடது; எழுத்துரு-எடை: 400; வரி-உயரம்: 1em; விளிம்பு-கீழ்: -0.4em; விளிம்பு-வலது : 0.09em; நிலை: உறவினர்;)

இந்த மாதிரி ஏதாவது. நிச்சயமாக, உங்கள் வடிவமைப்பு மற்றும் உரையுடன் பொருந்தக்கூடிய ஒரு நடை உங்களுக்குத் தேவைப்படும். எடுத்துக்காட்டாக, சொத்து மதிப்புகள்: எழுத்துரு அளவு, விளிம்புகள் மற்றும் வரி உயரம் ஆகியவை உங்கள் வடிவமைப்பு மற்றும் உரையின் அடிப்படையில் தேர்ந்தெடுக்கப்பட வேண்டும்.

டேக் ஸ்பான்

உரையின் பெரிய எழுத்துக்கு பாணியைப் பயன்படுத்துவதற்கு, நீங்கள் பெரிய எழுத்தை ஒரு ஸ்பான் குறிச்சொல்லில் "மடிக்க" மற்றும் பொருத்தமான வகுப்பைக் குறிப்பிட வேண்டும்.

ஏ

போலி உறுப்பு:முதல் எழுத்து

போலி உறுப்பு: முதல் எழுத்து . இருப்பினும், வரையறுக்கப்பட்ட எண்ணிக்கையிலான பண்புகள்: முதல் எழுத்து போலி உறுப்புக்கு பயன்படுத்தப்படலாம்: இவை எழுத்துரு, நிறம், பின்னணி, எல்லைகள், விளிம்புகள் மற்றும் திணிப்பு தொடர்பான பண்புகள். கவனிக்க வேண்டிய மற்றொரு விஷயம் என்னவென்றால், பழைய உலாவிகளில் போலி உறுப்பு:முதல் எழுத்து வேலை செய்யாது.

பி:முதல்-எழுத்து (எழுத்து-குடும்பம்:ஜார்ஜியா, செரிஃப்; நிறம்: #சிசிசி; எழுத்துரு அளவு: 46px; மிதவை: இடது; எழுத்துரு-எடை: 400; கோடு-உயரம்: 1எம்; விளிம்பு-கீழ்: -0.4எம்; விளிம்பு -வலது: 0.09em; நிலை: உறவினர்;)

CSS ஐப் பயன்படுத்தி பெரிய எழுத்துக்களைத் திருத்துவதற்கான இரண்டு முறைகள் இங்கே உள்ளன.

பெரும்பாலும், ஒரு தளத்தில் பொருட்களைச் சேர்க்கும்போது அவசரமாக அல்லது, எடுத்துக்காட்டாக, ஒரு மன்றத்தில் ஒரு புதிய தலைப்பை உருவாக்கும் போது, ​​ஒரு பயனர் ஒரு சிறிய (சிறிய) எழுத்துடன் ஒரு வாக்கியத்தை (தலைப்பு) எழுத ஆரம்பிக்கலாம். இது ஓரளவிற்கு தவறு.

இந்தச் சிக்கலைத் தீர்ப்பதற்கான பல விருப்பங்களைக் காண்பிப்பேன்: PHP மற்றும் CSS ஆகியவை ஏற்கனவே வெளியிடப்பட்ட பொருட்களுக்கு மிகவும் பொருத்தமானவை, jQuery வெளியீட்டிற்கு முன் நிலைமையை சரிசெய்ய முடியும்.

PHP இல் பெரிய எழுத்தில் ஒரு சரத்தின் முதல் எழுத்து

PHP இல் "ucfirst" எனப்படும் ஒரு செயல்பாடு உள்ளது, இது ஒரு வரியின் முதல் எழுத்தை பெரிய எழுத்துக்கு மாற்றுகிறது, ஆனால் அதன் குறைபாடு என்னவென்றால், அது சிரிலிக் உடன் சரியாக வேலை செய்யவில்லை.

இதைச் செய்ய, எங்கள் சொந்த சிறிய செயல்பாட்டை எழுதுவோம். செயல்படுத்தல் இப்படி இருக்கும்:

இந்த பதிப்பில், ஒரு பெரிய எழுத்துடன் தொடங்கும் ஒரு வாக்கியத்தைப் பெறுவோம், அது உண்மையில் நமக்குத் தேவை.

CSS இல் ஒரு சரத்தின் முதல் எழுத்து பெரிய எழுத்து

இந்த முறை பார்வைக்கு (அதாவது, தளத்தின் மூலக் குறியீட்டில் இருக்கும் பரிந்துரைகள் தோன்றும்) முதல் எழுத்தை பெரிய எழுத்தாக மாற்றும்.

பயன்பாடு பின்வருமாறு:

முதல் வாக்கியம்

இரண்டாவது வாக்கியம்

மூன்றாவது வாக்கியம்

நான்காவது வாக்கியம்

#உள்ளடக்கம் ப:முதல் எழுத்து (உரை-மாற்றம்: பெரிய எழுத்து; )

"முதல் எழுத்து" போலி உறுப்பு மற்றும் "உரை-மாற்றம்" பண்புகளைப் பயன்படுத்தி, பத்தியின் ஒவ்வொரு முதல் எழுத்துக்கும் வடிவமைப்பை அமைக்கிறோம்.

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 நூலகம் இயக்கப்பட்டிருக்க வேண்டும் என்பதை மறந்துவிடாதீர்கள்.

CSS தொப்பிகள் ஒரு பொதுவான வடிவமைப்பின் ஏகபோகத்தை உடைக்க உதவுகின்றன, அங்கு உரை ஆரம்பம் முதல் இறுதி வரை ஒரே மாதிரியாக இருக்கும்.

ஆரம்ப எழுத்துக்கள் அன்றும் இன்றும்

கிரானிக்கிலர்கள் கையால் எழுதப்பட்ட கையெழுத்துப் பிரதிகளில் பெரிய எழுத்துக்களைப் பயன்படுத்தினர், அவற்றில் சில 5 ஆம் நூற்றாண்டைச் சேர்ந்தவை. 8 ஆம் நூற்றாண்டு முதல் 15 ஆம் நூற்றாண்டு வரை பெரிய எழுத்துக்கள் தொடர்ந்து பயன்படுத்தப்பட்டன, அச்சு இயந்திரங்கள் அச்சிடலை தொழில்துறை நிலைக்கு கொண்டு வர அனுமதித்தன. கையால் எழுதப்பட்ட மற்றும் அச்சிடப்பட்ட ஆரம்ப எழுத்துக்கள் இரண்டும் உரையின் தொடக்கத்தில் வைக்கப்பட்டன. அவை பெரும்பாலும் கடிதத்தைச் சுற்றி அமைந்துள்ள ஒரு அலங்கார வடிவத்துடன் அலங்கரிக்கப்பட்டன.

உயர்த்தப்பட்ட மற்றும் கைவிடப்பட்ட எழுத்துக்கள் இன்றும் பயன்படுத்தப்படுகின்றன. செய்தித்தாள்கள், பத்திரிகைகள் மற்றும் புத்தகங்கள், டிஜிட்டல் அச்சிடுதல் ஆகியவற்றில் அவற்றைக் காணலாம். உயர்த்தப்பட்ட வகை சில நேரங்களில் நீளமான வகை என்று அழைக்கப்படுகிறது. அவற்றைப் பின்தொடரும் உரையின் அடிப்பகுதியுடன் அவை ஃப்ளஷ் செய்யப்பட்டன. கைவிடப்பட்ட எழுத்துக்கள் உரையின் மேற்புறத்தில், சில சமயங்களில் உரை உள்ளடக்கத்தின் உடலுக்குப் பின்னால் உள்ள அடுக்கில் அல்லது மீதமுள்ள உரை அவற்றைச் சுற்றிக் கொண்டிருக்கும்.

உயர்த்தப்பட்ட எழுத்துக்களை வரையறுப்பது மிகவும் எளிதானது, ஏனெனில் அவை மீதமுள்ள உரையுடன் ஒரே மாதிரியாக இருக்கும், மேலும் வெளிப்புற விளிம்புகளைச் சுற்றியுள்ள மடக்கை மாற்ற வேண்டிய அவசியமில்லை. விடுபட்ட எழுத்துக்களுக்கு அதிக நுணுக்கமான டியூனிங் தேவைப்படுகிறது. எழுப்பப்பட்ட எழுத்துக்கள் எவ்வாறு கையாளப்படுகின்றன என்பதை நீங்கள் முதலில் புரிந்து கொண்டால், இதைப் புரிந்துகொள்வது உங்களுக்கு எளிதாக இருக்கும்.

வகுப்புகளைப் பயன்படுத்துதல்

ஏற்கனவே CSS பற்றிய புரிதல் உள்ள வடிவமைப்பாளர்கள் முதல் பெரிய எழுத்துக்கு தனி CSS வகுப்பை உருவாக்க வேண்டும் என்பது தெரியும்.

பத்தி உறுப்புக்கான CSS குறியீடு மற்றும் எழுத்தை உருவாக்கும் வர்க்கம் இப்படி இருக்கும்:

p (எழுத்துரு அளவு:20px; எழுத்துரு குடும்பம்: ஜார்ஜியா, "டைம்ஸ் நியூ ரோமன்", டைம்ஸ், செரிஃப்;).myinitialcaps (எழுத்துரு அளவு:48px; எழுத்துரு-குடும்பம்: டிடோட்;)

மேலும் HTML குறியீடு இப்படி இருக்கும்:

நமக்கு என்ன தருகிறது:

மிகவும் எளிதாக தெரிகிறது? ஒவ்வொரு பெரிய எழுத்துக்கும் சிறப்பு கெர்னிங் தேவைப்படுவதால், எழுப்பப்பட்ட குறிப்பிட்ட எழுத்துக்களைப் பொறுத்து நீங்கள் உண்மையில் மாற்றங்களைச் செய்ய வேண்டும். உயர்த்தப்பட்ட எழுத்துக்களுக்கும் உடல் உரைக்கும் எழுத்துருவைத் தேர்ந்தெடுத்த பிறகு, ஒவ்வொரு எழுத்திற்கும் தனித்தனி வகுப்புகளை உருவாக்க வேண்டும். கீழே உள்ள CSS வகுப்பில்.myinitialcapsi, I மற்றும் n இடையே உள்ள தூரத்தைக் குறைக்க வலதுபுறத்தில் உள்ள விளிம்பு எதிர்மறை மதிப்பிற்கு அமைக்கப்பட்டுள்ளது.

Myinitialcapsi (எழுத்துரு அளவு:48px; எழுத்துரு-குடும்பம்: Didot; விளிம்பு-வலது:-1px;)

இந்த வழக்கில், "I" மற்றும் "n" இடையே சில கூடுதல் இடைவெளி உள்ளது.

எதிர்மறை விளிம்புடன் ஒரு புதிய வகுப்பைச் சேர்த்து, அதை நெருக்கமாக இழுக்கிறது.

மேலே உள்ள எடுத்துக்காட்டில் உள்ள திரை தெளிவுத்திறனைப் பொறுத்து, I மற்றும் n ஆகியவை ஒன்றாக மங்கலாக்கப்படுவது போல் தோன்றலாம். இது கடிதங்களின் முனைகளில் உள்ள செரிஃப்கள் காரணமாகும். எனவே, உங்கள் இறுதி CSS ஸ்டைல்களை நீங்கள் முடிவு செய்வதற்கு முன், CSS கேப்ஸ் உரையில் எப்படி இருக்கும் என்பதைப் பார்க்க வெவ்வேறு சாதனங்களில் உங்கள் தளத்தைச் சோதிக்கவும்.

மேற்கோள்கள் மற்றும் பிற சிறப்பு வழக்குகள்

உரையின் தொடக்கத்தில் உள்ள எழுத்துக்களை மட்டும் பெரிதாக்கலாம். கடிதத்திற்கு அடுத்ததாக தோன்றும் மேற்கோள் குறிகளின் பெரிய பதிப்பை உருவாக்க மற்றொரு வகுப்பை நீங்கள் செயல்படுத்தலாம். எங்கள் விஷயத்தில், 48 அளவுள்ள எழுத்து வகுப்போ அல்லது 20 பிக்சல்கள் கொண்ட உரை வகுப்போ மேற்கோள் குறிகளுக்குப் பொருந்தாது. மாறாக, அது இடையில் இருக்கும் - 30 பிக்சல்கள். I உடன் ஒளியியல் ரீதியாக சீரமைக்க மேற்கோள்களை 4 பிக்சல்கள் கீழே நகர்த்துவோம்:

Myinitialcapsq (எழுத்துரு அளவு:30px; எழுத்துரு குடும்பம்: Didot; மிதவை:இடது; விளிம்பு-மேல்:4px;)

எதிர்மறை விளிம்புடன் ஒரு புதிய வகுப்பை "உள்ளடக்க" அதை நெருக்கமாக இழுக்கிறது.

மேற்கோள்களுடன் ஒவ்வொரு CSS கேப்பிடலைசேஷன்களையும் அமைப்பதில் நீங்கள் மிகவும் கவனமாக இருக்க வேண்டும், இதனால் அவற்றின் கெர்னிங் மற்றும் சீரமைப்பு சுற்றியுள்ள மார்க்அப்புடன் பொருந்தும். எடுத்துக்காட்டாக, T என்ற எழுத்தை பத்தியின் விளிம்பிற்கு சற்று அப்பால் இடது பக்கம் நகர்த்த வேண்டும், இதனால் அதன் குறுக்குக் கோடு பார்வைக்கு தளவமைப்பிற்கு பொருந்தும். C, G, O மற்றும் Q போன்ற வட்ட எழுத்துக்களிலும் இதைச் செய்ய வேண்டும். இந்த எடுத்துக்காட்டு 20, 30 மற்றும் 48 எழுத்துரு அளவுகளைப் பயன்படுத்துகிறது. ஆனால் நீங்கள் தேர்ந்தெடுக்கும் குறிப்பிட்ட எழுத்துருக்களின் அடிப்படையில் அளவுகளைத் தேர்ந்தெடுக்க வேண்டும். அத்துடன் தளம் பார்க்கப்படும் திரைகளின் அளவுகள் மற்றும் தீர்மானங்கள்.

போலி கூறுகள் மற்றும் போலி வகுப்புகள்

CSS போலி-உறுப்பைப் பயன்படுத்தி, பத்தி உறுப்பில் ::முதல் எழுத்தைச் சேர்ப்பதன் மூலம் உயர்த்தப்பட்ட எழுத்தை எளிதாக உருவாக்கலாம். மரபு உலாவிகளுக்கு: முதல் எழுத்தை (ஒரு பெருங்குடலுடன்) பயன்படுத்தவும்:

p ( எழுத்துரு அளவு: 1.2em; எழுத்துரு-குடும்பம்: ஜார்ஜியா, "டைம்ஸ் நியூ ரோமன்", டைம்ஸ், செரிஃப்; கோடு-உயரம்: 2 எம்; திணிப்பு-கீழ்: 1.2 எம்;) ப:: முதல் எழுத்து ( எழுத்துரு அளவு: 3.6em; உரை-மாற்றம்: பெரிய எழுத்து; எழுத்துரு-குடும்பம்: "மோனோடைப் பெர்னார்ட் ஒடுக்கப்பட்டது", செரிஃப்; விளிம்பு-வலது:0.03em;).initialb (விளிம்பு-வலது:-0.1em;).initialn (விளிம்பு-வலது:-0.15 எம்;)

N மற்றும் B எழுத்துக்களின் கெர்னிங்கைக் கணக்கில் எடுத்துக் கொள்ளும் CSS வகுப்புகளைக் கொண்ட HTML குறியீடு இப்படி இருக்கும்...

ஒரு ஆரம்ப எழுத்து, முதல் எழுத்து பெரிய எழுத்து.
ஒரு வரி முறிவுடன், அடுத்த வரியில் ஆரம்ப தொப்பி இல்லை.

HTML மூலத்தில் முதல் எழுத்து, HTML இல் உள்ள பெரிய எழுத்து அல்ல, 3.6em இன் ஆரம்ப தொப்பி அளவுக்கு எவ்வாறு அளவிடப்படுகிறது என்பதைக் கவனியுங்கள். சுத்தமாக, இல்லையா?

ஆனால் கடினமான வருவாய் மற்றும் ஒரு புதிய பத்தி தொடங்கப்பட்டது, மற்றொரு ஆரம்ப தொப்பி எப்போதும் உருவாக்கப்படும். இதை நான் எப்படிக் கணக்கிடப் போகிறேன் என்று நீங்களே கேட்டுக்கொள்ளலாம். புதிய பத்தியின் தொடக்கத்தில் நான் ஆரம்ப தொப்பியை வைத்திருக்க வேண்டுமா? சரி, உங்களால் முடியும். ஆனால், அது அப்படிப் பார்க்க வேண்டுமா, அது முற்றிலும் அப்படிப் பார்க்க வேண்டுமா?

பத்தியின் முதல் பெரிய எழுத்து ஒரு எழுத்தாக மாற்றப்படுகிறது.
ஒரு வரி இடைவெளிக்குப் பிறகு முதல் எழுத்து பெரியதாக மாற்றப்படாது.

HTML மூலக் குறியீட்டில் முதல் எழுத்து பெரியதாக இல்லை, ஆனால் அது 3.6em எழுத்துக்கு மாற்றப்படுகிறது என்பதை நினைவில் கொள்க.

இருப்பினும், கட்டாய வரி இடைவெளிக்குப் பிறகும், ஒவ்வொரு புதிய பத்தியின் தொடக்கத்திலும் ஒரு கடிதம் எப்போதும் உருவாக்கப்படும். நீங்கள் உங்களை நீங்களே கேட்டுக்கொள்ளலாம்: இதை நான் எப்படி கணக்கில் எடுத்துக்கொள்வது? இந்த எல்லா நிகழ்வுகளுக்கும் நான் கடிதங்களைச் சேர்க்க வேண்டுமா? சரி, உங்களால் முடியும். ஆனால் இது அவசியமா?

போலி உறுப்புகள் வழங்கும் நன்மைகள் இருந்தாலும், கெர்னிங் மற்றும் பேடிங் சிக்கல்களைக் கையாள தனி வகுப்புகளை வரையறுக்க நிறைய குறியீடுகளைச் சேர்க்க வேண்டியிருந்தது. ஆனால் இந்த முறை ஒவ்வொரு புதிய பத்தியின் முதல் எழுத்தையும் CSS பெரிய எழுத்தாக மாற்றுகிறது. சிலருக்கு, ஒவ்வொரு பத்தியின் முதல் எழுத்தையும் மாற்ற வேண்டிய அவசியமில்லை என்பதால், இது பொருந்தாது.

புத்திசாலித்தனமான அமைப்பை உருவாக்க போலி வகுப்புகள் மற்றும் போலி கூறுகளை இணைத்தல்

முதல் குழந்தை போலி-வகுப்பைச் சேர்ப்பது முதல் எழுத்துக்களை தேவையில்லாமல் மாற்றும் சிக்கலைத் தீர்க்க உதவுகிறது:

ப (எழுத்து அளவு: 1.2em; எழுத்துரு குடும்பம்: ஜார்ஜியா, "டைம்ஸ் நியூ ரோமன்", டைம்ஸ், செரிஃப்; கோடு-உயரம்: 2 எம்; திணிப்பு-கீழ்: 0.5 எம்;) ப: முதல் குழந்தை:: முதல் கடிதம் ( எழுத்துரு அளவு: 3.6em; உரை-மாற்றம்: பெரிய எழுத்து; எழுத்துரு-குடும்பம்: "Monotype Bernard Condensed", serif; விளிம்பு-வலது:0.03em;)

இந்த குறியீட்டை HTML உடன் இணைத்தல்:

முதல் குழந்தை என வரையறுக்கப்பட்ட முதல் எழுத்து இந்த முறையால் உயர்த்தப்பட்ட துளி தொப்பியாக மாற்றப்படும் ஒரே எழுத்து.

முதல் குழந்தை என வரையறுக்கப்பட்ட எழுத்து மட்டுமே மாற்றப்படுவதால், இந்த உதாரணம் முதல் குழந்தை இல்லாமல், முந்தைய உதாரணத்திலிருந்து வேறுபட்டது என்பதைக் கவனியுங்கள். கூடுதலாக, ஒரு பத்தியின் தொடக்கத்திற்குப் பிறகும், கட்டாய வரி முறிவுக்குப் பிறகும் முதல் எழுத்துக்களை மாற்ற மாட்டோம். பத்திகளின் அனைத்து முதல் எழுத்துக்களையும் மாற்றும்போது, ​​தளவமைப்பு எப்படி இருந்தது என்பதை விட இது மிகவும் நேர்த்தியாகத் தெரிகிறது.

போலி வகுப்புகளைப் பயன்படுத்துவதன் நன்மை பல்வேறு சிறப்பு நிகழ்வுகளைக் கையாளும் திறன் ஆகும். குறைபாடுகள் பற்றி என்ன? பலவிதமான போலி வகுப்புகள் உள்ளன, மேலும் அவை பல வழிகளில் ஒன்றிணைக்கப்படலாம், அது உங்கள் தலையை சுழல வைக்கும். எடுத்துக்காட்டாக, போலி வகுப்புகள் : முதல் குழந்தை மற்றும் : முதல் வகை ஆகியவை ஒரே முடிவுகளைத் தரலாம். நீங்கள் ஒரு போலி வகுப்பை ஒரு பத்திக்கு மட்டுமல்ல, அல்லது கூறுகளுக்கும் பயன்படுத்தலாம். எடுத்துக்காட்டாக, டிடாட் எழுத்துருவில் கீழே உயர்த்தப்பட்ட எழுத்து உதாரணத்தில் காட்டப்பட்டுள்ளது. A இன் வலதுபுறத்தில் விளிம்பு பண்புக்கூறு எவ்வாறு சேர்க்கப்பட்டுள்ளது என்பதைக் கவனியுங்கள். இல்லையெனில், அது பிரிவின் தொடக்கத்தில் உள்ள s என்ற எழுத்துடன் "ஒட்டு ஒட்டும்":

பிரிவு ( எழுத்துரு அளவு: 1.2em; எழுத்துரு குடும்பம்: ஜார்ஜியா, "டைம்ஸ் நியூ ரோமன்", டைம்ஸ், செரிஃப்; வரி-உயரம்: 3em;) பிரிவு>ப: முதல் குழந்தை: முதல் எழுத்து ( எழுத்துரு அளவு: 4 எம்; உரை-மாற்றம்: பெரிய எழுத்து; எழுத்துரு-குடும்பம்:Didot, serif; விளிம்பு-வலது: 5px;)

மற்றும் HTML உடன்:

பிரிவின் தொடக்கத்தில், முதல் எழுத்துக்கு உயர்த்தப்பட்ட துளி தொப்பி குறிப்பிடப்பட்டுள்ளது.

மற்றும் ஒரு புதிய பத்தி ...

நீங்கள் பரிசோதனையை உணர்ந்தால், முதல் குழந்தை மற்றும்: முதல் வகைக்கு கூடுதலாக வெவ்வேறு முறைகளை நீங்கள் ஆராயலாம். எடுத்துக்காட்டாக, CSS கேப்பிடலைசேஷன் உரைக்கு இந்த அல்லது பிற வகையான போலி வகுப்புகள் எவ்வாறு பயன்படுத்தப்படலாம் என்பதைப் பார்க்க:nth-of-type அல்லது:nth-of-child. இந்தக் கட்டுரையில் குறிப்பிடப்பட்டுள்ள கொள்கைகளைப் பின்பற்றினாலும் அல்லது ஆழமாகத் தோண்டத் தொடங்கினாலும், CSS போலி-வகுப்பு முதல் குழந்தை , :முதல் வகை , மற்றும் :முதல் எழுத்து ஆகியவற்றுடன் எவ்வாறு வேலை செய்வது என்பதை நீங்கள் கற்றுக்கொண்டால், நீங்கள் விண்ணப்பிக்க முடியும். அவற்றை HTML உறுப்புகளுக்கு சரியாக மாற்றவும்.

html இல், எழுத்துரு அளவு முக்கிய பங்கு வகிக்கிறது. தளப் பக்கத்தில் இடுகையிடப்பட்ட முக்கியமான தகவல்களுக்கு பயனரின் கவனத்தை ஈர்க்க இது உங்களை அனுமதிக்கிறது. கடிதங்களின் அளவு மட்டுமல்ல, அவற்றின் நிறம், தடிமன் மற்றும் குடும்பமும் கூட முக்கியம்.

html எழுத்துருக்களுடன் பணிபுரியும் போது குறிச்சொற்கள் மற்றும் பண்புக்கூறுகள்

ஹைப்பர்டெக்ஸ்ட் மொழி எழுத்துருக்களுடன் வேலை செய்வதற்கான பரந்த அளவிலான கருவிகளைக் கொண்டுள்ளது. எல்லாவற்றிற்கும் மேலாக, உரை வடிவமைத்தல் html இன் முக்கிய பணியாகும்.

HTML மொழி உருவாக்கத்திற்கான காரணம் உலாவிகளில் உரை வடிவமைப்பு விதிகளைக் காண்பிப்பதில் உள்ள சிக்கலாகும்.

HTML இல் எழுத்துருக்களுடன் பணிபுரியப் பயன்படும் குறிச்சொற்கள் மற்றும் அவற்றின் பண்புகளைப் பார்ப்போம். முக்கியமானது குறிச்சொல். அதன் பண்புக்கூறுகளின் மதிப்புகளைப் பயன்படுத்தி, நீங்கள் எழுத்துருவின் பல பண்புகளை அமைக்கலாம்:

• நிறம் - உரை வண்ணத்தை அமைக்கிறது;
• அளவு - வழக்கமான அலகுகளில் எழுத்துரு அளவு.

1 முதல் 7 வரையிலான நேர்மறை பண்புக்கூறு மதிப்புகள் ஆதரிக்கப்படுகின்றன.

• முகம் - உள்ளே பயன்படுத்தப்படும் உரை எழுத்துரு குடும்பத்தை அமைக்க பயன்படுகிறது. பல மதிப்புகள் ஆதரிக்கப்படுகின்றன, காற்புள்ளிகளால் பிரிக்கப்படுகின்றன.

இணைக்கப்பட்ட எழுத்துருக் குறிச்சொல்லின் பகுதிகளுக்கு இடையில் அமைந்துள்ள உரை மட்டுமே வடிவமைக்கப்பட்டுள்ளது. மீதமுள்ள உரை நிலையான இயல்புநிலை எழுத்துருவில் காட்டப்படும்.

html இல் பல ஜோடி குறிச்சொற்கள் உள்ளன, அவை ஒரே ஒரு வடிவமைப்பு விதியைக் குறிப்பிடுகின்றன. இவற்றில் அடங்கும்:

• — html இல் தடித்த எழுத்துருவை அமைக்கிறது. செயல் குறிச்சொல் முந்தையதைப் போன்றது;
• - அளவு இயல்புநிலையை விட பெரியது;
• - சிறிய எழுத்துரு அளவு;
• - சாய்வு உரை (சாய்வு). இதே போன்ற குறிச்சொல் ;
• - அடிக்கோடிட்ட உரை;
• - கடந்து;
• - உரையை சிறிய எழுத்தில் மட்டும் காட்டவும்;
• - பெரிய வழக்கில்.

சாதாரண எழுத்து

சிறுபடம்

சிறுபடம்

வழக்கத்தை விட அதிகம்

வழக்கத்தை விட குறைவு

சாய்வு

சாய்வு

அடிக்கோடு

கடந்து சென்றது

உடை பண்புக்கூறு திறன்கள்

விவரிக்கப்பட்ட குறிச்சொற்களுக்கு கூடுதலாக, html இல் எழுத்துருவை மாற்ற இன்னும் பல வழிகள் உள்ளன. அவற்றில் ஒன்று பொதுவான பாணி பண்புக்கூறைப் பயன்படுத்துவதாகும். அதன் பண்புகளின் மதிப்புகளைப் பயன்படுத்தி, நீங்கள் எழுத்துருக்களின் காட்சி பாணியை அமைக்கலாம்:

1) எழுத்துரு குடும்பம் - சொத்து எழுத்துரு குடும்பத்தை அமைக்கிறது. பல மதிப்புகளை பட்டியலிட முடியும்.
முந்தைய குடும்பம் பயனரின் இயக்க முறைமையில் நிறுவப்படவில்லை என்றால் html இல் உள்ள எழுத்துருவை அடுத்த மதிப்புக்கு மாற்றுவது நடக்கும்.

தொடரியல் எழுதுதல்:

எழுத்துரு குடும்பம்: எழுத்துரு பெயர் [, எழுத்துரு பெயர்[, ...]]

2) எழுத்துரு அளவு - அளவு 1 முதல் 7 வரை அமைக்கப்பட்டுள்ளது. HTML இல் எழுத்துருவை அதிகரிக்க இது முக்கிய வழிகளில் ஒன்றாகும்.
தொடரியல் எழுதுதல்:

எழுத்துரு அளவு: முழுமையான அளவு | உறவினர் அளவு | பொருள் | வட்டி | மரபுரிமையாக

நீங்கள் எழுத்துரு அளவையும் அமைக்கலாம்:

• பிக்சல்களில்;
• முழுமையான மதிப்பில் (xx-சிறியது, x-சிறியது, சிறியது, நடுத்தரம், பெரியது);
• சதவீதங்களில்;
• புள்ளிகளில் (pt).

எழுத்துரு அளவு:7

எழுத்துரு அளவு: 24px

எழுத்துரு அளவு: x-பெரியது

எழுத்துரு அளவு: 200%

எழுத்துரு அளவு:24pt

3) எழுத்துரு பாணி - எழுத்துரு எழுதும் பாணியை அமைக்கிறது. தொடரியல்:

எழுத்துரு பாணி: சாதாரண | சாய்வு | சாய்ந்த | மரபுரிமையாக

மதிப்புகள்:

• சாதாரண - சாதாரண எழுத்துப்பிழை;
• சாய்வு - சாய்வு;
• சாய்ந்த - வலதுபுறம் சாய்ந்த எழுத்துரு;
• மரபுரிமை - தாய் உறுப்புகளின் எழுத்துப்பிழை மரபுரிமை.

இந்த சொத்தை பயன்படுத்தி html இல் எழுத்துருவை எவ்வாறு மாற்றுவது என்பதற்கான எடுத்துக்காட்டு:

எழுத்துரு பாணி:மரபு

எழுத்துரு பாணி: சாய்வு

எழுத்துரு பாணி:சாதாரண

எழுத்துரு பாணி:சாய்ந்த

4) எழுத்துரு மாறுபாடு - அனைத்து பெரிய எழுத்துக்களையும் பெரிய எழுத்துக்களாக மாற்றுகிறது. தொடரியல்:

எழுத்துரு மாறுபாடு: சாதாரண | சிறிய தொப்பிகள் | மரபுரிமையாக

இந்த பண்புடன் html இல் எழுத்துருவை எவ்வாறு மாற்றுவது என்பதற்கான எடுத்துக்காட்டு:

எழுத்துரு மாறுபாடு:மரபு

எழுத்துரு மாறுபாடு:சாதாரண

font-variant:small-caps

5) எழுத்துரு எடை - உரையின் தடிமன் (செறிவு) அமைக்க உங்களை அனுமதிக்கிறது. தொடரியல்:

எழுத்துரு-எடை: தடிமனான|தடித்த|லைடர்|இயல்பு|100|200|300|400|500|600|700|800|900

மதிப்புகள்:

• தடித்த - html எழுத்துருவை தடிமனாக அமைக்கிறது;
• தைரியமான - சாதாரணத்துடன் ஒப்பிடும்போது தைரியமான;
• இலகுவானது - சாதாரணமாக ஒப்பிடும்போது குறைவான நிறைவுற்றது;
• சாதாரண - சாதாரண எழுத்துப்பிழை;
• 100-900 - எழுத்துரு தடிமன் எண் சமமானதாக அமைக்கிறது.

எழுத்துரு எடை: தடித்த

font-weight:bolder

எழுத்துரு எடை: இலகுவான

எழுத்துரு-எடை:சாதாரண

எழுத்துரு எடை:900

எழுத்துரு எடை:100

HTML எழுத்துரு சொத்து மற்றும் எழுத்துரு நிறம்

எழுத்துரு மற்றொரு கொள்கலன் சொத்து. உள்ளேயே, எழுத்துருக்களை மாற்றும் நோக்கம் கொண்ட பல பண்புகளின் மதிப்புகளை அது இணைத்தது. எழுத்துரு தொடரியல்:

எழுத்துரு: எழுத்துரு அளவு எழுத்துரு குடும்பம் | மரபுரிமையாக

பல்வேறு கட்டுப்பாடுகளில் உள்ள லேபிள்களில் கணினி பயன்படுத்தும் எழுத்துருக்களுக்கும் மதிப்பை அமைக்கலாம்:

• தலைப்பு - பொத்தான்களுக்கு;
• சின்னம் - சின்னங்களுக்கு;
• மெனு - மெனு;
• செய்தி பெட்டி - உரையாடல் பெட்டிகளுக்கு;
• சிறிய தலைப்பு - சிறிய கட்டுப்பாடுகளுக்கு;
• status-bar - நிலைப்பட்டி எழுத்துரு.

எழுத்துரு: சின்னம்

எழுத்துரு: தலைப்பு

எழுத்துரு:மெனு

எழுத்துரு:செய்தி பெட்டி

சிறிய தலைப்பு

எழுத்துரு:நிலை-பட்டி

எழுத்துரு: சாய்வு 50px தடித்த "டைம்ஸ் நியூ ரோமன்", டைம்ஸ், செரிஃப்

HTML இல் எழுத்துரு நிறத்தை அமைக்க, நீங்கள் வண்ண பண்புகளைப் பயன்படுத்தலாம். ஒரு முக்கிய சொல்லைப் பயன்படுத்தி அல்லது rgb வடிவத்தில் வண்ணத்தை அமைக்க இது உங்களை அனுமதிக்கிறது. மேலும் ஹெக்ஸாடெசிமல் குறியீட்டிலும்.

இந்த வலைப்பதிவின் வாசகர்களுக்கு வணக்கம். CSS ஐப் பயன்படுத்தி அனைத்து பெரிய எழுத்துக்களையும் எவ்வாறு உருவாக்குவது என்பது பற்றி இன்று நான் பேசுவேன். நிச்சயமாக, இதைச் செய்ய, நீங்கள் கேப்ஸ் லாக்கை இயக்கலாம் மற்றும் விரும்பிய உரையை எழுதலாம், ஆனால் இது மிகவும் பழமையான முறையாகும். ஆனால் முடிக்கப்பட்ட கட்டுரையில் ஒரு தனி பத்தியை முன்னிலைப்படுத்த வேண்டும் என்றால் என்ன செய்வது?

css இல் அனைத்து எழுத்துக்களையும் பெரியதாக மாற்றுதல்

இதற்கு உரை மாற்றும் பண்பு உள்ளது, இது நீங்கள் யூகித்தபடி, உரையை மாற்றுகிறது. இது பின்வரும் மதிப்புகளைக் கொண்டுள்ளது:

• சிற்றெழுத்து - அனைத்து உரைகளும் சிறிய எழுத்துக்களில் காட்டப்படும்
• பெரிய எழுத்து - அனைத்து வார்த்தைகளும் பெரிய எழுத்துக்களில் காட்டப்படும் (நமக்குத் தேவையானவை)
• பெரிய எழுத்து - ஒவ்வொரு வார்த்தையின் முதல் எழுத்தும் பெரிய எழுத்து

அடிப்படையில் நீங்கள் தெரிந்து கொள்ள வேண்டியது அவ்வளவுதான். தேவையான உறுப்பை எவ்வாறு அணுகுவது என்பதைக் கண்டுபிடிப்பதே எஞ்சியுள்ளது. இந்த உதாரணத்தை கற்பனை செய்வோம்: நீங்கள் ஒரு கட்டுரையில் ஐந்தாவது பத்தியை அனைத்து பெரிய எழுத்துக்களாக மாற்ற வேண்டும். மேலும் இதை எப்படி செயல்படுத்த முடியும்?

விரும்பிய உறுப்பை எவ்வாறு அடைவது?

உங்களுக்குத் தெரியும், இணைக்கப்பட்ட html குறிச்சொல்லைப் பயன்படுத்தி ஒரு பத்தி உருவாக்கப்பட்டது, அதன் முழு உள்ளடக்கமும் ஒரு பத்தியாக மாறும். அதற்கான புதிய பாணி வகுப்பை வரையறுப்பது மட்டுமே எஞ்சியுள்ளது:

இப்போது இந்த குறிப்பிட்ட பத்தியை CSS மொழியின் மூலம் மற்றவற்றை பாதிக்காமல் அணுகும் வாய்ப்பு நமக்கு கிடைத்துள்ளது. நீங்கள் இதை இப்படி செய்யலாம்:

பெரிய எழுத்து (
உரை-மாற்றம்: பெரிய எழுத்து;
}

ஒரு குறிப்பிட்ட கட்டுரையில் ஒரு பகுதியை நீங்கள் முன்னிலைப்படுத்த வேண்டியிருக்கும் போது இந்த முறை பொருத்தமானது. எல்லா பக்கங்களிலும் பெரிய எழுத்துக்களில் குறிப்பிட்ட உரை இருக்க வேண்டும் என்றால் என்ன செய்வது. இந்த வழக்கில், ஒவ்வொரு முறையும் அதை எழுதாமல் இருக்க, ஒரு டெம்ப்ளேட் கோப்பில் தொகுதி வைப்பது நல்லது.

அல்லது பெரிய எழுத்துக்களில் CSS ஐப் பயன்படுத்தி ஒவ்வொரு கட்டுரையிலும் இரண்டாவது பத்தியை நீங்கள் முன்னிலைப்படுத்த வேண்டும். பின்னர் மற்றொரு விருப்பம் உங்களுக்கு பொருந்தும். கட்டுரை தோன்றும் தொகுதியைக் கண்டறிந்து, nth-child pseudo-class ஐப் பயன்படுத்தி இரண்டாவது பத்தியை அணுகவும். இந்த எடுத்துக்காட்டில், ஒரு கட்டுரையுடன் கூடிய எங்கள் தொகுதியில் கட்டுரை வகுப்பு உள்ளது.

கட்டுரை p:nth-child(2)(
உரை-மாற்றம்: பெரிய எழுத்து
}

நீங்கள் பார்க்க முடியும் என, ஒவ்வொரு குறிப்பிட்ட வழக்குக்கும் வெவ்வேறு தீர்வு உள்ளது. மிக முக்கியமான விஷயம் என்னவென்றால், எழுத்துக்களின் வழக்கை மாற்றும் உரை மாற்றும் பண்பு பற்றி நினைவில் கொள்ள வேண்டும்.

பொதுவாக, உரையை இந்த வழியில் காட்ட பரிந்துரைக்கப்படவில்லை, ஏனெனில் இது அதன் உணர்வை பெரிதும் பாதிக்கிறது, ஆனால் சில முக்கியமான துண்டுகளை முன்னிலைப்படுத்தலாம்.

இன்று நாம் உரை மாற்றும் பண்பு பற்றி பார்த்தோம். புதிய கட்டுரைகளைப் பெற வலைப்பதிவிற்கு குழுசேரவும்.