Cheat Sheet: Hoe om teks CSS keep

Web hulpbron gewaardeer deur gebruikers vir sy visuele aantrekkingskrag. Daarom kan selfs nuttig teksinligting nie gelees word as gevolg van die feit dat dit sleg is ontwerp. Gevolgtrekking - die behoefte om versigtig en oplettend nie net om die semantiese inhoud van bladsye, maar ook om sy visuele aanbieding. Die koms van CSS tegnologie verhoog die moontlikheid van die skep van 'n aantreklike artikels. Een van die eienskappe, wat bedoel is om die persepsie van geskrewe fasiliteer - streepje CSS teks.

Marge en padding: Wat is die verskil?

Voordat jy begin om die teks te formateer, moet jy verstaan wat marges en padding. Ten spyte van die feit dat hierdie opmaak elemente in sommige gevalle lyk dieselfde aan die gebruiker, daar is fundamentele verskille tussen hulle:

• veld stel die padding eiendom, streepje - marge;
• gebied word bepaal deur 'n gaping tussen die inhoud en die blok grens, 'n ruimte - tussen die grense van aangrensende blokke;
• veld kan beskou word as 'n element in die grootte (breedte en hoogte) en geen.

marge eiendom

So, om die horisontale of vertikale padding CSS teks stel, gebruik die ontwerp marge. Hierdie eiendom is van toepassing op die etiket

paragraaf meester dokument. In die eenvoudigste geval, kan dit geskryf word as:

marge: 12px.

Hierdie reël beteken dat sowat 'n blok van teks (of enige ander blok) aan alle kante word in die inkeping 12 pixels. Om die interval te verhoog, byvoorbeeld, drie keer is genoeg om te skryf:

marge: 36px.

Maar wat as tussen die blokke van die interval moet verskillende op elke kant wees? Web ontwikkelaars gebruik verskeie vorme van rekords:

1. marge: 11px 22px.
2. marge: 11px 22px 33px.
3. marge: 11px 22px 33px 44px.

In die eerste voorbeeld is die inkeping 11 pixels gemaak van die onderste en boonste grense van die blok, aan die kante van die blok - met 22 pixels. Volgens 'n tweede rekord eenheid tussen die boonste rand en die inhoud sal wees 11 pixels, tussen die laer - 33 pixel aan elke kant - met 22 pixels. In die derde geval CSS streepje teks indien sal 'n waarde van 11 pixels van die top, regs 22 pixels, 33 pixels en 44 pixels van die onderkant links het.

Ook beskikbaar is die vermoë om die afstand vanaf die blok grens aan te teken op slegs een kant: margin-top, marge-bodem ,-marge gelaat, marge-reg. Vertaling van die name van die eiendomme in die Russiese taal, is dit maklik om te raai oor hul aanstelling. Byvoorbeeld, die volgende inskrywing dui daarop dat die inkeping op die regte gelyk sal wees om 22 pixels:

marge-reg: 22rh.

Vir die res van die afstand rondom die kante van die blok veronderstel om gelyk aan die waarde van die ouer element wees.

Marge eiendom het eienskappe wat 'n ontwikkelaar moet onthou wanneer die gebruik van CSS teks ingekeep vertikaal. Tussenposes van aangrensende elemente is nie opgesom, en bo-op mekaar. Byvoorbeeld, veronderstel dat een van die eenhede het 'n marge-bottom: 15px, en onder die aangrensende blok margin-top: 35px. Skool rekenkundige en gesonde verstand dikteer dat die totale spasiëring tussen hulle sal wees 50 pixels. In die praktyk is dit nie. 'N Blok met 'n groot waarde van die eiendom marge «sluk" sy naaste. As gevolg hiervan, die interval tussen elemente is 35 pixels.

"Red" lyn

Maak die dokument in 'n teks editor, gebruikers verkies om elke nuwe paragraaf met die "rooi" lyn te vra. Met behulp van CSS teks streepje aan die linkerkant is maklik om te doen - gebruik teks-streepje ontwerp. Geskryf dit soos volg:

teks-streepje: 11px.

Dit is die eerste reël van die paragraaf is relatief tot die linkerkantlyn van 11 pixels verskuif. Om die teks op die webblad lyk meer soos 'n dokument in die editor maak, moet jy 'n bykomende regverdiging installeer, dit is, skryf:

teks-streepje: 11px;

teks-AF.

In bykomend tot pixels, in die beskrywing van die gebruik van ander opmaak Eenhede - duim beweer persent. Laat die eenheid het 'n CSS teks inkeping van 10%. Wanneer die breedte van die blok van 500 pixels, sal die rooi lyn 50 pixels (10% van 500).

Vir hierdie eiendom mag uitgestal waarde erwe. Hierdie rekord sê dat die eenheid gebruik 'n soortgelyke eiendom van die ouer eenheid.

teks-streepje: Erf.

Verbasend, die inkeping kan op negatiewe waardes te neem! In hierdie geval, is die projeksies wat gevorm word deur die sogenaamde, dit is die basiese teks bly in plek, en die eerste reël is verskuif na die linker 22 pixels:

teks-streepje: -22px.

Die briewe is nie gegaan oor die linker grens van die leser, in toevoeging tot die teks-streepje moet gebruik word om die struktuur van die veld te definieer:

padding-links: 22px.

nuttige wenke

Die basiese eienskappe van CSS vir opmaak teks word beskou as. En los hulle hulp praktyk. Hier is 'n paar finale wenke oor hoe om die geleer materiaal in web ontwikkeling toe te pas:

• die rooi lyn en die inkeping van teks - verskillende konsepte en verskillende eiendomme wat vir hul leiding;
• vertikale inkeping reëls nie wiskunde kan toepas - intervalle oorvleuel, "wen" element met die groter waarde;
• negatiewe inkeping gebruik om die eerste reël van 'n paragraaf met 'n beeld te dui.