CSS nie zawisły
Przykład nr 01:
Przyjrzymy się niektórym elementom HTML, stosując na nich nieruchomość nie zawieszoną. Rozpoczęliśmy pierwszy przykład z podstawowego znacznika HTML, który jest koniecznością w dowolnym kodzie HTML, ponieważ bez niego nasz kod i tak nie zadziała. Po znaczniku HTML jest znacznik głowy i znacznik ciała. W obrębie znacznika naszej strony HTML używamy nagłówka o rozmiar 1 lub największego nagłówka stron internetowych HTML. Po tym nagłówku używamy tagu DIV do utworzenia nowej sekcji na naszej stronie internetowej.
Ten znacznik został określony jako rodzic za pomocą stylu klasy. W ramach tego głównego znacznika div używamy pięciu tagów dziecięcych. Wszystkie pięć tagów dziecięcych jest określonych jako „dziecko” za pomocą atrybutu klasowego. Ponadto wszystkie sekcje dziecięce zawierają inną numerację zgodnie z ich wystąpieniem. Główny znacznik „div” i znacznik ciała są zamknięte. Nadchodzi tag tytułowy, który został użyty do nadania nazwy tej stronie internetowej. Tag stylu został rozpoczęty od użycia specyfikacji klasy „nadrzędnych” w celu stylizacji sekcji div „nadrzędnej” tej strony.
Właściwość wyświetlacza CSS została użyta dla sekcji Div Dent, aby wyświetlić ją w pozycji rzędowej. Kolor tła został ustawiony, a granica tego tła została ustawiona na 1 piksel stały z białym kolorem. Podczas gdy szerokość sekcji „Div” macierzysty wynosiłaby 500 pikseli, a wysokość wynosiłaby 120 pikseli. Ten sam wyświetlacz był używany do sekcji dziecięcych, a tło zostało ustawione na inny kolor. Również granica 5 pikseli stały zielony kolor został ustawiony na sekcje dziecięce. Szerokość i wysokość sekcji dziecięcych zostały zdefiniowane jako 100 pikseli każda. Sekcje dziecięce zawierają dodatkowy styl w porównaniu z sekcją rodzica. Właściwość przejściowa została ustawiona na 0.5 sekund wraz z rodziną czcionki. Masa czcionka została ustawiona na odważną, a rozmiar czcionki wynosiłby 100 pikseli dla sekcji dziecięcych. Czas użyć właściwości nie nachylonej dla sekcji dziecięcych z krycie 0.5. Ten kod HTML został zakończony i będziemy go wykonać w przeglądarce Chrome, aby zobaczyć, jak działa właściwość Not Hover.
Wyjście dla tego kodu HTML podano poniżej. Pokazuje, że sekcja nadrzędna zawiera również 5 sekcji dziecięcych, ale użycie niewidniego właściwości dla sesji dziecięcej nie pozwala na zmianę ich koloru.
Przykład nr 02:
Weźmy kolejny przykład HTML, aby zobaczyć działanie właściwości nie nachylonej na różnych elementach. Będziemy inicjować tę ilustrację tym samym HTML i znacznikiem głównym zawierającym w nim tag tytułowy. Rozejrzyjmy się najpierw na ciało tej strony HTML. W obrębie znacznika ciała używamy nagłówka o największym rozmiarze w HTML. Używamy znacznika DIV do utworzenia nowej sekcji na naszej stronie internetowej HTML. Ta sekcja DIV zawierałaby niektóre znaczniki kotwiczne dla adresów URL i niektóre listy. Używamy pierwszego znacznika kotwicy na słowie domowym w głównej sekcji „Div”, która przekierowuje nas na aktualnie otwartą stronę. Założyliśmy listę nieopisaną zawierającą w niej pojedynczą listę. Ten element pojedynczej listy zawiera znacznik kotwicy wraz z nieuporządkowaną listą 3 pozycji listy. Te elementy listy byłyby również odnoszące się do niektórych serwisów społecznościowych za pomocą trzech elementów listy znacznik. Wszystkie te trzy tagi kotwiczne zostały sklasyfikowane jako dziecko. Niezaporządkowana lista elementów pojedynczej listy została zamknięta wraz z zamykaniem zewnętrznej listy nieuporządkowanej.
Teraz będziemy patrzeć na tag stylu. Kolor tła dla całej sekcji div został określony jako jasnozielony. Tagi kotwiczne tej sekcji nie mają dekoracji tekstu, ale kolor byłby biały, a rozmiar czcionki wynosiłby 25 pikseli z wyściółką 15px. Styl wyświetlania byłby wbudowany. Główna lista nieopisana została określona z wyświetlaczem rzędowym, 0 marginesów i 0.5-pikselowe wyściółki. Pojedyncza lista w uporządkowanej listy zostanie wyświetlona w formacie bloków inline.
Własność zawisowań została użyta dla tej listy, aby zmienić kolor na szary po unośniku. Po zastosowaniu właściwości nachylenia lista nieopisana w niej zostanie wyświetlona jako blok wbudowany. Pozycja została ustawiona na absolutne. Szerokość została ustawiona na 200 pikseli, a wyświetlacz został ustawiony na brak dla listy nieopisanej na liście pojedynczej uporządkowanej. W przypadku uporządkowanej listy wewnątrz listy nieopisanej określliśmy kolor tła i wyświetliśmy go jako blok. Wyświetlacz blokowy dla kotwicy byłby najważniejszy, aby uzyskać priorytet.
Trzy listy również używają właściwości zawieszonej z tłem niebieskim. Każdy element, który został sklasyfikowany jako dziecko, użyłby właściwości nie nachylonej z krycie 0.3 i szkarłatny kolor.
Kiedy wykonujemy ten kod, wyświetla on wyjście z menu menu Home and Setworks w sieciach i sieci społecznościowej.
Kiedy unosimy się nad „sieciami społecznościowymi”, stał się bardziej widoczny, a wyświetlona lista uporządkowana zostanie wyświetlona.
Po unoszeniu nad elementem uporządkowanej listy tło zmieniło się na niebieski czas z białym tekstem. Użycie właściwości nie: nie zmienia jednak koloru tekstu.
Wniosek
Ten artykuł dotyczył użycia nie: Własności CSS na niektórych elementach HTML na stronie internetowej. Omówiliśmy dwa proste i unikalne przykłady, aby pokazać je w kodzie Visual Studio. W pierwszym przykładzie próbowaliśmy go użyć w elemencie „Div” HTML, aw drugim przykładzie został użyty na nieorządkowanych i uporządkowanych listach HTML. Oba przykłady są zupełnie inne od siebie, ale obejmują tę samą koncepcję dla obu.