CSS-де маңызды нәрсе бар ма?

Каскадтағы маңызды өзгерістер

Веб-сайттарды кодтауды үйренудің ең жақсы тәсілдерінің бірі - басқа сайттардың бастапқы кодын қарау. Бұл тәжірибе веб-дизайн курстары , кітаптар және онлайн оқу сайттары үшін көптеген мүмкіндіктер болғанға дейін бірнеше күн ішінде веб-мамандардың өз техникасын үйренуі болып табылады.

Егер сіз осы тәжірибені қолданып, сайттың каскадты стилі кестелерін (CSS) көріп жатсаңыз, онда бұл кодта көретін бір нәрсе - бұл сызық, маңызды деп санайды.

Бұл дегеніміз стиль кестелерінде бұл декларацияны қалай дұрыс пайдаланатынын және қалай маңызды екенін қалайсыз?

CSS-нің каскадтары

Ең алдымен, каскадты стиль кестелерінің шынымен каскадты екенін түсіну маңызды, яғни олар белгілі бір тәртіпте орналастырылған. Жалпы алғанда, бұл стильдер браузер арқылы оқылған тәртіпте қолданылатынын білдіреді. Бірінші стиль қолданылады, содан кейін екінші және т.с.с.

Нәтижесінде стиль кестесінің жоғарғы жағында стиль пайда болса, содан кейін құжатта төменірек өзгертілсе, сол стильдің екінші данасы келесі емес, кейінгі нұсқаларда қолданылады. Негізінде, егер екі стиль бірдей нәрсе айтса (яғни, оларда бірдей деңгейге ие болса), соңғы тізімде қолданылатын болады.

Мысалы, стиль кестесінде келесі стильдер бар екенін елестетіп көрейік. Параграф мәтіні қара мәнерде қолданылатын болса да, бірінші мәнер сипаты қызыл болады.

Себебі «қара» мән екіншіден саналады. CSS жоғарыдан-төменге оқылғандықтан, соңғы мәнер «қара» болып табылады және сондықтан бір жеңеді.

p {түсі: қызыл; }
p {түсі: қара; }

Қалай маңызды! Басымдылықты өзгертеді

Енді CSS-лердің ұқсас бірдей ережелерін қалай өңдейтінін түсіну үшін, маңызды директиваның қалай өзгергенін қарастырайық.

Ең басты директива сіз өзіңіз сезінетін ережелерді орындау кезінде CSS-нің каскадтығын ең маңызды болып табылады және оны қолдану керек. Ең маңызды директиваға ие ереже, бұл ереже CSS құжатында қай жерде болмасын, әрқашан қолданылады.

Еже мәтінін әрдайым қызыл етіп жасау үшін, жоғарыдағы мысалдан пайдаланасыз:

p {түсі: қызыл! маңызды; }
p {түсі: қара; }

Енді «қара» мәні екінші болып саналса да, барлық мәтін қызыл түске боялады. Ең маңызды директива каскадтың қалыпты ережелерін анықтайды және бұл стильді жоғары ерекшелікке ие етеді.

Егер сізде абзацтар қызыл болып көрінетін болса, бұл стиль оны жасайды, бірақ бұл жақсы тәжірибе дегенді білдірмейді. Келіңіздер, келешекте, сізге қажет болса, маңызды және ол орынсыз болған кезде қарап көрейік.

Қашан қолданылсын!

Веб-сайтты тестілеу және отладтау кезінде маңызды директива өте пайдалы. Егер стилің неге қолданылмайтындығына сенімді болмасаңыз және ол спецификалық мәселе болуы мүмкін деп ойласаңыз, оны түзете ме, жоқ па, көре аласыз.

Стильдік мәселені шынымен қосу маңызды болса, сіз бұл мәселенің ерекшелігі екенін анықтадысыз. Дегенмен, Сіз бұл маңызды кодты қалдырғыңыз келмейді, ол тек сынақ мақсатында ғана қойылды.

Тестілеу аяқталғаннан кейін, осы нұсқаулықты алып тастап, селекторды сіздің мәнеріңізді жұмыс істеу үшін қажет ерекшеліктерге жету үшін реттеңіз. маңызды, әдеттегі каскадты қалай өзгерткеніне байланысты, өндірістік учаскелерге кіруге болмайды.

Егер сіз өзіңіздің қалаған стильдеріңізге қол жеткізу үшін маңызды декларацияға тым қатты сүйенсеңіз, онда сізге сәнді стильдер салынған стиль парағы болады. Сіз CSS-тің өңделуін түбегейлі өзгертесіз. Ұзақ мерзімді басқару тұрғысынан жақсы емес ленивый тәжірибе.

Тексеру үшін маңызды немесе кейбір жағдайларда тақырып немесе үлгінің негізі болып табылатын кірістірілген мәнерлерді мүлдем елемеу керек болғанда пайдаланыңыз.

Тіпті мұндай жағдайларда бұл мүмкіндікті мүмкіндігінше аз пайдаланып, керісінше, каскадты түсінетін таза стильдер парақтарын жазуға тырысыңыз.

Пайдаланушы мәнер кестелері

Түсіну үшін маңызды «маңызды» директиваға қатысты бір соңғы ескерту бар. Бұл директива сондай-ақ, веб-беттер пайдаланушылары пайдалану немесе оқуға қиындық туғызатын стильдер кестелерін жеңуге көмектесу үшін қолданылды.

Әдетте, егер пайдаланушы веб-парақтарды көру үшін мәнер кестесін анықтаса , сол мәнерлер парағы веб-беттегі автордың мәнер кестесімен бұрмаланған. Егер пайдаланушы стильді маңызды деп белгілесе, бұл стиль веб-беттегі автордың стилі парағын басады, тіпті егер автор ережені маңызды деп белгілесе де.

Бұл мәнерлерді белгілі бір жолмен орнатуды қажет ететін пайдаланушылар үшін пайдалы. Мысалы, біреу пайдаланатын барлық веб-беттерде әдепкі қаріп өлшемдерін ұлғайту қажет болуы мүмкін. Сіз өзіңіз жасаған парақтарда өзіңіздің маңызды директиваларыңызды пайдаланып, пайдаланушыларыңыздың арнайы қажеттіліктеріне жауап бересіз.

Jeremy Girard өңдейді