Podkreślona czcionka CSS. Podkreślony tekst w CSS

Opis

Dodaje dekorację tekstu w postaci podkreślenia, przekreślenia, linii nad tekstem i mrugania. Można zastosować więcej niż jeden styl jednocześnie, wymieniając wartości oddzielone spacjami.

Składnia

dekoracja tekstu: [mrugnięcie || przechodzenie do wiersza || nadkreślenie || podkreśl] | brak | dziedziczyć

Wartości

miganie Ustawia migający tekst. Taki tekst okresowo, mniej więcej raz na sekundę, znika, po czym pojawia się ponownie w tym samym miejscu. Ta wartość nie jest obecnie obsługiwana przez przeglądarki i jest przestarzała w CSS3; zamiast tego zalecana jest animacja. przekreślony Tworzy przekreślony tekst (przykład). overline Linia przechodzi nad tekstem (przykład). podkreślenie Ustawia tekst podkreślenia (przykład). none Anuluje wszystkie efekty, w tym domyślne podkreślenie łączy. odziedzicz Wartość jest dziedziczona po rodzicu.

HTML5 CSS2.1 IE Cr Op Sa Fx

Atak strategiczny

Model obiektowy

document.getElementById ("elementID") .style.textDecoration

document.getElementById ("elementID") .style.textDecorationBlink

document.getElementById ("elementID") .style.textDecorationLineThrough

document.getElementById ("elementID") .style.textDecorationNone

document.getElementById ("elementID") .style.textDecorationOverLine

document.getElementById ("elementID") .style.textDecorationUnderline

Przeglądarki

Internet Explorer do wersji 7.0 włącznie nie obsługuje wartości dziedziczenia. Linia uzyskana przy użyciu wartości line-through jest wyższa w IE7 niż w innych przeglądarkach; IE8 naprawił ten błąd.

Zadanie

Rozwiązanie

Kropkowane podkreślenie linków stało się ostatnio standardem projektowania linków, kliknięcie którego nie otwiera linku, ale wykonuje jakąś akcję w bieżącym dokumencie. Aktywne wykorzystanie technologii AJAX, gdy strona jest odświeżana bez ponownego ładowania, doprowadziło do powstania nowego rodzaju linków, które różnią się od zwykłych linków linią przerywaną.

Aby utworzyć linię, użyj właściwości border-bottom z wartością przerywaną, dodając ją do selektora A. Aby podkreślenie nie było stosowane do wszystkich linków, należy określić unikalną klasę, nazwijmy ją na przykład kropką. Musisz również usunąć oryginalne podkreślenie z łączy, używając właściwości text-decoration ustawionej na brak (przykład 1).

Przykład 1. Kropkowane podkreślenie

HTML5 CSS 2.1 IE Cr Op Sa Fx

Wynik przykładu pokazano na ryc. 1.

Szerokość linii i kolor podkreślenia linków są również ustawiane za pomocą właściwości border-bottom.

Układ każdego tekstu informacyjnego implikuje włączenie semantycznych hiperłączy lub kotwic. Te elementy są dodawane za pomocą znacznika „a” (kotwica). Nowoczesne przeglądarki domyślnie wyświetlają taki element. Często projektanci układu lub projektanci stron internetowych wolą zmienić ten styl lub całkowicie go usunąć.

W niektórych przypadkach jest to naprawdę konieczne. Na przykład w gęstym bloku linków, gdzie niepotrzebny projekt tylko przeciąży percepcję i utrudni czytanie dokumentu. Jednak w niektórych przypadkach wskazane jest zachowanie rozróżnienia między tekstem a linkami. Jeżeli projekt strony całkowicie wyklucza takie formatowanie, należy zastosować inny rodzaj podświetlenia takich elementów. Najpopularniejszym obecnie rodzajem zróżnicowania jest kontrast kolorów kotwic w tekście. To skuteczne. Jedyną małą wadą tej opcji będzie problem zaznaczania 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 to zaniedbać.

Jeśli jednak zdecydowano się na usunięcie podkreślenia linków, to potrzebna będzie pewna znajomość struktury powstawania strony internetowej, czyli CSS.

Usuń podkreślenie z linków w witrynie

Dla kogoś, kto jest dobrze zorientowany w projektowaniu stron internetowych, a w szczególności w CSS, usunięcie podkreślonych linków nie będzie trudne. Aby to zrobić, wystarczy znaleźć i otworzyć plik odpowiedzialny za stylizację w plikach witryny. Zwykle znajduje się w katalogu głównym i ma rozszerzenie .css. Możesz usunąć podkreślenie linków za pomocą prostego kodu:

dekoracja tekstu: brak;

Ta mała linia całkowicie usunie podkreślenie wszystkich elementów napisanych ze znacznikiem „a” w całej witrynie.

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

W takim przypadku wskazane jest użycie tagu Style 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 obowiązują zwykłe reguły stylów CSS.

Te style dotyczą tylko określonej strony. Nie będą działać w innych sekcjach lub dokumentach witryny.

Usuń podkreślone linki po najechaniu myszą

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

dekoracja tekstu: brak;

Za dekorowanie elementów po najechaniu odpowiada pseudoklasa „:hover”.

Tworząc te dwie opcje, możemy sprawić, że podkreślenie linku pojawi się tylko po najechaniu kursorem, w przeciwnym razie wszystko będzie wyglądało jak zwykły tekst:

dekoracja tekstu: brak;

dekoracja tekstu: podkreślenie;

Korzystanie z identyfikatorów i klas

Jak widać z powyższego, dość łatwo jest zmienić stylizację elementu na stronie internetowej lub w dokumencie html. Wadą takich opcji jest niemożność selektywnego stosowania stylów: nie do całej witryny lub dokumentu, ale do konkretnego linku.

Istnieje kilka rozwiązań tego problemu.

Możesz usunąć podkreślenie linków w tekście. Chociaż jest to zdecydowanie odradzane z punktu widzenia optymalizacji strony.

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

Druga opcja jest bardziej akceptowalna.

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

Klasa jest napisana z kropką przed jej nazwą:

Brak_ dekoracja (

dekoracja tekstu: brak;

Identyfikator jest oznaczony znakiem #:

#brak_ dekoracja (

dekoracja tekstu: brak;

Ta zasada dotyczy zarówno pliku CSS, jak i tagu Style.

Zmień styl wyświetlania linków w tekście

Oprócz możliwości pozwala na zastosowanie innych rodzajów stylizacji. Często projektanci stron internetowych lub projektanci układu graficznego używają zmiany koloru w stosunku do tekstu głównego, aby wyróżnić tekst referencyjny.

Jest to również dość proste do zrobienia:

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

Podobna stylizacja jest stosowana zgodnie z tymi samymi zasadami, które opisano w przypadku anulowania podkreślenia łącza. Zasady CSS są w tym przypadku identyczne. Zmiana koloru łącza i anulowanie podkreślenia można zastosować jako osobną stylizację (wtedy łącze pozostanie podkreślone, ale zmieni kolor ze standardowego niebieskiego na wybrany przez Ciebie).

Zastąpienie standardowej stylizacji

Na koniec jeszcze jedna uwaga. Zamiast anulować podkreślenie linki CSS umożliwia wymianę wartości standardowe rejestracja. Aby to zrobić, po prostu zastąp następujące wartości w konstrukcji tekstu-dekoracji:

styl dekoracji tekstu:

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

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

Konstrukcja line-text-decoration-line może przyjmować następujące wartości:

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

text-decoration-line: (dowolny kolor w dowolnym formacie * czerwony, # c2c2c2, rgb (132, 33, 65) *).

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

dekoracja tekstu: czerwona, przekreślona, ​​falista.

lub eksplorowanie tagów formatujących tekst HTML

Twoja uwaga jest skierowana na jedną z kluczowych i najprostszych lekcji samouczka.

• tekst HTML jest głównym składnikiem większości stron internetowych.
• Według fraz kluczowych w treści strony HTML użytkownicy mogą znaleźć Twoją witrynę.
• tekst HTML może mieć dowolny rozmiar i kolor według własnego uznania. Możesz także zdefiniować rodzaj czcionki i jej objętość.
• Rozmiar HTML czcionka zwykle w pikselach.
• formatowanie HTML tekst powszechne, używane są znaczniki formatujące.

Zobacz poniżej tagi formatujące tekst HTML:

• Tagi: → pogrubienie tekst HTML(pogrubiona czcionka).
• Tagi → pogrubienie tekst HTML(pogrubiona czcionka).
• Tagi: → o stałej szerokości tekst HTML(czcionka o stałej szerokości).
• Tagi: → o stałej szerokości tekst HTML(czcionka o stałej szerokości).
• Tagi: → o stałej szerokości tekst HTML(czcionka o stałej szerokości).
• Tagi: → tekst HTML, rozmiar jest większy niż zwykle (duży druk).
• Tagi: → tekst HTML, rozmiar jest mniejszy niż zwykle (mały druk).
• Tagi: → ukośny tekst HTML(czcionka kursywa).
• Tagi: → ukośny tekst HTML(czcionka kursywa).
• Tagi: → ukośny tekst HTML(czcionka kursywa).
• Tagi: → podkreślone tekst HTML(czcionka podkreślona).
• Tagi: → przekreślenie tekst HTML(czcionka przekreślona).
• Tagi: → tekst HTML(czcionka) w indeksie dolnym.
• Tagi: → tekst HTML(czcionka) indeks górny.

Formatowanie tekstu HTML: przekreślony, podkreślony tekst

Wynik: ... czcionka o stałej szerokości

Wynik: ... rozmiar czcionki większy niż normalnie

Wynik: ... kursywa

Wynik: tekst przekreślony (czcionka przekreślona)

Wynik: indeks górny

C Formatowanie podane powyżej powinno być stosowane tylko do małych fragmentów tekstu. Posługiwać się CSS jeśli chcesz ustawić konkretną czcionkę dla całej strony lub na przykład dla kilku wierszy.

Za pomocą html można nadać tekstowi piękny wygląd. Element podkreślenia jest bardzo popularny, ale nie wszyscy zwykli użytkownicy wiedzą, jak z niego korzystać.

Podkreślenie w HTML

Jak więc zrobić podkreślenie? w html jest sformatowany za pomocą tagu ... Jest używany we wszystkich specyfikacjach html i xhtml, ale tylko pod warunkiem przejściowym ponieważ należy określić wersję znacznika przeglądarki. W takim przypadku dokument pomyślnie przechodzi walidację. Element musi być określony w standardowy sposób, czyli na samej górze strony.

Etykietka zamknięcia, musi mu towarzyszyć... Należy go dodać do znacznika w ten sposób:

1. Nagłówek numer jeden

Nasz tekst w akapicie

Słowo „tekst” zostanie podkreślone.

Możesz także podkreślić pojedynczą literę w słowie:

1. Nagłówek numer dwa

Nasze te Do artykuł w akapicie

Tradycyjnie w znaczniki html podkreślone linki wyświetlają się po najechaniu myszą lub nawet nieruchomo, i tak jest domyślnie we wszystkich przeglądarkach. Dlatego umieść tag na bieżąco jest wysoce odradzany.

Dodatkowo pisanie stylów w css sprawia, że ​​kod jest bardziej zwarty, co oznacza, że ​​strona będzie się szybciej ładować.

Najczęściej projektanci układu stosują style, dodając obramowania lub podkreślenia w html lub przenosząc je do osobnego pliku css.

Podkreślenie w CSS

Ozdabianie tekstu CSS to wygodny i praktyczny sposób. Bardzo proste sposoby takie wyróżnienie: użycie dekoracji tekstowej lub obramowania na dole.

Aby podkreślić tekst za pomocą dekoracji tekstu, należy dodać właściwość do żądanej klasy.

• pożądana klasa (
• dekoracja tekstu: podkreślenie;

Należy pamiętać, że nazwy klas pisane są zawsze po łacinie.

Dekorowanie można również wykonać za pomocą obramowań. Obramowania umożliwiają zarówno podkreślenie regularne (pełne), jak i kropkowane. W tym celu określone są niezbędne właściwości obramowania, ale właściwość dekoracji tekstu jest usuwana.

• pożądana klasa (
• dekoracja tekstu: brak;

Następnie tekst jest ozdobiony następującą właściwością:

• .wymagana klasa (
• dekoracja tekstu: brak;
• obramowanie-dół: 2px przerywana czerń;

Tak wygląda zdobienie: aby było solidne, zamiast „przerywanego” użyj „solidnego”. Dla tych, którzy lubią ozdabiać tekst podkreśleniem kropkami, możesz spróbować użyć „kropek”.

Style ramek są napisane w jednym wierszu. Oprócz rodzaju podkreślenia musisz również określić grubość podkreślenia i kolor. Możesz eksperymentować, aby określić rozmiar, ale zwykle wystarczy 1 lub 2 piksele. Kolor tekstu można również ustawić na kolor podkreślenia:

• pożądana klasa (
• dekoracja tekstu: brak;
• obramowanie-dół: 1px kropkowany niebieski;
• kolor niebieski;

Spowoduje to utworzenie niebieskiego tekstu z niebieską typografią. Aby dołączyć styl do html, musisz dodać klasę do znacznika.

• Trzeci nagłówek

Nasz tekst w akapicie

To wszystko, to są podstawy podkreślania w html.