Podkreślenia na różne sposoby PiotrX [strona główna] [skrypty]
No cóż, miłościwie nam panująca, czwarta wersja HTML-a nie zawiera elementów formatujących tekst jako podkreślony (<U>...</U>). Nie trudno się domyślić, w jaki sposób należy podkreślać tekst - oczywiście przy pomocy CSS.
W kwestii przypomnienia, pozwolę sobie zaprezentować właściwość "podkreślającą":
Podkreślenie nie jest zapewne twoim ulubionym środkiem ekspresji, więc taką właściwość widzisz tutaj po raz ostatni :-).
Podkreślenie, a raczej obramowanie CSS daje nam duże możliwości formatowania tekstu, a raczej elementów HTML. Dzięki CSS właśnie, możemy zadziałać na element HTML, w taki sposób, jaki nie byłby dostępny przy zastosowaniu wyłącznie elementów HTML. Niniejszy rozdział będzie opiewał właśnie tą przewagę. Ale, do rzeczy - czyli przykładu:
Który da w efekcie To jest nagłówek podkreślony Jak widać, w przykładzie wykorzystaliśmy właściwości "border", które - jak wiadomo służą do określania parametrów obramowania elementu. Wydaje mi się, że takie podkreślanie jest na swój sposób ładniejsze od "klasycznego". Poza niewątpliwym urokiem takiego rozwiązania - mamy więcej możliwości kontroli niż przy zastosowaniu zwykłego <U>. Kontrolować możemy grubość "podkreślenia", jego kolor, i styl (ciągły, przerywany itp.) - sterowanie takimi właściwościami jest niedostępne przy użyciu <U>.
Jeżeli już możemy sterować podkreśleniem - można się trochę pobawić. Na przykład w taki sposób:
czyli... Podkreślenie inne Jak widać poszerzyliśmy obramowanie do trzech pikseli - po to, aby był widoczny styl "double". Jak działa nasz styl - widać na przykładzie Jak już wspomniałem - zmieniać możemy kolor, szerokość i styl obramowania - zachęcam do eksperymentowania. Tymczasem zajmiemy się praktycznym wykorzystaniem naszego podkreślenia. Zastosowania praktyczne Takiego typu "podkreślenia" nie będziemy na pewno wykorzystywać bezpośrednio w tekście - jest strasznie niepraktyczne. Najwłaściwszym celem wydają się wszelkiego rodzaju teksty "artystyczne" - nagłówki, teksty w rażący sposób odstające od reszty, i inne takie. Aby zainspirować waszą kreatywność, pozwolę sobie przedstawić kilka przykładów Na przykład - przykład pierwszy: Naprzykład pierwszy
To w zasadzie było by na tyle, jak widać - możliwości są nieograniczone.
Dodatek praktyczny Zazwyczaj style nie są poprawnie przetwarzane przez przeglądarki, niestety dotyczy to także obramowania. Na pewno zauważyłeś, skopiowany kod przykładu nie działa w Netsacape Nawigatorze - jest to zupełnie normalne dla tej przeglądarki, w niej należy posłużyć się sposobem. NN jest niezwykle podatny na właściwości skrócone - dla 'border' właściwością skróconą będzie np:
H1{border: 1px solid red;}
Czyli: ciągłe, czerwone obramowanie o szerokości 1 piksela. Ale nie o to nam chodzi - chcielibyśmy uzyskać obramowanie z prawej, lub lewej strony, o różnych szerokościach. Nie pozostaje nic innego, niż zastosowanie sposobu. "Sposób" wygląda następująco:
Pozwolę sobie objaśnić w czym rzecz, otóż: na początku zdefiniowaliśmy znane już obramowanie ciągłe, po czym, w następnej linii, ustaliliśmy szerokość obramowania z lewej strony na '0px', czyli obramowania z lewej strony po prostu nie widać, to samo dotyczy obramowania z góry. Ta sama metoda została użyta przy określaniu kolorów. Jak widać "sposób" nie jest skomplikowany, a działa wyśmienicie.