Кірістірілген, ендірілген және сыртқы стильдер кестесі: Мынаны білу керек
Front-end веб-торабын әзірлеу көбінесе 3 аяқты дəрет ретінде берілген. Бұл аяқтар келесідей:
Осы нәжістің екінші блогы, CSS немесе Cascading Style Sheets - бүгін біз осылай қараймыз. Атап айтқанда, құжатқа қосуға болатын стильдердің 3 түрін қарастырамыз.
- Кірістірілген мәнерлер
- Ендірілген стильдер
- Сыртқы стильдер
CSS стильдерінің осы түрлерінің әрқайсысы өзінің артықшылықтары мен кемшіліктеріне ие, сондықтан олардың әрқайсысына әрқайсысын тереңірек қарастырайық.
Кірістірілген мәнерлер
Кірістірілген мәнерлер HTML құжатындағы тегте тікелей жазылған мәнерлер. Кірістірілген мәнерлер тек қолданылатын нақты тегіне әсер етеді. Міне, стандартты сілтемеде немесе якорьде, тегте қолданылатын кірістірілген мәнердің мысалы:
Бұл CSS ережесі осы бір сілтемедегі стандартты астын сызылған мәтінді безендіруді өшіреді. Алайда, кез-келген басқа сілтемесін парақта өзгерту мүмкін емес. Бұл кірістірілген мәнерлердің шектеулерінің бірі. Олар нақты бір элемент бойынша ғана өзгеретіндіктен, нақты бет дизайнына қол жеткізу үшін HTML-ді осы стильдермен қоқысқа тастау керек болады. Бұл жақсы тәжірибе емес. Шындығында, бұл «шрифт» тегтерінің күндерінен және веб-беттердегі құрылым мен стилдің қоспасынан бір қадам болды.
Кірістірілген стильдер өте жоғары ерекшелікке ие.
Бұл басқа, ішкі емес мәнерлермен қайта жазуды қиындатады. Мәселен, егер сіз торапқа жауап бергіңіз келсе және элементтің медиа сұрауларын қолдану арқылы белгілі бір тоқтау нүктелеріне қалай қарайтының өзгерткіңіз келсе, элементтің кірістірілген мәнерлері мұны өте қиын етеді.
Сайып келгенде, кірістірілген стильдер өте үнемді пайдаланғанда ғана орынды.
Іс жүзінде, менің веб-беттерімде кірістірілген мәнерлерді сирек қолданамын.
Ендірілген стильдер
Ендірілген мәнерлер - құжаттың басында ендірілген стильдер. Ендірілген стильдер ендірілген беттегі тегтерге ғана әсер етеді. Бұл жолы CSS-тің біреуінің күш-жігерін жоққа шығарады. Себебі әрбір бетте стильдер болуы мүмкін
, егер сіз қызылдан жасылға жасыл сілтемелердің түсін өзгертуін өзгерту сияқты сайтты өзгертуді қаласаңыз, әр бетте бұл өзгертулерді әр бетте жасау керек, себебі әрбір бетте кірістірілген мәнер парағы пайдаланылады. Бұл кірістірілген мәнерлерден жақсы, бірақ көптеген жағдайларда да проблемалы болып табылады.
Стиль кестелері, олар қосылады
құжаттың сол жағына түзету кодының айтарлықтай мөлшерін қосады, әрі ол бетті болашақта басқаруды қиындата алады.
Ендірілген мәнер парақтарының пайдасы басқа сыртқы файлдарды жүктеуді талап етпей, жүктемені беттің бетімен дереу жасайды. Бұл жүктеу жылдамдығы мен өнімділік перспективасынан пайда болуы мүмкін.
Сыртқы мәнер кестелері
Көптеген веб-сайттар енді сыртқы стильдер парақтарын пайдаланады. Сыртқы стильдер - жеке құжатта жазылған және әр түрлі веб-құжаттарға бекітілген стильдер. Сыртқы стильдер парақтары олар бекітілген кез келген құжатқа әсер етуі мүмкін, яғни 20 беттік веб-сайт бар болса, онда әрбір бет бір стиль кестесін (әдетте бұл қалай жасалады) пайдаланады, әрқайсыңыздың визуалды өзгерісін жасай аласыз сол парақтардың жай ғана редакциялау арқылы сол беттердің.
Бұл ұзақ мерзімді сайттарды басқаруды әлдеқайда жеңілдетеді.
Сыртқы стильдер парағының төмендеуі мына сыртқы файлдарды алу және жүктеу үшін беттер талап етіледі. Әрбір бет CSS парағындағы әр стильді пайдаланбайды, сондықтан көптеген беттерде шын мәнінде мұқтаждыққа қарағанда CSS-нің үлкен парағын жүктейді.
Дегенмен, сыртқы CSS файлдары үшін өнімділік соққысы бар болса да, ол сөзсіз азайтылуы мүмкін. Шындығында, CSS файлдары тек мәтіндік файлдар болып табылады, сондықтан олар әдетте бастау үшін өте үлкен емес. Егер бүкіл веб-сайтыңызда 1 CSS файлы болса, ол бастапқыда жүктелгеннен кейін, бұл құжаттың кэштелетін пайдасын да аласыз.
Бұл дегеніміз, кейбір беттерге бірінші рет кіргенде, кішкене нәтиже болуы мүмкін, бірақ кейінгі беттер кэштелген CSS файлын қолданады, сондықтан кез келген хит кері болмайды. Сыртқы CSS файлдары менің барлық веб-беттерімді қалай құрастырады.