ЦСС, или Каскадни табеле стилова, су прихваћени начин у индустрији веб дизајна за додавање визуелних стилова на веб локацију. Помоћу ЦСС-а можете да контролишете изглед странице, боје, типографија, позадинска слика и још много тога. У основи, ако је то визуелни стил, онда је ЦСС начин да те стилове пренесете на своју веб локацију.
Док додајете ЦСС стилове у документ, можете приметити да документ почиње да се продужава и продужава. Чак и мала веб локација са само неколицином страница може завршити са значајном ЦСС датотеком - а врло велика локација са пуно и пуно страница јединственог садржаја може имати врло велике ЦСС датотеке. Ово је сложено од одзивне странице који имају пуно медијски упити укључени у табеле стилова да би се променио изглед визуелног изгледа и изглед странице на различитим екранима.
Да, ЦСС датотеке могу постати дугачке. То није главни проблем када је реч о томе перформансе сајта и брзина преузимања, јер ће чак и дугачка ЦСС датотека вероватно бити прилично мала (јер је у ствари само текстуални документ). Ипак, свако мало је важно када је у питању брзина странице, па ако можете свој стил листа учинити виткијим, то је добра идеја. Овде „зарез“ може врло добро доћи у вашем стилском листу!
Зарези и ЦСС
Можда сте се питали какву улогу зарез игра у синтакси ЦСС селектора. Као и у реченицама, зарез за раздвајање уноси јасноћу - а не код. Зарез у а ЦСС селектор одваја више селектора у оквиру истих стилова.
На пример, погледајмо неки ЦСС у наставку.
тх {боја: црвена; }
тд {боја: црвена; }
п.црвена {боја: црвена; }
див # фирстред {боја: црвена; }
Овом синтаксом кажете да желите тх ознаке, тд ознаке, ознаке пасуса са црвеном класом и див ознака са ИД-ом прво су имале црвену боју стила.
Ово је сасвим прихватљив ЦСС, али постоје два значајна недостатка ако се напише на овај начин:
- У будућности, ако одлучите да промените боја фонта од ових својстава у плаво, то морате променити четири пута у табели стилова.
- Вашој табели стилова додаје пуно додатних знакова који вам нису потребни. Ова 4 стила можда не изгледају превише, али ако наставите да то радите на целом свом листу стилова, линије ће се сабрати и тај лист ће бити много, много већи него што треба.
Да бисмо избегли ове недостатке и поједноставили вашу ЦСС датотеку, покушаћемо да користимо зарезе.
Коришћење зареза за раздвајање селектора
Уместо да напишете 4 одвојена ЦСС селектора и 4 правила, можете комбиновати сви ови стилови у једно својство правила одвајањем појединачних селектора зарезом. Ево како би се то урадило:
тх, тд, п.ред, див # фирстред {цолор: ред; }
Знак зареза у основи делује као реч „или“ унутар бирача. Дакле, ово се односи на тх тагови ИЛИ тд тагови ИЛИ тачке пасуса са црвеном класи ИЛИ див ознаком са ИД-ом прво. То је тачно оно што смо имали раније, али уместо да нам требају 4 ЦСС правила, имамо једно правило са више селектора. То је оно што зарез ради у селектору, омогућава нам да имамо више селектора у једном правилу.
Овај приступ не само да чини мање, чистије ЦСС датотеке, већ и много олакшава будућа ажурирања. Сада, ако сте желели да промените боју са црвене на плаву, промену морате да извршите само на једном месту уместо у оригиналним 4 стилска правила која смо имали! Размислите о овој уштеди времена у целој ЦСС датотеци и видећете како ћете дугорочно уштедети и време и простор!
Варијација синтаксе
Неки људи одлучују да ЦСС учине читљивијим одвајањем сваког селектора у његову линију, уместо да све то напишу у један ред као горе. Ево како би се то урадило:
тх,
тд,
п.ред,
див # фирстред
{
боја црвена;
}
Приметите да након сваког бирача стављате зарез, а затим користите „ентер“ да бисте преломили следећи селектор на његову линију. НЕ додајете зарез након последњег селектора.
Користећи зарезе између ваших бирача, ви ћете створити више компактни стилски лист то је лакше ажурирати у будућности и то је лакше прочитати данас!