Чаму простая коска спрашчае кадаваньне
CSS або каскадныя табліцы стыляў, гэта прынята вэб-дызайн галіны спосаб дадаць візуальныя стылі для сайта. З дапамогай CSS можна кантраляваць макет старонкі, колер, тыпаграфіку , фонавы малюнак, і шматлікі іншы. У прынцыпе, калі гэта візуальны стыль, то CSS гэта спосаб давесці гэтыя стылі на свой вэб-сайт.
Як дадаць стылі CSS да дакумента, вы можаце заўважыць, што дакумент пачынае станавіцца даўжэй і даўжэй. Нават невялікі сайт з толькі некалькі старонак можа ў канчатковым выніку са значным CSS файл - і вельмі вялікі сайт з вялікай і вялікай колькасцю старонак унікальнага кантэнту можа мець вельмі вялікія CSS файлы. Гэта пагаршаецца якія рэагуюць сайтамі , якія маюць шмат медыя запытаў , уключаныя ў табліцах стыляў , каб змяніць тое, як візуальныя эфекты выглядаюць і старонка выкладвае на розныя экраны.
Так, CSS-файлы могуць атрымаць працяглыя. Гэта не з'яўляецца сур'ёзнай праблемай, калі гаворка ідзе пра прадукцыйнасць сайта і хуткасць загрузкі, таму што нават доўгі файл CSS, верагодна, будзе даволі мала (бо гэта сапраўды проста тэкставы дакумент). Тым не менш, кожны маленькі біт падлічвае, калі гаворка ідзе пра хуткасці старонкі, так што калі вы можаце зрабіць свой стыль ліст кампактней, што гэта добрая ідэя. Гэта дзе «коска» можа быць вельмі зручна ў табліцы стыляў!
Коскай і CSS
Магчыма , вы задаваліся пытаннем, якую ролю адыгрывае коска ў CSS сінтаксісу селектара. Як і ў прапановах, коска прыносіць яснасць, а не кода ў сепаратара. Коскі ў селектар CSS аддзяляе некалькі селектараў ў межах адных і тых жа стыляў.
Напрыклад, давайце паглядзім на некаторыя ніжэй CSS.
га {колер: чырвоны; }
тд {колер: чырвоны; }
p.red {колер: чырвоны; }
DIV # firstred {колеру: чырвоны; }
З дапамогай гэтага сінтаксісу, вы кажаце , што вы хочаце й пазнаку, TD - тэгаў, тэг абзаца з класам чырвоным колеры, а тэг DIV з ID firstred ўсё , каб мець стыль чырвонага колеру.
Гэта цалкам прымальна CSS, але ёсць два істотных недахопу ў пісьмовай форме гэта наступным чынам:
- У будучыні, калі вы вырашыце змяніць колер шрыфта гэтых уласцівасцяў ў сіні колер, вы павінны ўнесці змены ў чатыры раз у табліцы стыляў.
- Ён дадае мноства дадатковых знакаў у табліцу стыляў, якія вам не патрэбныя. Гэтыя 4 тыпу не можа здацца залішнім, але калі вы будзеце працягваць рабіць гэта па ўсёй табліцы стыляў, лініі будуць падсумоўвацца і гэты ліст будзе шмат, значна больш, чым гэта павінна быць.
Каб пазбегнуць гэтых недахопаў, а таксама аптымізаваць файл CSS, мы паспрабуем з дапамогай косак.
Выкарыстанне коскай для падзелу селектараў
Замест таго, каб пісаць 4 асобнай C селектары і 4 правілы, вы можаце аб'яднаць усе гэтыя стылі ў адно правіле уласнасці шляхам вылучэння асобных селектараў з коскі. Вось як гэта будзе зроблена:
га, тд, p.red, отд # firstred {колеру: чырвоны; }
Коска ў асноўным выступае як слова «і» ўнутры селектара. Такім чынам , гэта ставіцца да ТК тэгі і г.д тэгі і тэгі абзаца з класам чырвоны , а сну тэг з ідэнтыфікатарам firstred. Гэта значыць менавіта тое, што было раней, але замест таго, 4 правілы CSS, у нас ёсць адно правіла, з некалькімі селектараў. Гэта тое, што коска робіць у селектары, гэта дазваляе нам мець некалькі селектараў ў адным правіле.
Мала таго, што гэты падыход зрабіць кампактней, больш чыстыя файлы CSS, але і робіць будучыя абнаўлення нашмат прасцей. Цяпер, калі вы хочаце змяніць колер ад чырвонага да сіняга, вам трэба толькі ўнесці змены ў адным месцы, а не па арыгінальным правілах 4 стылю мы мелі! Падумайце аб гэтых эканоміі часу праз увесь файл CSS, і вы можаце ўбачыць, як гэта зэканоміць вам час і прастора, у доўгім руне!
сінтаксіс Варыяцыя
Некаторыя людзі аддаюць перавагу, каб зрабіць CSS больш разборлівым, падзяляючы селектар на асобным радку, замест таго, каб пісаць усё гэта на адной лініі, як апісана вышэй. Вось як гэта будзе зроблена:
га,
тд,
p.red,
DIV # firstred
{
колер: чырвоны;
}
Звярніце ўвагу на тое, што вы размяшчае коску пасля кожнага селектара, а затым выкарыстоўваць «увядзіце» разарваць наступны селектар на сваю ўласную лінію. Вы НЕ дадаць коску пасля канчатковага выбару.
Выкарыстоўваючы коскай паміж вашым селектары, стварыць больш кампактную табліцу стыляў, якая прасцей абнавіць ў будучыні, і што лягчэй чытаць сёння!
Арыгінал артыкула Джэніфер Krynin. Пад рэдакцыяй Джэрэмі Girard на 5/8/17