Jak wyróżnić tekst za pomocą CSS

Jak wyróżnić tekst za pomocą CSS
Podczas czytania notatek lub artykułów niektóre ważne punkty lub terminologie muszą zostać zmienione później. W tym celu używamy zakreśników, aby zaznaczyć ważne rzeczy zamiast studiować cały artykuł za każdym razem. Daje również to przekonujący wygląd tych informacji. Aby więc zaznaczyć informacje na stronie internetowej, HTML oferuje nam „”Tag, a CSS pozwala nam używać różnych właściwości do wyróżnienia tekstu.

Wynik tego bloga to:

  • Metoda 1: Podświetl tekst za pomocą znacznika HTML
  • Metoda 2: Podświetl tekst za pomocą znacznika HTML
  • Metoda 3: Podświetl tekst przy użyciu kolorów gradientu CSS

Metoda 1: Podświetl tekst za pomocą znacznika HTML

HTML "”Tag jest wykorzystywany do wyróżnienia lub oznaczenia tekstu, który zawiera ważne informacje. Domyślnie przeglądarki renderują zaznaczony tekst z żółtym kolorem tła.

Składnia
Składnia używania „„Element HTML jest wspomniany poniżej:

Treść…

Przykład: jak dodać element w HTML?
W HTML najpierw utwórz div o nazwie klasy „skrzynka". Następnie,

jest dodawany do nagłówka i

Tag służy do dodania akapitu do strony internetowej. W obrębie

element, użyj „„Element do podkreślenia wymaganego tekstu:


Element znaku HTML


Element znaku służy do zdefiniowania oznaczonychtekst.


Następnie zastosuj właściwości CSS do elementów HTML.

Style Box Div

.skrzynka
Border: 5px Solid #9A1663;
kolor tła: #FDF0E0;
Szerokość: 90%;
Wysokość: 200px;
Margines: Auto;
Wyściółka: auto;
Text-Align: Center;
Rozmiar czcionki: 20px;

Tutaj, ".skrzynka”Służy do dostępu do elementu DIV w polu klasy i zastosowania następujących właściwości: -

  • "granica„Właściwość może mieć więcej niż dwie wartości, aby określić styl graniczny, taki jak szerokość, typ linii i kolor.
  • "szerokość„Atrybut jest wykorzystywany do określenia szerokości elementu.
  • "kolor tła„Właściwość jest wykorzystywana do określenia koloru tła elementu.
  • "wysokość„Właściwość określa wysokość elementu HTML.
  • "margines„Właściwość definiuje przestrzeń poza elementem.
  • "wyściółka„Właściwość definiuje przestrzeń wewnątrz elementu.
  • "tekst-align„Własność jest wykorzystywana do dostosowania wyrównania tekstu.
  • "rozmiar czcionki”Określa rozmiar czcionek.

Powyższy kod wygeneruje następujący wynik:

Możemy również zastosować różne style do elementu za pomocą CSS.

Style Element HTML
Domyślnie „„”Tag pokazuje żółty kolor. Ale za pomocą CSS możesz zastosować różne właściwości, aby zmienić styl elementu Mark HTML.

W tym przykładzie użyliśmy inline CSS do stylizacji znacznika HTML:

Element znaku służy do zdefiniowania wyraźny tekst.

Można zauważyć, że teraz tekst jest podświetlany przy użyciu czerwonego koloru:

Metoda 2: Podświetl tekst za pomocą znacznika HTML

HTML "”Element to element wbudowany wykorzystywany do zaznaczenia części dokumentu.

Przykład: jak dodać element do HTML?
Najpierw

Tag jest umieszczony w celu dodania akapitu. W środku

tag, „”Tag służy do zaznaczenia określonej części akapitu. Każdy znacznik rozpiętości ma identyfikator jako „S1".

Html

Linuxhint jest najlepszy Samouczek online strona internetowa.
Jeśli chcesz się nauczyć Programowanie bash, wtedy jesteś we właściwym miejscu.

Teraz zastosuj style CSS do powyższych elementów rozpiętości.

CSS

#S1
kolor tła: RGB (235, 247, 6);

„„#S1”Odnosi się do identyfikatora Span. Tutaj nieruchomość „kolor tła”Z wartością RGB (233, 247, 6) jest stosowany do elementu rozpiętości.

Z wyjścia można zaobserwować, że tekst w elemencie rozpiętości jest oznaczony określonym kolorem:

Metoda 3: Podświetl tekst przy użyciu kolorów gradientu CSS

W HTML dodaj z identyfikatorem „główny". Następnie, wewnątrz tego elementu div, miejsce

tag, aby dodać zawartość. W ramach treści

tag, umieść tag o nazwie klasy jako „atrakcja". Na koniec zastosujemy CSS „gradient„Własność do tego obszaru rozpiętości.

Html


Cena sukcesu jest ciężka praca i poświęcenie.


Klasa stylowa

.podkreślenie
Imaga tła: Gradient liniowy (po prawej, #06283d, #8bbccc, #47b5ff, #256D85);
RADIUS BRAVES: 6px;
Wyściółka: 3px 6px;

Opis powyższych właściwości CSS przedstawiono poniżej:

  • ".atrakcja”Służy do dostępu do klasy klasy

    element.

  • "zdjęcie w tle„Nieruchomość jako„gradient liniowy”Używa parametrów jako kierunku, a następnie dwóch lub więcej kolorów.
  • "Radiusz graniczny„Nieruchomość jest wykorzystywana do rundy krawędzi elementów.
  • "wyściółka”Służy do zapewnienia przestrzeni wokół treści elementu.

Styl Main Div

#główny
Margines: 10px Auto;
Szerokość: 90%;
Wysokość: 150px;
Border: 5px Solid #FB2576;
RADIUS BRAVES: 10px;
kolor tła: czarny;
Wyściółka: 5px;

Poniższe opisane właściwości CSS są stosowane do elementu DIV z id jako „główny”:

  • "#główny”Jest skierowany do głównego identyfikatora elementu DIV.
  • "margines„Własność stosuje odstępy poza elementem div.
  • "szerokość„Właściwość służy do ustawienia szerokości kontenera.
  • "wysokość”Ustawia wysokość pojemnika.
  • "granica”Określa szerokość, rodzaj i kolor granicy.
  • "Radiusz graniczny”Ma zastosowanie do rundy krawędzi elementów.
  • "kolor tła”Służy do zastosowania koloru na tle elementu DIV.
  • "wyściółka”Jest stosowany, aby dać przestrzeń wokół treści Div.

Styl

element

#Main> p
kolor: #fff;
Text-Align: Center;
Font-Family: Sans-Serif;
Spacer: 2px;
Wyściółka: 20px 0;
Rozmiar czcionki: 2em;

Element Div Main jest stosowany style z wymienionymi właściwościami CSS:

  • "kolor„Właściwość określa kolor tekstu.
  • "tekst-align„Własność ma zastosowanie do tekstu, takiego jak Center, Left i Ince.
  • "rodzina czcionek”Jest wykorzystywany do ustawiania rodziny czcionek tekstu.
  • "odstępy między literami„Właściwość maksymalizuje lub minimalizuje odstępy między znakami tekstu.
  • "wyściółka”Reprezentuje przestrzeń wokół zawartości elementu.
  • "rozmiar czcionki”Wskazuje rozmiar czcionki.

Po zapisaniu powyższego kodu strona internetowa w naszej przeglądarce internetowej będzie wyglądać tak:

Omówiliśmy niektóre metody podkreślenia tekstu za pomocą CSS.

Wniosek

Aby wyróżnić tekst, HTML i CSS ułatwiają nam wiele technik. Html "" I "”Tagi służą do zaznaczenia tekstu, ale możemy dostosować styl podświetlenia za pomocą CSS. W tym blogu omówiono procedurę wyróżnienia tekstu za pomocą kolorów HTML, i gradientu.