Granice są używane na stronach HTML do rozgraniczenia i wyróżnienia treści. Jeśli na stronie jest dużo informacji i chcesz zwrócić uwagę użytkownika na określone części, użyj ramek wokół tych treści. W tym artykule o obramowaniach w CSS omówię następujące tematy:
- Kiedy używać Borders
- Granice w CSS
- Atrybuty obramowania CSS
- Domyślne wartości atrybutów obramowania
- Zdefiniuj granice w skrócie
- O czym należy pamiętać podczas projektowania obramowań w CSS
Kiedy używać Borders
Standardową praktyką jest używanie znaczników obramowania CSS do definiowania ramek na stronach HTML dla:
- Wokół ważnych nagłówków
- Aby wyróżnić postscriptum lub ważne notatki
- Załącz zdjęcia, ilustracje, cytaty z ludzi, filmy
- Aby zwrócić uwagę na ceny, harmonogramy lub tak ważne informacje
Możesz poczytać na zanim zaczniesz poznawać granice CSS.
Aby zapoznać się z obszernym samouczkiem dotyczącym CSS, odwiedź Samouczek Edureka CSS dla początkujących . Otrzymasz doskonałą informację na temat sposobu, w jaki CSS ma być używany do rozszerzania projektowania stron internetowych HTML.
Granice w CSS
Obramowania CSS można przypisać do różnych sekcji strony HTML, niezależnie od tego, czy mają one obejmować nagłówki, czy akapity. Zacznijmy od przykładu. Tutaj definiujemy obramowanie wokół nagłówka i inną ramkę wokół tekstu akapitu.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}Ramka wokół akapitu też!
Atrybuty obramowania CSS
Obramowania CSS mają 3 główne atrybuty
- styl:Plikstylatrybut określa wzór obramowania.
- kolor: Kolor może być dowolnym z zestawu określonego przez kolory CSS.
- szerokość: Szerokość służy do zmiany grubości obramowania, aby było bardziej widoczne.
W powyższym przykładzie widzieliśmy, że zdefiniowano tylko jeden atrybut border, czyli jego styl. Inne atrybuty, jeśli nie są zdefiniowane, przyjmują wartości domyślne. Jest jeszcze jeden atrybut zwany promieniem, który jest rzadziej używany. Służy do zaokrąglania krawędzi krawędzi.
- border-style atrybut
| Styl | Opis |
| border-style: solid | |
| border-style: double | |
| border-style: groove | |
| border-style: ridge | |
| border-style: inset | |
| border-style: początek | |
| border-style: brak | |
| border-style: ukryte | |
| border-style: kropkowane | |
| border-style: przerywany |
Można zauważyć, że istnieje również opcja „brak obramowania” i „ukryta granica”. Deweloper może po prostu uniknąć definiowania granicy, po co jawnie definiować ją jako „ukrytą granicę”? Odbywa się to w celu wykorzystania miejsca i wyrównania z innymi elementami na stronie.
Style obramowań można również mieszać w elemencie. W tym celu 4 poszczególne boki graniczne można oddzielnie zdefiniować za pomocą różnych stylów. Można to zrobić na 2 sposoby. Zdefiniuj wszystkie 4 boki w jednym tagu. W tym przypadku liczenie zaczyna się od górnej linii, a następnie przesuwa się zgodnie z ruchem wskazówek zegara. Alternatywnie, każdą z 4 granic można również zdefiniować w osobnych tagach. Oba przypadki przedstawiono w następnym przykładzie.
| Styl | Opis |
border-style: kropkowane przerywane pełne podwójne jak stworzyć zestaw border-top-style: kropkowane border-right-style: przerywany border-bottom-style: solid border-left-style: double |
- kolor ramki atrybut
Atrybut koloru dla obramowania można ustawić na wiele sposobów. Jest to podobne do ustawiania koloru dla innych elementów. Kolory można ustawić jedną z następujących metod:
- Nazwa - określ nazwę koloru, np. „Niebieski”. Możesz także wypróbować kilka wymyślnych opcji kolorystycznych, takich jak „BlanchedAlmond”!
- Klątwa - podaj wartość szesnastkową, np. „# Ff0000”
- RGB - ustaw kod RGB. Na przykład rgb (255,255,0) oznacza żółty.
- oprawa - np. „Przezroczysty” lub „nieprzezroczysty”
- szerokość granicy atrybut:
Właściwość width, jak sama nazwa wskazuje, definiuje grubość 4 krawędzi krawędzi. Jeśli zdefiniowano jedną wartość, dotyczy to wszystkich stron, w przeciwnym razie można również ustawić indywidualne wartości szerokości.
Szerokość można określić w dowolnej jednostce standardowej, takiej jak piksele („px”), punkty („pt”) lub w centymetrach („cm”). Możesz również określić szerokość, używając wstępnie zdefiniowanych wartości „gruby”, „cienki” i „średni”.
| Styl | Opis |
| border-width: 10px | |
| border-width: 0,1 cm | |
| border-width: medium |
- border-radius atrybut
Celem zdefiniowania promienia jest uzyskanie zaokrąglonych rogów granicy. Współczynnik promienia określa stopień zaokrąglenia. Im większa wartość, tym bardziej zakrzywione stają się rogi. Standardowo wartości promienia są utrzymywane w przedziale 1-3 razy większym od szerokości obramowania.
Poniższy kod wygeneruje:
border-width: 10px
border-radius: 30px
Domyślne wartości atrybutów obramowania
Jedynym obowiązkowym atrybutem jest styl . Jeśli brakuje stylu, obramowanie nie pojawi się.
Jeśli kolor nie zostanie określony, kolor elementu bazowego jest przyjmowany jako wartość domyślna. Na przykład, jeśli kolor tekstu akapitu jest zdefiniowany jako „niebieski”, wówczas domyślny kolor obramowania również będzie niebieski. W przypadku braku definicji koloru nawet dla elementu, domyślnym kolorem jest „czarny”.
Domyślna wartość szerokości to „średnia”.
Zdefiniuj granice w skrócie
Niektórzy programiści wolą definiować atrybuty obramowania w zwięzłym, jednowierszowym tagu. Ten skrótowy format pomaga zminimalizować liczbę linii kodu, a doświadczeni programiści preferują ten format. Używanie formatu skróconego jest zalecane, gdy definicja obramowania jest prosta i dość znormalizowana. Jeśli jednak potrzebujesz podświetlić każdą stronę obramowania w innym stylu, to musisz trzymać się formatu definiowania poszczególnych tagów.
Używany jest następujący kod:
border-style: przerywany
border-color: zielony
border-width: 5px
obramowanie: przerywana zielona 5px
O czym należy pamiętać podczas projektowania obramowań w CSS
Nie używaj zbyt wielu obramowań na stronie, może to rozpraszać i utrudniać użytkownikowi skupienie się.
Ważne jest, aby zachować spójność stylu i kolorów obramowania. Elementy na tym samym poziomie hierarchii na stronie muszą mieć podobny styl obramowania i szerokość, aby zapewnić jednolitość. Na przykład, jeśli ustęp jest zdefiniowany za pomocą jednolitej ramki i szerokości 5 pikseli, zachowaj ten format w innych ustęp elementy podczas projektowania strony internetowej.
Trzymaj się jednego stylu definicji znaczników. Niektórzy programiści dobrze znają definicje skrótów, w których wszystkie wartości są przypisane do pojedynczego granica etykietka. Inni wolą wyraźną listę wszystkich tagów dla szerokości, koloru i stylu. Konwencja jest taka, że gdy na stronie wymagane są skomplikowane dekoracje obramowań, poszczególne tagi są wymienione osobno. Pomaga to podczas debugowania takich niestandardowych definicji granic. W normalnych przypadkach wystarczyłaby definicja skrótu.
Mam nadzieję, że znalazłeś informacje, których szukałeś w obramowaniach CSS, a wW ten sposób dochodzimy do końca artykułu Borders in CSS.
Sprawdź nasze który obejmuje szkolenie na żywo prowadzone przez instruktora i rzeczywiste doświadczenie projektowe. To szkolenie zapewni Ci biegłość w pracy z technologiami internetowymi zaplecza i front-endu. Obejmuje szkolenia w zakresie tworzenia stron internetowych, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy na blogu „Border in CSS”, a my skontaktujemy się z Tobą.