Jak dodać wbudowane style CSS na zawisie

„„:unosić się”Jest pseudo-sobem, co oznacza, że ​​jest rozpoznawany tylko w arkuszu stylu CSS. Użytkownicy nie mogą stosować stylów inline CSS na zawisie. Jednak w celu dodania wbudowanego CSS na zawisie, lepiej nadać elementowi nazwę lub identyfikator klasy, a następnie użyć go w arkuszu stylów, aby zastosować style lub używać funkcji JavaScript.

Ten zapis będzie instruuje, aby dodać style CSS na zawisie za pomocą JavaScript.

Jak dodać style CSS na zawisie?

Nie ma metod stosowania zawisu w CSS wbudowanym. Jednak, aby zastosować efekt najemnika na element za pomocą jego identyfikatora, sprawdź podany przykład.

Przykład

W HTML dodaj element DIV o nazwie klasy „główna zawartość". Wewnątrz tej div dodaj „

„Element do określenia nagłówka. Następnie dodaj „”Element z pewną zawartością określoną w atrybutach:

• • "Href”Atrybut określa link.
  • "ID„Atrybut jest ustawiony na dostęp do CSS.
  • Podaj także funkcje „MOUSE_OVER ()" I "MOUSE_OUT ()" w tym. Na myszy Funkcje te uruchomi się i wywołują funkcję w JavaScript:

Dodaj wbudowaną wbudowaną CSS

Linuxhint School!

Przejdźmy do sekcji CSS, gdzie elementy HTML są wyposażone w właściwości stylizacyjne.

Element ciała stylu

ciało
kolor tła: #863a6f;

Kolor tła elementu ciała jest ustawiany za pomocą „kolor tła" nieruchomość.

Styl główny div

.główna zawartość
szerokość: 400px;
Wysokość: 100px;
kolor tła: #D989B5;
Margines: Auto;
Wyściółka: 20px;
RADIUS BRAVES: 10px;

„„.główna zawartość ”Odnosi się do głównego kontaktu klasy, który jest stylizowany w następujący sposób:

• • "szerokość”Właściwość ustawia szerokość elementu HTML.
  • "wysokość„Właściwość określa wysokość elementu HTML.
  • "kolor tła„Właściwość określa kolor tła elementu.
  • "margines„Właściwość ustawia przestrzeń na elemencie.
  • "wyściółka„Właściwość ustawia przestrzeń na treści elementu.
  • "Radiusz graniczny„Własność jest wykorzystywana do okrążenia krawędzi elementu.

Element stylu

A
Rozmiar czcionki: 20px;
Dekoracja tekstu: Brak;
Wyściółka: 10px;

„„„Element jest stylizowany przy użyciu następujących właściwości:

• • "rozmiar czcionki”Właściwość określa rozmiar czcionki elementu.
  • "dekoracja tekstu„Właściwość o wartości Brak usuwa podkreślenie z tekstu.

JavaScript

W danym kodzie JavaScript:

• • "„Znacznik jest wykorzystywany do określenia kodu skryptu.
  • "funkcja MOUSE_OVER ()”: Funkcja jest słowem kluczowym do zdefiniowania funkcji MOUSE_OVER ().
  • "dokument.GetElementById („HOV”).styl.kolor = „żółty””Bierze identyfikator„Hov”Elementu jako parametr i ustawia jego styl jako żółty.
  • "funkcja MOUSE_OUT ()”Używa„dokument.GetElementById („HOV”).styl.kolor = „biały”„Metoda, aby wziąć identyfikator”Hov””Element jako parametr, na którym kolor stylu ma zostać zmieniony na biały.
  • "”To znacznik zamykający.

Tutaj widać, na zawisie, styl koloru tekstu zmienia się na żółty, a po usunięciu kolor tekstu zmienia się w biały:

W ten sposób zastosowanie stylów CSS na zawisie.

Wniosek

„„:unosić się”Jest pseudo-elector, co oznacza tylko w CSS. Nie ma metod dodawania wbudowanych stylów CSS na zawisie. Tak więc lepiej jest użyć funkcji JavaScript do określenia właściwości na myszy na elemencie. Ten post wykazał metodę dodawania stylów CSS na zawisie.