టెక్స్ట్-ఇండెంట్ సంపత్తి మరియు ఆనుకొని ఉన్న తోబుట్టువులు సెలెక్టర్లు ఉపయోగించి
మంచి వెబ్ డిజైన్ మంచి టైపోగ్రఫీ గురించి తరచుగా ఉంది. ఒక వెబ్ పేజీ యొక్క కంటెంట్ చాలావరకూ టెక్స్ట్ గా ప్రదర్శించబడుతున్నందున, పాఠ్యం ఆకర్షణీయమైనది మరియు సమర్థవంతమైనదిగా ఉండే శైలిని ఒక వెబ్ డిజైనర్గా కలిగి ఉండే ఒక ముఖ్యమైన నైపుణ్యం. దురదృష్టవశాత్తు, మనము ప్రింట్లో చేసే టైపోగ్రాఫిక్ కంట్రోల్ ఆన్లైన్లో అదే స్థాయిలో లేదు. దీని అర్థం, మేము ఎప్పుడూ విశ్వసనీయంగా శైలి టెక్స్ట్ను వెబ్ సైట్లో ముద్రించిన ముక్కలో చేయగల విధంగా చేయలేము.
ముద్రణలో తరచుగా చూసే ఒక సాధారణ పరిచ్ఛేద శైలి (మరియు ఇది మేము ఆన్లైన్లో పునఃసృష్టి కావచ్చు), ఆ పేరా యొక్క మొదటి పంక్తి ఒక ట్యాబ్ స్థలాన్ని ఇండెంట్ చేస్తుంది. ఇది ఒక పేరా ప్రారంభమవుతుంది మరియు మరొక ముగుస్తుంది ఎక్కడ పాఠకులు చూడడానికి అనుమతిస్తుంది.
బ్రౌజర్లు, డిఫాల్ట్గా, పేజ్లను ఖాళీగా ఉంచడం ద్వారా వాటి క్రింద ఉన్న ఖాళీతో ప్రదర్శించటానికి ఒక మార్గం మరియు మరొక ప్రారంభాన్ని చూపించే విధంగా మీరు వెబ్ పేజీలలో ఈ దృశ్యమాన శైలిని చూడలేరు, కానీ మీరు ముద్రణ పేజీని కలిగి ఉన్న పేజీని కోరుకుంటే, పేరాల్లో ప్రేరేపిత ఇండెంట్ శైలి, మీరు పాఠ-ఇండెంట్ శైలి ఆస్తితో అలా చేయవచ్చు.
ఈ ఆస్తి కోసం సింటాక్స్ సులభం. ఇక్కడ మీరు ఒక డాక్యుమెంట్లోని అన్ని పేరాలకు వచన ఇండెంట్ను జోడిస్తారు.
p {text-indent: 2em; }ఇండెంట్లను మలచుకోవడం
ఇండెంట్ చేయడానికి పేరాలను సరిగ్గా పేర్కొనడానికి ఒక మార్గం, మీరు ఇండెంట్ చేయదలిచిన పేరాలకు ఒక తరగతిని జోడించవచ్చు, కానీ దానికి ప్రతి వర్గానికి మీరు ఒక వర్గాన్ని జోడించాలని మీరు కోరుతున్నారు. ఇది అసమర్థమైనది మరియు HTML కోడింగ్ ఉత్తమ విధానాలను అనుసరించదు.
బదులుగా, మీరు పేరాలను ఇండెంట్ చేసినప్పుడు మీరు పరిగణించాలి. మీరు నేరుగా మరొక పేరాని అనుసరిస్తున్న పేరాలు పంపుతారు. ఇది చేయటానికి, మీరు ప్రక్కన ఉన్న తోబుట్టువు సెలెక్టర్ను ఉపయోగించవచ్చు. ఈ సెలెక్టర్తో, మీరు మరొక పేరా ద్వారా వెంటనే ప్రచురించబడే ప్రతి పేరాని ఎంచుకుంటారు.
p + p {text-indent: 2em; }మీరు మొదటి పంక్తిని ఇండెండ్ చేస్తున్నందున, మీ పేరాలకు వాటి మధ్య అదనపు ఖాళీ లేదని నిర్ధారించుకోండి (ఇది బ్రౌజర్ డిఫాల్ట్). శైలిలో, మీరు పేరాలు మధ్య ఖాళీని కలిగి ఉండాలి లేదా మొదటి పంక్తిని ఇండెంట్ చేయాలి, కానీ రెండూ కాదు.
p {margin-bottom: 0; padding-bottom: 0; } p + p {margin-top: 0; పాడింగ్-టాప్: 0; }ప్రతికూల ఇండెంట్లు
ఒక సాధారణ ఇండెంట్ వంటి కుడివైపుకి ఎడమకు వెళ్లడానికి ఒక లైన్ యొక్క ప్రారంభాన్ని కారణం చేయడానికి మీరు ప్రతికూల విలువతో పాటు టెక్స్ట్-ఇండెంట్ లక్షణాన్ని కూడా ఉపయోగించవచ్చు. ఒక లైన్ ఉల్లేఖన గుర్తుతో మొదలైతే మీరు దీన్ని చేయవచ్చు, తద్వారా కోట్ పాత్ర పేరా యొక్క ఎడమవైపుకు కొంచెం మార్జిన్లో కనిపిస్తుంది మరియు అక్షరాలను ఇప్పటికీ ఒక నైస్ ఎడమ అమరికను ఏర్పరుస్తుంది.
ఉదాహరణకు, మీరు బ్లాక్కోట్ యొక్క వంశస్థుడు అయిన పేరాను కలిగి ఉన్నారని మరియు మీరు ప్రతికూలంగా ఇండెంట్ చేయాలని కోరుకుంటారు. మీరు ఈ CSS ను వ్రాయవచ్చు:
blockquote p {text-indent: -5em; }ఇది పేరా యొక్క ప్రారంభాన్ని ఇస్తుంది, ఇది ప్రారంభ కోట్ పాత్రను కలిగి ఉంటుంది, ఇది ఉరితీత విరామ చిహ్నాలను సృష్టించడం కోసం కొద్దిగా ఎడమవైపుకు తరలించబడుతుంది.
అంచులు మరియు పాడింగ్ల గురించి
తరచుగా వెబ్ డిజైన్లో, అంశాలని తరలించడానికి మరియు తెల్లని స్థలాన్ని సృష్టించడానికి మీరు మార్జిన్ లేదా పాడింగ్ విలువలను ఉపయోగిస్తారు. అయినప్పటికీ, ఆరంభ పేరా ప్రభావాన్ని సాధించటానికి ఆ లక్షణాలు పనిచేయవు. మీరు ఈ విలువలను పేరాకి వర్తిస్తే, ప్రతి పంక్తితో సహా ఆ పేరా మొత్తం టెక్స్ట్ కేవలం మొదటి రేఖకు బదులుగా ఖాళీ చేయబడుతుంది.