Technológia štýlov má dve funkciepri vytváraní HTML stránok. Najprv sa s pomocou tejto pozície vytvorí poloha jednotlivých prvkov lokality. Po druhé, robí bloky vizuálne príťažlivými pre používateľa. Druhá funkcia je implementovaná rôznymi spôsobmi. Jeden z nich zdôrazňuje. CSS poskytuje atribút. text-výzdoba.
Špecifikácia záznamu atribútu
Využite nehnuteľnosť text-výzdoba spravodlivý. Stačí, keď do kódu šablóny štýlov napíšete nasledujúci riadok:
text-dekorácia: attribute_value;
Namiesto "ATTRIBUTE_VALUEŠpecifikácia CSS ponúka niekoľko možností:
- zdôrazniť - riadok je umiestnený presne pod textom;
- overline - riadok beží nad textom;
- nikto - odstránenie všetkých dekoratívnych efektov;
- dedí - preberá hodnotu nadradeného prvku.
Nie všetky možné formy záznamu sú uvedené vyššie, pretože tento atribút definuje nielen podčiarknutie CSS, ale aj ďalšie účinky, napríklad „blikanie“ textu alebo jeho prečiarknutie.
Príklady návrhu hypertextového odkazu
Začiatočníci vo webdizajne a programovanívyvstáva otázka: prečo urobiť spodný riadok textu? Na začiatku éry internetových technológií táto metóda zvýraznenia indikovala používateľovi, že pred ním je hypertextový odkaz - text, ktorý po kliknutí prejde na novú stránku.
V predvolenom nastavení majú hypertextové odkazy vlastnosť zdôrazniť, V praxi vyvstáva úloha odstrániť čiaru z neaktívnych prvkov a zviditeľniť ju, keď sa používateľ pohybuje kurzorom myši. Tu je príklad kódu, ktorý zakazuje podčiarknutie odkazu CSS:
a {text-decoration: none;}
Pre aktívne odkazy sa používa nasledujúca položka:
a: hover {text-decoration: underline;}
Dekoratívne podčiarknutie pre pokročilých
Štandardný atribút text-výzdoba má niekoľko obmedzení:
- farba riadku sa nelíši od farby textu odkazu, nemôžete rozlišovať medzi ich „sfarbením“;
- ako podčiarknutie sa používa iba plná čiara. CSS neznamená použitie iných štýlov kresby.
Ale špeciálne techniky pomáhajú obísť klasický dizajn textu. V prvom prípade ďalšia značka <rozpätie>.
Napríklad:
hypertextové odkazy
a>. n>
Výsledkom bude slovo hypertextového odkazu na stránke napísané modrou farbou a farba riadka bude červená.
Ďalším pokročilým spôsobom, ktorý umožňuje implementovať podčiarknutie CSS, - hraničné dno... Nasledujúci príklad vysvetľuje jeho použitie:
a {border-bottom: 1px solid red;}
Výsledok bude rovnaký ako v predchádzajúcom príklade. Ale táto metóda má dôležitú výhodu. Okrem zmeny farby čiary (teraz nastavenej na červenú - červená), je možné transformovať spôsob, akým je nakreslený:
- bodkovaný - vytvorí bodkované podčiarknutie;
- prerušovaná - čiara sa skladá z ťahov;
- dvojitý - nakreslí dvojitú čiaru.
Takže prívlastok hranica-dole funkčnejšie. Okrem zobrazenia ozdobnej čiary pod textom umožňuje prispôsobiť aj jej vzhľad.
