CSS или Cascading Style Sheets са това, което се използва в съвременния уеб дизайн, за да приложите визуалния облик на страница. Докато HTML създава структурата на страницата и Javascript може да се справя с поведението, изглежда и усещане на уебсайт е домейнът на CSS. Когато става въпрос за тези стилове, те се прилагат най-често с помощта на външни стилови листове, но можете да приложите и стилове на CSS на един и същ елемент, като използвате "стари стилове".
Вградените стилове са стилове на CSS, които се прилагат директно в HTML кода на страницата. Съществуват както предимства, така и недостатъци на този подход. Първо, нека да разгледаме как точно са написани тези стилове.
Как да напиша вграден стил
За да създадете вграден CSS стил, започнете да пишете свой стил, подобно на начина, по който бихте го направили в листа с стилове, но трябва да бъде един ред. Отделете няколко свойства с точка и запетая, точно както бихте направили в листа с стилове.
фон: #ccc; Цвят: #fff; граница: твърда черна 1px;
Поставете тази линия от стилове в атрибута на стила на елемента, който искате да бъде оформен. Ако например искате да приложите този стил към параграф в HTML, елементът ще изглежда така:
В този пример този конкретен абзац ще се появи със светлосив фон (това би направил #ccc), черен текст (от # 000 цвята) и с 1-пикселна твърда черна граница около четирите страни на абзаца ,
Предимства на инлайн стиловете
Благодарение на каскадата на каскадния стил листивите инлайн стилове имат най-висок приоритет или специфичност в документ. Това означава, че те ще бъдат приложени, без значение какво друго е продиктувано във външния ви стилов лист (с изключение на всички стилове, на които е дадена важната декларация, но това не е нещо, което трябва да се направи в производствените сайтове, ако могат да бъдат избегнати).
Единствените стилове, които имат по-високо предимство от вградените стилове, са стиловете на потребителите, прилагани от самите читатели. Ако имате проблеми с приложението на промените, можете да опитате да зададете вграден стил на елемента. Ако стиловете все още не се показват с помощта на вграден стил, знаете, че има нещо друго.
Вградените стилове са лесни и бързи за добавяне и не е нужно да се притеснявате за написването на правилния CSS селектор, тъй като добавяте стиловете директно към елемента, който искате да промените (този елемент основно замества селектора, който бихте записали в външен лист с стилове ). Не е необходимо да създавате изцяло нов документ (както при външни стилови листове) или да редактирате нов елемент в заглавието на документа (както при вътрешни стилови листове). Току-що добавяте атрибута за стил, който е валиден за почти всеки елемент на HTML. Това са всички причини, поради които може да се изкушавате да използвате вградени стилове, но също така трябва да сте наясно с някои много значителни недостатъци на този подход.
Недостатъци на инлайн стиловете
Тъй като те са най-специфичните в каскадата, те могат да преодолеят неща, които не сте възнамерявали. Те също така отричат един от най-мощните аспекти на CSS - способността да стил много и много уеб страници от един централен CSS файл, за да могат бъдещите актуализации и промените в стила да бъдат много по-лесни за управление.
Ако трябва да използвате само инлайн стилове, вашите документи бързо ще се превърнат в подути и много трудни за поддържане. Това е така, защото трябва да се прилагат вградени стилове за всеки елемент, по който искате. Така че, ако искате всичките ви абзаци да имат семейството на шрифтове "Arial", трябва да добавите вграден стил към всеки
маркер в документа. Това добавя както поддръжката на дизайнера, така и времето за изтегляне за четеца, тъй като ще трябва да промените това във всяка страница в сайта си, за да промените това семейство шрифтове. Като алтернатива, ако използвате отделна стилова таблица, може да я промените на едно място и да получите на всяка страница тази актуализация.
Истината е, че това е стъпка назад в уеб дизайна - обратно в дните на маркера !
Друг недостатък на вградените стилове е, че е невъзможно да се оформят псевдоелементи и класове с тях. Например, с външни листове за стилове можете да оформите цвета на посетените, задържащите, активните и връзките на котвен етикет, но с вграден стил, всичко, което можете да направите, е самата връзка, защото това е прикрепено към атрибута на стила ,
В крайна сметка препоръчваме да не използвате вградени стилове за уеб страниците си, тъй като те причиняват проблеми и правят страниците много повече работа, която да поддържате. Единственият път, когато ги използваме, е, когато искаме да проверим стил бързо по време на разработката. След като сме го намерили правилно за този един елемент, ние го преместваме в нашия външен лист стил.
Оригинална статия на Дженифър Кринин. Редактиран от Джеръми Жирар.