Границите се използват в HTML страници за разграничаване и подчертаване на съдържанието. Когато на дадена страница има много информация и искате да насочите вниманието на потребителя към конкретни части, използвайте граници около това съдържание. В тази статия за Граници в CSS ще обсъдя следните теми:
- Кога да използвате граници
- Граници в CSS
- Атрибути на CSS Border
- Стойности по подразбиране за гранични атрибути
- Определете границите в стенографията
- Точки, които трябва да имате предвид, докато проектирате граници в CSS
Кога да използвате граници
Стандартната практика е да се използват CSS гранични маркери за дефиниране на граници в HTML страници за:
- Около важни заглавия
- За да подчертаете послепис или важни бележки
- За да приложите снимки, илюстрации, цитати от хора, видеоклипове
- Да се обърне внимание на ценообразуването, сроковете или такава значима информация
Може да искате да прочетете на преди да започнете да научавате за границите на CSS.
За изчерпателен урок за CSS посетете Edureka CSS Урок за начинаещи . Ще получите отлична информация за начина, по който CSS трябва да се използва за увеличаване на HTML уеб дизайна.
Граници в CSS
CSS граници могат да се присвояват на различни раздели на HTML страницата, независимо дали е за заграждане или абзаци. Нека започнем с пример. Тук дефинираме граница около заглавието и друга граница около текста на абзаца.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}Граница и около абзаца!
Атрибути на CSS Border
CSS границите имат 3 основни атрибута на своите
- стил:Theстилатрибут определя модела на границата.
- цвят: Цветът може да бъде всеки от набора, определен от CSS цветове.
- ширина: Ширината се използва, за да варира дебелината на границата, за да я направи по-забележима.
В горния пример видяхме, че е дефиниран само един атрибут на границата, това е неговият стил. Останалите атрибути, когато не са дефинирани, приемат стойности по подразбиране. Има и друг атрибут, наречен радиус, който се използва по-рядко. Използва се за закръгляване на ръбовете на границата.
- граничен стил атрибут
| Стил | Описание |
| граничен стил: плътен | |
| граничен стил: двойно | |
| граничен стил: бразда | |
| граничен стил: билото | |
| граничен стил: вложка | |
| граничен стил: начало | |
| граничен стил: няма | |
| граничен стил: скрит | |
| граничен стил: пунктиран | |
| граничен стил: тире |
Ще забележите, че има опция „без граница“ и „скрита граница“. Разработчикът може просто да избегне дефинирането на граница, защо изрично да го дефинира като „скрита граница“? Това се прави с цел използване на пространството и подравняване с други елементи на страницата.
Граничните стилове също могат да се смесват в рамките на елемент. За тази цел 4-те отделни гранични страни могат да бъдат определени поотделно с различни стилове. Това може да стане по 2 начина. Или дефинирайте всичките 4 страни в един таг. В този случай броенето започва от горния ред и след това се движи по посока на часовниковата стрелка. Като алтернатива, всяка от 4-те гранични линии също може да бъде дефинирана в отделни маркери. И двата случая са показани в следващия пример.
| Стил | Описание |
| граничен стил: пунктирана пунктирана плътна двойна граничен стил: пунктиран граничен десен стил: пунктирана стил на бордюр: твърдо граница вляво-стил: двойно |
- граничен цвят атрибут
Атрибутът цвят за граница може да бъде зададен по няколко начина. Това е подобно на задаването на цвят за други елементи. Цветовете могат да бъдат зададени по един от следните методи:
- име - посочете име на цвят, като „син“. Можете също така да изпробвате някои изискани цветови опции като „BlanchedAlmond“!
- Шестнадесетичен - посочете шестнадесетична стойност, като „# ff0000“
- RGB - задайте RGB кода. Например rgb (255,255,0) означава жълто.
- настройка - като „прозрачен“ или „непрозрачен“
- широчина на границата атрибут:
Свойството width, както подсказва името, определя дебелината на 4-те гранични страни. Ако е дефинирана една стойност, тя е за всички страни, в противен случай също могат да бъдат зададени индивидуални стойности на ширината.
Ширината може да бъде посочена във всяка от стандартните единици, като пиксели (‘px’), точки (‘pt’) или в сантиметри (‘cm’). Можете също така да посочите ширината, като използвате предварително дефинирани стойности на „дебел“, „тънък“ и „среден“.
| Стил | Описание |
| широчина на границата: 10 пиксела | |
| широчина на границата: 0,1 см | |
| широчина на границата: средна |
- граница-радиус атрибут
Целта на определянето на радиус е да се получат заоблени ъгли за границата. Коефициентът на радиус определя степента на закръгленост. Колкото по-голяма е стойността, толкова по-извити стават ъглите. Като стандартна практика стойностите на радиуса се поддържат между 1-3 пъти ширината на границата.
Следният код ще генерира:
широчина на границата: 10 пиксела
граница-радиус: 30px
Стойности по подразбиране за гранични атрибути
Единственият задължителен атрибут е стил . Ако стилът липсва, границата няма да се появи.
Ако цветът не е посочен, цветът от основния елемент се приема като стойност по подразбиране. Например, ако цветът на текста на абзаца е дефиниран като „син“, тогава цветът на контура по подразбиране също ще бъде син. В случай че няма дефиниция на цвят дори за елемента, тогава цветът по подразбиране е ‘черен’.
Стойността по подразбиране за ширина е „средна“.
Определете границите в стенографията
Някои разработчици предпочитат да дефинират атрибутите на границата в кратък едноредов маркер. Този стенографски формат помага за свеждане до минимум на редовете на кода и експертните разработчици предпочитат този формат. Използването на стенографския формат се препоръчва, когато дефиницията на границата е проста и доста стандартизирана. Ако обаче трябва да подчертаете всяка страна на границата в различен стил, тогава трябва да се придържате към формата на дефиниране на отделни маркери.
Използва се следният код:
граничен стил: тире
цвят на границата: зелен
широчина на границата: 5 пиксела
граница: пунктирана зелена 5px
Точки, които трябва да имате предвид, докато проектирате граници в CSS
Не използвайте прекалено много граници на страница, това може да разсейва и да затрудни потребителя да се съсредоточи.
структура на данни и алгоритъм в java
Важно е да се поддържа последователност в граничния стил и цветовете. Елементите на едно и също ниво на йерархия в дадена страница трябва да имат сходен стил на границата и ширина за еднаквост. Например, ако параграф е дефиниран с плътна граница и 5px ширина, поддържайте този формат в останалите параграф елементи по време на дизайна на уеб сайта.
Придържайте се към един стил на дефиниции на маркери. Някои разработчици се чувстват удобно с дефинициите за пряк път с всички стойности, присвоени на един граница етикет. Някои други предпочитат изрично изброяване на всички маркери за ширина, цвят и стил. Конвенцията е, че когато се изискват сложни декорации на граници на дадена страница, отделните етикети се изброяват отделно. Това помага по време на отстраняване на грешки на такива персонализирани дефиниции на граници. За нормални случаи би била подходяща само дефиниция на пряк път.
Надявам се, че сте намерили информацията, която търсите на CSS граници, и wс това стигаме до края на тази статия за граници в CSS.
Вижте нашите което се предлага с обучение под ръководството на инструктори на живо и опит в реалния живот на проекти. Това обучение ви кара да владеете умения за работа с back-end и front-end уеб технологии. Включва обучение по уеб разработка, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
Имате въпрос към нас? Моля, споменете го в раздела за коментари в блога „Граница в CSS“ и ние ще се свържем с вас.