It gebrûk fan 'e tekst-yntinsive eigendom en oanjoere siblingskekselers
Goeie web design is faak oer goede typografy. Om't safolle fan in ynhâld fan 'e webside as tekst te presintearret, kinne jo dizze tekst as oantreklik en effekt te stylisearjen is in wichtige feardigens as in webûntwerper. Spitigernôch hawwe wy itselde nivo fan typografysk kontrole online dat wy yn print dogge. Dit betsjut dat wy net altyd foarkleare tekst op in webside opstelle kinne op deselde wize wêrop wy dat kinne yn in gedachte stikje dwaan.
Ien algemiene paragraafstyl dat jo faak yn printe sjogge (en wat wy online opnij kinne) is wêr't de earste line fan dat paragraaf ien ljepperromte is . Dit liedt lêzers om te sjen wêr't ien alinea begjint en in oare einiget.
Jo sjogge dizze fisuele styl net sa folle yn websiden, om't browsers standert standert foarkommende paragrafen mei romte ûnder harren as in manier om sjen te litten wêr't ien einiget en in oar begjint, mar as jo in side meitsje wolle om dizze print- Ynspirearjend styl op paragrafen ynspirearret, kinne jo dat dwaan mei de tekst-eindige stijl eigendom.
De syntaksis foar dit eigendom is ienfâldich. Hjir is hoe't jo in allinich tekst yn in dokumint in tekenrige tafoegje.
p {text-indent: 2em; }De yndusten oanpasse
Ien fan 'e wei kinne jo de paragrafen perfoarst oantsjutte, kinne jo in klasse taheakje oan' e paragrafen dy't jo yndrukke wolle, mar dat freget om jo elke paragraaf te bewurkjen om in klasse oan te meitsjen. Dat is net effektiv en folget net HTML kodearring best practices.
Ynstee dêrfan moatte jo beskôgje as jo lid binne. Jo binne alinea's dy't fuortendaliks in oare alinea folgje. Om dit te dwaan kinne jo de neistlizzende sjabloan selektor brûke. Mei dizze seleksje selektearje elke alinea dy't fuortdaliks foarôfgeand fan in oare alinea.
p + p {text-indent: 2em; }Om't jo de earste line oanroppe, moatte jo derfoar soargje dat jo paragrafen gjin ekstra romte hawwe tusken dizze (de browser is standert). Stylistysk moatte jo beide romten hawwe tusken paragrafen of yndrukke de earste line, mar net beide.
p {margin-bottom: 0; padding-bottom: 0; } p + p {margin-top: 0; padding-top: 0; }Negative yndielen
Jo kinne ek de tekst-yndeks- eigendom brûke, tegearre mei in negative wearde, om de begjin fan in line te feroarjen as de tsjinst rjochts as in normale yndeks. Jo kinne dit dwaan as in begjin begjint mei in quotaasje-mark, sadat it sifer-karakter ferskynt yn 'e lytse marzje nei de linker fan' e paragraaf en de letters sels foarmje noch in moaie lofsangeling.
Siz, bygelyks, dat jo in paragraaf hawwe dat in neisiet fan in blokquot is en jo wolle dat it negatyf yndeksearre wurde sil. Jo kinne dit CSS skriuwe:
blockquote p {text-indent: -.5em; }Dit soe it begjin fan 'e paragraaf jaan, dat miskien de iepeningssitmerk ynklusyf befetsje, om wat ferpleatst wurde nei de linker te meitsjen om hingjende punktuaasje te meitsjen.
Oer Margins en Padding
Oftich yn webûntwerp brûke jo marzje of padding wearden om eleminten te ferpleatsen en wite romte te meitsjen. Dizze eigenskippen sille net wurkje om de yndeksearre paragraaf effekt te realisearjen. As jo ien fan dizze wearden oanfreegje by de paragraaf, sil de folsleine tekst fan dat paragraaf, ynklusyf eltse line, bepaald wurde ynstee fan just de earste line.