CSS સાથે ફકરા કેવી રીતે ઇન્ડેન્ટ કરવો

ટેક્સ્ટ ઇન્ડેન્ટ સંપત્તિ અને અડીને બહેન પસંદગીકારોનો ઉપયોગ કરવો

ગુડ વેબ ડિઝાઇન ઘણી સારી ટાઇપોગ્રાફી વિશે છે. એટલા માટે કે વેબ પૃષ્ઠની સામગ્રીને ટેક્સ્ટ તરીકે પ્રસ્તુત કરવામાં આવે છે, તેથી તે ટેક્સ્ટને આકર્ષક અને અસરકારક બન્ને હોવા માટે સક્ષમ બનાવવું એ એક વેબ ડિઝાઇનર તરીકેની એક મહત્વપૂર્ણ કૌશલ્ય છે. કમનસીબે, અમારી પાસે પ્રિન્ટમાં અમે જે ટાઇપોગ્રાફિક નિયંત્રણ ઓનલાઇન કરીએ છીએ તે જ સ્તર નથી. આનો અર્થ એ થાય છે કે અમે એક વેબસાઇટ પર હંમેશાં વિશ્વાસુપણે ટેક્સ્ટ નહીં કરી શકીએ છીએ જેથી અમે છાપેલા ભાગમાં આમ કરી શકીએ.

એક સામાન્ય ફકરા શૈલી કે જે તમે ઘણી વાર પ્રિન્ટમાં જોવા મળે છે (અને જે અમે ઑનલાઇન ફરીથી બનાવી શકીએ છીએ) તે ફકરાની પ્રથમ રેખા એક ટેબ જગ્યા ઇન્ડેન્ટેડ છે. આ વાંચકોને એક ફકરો શરૂ થાય છે અને અન્ય અંત થાય છે તે જોવાની મંજૂરી આપે છે.

તમે આ વિઝ્યુઅલ શૈલીને વેબ પેજ જેટલું જ જોતા નથી કારણ કે બ્રાઉઝર્સ મૂળભૂત રીતે ડિફૉલ્ટ રૂપે જગ્યાઓ સાથે ફકરો પ્રદર્શિત કરે છે જ્યાં બતાવવાનો એક માર્ગ છે કે જ્યાં એક અંત આવે છે અને અન્ય શરૂ થાય છે, પરંતુ જો તમે તે પ્રિન્ટ- ફકરા પર પ્રેરિત ઇન્ડન્ટ શૈલી, તમે લખાણ ઇન્ડેન્ટ શૈલી મિલકત સાથે આવું કરી શકો છો

આ મિલકત માટે સિન્ટેક્સ સરળ છે. અહીં તે છે કે તમે એક દસ્તાવેજમાં બધા ફકરાઓ માટે ટેક્સ્ટ ઇન્ડેન્ટ કેવી રીતે ઉમેરશો.

પૃષ્ઠ {ટેક્સ્ટ ઇન્ડેન્ટ: 2em; }

ઇન્ડેન્ટ્સને કસ્ટમાઇઝ કરવી

એક રીતે તમે ઇન્ડેન્ટમાં ફકરો સ્પષ્ટ કરી શકો છો, તમે જે ફકરાઓ ઇન્ડેન્ટેડ કરવા માગો છો તે વર્ગ ઉમેરી શકો છો, પરંતુ તે માટે તમારે તેને એક વર્ગ ઉમેરવા માટે દરેક ફકરાને સંપાદિત કરવાની જરૂર છે. તે બિનકાર્યક્ષમ છે અને HTML કોડિંગ શ્રેષ્ઠ પ્રયાસોનું પાલન કરતું નથી.

તેના બદલે, જ્યારે તમે ફકરા ઇન્ડેન્ટ કરો ત્યારે તમારે વિચારવું જોઈએ. તમે ઇન્ડેન્ટ ફકરા કે જે સીધા બીજા એક ફકરાને અનુસરે છે. આવું કરવા માટે, તમે અડીને ભાઈ પસંદગીકારનો ઉપયોગ કરી શકો છો. આ પસંદગીકાર સાથે, તમે દરેક ફકરા પસંદ કરી રહ્યા છો જે તરત જ બીજા ફકરો દ્વારા આગળ આવે છે.

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

તમે પ્રથમ લીટીને ઇન્ડેન્ટેડ કરી રહ્યાં હોવાથી, તમારે ખાતરી કરવી જોઈએ કે તમારા ફકરામાં તેમની વચ્ચે કોઈ વધારાની જગ્યા નથી (જે બ્રાઉઝર ડિફોલ્ટ છે). સ્ટાઇલિસ્ટિકલી, તમારે ક્યાં તો ફકરો અથવા ઇન્ડેન્ટ વચ્ચે પ્રથમ લીટી હોવી જોઈએ, પરંતુ બન્ને નહીં.

p {margin-bottom: 0; પેડિંગ-તળિયું: 0; } p + p {માર્જિન-ટોચ: 0; પેડિંગ-ટોપ: 0; }

નકારાત્મક ઇન્ડેન્ટ્સ

તમે સામાન્ય રીતે ઇન્ડેન્ટ જેવા જમણી વિરુદ્ધ, ડાબી બાજુ પર જવા માટે લીટીની શરૂઆત કરવા માટે નકારાત્મક મૂલ્ય સાથે ટેક્સ્ટ-ઇન્ડેન્ટ પ્રોપર્ટીનો ઉપયોગ કરી શકો છો. તમે આ કરી શકો છો જો કોઈ વાક્ય અવતરણચિહ્નથી શરૂ થાય છે જેથી ક્વોટ અક્ષર ફકરાની ડાબી બાજુથી થોડો હાંસિયામાં દેખાય છે અને અક્ષરો પોતાને હજુ પણ સરસ ડાબા સંરેખણ બનાવે છે.

દાખલા તરીકે, તમારી પાસે એક ફકરો છે જે બ્લોકક્વોટના વંશજ છે અને તમે ઇચ્છો છો કે તે નકારાત્મક રીતે ઇન્ડેન્ટ કરે. તમે આ CSS લખી શકો છો:

બ્લોકક્વોટ પી {ટેક્સ્ટ ઇન્ડેન્ટ: -5ેમ; }

આ ફકરોની શરૂઆત આપશે, જે સંભવતઃ ઓપનિંગ ક્વોટ અક્ષરનો સમાવેશ કરે છે, અટકી વિરામચિહ્ન બનાવવા માટે સહેજ ડાબી તરફ ખસેડવામાં આવે છે.

માર્જિન્સ અને પેડિંગ વિશે

ઘણીવાર વેબ ડિઝાઇનમાં, તમે ઘટકોને ખસેડવા અને સફેદ જગ્યા બનાવવા માટે માર્જીન અથવા પેડિંગ મૂલ્યોનો ઉપયોગ કરો છો. તે ગુણધર્મો ઇન્ડેન્ટેડ ફકરા અસર હાંસલ કરવા માટે કામ કરશે નહિં, જો કે જો તમે ફકરામાં આમાંથી કોઈ મૂલ્ય લાગુ કરો છો, તો તે ફકરોનો સંપૂર્ણ ટેક્સ્ટ, દરેક લાઇન સહિત, માત્ર પ્રથમ લીટીની જગ્યાએ હશે.