Od vynálezu hypertextového značkovacího jazyka, HTML, se koncepty rozvržení a rozvržení webových dokumentů dramaticky změnily. Díky téměř úplné podpoře populárních prohlížečů pro kaskádové standardy šablon stylů CSS a CSS2 je možné ovlivnit téměř jakýkoli aspekt vizuální prezentace dokumentu. Můžete například vytvořit barevné pozadí odkazu vyplněné nějakým obrázkem a také se měnit v závislosti na akcích uživatele.
Nezbytné
- - schopnost upravovat text dokumentu nebo text šablon stylů dokumentu;
- - textový editor, který umožňuje uložit dokument v původním kódování.
Instrukce
Krok 1
Vytvořte pozadí odkazu rovnoměrně vyplněné náhodnou barvou přidáním informací o vloženém stylu do prvku A. Přidejte styl k atributům prvku A odpovídajícímu odkazu, jehož pozadí chcete změnit. V obsahu atributu stylu umístěte vlastnost CSS barvy pozadí s danou hodnotou, což je správný identifikátor barvy pozadí. Může to například vypadat takto:
text odkazu
Krok 2
Definujte pozadí odkazu v externí nebo vložené šabloně stylů v dokumentu. V příslušné šabloně stylů přidejte sadu pravidel řešených selektorem přijatelné úrovně specificity. V sadě pravidel zadejte vlastnost barva pozadí stejným způsobem jako v předchozím kroku. Vyberte specificitu selektoru na základě kaskádových pravidel CSS2 a požadovaného rozsahu. Pokud tedy potřebujete nastavit barvu pouze jednoho odkazu, má smysl použít selektor ID, pokud existuje několik takových odkazů, je lepší použít selektor atributů na základě hodnoty třídy.
Chcete-li například nastavit zelené pozadí pro konkrétní odkaz v dokumentu, můžete do šablony stylů přidat sadu pravidel:
# ID_GREEN
{
barva pozadí: # 00FF00;
}
Měli byste také nastavit atribut ID prvku A odpovídající požadovanému odkazu na ID_GREEN:
text odkazu
Krok 3
Vyplňte pozadí odkazu obrázkem. Postupujte podle metod popsaných v krocích 1 a 2, ale místo vlastnosti barva pozadí CSS použijte obrázek pozadí. Například:
text odkazu
V případě potřeby přidejte vlastnost opakování pozadí do sady pravidel CSS, abyste definovali možnosti duplikování obrazu pozadí vodorovně a svisle.
Krok 4
Proveďte změnu pozadí odkazu, když na něj umístíte ukazatel myši nebo když se přesune fokus. Přidejte sady pravidel do externí nebo vložené šablony stylů dokumentu, které definují pozadí odkazu nebo skupiny odkazů v různých stavech. Používejte selektory ID a atributů ve spojení s dynamickými pseudotřídami: hover,: active a: focus. Například, aby pozadí odkazu s hodnotou atributu ID ID_DYNAMIC_BACKGROUND bylo červené v neaktivním stavu a zelené ve stavu, kdy je pod kurzorem myši, musí být do šablony stylů přidány následující sady pravidel:
# ID_DYNAMIC_BACKGROUND
{
barva pozadí: # FF0000;
}
A # ID_DYNAMIC_BACKGROUND: najeďte myší
{
barva pozadí: # 00FF00;
}
Stejným způsobem můžete vytvořit pozadí s dynamicky se měnícím obrázkem.
