Како да изградите надворешен стилски лист

Користење на CSS Site Wide

Веб-страниците се комбинација на стил и структура, и на денешната интернет, најдобро е да ги задржите овие два аспекти на една локација одделена едни од други.

HTML отсекогаш бил она што им овозможува на веб-страницата со својата структура. Во раните денови на Веб, HTML, исто така, содржи стилски информации. Елементите како таг беа оптеретени преку HTML кодот, додавајќи информации за изглед и чувство заедно со структурни информации. Движењето за веб стандарди нѐ поттикна да ја смениме оваа практика и наместо да ги притиснеме сите стилски информации во CSS или Cascading Style Sheets. Преземајќи го овој чекор понатаму, тековните препораки се дека го користите она што е познато како "надворешен стилски лист" за потребите на вашиот веб-сајт.

Предности и недостатоци на надворешните стилски плочи

Една од најдобрите работи за Cascading Style Sheets е дека можете да ги користите за да ја задржите целата своја страница доследна. Најлесен начин да го направите ова е да поврзете или увезете надворешен стилски лист . Ако користите ист надворешен стилски лист за секоја страница од вашиот сајт, можете да бидете сигурни дека сите страници ќе имаат ист стил. Можете исто така да олесни да направите промени за иднината. Бидејќи секоја страници го користат истиот надворешен стилски лист, секоја промена на тој лист ќе влијае на секоја страница на страницата. Ова е многу подобро отколку да морате да ја менувате секоја страница поединечно!

Предности на надворешните стилски плочи

  • Можете да го контролирате изгледот и чувството на неколку документи одеднаш.
    • Ова е особено корисно ако работите со тим од луѓе за да ја креирате вашата веб-страница. Многу правила за стил може да биде тешко да се запомнат, и додека можеби имате упатство за испечатен стил, неефикасно и досадно е постојано да се прелистува преку него за да се утврди дали примерен текст треба да биде напишан во 12 поени Arial фонт или 14-точка курир. Имајќи сè на едно место, а од тоа место е, исто така, каде што ќе направите промени, можете да направите одржување многу полесно.
  • Можете да креирате класи на стилови кои потоа можат да се користат за многу различни HTML елементи .
    • Ако често употребувате одреден стил на фонтови за да нагласите различни работи на вашата страница, можете да користите атрибут на класа што го поставивте во вашиот стилски лист за да го добиете овој изглед и чувство, наместо да дефинирате специфичен стил за секој пример од акцент.
  • Можете лесно да ги групирате вашите стилови за да бидете поефикасни.
    • Сите методи на групирање што се достапни за CSS можат да се користат во надворешни стилски листови, и ова ви обезбедува поголема контрола и флексибилност на вашите страници.

Недостатоци на надворешните стилски плочи

  • Надворешните стилски листови можат да го зголемат времето за преземање, особено ако се екстремно големи. Бидејќи CSS-датотеката е посебен документ кој мора да биде вчитан, тоа ќе влијае на перформансите за извршување на преземањето.
  • Книгите за надворешни стилови стануваат многу брзо, бидејќи е тешко да се каже кога стилот веќе не е во употреба, бидејќи не е избришан кога страницата е отстранета. Правилното управување со вашите CSS датотеки е важно, особено ако повеќе луѓе работат на истата датотека.
  • Ако имате само една страница веб-страница, има надворешна датотека за CSS може да не биде неопходно, бидејќи имате само една страница во стил. Многу од придобивките од надворешните CSS се изгубени кога имате само една страница.

Како да креирате надворешен стилски лист

Надворешните стилски листови се создаваат со слична синтакса за документирање на стилски лист на ниво. Сепак, се што треба да го вклучите се селекторот и декларацијата. Исто како во стилски лист на ниво на документ, синтаксата за правило е:

селектор {сопственост: вредност;}

Зачувајте ги овие правила во текстуална датотека со наставката .css. Ова не е потребно, но тоа е добра навика да влезете, така што веднаш може да ги препознаете вашите стилски листови во листата на директориуми.

Откако ќе имате документ со стилски лист, треба да го поврзете со вашите веб-страници . Ова може да се направи на два начина:

  1. Поврзување
    1. За да поврзете стилски лист, користите HTML таг. Ова ги има атрибутите rel , type , and href . Атрибутот rel го кажува она што го поврзувате (во овој случај стил лист), типот го дефинира MIME-типот за прелистувачот, а href е патека до .css-датотеката.
  2. Внесување
    1. Ќе употребиш лист за увезен стил во стилски лист на ниво на документ, така што ќе може да ги внесете атрибутите на надворешен стилски лист, а да не ги изгубите документите специфични за документот. Вие го нарекувате на сличен начин да повикате поврзан стилски лист, само мора да се повика во декларација на стил на ниво на документ. Можете да увезете што повеќе надворешни стилски листови како што е потребно за одржување на вашата веб-страница.

Авторски напис од Џенифер Крајнин. Редаван од Џереми Жирар на 8/8/17