Odsadenie html kódov. HTML formátovanie odsekov

11. 4. 2016 10,5 tis

Formátovanie odseku HTML pomocou štýlov

V prípade dokumentov HTML značky fungujú skôr na označenie obsahu, než na označenie toho, ako by sa mal prezentovať. Väčšia kontrola nad prezentáciou je dosiahnutá pomocou štýlov. V tomto článku sa pozriem na štýly, ktoré súvisia s formátovaním odsekov v HTML.

Tag

V HTML vám umožňuje nastaviť odseky a atribút align ich zarovná doľava, doprava, na stred alebo na šírku. Okrem nich použijeme atribút global style.

Zarovnajte odsek

Odsek môžete zarovnať pomocou atribútu align s nasledujúcimi hodnotami:

zarovnanie textu: vľavo | vpravo | na stred | zarovnať | začiatočné | zdediť;

Skopírujte nasledujúci kód do súboru .html.

Tento odsek je vycentrovaný

Tento odsek je zarovnaný vpravo

Tento odsek sa zobrazí zarovnaný v okne prehliadača. Odsek s rozdelenou šírkou je zarovnaný doprava a doľava pridaním medzier navyše. Môžete vidieť, že okraje odseku zarovnaného na šírku sa zhodujú s okrajmi odsekov zarovnaných doľava a doprava. V odseku zarovnanom doľava je ľavý okraj rovný a v odseku zarovnanom vpravo pravý. Vidíte, že tento odsek má hladké okraje? To je dosiahnuté vďaka štýlu zarovnania textu: zarovnanie.

V okne prehliadača vyzerá HTML kód pre odsek takto.

Riadkovanie

Riadkovanie odseku môžete ovládať pomocou štýlu = výška riadku. Atribút style použite s nasledujúcimi hodnotami:

výška riadku: normálna | číslo | dĺžka | začiatočné | zdediť;

Nižšie je uvedený príklad HTML kódu, ktorý zobrazuje odseky s rôznym riadkovaním:

Tento odsek používa dve hodnoty pre atribút style. Prvý riadok-výška: 1,5 určuje jeden a pol riadkovanie odseku a druhá hodnota text-align: justify určuje, že text v odseku má byť zarovnaný.

Tento odsek má dvojité riadkovanie a je odôvodnený. line-height: 2 definuje dvojité medzery. Atribút štýlu nemusí mať dve hodnoty. Ak však potrebujete zadať dve hodnoty, môžete ich oddeliť bodkočiarkou.

Tu je niekoľko rôznych spôsobov použitia hodnoty výšky riadka pre atribút štýlu:

: Nastaví riadkovanie na 13 pixelov;

: Nastaví medzery medzi odsekmi HTML na 200 % vzhľadom na aktuálnu veľkosť písma;

: Nastaví výšku čiary na 14 pixelov.

Odsadenie

Použil som výraz „odsadenie“, aby som to ľahšie pochopil. Ale v HTML používame medzery na vytvorenie bieleho priestoru okolo objektu. Atribút štýlu s hodnotou výplne môžete použiť na odsadenie odseku doľava alebo doprava.

Nasleduje príklad odsekov odsadených vľavo a vpravo:

Tento odsek nie je odsadený, je len odôvodnený. Pozrite sa na atribút štýlu prvku P pre tento odsek.

Pre tento odsek som nastavil ľavú výplň na 30px pomocou štýlu padding-left: 30px. Aj tento odsek je zarovnaný na šírku pomocou štýlu zarovnania textu: zarovnanie. Ako už viete, pre atribút Style môžeme použiť viacero hodnôt, pričom ich oddelíme bodkočiarkou.

A tento odsek je odsadený doprava o 30 pixelov, ale nie je odsadený doľava. Má opodstatnenie aj v šírke. Hodnota „padding-right“ atribútu style určuje odsadenie vpravo. Ak efekt nevidíte, zmenšite šírku okna prehliadača tak, aby sa zarovnaný odsek HTML zobrazil podľa očakávania.

Odsadenie medzi odsekmi (odsadenie pred a odsadenie za odsekom)

V HTML alebo CSS to nepotrebujeme. Môžeme len špecifikovať štýl výplne pre prvok

Padding-top a padding-bottom poskytujú biele miesto pred a za odsekom, ktoré funguje ako horná alebo dolná zarážka. Pozrite sa na nižšie uvedený príklad značky

Nastavil som prvý odsek HTML tak, aby mal výplň 10 pixelov pred druhým a 50 pixelov za druhým odsekom:

Tento odsek nie je odsadený pred ani za. Toto je riadny, opodstatnený odsek. Ako už viete, odsek môžeme zarovnať na šírku pomocou kódu style = ”text-align: justify” vo vnútri značky.

Tento odsek bol úplne vypustený. Je tiež vyplnený 10 pixelov pred odsekom a 50 pixelov za odsekom. Vo vnútri štítku mám nastavené 3 štýly.

Toto je bežný odsek bez zarážok a s predvoleným zarovnaním.

Veci na zapamätanie

• Odsek HTML je možné zarovnať pomocou atribútu align alebo štýlu zarovnania textu;
• HTML sa bude zobrazovať odlišne v závislosti od veľkosti obrazovky, veľkosti okna prehliadača;
• Pridanie ďalších medzier alebo prázdnych riadkov do HTML neovplyvní výstup. Prehliadač odstráni všetky nadbytočné medzery;
• Tagy definujú, čo sa má zobraziť a štýly definujú, ako sa to má zobraziť;
• Štýly je možné špecifikovať tromi rôznymi spôsobmi – inline (vo vnútri značiek), interné ( v tom istom súbore HTML pomocou prvku
  

  Princ Andrey sa počas jazdy lesom niekoľkokrát obzrel na tento dub. Pod dubom boli kvety a tráva, ale on stále stál uprostred nich, zachmúrený, nehybný, škaredý a tvrdohlavý.
  

  výsledok:

  Princ Andrey sa počas jazdy lesom niekoľkokrát obzrel na tento dub. Pod dubom boli kvety a tráva, ale on stále stál uprostred nich, zachmúrený, nehybný, škaredý a tvrdohlavý.

  Teraz môžete ľahko urobte na svojich html stránkach červenú čiaru... Dobudúcna!

  Pri čítaní akejkoľvek knihy, novín, časopisu a vlastne akéhokoľvek normálneho textu ste narazili na veľa odsekov a prvý riadok každého z nich obsahuje malú zarážku. V tomto článku vám ukážem najlepšiu možnosť. nastavenie odsadenia odsekov cez CSS.

  Samozrejme, s pomocou je možné vložiť ľubovoľný počet medzier, čím sa zvolí potrebné odsadenie, ale určite chápete, že táto metóda, mierne povedané, je nepohodlná. A riešenie tohto problému je veľmi jednoduché.

  To by ste už mali vedieť v Html pomocou značky sa vytvorí odsek<p>. Preto by mal byť každý odsek vo svojej vlastnej značke.<p>. A pre odsadenie prvého riadku každého odseku stačí pripojiť takéto CSS kód:

  P (
  zarážka textu: 10px;
  }

  V tomto príklade odsadíme 10 pixelov... S touto hodnotou sa môžete pohrať a nájsť tú najlepšiu pre váš web.

  Týmto jednoduchým spôsobom môžete odsadenie prvých riadkov ktoréhokoľvek odseku v texte na stránke.

  Ak máte ešte nejaké otázky alebo máte túžbu komentovať tento článok, môžete svoj komentár zanechať v dolnej časti stránky.

  Komentáre (9):

  31.05.2013 13:10:03

  Dobrý deň, Michael, pomôžte mi vyriešiť problém s nasledujúcim kódom css: .bam (border: 1px plná čierna; border-radius: 8px; margin-bottom: 4%; text-align: left; width: 84%;) .bam .author (farba pozadia: biela; okraj-dole: 1 pixel úplne čierny; polomer-okraj-vpravo-nahor: 8px; polomer-nahor-nahor: 8px; váha-písma: tučné; odsadenie: 4px;) .bam .text (farba pozadia: WhiteSmoke; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding: 4px;) Je potrebné, aby sa text vo vnútri ".bam .text" zalomil do iného riadok, ak sa nezmestí na jeden riadok. Ale z nejakého dôvodu sa neprenáša, ale plazí sa z bloku. Prosím, pomôžte vyriešiť tento problém.

  Odpovedať

  06.06.2013 22:42:20

  Dobrý deň, Michail, neviete náhodou, ako nájsť východisko z nasledujúcej situácie: je blok a v ňom je ďalší blok a v tomto bloku je text napísaný (dĺžka textu nie je vopred známe). Ako teda dosiahnete, aby výška nadradeného bloku závisela od výšky bloku v ňom (s textom)? A potom z nejakého dôvodu zistím, že výška rodičovského bloku je menšia ako výška vnútorného.

  Odpovedať

  Admin 06.06.2013 23:32:40

  Všetky vonkajšie jednotky sú natiahnuté podľa rozmerov vnútorných jednotiek. Toto nie je potrebné robiť, malo by to byť už predvolene.

  Odpovedať

  07.06.2013 11:11:09

  a pozrite sa: http://progbase.ru/about.php

  Odpovedať

  Admin 07.06.2013 21:54:37

  Musí sa použiť

  - umiestnite tento blok na rôzne miesta a uvidíte, čo sa zmení. Keď je všetko v poriadku, nechajte to tam.

  Odpovedať

  13.09.2013 21:39:34

  Ahoj! Prosím, pomôžte mi urobiť zarážky a iné štýly textu v okne tohto popisu pri umiestnení kurzora myši. Niečo nefunguje a to je všetko. Vopred ďakujem. výzva a ďalej v texte