Od czasu wynalezienia hipertekstowego języka znaczników HTML, koncepcje układu i układu dokumentów internetowych zmieniły się dramatycznie. Dzięki niemal całkowitemu wsparciu popularnych przeglądarek dla standardów kaskadowych arkuszy stylów CSS i CSS2, możliwe stało się wpływanie na prawie każdy aspekt wizualnej prezentacji dokumentu. Na przykład możesz sprawić, że tło linku będzie kolorowe, wypełnione jakimś obrazem, a także zmieniające się w zależności od działań użytkownika.
Niezbędny
- - możliwość edycji tekstu dokumentu lub tekstu arkuszy stylów dokumentu;
- - edytor tekstu, który pozwala na zapisanie dokumentu w oryginalnym kodowaniu.
Instrukcje
Krok 1
Spraw, aby tło łącza było jednolicie wypełnione losowym kolorem, dodając informacje o stylu wbudowanym do elementu A. Dodaj styl do atrybutów elementu A odpowiadającego łączu, którego tło chcesz zmienić. W treści atrybutu style umieść właściwość CSS background-color o podanej wartości, która jest poprawnym identyfikatorem koloru tła. Na przykład może to wyglądać tak:
tekst linku
Krok 2
Zdefiniuj tło łącza w zewnętrznym lub osadzonym arkuszu stylów w dokumencie. W odpowiednim arkuszu stylów dodaj zestaw reguł, do których odnosi się selektor o akceptowalnym poziomie szczegółowości. W zestawie reguł wprowadź właściwość background-color w taki sam sposób, jak w poprzednim kroku. Wybierz specyfikę selektora w oparciu o reguły kaskadowe CSS2 i żądany zakres. Tak więc, jeśli potrzebujesz ustawić kolor tylko jednego linku, sensowne jest użycie selektora identyfikatora, jeśli jest kilka takich linków, lepiej użyć selektora atrybutu opartego na wartości klasy.
Na przykład, aby ustawić zielone tło dla określonego łącza w dokumencie, możesz dodać zestaw reguł do arkusza stylów:
# ID_ZIELONY
{
kolor tła: # 00FF00;
}
Powinieneś również ustawić atrybut ID elementu A odpowiadającego żądanemu linkowi na ID_GREEN:
tekst linku
Krok 3
Wypełnij tło linku obrazem. Postępuj zgodnie z metodami opisanymi w krokach pierwszym i drugim, ale zamiast właściwości CSS background-color użyj tła-image. Na przykład:
tekst linku
W razie potrzeby dodaj właściwość background-repeat do zestawu reguł CSS, aby zdefiniować opcje powielania obrazu tła w poziomie i pionie.
Krok 4
Zmień tło łącza, gdy najedziesz na nie kursorem lub gdy fokus się przesunie. Dodaj zestawy reguł do zewnętrznego lub osadzonego arkusza stylów dokumentu, które definiują tło łącza lub grupy łączy w różnych stanach. Użyj selektorów identyfikatorów i atrybutów w połączeniu z dynamicznymi pseudoklasami: hover,: active i: focus. Na przykład, aby tło łącza z wartością atrybutu ID ID_DYNAMIC_BACKGROUND było czerwone w stanie nieaktywnym i zielone w stanie pod kursorem myszy, do arkusza stylów należy dodać następujące zestawy reguł:
# ID_DYNAMIC_BACKGROUND
{
kolor tła: # FF0000;
}
# ID_DYNAMIC_BACKGROUND: najedź
{
kolor tła: # 00FF00;
}
Możesz zrobić to samo, aby stworzyć tło z dynamicznie zmieniającym się obrazem.
