› › zarovnání HTML kódu. Zarovnání textu v CSS: vlastnost text-align

zarovnání HTML kódu. Zarovnání textu v CSS: vlastnost text-align

V případě dokumentů HTML značky fungují spíše k označení obsahu než k označení toho, jak by měl být prezentován. Větší kontrola nad prezentací je dosažena pomocí stylů. V tomto článku se podívám na ty styly, které jsou spojeny s formátováním odstavců v HTML.

Štítek

V HTML můžete určit odstavce a atribut align je zarovná doleva, doprava, na střed nebo do bloku. Kromě nich použijeme atribut global style.

Zarovnání odstavce

Odstavec můžete zarovnat pomocí atributu align s následujícími hodnotami:

zarovnání textu: vlevo|vpravo|na střed|zarovnat|počáteční|zdědit;

Zkopírujte následující kód do souboru .html.

Zarovnání odstavce pomocí atributu Styl

Tento odstavec je zarovnán na střed

Tento odstavec je zarovnán vpravo

Tento odstavec se v okně prohlížeče zobrazí zarovnaný. Zarovnaný odstavec je zarovnán doprava a doleva přidáním mezer navíc. Můžete vidět, že okraje zarovnaného odstavce odpovídají okrajům odstavců zarovnaných doleva a doprava. V odstavci zarovnaném doleva je levý okraj rovný, zatímco v odstavci zarovnaném vpravo je rovný levý okraj. Vidíte, jak jsou oba okraje tohoto odstavce rovné? Toho je dosaženo pomocí stylu text-align:justify.

V okně prohlížeče vypadá HTML kód odstavce takto:

Řádkování

Řádkování odstavců můžete ovládat pomocí style=line-height . Použijte atribut style s následujícími hodnotami:

výška řádku: normální|číslo|délka|počáteční|zdědit;

Níže je uveden příklad kódu HTML, který zobrazuje odstavce s různým řádkováním:

Nastavení řádkování pomocí atributu Styl

Tento odstavec používá dvě hodnoty pro atribut style. První řádek-height:1.5 určuje jeden a půl řádkování odstavce a druhá hodnota text-align:justify určuje, že by měl být odstavcový text rozložen po celé šířce.

Tento odstavec má dvojité řádkování a je zarovnaný. line-height:2 určuje dvojité řádkování. Atribut style nemusí mít dvě hodnoty. Pokud však potřebujete zadat dvě hodnoty, můžete je oddělit středníkem.




Zde je několik různých způsobů, jak použít hodnotu výšky řádku pro atribut style:

: Nastaví řádkování na 13 pixelů;

: Nastaví mezery HTML mezi odstavci na 200 % vzhledem k aktuální velikosti písma;

: Nastaví výšku řádku na 14 pixelů.

Odsazení

Pro snazší pochopení jsem použil výraz „odrážky“. Ale v HTML používáme mezery k vytvoření prázdného prostoru kolem objektu. Atribut style s hodnotou odsazení můžete použít k odsazení odstavce doleva nebo doprava.

Níže je uveden příklad odstavců s levým a pravým odsazením:

Odsazení odstavců pomocí atributu Styl

Tento odstavec není odsazený, je pouze odůvodněný. Podívejte se na atribut stylu prvku P pro tento odstavec.

Pro tento odstavec jsem nastavil levé odsazení na 30 px pomocí stylu padding-left:30px. Tento odstavec je také zarovnán pomocí stylu text-align:justify. Jak již víte, pro atribut Styl můžeme použít více hodnot tak, že je oddělíme středníkem.

A tento odstavec má pravé odsazení 30 pixelů, ale žádné levé odsazení. Je také zarovnána na šířku. Hodnota 'padding-right' atributu style určuje správné odsazení. Pokud efekt nevidíte, zmenšete šířku okna prohlížeče, aby se správně zobrazil zarovnaný odstavec HTML.


Odsazení mezi odstavci (odsazení před a za odstavcem)

V HTML nebo CSS to nepotřebujeme. Můžeme jednoduše určit styl výplně pro prvek

Padding-top a padding-bottom určují bílé místo před a za odstavcem, které funguje jako odsazení nahoře nebo dole. Podívejte se na níže uvedený příklad značky

Nastavil jsem první odstavec HTML tak, aby měl odsazení 10 px před druhým odstavcem a 50 px za druhým odstavcem:

Odsazení odstavců pomocí atributu Styl

Tento odstavec nemá specifikované žádné odsazení před nebo za. Toto je běžný odstavec, oprávněný. Jak již víte, můžeme zarovnat odstavec pomocí kódu style="text-align:justify" uvnitř značky.

Tento odstavec je příliš velký. Má také 10 pixelů výplně před odstavcem a 50 pixelů za ním. Uvnitř tagu mám nastavené 3 styly.

Toto je běžný odstavec bez odsazení a výchozího zarovnání.




Věci k zapamatování

  • Odstavec HTML lze zarovnat pomocí atributu align nebo stylu zarovnání textu;
  • HTML se bude vykreslovat odlišně v závislosti na velikosti obrazovky, velikosti okna prohlížeče;
  • Přidání dalších mezer nebo prázdných řádků do HTML neovlivní výstup. Prohlížeč odstraní všechny nadbytečné mezery;
  • Tagy definují, co by se mělo zobrazovat, a styly definují, jak by se to mělo zobrazovat;
  • Styly lze zadat třemi různými způsoby – inline (v rámci značek), interní ( uvnitř stejného souboru HTML pomocí prvku