Wéi kënnt Paragraphen Ofbriechen mat CSS

Benotzt d'Textindustrie an de benodeeleg Sibler Selektoren

Gutt Webdesign ass oft sou gutt Typographie. Well sou vill vun engem Inhalt vun de Websiten als Text presentéiert gëtt, kann dës Texter ze attraktiv sinn an effektiv ass eng wichteg Fäegkeet fir e Webdesigner ze hunn. Leider hu mir net de selwechte Level vun typographesche Kontroll online, déi mir an der Woch maachen. Dëst bedeit datt mir ëmmer net souveräneg Text ze verléieren op enger Websäit an der selwechter Manéier, wéi mir et an engem gedréckte Stéck wäerte maachen.

Een gemeinsamen Paragrafstil, deen Dir oft a Gedrénks gesinn (a wou mir kënnen online opmaachen) ass wou déi éischt Zeil vun där Paragraphe e Tabulatiounsprozess ass . Dëst erlaabt d'Lieser fir ze gesinn, wou ee Paragrapus beginn an eng aner.

Dir sicht dës visuell Stil net sou vill an Webseiten, well Browsers, par défaut, Paragraphen mat Plaatz ënner dem Ënnerscheed als e Wee fir ze weisen, wou een endelt an e weidere beginnt, awer wann Dir eng Säit benotzt soll fir dës Print- Inspiréierter Stil op Paragraphen inspiréiert, kënnt Dir et mat der text-indent Stil Stil maachen.

De Syntax fir dës Eigenschaft ass einfach. Hei ass wéi Dir eng alleng Ziffer un engem Text-Ufro kënnt an engem Dokument bezeechnen.

p {text-indent: 2em; }}

Den Indents personaliséiert

Engersäits kann Dir genee d'Absätze un d'Spär späicheren, Dir kënnt e Klasse an de Paragrafen addéieren, déi Dir ugedriwwen hues, awer dat erfuerdert datt Dir all Paragraphe fir eng Klass ze addéieren. Dat ass net effikass a net nëmme Kandidat bestëmmt Virschléi.

Stellt Iech vir, wann Dir Är Ufuerderungen entsprécht. Dir spillt Abschnitter, déi direkt no engem aneren Paragraphe verstäerkt sinn. Fir dat ze maachen, kënnt Dir de benodeelegen Geschwëster selector benotzen. Mat dësen Wähler markéiert Dir all Paragraphe, déi direkt vun engem aneren Paragraphe geschriwwe gëtt.

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

Zënter datt Dir déi éischt Zeil erausfuere wëllt, sollt Dir och sécher sinn datt Ären Absätzen keen extra Raum tëscht hinnen hunn (wat ass de Browser default). Stylistesch hutt Dir entweder Raum tëscht Paragraphen oder Spigel an der éischter Linn, awer net zwee.

p {margin-bottom: 0; padding-bottom: 0; } p + p {margin-top: 0; padding-top: 0; }}

Negative Indente ginn

Dir kënnt och d' Text-onent Eegent, zesumme mat engem negativen Wäert, fir de Start vun enger Linn ze verlaangen an op déi Säit lénks wéi an engem normalen Gedanken. Dir kënnt dat maachen, wann eng Zeil mam Begrëff mam Notiz beginn, fir datt d'Zitat Zeeche an de klenge Margin bis lénks vum Punkt erspuert an d'Bréiwer selwer nach ëmmer eng gutt lénks Ausrichtung maachen.

Sot, zum Beispill, datt Dir e Paragraf huet, deen e Nofolger vun engem Blockquote ass, an Dir wëllt datt et negativ agefouert gëtt. Dir kënnt dëse CSS schreiwen:

Blockquote p {text-indent: -.5em; }}

Dëst géif den Ufank vum Paragrapfe ginn, wat wahrscheinlech d'Ouverture Zitat Charakter enthält, liicht gedréckt ze ginn, fir hänkze Punktuatioun ze maachen.

Wat d'Margins a Padding ugeet

Oftentimes am Webdesign benotzt Dir Margin oder Padding Wäerter Elementer verschéckt an e wäisse Raum z'erreechen. Déi Eegeschafte wäerten net funktionnéieren, fir den entrepornéierten Paragraff Effect ze erreechen. Wann Dir eng vun dëse Wäerter op de Paragraphen applizéiert, de ganze Text vun deem Paragrapze, och all Linn, spadséiere statt vun der éischter Linn.