Technologia arkuszy stylów ma dwie funkcjepodczas tworzenia stron HTML. Po pierwsze, za jego pomocą powstaje pozycja poszczególnych elementów witryny. Po drugie, sprawia, że bloki są atrakcyjne wizualnie dla użytkownika. Druga funkcja jest realizowana na różne sposoby. Jeden z nich podkreśla. CSS zapewnia do tego atrybut. tekst-dekoracja.
Specyfikacja rekordu atrybutu
Skorzystaj z nieruchomości tekst-dekoracja właśnie. Wystarczy napisać następujący wiersz dla elementu w kodzie arkusza stylów:
tekst-dekoracja: wartość_atrybutu;
Zamiast "wartość atrybutuSpecyfikacja CSS oferuje wiele opcji:
- podkreślać - linia znajduje się ściśle pod tekstem;
- overline - linia biegnie nad tekstem;
- Żaden - usunięcie wszystkich efektów dekoracyjnych;
- dziedziczyć - przejmuje wartość elementu nadrzędnego.
Nie wszystkie możliwe formy pisania są podane powyżej, ponieważ ten atrybut definiuje nie tylko podkreślenie CSS, ale także inne efekty, na przykład „miganie” tekstu lub jego przekreślanie.
Przykłady projektowania hiperłączy
У новичков в веб-дизайне и программировании powstaje pytanie: po co umieszczać dolną linię tekstu? U zarania ery technologii internetowych ta metoda podświetlania wskazała użytkownikowi, że przed nim znajduje się hiperlink - tekst, który po kliknięciu przełączy się na nową stronę.
Domyślnie hiperłącza mają właściwość podkreślać... W praktyce pojawia się zadanie usunięcia linii z nieaktywnych elementów i uwidocznienia jej po najechaniu kursorem myszy. Oto przykładowy kod, który wyłącza podkreślanie linków CSS:
a {text-decoration: none;}
W przypadku linków aktywnych używany jest następujący wpis:
a: hover {text-decoration: underline;}
Dekoracyjne podkreślenie dla zaawansowanych
Atrybut standardowy tekst-dekoracja ma kilka ograniczeń:
- kolor linii nie różni się od koloru tekstu linku, nie można odróżnić ich „kolorystyki”;
- tylko linia ciągła jest używana jako podkreślenie. CSS nie implikuje żadnego innego stylu tekstu.
Ale specjalne sztuczki pomagają ominąć klasyczny projekt tekstu. W pierwszym przypadku dodatkowy tag <Zakres>.
Na przykład:
<a href="#" style="text-decoration: underline; color: red">
<span style = "color: blue"> hiperłącza</span>
</a>. </p>
W rezultacie słowo hiperłącza zostanie zapisane na stronie na niebiesko, a kolor linii będzie czerwony.
Kolejny zaawansowany sposób, który pozwala na zaimplementowanie podkreślenia CSS, - border-bottom... Poniższy przykład wyjaśnia jego użycie:
a {border-bottom: 1px stałe czerwone;}
Wynik będzie taki sam, jak we wcześniejszym przykładzie. Ale ta metoda ma ważną zaletę. Oprócz zmiany koloru linii (teraz ustawiony na czerwony - czerwony), można zmienić sposób rysowania:
- kropkowany - tworzy kropkowane podkreślenie;
- przerywana - linia składa się z pociągnięć;
- podwójnie - rysuje podwójną linię.
A więc atrybut granica-Dolny bardziej funkcjonalny. Oprócz umieszczenia ozdobnej linii pod tekstem, umożliwia dostosowanie jego wyglądu.
