CSS usuwa granicę
Przykład 01:
Zacznijmy od najbardziej podstawowej ilustracji usuwania granicy z określonych elementów skryptu HTML. W tym celu rozpoczęliśmy nasz kod z głównym znacznikiem „HTML” skryptu HTML. Omówmy najpierw znacznik „ciała”, jak pokazano poniżej. Wykorzystuje dwa nagłówki największego rozmiaru, „1”. Oba nagłówki są tutaj używane z różnymi tytułami, aby je odróżnić. Ponadto określiliśmy klasy „a” i „b” w obrębie znaczników nagłówka osobno, aby używać tych klas w stylistyce do osobnego stylizowania obu nagłówków.
W obrębie znacznika „stylu” osobno stylizowaliśmy oba nagłówki za pomocą ich klas „A” i „B”. Dodaliśmy wyściółkę 10 pikseli i szerokość 400 pikseli dla obu nagłówków za pośrednictwem właściwości wyściółki i szerokości. Tak więc przypisaliśmy 3-pikselową solidną zieloną granicę do pierwszego nagłówka za pośrednictwem nieruchomości granicznej, a dla drugiego nagłówka nieruchomość graniczna nie ma żadnego. Zapiszmy ten skrypt HTML i uruchom go w przeglądarce Chrome.
Dane wyjściowe tej strony zostały wyświetlone na zakładce Chrome. Pierwszy nagłówek został wyświetlony z zieloną stałą granicą 3 pikseli. Drugi nagłówek został wyświetlony bez obramowania, tej samej szerokości i niektórych wyściółki.
Rzućmy okiem na to, jak jedna strona granicy można usunąć z elementu za pomocą wzmocnionej właściwości granicznej. W ten sposób zaktualizowaliśmy powyższy kod, jak pokazano na poniższym obrazku. Używamy tego samego znacznika ciała wraz z jego wewnętrznymi znacznikami lub nagłówkami. W ramach stylu tego pliku HTML dodaliśmy właściwości marginesu i wyściółki, aby jednolicie rozłożyć nagłówki na stronie internetowej. Następnie użyliśmy właściwości granicznej dla obu nagłówków osobno. Każda granica 3 pikseli stała została ustalona dla obu. Pierwszy nagłówek będzie zawierał obramowanie zielonego koloru, a drugi nagłówek będzie zawierać niebieską obramowanie koloru.
Podczas gdy właściwości granic i lewy graniczne granice zostały ustawione na „Brak” dla obu nagłówków, aby usunąć prawą i lewą stronę nagłówka 1 i nagłówka 2 odpowiednio. Zapiszmy i uruchommy tę aktualizację.
Wyjście wyświetla dwa nagłówki zielonych i niebieskich granic. Podczas gdy prawa strona pierwszej granicy i lewej strony drugiej granicy jest usuwana. Stało się tak z powodu zastosowania własności granic i prawej granic granic po ustawieniu zarówno „Brak”.
Przykład 02:
Wraz z tworzeniem stałej granicy, możesz również utworzyć zarys dla dowolnego konkretnego elementu strony internetowej HTML bez użycia granicy. Zarys i granice wyglądają wyraźnie podobnie, ale mają zupełnie inne właściwości. Użyjmy właściwości zarysowej języka skryptowego HTML, aby utworzyć kropkowany zarys. Będziemy używać tego samego pliku HTML bez zmiany większości jego skryptu. To samo ciało z tagami i dość podobną stylistyką. Jedyna zmiana została dokonana w stylu, w którym ustawialiśmy CSS dla obu nagłówków.
Tutaj korzystamy z właściwości zarysowej dla obu nagłówków. Zarys pierwszego nagłówka wynosiłby 3 pikseli usiane w kolorze niebieskim, podczas gdy drugi nagłówek nie będzie zawierał żadnego nagłówka zgodnie z wartością „Brak” dla właściwości konturowej. Zapiszmy i debugujmy ten skrypt HTML, aby zobaczyć wyniki za pomocą kodu Visual Studio.
Po debugowaniu otworzyliśmy stronę HTML w przeglądarce Chrome i otrzymaliśmy poniższy wynik. Strona wyjściowa HTML pokazuje pierwszy nagłówek z rozsianym konturem i drugim nagłówkiem bez konturu lub obramowania.
Chodziło o stworzenie zarysu wokół nagłówków. Utwórzmy przerywane, kropkowane i solidne kontury dla nagłówków w kodzie HTML. Używaliśmy w sumie 4 akapitów na tej stronie za pomocą znacznika „P” w znaczniku ciała wraz z określonymi klasami, a, b, c i d. W obrębie stylu używamy klas do akapitów, aby osobno stylizować każdy akapit. Własność nieruchomości, wyściółka i właściwość szerokości są używane z tymi samymi wartościami dla wszystkich trzech akapitów. Wykorzystaliśmy nieruchomość graniczną do pierwszego akapitu, aby stworzyć kropkowany akapit o czerwonym kolorze. Właściwość graniczna ustawiona na „Brak” została użyta dla drugiego akapitu, aby stworzyć granicę bez. Trzecia nieruchomość graniczna w ramach „P.akapit klasy C ”został użyty do ustawienia 3-pikselowego przerywanego obramowania czekoladowego. W ostatnim stylizacji używamy właściwości granicznej, aby dodać 3-pikselową stałą granicę fioletowego koloru wokół czwartej nagłówki tej strony. Zapiszmy ten kod i uruchommy go, aby zobaczyć wyniki.
Wyjście tego programu HTML pokazuje wyświetlanie jednego nagłówka i 4 akapitów. Pierwszy akapit jest otoczony kropkowaną czerwoną granicą, druga nie ma granicy, trzecia ma przerywaną granicę czekoladową, a ostatnia ma stałą granicę kolorów.
Przykład 03:
Rzućmy okiem na nasz ostatni przykład, aby usunąć granicę z otoczenia stołowego. W tym celu będziemy używać dwóch tabel do porównania. W obrębie znacznika tego pliku HTML używamy dwóch osobnych tagów tabeli do tworzenia tabel. Obie tabele mają te same kolumny nagłówka i te same kolumny danych, 3 kolumny i 3 wiersze. Przypisowaliśmy różne „id” do obu tabel, aby je wyróżnić w stylu, A i B.
W obrębie stylu używamy tego samego marginesu, wyściółki i właściwości granicznej dla obu tabel. W klasie „B” tabeli 2 używamy właściwości ustawionej na kółka graniczna do „zawalenia się”, aby zawalić się granicę tabeli. Zapiszmy teraz i uruchommy ten kod teraz.
Dane wyjściowe tego kodu HTML wyświetlało dwie tabele statyczne. Pierwszy to wewnętrzna i zewnętrzna granica, podczas gdy druga ma zawaloną granicę.
Wniosek:
W tym artykule wprowadzono użycie właściwości granicznej do usunięcia jednej lub więcej stron granic wokół dowolnego elementu strony internetowej HTML. Omówiliśmy, w jaki sposób można wyłącznie wykorzystać właściwości graniczne, prawe graniczne, graniczne i graniczne. Omówiliśmy również zastosowanie granicy i zarysie w tych przykładach i omówiliśmy, w jaki sposób można użyć właściwości wkupli granicznej do usuwania granic wokół elementu tabeli. Dodaliśmy najprostsze ilustracje dla czytelników w celu osiągnięcia poziomu zrozumiałości.