Zamówienie CSS
Przykład
Zacznijmy od pierwszej ilustracji tego artykułu, aby zademonstrować użycie „zamówienia” właściwości stylizacji CSS w HTML. Potrzebujesz pliku typu „HTML”, aby dodać i uruchomić kod HTML. Tak więc utworzyliśmy nowy plik „Testuj.html ”, w naszym folderze„ artykuły ”i otworzył go za pomocą kodu Visual Studio. Kod HTML musi zostać uruchomiony z „
Zaczniemy wyjaśniać ten przykład z podstawowego znacznika „głowy”. W tym znaczniku używamy różnych właściwości CSS dla poszczególnych elementów HTML zdefiniowanych w tym pliku HTML za pomocą znacznika „stylu”. Najpierw stylizowaliśmy główny znacznik „div” używany w „ciała” naszej strony HTML za pomocą określonego identyfikatora, i.mi., "główny". Tagi „div” są zawsze używane do podziału strony na sekcje lub elementy, aby oddzielić niektóre elementy i zawartość strony HTML od innych. Używamy szerokości właściwości i wysokości do zdefiniowania szerokości i długości tego elementu „div” na stronie HTML w pikselach, i.mi., Szerokość 400px i wysokość 70px.
Ten obszar „DIB” zawierałby stałą granicę pięciopikselowej czarnej granicy wokół niej. Ta granica zdefiniowałaby granicę głównego obszaru „div”. Następnie użyliśmy głównego identyfikatora Tagu Div, aby zastosować CSS na tagach „Div” dziecku. Ustawiliśmy szerokość na 100 pikseli i wysokości na 70 pikseli dla wszystkich pięciu wewnętrznych znaczników elementów „Div”, które leżą w głównej sekcji „Div” tego znacznika HTML. Te wysokości i szerokości dla wewnętrznych i zewnętrznych elementów div są określone tak, aby zmieściły się w równym stopniu pięć tagów div w zewnętrznym znaczniku. Następnie użyliśmy pięciu identyfikatorów tagów div osobno na pięciu liniach, aby stylizować wszystkie pięć sekcji „Div” odpowiednio i inaczej. Oto „zamówienie” właściwości stylizacji CSS, aby zamówić pięć tagów DIV według liczb. Brązowy „div” zostanie wyświetlony na 3r & D, niebieski na 5th, zielony na 2Nd, fioletowy na 1St, i pomarańczowe na 4th. Styl i znacznik głowy zamknęły się tutaj.
Zacznijmy wyjaśniać podstawowy znacznik „ciała” używany do definiowania i reprezentowania podstawowych elementów na stronie internetowej naszej przeglądarki. W ramach tego znacznika użyliśmy głównego znacznika nagłówka o wielkości pierwszym, głównym znaczniku „Div” i pięciorga „Div” znaczników wymienionych jeden po drugim. Główny znacznik „div” został określony za pomocą identyfikatora „głównego”, aby stylizować go w znaczniku głowy i można go łatwo zróżnicować. Wewnętrzne pięć „div” tagów zostało określonych z pewnym stylem i ich osobnymi identyfikatorami, i.mi., brązowy, niebieski, zielony, fioletowy i pomarańczowy.
Te identyfikatory byłyby używane do stylizacji tych „div” tagów osobno w stylu. Stylowaliśmy wszystkie pięć tagów, używając elementu „stylu” w ramach wszystkich pięciu tagów Div przy użyciu metody stylizacji CSS. Właściwość koloru tła została użyta do określenia kolorów dla wszystkich pięciu tagów div, i.mi., brązowy, niebieski, zielony, fioletowy i pomarańczowy. Te pięć kolorów zostało wypełnionych w pudełkach stworzonych przez elementy „div” na stronie i wyglądały świetnie na ekranie. Główny znacznik „div” i główny znacznik „ciała” zostały tutaj zamknięte. Ponadto nasze główne zamykanie „HTML” zostanie użyte tutaj do zakończenia kodu HTML i sprawić, że działa płynnie.
Najpierw zapiszmy ten kod z Ctrl+s. Następnie dotknij menu „Uruchom” z paska zadań narzędzia kodu Visual Studio. Stuknij opcję pokazaną „Uruchom bez debugowania” i wybierz przeglądarkę, aby kontynuować. Do jej wykonania będziemy używać przeglądarki Google Chrome.
Karta wyjściowa przeglądarki Chrome wyświetla następujący obraz pięciu części Div w jednej głównej „div” stałej czarnej granicy. Sekwencja pól „Div” dziecka jest taka sama, jak opisaliśmy w wyjaśnieniu kodu, i.mi., fioletowy 1St, Zielony 2Nd, Brown 3r & D, Orange 4th, i niebieski 5th. Chociaż zdefiniowaliśmy losową sekwencję elementów „div” w stylu CSS, nie wpływa ona na wyjście i jest wyświetlane zgodnie z definicją w stylu.
Poprzednia ilustracja kodu i jego wyjście internetowe pokazują nam użycie liczb losowych w właściwości „Zamów” do ustawienia znaczników „Div” na pozycje losowe. Te wartości dla właściwości „zamówienia” były prostymi dodatnimi liczbami całkowitych. Stąd nie mamy problemów. Co jeśli użytkownik spróbuje ustawić właściwość zamówienia z wartościami ujemnymi w znaczniku stylu? Spróbujmy, aby zobaczyć wyniki. Więc aktualizowaliśmy nasz kod, aby to zrobić. W obrębie znacznika stylu aktualizowaliśmy wartość właściwości „zamów” dla każdego wewnętrznego znacznika „div”. Dla Browna jest to 3. Dla niebieskiego jest to -1. Dla zielonego jest to 2. Dla fioletu jest to -2. Wreszcie, dla pomarańczowej jest 0. Wartości te definiują wskaźnik głównego elementu „div”. Zapiszmy ten kod, aby zobaczyć.
Uruchamiając ten zaktualizowany kod w przeglądarce Chrome, mamy zaktualizowany wynik wyjściowy pokazany poniżej. Jak zdefiniowaliśmy 0 dla właściwości zamówienia „pomarańczowej” div, został wyświetlony na środku głównej div. Zielone i brązowe znaczniki „div” są wyświetlane po prawej stronie po pomarańczowym „div”. Zastosowanie -2 dla fioletowych div i -1 dla niebieskiego znacznika wyświetliło wewnętrzne znaczniki „div” zgodnie z sekwencją liczb całkowitych ujemnych.
Wniosek
W tym artykule zawiera proste i krótkie wyjaśnienie korzystania z właściwości CSS „zamów” w kodzie HTML. W tym celu wyjaśniliśmy krótki przykład kodu HTML. Ten przykład zawierał użycie elementów „div” do prawidłowego rozwinięcia koncepcji właściwości CSS „Zakaz”. Omówiliśmy szczegółową analizę wykorzystania dodatnich wartości liczb całkowitych dla właściwości zamówienia i porównaliśmy ją z zastosowaniem negatywnych wartości całkowitych dla tej samej właściwości.