Styl zastępowania CSS

Wstęp

Być może wdrożyłeś koncepcję pierwszeństwa w wielu dziedzinach życia,.mi., Priorytetyzacja pracy, domu i rzeczy osobistych. W programowaniu HTML przeglądarka musi przewidzieć priorytet elementów lub instrukcji, aby odpowiednio wyświetlać. Ta koncepcja jest znana jako „Zastąpienie CSS”. Wydaje się, że istnieją różne zasady, które decydują, czy jeden styl zastąpi inny na podstawie typu selektora używanego do zaprojektowania komponentu. Korzystając z nadrzędnej techniki, możemy priorytetowo traktować ten sam typ elementów o tych samych właściwościach w pliku HTML. Tak więc, jeśli jesteś nowy w Stylizacji CSS, ten artykuł bardzo ci pomoże. Spójrzmy na niektóre przykłady zaimplementowane w kodzie VS.

Przykład 1
Zacznijmy od pierwszego przykładu ilustrującego zastosowanie zastępowania stylizacji w HTML za pomocą CSS. W tym przykładzie przyjrzymy się nadrzędnej pierwszeńce wbudowanej i zewnętrznej arkusza stylów oraz CSS używanych w stylu. Tak więc inicjowaliśmy tę ilustrację głównym tagiem „HTML”. Znacznik główny zawiera w nim link i styl. Rozpocznij wyjaśnienie tego programu od głównego znacznika „ciała”. Obszar ciała obejmuje pięć nagłówków dla pięciu różnych rozmiarów, i.mi., największy do najmniejszego.

Po wszystkich nagłówkach znacznik ciała został zamknięty, a zamykanie HTML podąża za nim. Spójrzmy teraz na znacznik „głowa”. Używamy w nim znacznika „tytułu” do tytułu strony HTML jako „Style zastępowania”. Następnie używamy znacznika „linku”, aby odwołać się do zewnętrznego arkusza stylów o nazwie „Test.CSS ”z tego samego folderu za pomocą właściwości„ HREF ”. Następnie mamy „styl” typ typu „Tekst/CSS”. Ten tag został wykorzystany ze względu na stylizację obszaru ciała tego pliku HTML. W nim używamy nagłówków H1, H3 i H5 i określamy „kolor” właściwości, aby pokolorować je „bordowy”. Tutaj styl i tag główny są bliskie.

Teraz spójrz na zewnętrzny plik CSS: „Testuj.CSS ”. Do stylizacji użyliśmy elementu ciała, H2 i H4. Kolor tła właściwości służy do przypisania koloru do ciała HTML. Kolor i margines lewicowe zostały użyte do wyświetlania nagłówków 1 i 4 w fioletowym i ustawionym marginesie 10 pikseli. Tag stylowy w HTML zawiera różne kolory dla wszystkich nagłówków, podczas gdy ten plik zewnętrzny zawiera różne kolory do nagłówka 2 i 4.

Zapiszmy kod i debuguj, używając przycisku menu „Uruchom” z paska zadań kodu Visual Studio Code. Wyjście pokazuje stronę HTML z tytułem „Style Override Style”. Nagłówki 1, 3 i 5 obracają bordowe, a nagłówki 4 i 5 stają się fioletowe. Wynika to z faktu, że styl stylistyki uzyskał pierwsze pierwszeństwo i został zastąpiony przez HTML zamiast zewnętrznego arkusza stylów.

Zaktualizujmy jeszcze raz kod. Aktualizowaliśmy kolor na kierunku 1, 3 i 5 tego pliku HTML w znaczniku stylu w znaczniku głównym. Reszta pozostałaby teraz niezmieniona.

W arkuszu stylów zewnętrznych używamy wszystkich pięciu nagłówków do zmiany koloru i marginesu odpowiednio na fioletowe i 30 pikseli. Zapisz ten plik CSS i uruchom ponownie kod.

Tym razem tylko nagłówki 1, 3 i 5 mają kolor „trawnikowy” z powodu użycia i pierwszeństwa stylizacji w pliku plików zamiast zewnętrznego pliku CSS.

Przykład 2
Rozpoczęliśmy ten przykład od znacznika HTML, a następnie znacznika głowy i tytułu. Znacznik ciała tego pliku HTML zawiera pojedynczy nagłówek 1 do wyświetlania na stronie internetowej HTML. Główny znacznik ciała i HTML został tutaj zamknięty po użyciu elementów ciała. Tag stylu w tagu głównym zawiera styl na czele 1, i.mi., Kolor określony jako „fioletowy”. Styl i metka są tutaj bliskie. Uruchom ten kod HTML z menu „Uruchom” po opcji „Rozpocznij debugowanie”.

Wykonanie tego pliku wyświetlało prosty nagłówek rozmiar 1 w fioletowym purple na naszej chromowanej przeglądarce nowa karta, jak wyświetlono poniżej:

Wykonajmy nadrzędne style w tym pliku HTML. Tak więc określiliśmy klasę „A” do kierowania 1 w otwieraniu znacznika H1. Ponadto, w stylu, użyliśmy tej klasy „A” do pokolorowania nagłówka, i.mi., Korzystanie z właściwości kolorów. Zapiszmy i uruchommy ten kod.

Teraz wyjście pokazuje, że kolor nagłówka został zaktualizowany do Brown. Oznacza to, że element klasy zastępuje proste elementy stylistyczne.

Teraz wykorzystaliśmy inną klasę w tym samym znaczniku H1 ciała HTML tego pliku. Nazwa klasy została określona jako „B” po klasie „A”. Z drugiej strony używamy klasy „B” do określenia koloru „Lawn Green”, do naśladowania 1.

Po zapisaniu tego skryptu aktualizacji HTML, wykonaliśmy go i otrzymaliśmy następujące dane wyjściowe. Wyjście pokazuje, że kolor nagłówka 1 został zaktualizowany do „Lawn Green”. To dowód, że element klasy może zastąpić inny element klasy.

Zaktualizujmy ponownie kod i użyj elementu „id” w kierunku H1 kodu HTML. Ten „id” można użyć po elementach klasowych i przed. Po tym, w obrębie znacznika stylu, określiliśmy kolor „niebieski” do nagłówka 1 za pomocą identyfikatora „C”.

Po wykonaniu tego zaktualizowanego kodu otrzymaliśmy zaktualizowaną stronę HTML. Kolor nagłówka 1 został zaktualizowany do Blue z Lawn Green. To pokazuje, że element „id” może zastąpić styl elementu „klasy”.

Teraz będziemy używać stylizacji inline dla tego kodu HTML i użyć właściwości „kolor” do przekształcenia nagłówka 1 w kolor „hotpink” bez dodawania go do zewnętrznego znacznika „stylu”. Ten tag w stylu wbudowanym był używany przed elementem „ID” nagłówka 1.

Po uruchomieniu tego zaktualizowanego pliku HTML otrzymaliśmy kolor „Hotpink” dla nagłówka, który zastąpił element „id”.

Używając "!Ważne ”atrybut wraz z dowolną właściwością dałby to własność pierwsze pierwszeństwo w porównaniu z innymi właściwościami. Użyliśmy „!Ważny ”atrybut z kolorową właściwością nagłówka 1 i zapisywał.

Pierwsze nastawienie zostało przekazane właściwości kolorów „fioletowej” określonej dla „H1”.

Wniosek

W tym artykule wyjaśniono pierwszeństwo elementów w celu zademonstrowania stylu zastępowania CSS w kodzie HTML. W wstępnym akapicie wyjaśnia, co jest nadrzędne i pierwszeństwo oraz wykorzystanie stylu nadrzędne dla różnych typów selektorów w szczegółach przy użyciu różnych technik stylizacji. W tym celu próbowaliśmy wdrożyć różne przykłady zawierające styl inline, zarys i stylów zewnętrznych. Wypróbowaliśmy różne typy elementów selektorów dla głównie tych samych elementów, aby wykonać styl zastąpienia.