Предности и недостатоци на вградени стилови во CSS

CSS или Cascading Style Sheets се она што се користи во модерен веб дизајн за да се примени визуелниот изглед на страница. Додека HTML создава структура на страницата и Javascript може да се справи со однесување, изгледот и чувството на веб-страница е доменот на CSS. Кога станува збор за овие стилови, тие најчесто се применуваат со помош на надворешни стилски листови, но исто така можете да примените стилови на CSS на еден специфичен елемент со користење на она што се нарекува "inline styles".

Вградените стилови се стилови на CSS кои се применуваат директно во HTML-страницата на страницата. Има и предности и недостатоци на овој пристап. Прво, ајде да погледнеме точно како овие стилови се напишани.

Како да напишете вграден стил

За да креирате вграден CSS стил, ќе започнете со пишување на свој стил на имотот сличен на тоа како ќе го направите во лист со стил, но треба да биде цела една линија. Одделете повеќе својства со точка-запирка исто како што сакате во лист со стилови.

позадина: #ccc; боја: #fff; граница: солидна црна 1px;

Ставете ја таа линија на стилови внатре во атрибутот на стилот на елементот што сакате да го направите стилизиран. На пример, ако сакавте да го примените овој стил на став во вашиот HTML, тој елемент ќе изгледа вака:

Во овој пример, овој конкретен параграф ќе се појави со светло сива позадина (тоа е она што #ccc ќе го направи), црн текст (од # 000 боја) и со цврста црна граница од 1 пиксела околу сите четири страни од став .

Предности на Inline Styles

Благодарение на каскадата на Cascading Style Sheet, вградените стилови имаат највисок приоритет или специфичност во еден документ. Ова значи дека тие ќе се применуваат, без оглед на тоа што е диктирано во вашиот надворешен стилски лист (со еден исклучок се сите стилови кои се дадени на важна декларација на тој лист, но тоа не е нешто што треба да се направи во производните локации ако тоа може да се избегне).

Единствените стилови кои имаат повисок приоритет од втисните стилови се корисничките стилови кои ги применуваат самите читатели. Ако имате проблем да ги примените промените, можете да пробате поставување на внатрешен стил на елементот. Ако стилови сеуште не се прикажуваат со втиснат стил, знаете дека нешто друго се случува.

Вградените стилови се лесни и брзо да ги додадете и не треба да се грижите за пишување на соодветен CSS селектор, бидејќи вие директно ги додавате стиловите директно до елементот што сакате да го промените (тој елемент во суштина го заменува селекторот кој ќе го напишете во надворешен стилски лист ). Не треба да креирате нов документ (како со надворешни стилски листови) или да уредувате нов елемент во главата на вашиот документ (како и со внатрешни стилски листови). Вие само додадете атрибут на стилот кој важи за речиси секој HTML елемент. Ова се причини зошто може да бидете во искушение да користите вродени стилови, но исто така мора да бидете свесни за некои многу значајни недостатоци на овој пристап.

Недостатоци на вградените стилови

Бидејќи втиснатите стилови се најконкретни во каскадата, тие можат да ги надминат нештата за кои немате намера. Тие исто така го негираат еден од најмоќните аспекти на CSS - способноста да се стимулираат многу и многу веб-страници од една централна CSS-датотека за да се направат идните надградби и промени во стилот многу полесно да се управуваат.

Ако требаше да користите само стилски стилови, вашите документи брзо ќе станат подуени и многу тешко да се задржат. Ова е затоа што мора да се применат внатрешни стилови за секој елемент што го сакате. Значи, ако сакате сите ваши ставови да имаат фамилија на фонт "Arial", мора да додадете стил на стил на секоја

ознака во вашиот документ. Ова додава и работа за одржување на дизајнерот и време за преземање за читателот, бидејќи ќе треба да го промените ова на секоја страница од вашиот сајт за да го промените тој фонт-семејство. Алтернативно, ако користите посебна табела за листи, можеби ќе можете да ја промените на едно место и да ја добиете секоја страница на тоа ажурирање.

Вистина, ова е чекор назад во веб-дизајнот - ги врати деновите на тагот!

Друг недостаток на вродените стилови е тоа што е невозможно да се стигне псевдо-елементи и-класи со нив. На пример, со надворешни стилски листови, можете да го стилизирате посетеното, лебдењето, активното и бојата на линкот на ознака за сидро, но со втиснат стил, сè што може да стил е самата врска, бидејќи тоа е атрибутот на стилот кој е прикачен на .

На крајот на краиштата, ние препорачуваме да не користите вродени стилови за вашите веб-страници, бидејќи тие предизвикуваат проблеми и прават страните да работат многу повеќе за одржување. Единствениот пат кога ги користиме е кога сакаме брзо да провериме стил за време на развојот. Откако ќе го разгледаме правото за тој елемент, го преместуваме во нашиот надворешен стилски лист.

Оригинален напис од Џенифер Крајнин. Уредено од Џереми Жирар.