Barevná vodorovná čára html. Jak nakreslit čáru pomocí HTML a CSS
Při vytváření HTML stránky hraje styling zásadní roli. Zvláště když mluvíme o různých symbolech a dekorativním designu: tyto maličkosti pomáhají učinit „jazyk“ vaší stránky dostupnější a jasnější a také výrazně mění její vnímání a vzhled obecně. 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í:
- Dekorativní. Pomáhá přidat stránce atraktivitu.
- Dělení. Přispívá k efektivnímu oddělení informací různého významu.
- 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ě vodorovná čára je považována za nejdostupnější způsob implementace řady 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ě. Externí charakteristiky prvku můžete změnit pomocí dalších hodnot ve značce:
- 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 takhle. Pokud například potřebujeme délku 100 pixelů, nastavíme následující tag: hr width="100"
- zarovnání. Zarovnání je možné na levém nebo pravém okraji a také na střed. Tato vlastnost se projeví pouze v případě, že jste již nastavili parametr width, protože čáru po celé stránce 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.
- Šíř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".
- Barva. Je také nastaven jako nezávislý indikátor. Pro jeho změnu se používá atribut color v kombinaci s názvem barvy ve formě kódu nebo v angličtině. 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.
- 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.
Chcete-li zdůraznit některé z nejdůležitějších prvků webu, nebylo by na škodu použít všechny druhy CSS stylů a vlastností, které jsou k tomu poskytovány. S textem se samozřejmě nemůžete příliš trápit a zvýraznit ho například tučným písmem nebo kurzívou, změnit pozadí nebo kolem textu udělat rámeček. 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, konkrétně:
- okrajový vrchol– vodorovná čára umístěná nad textem;
- hranice-pravá- 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
Pomocí vlastností CSS můžete upravit všechny potřebné hodnoty ú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 úprav HTML kódu a přidejte vlastnosti CSS. Ukázku můžete vidět níže.
Napsáním těchto vlastností budete schopni zdůraznit důležitost prezentovaného materiálu, odstavce nebo nadpisu?
Stručné vysvětlení příkazů
- šířka– délka čáry;
- pevný- Nepřerušovaná čá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. Lze jej použít kdekoli v html kódu, mezi tagy
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.
Úkol
Udělejte na stránce vodorovnou čáru.
Řešení
Vodorovné čáry jsou dobré 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 odkazuje na prvky bloku, řádek tedy vždy začíná na novém řádku 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 aplikace Internet Explorer používají vlastnost color pro barvu čáry, zatímco jiné 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 tohoto příkladu je znázorněn na Obr. 1.
Rýže. 1. Barevná vodorovná čára
Vodorovné čáry se v zásadě používají k ozdobení HTML stránek webu, což jim dodává atraktivnější vzhled. Mohou však také vizuálně ohraničit informace sousedních sekcí, což zvyšuje pohodlí čtenářů při jejich studiu. Obecně nakreslete vodorovné čáry tam, kde potřebujete, to je vše.
Jak nakreslit vodorovnou čáru?
Pro kreslení vodorovných čar v HTML existuje speciální značka.
. A on je bloková značka, to znamená, že vytváří konce řádků před a za sebou, takže řádek je vždy získán na samostatném řádku. V souladu s tím může být specifikován pouze uvnitř značek, které mohou obsahovat například prvky bloku nebo
. Ale on sám
nemůže mít obsah, protože jednoduše nemá uzavírací značku, tj. je prázdný .Příklad kreslení vodorovných čar v HTML
Nakreslete vodorovné čáry
Odstavec.
Odstavec.
Odstavec.
Výsledek v prohlížeči
Odstavec.
Odstavec.
Odstavec.
Jak můžete vidět, čáry jsou velmi tenké, nepopsatelné a nakreslené na plnou dostupnou šířku, takže se nyní naučíme, jak je změnit, aby vypadaly atraktivněji.
Jak změnit barvu, tloušťku a šířku vodorovných čar?
Ve starších verzích HTML značka
existovaly speciální atributy, pomocí kterých jste mohli změnit barvu, tloušťku a šířku vodorovných čar. Jedná se o barvu, velikost a šířku. Ale v novějších verzích byly zavrženy ve prospěch kaskádových stylů (CSS), takže, uhodli jste, znovu použijeme náš oblíbený atribut stylu. Obecná syntaxe je:
style="background:color" >- barva čáry (nebo spíše jejího pozadí).
style="height:size" >- tloušťka čáry.
style="width:size" >- šířka čáry.
styl= "pozadí:barva; výška:velikost; šířka:velikost"> - a můžete zadat všechny parametry najednou, jen nezapomeňte na středník (;).Barvu lze specifikovat svým názvem v angličtině nebo HEX kódem barvy, kterému předchází znak libry (#). No, už o tom víte z lekce změnit barvu textu a pozadí.
Promluvme si ale o změně velikosti podrobněji. Jak si pamatujete z návod na změnu fontů, v CSS je asi deset jednotek, ale šířka čáry lze zadat pouze v pixelech (px) a procentech (%) a tloušťka obecně pouze v pixelech. Pokud zadáte jiné měrné jednotky, nebude to chyba, ale prohlížeče je budou jednoduše ignorovat.
Pokud zadáte rozměry v pixelech, bude tloušťka a šířka čáry záviset na rozlišení monitoru, na kterém je vaše stránka prohlížena (čím vyšší rozlišení obrazovky, tím tenčí a užší čára).
Jak jsem řekl, pouze šířku řádku lze zadat v procentech. Procentuální velikosti vždy závisí na velikosti nadřazeného prvku-kontejneru, ve kterém je značka umístěna, a vypočítávají se na základě
. V tomto případě jsou rozměry rodiče brány jako 100 %. Například pokud umístíme značku
style="width:50%"> uvnitř prvku, pak bez ohledu na to, jak změníme velikost okna prohlížeče nebo rozlišení monitoru, šířka čáry bude vždy poloviční než šířka bloku.Příklad změny barvy, tloušťky a šířky vodorovných čar.
Změňte barvu, tloušťku a šířku vodorovných čar.
Výsledek v prohlížeči
Změna polohy vodorovných čar
Když změníte šířku vodorovné čáry, můžete jasně vidět, že ji prohlížeče vždy vycentrují. Pokud chcete změnit jeho polohu, stačí použít dovnitř
zarovnat atribut s následujícími hodnotami:
- centrum- čára je vystředěná (výchozí hodnota).
- vlevo, odjet- přitisknuto k levému okraji.
- že jo- přitisknuto k pravému okraji.
Příklad zarovnání vodorovných čar.
Změňte polohu vodorovných čar.
Výsledek v prohlížeči
Jak odstranit okraj kolem čáry?
Podívejte se na úplně první příklad tohoto tutoriálu. Jakou barvu mají podle vás tyto linky? A tady je ten špatný. Jsou průhledné, stejně jako všechny prvky stránky, které nemají specifikovanou barvu pozadí! nevěříš? Pak se podívejte na příklad, kde jsme změnili barvu čar. Hned u prvního jsme barvu nenastavili, ale jen zvětšili její velikost a není tato čára průhledná? Aby!
Teď to vysvětlím. Ve výchozím nastavení prohlížeče kreslí kolem okrajových čar, což vytváří 3D efekt. Když tedy nezvětšíme tloušťku vodorovných čar, prohlížeče nám zobrazí pouze tyto snímky, protože tloušťka čáry samotné je 0px.
Abychom odstranili ohraničení kolem čáry, které často jen kazí vzhled, znovu použijeme atribut style. A píše se to takto:
Domácí práce.
- Vytvořte nadpisy článků, sekcí a podsekcí. Umístěte je všechny do středu.
- Nastavte celou stránku na Arial a nadpisy na Courier.
- Nechte velikost písma pro celou stránku 85 % výchozí velikosti prohlížeče. A nadpisy mají 145 %, 125 % a 110 % velikosti písma na stránce.
- Pod první nadpis napište odstavec, pod druhý dlouhý citát a pod třetí báseň. A nechte báseň vycentrovat na stránku.
- Zvýrazněte tři slova v citátu tučně.
- Pod nadpisem článku nakreslete tři pixely silnou červenou vodorovnou čáru přes celou šířku stránky.
- V horní a dolní části básně nakreslete černé čáry tlusté jeden pixel. Nechte šířku horního řádku přibližně rovna šířce verše a spodní řádek - polovinu.
- Odstraňte z řádků nepotřebné rámečky.
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.Snad nejznámějším způsobem, jak vytvořit čáru ve Wordu, je 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) Když v editoru Word několikrát stisknete klávesu „-“ (pomlčka), 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 a také klávesu Shift (doleva nebo doprava, 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.
Vodorovná tenká, tlustá, tečkovaná a dvojitá čára 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í nabídce aplikace Word klikněte na:
- 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
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ávesnici na obrazovce potřebujete 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.
