ЦСС Бацк то Басицс Терминологиес Екплаинед
ЦСС или Цасцадинг Стилесхеетс комплетирају дефинишући језик правила дизајна за нашу мрежу. Уметници свуда користе ЦСС на дневној бази за креирање, организовање и кодирање скупова правила за основне изгледе веб сајта. Ово је постао најпопуларнији језик за фронт-енд дизајн и пружа задивљујуће способности са недавним издањем ЦСС3. Али шта заправо значи овај код?
Сам језик је у потпуности развијен већ неколико година. Збуњеност може настати углавном због погрешне комуникације и злоупотребе сличних термина. ЦСС доноси много нових концепата у табелу. Ми ћемо покрити неке од најпопуларнијих терминологија које ћемо овладати као ЦСС гуру.
Зашто специјализовати ЦСС?
Ово питање је постављено и раније, па чак и уласком у 2011. можемо видјети исте резултате. ЦСС је робустан језик који не воли скриптовање или програмирање. То је стилски језик, прецизније код који се користи за описивање понашања веб странице.
Користећи ЦСС можемо директно манипулисати атрибутима из појединачних ХТМЛ елемената. Сви блокови, параграфи, везе и слике могу бити погођени ЦСС правилима. Прецизирање семантике презентације за веб увек је био велики корак. То је главни разлог зашто је ЦСС и даље водећи играч дизајнера - нико није створио ништа боље!
Својства и вредности
Ово је најједноставнији начин да се провали у ЦСС. Сав код се своди на две активности: избор елемента за примену дизајна и шта да се примени. Потоњи се креира кроз парове својстава / вриједности.
Као пример боја црвена; је врло једноставан пар / својство / вриједност. Имовина коју смо користили је цолор што нам омогућава да прођемо у било ком прихватљивом вредност да бисте променили боју текста. То може бити и хексадецимални или РГБ (црвено-зелено-плави) боја података. Много пута дизајнери неће помињати идеју о вредностима јер то може да доведе у заблуду.
Својства и вриједности су заиста једна идеја. Свака декларација о имовини захтијева вриједност, а вриједности саме по себи су бесмислене. Постоји много онлине документације која се бави различитим својствима и како они утичу на ХТМЛ елементе. Препоручујем куповину ЦСС приручника из било које оближње књижаре. Они су прилично јефтини и држе већину информација које су вам потребне.
Вредности селектора
Селектори су потребни да би се комплетирао читав низ ЦСС кода. Ово је оно што изјављујемо да одредимо који тип елемента циљамо. Постоји много селектора и многи су толико замршени да просечном дизајнеру не требају вештине. Проверите документе за избор В3 ако желите да сазнате више.
Најједноставнији начин да се започну дефиниције стила је да се користе голе елементи као селектори својстава. То значи манипулисање роот кода као што је п за параграфе, див за поделе, па чак и тело и хтмл може се користити за манипулацију читавог документа веб странице. Испод је кратак пример стилизовања свих елемената пасуса.
п фонт-фамили: Ариал, санс-сериф; цолор: # 222; фонт-веигхт: болд;
Оно што даје стварну тежину ЦСС-у је колико прецизно може бити снајперска селекција. Најбољи начин за постизање циљаних стилова је кроз 2 методе познате као класе и ИД. Ово су уобичајене идеје у ХТМЛ-у где можете поставити било који елемент да има ИД и вредност класе кроз атрибуте. Онда помоћу ЦСС-а једноставно је применити стилове на тај одређени блок.
п # фирстпар фонт-сизе: 14пк; / * стилова параграф с ИД "фирстпар" * / п.цоммент фонт-сизе: 1.0ем; лине-хеигхт: 1.3ем; / * стилови параграфи са класом "коментар" * /
Дужина јединица и вредности
Често се ови увјети мијешају, а не велико изненађење. Вредности су објашњене раније као простор који користимо за описивање имовине. Јединице дужине су такође вредности у којима се користе за описивање имовине.
Разлика је у томе што ове вредности захтевају нумеричке податке и стога морају да врате неки облик јединица. Пиксели (пк) су најраспрострањенији и могу се користити за већину: ширина / висина, величина фонта, паддинг / маргине, да наведемо само неколико.
Осим ових, можете видети проценте (%) који се често користе кроз распоред флуида. Када постављате вредности ширине на проценат, компајлер ће претпоставити да ће 100% бити читава ширина веб прегледача. То даје много прецизности дизајнерима када примењује стилове на структуру распореда, па чак и на типографију страница.
Блок декларације
Сада, након што све ове појмове ставимо заједно, коначно смо у могућности да разговарамо о основној идеји иза стилских листа. Блокови кода се користе за оцртавање тематских области и навођење детаља елемената. На пример, испод је линија кода за једноставан контејнер за навигацију:
див # нав дисплаи: блоцк; ширина: 100%; паддинг: 3пк 6пк; маргин-боттом: 20пк;
Најлакши начин да се овај код прикаже је да својства линије буду један за другим. ЦСС програмери су користили блокове кода за разбијање сваке имовине на сопствену линију. Овај програм не само да заузима много више простора него смањује способност “ским” да бисте пронашли тачно оно што вам је потребно.
Бољи начин за разбијање блокова кода је раздвајање савијених елемената у своје након што достигну праг. Овај број је личан и биће различит између програмера. То је преломна тачка у којој логика диктира да глупо држи све на једној линији, углавном због читљивости.
Испод сам написао пример блока навигационих својстава све заједно. Ова пракса одржава дубље елементе на истој локацији тако да су уређивања свих навигацијских елемената много једноставнија.
див # нав дисплаи: блоцк; ширина: 100%; паддинг: 3пк 6пк; маргин-боттом: 20пк; див # нав ул лист-стиле: ноне; дисплеј блок; див # нав ул ли флоат: лево; маргин-ригхт: 10пк; фонт-сизе: 12пк; див # нав ул ли а цолор: # 0ф0ф0ф; тект-децоратион: ноне; дисплеј: инлине-блоцк; паддинг: 2пк 5пк;
Могући напредак из ЦСС2 / ЦСС3
У насловима недавно је нон-стоп говорио о невјеројатним предностима ЦСС3. Али оно што стварно има промењено на језику? Јасно је да ће стари код и даље радити. Ово бар показује потпуну компатибилност компајлера уназад (увек добра ствар).
Главне разлике се углавном односе на нове некретнине. Они омогућавају да се заокружени углови и ефекти падајућих сенки прикажу у прегледачу. ЦСС3 такође нуди нове алате за описивање боја у документу. ХСЛ (Хуе-Сатуратион-Лигхтнесс) је најновији уз ХСЛА који укључује Алпха канал за смањење непрозирности.
Селектори атрибута су велики корак напријед у погледу равног стила маркирања. Са овим стилом кода можете циљати одређено име елемента који садржи атрибуте са одређеним вредностима. То је углавном корисно када се ради са маркупом, као што је КСМЛ, где нема стандардних принципа дизајна за манипулацију чворовима. Пример испод је релативно једноставна идеја:
див [аттриб ^ = "1"] / * стилови овде * /
Горњи код је део библиотеке ЦСС селектора. Ово ће утицати на све див елементе са атрибутом “аттриб” која такође има вредност “1”. Ако је ово још увијек збуњујућа референца на примјеру испод да појасни. У теорији ова два селектора треба да обављају исте радње.
п [ид ^ = "примари"] / * стилови * / п # примарни / * стилови * /
Закључак
После разбијања неких од претерано збуњених термина, ЦСС изгледа као шетња парком. Језик је врло интуитиван и почетници могу почети са дизајнирањем унутар првих неколико сати. То је оно што чини ЦСС тако популарним међу веб програмерима.
Предности ЦСС3 тек су почеле да ступају на снагу. Током неколико нових година, трендови у развоју веба ће нам показати колико имамо контролу над дизајном веб страница. ЦСС је тренутно поносан као доминантни језик за стилизовање фронт-енд сајтова. Практиковањем чак и рудиментарних вјештина средњег нивоа може се произвести богато дизајнерско искуство и додатно знање.
