CSS-нің сызбалары тек шекарасынан артық
CSS сызбасы сипаты күрделі сипат болып табылады. Сіз бұл туралы бірінші рет білсеңіз, шекара маңынан қалай қашықтан ерекшеленетінін түсіну қиын. W3C оны келесі айырмашылықтар ретінде түсіндіреді:
- Бос орындар кеңістікті қабылдамайды.
- Кескіндердің тікбұрышты емес болуы мүмкін.
Кеңістіктерді қабылдамаңыз
Бұл мәлімдеме өздігінен шатастырады. Веб-беттегі нысан веб-бетте қалай орын алмайды? Бірақ сіздің веб-парағыңызды пияз сияқты деп ойласаңыз, беттегі әрбір элемент басқа элементтің үстіне қабаттасуы мүмкін. Сипат сипаты орын алмайды, себебі ол әрқашан элементтің қорапшасының үстіне орналастырылады.
Жоспардың айналасында элемент орналастырылған кезде, ол элементтің бетінде қалай орналастырылғанына әсер етпейді. Ол элемент өлшемін немесе позициясын өзгертпейді. Егер элементті элементтің үстіне қойсаңыз, ол сол элементтің сызбасына ие болмаған секілді орынды алады. Бұл шекараға қатысты емес. Элементтің шекарасы элементінің сыртқы еніне және биігіне қосылады. Егер сізде 50 пикселге дейін, 2 пикселдік шекарамен болатын сурет болса, ол 54 пикселді (екі жағына 2 пикселді) алады. 2-пикселдік контуры бар сол суреттің бетінде тек 50 пиксель ені болады, сызба кескіннің сыртқы жиегін көрсететін болады.
Тік емес төртбұрыш болуы мүмкін
Ойлан бастағанға дейін «салқын, енді үйірмелерді тарта аламын!» Тағы ойлан. Бұл сөз сіз ойлағаннан өзгеше. Элементке шекара қойсаңыз, браузер бұл элементті бір тік төртбұрыш қорап сияқты секілді түсіндіреді. Егер жәшік бірнеше жолға бөлінсе, браузер шеттерін ашық қалдырады, себебі қорап жабылмайды. Браузер бұл шекара шекарасы шексіз кең экран кеңістігін бір үздіксіз тіктөртбұрыш ретінде көретін сияқты.
Керісінше, сызба сипаты ескеріледі. Белгіленген элемент бірнеше жолға бөлінсе, сызба сызықтың соңында жабылады және келесі жолға қайтадан қайтадан қосылады. Мүмкіндік болса, сызба тікбұрышты емес пішінді жасай отырып, толықтай қосылып қалады.
Негізгі сипаттаманың пайдаланылуы
Негізгі сипаттаманың ең жақсы пайдалануының бірі - іздеу шарттарын бөлектеу. Көптеген сайттар өң түсімен жасайды, бірақ сіз контурдың сипатын пайдалана аласыз және беттеріңізге қосымша аралық қосу туралы алаңдамайсыз.
Контурдың түсі сипаты «инверт» терминін қабылдайды, ол контурдың түсі ағымдағы фонның кері мәнін жасайды. Бұл динамикалық веб-беттердегі элементтерді қандай түстер қолданылатындығын білмей-ақ көрсетуге мүмкіндік береді.
Сондай-ақ, контурлық сипатты белсенді сілтемелердің айналасындағы нүктелі сызықты жою үшін пайдалануға болады. CSS-трюктері осы мақалада нүктелі сызбаны қалай жою керектігі көрсетілген.