எப்படி CSS கொண்டு பத்திகளை Indent

Text-Indent சொத்து மற்றும் அருகிலுள்ள உடன்பிறப்பு தேர்வாளர்களைப் பயன்படுத்துதல்

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

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

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

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

p {text-indent: 2em; }

குறிப்புகள் தனிப்பயனாக்கலாம்

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

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

p + p {text-indent: 2em; }

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

p {margin-bottom: 0; திணிப்பு-கீழே: 0; } p + p {margin-top: 0; திணிப்பு-மேல்: 0; }

எதிர்மறை குறிப்புகள்

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

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

blockquote p {text-indent: -5em; }

இது, தொடக்கத்தின் மேற்கோள் தன்மையைக் கொண்டிருக்கும் பத்தியின் தொடக்கத்தை கொடுக்கிறது, இது இடதுபுறமாக இடதுபுறமாக நிறுத்தப்பட வேண்டும், இது நிறுத்தப்பட்ட நிறுத்தற்குறியை உருவாக்குகிறது.

விளிம்புகள் மற்றும் பேட்டிங் பற்றி

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