Cheat Sheet: Jak vložit text CSS

Webový zdroj odhadují uživatelé podle jeho vnější atraktivity. Proto ani informačně užitečný text nemusí být čten, protože je špatně navržen. Závěr - musíte pečlivě a pečlivě přistupovat nejen k sémantickému obsahu stránek stránek, ale ik jeho vizuálnímu zastoupení. Příchod technologie CSS rozšířil možnosti tvorby atraktivních článků. Jednou z vlastností určených k usnadnění vnímání toho, co je napsáno, je odrážka textu CSS.

Okraje a odrážky: jaký je rozdíl?

Než začnete formátovat text, musíte pochopit, jaké pole a odrážky jsou. Navzdory tomu, že tyto značkovací prvky v některých případech vypadají pro uživatele stejně, existují mezi nimi zásadní rozdíly:

• pole je definováno vlastností polstrování, odsazení - marže;
• pole je určeno mezerou mezi obsahem a okrajem bloku, odsazení - mezi hranice sousedních bloků;
• pole mohou být vzaty v úvahu v rozměrech prvku (šířka a výška) a ne.

Vlastnost okrajů

Chcete-li určit horizontální nebo vertikální odsazení textu CSS, použijte konstrukci marže. Tato vlastnost se použije na značku hlavního odstavce odstavce. V nejjednodušším případě je napsáno jako:

margin: 12px.

Taková čára znamená, že okolo bloku textu (nebo jakéhokoli jiného bloku) bude ze všech stran vytvořeno odsazení 12 pixelů. Chcete-li zvýšit mezeru, například třikrát, stačí napsat:

margin: 36px.

Ale co když interval mezi bloky by měl být odlišný na každé straně? Vývojáři webových stránek používají několik forem nahrávání:

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

V prvním příkladu budou odsazení 11 pixelů ze spodní a horní části bloku a 22 pixelů po stranách bloku. Podle druhého záznamového zařízení mezi horním okrajem a obsah bude 11 bodů, mezi spodním - 33 pixelů na každé straně - 22 bodů. Ve třetím případě odsazení CSS Text bude 11 pixelů vysoká, 22 pixelů vpravo, 33 pixelů dolů a 44 pixelů vlevo.

Je také možné zaznamenat vzdálenost k hranici bloku pouze z jedné strany: horní okraj, dolní okraj, levý okraj, pravý okraj. Překlady názvů nemovitostí do ruštiny je snadné odhadnout jejich účel. Například následující položka označuje, že pravý okraj bude 22 pixelů:

pravý okraj: 22рх.

U jiných stran se předpokládá, že vzdálenosti kolem bloku se rovnají hodnotě mateřského prvku.

Vlastnictví marže má funkci, kterou si musí vývojář vzpomenout při použití odsazení vertikálního textu CSS. Intervaly sousedních prvků nejsou na sobě navzájem stohovány, ale na sebe. Předpokládejme například, že jeden z bloků má margin-bottom: 15px, a blok sousedící s ním zezadu margin-top: 35px. Školní aritmetika a zdravý rozum naznačují, že celková vzdálenost mezi nimi bude 50 pixelů. V praxi tomu tak není. Blok s velkou hodnotou vlastností marže "Polkne" svého souseda. V důsledku toho bude interval mezi prvky 35 pixelů.

Červená čára

Při vytváření dokumentu v textovém editoru uživatelé dávají přednost každému novému odstavci pomocí červeného řádku. Pomocí CSS je snadné dělat textovou odsazení vlevo - používá se konstrukce text-odrážka. Je napsáno následovně:

text-odrážka: 11px.

To znamená, že první řádek odstavce bude posunut vzhledem k levému okraji o 11 pixelů. Aby text na webové stránce vypadal spíše jako dokument v editoru, měli byste jej navíc instalovat šířka zarovnání, to znamená:

text-odsazení: 11px;

text-align: justify.

Kromě pixelů je při popisu označení možné použít i jiné jednotky - palce, body, procenta. Nechť blok má textový okraj CSS ve výši 10%. Při šířce bloku 500 pixelů bude červená čára 50 pixelů (10% z 500).

Pro tuto vlastnost lze nastavit hodnotu dědictví. Takový záznam říká, že blok používá podobnou vlastnost nadřazeného bloku.

text-odrážka: dědí.

Je to úžasné, ale odsazení mohou také mít záporné hodnoty! V tomto případě jsou výstupky tvořeny tzv, která je základním textu zůstane na svém místě, a první řádek je posunut doleva o 22 obrazových bodů:

text-odrážka: -22px.

Chcete-li zajistit, že písmena nepřekračují levý okraj prohlížeče, kromě text-odrážka musíte pro zadání pole použít konstrukci:

padding-left: 22px.

Užitečná doporučení

Základní vlastnosti CSS pro formátování textu zvážil. A jejich konsolidace pomůže praxi. Zde je několik posledních tipů, jak používat materiál, který se naučil při vývoji webových stránek:

• červená čára a odrážka textu jsou odlišné pojmy a pro jejich označení se používají různé vlastnosti;
• pro vertikální odsazení pravidla matematiky nefungují - intervaly jsou překrývají, prvek s větší hodnotou "vyhraje";
• Záporné odsazení odstavce se používá k označení prvního řádku odstavce pomocí obrázku.