Wielkość granicy CSS
Przykład 01: Używanie CSS tagów stylów do zmiany rozmiaru granicy w pliku HTML
W tym przykładzie zmienimy rozmiar granicy pojemnika Div za pomocą CSS w znaczniku głównym w pliku HTML. Zdefiniujemy uniwersalną funkcję dla wszystkich kontenerów Div, które zostaną utworzone w tym pliku, aby mieć predefiniowany styl edycji, który zdefiniujemy w sekcji DIV, obecnej w znaczniku stylu. Aby wykonać to zadanie, wygenerujemy następujący skrypt:
Jak widać w powyższym skrypcie pliku HTML, otworzyliśmy znacznik stylu, w którym wywołuje się div, który ma kilka właściwości zdefiniowanych jeden po drugim. Pierwszy to wyściółka, która da kontenerowi DIV przestrzeń między stroną przeglądarki a granicami. Następnie nazywamy samą własność graniczną i, we tej właściwości, zdefiniujemy wielkość granicy i typ granicznego; W naszym przypadku jest ustawiony na „1px” i „solidne.”Następnie dodaliśmy zestawy internetowe, które będą obsługiwać najczęściej używane przeglądarki w tej samej funkcji właściwości. Następnie zamknęliśmy styl i tag na głowie i otworzyliśmy znacznik nadwozia. W tym znaczniku wspomnieliśmy o wszystkim, co będzie obecne na stronie po otwarciu tego pliku w przeglądarce.
Dodaliśmy nagłówek za pomocą znacznika „H2”, a także dodaliśmy pojemnik Div z pewnym tekstem. Ten kontener Div odziedziczy wszystkie właściwości zdefiniowane w znaczniku stylu, który jest obecny w nagłówku pliku. Te tagi zostaną zamknięte po tym. A teraz zapiszymy ten plik w „.Format HTML ”i otwórz go w przeglądarce, aby zobaczyć następujące dane wyjściowe:
Jak widać na powyższym wyjściu, nagłówek i pojemnik Div są obecne, a granica pojemnika jest również pokazywana z cienkim rozmiarem wraz z pewnym tekstem.
Teraz edytujemy powyższy skrypt i wprowadzimy zmiany w rozmiarze granic w znaczniku stylu sekcji nagłówka, aby wizualizować różnicę między rozmiarem granicy pojemnika.
W powyższym skrypcie skorygowaliśmy rozmiar od „1px” do „5px”, aby wygenerować grubszą obramowanie dla pojemnika. Obserwujmy teraz, jak ta zmiana pojawia się w naszej przeglądarce, gdy wykonujemy skrypt.
Jak widać na powyższym wyjściu, że rozmiar granicy jest teraz gruby w porównaniu z poprzednimi wyjściami.
Przykład nr 02: Tworzenie klasy w znaczniku stylu CSS w celu kontrolowania rozmiaru granicy w pliku HTML
W tym przykładzie stworzymy specjalną klasę stylizacji CSS, w której zdefiniujemy każdy aspekt stylizacji, który chcemy w całym pliku. Jest to bardzo pomocna metoda, ponieważ możemy rozróżnić różne projekty w jednym pliku HTML i sklasyfikować je do różnych klas. W tym przykładzie sklasyfikujemy stylizację granicy dowolnego pojemnika. Aby to osiągnąć, napiszemy następujący skrypt:
Jak widzimy w tym skrypcie, otworzyliśmy znacznik stylu w nagłówku pliku HTML. W tym stylu utworzyliśmy klasę do stylizacji tagów akapitowych, w której zdefiniowaliśmy dwie właściwości dla granicy, które są stylami i szerokością. Właściwość stylu jest ustawiona na solidne, co oznacza, że granica będzie jednolita, linia prosta, a właściwość szerokości jest ustawiona na cienką, co oznacza, że rozmiar granicy będzie cienki. Następnie zamknęliśmy styl i znacznik głowy i ruszyliśmy w kierunku znacznika ciała. W znaczniku ciała podaliśmy nagłówek i akapit na stronie HTML. W znaczniku akapitu nazywaliśmy „P.klasa BW1 ”, która ma predefiniowane właściwości graniczne. Zamkniemy tagi i zapiszemy ten plik, abyśmy mogli uruchomić to w naszej przeglądarce.
Po uruchomieniu tego skryptu w naszej przeglądarce otrzymamy powyższe dane wyjściowe. Jak widzimy, klasa stylu dla tagu akapitu dodała solidną i cienką granicę do akapitu obecnego w ciele.
Teraz zmienimy wielkość granicy obecnej w powyższym skrypcie i obserwujemy wpływ tych odmian na granicę.
W tej sytuacji edytowaliśmy szerokość od cienkiego do medium, a po uruchomieniu tego skryptu otrzymamy następujące dane wyjściowe:
Na tej mocy wielkość granicy zmieniła się z cienki na średnią i jest teraz znacznie bardziej widoczny. Następnie zmienimy rozmiar z średniego na grube, jak pokazano w skrypcie poniżej:
Po uruchomieniu tego skryptu otrzymamy następujące dane wyjściowe:
Po zmianie szerokości na grubą widzimy, że granica jest bardzo szersza i dość łatwo widoczna.
Przykład nr 03: Używanie arkusza stylów CSS Tailwind do zmiany rozmiaru granicy za pomocą klasy granicznej
W tym przykładzie użyjemy arkusza stylów CSS Tailwind, aby zmienić rozmiar granicy za pomocą klasy granicznej zdefiniowanej w tym arkuszu stylów. Klasa graniczna ma kilka predefiniowanych rozmiarów dla granicy, które zbadamy w tym przykładzie, wdrażając to w Notatniku++.
W powyższym skrypcie będziemy dodawać link do arkusza stylów CSS Tailwind za pomocą znacznika łącza w nagłówku pliku. Następnie otworzymy znacznik ciała i nagłówek. Następnie otworzymy znacznik DIV, który nazwiemy klasę granicy 2 z kodem koloru granicznego, a następnie znacznik akapitu będzie zawierać w nim tekst nadwozia pojemnika Div. Teraz zapiszymy ten plik i otworzymy go w naszej przeglądarce, aby zobaczyć, jak potoczy się granica.
Jak widzimy, rozmiar granicy jest bardzo cienki i można go dostosować do większego rozmiar.
Jak widzimy w powyższym fragmencie, granica jest teraz grubsza niż wcześniej z powodu klasą graniczną-8.
Wniosek
W tym artykule skupiliśmy się na atrybucie „rozmiaru” CSS granicy. Rozmiar granicy jest powszechnie określany z dwoma identyfikatorami: pikseli i reprezentacji tekstowej, takimi jak „cienki”, „medium” i „grube.„Omówiliśmy kilka metod zmiany wielkości granicy za pomocą CSS w pliku HTML w tym artykule. Wykorzystaliśmy środowisko Notepad ++ do edytowania naszego pliku HTML i zaimplementowaliśmy konwencjonalne metody CSS metody stylu i klasy stylu, aby zmienić rozmiar granicy. Wykorzystaliśmy również arkusz stylów CS Tailwind CS, aby wywołać jego klasy graniczne, które zapewniały różne rozmiary dla granicy pojemnika i można je wywołać za pomocą stylizacji CSS CSS.