Границе се користе на ХТМЛ страницама за разграничење и истицање садржаја. Када на страници има много информација и желите да скренете пажњу корисника на одређене делове, тада користите обрубе око тог садржаја. У овом чланку о Границама у ЦСС-у разговараћу о следећим темама:
- Када користити Бордерс
- Границе у ЦСС-у
- Атрибути ЦСС границе
- Подразумеване вредности за атрибуте границе
- Дефинишите границе скраћено
- Тачке које треба имати на уму приликом дизајнирања граница у ЦСС-у
Када користити Бордерс
Стандардна пракса је употреба ЦСС ознака обруба за дефинисање ивица на ХТМЛ страницама за:
- Око важних наслова
- Да бисте истакли постсцрипт или важне напомене
- Да приложите слике, илустрације, цитате људи, видео записе
- Да скренете пажњу на цене, рокове или тако значајне информације
Можда бисте желели да прочитате на пре него што наставите са учењем о ЦСС границама.
За свеобухватну ЦСС лекцију посетите Едурека ЦСС Водич за почетнике . Добићете одличне информације о начину на који ће се ЦСС користити за проширивање ХТМЛ веб дизајна.
Границе у ЦСС-у
ЦСС границе могу се доделити различитим одељцима ХТМЛ странице, било да се ради о заглављима или пасусима. Почнимо са примером. Овде дефинишемо границу око наслова и другу границу око текста пасуса.
боди {бацкгроунд-цолор: лигхтблуе} х1 {тект-алигн: центер бордер-стиле: солид} п {фонт-фамили: вердана фонт сизе: 20пк бордер-стиле: доттед}Граница и око пасуса!
Атрибути ЦСС границе
ЦСС границе имају 3 главна атрибута
- стил:Тхестилатрибут дефинише образац обруба.
- боја: Боја може бити било која из скупа дефинисаних ЦСС бојама.
- ширина: Ширина се користи за варирање дебљине обруба како би била истакнутија.
У горњем примеру видели смо да је дефинисан само један атрибут обруба, то је његов стил. Остали атрибути када нису дефинисани попримају подразумеване вредности. Постоји још један атрибут зван радијус, који се ређе користи. Користи се за заобљење ивица границе.
- у границама атрибут
| Стил | Опис |
| обруб: чврст | |
| обруб: двоструко | |
| обруб: жлеб | |
| гранични стил: гребен | |
| обруб: уложак | |
| гранични стил: почетак | |
| обруб: нема | |
| обруб: скривено | |
| обруб: тачкасто | |
| обруб: испрекидан |
Приметили бисте да постоји и опција „без границе“ и „скривена граница“. Програмер може једноставно избећи дефинисање границе, зашто је изричито дефинисати као „скривену границу“? То се ради ради коришћења простора и поравнања са осталим елементима на страници.
Стилови обруба могу се мешати и унутар елемента. У ту сврху се могу засебно дефинисати 4 појединачне бочне странице различитим стиловима. То се може учинити на 2 начина. Или дефинирајте све 4 стране у једној ознаци. У овом случају, бројање почиње од горње линије, а затим се креће у смеру казаљке на сату. Алтернативно, свака од 4 граничне линије такође може бити дефинисана у појединачним ознакама. Оба случаја су приказана у следећем примеру.
| Стил | Опис |
| обруб: тачкасто испрекидан чврсти двоструки стил горње границе: тачкасто гранични-десни стил: испрекидан стил доњег обруба: чврст граница-лево-стил: двоструко |
- боја ивице атрибут
Атрибут боје за обруб може се поставити на више начина. Ово је слично подешавању боје за друге елементе. Боје се могу подесити на један од следећих начина:
- име - наведите назив боје, попут „плава“. Такође можете испробати неке фенси опције боја попут „БланцхедАлмонд“!
- Хек - наведите хексадецималну вредност, попут „# фф0000“
- РГБ - подесите РГБ код. На пример, ргб (255,255,0) значи жута.
- подешавање - као што су „провидни“ или „непрозирни“
- ширина границе атрибут:
Својство видтх, као што и само име говори, дефинише дебљину 4 бочне странице. Ако је дефинисана једна вредност, она је за све стране, у супротном се такође могу поставити појединачне вредности ширине.
Ширина се може одредити у било којој стандардној јединици, као што су пиксели („пк“), тачке („пт“) или у центиметрима („цм“). Ширину можете одредити и помоћу унапред дефинисаних вредности „дебео“, „танак“ и „средњи“.
| Стил | Опис |
| ширина обруба: 10 пиксела | |
| ширина обруба: 0,1 цм | |
| ширина границе: средња |
- граница-радијус атрибут
Сврха дефинисања радијуса је да се добију заобљени углови за границу. Фактор полупречника дефинише обим заобљености. Што су вредности веће, углови постају закривљенији. Као стандардна пракса, вредности радијуса се одржавају између 1-3 пута веће ширине границе.
Следећи код ће генерисати:
ширина обруба: 10 пиксела
радијус границе: 30 пиксела
Подразумеване вредности за атрибуте границе
Једини обавезни атрибут је стил . Ако недостаје стил, обруб се неће појавити.
Ако боја није наведена, боја из основног елемента узима се као подразумевана вредност. На пример, ако је боја текста пасуса дефинисана као „плава“, тада ће задата боја обруба такође бити плава. У случају да чак ни за елемент не постоји дефиниција боје, тада је подразумевана боја „црна“.
Подразумевана вредност за ширину је „средња“.
Дефинишите границе скраћено
Неки програмери радије дефинишу атрибуте обруба у сажетој ознаци у једном реду. Овај скраћени формат помаже у смањењу редова кода, а стручњаци програмери преферирају овај формат. Коришћење стенографског формата препоручује се када је дефиниција границе једноставна и прилично стандардизована. Међутим, ако требате да истакнете сваку страну обруба у другачијем стилу, онда се морате држати формата дефинисања појединачних ознака.
Користи се следећи код:
обруб: испрекидан
боја обруба: зелена
ширина обруба: 5 пиксела
обруб: испрекидана зелена 5пк
Тачке које треба имати на уму приликом дизајнирања граница у ЦСС-у
Не користите превише ивица на страници, то може да вам одврати пажњу и отежа фокусирање корисника.
Важно је одржавати доследност у ободу и бојама. Елементи у истом нивоу хијерархије на страници морају имати сличан стил и ширину обруба ради униформности. На пример, ако параграф је дефинисан чврстим обрубом и ширином од 5 пиксела, одржавајте овај формат у свим осталим параграф елементи током дизајнирања веб страница.
Придржавајте се једног стила дефиниција ознака. Неки програмери су задовољни дефиницијама пречица са свим вредностима додељеним једном граница ознака. Неки други преферирају експлицитно навођење свих ознака због ширине, боје и стила. Договор је да када се на страници захтевају детаљни украси на ивицама, појединачне ознаке се наводе одвојено. Ово помаже током отклањања грешака у прилагођеним дефиницијама граница. У нормалним случајевима би била довољна само дефиниција пречице.
Надам се да сте пронашли информације које сте тражили на ЦСС границама и вовим смо дошли до краја овог чланка Границе у ЦСС-у.
како користити логгер у јави
Погледајте наш која долази са обуком уживо коју воде инструктори и искуством у стварном животу. Овај тренинг чини вас вештима за рад са позадинским и предњим веб технологијама. Укључује обуку о веб-развоју, јКуери-ју, Ангулар-у, НодеЈС-у, ЕкпрессЈС-у и МонгоДБ-у.
Имате питање за нас? Молимо вас да га помињете у одељку за коментаре блога „Граница у ЦСС-у“ и јавићемо вам се.