Přejít na hlavní obsah

Jak přidat vodorovnou čáru na web pouze pomocí CSS

Horizontální linie - je to snadný a efektivní způsob, jak rozdělit obsah na webové stránce. Může být použit k vytvoření oddělovače mezi bloky textu, k zvýraznění záhlaví nebo k přidání dekorativních prvků na stránku. Pomocí CSS lze ovládat styl, barvu a velikost vodorovné čáry tak, aby odpovídala designu vaší webové stránky.

Přidání vodorovné čáry pomocí CSS je velmi snadné. Stačí jen definovat styl pro prvek, kterému chcete přidat čáru. K tomu můžete použít vlastnost border-bottom k vytvoření vodorovné čáry pod prvkem nebo vlastnost border-top k vytvoření nad prvkem.

Příklad kódu pro vytvoření vodorovné čáry:

.element

Ve výše uvedeném příkladu .element je volič vašeho prvku, ke kterému chcete přidat vodorovnou čáru. border-bottom nastavuje styl čáry a 1px solid #000 určuje její tloušťku (1 pixel), Typ (plná čára) a barvu (černá).

Poznámka: Pokud chcete změnit barvu čáry nebo další atributy, můžete použít jiné vlastnosti CSS, jako je border-color a border-width .

Snadný způsob přidání vodorovné čáry do CSS

  1. Vytvořte novou prázdnou položku v HTML, například nebo
    . Pokud chcete, můžete na něj použít třídu nebo identifikátor pro další použití v CSS.
  2. Otevřete svůj soubor stylů CSS a vyberte položku, kterou jste vytvořili v předchozím kroku.
  3. Přidejte vlastnost "border-top" nebo "border-bottom" do CSS a vytvořte vodorovnou čáru. Například:
  4. Vlastnosti vodorovné čáry, jako je tloušťka, barva a styl, můžete upravit pomocí příslušných hodnot. Můžete například změnit tloušťku čáry výměnou " 1px "za jinou hodnotu nebo změnit barvu výměnou" #000 " za požadovanou barvu.

Použití vodorovné čáry v CSS je snadný způsob, jak zlepšit vzhled vaší webové stránky a poskytnout jí strukturovanější vzhled. Pomocí této jednoduché metody rozdělte obsah nebo zvýrazněte důležité položky na stránce!

Použití hranice k vytvoření vodorovné čáry

Pokud potřebujete k projektu přidat vodorovnou čáru, můžete využít vlastnost CSS border-bottom . Tato vlastnost vám umožňuje vytvořit čáru pod libovolnou položkou na vaší webové stránce.

Chcete-li začít, vyberte položku, ke které chcete přidat vodorovnou čáru. Pokud například chcete přidat čáru pod nadpis, můžete použít značku :

Заголовок

Poté, v souboru CSS nebo uvnitř značky uvnitř značky, můžete přidat následující kód:

V tomto příkladu nastavíme styl ohraničení pro prvek, kde 1px udává šířku čáry, solid udává styl čáry (jednobarevná čára) a black označuje barvu čáry.

Pokud chcete přidat čáru k jiné položce, jednoduše nahraďte h1 příslušným voličem prvku v kódu CSS.

Také můžete změnit vlastnosti ohraničení a vytvořit čáru podle vašich představ. Můžete například změnit šířku pomocí vlastnosti border-width nebo barvu pomocí vlastnosti border-color .

Tímto způsobem můžete použít vlastnost ohraničení k vytvoření vodorovných čar na vašem webu a přidat je k prvkům, které musíte zvýraznit nebo zviditelnit.