Вградени, вградени и външни стилови листа: Ето какво трябва да знаете
Разработването на уебсайтове отпред е често представено като трикраково столче. Тези крака са, както следва:
Вторият крак на това столче, CSS или Cascading Style Sheets, е това, което гледаме тук днес. По-конкретно, ние искаме да разгледаме 3 вида стилове, които можете да добавите към документ.
- Вградени стилове
- Вградени стилове
- Външни стилове
Всеки от тези видове CSS стилове има своите предимства и недостатъци, така че нека разгледаме по-задълбочено всеки от тях индивидуално.
Вътрешни стилове
Вградените стилове са стилове, които се записват директно в маркера в HTML документа. Вградените стилове засягат само конкретния маркер, на който се прилагат. Ето пример за вграден стил, приложен към стандартна връзка или котва:
Това правило за CSS ще превърне стандартната подчертана декорация на текст от тази връзка. Това обаче няма да промени друга връзка на страницата. Това е едно от ограниченията на вградените стилове. Тъй като те се променят само по конкретен елемент, ще трябва да изхвърлите HTML с тези стилове, за да постигнете действителен дизайн на страницата. Това не е най-добрата практика. Всъщност това е една стъпка, премахната от дните на "шрифт" тагове и смесицата от структура и стил в уеб страниците.
Вградените стилове също имат много висока специфичност.
Това ги прави много трудно да се презапишете с други стилове, които не са инлайн. Ако например искате да направите даден сайт отзивчив и да промените начина, по който даден елемент гледа определени прекъсвания, като използвате заявки за мултимедия , вградените стилове на даден елемент ще направят това много трудно.
В крайна сметка, вградените стилове наистина са подходящи само когато се използват много пестеливо.
Всъщност рядко използвам инлайн стилове на моите уеб страници.
Вградени стилове
Вградените стилове са стилове, които са вградени в главата на документа. Вградените стилове засягат само етикетите на страницата, в която са вградени. Още веднъж, този подход отрича една от силните страни на CSS. Тъй като всяка страница ще има стилове в
, ако искате да направите промяна в сайта, като промяна на цвета на връзките от червено в зелено, ще трябва да направите тази промяна на всяка страница, тъй като всяка страница използва вграден стилов лист. Това е по-добре от вградените стилове, но все пак проблематично в много случаи.
Стилове, които се добавят към
на даден документ също добавят значителна част от кода за маркиране на тази страница, което също може да направи страницата по-трудна за управление в бъдеще.
Ползата от вградените стилови листове е, че товарът се зарежда веднага със самата страница, вместо да се налага да се зареждат други външни файлове. Това може да е от полза за скоростта на изтегляне и перспективата за производителност .
Външни стилови листове
Повечето уеб сайтове днес използват външни листове за стил. Екстериалните стилове са стилове, които са написани в отделен документ и след това са приложени към различни уеб документи. Външните стилови листове могат да засегнат всеки документ, към който са прикачени, което означава, че ако имате уеб страница от 20 страници, където всяка страница използва един и същ стилов лист (обикновено това е така), можете да направите визуална промяна за всеки от тези страници, като просто редактирате този стилов лист.
Това прави дългосрочното управление на сайта много по-лесно.
Недостатъкът към външните стилови листове е, че те изискват страници да се изтеглят и зареждат тези външни файлове. Не всяка страница ще използва всеки стил в CSS листа, толкова много страници ще заредят много по-голяма CSS страница, отколкото всъщност се нуждаят.
Въпреки че е вярно, че има хит за външни CSS файлове, със сигурност може да бъде сведена до минимум. Реално, CSS файловете са само текстови файлове, така че те обикновено не са много големи, за да започнете. Ако целият Ви сайт използва 1 CSS файл, можете също така да се възползвате от този документ, който се кешира, след първоначалното му зареждане.
Това означава, че на първа страница може да има слабо представяне на някои посещения, но следващите страници ще използват кеширания CSS файл, така че всеки хит ще бъде отхвърлен. Външните CSS файлове са как изграждам всичките си уеб страници.