Podkreślenie elementów blokowych, takich jak znacznik

można to zrobić na dwa sposoby. Przykładowo ustaw linię pod tekstem na całą szerokość bloku, niezależnie od objętości tekstu. A także podkreśl tylko tekst. Następnie rozważymy obie opcje.

Linia pod tekstem na całej szerokości bloku

Aby utworzyć linię pod tekstem, należy dodać do elementu właściwość style border-bottom; jej wartością jest zarówno grubość linii, jej styl, jak i kolor (przykład 1).

Przykład 1. Linia o pełnej szerokości

HTML5 CSS 2.1 IE Cr Op Fx

Przykładowy tekst

Odległość linii od tekstu można dostosować, dodając właściwość padding-bottom do selektora H1. Wynik ten przykład pokazany na ryc. 1.

Podkreśl tekst

Aby podkreślić sam tekst, należy użyć właściwości tekst-dekoracja z wartością underline , ponownie dodając ją do selektora H1 (przykład 2).

Przykład 2. Szerokość linii do tekstu

HTML5 CSS 2.1 IE Cr Op Fx

Przykładowy tekst

Czarny nagłówek przyciąga uwagę mimo, że jest czarny, a nie biały.

Wynik tego przykładu pokazano na ryc. 2.

Podczas korzystania z właściwości tekst-dekoracja linia jest sztywno połączona z tekstem, więc nie można określić jej położenia i stylu.

Na tej stronie znajdziesz przykłady jak zmienić linki HTML kiedy Pomoc CSS, co pozwala na zablokowanie linków, linków ikonowych, bez podkreślania, za pomocą zaokrąglone rogi, zmień odległość między nimi i wiele więcej. W przyszłości możesz tworzyć na podstawie tych przykładów różne opcje menu nawigacyjne dla witryny.

Zanim zaczniesz studiować przykłady, chcę dokonać małego wyjaśnienia. We wszystkich przykładach dla większej przejrzystości użyta zostanie pseudoklasa CSS, która służy do zmiany stylu linków po najechaniu na nie kursorem myszy. Trzeba powiedzieć, że ta praktyka jest powszechna i jest stosowana w takim czy innym stopniu na prawie wszystkich stronach internetowych.

W tym przykładzie usuniemy podkreślenie z linków, a następnie dodamy je lub usuniemy po najechaniu myszką.

Przykład HTML i CSS: jak usuwać i dodawać podkreślenia z linków

Opis przykładu

1. Domyślnie jest wszystko popularne przeglądarki dodaj podkreślenie do linków, które można regulować Właściwość CSS. Oznacza to, że domyślnie ta właściwość w przypadku linków ma wartość podkreśloną . Wykorzystując tę ​​wiedzę zmieniamy podkreślenie linków w ich różnych stanach.

Początkowo podkreślenie linków ma postać ciągłej, cienkiej linii, dociśniętej niemal blisko tekstu. W większości przypadków ta opcja jest wystarczająca. Czasami jednak projekt wymaga, aby linki były podkreślone linią przerywaną, a nie linią ciągłą, lub aby odległość podkreślenia od linków była większa niż standardowa, lub aby samo podkreślenie było pogrubione. A czasem trzeba zrobić jakieś egzotyczne podkreślenie, na przykład falistą lub wielokolorową linią. Wszystkie te opcje zostaną omówione w tym przykładzie.

Przykład HTML i CSS: podkreślenie łącza kropkowanego

Opis przykładu

1. Najpierw usuwamy standardowe podkreślenie ze wszystkich linków, ponieważ będziemy ich używać metody niestandardowe. Następnie dodajemy dolną granicę do pierwszego linku, korzystając z właściwości CSS i czynimy ją przerywaną. To będzie nasze podkreślenie. Aby usunąć podkreślenie po najechaniu myszką na link, używamy pseudoklasy i ustawiamy tło ramki tak samo jak tło strony, czyli po prostu je ukrywamy. Teoretycznie lepiej byłoby, aby tło ramki było przezroczyste, ale IE6 błędnie rozumie to znaczenie.
2. Z drugim łączem robimy to samo, co z pierwszym, ale po prostu rysujemy linię ciągłą. Aby zwiększyć odległość tekstu od podkreślenia, nadajemy linkowi niewielki dolny margines za pomocą właściwości CSS.
3. Nasz trzeci link ma wielokolorowe podkreślenie, więc dodamy go za pomocą zdjęcie w tle. W tym celu używamy małego obrazka, który łączymy za pomocą CSS. Umieść tło w Dolna część linki (0 100%) i pozwalają na ich powielanie tylko w poziomie (powtórz-x). Podkreślenie jest gotowe, ale jest zbyt blisko tekstu; aby to naprawić, dodajemy małe wcięcie do poniższego linku. Otóż ​​to.
4. W starych IE6 i IE7 mogą wystąpić problemy z wyświetlaniem podkreślenia na pierwszym i drugim linku. Aby to naprawić należy dodać właściwość zoom :1, która zawiera tzw układ. Ta właściwość jest nieprawidłowa i tylko te przeglądarki ją rozumieją, dlatego lepiej ją włączyć komentarze warunkowe.

Bardzo często, aby utworzyć menu, trzeba utworzyć nie tylko linki tekstowe, ale także linki blokowe, w których aktywnym obszarem będzie zarówno sam tekst, jak i określony obszar wokół niego.

Opis przykładu

1. Do tworzenia linków blokowych używamy właściwości CSS :block, która je zamienia elementy blokowe, tworząc nową linię przed i po sobie. Jeśli podziały wierszy nie są potrzebne, możesz zastąpić wartość inline-block .
2. Ponieważ nasze linki są teraz blokami, w razie potrzeby możemy zmienić ich szerokość (CSS) lub wysokość (CSS).
3. W tym przykładzie w ogóle nie określamy wysokości linków, a po prostu nadajemy im wewnętrzne dopełnienie (CSS), które rozszerza bloki.

Opis przykładu

1. Wszystko jest bardzo proste - korzystając z właściwości CSS, do linków pod kursorem dodajemy żądaną ramkę. Należy jednak pamiętać, że do zwykłych linków dodajemy dokładnie tę samą ramkę, ale robimy to w tym samym kolorze co tło strony. Oznacza to, że na razie po prostu ukrywamy ramkę. Dzieje się tak, aby po najechaniu kursorem myszy linki nie zaczęły „przeskakiwać” w wyniku rysowania ramki.

Zamiast dopasowywać kolor obramowania do tła strony, można ustawić go na przezroczysty i uczynić go przezroczystym, ale jak powiedziałem, IE6 nie obsługuje tego poprawnie.

Przykład HTML i CSS: Tworzenie łączy 3D

Opis przykładu

1. Za pomocą właściwości CSS do linków dodajemy ramki i za ich pomocą ustalamy ich kolor. Jednocześnie wskazujemy jasny odcień koloru dla lewej i górnej krawędzi oraz ciemny odcień dla dolnej i prawej strony. To właśnie dzięki takiemu rozkładowi kolorów otrzymujemy linki, które wyglądają jak trójwymiarowe przyciski.
2. Aby wyglądało to tak, jakby po najechaniu kursorem myszy naciskano przyciski, odwracamy kolory krawędzi linków za pomocą pseudoklasy. Aby uzyskać dodatkowy efekt kliknięcia, ustaw położenie względne (CSS:relative) i wykonaj przesunięcie w górę o jeden piksel (CSS:-1px).
3. Cóż, aby wszystko było absolutnie piękne, ustawiliśmy kolor tekstu i tła linków pod kursorem na nieco ciemniejszy niż zwykle. Gotowy.

W tym przykładzie utworzymy linki z ikonami, które będą zawierać nie tylko obrazy tych ikon, ale także tekst pod nimi. Jednak w przyszłości możesz je łatwo zmienić i pozostawić np. same ikony.

Przed rozpoczęciem pracy przygotujemy kilka obrazów ikon, w dwóch zestawach - dla linków zwykłych i linków pod kursorem myszy. Drugi zestaw powinien różnić się zewnętrznie od pierwszego, u nas wyraża się to w palecie kolorów.

Opis przykładu

1. Aby skrócić kod, stosujemy w linkach dwie klasy – „links” (o wspólnych właściwościach) oraz „image”, „audio”, „video” (osobiste dla każdego linku). Punkt ten szczegółowo opisano w zajęcia Odniesienie do CSS.
2. Nasze ikony mają rozmiar 50x50 pikseli i będą obecne w linkach jako tło (CSS), które wyśrodkujemy na górze (50% 0) i zapobiegniemy ich replikowaniu (no-repeat).
3. Do linków dodajemy dopełnienie (CSS), dzięki czemu tekst w linkach nie przylega do krawędzi. Jednocześnie robimy wcięcie górne równe wysokości ikon, aby tekst się z nimi nie nachodził, bo nasze ikony stanowią tło.
4. Jeśli w linkach jest bardzo mało tekstu, obrazy ikon zostaną obcięte po bokach. Aby temu zapobiec, ustawiamy linki na minimalną szerokość (CSS), tak aby była co najmniej równa szerokości ikon. W naszym przypadku musimy uzyskać minimalną szerokość 50px, ale ustawiamy ją na 40px, ponieważ kolejne 10px zostanie dodane ze względu na boczne wypełnienie.
5. Aby minimalna szerokość działała, konwertujemy linki na bloki inline (CSS: inline-block).

IE6 będzie musiał trochę „wyleczyć”:

1. IE6 nie rozumie właściwości minimalnej szerokości, ale interpretuje właściwość CSS jako minimalną szerokość. Dlatego używamy do tego prostego włamać się co rozwiąże ten problem.

W tym przykładzie zaokrąglimy rogi linków jedną z metod zaokrąglanie narożników, opisane w następnym podrozdziale. Nie będziemy rozważać opcji użycia CSS 3, ponieważ wszystko jest tam bardzo proste, ale lepiej byłoby dokonać zaokrągleń za pomocą obrazów.

Aby to zrobić, najpierw wytniemy kilka pustych obrazów w dwóch zestawach - dla zwykłych linków i linków pod kursorem. Dla nas będzie się to różnić obecnością/brakiem cieni na obrazach.

absolutne pozycjonowanie*/ góra: 0; /* zerowe przesunięcie u góry */ ) .links:before ( content: url("images/left_bok.png"); /* obraz po lewej stronie */ left: 0; /* zerowe przesunięcie w lewo */ ) .links:hover: before ( content: url("images/left_bok_hover.png"); /* obraz lewej strony pod kursorem myszy */ ) .links:after ( content: url("images/right_bok.png"); /* image prawej strony * / prawy: 0; /* przesunięcie zera w prawo */ ) .links:hover:after ( content: url("images/right_bok_hover.png"); /* obraz prawej strony pod myszką kursor */ )

Opis przykładu

Nie będziemy rozwodzić się nad samą technologią zaokrąglania, jeśli to konieczne, możesz o tym przeczytać w odpowiedniej sekcji strony.

1. Używając właściwości CSS :inline-block tworzymy linki w blokach inline. W szczególności jest to konieczne, abyśmy mogli nadać linkom dokładną wysokość odpowiadającą wysokości obrazów.
2. Usuń podkreślenie i wyśrodkuj tekst (CSS:center). Ogólnie rzecz biorąc, w naszym przypadku nie jest konieczne wyśrodkowanie tekstu, ponieważ linki dostosowują się do rozmiaru zawartego w nich tekstu i po prostu nie ma gdzie go wyrównać. Ale jeśli chcesz zwiększyć szerokość linków (na przykład do 150 pikseli), to wyrównanie się przyda.
3. aby się zmienić wygląd linki, gdy są pod kursorem myszy - do stylów dodajemy dodatkowe selektory z pseudoklasą CSS, w której wskazujemy nasze fragmenty obrazków, ale bez cienia.

Dla IE6 i IE7 łączymy dodatkowe style za pomocą komentarze warunkowe, ale zmieniamy trochę sam kod CSS i sprawiamy, że różni się od tego, w którym jest używany sposoby na zaokrąglanie narożników:

1. Istota zmiany polega na tym, że za pomocą wyrażeń integrujemy wewnątrz linków te same dwa tagi, tyle że bez atrybutów zawierających style. Zamiast tego do tagów dodajemy klasy „left_bok” i „right_bok”, dodajemy dla nich style i zapisujemy je poniżej. Style te są prawie takie same jak w głównym kodzie CSS, ale tutaj wszystkie obrazy są używane jako tło tagów.

Zaokrąglone rogi linków (opcja druga)

Spójrzmy na inny przykład zaokrąglania rogów linków, ale przy użyciu czterech oddzielnych obrazów narożników.

Opis przykładu

Tutaj również nie będziemy mówić o samym zaokrągleniu, zarysujemy jedynie charakterystyczne punkty.

1. Korzystając z właściwości CSS :inline-blok, konwertujemy linki na bloki inline. Następnie usuwamy z nich podkreślenie, dodajemy ramkę i wyrównujemy tekst do środka.
2. Ponieważ pseudoelementy, za pomocą których zaokrąglamy rogi, znajdują się wewnątrz linków, ich treść również jest wyśrodkowana, w związku z czym rogi obrazu dodane przez właściwość CSS nie są umieszczane w rogach tak, jak tego potrzebujemy. Aby to naprawić, dodajemy do niego :left, zwracając wartość domyślnie używaną przez przeglądarki.

Prezentuję krótkie fragmenty kodu CSS (fragment) umożliwiające zaimplementowanie podświetlania kotwic linków za pomocą płynnego podkreślania po najechaniu myszką.
Dlaczego musisz oddzielić tekst od ogólnego bałaganu, jest oczywiste. Istnieje wiele sposobów i rodzajów projektowania linków, wszystko ogranicza jedynie wyobraźnia mistrza.
Za pomocą pseudoklasy:hover i magic można dołączyć niemal dowolny efekt do standardowych, nudno zaprojektowanych cyjanotycznych linków.
Rozwiązania, które zostaną dzisiaj omówione, nie są niczym szczególnie niesamowitym ani niezwykłym. Wszystko jest proste, bez żadnych specjalnych bajerów i gwizdków, wystarczy podkreślić link kolorem i łatwa animacja podkreśl linie.

Szczegółowo opiszę jedynie kod CSS, ponieważ po stronie HTML nie trzeba niczego zmieniać ani dodawać.

CSS

Po pierwsze, z pomocą właściwości wysokości linii: zainstalować odstępy między wierszami w zależności od linii bazowej czcionki, Twoje znaczenie może być inne. Zróbmy łącze blokowo-liniowe, osadzone w strukturze tekstu, ustawiając jego właściwość display na inline-block . Pozbądźmy się standardowego podkreślania, pisząc tekst-dekoracja:brak; i wypełnij link kolorem, którego potrzebujemy.

a (wysokość linii: 1; wyświetlacz: blok inline; kolor: #ffeb3b; dekoracja tekstu: brak; kursor: wskaźnik; )

a (wysokość linii: 1; wyświetlacz: blok inline; kolor: #ffeb3b; dekoracja tekstu: brak; kursor: wskaźnik; )

Następnie używamy pseudoelementu:after, abyśmy mogli dodać dodatkowy element, w naszym przypadku jest to prosta, a prosty efekt przejścia zdefiniujemy we właściwości przejścia: . Początkowo ustawimy szerokość linii na wartość zerowa szerokość: 0%; , wysokość określa się w 2 piks. Kolor linii może być dowolny; w tym przykładzie nie wykazałem się zbyt dużą kreatywnością i ustawiłem odpowiednie kolory tekstu łącza.

a: po (wyświetlanie: blok; treść: „”; wysokość: 2 piksele; szerokość: 0%; kolor tła: #ffeb3b; przejście: szerokość . 3 s wydłużenia; )

a:po (wyświetlanie: blok; treść: „”; wysokość: 2 piksele; szerokość: 0%; kolor tła: #ffeb3b; przejście: szerokość .3 s łatwość wejścia; )

Pozostaje tylko dodać trochę ruchu do naszego łącza. W tym celu używamy kilku pseudoklas: hover i: focus . Pierwsza z nich określi styl linku po najechaniu, druga zadziała, gdy kursor będzie ustawiony „ciasno” na linku. Tutaj zmienimy wartość szerokości i ustawimy ją na 100%.
Teraz, po najechaniu myszką lub skupieniu się na łączu, użytkownikowi pojawi się stylizowane podkreślenie, płynnie z ledwo zauważalnym opóźnieniem, którego czas, rozważnie zdefiniowaliśmy wcześniej we właściwości przejścia: .

a: najedź: po, a: fokus: po ( szerokość: 100%; )

a:hover:after, a:focus:after ( szerokość: 100%; )

W rezultacie otrzymujemy następujący obraz:

Cały złożony kod będzie wyglądał następująco:

a (wyświetlanie: blok inline; kolor: #ffeb3b; wysokość linii: 1; dekoracja tekstu: brak; kursor: wskaźnik;) a: after (kolor tła: #ffeb3b; wyświetlacz: blok; treść: "" ; wysokość: 2px; szerokość: 0%; -webkit-przejście: szerokość .3s ułatwienie-wyjście -moz-przejście: szerokość .3s ułatwienie-wyjście) a: najechanie: po, a: fokus: po ( szerokość : 100% ;

a ( display: inline-block; color:#ffeb3b; line-height: 1; tekst-dekoracja:brak; kursor: wskaźnik; ) a:after ( kolor tła: #ffeb3b; display: block; content: ""; wysokość: 2 piksele; szerokość: 0%; -webkit-przejście: szerokość 0,3 s wejście-wyjście; -moz- przejście: szerokość 0,3 s wejście-wyjście a:hover:po, a:fokus:po ( szerokość: 100%;

Oczywiście jest to tylko jedna z najprostszych i najskromniejszych opcji projektowania linków. Eksperymentuj więcej, dodawaj kolory, używaj animacji, poruszaj się w prawo lub w lewo, twórz na przykład linki do góry nogami itp. itd., najważniejsze, żeby nie przesadzić, wszystko powinno być z wyczuciem, wyczuciem i ułożeniem .

Aktualizacja i uzupełnienia z 22.10.2017

W komentarzach pojawiały się pytania jak zrobić podkreślenie od środka tekstu linku, z płynnym rozciąganiem na boki. Jeśli będzie popyt, będzie podaż))).

Wszystko jest dość proste, wystarczy dodać kilka nowych właściwości, czyli dla głównego elementu a zdefiniować pozycjonowanie jako pozycję względną: względna; , a dla pseudoelementu a:po pozycji absolutnej:absolutnej; z odległością od lewej krawędzi elementu nadrzędnego w lewo: 50%; , a także użycie właściwości transform w celu określenia przesunięcia elementu w poziomie o określoną wartość transform:translateX(-50%) .

Na wyjściu otrzymujemy taki wynik:

Wszystko zmontowane kod CSS, aby płynnie podkreślić link od środka, powinien wyglądać mniej więcej tak:

a (wyświetlanie: blok inline; kolor: #ffeb3b; wysokość linii: 1; dekoracja tekstu: brak; kursor: wskaźnik; pozycja: względna; ) a: after (kolor tła: #ffeb3b; wyświetlacz: blok; treść : "" ; szerokość: 0%; pozycja: absolutna; -przejście-webkit: szerokość .3s przejście: szerokość .3s wejście-webkit: tłumaczenieX(-50%) ; -moz-transform: tłumaczenieX(-50%) ; transformacja: tłumaczenieX(-50%) ; po, a: fokus: po (szerokość: 100% ;)

a ( display: inline-block; color:#ffeb3b; line-height: 1; tekst-dekoracja:brak; kursor: wskaźnik; pozycja:relative; ) a:after ( kolor tła: #ffeb3b; display: block; content : ""; szerokość: 0%; pozycja: przejście-webkit: szerokość 0,3 s wejście-wyjście; -webkit-transform: tłumaczenieX(-50%) ; -moz-transform:translateX(-50%); po, a:fokus:po ( szerokość: 100%; )

Dziś, biorąc pod uwagę, że wszystkie nowoczesne przeglądarki coraz pewniej obsługują właściwości z klipu CSS3, praktycznie nie ma ograniczeń co do oryginalnego projektu linków, w zasadzie wszystko zależy od Twojej wyobraźni i gotowe rozwiązania W Internecie jest ich mnóstwo, jeśli chcesz, możesz je znaleźć, jak to mówią - na każdy gust i kolor.

Z całym szacunkiem, Andrzeju

Umożliwia tworzenie różnych podkreśleń w formacie HTML: podkreślenie, podkreślenie, tekst przechodzący przez linię itp. Połączmy tę funkcję z poprzednią i uzyskajmy:

Druga linia pokazuje, jak wszystko jest zapisane w jednym wierszu z dekoracją tekstową.

styl-dekoracji tekstu — styl podkreślania tekstu

Opcja określa wygląd linii dekoracyjnej dla łącza /. Nowe wytyczne CSS dodały wartości faliste i podwójne, więc jest ich teraz 5:

• ciągła - linia ciągła;
• double - double (z pierwszego przykładu powyżej);
• kropkowany - składa się z ciągu kropek;
• dashed - umożliwia utworzenie przerywanego podkreślenia CSS;
• falista - spektakularna falista linia.

pozycja podkreślenia tekstu - Pozycjonowanie podkreślenia CSS

Korzystając z tej właściwości, można kontrolować położenie linii względem glifu czcionki.
Dostępne są w sumie 4 opcje:

• auto — znajduje się jak najbliżej linii bazowej tekstu;
• under - poniżej najniższej krawędzi czcionki;
• lewo i prawo - lewo/prawo dla postów wyświetlanych pionowo.

Oto wizualna różnica między podkreślaniem tekstu za pomocą funkcji under i auto:

Różnica moim zdaniem jest dość oczywista.

text-dekoracja-skip - usuń podkreślenia elementów

Korzystając z tej opcji możesz anulować (pominąć) dekorację niektórych elementów w Linia HTML. Aby lepiej zrozumieć ważne wartości przestrzenie, obiekty, dekoracje pudełek, krawędzie, tusz Powielę obrazek z poprzedniego wpisu:

Oznacza to, że na przykład za pomocą atramentu możesz utworzyć w CSS podkreślenie, które nie będzie przecinać się ze znakami. Wartość obiektów umożliwia pominięcie elementów inline (inline-block) - wstaw rozpiętość, a linia ciągła zostanie przerwana w odpowiednim miejscu:

Parametry dekoracji pudełek, spacji, krawędzi są znacznie słabiej obsługiwane przez przeglądarki, dlatego ich wyniki czasami różnią się od oczekiwanych. Oto stan zgodności/obsługi dekoracji tekstu w chwili pisania tego tekstu:

Dodatkowe triki podkreślania linków

Początkujący użytkownicy często o to pytają typowe pytania na ten temat, więc postanowiliśmy je również rozważyć. Ogólny przykład znajduje się na samym dole, po wyjaśnieniach.

Jak usunąć podkreślenie linku

a:hover (dekoracja tekstu: podkreślenie; )

Oba poniższe przykłady pozwalają zrozumieć logikę działania najechania kursorem: albo początkowo określisz podkreślenie linku w CSS, a następnie usuniesz je po najechaniu myszką, lub odwrotnie.

Jeśli masz inne pytania na ten temat, zadaj je w komentarzach. Spróbujemy przyjrzeć się temu później lub udzielić wskazówek w odpowiedziach. Najważniejsze w tej kwestii jest praktyka - spróbuj dodać różne właściwości opcji dekoracji tekstu bezpośrednio w przykładach lub utwórz własne plik testowy. Mamy nadzieję, że wszystko stało się jasne w temacie podkreślania tekstu i linków w CSS/HTML.

Układ dowolnego tekstu informacyjnego zakłada włączenie semantycznych hiperłączy lub kotwic. Elementy te dodaje się za pomocą znacznika „a” (kotwica). Nowoczesne przeglądarki domyślnie wyświetlaj podobny element za pomocą Często projektanci układów lub projektanci stron internetowych wolą albo zmienić ten styl, albo całkowicie go usunąć.

W niektórych przypadkach jest to naprawdę konieczne. Na przykład w gęstym bloku odniesienia, gdzie niepotrzebny projekt tylko przeciąży percepcję i utrudni czytanie dokumentu. Jednakże w niektórych przypadkach właściwe jest zachowanie rozróżnienia pomiędzy tekstem a linkami. Jeśli projekt witryny całkowicie wyklucza takie formatowanie, warto zastosować inny rodzaj wyróżnienia takich elementów. Najpopularniejszym rodzajem rozróżnienia jest obecnie kontrast kolorów kotwice w tekście. To skuteczne. Jedyną niewielką wadą tej opcji będzie problem podświetlania tekstu przez osoby, które nie dostrzegają różnych kolorów (ślepota barw). Jest to jednak tak niski odsetek użytkowników, że można go pominąć.

Jeśli mimo wszystko zdecydowano się na usunięcie podkreślania linków, to potrzebna będzie znajomość struktury strony internetowej, czyli CSS.

Usuń podkreślenie linku z całej witryny

Dla osoby dobrze zorientowanej w projektowaniu stron internetowych, nie będzie to trudne. Aby to zrobić, wystarczy znaleźć i otworzyć w plikach witryny plik odpowiedzialny za stylizację. Zwykle leży katalog główny i ma rozszerzenie .css. Możesz usunąć podkreślenia z linków za pomocą tego prostego kodu:

dekoracja tekstu: brak;

Ta mała linia całkowicie usunie podkreślenia wszystkich elementów zapisanych przy użyciu znacznika „a” w całej witrynie.

Ale co, jeśli nie masz dostępu do Plik CSS?

W takim przypadku wskazane jest użycie znacznika Styl na początku dokumentu. Działa tak samo jak plik CSS. Aby zastosować style, należy na samym początku dokumentu (lub strony HTML) dodać konstrukcję, w której zwykle Reguły CSS style.

Te style dotyczą tylko konkretna strona. Nie będą miały zastosowania do innych sekcji ani dokumentów witryny.

Usuń podkreślenie linku po najechaniu kursorem

Ale co, jeśli chcesz usunąć podkreślenie linku po najechaniu myszką? CSS może nam pomóc także w tym przypadku. Kod będzie wyglądał następująco:

dekoracja tekstu: brak;

To właśnie pseudoklasa „:hover” odpowiada za dekorowanie elementów po najechaniu na nie kursorem.

Łącząc te dwie opcje, możemy sprawić, że podkreślenie linku będzie pojawiać się dopiero po najechaniu myszką, w przeciwnym razie będzie wyglądać jak zwykły tekst:

dekoracja tekstu: brak;

dekoracja tekstu: podkreślenie;

Używanie identyfikatorów i klas

Jak widać z powyższego, zmiana stylu elementu na stronie internetowej lub w dokumencie HTML jest dość prosta. Wadą takich opcji jest niemożność selektywnego stosowania stylów: nie do całej witryny lub dokumentu, ale do konkretnego łącza.

Istnieje kilka opcji rozwiązania tego problemu.

Możesz usunąć podkreślenie linków w tekście. Chociaż nie jest to absolutnie zalecane z punktu widzenia optymalizacji witryny.

Aby to zrobić, musisz określić parametr Styl bezpośrednio w tagu linku:

Druga opcja jest bardziej akceptowalna.

Wprowadzamy do elementu dodatkową klasę lub identyfikator i przypisujemy potrzebne nam style do tych selektorów:

Klasę zapisuje się z kropką przed nazwą:

Brak_dekoracji(

dekoracja tekstu: brak;

Identyfikator jest oznaczony znakiem #:

#brak_dekoracji(

dekoracja tekstu: brak;

Ta reguła dotyczy zarówno pliku CSS, jak i tagu Style

Zmiana stylu wyświetlania linków w tekście

Jest to również dość proste:

kolor :*sprecyzować żądany kolor w dowolnym formacie (*czerwony, #c2c2c2, rgb (132, 33, 65)*)*;

Podobna stylizacja stosowana jest według tych samych zasad, jakie opisano w przypadku usuwania podkreślenia łącza. Reguły CSS w w tym przypadku identyczny. Zmiana koloru linku i usunięcie podkreślenia można zastosować jako osobną stylizację (wtedy link pozostanie podkreślony, ale zmieni kolor ze standardowego niebieskiego na taki, jaki chcesz).

Zastąpienie standardowej stylizacji

Ostatnia uwaga. Zamiast cofać podkreślenie Linki CSS daje możliwość wymiany wartości standardowe rejestracja Aby to zrobić, wystarczy zastąpić następujące wartości konstrukcją dekoracji tekstu:

styl-dekoracji tekstu:

• Jeśli potrzebujesz linii ciągłej, określ wartość ciągłą.
• Dla falistej linii - falistej.
• Podwójna linia - odpowiednio podwójna.
• Linię można zastąpić ciągiem kropek - kropkowanych.
• Podkreśl słowo linią przerywaną – przerywaną

Możesz także zmienić położenie linii względem tekstu:

Konstrukcja linia-tekst-dekoracja-linia może przyjmować następujące wartości:

I kolor (nie mylić z kolorem tekstu!):

linia-dekoracji tekstu: (dowolny kolor w dowolnym formacie * czerwony, #c2c2c2, rgb (132, 33, 65)*).

Dla wygody wszystkie trzy pozycje można zapisać w konstrukcji razem:

dekoracja tekstu: czerwona, liniowa, falista.