Свойството border style в css или как да направите сайта си по-привлекателен

За никого не е тайна, че дизайнът на уебсайт е една от основните задачи на програмиста. Това е първото впечатление, което потребителят получава, когато разглежда дадена уебстраница, и което формира цялостното впечатление и мнение за вашия ресурс.

Уеб дизайнерите са изправени пред важна задача - да създадат ярък, прост, но "придържане към" оформление на сайта. CSS предлага различни опции за стиловете на границите, както и много други, за разкрасяване на HTML страници. за правилното им използване и прилагане и ще бъдат разгледани в тази статия.

Стил на границата в CSS

Използването на това свойство е приложимо за всички обекти, които могат да бъдат разположени в уеб страницата. Използва се за формиране на стила на границата на различни обекти. Важно е да се отбележи, че всяка от страните на рамката може да получи своя собствена характеристика, ако посочите една от страните вместо горна, долна, лява и дясна, когато записвате свойството border style в CSS. Те се отнасят съответно за горна, долна, лява и дясна граница.

На самото свойство border style може да се присвои една от следните стойности в CSS, които са показани на снимката по-долу.

Програмистът може да променя дебелината на границите или отстоянието им от текста. Възможно е също така да обезцветяване със свойството за цвят на стила на границата в CSS. По-долу са показани различните опции за дебелината на рамката съответно 1, 3, 5, 7 и 9 пиксела.

комбиниране на свойства

Заслужава си вземете под внимание, че граничните свойства могат да бъдат обединени с помощта на къдрави скоби. За да направите това, напишете последователно стойностите на всички свойства, които искате да зададете за стила border в CSS. Обърнете внимание, че ако пропуснете някое от свойствата и не ги посочите, те се задават по подразбиране от системата.

CSS: стил на границата на таблицата

Особено внимание трябва да се обърне на такъв таг като table, който ви помага да създавате таблици в уеб страниците. За да приложите всички гореспоменати свойства към клетките на таблицата, по-специално към техните граници, ще ви е необходимо специално свойство border-collapse. За какво ви е необходим отделен имот, който да се отнася само за маси?? Това е много по-просто, отколкото изглежда на пръв поглед. Ако създадете отделен контур за всяка клетка в таблица, има два важни недостатъка:

• Ако в таблицата има много клетки, това ще отнеме много време и ще увеличи значително теглото на кода;
• Ако проектирате всяка клетка в таблица поотделно, границите на съседните клетки ще се припокриват, което също увеличава тежестта на кода и може да не изглежда много привлекателно.

По този начин, казано на прост език, "лепило" общи граници. Какви стойности могат да приемат това свойство в таблиците? Възможните варианти са изброени по-долу:

• срив - между клетките има една линия. Клетки "залепен";
• отделна - всяка клетка образува някаква рамка около себе си, която я отделя от другите клетки;
• inherit - когато се прилага този атрибут, стойността се наследява от предишните.

Заключение

Надяваме се, че нашата статия е била полезна и ви е било интересно да я прочетете. Не забравяйте, че визуалният компонент на уебсайта е най-важният фактор, който влияе върху по-нататъшното му развитие и популяризиране. Оригиналният и привличащ вниманието дизайн винаги ще се хареса на аудиторията ви и ще увеличи трафика ви.