Dekorativní prvky CSS podtržení

Technologie stylových listů provádí při vytváření stránek HTML dvě funkce. Za prvé s jeho pomocí vzniká poloha jednotlivých prvků místa. Zadruhé dělá bloky vizuálně atraktivní pro uživatele. Druhá funkce je implementována různými způsoby. Jeden z nich je podtržen. CSS poskytuje tento atribut text-

Specifikace záznamu atributu

Využijte výhody nemovitosti text-dekorace jednoduše. Stačí napsat následující řádek prvku v kódu souboru stylů:

text-dekorace: attribute_value-

Namísto "attribute_value"Specifikace CSS nabízí řadu možností:

• podtrhnout - linka je umístěna přesně pod textem;
• nadměrné - linka prochází z horní části textu;
• žádný - odstranění všech dekorativních efektů;
• dědictví - přijímá hodnotu rodičovského prvku.

Výše uvedené nejsou všechny možné formy záznamu, protože tento atribut určuje nejen podtržení CSS, ale také další efekty, například "blikání" textu nebo jeho prokládání.

Příklady návrhů hypertextových odkazů

Začátečníci v návrhu webových stránek a programování mají otázku: proč dělat dolní řádek textu? Na počátku éry internetových technologií tento způsob zvýraznění ukázal uživateli, že před ním je hypertextový odkaz - text, který bude klepnut na novou stránku.

Ve výchozím nastavení mají hypertextové odkazy sadu vlastností podtrhnout. V praxi vzniká problém odstranit řádek z neaktivních prvků a zviditelnit jej, když uživatel posune ukazatel myši. Zde je příklad kód, který vypíná podtržené odkazy CSS:

a {text-decoration: none;}

Následující záznam se používá pro aktivní odkazy:

a: vznášet se {text-decoration: underline-}

Dekorativní podtržení pro pokročilé

Standardní atribut text-dekorace má několik omezení:

• Barva čáry se neliší od barvy textu odkazu, není možné rozlišit jejich "barvení";
• Jako podtržítka se používá pouze pevná čára. CSS neznamená použití jiných stylů nápisu.

Zvláštní techniky však pomáhají obejít klasický návrh textu. V prvním případě se použije další značka pro zadání hypertextového odkazu <span.

Například:

hypertextové odkazy

a>.p>

Výsledkem je, že na stránce bude slovo hypertextový odkaz zapsáno modře a barva čáry bude červená.

Další pokročilý způsob, který vám umožňuje implementovat podtržení CSS, je hraniční dno. Níže uvedený příklad vysvětluje jeho použití:

{border-bottom: 1px solid red-}

Výsledek bude stejný jako v předchozím příkladu. Ale tato metoda má významnou výhodu. Kromě změny barvy čáry (nyní nastavené na červenou - červená), je možné změnit způsob jeho kreslení:

• bodkované - Podtrhuje bodka;
• přerušil - linka se skládá z tahů;
• dvakrát Vytvoří dvojitý řádek.

Takže atribut hraniční-dolů více funkční. Kromě zobrazení ozdobné čáry pod textem vám umožňuje přizpůsobit její vzhled.