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 i CSS, usunięcie podkreśleń linków nie będzie trudne. Aby to zrobić, wystarczy znaleźć i otworzyć plik w plikach witryny, za który jest odpowiedzialny stylizacja. 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, konieczne jest na samym początku dokumentu (lub Strony HTML) dodaj 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

Oprócz możliwości pozwala na zastosowanie innego rodzaju stylizacji. Często projektanci stron internetowych lub projektanci układów podkreślają tekst łącza, zmieniając jego kolor w stosunku do tekstu głównego.

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. Zmianę 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 usuwać podkreślenie linku, CSS daje możliwość zamiany 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.

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, której 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.

Istnieje wiele znaczników do formatowania tekstu. Niektóre z nich są używane często (i szybko je zapamiętasz), inne - rzadko (nie musisz ich pamiętać).

Tutaj przyjrzymy się tym, które są często używane.

Tagi tworzące nagłówki tekstu

Tagi te podkreślają tekst jako nagłówki. Te. każdy nagłówek zaczyna się od Nowa linia, jest wyróżniony pogrubioną czcionką i ma swój własny rozmiar (nagłówek pierwszego poziomu jest największy, szósty poziom jest najmniejszy).

Tagi te mogą być używane z parametrem wyrównanie poziome wyrównywać. Możliwe wartości tego parametru:

• lewy- lewy,
• Prawidłowy- po prawej,
• Centrum- w centrum,
• uzasadniać- na szerokość.

Przykładowy kod:

Tagi podziału akapitu i wiersza

Etykietka
- znacznik wymuszonego podawania wiersza. Tekst po tym znaczniku zaczyna się od nowej linii.
Tagi podzielić tekst na akapity. Przed początkiem każdego akapitu należy umieścić znacznik

, znacznik zamykający jest opcjonalny. W przeciwieństwie do tagu
Akapity są oddzielone od siebie pustą linią.

Na tagu

jest parametr wyrównywać, który określa sposób wyrównania tekstu w akapicie. Możliwe wartości tego parametru:

• lewy- lewy,
• Prawidłowy- po prawej,
• Centrum- w centrum,
• uzasadniać- na szerokość.

Przykładowy kod:

Formatowanie HTML

To jest akapit, oddzielony od reszty tekstu puste linie górę i dół i wyrównane do lewej.

To jest akapit, oddzielony od reszty tekstu pustymi liniami u góry i u dołu i wyrównany do prawej strony.

To jest akapit, oddzielony od reszty tekstu pustymi liniami u góry i u dołu i wyrównany do środka.

To tylko tekst.
To jest tekst w nowej linii.

W oknie przeglądarki będzie to wyglądać następująco:

Tagi, które czynią tekst kursywą

Tagi te pochylają tekst, ale robią to poprzez różne powody.
Tagi służy do logicznego wyróżniania tytułów książek, artykułów i cytatów.
Tagi służą do podkreślania definicji.
Tagi I podkreśl ważne fragmenty tekstu. Ten ostatni nie jest zalecany do stosowania.

Przykładowy kod:

Formatowanie HTML Ten tekst znajduje się w znacznikach cytowania
Ten tekst znajduje się w tagach dfn
Ten tekst znajduje się w tagach em
Ten tekst znajduje się w tagach i

W oknie przeglądarki będzie to wyglądać następująco:

Tagi pogrubiające tekst

Obydwa służą do wyróżniania ważnych fragmentów tekstu, ale preferowany jest ten pierwszy.

Przykładowy kod:

Ten tekst w tagi mocne
Ten tekst znajduje się w tagach b

W oknie przeglądarki będzie to wyglądać następująco:

Tagi podkreślające tekst za pomocą podkreślenia

Obydwa służą do podkreślania ważnych fragmentów tekstu, ale preferowany jest ten pierwszy.

Przykładowy kod:

Formatowanie HTML Tylko tekst

Ten tekst znajduje się w Twoich tagach

W oknie przeglądarki będzie to wyglądać następująco:

Tagi wyświetlające tekst czcionką o stałej szerokości

Tekst wyświetlany jest czcionką o stałej szerokości, jednak preferowane jest użycie tej pierwszej.

Przykładowy kod:

Formatowanie HTML Tylko tekst
Ten tekst znajduje się w tagach kbd
Ten tekst znajduje się w tagach samp
Ten tekst jest w tagach tt

W oknie przeglądarki będzie to wyglądać następująco:

Tagi wyświetlające tekst w indeksie górnym i dolnym

Tagi wyświetlaj tekst poniżej poziomu linii mniejszą czcionką.
Tagi wyświetlaj tekst powyżej poziomu linii mniejszą czcionką.
Wygodny do wyprowadzania wzorów matematycznych i chemicznych.

Przykładowy kod:

Formatowanie HTML y=x 2 - równanie paraboli.

H 2 O to wzór wody.

W oknie przeglądarki będzie to wyglądać następująco:

znacznik czcionki i jego parametry

Tagi wskaż parametry czcionki tekstu:

twarz- nazwa czcionki. Możesz podać kilka nazw czcionek, oddzielonych przecinkami. W takim przypadku, jeśli pierwsza określona czcionka nie zostanie znaleziona (nie wiesz, jakie czcionki są zainstalowane na komputerze użytkownika), przeglądarka użyje kolejnej z listy.

rozmiar- rozmiar czcionki w jednostki konwencjonalne od 1 do 7. Domyślny rozmiar czcionki to 3.

kolor- kolor tekstu (domyślnie - czarny).

Kolor można ustawić na dwa sposoby: według nazwy i poprzez określenie kod szesnastkowy zabarwienie.

Dzięki spersonalizowanym kolorom (jest ich 156) wszystko jest proste, spójrz na odpowiednią tabelę, wybierz kolor, który Ci się podoba i wpisz jego nazwę w wartości parametru (na przykład kolor="niebieski").

Ale druga metoda zapewnia znacznie większy wybór. Tutaj możemy wybierać spośród miliona kolorów, określając jego kod szesnastkowy. Kod ten składa się z 6 cyfr i zaczyna się od znaku „#”. Nie będziemy wdawać się w szczegóły, jak powstaje kod koloru, zwrócimy jedynie uwagę, że można go uzyskać np. Program Photoshop. O tym, jak to zrobić, przeczytasz na stronie
Będzie jaśniej na przykładzie:

Zaznaczmy słowo „tekst” na czerwono:

Tekst

Dodajmy teraz znaczniki kursywy (otwierające po lewej, zamykające po prawej):

Tekst

A teraz - pogrubione tagi:

Tekst

Za każdym razem umieszczamy wszystkie poprzednie tagi w nowych. Nazywa się to kolejnością zagnieżdżania. możesz użyć różne tagi Aby sformatować tekst, najważniejsze jest, aby nie naruszać kolejności zagnieżdżania.

Na tym kończy się trzecia lekcja. Przyjrzeliśmy się głównym sposobom formatowania tekstu, w następnej lekcji przyjrzymy się mniej odpowiednim znacznikom formatującym. Niemniej jednak zapoznanie się z nimi nie będzie złym pomysłem.

Na tej stronie znajdziesz przykłady jak zmienić linki HTML kiedy Pomoc CSS, co pozwala na zablokowanie linków, łączy ikon 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 granicy 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 obramowania 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, w razie potrzeby 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.

Prawdopodobnie zauważyłeś animowane podkreślanie linków w wielu zasobach i chciałeś wiedzieć, jak wdrożyć je na swojej stronie. Aby stworzyć coś pięknego podkreślenie css elementów nie potrzebujemy dużej wiedzy, czy podłączenia dodatkowych skryptów, wystarczy standardowy HTML i CSS.

Odmiany podkreślenia

Podkreślając linki lub inne elementy, możesz wymyślić, co chcesz. Podkreślenie może unosić się od dołu, przesuwać w lewo lub w prawo itp. Przyjrzymy się więcej ciekawy przykład, w którym podkreślenie będzie rozciągać się od środka do krawędzi, jak na poniższym pokazie.

demonstracja podkreślenia

HTML

Najpierw utwórzmy jakiś element, na przykład weźmy znacznik A. Jego atrybut nie jest dla nas ważny, ponieważ większość pracy poświęcona będzie stylom.

CSS

Implementacja będzie składać się z dwóch linii, które będą rozciągać się od środka dołu elementu do jego krawędzi.

Jesteśmy odpowiedzialni za podkreślenie właściwość dekoracji tekstu, ale nie ma sensu go tutaj używać, ponieważ realizacja naszych planów animacji w tym przypadku nie jest do końca istotna. Nie zapominajmy, że każdemu elementowi można przypisać pseudoelement::before lub::after. Dlatego przypiszemy im wszystkie właściwości i od razu ustawimy następujące parametry naszego łącza:

A(wyświetlanie: blok inline; pozycja: względna; dekoracja tekstu: brak; )

Tym samym ustalamy usprawnienie i pozycjonowanie bloku względem pierwotnej lokalizacji. Wszystko po to, aby podkreślenie nie wychodziło poza element, gdy przypiszemy pozycjonowanie bezwzględne pseudoelementowi ::before. Następnie musimy ustawić jego jasną lokalizację i rozmiar. I tutaj natychmiast tworzymy pierwszą połowę podkreślenia.

A::before (wyświetlanie: blok; pozycja: bezwzględna; treść: „”; wysokość: 2 piksele; szerokość: 0; kolor tła: czerwony; przejście: szerokość 0,5 s wysuwania, w lewo 0,5 s wysuwania na zewnątrz; po lewej: 50%; na ​​dole: 0; )

Te. Wysokość podkreślenia będzie wynosić 2px, długość 0, kolor czerwony, a za animację odpowiada właściwość przejścia. I oczywiście lewe wcięcie wynosi 50%, tj. środek. Prawie te same czynności wykonujemy z pseudoelementem ::after:

A::po(wyświetlanie: blok; pozycja: bezwzględna; treść: „”; wysokość: 2 piksele; szerokość: 0; kolor tła: czerwony; przejście: szerokość 0,5 s wysuwania; po lewej: 50%; dół: 0; )

A:hover::przed (szerokość: 50%; po lewej: 0; ) a:hover::po(szerokość: 50%; )

Warto zaznaczyć, że to tylko jeden ze sposobów realizacji tego pomysłu. Możesz zrobić to samo, używając tylko jednego pseudoelement::before . Subskrybuj materiały i proponuj tematy artykułów.