Увод у ЦСС
Каскадни листови стилова, који су на познатији начин познати као ЦСС, врло је једноставан дизајниран поступак који се користи за израду веб страница много презентативнијим. ЦСС вам омогућава да постављате стилове како бисте прилагодили веб странице. Најбољи део коришћења ове стилске карактеристике је то што ЦСС није независан од ХТМЛ начина креирања веб страница. Основна разлика између језика за означавање хипертекста и каскадних листова стила је у томе што се за прву познаје структурални начин пејзажа веб страници, док је први намењен пружању моћних техника кодирања и стилизовања у боји. Користи се за контролу изгледа више веб страница одједном. Све спољне табеле стилова се чувају у облику ЦСС датотека.
Главне компоненте ЦСС-а
У горњем одељку смо проучавали Увод у ЦСС, па сада напредујемо са главним компонентама ЦСС-а као што следи:
1. Лако је оствариво : Ако имате намеру да извршите било какву глобалну промену, једноставно промените стил и моћи ћете да видите да се сви остали елементи на свим осталим веб страницама аутоматски ажурирају.
2. ЦСС штеди време: Можете само једном написати скрипту и поново користити исти лист онолико времена колико желите.
3. Супериорни стилови у матичном предњем крају: ЦСС има релативно много шири низ атрибута и листа у поређењу са ХТМЛ-ом. Стога ХТМЛ страница може имати светлији изглед и осећај у поређењу са нормалним ХТМЛ атрибутима.
4. Једноставност са претраживачима: ЦСС се сматра веома погодним и лаким за читање стилског листа. То значи да претраживачи не морају улагати много напора како би покушали да прочитају текст.
5. Ефикасно чување кеша: ЦСС се може користити за локално складиштење веб апликација уз помоћ механизма за оффлине кеш који се може користити за преглед офлајн веб локација.
Карактеристике ЦСС-а
Док смо разговарали о уводу у ЦСС и његову компоненту. сада ћемо сазнати карактеристике ЦСС-а. Главне карактеристике ЦСС-а укључују правила стилизовања која клијент прегледава и интерпретирају на различите елементе у вашем документу. Главне карактеристике укључују:
- Правило стила састоји се од селекторске компоненте и декларације блок компоненте.
- Селектор се користи за указивање на ХТМЛ компоненту коју желите да добијете по стилу.
- Унутар блока декларације налази се једна или више декларација заједно са зарезима.
- Свака постављена декларација има име својства ЦСС, тачку и зарез. На пример, боја је својство, а вредност црвена у боји. Величина фонта је својство, а вредност 15пк.
- ЦСС декларација завршава тачком и зарезом, а ови блокови су окружени коврчавим наборима.
- ЦСС селектори су они који се користе за проналажење ХТМЛ елемената који су засновани на имену елемента, ид-у, атрибуту, класи и многим другим.
- Јединствени елемент ће бити изабран ИД-ом елемента.
- Ако желите да одаберете одређени елемент са одређеним ид-ом, треба користити функцију # заједно са атрибутом ид.
- Ако желите да изаберете елементе са одређеном класом, треба написати знак периода заједно са именом.
- Универзални селектор: Ако вас не занима избор елемената одређене врсте, универзални селектор једноставно се поклапа са називом елемента.
- Селектор елемената: Ови селектори бирају елемент на основу имена елемента.
- Селектор потомака : Када одређени елемент лежи унутар другог елемента, онда се назива као селектор десцендента.
- Селектор ИД: Овај селектор користи ИД ХТМЛ елемента како би се могао изабрати одређени елемент.
- Селектори класе: Бира елемент са одређеним атрибутом класе.
- Груписање селектора: Биће добра опција груписање селектора тако да код буде минимизиран. Сваки селектор заједно са зарезом треба користити за груписање селектора.
Апликације ЦСС-а
Након што научимо Увод у ЦСС и карактеристике ЦСС-а, научићемо примену ЦСС-а. Постоје три начина ХТМЛ приступа ЦСС-у:
1. Инлине:
Линија стила у линији користи се само за утицај на ознаку у којој се налази. То у суштини значи да се ситни детаљи на страници могу мењати без промене целокупног изгледа странице или свега на страници. Ово је корисно као да имате све на спољним страницама, од вас ће се тражити да додате додатне ознаке за промену детаља. Инлине прекорачења спољних, што значи да се ситни детаљи могу променити. Такође надјачава унутрашњу.
2. Интерни:
Интерна би се користила само када сте желели да додате малу промену у једној ознаци. То је зато што инлине утјече само на једну ознаку која се налази у њој док се унутрашњи стил ставља на главу ХТМЛ документа. То значи да ако желите да прилагодите страницу, све потребне промене видеће се само померањем. Унутрашњи стил је смештен унутар ознака. У поређењу, ово изгледа уредно, једноставно, елегантно и организовано због одвојеног обликовања и таговања.
3. Спољашњи
Вањске таблице стилова користе се за омогућавање људима да форматирају и рекреирају своје веб странице на потпуно другом документу. То ефективно значи да можете имати два или више радних места, јер се у документ може уградити више таблица стилова, чиме се добија много чистији радни простор. Таблица стилова би у овом случају била лако доступна, што представља огромну предност, али с друге стране, било какве промене извршене на спољном листу утицале би на све матичне листове са којима је повезан.
Предности и недостаци ЦСС-а:
Предности ЦСС-а
- Компатибилност уређаја
- Већа брзина веб странице
- Лако је одрживо
- Доследне и спонтане промене
- Способност поновног постављања
- Повећава могућности претраживача за индексирање веб страница
Недостаци ЦСС-а
- Проблеми у вези са претраживачима
- Рањив
- Проблеми због више нивоа
- Недостатак сигурности
- Фрагментација
Закључак - Увод у ЦСС
ЦСС даје моћ веб дизајнеру тако да би се могле провести опсежне промене веб изгледа свих страница на једној веб локацији користећи само једну датотеку. Помаже у дизајнирању светла и креативног вебсајта са високим одзивом и који импресионира публику када је приказана. Стога је данас саставни део веб локација које не треба занемарити.
Препоручени чланци
Ово је водич за Увод у ЦСС. Овде смо разговарали о главним компонентама, карактеристикама, предностима и недостацима ЦСС-а. Такође можете погледати следеће чланке да бисте сазнали више -
- ЦСС питања и одговори за интервју
- Увод у ГИТ
- Увод у ПХП
- Увод у ЈаваСцрипт