Зошто едноставна запирка го поедноставува кодирањето
CSS или Cascading Style Sheets, се прифаќаат начинот на кој веб-дизајнерот може да додаде визуелни стилови на страницата. Со CSS, можете да го контролирате изгледот на страницата, боите, типографијата , сликата во позадина и многу повеќе. Во суштина, ако тоа е визуелен стил, тогаш CSS е начин да се донесат овие стилови на вашата веб-страница.
Кога додавате стилови на CSS во некој документ, може да забележите дека документот почнува да станува подолго и подолго. Дури и мала страница со само неколку страници може да заврши со голема архива на CSS - и многу голем сајт со многу и многу страници со уникатна содржина може да има многу големи CSS-датотеки. Ова е дополнето со одговорачки сајтови кои имаат многу медиумски прашања вклучени во стилските листови за да го сменат начинот на кој изгледаат визуализираните страници и страницата се поставува за различни екрани.
Да, CSS-датотеките може да бидат долги. Ова не е голем проблем кога станува збор за перформансите на сајтот и брзината на преземање, бидејќи дури и долгите CSS-датотеки веројатно ќе бидат прилично мали (бидејќи тоа е навистина само текстуален документ). Сепак, секој малку се брои кога станува збор за брзината на страницата, па ако можете да го направите вашиот стилски лист послаб, тоа е добра идеја. Ова е местото каде што "запирката" може да дојде во многу корисна во вашиот стилски лист!
Кома и CSS
Можеби сте се запрашале каква улога игра запирка во CSS селекторската синтакса. Како и во речениците, запирката дава јасност, а не код-на сепараторите. Завесата во селекторот CSS одвојува повеќе селектори во истиот стил.
На пример, да погледнеме некои CSS подолу.
ти (боја: црвено; }
td {боја: црвено; }
p.red {боја: црвено; }
div # firstred {color: red; }
Со оваа синтакса велите дека сакате таг - ознаки, таг - ознаки, ознаки за став со класата црвено, а div-тагот со ID прво да ги имаат сите црвени стилски бои.
Ова е совршено прифатлив CSS, но постојат две значајни недостатоци за пишување на овој начин:
- Во иднина, ако одлучите да ја смените бојата на фонтот на овие својства на сина, мора да ја направите таа промена четири пати во вашиот стилски лист.
- Таа додава многу екстра карактери во вашиот стилски лист што не ви е потребно. Овие 4 стилови можеби не изгледаат како претерани, но ако продолжите да го правите тоа преку целиот стилски лист, линиите ќе се додадат и тој лист ќе биде многу, многу поголем отколку што треба да биде.
За да можеме да ги избегнеме овие недостатоци, и да ја насочиме вашата CSS-датотека, ќе пробаме да користиме запирка.
Користење на запирки за одделни селектори
Наместо да пишувате 4 одделни селектори на CSS и 4 правила, можете да ги комбинирате сите овие стилови во едно сопствено правило со делење на одделните селектори со запирка. Еве како тоа ќе биде направено:
th, td, p.red, div # firstred {боја: црвено; }
Знакот за запирка во основа дејствува како зборот "и" во селекторот. Значи ова се однесува на t h таговите И td таговите и ознаки на став со класа црвено И div ознаката со ID прво. Тоа е токму она што го имавме порано, но наместо потреба од 4 CSS правила, имаме едно правило со повеќе селектори. Ова е она што запирката го прави во селекторот, ни овозможува да имаме повеќе селектори во едно правило.
Овој пристап не само што ги прави поситните, почисти CSS датотеки, туку исто така ги прави идните надградби многу полесни. Сега, ако сакавте да ја смените бојата од црвена во сина, само треба да ја направите промената на една локација, наместо преку првичните 4 стилски правила што ги имавме! Размислете за овие заштеди на време низ цела CSS датотека и можете да видите како ова ќе ве спаси и времето и просторот во долгиот рун!
Варијација на синтаксата
Некои луѓе избираат да го направат CSS почитлив со одвојување на секој селектор на сопствена линија, наместо да го пишуваат сето тоа на една линија како погоре. Ова е како тоа да се направи:
ти,
td,
p.red,
div # firstred
{
боја: црвена;
}
Забележете дека ќе поставите запирка после секој изборник, а потоа користете "enter" за да го скрши следниот селектор на сопствена линија. НЕ додавате запирка после конечниот селектор.
Со користење на запирки помеѓу вашите селектори, креирате покомпактен стилски лист кој полесно ќе се ажурира во иднина и што е полесно да се прочита денес!
Авторски напис од Џенифер Крајнин. Ревидирани од Џереми Жирар на 5/8/17