டெயில்விண்ட் CSS ஐப் பயன்படுத்தி உரையை வடிவமைப்பதற்கான வழிகாட்டி

பின்வரும் அவுட்லைனைப் பயன்படுத்தி டெயில்விண்டில் உரையை வடிவமைப்பதற்கான வழிகாட்டியை இந்தக் கட்டுரை வழங்கும்:

• Text Align Class ஐப் பயன்படுத்தவும்
• உரை உள்ளடக்கத்திற்கு வண்ணங்களை வழங்கவும்
• வெவ்வேறு எழுத்துரு குடும்பங்களைப் பயன்படுத்தவும்
• உரைக்கு அடிக்கோடு அலங்காரங்களை வழங்கவும்
• உரைக்கு உள்தள்ளல்களை வழங்கவும்

டெயில்விண்டில் Text Align Class பயன்படுத்துவது எப்படி?

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

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

மேலே உள்ள குறியீட்டின் விளக்கம் பின்வருமாறு:

• நான்கு ' ப ” உறுப்புகள் உருவாக்கப்பட்டு ஒரு வரி முறிவு மூலம் பிரிக்கப்படுகின்றன.
• நான்கு p உறுப்புகளின் உரை '' ஐப் பயன்படுத்தி ஒரு குறிப்பிட்ட நிலைக்கு சீரமைக்கப்படுகிறது உரை-{சீரமைப்பு} ' வர்க்கம்.
• ' bg-{color}-{number} 'வகுப்பு ஒவ்வொன்றிற்கும் பின்னணி வண்ணத்தை வழங்குகிறது' ப ”உறுப்பு.

வெளியீடு

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

டெயில்விண்டில் உள்ள உரை உள்ளடக்கத்திற்கு வண்ணத்தை எவ்வாறு வழங்குவது?

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

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

கீழே கொடுக்கப்பட்டுள்ள ஆர்ப்பாட்டம் மூன்று ' ப வெவ்வேறு உரை வண்ண வகுப்புகளைப் பயன்படுத்தி வடிவமைக்கப்பட்ட கூறுகள்:

மேலே உள்ள குறியீட்டில் பயன்படுத்தப்படும் வகுப்புகள் பின்வருமாறு:

• முதலாவதாக ' ப 'உறுப்பு ஊதா நிறத்துடன் வழங்கப்படுகிறது' உரை-{color}-{number} ' வர்க்கம்.
• இரண்டாவது மற்றும் மூன்றாவது ' ப ” கூறுகள் அதே முறையைப் பயன்படுத்தி சிவப்பு மற்றும் பச்சை வண்ணங்களுடன் வழங்கப்படுகின்றன.
• ' உரை மையம் 'வகுப்பு உரை உள்ளடக்கத்தை உறுப்பு மையத்தில் நிலைநிறுத்துகிறது.

வெளியீடு

கீழே உள்ள வெளியீட்டில் இருந்து, உரையின் இயல்புநிலை கருப்பு நிறம் உரை-{color}-{number} வகுப்பைப் பயன்படுத்தி குறிப்பிட்ட வண்ணங்களுக்கு மாற்றப்பட்டது என்பது தெளிவாகிறது:

டெயில்விண்டில் வெவ்வேறு எழுத்துருக் குடும்பங்களை எவ்வாறு பயன்படுத்துவது?

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

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

இதேபோல், ' எழுத்துரு-{எடை} 'உரையை தடிமனாகவும், இலகுவாகவும் அல்லது இயல்பானதாகவும் மாற்ற வகுப்பைப் பயன்படுத்தலாம். டெயில்விண்டில் உள்ள வெவ்வேறு எழுத்துருக் குடும்பங்களுக்கு எழுத்துரு எடையை வழங்க ஒரு ஆர்ப்பாட்டத்தைப் பயன்படுத்துவோம்:

குறியீட்டிற்கான விளக்கம்:

• மூன்று ' ப ” உறுப்புகள் “மோனோ”, “செர்ஃப்” மற்றும் “சான்ஸ்” எழுத்துரு குடும்பங்களால் வழங்கப்படுகின்றன. எழுத்துரு குடும்பம்} ' வர்க்கம்.
• இதேபோல், மூன்று ' ப 'கூறுகள்' என வழங்கப்படுகின்றன மிகையான ',' அரை தடிமனான ', மற்றும் இந்த ' கூடுதல் வெளிச்சம் 'எழுத்து எடைகள்' ஐப் பயன்படுத்தி எழுத்துரு-{எடை} ' வர்க்கம்.
• இந்த கூறுகள் அனைத்தும் ' உரை மையம் 'உறுப்பின் மையத்தில் உரையை வைக்கும் வகுப்பு.

வெளியீடு

கொடுக்கப்பட்ட வெளியீடு ஒவ்வொரு ' ப 'உறுப்பு வேறுபட்ட எழுத்துரு குடும்பம் மற்றும் எழுத்துரு எடைகளைக் கொண்டுள்ளது:

டெயில்விண்டில் உள்ள உரைக்கு அடிக்கோடு அலங்காரங்களை எவ்வாறு வழங்குவது?

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

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

மேலே உள்ள குறியீட்டில், நான்கு ' ப 'ஆல் வழங்கப்படும் கூறுகள்' திடமான ',' இரட்டை ',' அலை அலையான ', மற்றும் ' புள்ளியிடப்பட்ட ” பாணியில் அடிக்கோடு.

வெளியீடு:

வெவ்வேறு அடிக்கோடிட்ட அலங்கார வகுப்புகளைப் பயன்படுத்தி உறுப்புகள் வடிவமைக்கப்பட்டுள்ளன என்பது பின்வரும் வெளியீட்டிலிருந்து தெளிவாகிறது:

டெயில்விண்டில் உள்ள உரைக்கு உள்தள்ளல்களை எவ்வாறு வழங்குவது?

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

மேலே வரையறுக்கப்பட்ட தொடரியலில் உள்ள அகலம் உரை உள்ளடக்கத்திற்கு வழங்கப்பட்ட உள்தள்ளல் விளிம்பின் அளவிற்குப் பொறுப்பாகும்.

இரண்டு உரை கூறுகளை வெவ்வேறு உள்தள்ளல் மதிப்புகளுடன் ஒதுக்கி, அதன் முடிவைப் பார்க்கலாம்:

மேலே உள்ள குறியீட்டில், இரண்டு ' ப 'அகலத்தின் உள்தள்ளலுடன் வழங்கப்படுகிறது' 4 ” &” 28 ' முறையே. முதல் உறுப்பு மேல்-கீழே திணிப்புடன் ' ப-12 ' வர்க்கம்.

வெளியீடு:

பெரிய உள்தள்ளல் அகலத்தின் காரணமாக, உரையின் தொடக்கத்தில் இரண்டாவது உரை உறுப்பு அதிக விளிம்பைக் கொண்டிருப்பதை கீழே உள்ள வெளியீட்டில் காணலாம்:

டெயில்விண்டைப் பயன்படுத்தி உரையை ஸ்டைல் ​​செய்வதுதான்.

முடிவுரை

டெயில்விண்ட் உரை கூறுகளை வடிவமைக்க பல்வேறு வகுப்புகளை வழங்குகிறது. டெயில்விண்டில் உரையை வடிவமைக்க, பயனர் ' உரை-{color}-{number} ',' உரை-{சீரமைப்பு} ',' அடிக்கோடி அலங்காரம்-{பாணி} ', மற்றும் ' உள்தள்ளல்-{அகலம்} ' வர்க்கம். இந்தக் கட்டுரை டெயில்விண்டில் உள்ள பல்வேறு வகுப்புகளைப் பயன்படுத்தி உரையை வடிவமைப்பதற்கான வழிகாட்டியை வழங்கியுள்ளது.