Při tvorbě HTML stránky design hraje významnou roli. Zvláště když mluvíme o různých symbolech a dekorativním designu: tyto drobnosti pomáhají učinit „jazyk“ vaší stránky dostupnější a přehlednější, kromě toho výrazně mění její vnímání a vzhled jako celku. Jedním z nejdůležitějších designových prvků je vodorovná čára a dále se podrobněji naučíme, jak s ní pracovat a jak udělat vodorovnou čáru v html.

Co je vodorovná čára a proč je potřeba

Vodorovná čára v html je prvek návrhu stránky, který plní řadu funkcí:

1. Dekorativní. Pomáhá přidat stránce atraktivitu.
2. Dělení. Přispívá k efektivnímu oddělení informací různého významu.
3. Zdůraznění nebo zdůraznění. Upozorní návštěvníky stránky na potřebné a nejdůležitější informace.

Právě horizontální čára je považována za nejvíce přístupným způsobem implementovat řadu funkcí. Je velmi jednoduché vytvořit a navenek to vypadá velmi výnosně. Jednoduchými změnami v html kódu můžete ovládat:

• délka;
• šířka;
• barevné charakteristiky;
• zarovnání na jeden nebo druhý okraj.

Stojí za zmínku, že vodorovná čára odkazuje na blokové prvky. To znamená, že zabírá nový řádek na stránce a text následující za ním půjde níže.

Vytvoření vodorovné čáry v HTML

Čáru můžete nastavit pomocí jednoduché značky - hr v trojúhelníkových závorkách. Je zkratkou pro „Horizontal Rule“ a nastavuje klasické externí parametry. Od mnoha jiných se liší tím, že nepotřebuje uzavírací značku a je schopen existovat samostatně. Změna vnější charakteristiky prvek lze provést pomocí dalších hodnot ve značce:

1. Délka. Pokud nechcete, aby délka řádku pokrývala celou stránku, můžete nastavit požadovanou velikost v pixelech nebo procentech. To se provádí pomocí dodatečného slova "width" ve značce a číselného ukazatele délky uvedené za znakem "=" v uvozovkách.

Vypadá to takto. Pokud například potřebujeme délku 100 pixelů, nastavíme následující tag: hr width="100"

1. zarovnání. Zarovnání je možné na levém nebo pravém okraji a také na střed. Tato vlastnost funguje pouze pokud jste již nastavili parametr šířky, protože celostránkový řádek nelze zarovnat. Pro zarovnání nastavíme další atribut v tagu "align" a přidáme k němu směr: střed - pro střed, vlevo - pro levé a pravé - pro pravé zarovnání.

Hotová značka v tomto případě bude vypadat takto. Pokud například potřebujeme nastavit zarovnání na střed pro vodorovnou čáru dlouhou 150 pixelů, bude hotový tag vypadat takto: hr align="center" width="150".

Všimněte si, že "align", metrika pro zarovnání, je nastavena na 1, i když je atribut závislý na metrice šířky.

1. Šířka. Volitelně můžete také určit šířku a vytvořit tučné nebo tenké podtržení. Toto kritérium na ničem nezávisí a může být použito jako nezávislé bez udání délky nebo zarovnání. K tomu používáme atribut size na tagu a číselnou hodnotu rovnou požadované šířce v pixelech. Číslo je uvedeno v uvozovkách za atributem size a symbolem "=".

Pokud tedy chceme vytvořit čáru o šířce 15 pixelů, musíme vytvořit následující značku: hr size="15".

1. Barva. Je také nastaven jako nezávislý indikátor. Pro její změnu použijte atribut color v kombinaci s názvem barvy ve formě kódu nebo on anglický jazyk. Barva je uvedena v uvozovkách za symbolem "=".

Tag pro standardní bílou čáru lze tedy napsat dvěma způsoby: hr color="#FFFFFF" nebo hr color="white"

Černou barvu lze vytvořit pomocí kódu #000000.

1. Dát pryč stín. Pokud potřebujete prvek, který neobsahuje stín, pak by měl být ve značce použit atribut noshade. Může být použit samostatně nebo v kombinaci s dalšími prvky. Značka pro standardní řádek, který ji používá, bude vypadat takto: hr noshade

Vytvořte vodorovnou čáru s videem

A pokud chcete získat informace ve více vizuální podobě, pak se podívejte na následující video, které podrobně popisuje možnosti práce s vodorovnou čarou.

Po určení požadovaných rozměrů vodorovné čáry můžete stránky webu uspořádat tak, aby informace byly strukturované a vizuálně dobře tvarované. Návštěvníkům tak usnadníte vnímat prezentované informace a odlišit váš web od ostatních.

Úkol

Udělejte na stránce vodorovnou čáru.

Řešení

vodorovné čáry dobré použít pro oddělení jednoho bloku textu od druhého. Malý text s vodorovnými čarami nad a pod přitahuje čtenářovu pozornost více než normální text.

S visačkou

---

můžete nakreslit vodorovnou čáru, jejíž vzhled závisí na použitých atributech a také na prohlížeči. Značka je blokový prvek, takže řádek vždy začíná nový řádek a za ním se všechny prvky zobrazí na dalším řádku. S mnoha atributy značek

---

řádek vytvořený prostřednictvím tohoto tagu lze snadno spravovat. Pokud navíc spojíte sílu stylů, pak se přidání řádku do dokumentu změní v jednoduchý úkol.

Výchozí řádek

---

zobrazeny šedě as efektem hlasitosti. Tento typ čáry se ne vždy hodí k designu webu, takže touha vývojářů změnit barvu a další parametry čáry prostřednictvím stylů je pochopitelná. Prohlížeče však mají k tomuto problému nejednoznačné přístupy, kvůli kterým budete muset používat několik vlastností stylu najednou. Zejména starší verze internetový prohlížeč Průzkumník používá vlastnost color pro barvu čáry a ostatní prohlížeče používají barvu pozadí . Ale to není vše, nezapomeňte zadat tloušťku čáry (vlastnost výška) jinou než nula a odstranit rámeček kolem čáry nastavením vlastnosti border na hodnotu none. Spojením všech vlastností pro selektor hr získáme univerzální řešení pro oblíbené prohlížeče (příklad 1).

Příklad 1. Vodorovná čára

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Textový řetězec

---

Výsledek tento příklad znázorněno na Obr. jeden.

Rýže. 1. Barevná vodorovná čára

Zdravím všechny čtenáře. Čas od času se mistři potýkají s problémem, jak vytvořit vodorovnou nebo svislou čáru pomocí HTML nebo pomocí pomocí CSS. O tom vám dnes povím.

Řádky v CSS

Existuje několik způsobů, jak vytvořit čáry. Jedním z těchto způsobů je Použití CSS. Přesněji s pomocí Borderu. Podívejme se na příklad.

A tady je výsledek.

Horizontální a svislá čára s css.

Čáry v CSS lze kreslit pomocí operátoru Border. Pokud potřebujete pouze obdélník s pevnou šířkou okraje, můžete jednoduše použít tento operátor a zadat mu hodnotu. Například border:5px solid #000000; znamená, že okraje rámečku mají šířku 5 pixelů v černé barvě.

Pokud však potřebujete nastavit ne všechny hranice, ale pouze některé, musíte přesně určit, které hranice jsou potřeba a jakou hodnotu bude mít každá z nich. Toto jsou operátoři:

• border-top - nastavuje hodnotu horního okraje
• border-bottom - nastavuje hodnotu spodního okraje
• border-left - nastavuje hodnotu levého okraje
• border-right - nastaví hodnotu pravého okraje.

Svislá a vodorovná čára v HTML

Můžete také vytvářet řádky v samotném HTML. K tomu můžete použít značku hr.

V tomto případě bude nakreslena vodorovná čára, jeden pixel na výšku a plnou šířku.

Ale tento tag, můžete nastavit nějaké hodnoty.

• Šířka– nastavuje hodnotu šířky čáry.
• barva- nastaví barvu čáry.
• Zarovnat- nastaví zarovnání vlevo, na střed, vpravo
• velikost– nastavuje hodnotu tloušťky čáry v pixelech.

Pomocí značky hr můžete také nastavit svislou čáru. Ale v tomto případě se budete muset znovu uchýlit ke stylům.

V tomto případě bude nakreslena svislá čára sto pixelů vysoká, jeden pixel tlustá a pět pixelů odsazená.

Závěr.

Nyní víte, jak můžete nastavit svislou a vodorovnou čáru. Linky lze nastavit jako na běžných stránkách, s pomocí HTML a nastavit na webu, který používá CMS, například WordPress, ale v tomto případě budete muset přepnout do režimu HTML.

No, pokud máte nějaké další otázky, zeptejte se jich v komentářích.

Zdálo by se, proč by mohly být zapotřebí čtyři metody? Téměř každý člověk totiž používá jednu metodu, na kterou je zvyklý. Například jsem několikrát stiskl Shift a pomlčkovou klávesu a takhle dopadla vodorovná čára.

Ale co když to má za následek tečkovanou čáru, ale vy potřebujete plnou?
- S největší pravděpodobností je klávesa Shift na klávesnici vadná. Zde je několik dalších způsobů, jak pomoci.

3.
4.
5.

Možná nejvíc obvyklým způsobem vytvořit řádek ve Wordu znamená použít několik kláves na klávesnici.

I Tenká, tlustá, dvojitá, tečkovaná čára pomocí klávesnice

Níže je nákres klávesnice s anglickým rozložením, ale bez ruského rozložení, ale to nevadí, protože nás zajímají pouze tři klávesy: Shift, pomlčka a Enter.

Rýže. 1. Tři klávesy na klávesnici: Shift, pomlčka a Enter pro souvislou vodorovnou čáru ve Wordu

Pomocí těchto tří kláves můžete ve Wordu nakreslit souvislou vodorovnou čáru: přerušovanou nebo plnou, tenkou nebo tlustou, dlouhou nebo krátkou.

1) Opakovaným stisknutím tlačítka „-“ (pomlčka). Word editor dostaneme tečkovanou čáru libovolné délky.

Dělat tenký dlouhý řádek na celou šířku stránky:

• Na klávesnici najdeme klávesu „pomlčka“ (vpravo od klávesy „nula“, v zeleném rámečku na obr. 1).
• Z nového (!) řádku ve Wordu několikrát stiskněte tuto klávesu: -
• A poté stiskněte klávesu "Enter" (). Několik vytištěných čárek se náhle změní na souvislou vodorovnou tenkou čáru přes celou šířku stránky.

2) Když současně stisknete Shift a "-" (pomlčka), NEVYtiskne se pomlčka, ale podtržítko _________. Můžete tak vytvořit souvislou čáru libovolné délky kdekoli v dokumentu.

Rýže. 2. Tenká a tlustá vodorovná čára ve Wordu

Nyní tiskneme tlustý vodorovná čára přes celou šířku stránky:

• Opět najdeme stejnou pomlčkovou klávesu, stejně jako Klávesa Shift(vlevo nebo vpravo, jak chcete). Stiskněte Shift, držte a nepouštějte.
• A nyní z nového (!) řádku klikněte několikrát na pomlčku (například 3-4krát) (bez uvolnění Shift): ___. Uvolněte Shift.
• Nyní stiskněte klávesu Enter. Uvidíte tlustou vodorovnou plnou čáru.

Shrňme si některé výsledky ve formě tabulky:

(Kliknutím zvětšíte) Řádky ve Wordu pomocí klávesnice

­­­­­­­­­­­­­­­­­­­­­

II Řádek ve Wordu pomocí tabulky

Vodorovnou čáru lze získat pomocí tabulky s jednou buňkou (1x1), ve které je obarven pouze horní nebo spodní okraj (bude vidět) a ostatní tři strany tabulky mají okraje nenabarvené (budou neviditelné) .

Umístíme kurzor na místo, kde má být řádek. V horní menu Klikněte na slovo:

• Vložka (1 na obr. 3),
• Tabulka (2 na obr. 3),
• Jedna buňka (3 na obr. 3).

Rýže. 3. Jak vložit tabulku 1x1 do Wordu (z jedné buňky)

Výsledkem je tabulka jedné velké buňky (1x1):

Zůstává v tabulce 1x1 na třech stranách, aby se odstranily okraje. Pro tohle

• přejděte na kartu "Domů" (1 na obr. 4),
• vedle "Písmo" najdeme "Odstavec" a ohraničení (2 na obr. 4),
• odstraňte všechna ohraničení kliknutím na „Bez ohraničení“ (3 na obr. 4),
• zvolte "Upper border" nebo "Lower border" (4 na obr. 4).

Rýže. 4. Jak odstranit výběr ohraničení v tabulce aplikace Word (učinit ohraničení neviditelnými)

To názorně ukazuji na videu (na konci článku).

Mimochodem, na Obr. 3 ukazuje, že existuje jednodušší způsob. Můžete umístit kurzor na začátek řádku ve Wordu a kliknout na "Horizontální čára" (5 na obr. 4):

III Čára ve Wordu kreslením

Vložit (1 na obr. 5) - Tvary (2 na obr. 5) je další způsob, jak získat vodorovnou čáru ve Wordu.

Chcete-li, aby byla čára přísně vodorovná, podržte stisknutou klávesu Shift a současně nakreslete čáru.

Rýže. 5. Jak nakreslit čáru ve Wordu

IV řádek ve Wordu pomocí klávesnice na obrazovce

Chcete-li najít klávesnici na obrazovce, do Vyhledávání zadáme frázi „klávesnice na obrazovce“, další podrobnosti pro Windows 7 a Windows 8.

Ve Windows 10 můžete také najít klávesnici na obrazovce zadáním „klávesnice na obrazovce“ do vyhledávacího pole.

Rýže. 6. Klávesnice na obrazovce

Vodorovnou čáru vytvoříme stejně jako v první verzi s běžnou klávesnicí. Na klávesnice na obrazovce budete potřebovat tři tlačítka: pomlčku, shift a enter.

1 Pomlčka a Enter

Z nového řádku ve Wordu klikněte několikrát na pomlčku (1 na obr. 6) a stiskněte Enter. Získáte tenkou vodorovnou čáru.

2 Shift, pomlčka a Enter

Z nového řádku ve Wordu klikněte nejprve na Shift (2 na obr. 6), poté na Dash (1 na obr. 6). Získejte podtržení. Opakujte tedy ještě 2x a poté stiskněte Enter. V důsledku toho uvidíme tlustou vodorovnou čáru.

Chcete-li zdůraznit některé z nejdůležitějších prvků webu, nebylo by na škodu použít všechny druhy a za předpokladu, že toto CSS styly a vlastnosti. Samozřejmě se nemůžete s textem obtěžovat a zvýraznit ho například tučně nebo kurzívou, změnit pozadí nebo vytvořte rámeček kolem textu. Ne vždy je ale jedna z uvedených metod vhodná. Řekněme, že máte text, který je potřeba oddělit kvůli specifikům jeho sémantického zatížení. Zde přicházejí na řadu vlastnosti HTML a CSS.

Jak udělat řádek v textu pomocí CSS

Abychom dosáhli svého cíle, musíme se obrátit soubor style.css, zapsáním do něj odpovídající vlastnosti okraj. To způsobí, že se nad, pod nebo na určité straně textu objeví řádek. Na druhé straně existuje několik vlastností odpovědných za zobrazení řádku, a to:

- okrajový vrchol– vodorovná čára umístěná nad textem;

- hranice vpravo- svislá čára umístěná napravo od textu;

- hranice-dole– vodorovná čára umístěná pod textem;

- ohraničení vlevo je svislá čára vlevo.

Jak udělat řádek v html

Použitím vlastnosti css všechny potřebné hodnoty můžete nastavit úpravou HTML kódu. Chcete-li to provést, přejděte do administrativní části webu. Vyberte jeden z publikovaných materiálů, přepněte textový editor do režimu úpravy kódu HTML a přidat vlastnosti CSS. Ukázku můžete vidět níže.

Stručné vysvětlení příkazů

- šířka– délka čáry;

- pevný- plná čára;

- tečkovaný- tečkovaná čára.

Pro hlubší pochopení stylů doporučuji přečíst toto.

Musíte pochopit, že v procesu provádění změn v kódu webu jsou vlastnosti, které určují typ čáry, její tloušťku a barvu, uvedeny s mezerou.

Tato metoda má několik výhod:

Široká škála možností, se kterými můžete vytvořit téměř jakoukoli linku.

Snadné provádění všech potřebných změn přímo v kódu HTML. To značně zjednodušuje úkol pro nezkušené tvůrce stránek.

Jak udělat rovnou vodorovnou čáru pomocí HTML tagu

---

První věc, na kterou bych vás rád upozornil, je, že tento tag přes všechny jemnosti a principy html nemá uzavírací tag. Dá se použít kdekoliv html kód, mezi značkami a.

Atributy značek

---

- šířka- odpovídá za délku čáry. Lze jej zadat v procentech i v pixelech.

- velikost– tloušťka čáry. Udává se v pixelech.

- barva– určuje barvu čáry.

- zarovnat– atribut zodpovědný za zarovnání čar. Obratem se na něj vztahuje tým.