Gebruik die teks-Indent Property en Aangrensende Sibling Selectors
Goeie webontwerp is dikwels oor goeie tipografie. Aangesien soveel van die inhoud van 'n webblad as teks aangebied word, kan daardie teks aantreklik en effektief wees, dit is 'n belangrike vaardigheid om as webontwerper te besit. Ongelukkig het ons nie dieselfde vlak van tipografiese beheer aanlyn wat ons in druk doen nie. Dit beteken dat ons nie altyd betroubaar teks op 'n webwerf kan stoor soos ons dit in 'n gedrukte stuk kon doen nie.
Een algemene paragraafstyl wat jy dikwels in druk sien (en wat ons aanlyn kan herskep) is waar die eerste reël van die paragraaf een tabbladsy is . Dit laat lesers toe om te sien waar een paragraaf begin en die ander een eindig.
Jy sien hierdie visuele styl nie so veel in webblaaie nie, want blaaiers vertoon gewoonlik paragrawe met ruimte onder hulle as 'n manier om te wys waar die een eindig en 'n ander begin, maar as jy 'n bladsy wil styl om daardie drukwerk te hê, geïnspireerde indent styl op paragrawe, kan jy dit doen met die teks-indent style eiendom.
Die sintaksis vir hierdie eiendom is eenvoudig. Gaan soos volg te werk om 'n teks-streep by al die paragrawe in 'n dokument te voeg.
p {teks-indent: 2em; }Aanpassing van die inspringings
Op een of ander manier kan u presies die paragrawe spesifiseer wat u inskryf, u kan 'n klas byvoeg by die paragrawe wat u wil hê, maar dit vereis dat u elke paragraaf wysig om 'n klas by te voeg. Dit is ondoeltreffend en volg nie HTML-kodering van beste praktyke nie.
In plaas daarvan moet u in ag neem wanneer u paragrawe inskryf. U sluit paragrawe in wat 'n ander paragraaf direk volg. Om dit te doen, kan jy die aangrensende broer of suster kies. Met hierdie selector kies jy elke paragraaf wat onmiddellik voorafgegaan word deur 'n ander paragraaf.
p + p {teks-indent: 2em; }Aangesien u die eerste reël insit, moet u ook seker maak dat u paragrawe geen ekstra spasie tussen hulle het nie (wat die leser standaard is). Stylisties moet jy ook tussen die paragrawe of in die eerste reël spasie hê, maar nie albei nie.
p {marge-bodem: 0; opvulling-bodem: 0; } p + p {marge-top: 0; padding-top: 0; }Negatiewe Inkomste
U kan ook die teksinhoud- eiendom, tesame met 'n negatiewe waarde, gebruik om die begin van 'n lyn links te laat in plaas van die reg soos 'n gewone streep. Jy kan dit doen as 'n lyn met 'n aanhalingstekens begin, sodat die aanhalingstekens in die effense marge aan die linkerkant van die paragraaf verskyn en die letters self nog steeds 'n lekker linkerbelyning vorm.
Sê byvoorbeeld dat jy 'n paragraaf het wat 'n afstammeling van 'n blokquote is en jy wil hê dit moet negatief wees. Jy kan hierdie CSS skryf:
blockquote p {text-indent: -.5em; }Dit sal die begin van die paragraaf, wat vermoedelik die aanhalingstekenskarakter bevat, liggies na links beweeg om hangende leestekens te skep.
Betreffende Marges en Padding
Dikwels in webontwerp gebruik jy marge- of polswaardes om elemente te beweeg en wit spasie te skep. Hierdie eienskappe sal egter nie werk om die inperk-paragraaf-effek te bereik nie. As jy een van hierdie waardes op die paragraaf toepas, sal die hele teks van die paragraaf, insluitend elke lyn, in die plek van slegs die eerste reël wees.